Basic Combos

Combining nodes into combos can reduce clutter in charts.

Add a custom property to each node’s data attribute and pass the property key to the combine prop to create combos.

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

import { Chart } from "regraph";

import data from "./data";

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

function BasicCombos(props) {
  const { items } = props;
  return (
    <Chart
      items={items}
      combine={{
        properties: ["subgroup", "group"],
        level: 2,
      }}
      layout={{ name: "organic" }}
      animation={{ animate: false }}
      options={{ navigation: false, overview: false }}
    />
  );
}

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

Data

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

function data() {
  return {
    id1: {
      data: {
        group: "Group 1",
        subgroup: "Subgroup 1",
      },
      ...style.primary1,
    },
    id2: {
      data: {
        group: "Group 1",
        subgroup: "Subgroup 1",
      },
      ...style.primary1,
    },
    id3: {
      data: {
        group: "Group 1",
        subgroup: "Subgroup 1",
      },
      ...style.primary1,
    },
    id4: {
      data: {
        group: "Group 1",
        subgroup: "Subgroup 2",
      },
      ...style.primary1,
    },
    id5: {
      data: {
        group: "Group 1",
        subgroup: "Subgroup 2",
      },
      ...style.primary1,
    },
    id6: {
      data: {
        group: "Group 2",
        subgroup: "Subgroup 3",
      },
      ...style.primary1,
    },
    id7: {
      data: {
        group: "Group 2",
        subgroup: "Subgroup 3",
      },
      ...style.primary1,
    },
    id10: {
      data: {
        group: "Group 2",
        subgroup: "Subgroup 3",
      },
      ...style.primary1,
    },
    id11: {
      data: {
        group: "Group 2",
        subgroup: "Subgroup 3",
      },
      ...style.primary1,
    },
    id8: {
      data: {
        group: "Group 2",
        subgroup: "Subgroup 4",
      },
      ...style.primary1,
    },
    id9: {
      data: {
        group: "Group 2",
        subgroup: "Subgroup 4",
      },
      ...style.primary1,
    },
    "id1-id2": {
      id1: "id1",
      id2: "id2",
      ...style.link,
    },
    "id1-id3": {
      id1: "id1",
      id2: "id3",
      ...style.link,
    },
    "id3-id4": {
      id1: "id3",
      id2: "id4",
      ...style.link,
    },
    "id5-id2": {
      id1: "id5",
      id2: "id2",
      ...style.link,
    },
    "id5-id9": {
      id1: "id5",
      id2: "id9",
      ...style.link,
    },
    "id6-id7": {
      id1: "id6",
      id2: "id7",
      ...style.link,
    },
    "id7-id3": {
      id1: "id7",
      id2: "id3",
      ...style.link,
    },
    "id7-id9": {
      id1: "id7",
      id2: "id9",
      ...style.link,
    },
    "id8-id9": {
      id1: "id8",
      id2: "id9",
      ...style.link,
    },
    "id10-id11": {
      id1: "id10",
      id2: "id11",
      ...style.link,
    },
    "id1-id11": {
      id1: "id1",
      id2: "id11",
      ...style.link,
    },
    "id4-id10": {
      id1: "id4",
      id2: "id10",
      ...style.link,
    },
  };
}

export default data;

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