Initial CMPP frontend prototype

src/components/ui/Chart.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+import type { EChartsOption } from 'echarts';
+import * as echarts from 'echarts';
+
+type ChartProps = {
+  option: EChartsOption;
+  height?: number;
+};
+
+export function Chart({ option, height = 280 }: ChartProps) {
+  const chartRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!chartRef.current) {
+      return undefined;
+    }
+
+    const chart = echarts.init(chartRef.current);
+    chart.setOption(option);
+
+    const resizeObserver = new ResizeObserver(() => chart.resize());
+    resizeObserver.observe(chartRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+      chart.dispose();
+    };
+  }, [option]);
+
+  return <div className="ui-chart" ref={chartRef} style={{ height }} />;
+}