Function EChart

libs/@hashintel/design-system/src/e-chart.tsx:57–107

({
  options,
  sx,
  onChartInitialized,
})

};

export const EChart: FunctionComponent<GraphProps> = ({
  options,
  sx,
  onChartInitialized,
}) => {
  const wrapperRef = useRef<HTMLDivElement>(null);

  const [chart, setChart] = useState<Chart>();

  useEffect(() => {
    if (wrapperRef.current) {
      setChart(echarts.init(wrapperRef.current));
    }
  }, [wrapperRef]);

  useEffect(() => {
    if (chart) {
      onChartInitialized?.(chart);
    }
  }, [chart, onChartInitialized]);

  useEffect(() => {
    if (chart) {
      chart.setOption(options, false);
    }
  }, [chart, options]);

  useEffect(() => {
    if (chart && wrapperRef.current) {
      const resizeObserver = new ResizeObserver(() => {
        chart.resize();
      });

      resizeObserver.observe(wrapperRef.current);

      return () => {
        resizeObserver.disconnect();
      };
    }
  }, [chart]);

  return (
    <Box
      sx={[
        { width: "100%", height: "100%" },
        ...(Array.isArray(sx) ? sx : [sx]),
      ]}
      ref={wrapperRef}
    />
  );
};