Ping

Ping chart items to highlight them and draw the attention of users.

ping is a chart instance method and does not affect the ReGraph state.

import React, { useRef } from "react";
import { createRoot } from "react-dom/client";

import { Chart } from "regraph";

import { data, pingOptions, positions } from "./data";

export const Demo = () => <Ping items={data} />;

function Ping(props) {
  const chartRef = useRef();
  const { items } = props;

  const ping = ({ id }) => {
    if (id) {
      chartRef.current.ping({ [id]: true }, pingOptions);
    }
  };

  return (
    <Chart
      ref={chartRef}
      items={items}
      positions={positions}
      onClick={ping}
      options={{ navigation: false, overview: false }}
    />
  );
}

const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);

Data

import { style } from "@ci/theme/rg/js/storyStyles";

export const data = {
  node0: { ...style.primary1, label: { ...style.primaryLabel1, text: "Click me!" } },
  node1: { ...style.primary1, label: { ...style.primaryLabel1, text: "Click me!" } },
  link0: {
    ...style.link,
    id1: "node0",
    id2: "node1",
    label: { text: "Click me, too!" },
  },
};

export const pingOptions = {
  ...style.secondary1,
  haloRadius: 100,
  haloWidth: 30,
  linkWidth: 20,
  time: 500,
  repeat: 1,
};

export const positions = {
  node0: { x: -75, y: -75 },
  node1: { x: 75, y: 75 },
};

HTML

<!doctype html>
<html>
  <body>
    <div id="regraph" style="height: 100vh"></div>
    <script type="module" src="./code.jsx"></script>
  </body>
</html>

Search

See also

Terms of use