Basic Chart

Click on the buttons above the chart to add or remove nodes.

ReGraph has full type definitions. See index.d.ts for Chart, TimeBar and object format definitions, and analysis.d.ts for analysis functions.

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

import omitBy from "lodash/omitBy";
import { Chart, type Items, type Link, type Node } from "regraph";

import initialData, { type Data } from "./data";
import { style } from "@ci/theme/rg/js/storyStyles";

import "@ci/theme/rg/css/button.css";
import "@ci/theme/rg/css/layout.css";

interface Props {
  data: Data;
}

export const Demo = () => <BasicChart data={initialData()} />;

function BasicChart(props: Props) {
  const { data } = props;
  const ref = createRef<Chart>();

  const [state, setState] = useState({
    count: 1,
    items: data.items,
    layout: data.layout,
  });

  const addNodeAndLink = () => {
    setState((current) => {
      const { count, items } = current;
      const node: Node = { label: { text: `${count}` }, ...style.primary1 };
      const link: Link = { id1: "node0", id2: `node${count}` };
      const allItems: Items = {
        ...items,
        [`node${count}`]: node,
        [`link${count}`]: link,
      };
      return { ...current, count: count + 1, items: allItems };
    });
  };

  const remove = () => {
    const { count, items } = state;
    if (count > 1) {
      const nextItems = omitBy(items, (value, key) => parseInt(key.substr(4), 10) === count - 1);
      setState((current) => {
        return { ...current, count: count - 1, items: nextItems };
      });
    }
  };

  const click = ({ id }: Chart.PreventablePointerEvent) => {
    const { items } = state;
    if (id != null && items[id] && ref.current) {
      ref.current.ping(id);
    }
  };

  return (
    <div className="story">
      <div className="options">
        <button type="button" onClick={addNodeAndLink}>
          Add
        </button>
        <button type="button" onClick={remove} disabled={state.count <= 1}>
          Remove
        </button>
      </div>
      <div className="chart-wrapper">
        <Chart
          ref={ref}
          items={state.items}
          layout={state.layout}
          animation={{ animate: true, time: 650 }}
          onClick={click}
          options={{ navigation: false, overview: false }}
        />
      </div>
    </div>
  );
}

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

Data

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

function initialData() {
  return {
    items: {
      node0: {
        label: { ...style.primaryLabel2, text: "Press the Add button" },
        ...style.primary2,
      },
    },
    layout: { name: "organic", packing: "rectangle" },
  };
}

export default initialData;

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