feat(workbench): expand SCADA monitoring and investigation presentation

2026-11-07 19:50:14 +08:00
parent 0801e161ec
commit ba71e2d529
133 changed files with 6754 additions and 1438 deletions
@@ -0,0 +1,37 @@
+import { useLayoutEffect, useRef, type ComponentProps } from "react";
+import ReactECharts from "echarts-for-react";
+
+/** Resize the existing drawing at most once per frame without replacing its options. */
+export function ResponsiveChart({ option, height, onPointSelect }: {
+  option: ComponentProps<typeof ReactECharts>["option"];
+  height: number | "100%";
+  onPointSelect: (index: number) => void;
+}) {
+  const host = useRef<HTMLDivElement>(null);
+  const chart = useRef<ReactECharts>(null);
+  const ready = useRef(false);
+  useLayoutEffect(() => {
+    const element = host.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+    let frame = 0;
+    const observer = new ResizeObserver(() => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        if (!ready.current || !element.clientWidth || !element.clientHeight) return;
+        chart.current?.getEchartsInstance().resize({ width: "auto", height: "auto", animation: { duration: 0 } });
+      });
+    });
+    observer.observe(element);
+    return () => { cancelAnimationFrame(frame); observer.disconnect(); };
+  }, []);
+  return <div ref={host} style={{ height }}>
+    <ReactECharts ref={chart} option={option} opts={{ renderer: "svg" }} notMerge autoResize={false}
+      style={{ height: "100%" }} onChartReady={(instance) => {
+        ready.current = true;
+        instance.resize({ width: "auto", height: "auto", animation: { duration: 0 } });
+      }}
+      onEvents={{ click: (event: { componentType?: string; dataIndex?: number }) => {
+        if (event.componentType === "series" && typeof event.dataIndex === "number") onPointSelect(event.dataIndex);
+      } }} />
+  </div>;
+}