Animation

ReGraph animates any changes to its state.

To loop an animation, pass new states to ReGraph at intervals.

You can set animate to false to disable animation.

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

import mapValues from "lodash/mapValues";
import { Chart } from "regraph";

import data, { styles } from "./data";

const layout = { name: "radial", top: ["node-0-"] };

const transitionTime = 500;

function styledItems(items, highlightFunction = () => false) {
  return mapValues(items, (item, id) => {
    // in this demo the structure of the id is used to tell nodes from links
    const type = id.substr(0, 4);
    const newStyle = styles[highlightFunction(id) ? "highlight" : "plain"][type];
    return { ...item, ...newStyle };
  });
}

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

function Animation(props) {
  const { items } = props;

  const [state, setState] = useState({
    step: 0,
    up: true,
  });

  const highlightFunction = (id) => {
    const { step } = state;
    return Number(id.match(/-(\d+)-/)[1]) < step;
  };

  useEffect(() => {
    const timer = setTimeout(() => {
      const { step, up } = state;
      if (up) {
        if (step === 5) {
          setState({ up: false, step: 4 });
        } else {
          setState({ up: true, step: step + 1 });
        }
      } else if (step === 0) {
        setState({ up: true, step: 1 });
      } else {
        setState({ up: false, step: step - 1 });
      }
    }, transitionTime);
    return () => clearTimeout(timer);
  }, [state]);

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <Chart
        items={styledItems(items, highlightFunction)}
        layout={layout}
        animation={{ animate: true, time: transitionTime }}
        options={{ overview: false, navigation: false }}
      />
    </div>
  );
}

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

Data

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

export const styles = {
  plain: {
    node: {
      color: style.colors.hackedCharcoal,
    },
    link: {
      color: style.colors.hackedCharcoal,
      width: 2,
    },
  },
  highlight: {
    node: {
      ...style.primary2,
    },
    link: {
      ...style.primary1,
      width: 6,
    },
  },
};

function data() {
  const items = {};
  const center = "node-0-";
  items[center] = {};
  for (let i = 1; i <= 10; i += 1) {
    const inner = `node-2-${i}`;
    items[inner] = {};
    items[`link-1-${i}`] = { id1: center, id2: inner };
    for (let j = 1; j <= 3; j += 1) {
      const outer = `node-4-${10 * i + j}`;
      items[outer] = {};
      items[`link-3-${10 * i + j}`] = { id1: inner, id2: outer };
    }
  }
  return items;
}

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