d2aura 26.0.11 → 26.0.13

package/coreui/components/edaManagerComponent/components/edaGraphPanel.js

@@ -1,22 +1,23 @@
-import React from "react";
-import { EdaBaseDataPanel } from "./edaDataBasePanel";
-import { withSharedSampleRangeContext } from "../context/sharedSampleRangeWrapper";
-import ReactEcharts from "echarts-for-react";
-import { Button, Checkbox, ConfigProvider, Space } from "antd";
-import ExtendedDataGrid from "d2coreui/components/grid/extendedDataGrid";
-import i18n from "d2core/i18n/i18n";
-import dayjs from "d2core/dayjs";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { SharedSampleRangeContext } from "../context/sharedSampleRange";
+import { EdaVectorDataContext } from "../context/edaVectorDataContext";
+import { Button, Checkbox, ConfigProvider, Space, theme } from "antd";
 import { LocaleHolder } from "d2core/i18n/localeHolder";
-import { DownloadOutlined, RetweetOutlined, StockOutlined, ZoomInOutlined } from "@ant-design/icons";
 import { createStyles } from "antd-style";
-import WithCss from "d2coreui/components/style/withCss";
-import memoizeOne from "memoize-one";
+import { DownloadOutlined, RetweetOutlined, StockOutlined, ZoomInOutlined } from "@ant-design/icons";
+import i18n from "d2core/i18n/i18n";
+import ReactEcharts from "echarts-for-react";
+import dayjs from "d2core/dayjs";
+import ExtendedDataGrid from "d2coreui/components/grid/extendedDataGrid";
+import { EdaDataBasePanel } from "./edaDataBasePanel";
+import { formatValue } from "../utils/utils";
 const useStyles = createStyles(({ css, token }) => {
     return {
         baseLayout: css `
             display: flex;
             flex-direction: column;
             gap: ${token.paddingXXS}px;
+            height: 100%;
 
             > .chart {
                 display: flex;
@@ -48,211 +49,146 @@ const rowSelection = {
     checkboxes: false,
 };
 const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
-const ColoredCheckbox = ({ index, children, ...props }) => {
-    const theme = React.useMemo(() => ({
-        token: {
-            colorPrimary: colors[index % colors.length],
+export const EdaGraphPanel = ({ api, pageSize, type, data, isActive, showTimeWindow, showChartLegend, size }) => {
+    const mask = LocaleHolder.getDateTimeFormat(true, false, false, true);
+    const css = useStyles();
+    const range = useContext(SharedSampleRangeContext);
+    const dataContext = useContext(EdaVectorDataContext);
+    const chartInstance = useRef(null);
+    const chartContainerRef = useRef(null);
+    const gridApi = useRef(null);
+    const { token } = theme.useToken();
+    const [labelData, setLabelData] = useState(undefined);
+    const [showLegend, setShowLegend] = useState(!!showChartLegend);
+    const [dataZoom, setDataZoom] = useState(false);
+    const chartOptions = useMemo(() => ({
+        grid: {
+            bottom: 60 + 2 * token.paddingXXS + (!showLegend ? 30 : 0),
+            top: token.padding
         },
-        hashed: true,
-    }), [index]);
-    return (React.createElement(ConfigProvider, { theme: theme },
-        React.createElement(Checkbox, { ...props }, children)));
-};
-class EdaGraphPanel extends EdaBaseDataPanel {
-    constructor(props) {
-        super(props);
-        this.mask = LocaleHolder.getDateTimeFormat(true, false, false, true);
-        this.chartInstance = null;
-        this.tooltipFormatter = this.tooltipFormatter.bind(this);
-        this.legendSelectChanged = this.legendSelectChanged.bind(this);
-        this.checkboxCellRenderer = this.checkboxCellRenderer.bind(this);
-        this.onHeaderCheckboxToggle = this.onHeaderCheckboxToggle.bind(this);
-        this.getOptions = memoizeOne(this.getOptions);
-    }
-    async componentDidUpdate(prevProps, prevState) {
-        await super.componentDidUpdate(prevProps, prevState);
-        if (prevState.labelData !== this.state.labelData) {
-            this.setState({ columnDefs: this.getColumnDefs() });
-        }
-    }
-    getDefaultDataBaseState(props) {
-        return {
-            columnDefs: this.getColumnDefs(),
-            showLegend: props.showChartLegend,
-            dataZoom: false,
-        };
-    }
-    onDataLoaded(data, vectors) {
-        const { labelData } = this.state;
-        if (labelData === undefined) {
-            const chartSeries = vectors.map((v) => {
-                const values = data[v.ID] || [];
-                return {
-                    name: v.DisplayName ?? String(v.ID),
-                    id: v.ID,
-                    type: 'line',
-                    symbol: 'none',
-                    sampling: "minmax",
-                    step: "end",
-                    lineStyle: {
-                        width: 1,
-                    },
-                    data: values.map(v => [v.Value.valueTime, v.Value.value]),
-                    animationDuration: 300,
-                    animationEasing: 'exponentialOut',
-                };
-            });
-            const selectedMap = {};
-            const labels = vectors.map((v, index) => ({ ...v, id: index, visible: true, invalid: false }));
-            labels?.forEach(item => {
-                selectedMap[item.DisplayName] = item.visible;
-            });
-            this.chartInstance?.setOption({ series: chartSeries, legend: { selected: selectedMap } }, { replaceMerge: ['series'] });
-            this.setState({ labelData: labels });
-        }
-        else {
-            const newLabelData = [...labelData];
-            newLabelData.forEach((row) => {
-                const values = data[row.ID];
-                this.chartInstance?.setOption({ series: [{ name: row.DisplayName, id: row.ID, data: values?.map(v => [v.Value.valueTime, v.Value.value]) }] });
-                row.invalid = !values;
-            });
-            this.setState({ labelData: newLabelData });
-        }
-    }
-    onDataSourceChanged() {
-        this.setState({ labelData: undefined });
-    }
-    onLoadVectors(vectors) {
-        const { labelData } = this.state;
-        if (labelData) {
-            return vectors.filter((v) => labelData.find((l) => l.ID === v.ID && l.visible));
-        }
-        return vectors;
-    }
-    renderContent(token) {
-        const { showLegend } = this.state;
-        return (React.createElement(WithCss, { useStyles: useStyles }, (css) => React.createElement("div", { className: css.styles.baseLayout },
-            this.renderChart(token),
-            showLegend && this.renderLegend(token))));
-    }
-    renderChart(token) {
-        const { size } = this.props;
-        const { showLegend, dataZoom } = this.state;
-        return (React.createElement("div", { className: "chart" },
-            React.createElement(Space, null,
-                React.createElement(Button, { size: size, icon: React.createElement(StockOutlined, null), title: i18n("Show Legend"), type: showLegend ? "primary" : "default", onClick: () => this.setState({ showLegend: !showLegend }) }),
-                React.createElement(Space.Compact, null,
-                    React.createElement(Button, { size: size, icon: React.createElement(ZoomInOutlined, null), title: i18n("Zoom"), type: dataZoom ? "primary" : "default", onClick: () => {
-                            this.setState({ dataZoom: !dataZoom }, () => {
-                                this.chartInstance?.dispatchAction({ type: 'takeGlobalCursor', key: 'dataZoomSelect', dataZoomSelectActive: this.state.dataZoom });
-                            });
-                        } }),
-                    React.createElement(Button, { size: size, icon: React.createElement(RetweetOutlined, null), title: i18n("Restore"), onClick: () => {
-                            this.setState({ dataZoom: false }, () => {
-                                this.chartInstance?.dispatchAction({ type: 'dataZoom', start: 0, end: 100 });
-                                this.chartInstance?.dispatchAction({ type: 'takeGlobalCursor', key: 'dataZoomSelect', dataZoomSelectActive: false });
-                            });
-                        } })),
-                React.createElement(Button, { size: size, icon: React.createElement(DownloadOutlined, null), title: i18n("Export as PNG"), onClick: () => {
-                        if (this.chartInstance) {
-                            const img = this.chartInstance.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff', excludeComponents: ['dataZoom', 'toolbox'] });
-                            const link = document.createElement("a");
-                            link.href = img;
-                            link.download = "chart.png";
-                            document.body.appendChild(link);
-                            link.click();
-                            document.body.removeChild(link);
-                        }
-                    } })),
-            React.createElement(ReactEcharts, { option: this.getOptions(token, !!showLegend), onChartReady: (instance) => {
-                    this.chartInstance = instance;
-                    instance.on("legendselectchanged", this.legendSelectChanged);
-                } })));
-    }
-    getOptions(token, showLegend) {
-        return {
-            grid: {
-                bottom: 60 + 2 * token.paddingXXS + (!showLegend ? 30 : 0),
-                top: token.padding
+        tooltip: {
+            backgroundColor: token.colorBgElevated,
+            borderColor: token.colorBorder,
+            textStyle: { color: token.colorText },
+            extraCssText: `box-shadow: ${token.boxShadowSecondary}; border-radius: ${token.borderRadius}px;`,
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
             },
-            tooltip: {
-                backgroundColor: token.colorBgElevated,
-                borderColor: token.colorBorder,
-                textStyle: { color: token.colorText },
-                extraCssText: `box-shadow: ${token.boxShadowSecondary}; border-radius: ${token.borderRadius}px;`,
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'cross',
-                },
-                appendTo: 'body',
-                formatter: this.tooltipFormatter
-            },
-            textStyle: {
-                fontFamily: token.fontFamily,
-                fontSize: token.fontSize,
-                color: token.colorText
+            appendTo: 'body',
+            formatter: (p) => tooltipFormatter(p, mask, dataContext),
+        },
+        textStyle: {
+            fontFamily: token.fontFamily,
+            fontSize: token.fontSize,
+            color: token.colorText
+        },
+        xAxis: {
+            axisLine: { lineStyle: { color: token.colorTextSecondary } },
+            axisTick: { lineStyle: { color: token.colorTextTertiary } },
+            axisLabel: {
+                color: token.colorTextSecondary,
+                hideOverlap: true,
             },
-            xAxis: {
-                axisLine: { lineStyle: { color: token.colorTextSecondary } },
-                axisTick: { lineStyle: { color: token.colorTextTertiary } },
-                axisLabel: {
-                    color: token.colorTextSecondary,
-                    hideOverlap: true,
-                    formatter: (value) => dayjs(value).format(this.mask),
-                },
-                splitLine: { lineStyle: { color: token.colorBorder } },
-                type: 'time',
-                boundaryGap: [0, 0],
-                axisPointer: {
-                    label: {
-                        formatter: (value) => dayjs(value.value).format(this.mask),
-                    }
+            splitLine: { lineStyle: { color: token.colorBorder } },
+            type: 'time',
+            boundaryGap: [0, 0],
+            axisPointer: {
+                label: {
+                    formatter: (value) => dayjs(value.value).format(mask),
                 }
-            },
-            yAxis: {
-                axisLine: { lineStyle: { color: token.colorTextSecondary } },
-                axisTick: { lineStyle: { color: token.colorTextTertiary } },
-                axisLabel: { color: token.colorTextSecondary },
-                splitLine: { lineStyle: { color: token.colorBorder } },
-                type: 'value'
-            },
-            dataZoom: [
-                {
-                    bottom: showLegend ? token.paddingXXS + 8 : 40,
-                    left: 130,
-                    right: 130,
-                    type: 'slider',
-                    show: true,
-                    realtime: true,
-                    labelFormatter: (value) => dayjs(value).format(this.mask),
-                },
-                {
-                    type: 'inside',
-                    realtime: true,
-                }
-            ],
-            legend: {
-                show: !showLegend,
-                type: "scroll",
-                bottom: 0,
-            },
-            toolbox: {
+            }
+        },
+        yAxis: {
+            axisLine: { lineStyle: { color: token.colorTextSecondary } },
+            axisTick: { lineStyle: { color: token.colorTextTertiary } },
+            axisLabel: { color: token.colorTextSecondary },
+            splitLine: { lineStyle: { color: token.colorBorder } },
+            type: 'value'
+        },
+        dataZoom: [
+            {
+                bottom: showLegend ? token.paddingXXS + 8 : 40,
+                left: 130,
+                right: 130,
+                type: 'slider',
                 show: true,
-                itemSize: 0,
-                right: 9999,
-                feature: {
-                    dataZoom: {
-                        yAxisIndex: 'none',
-                    },
-                    restore: {}
-                }
+                realtime: true,
+                labelFormatter: (value) => dayjs(value).format(mask),
             },
-            color: colors,
-        };
-    }
-    renderLegend(theme) {
-        const { columnDefs, labelData } = this.state;
+            {
+                type: 'inside',
+                realtime: true,
+            }
+        ],
+        legend: {
+            show: !showLegend,
+            type: "scroll",
+            bottom: 0,
+        },
+        toolbox: {
+            show: true,
+            itemSize: 0,
+            right: 9999,
+            feature: {
+                dataZoom: {
+                    yAxisIndex: 'none',
+                },
+                restore: {}
+            }
+        },
+        color: colors,
+    }), [token, showLegend, mask, dataContext?.vectors]);
+    const legendSelectChanged = (params) => {
+        if (chartInstance.current !== null) {
+            const name = params.name;
+            const row = dataContext?.vectors.find((r) => r.DisplayName === name);
+            if (row) {
+                dataContext?.toggleVectorVisibility(row.ID, params.selected[name]);
+            }
+        }
+    };
+    const legendSelectRef = useRef(legendSelectChanged);
+    useEffect(() => {
+        legendSelectRef.current = legendSelectChanged;
+    }, [legendSelectChanged]);
+    useEffect(() => {
+        if (!chartContainerRef.current || !chartInstance.current) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            chartInstance.current?.resize();
+        });
+        resizeObserver.observe(chartContainerRef.current);
+        return () => resizeObserver.disconnect();
+    }, []);
+    const renderChart = () => (React.createElement(Space, { direction: "vertical", className: "chart" },
+        React.createElement(Space, null,
+            React.createElement(Button, { size: size, icon: React.createElement(StockOutlined, null), title: i18n("Show Legend"), type: showLegend ? "primary" : "default", onClick: () => setShowLegend(!showLegend) }),
+            React.createElement(Space.Compact, null,
+                React.createElement(Button, { size: size, icon: React.createElement(ZoomInOutlined, null), title: i18n("Zoom"), type: dataZoom ? "primary" : "default", onClick: () => setDataZoom(!dataZoom) }),
+                React.createElement(Button, { size: size, icon: React.createElement(RetweetOutlined, null), title: i18n("Restore"), onClick: () => {
+                        setDataZoom(false);
+                        chartInstance.current?.dispatchAction({ type: 'dataZoom', start: 0, end: 100 });
+                        chartInstance.current?.dispatchAction({ type: 'takeGlobalCursor', key: 'dataZoomSelect', dataZoomSelectActive: false });
+                    } })),
+            React.createElement(Button, { size: size, icon: React.createElement(DownloadOutlined, null), title: i18n("Export as PNG"), onClick: () => {
+                    if (chartInstance.current) {
+                        const img = chartInstance.current.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff', excludeComponents: ['dataZoom', 'toolbox'] });
+                        const link = document.createElement("a");
+                        link.href = img;
+                        link.download = "chart.png";
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+                    }
+                } })),
+        React.createElement("div", { style: { width: "100%", height: "100%" }, ref: chartContainerRef },
+            React.createElement(ReactEcharts, { style: { width: "100%", height: "100%" }, option: chartOptions, lazyUpdate: true, onChartReady: (instance) => {
+                    chartInstance.current = instance;
+                    instance.on("legendselectchanged", (params) => legendSelectRef.current(params));
+                } }))));
+    const renderLegend = () => {
         const height = 35 + 28 * (labelData ?? []).length + 15;
         return (React.createElement("div", { className: "legend", style: { flex: `0 0 ${height}px` } },
             React.createElement(ExtendedDataGrid, { columnDefs: columnDefs, onLoadData: callback => {
@@ -260,134 +196,210 @@ class EdaGraphPanel extends EdaBaseDataPanel {
                 }, defaultGridConfiguration: {
                     pageSize: -1,
                 }, onGridReady: (params) => {
-                    this.gridApi = params.api;
-                }, rowData: labelData, tablePanelStyle: { marginTop: `0 ${theme.paddingXXS}` }, panelStyle: { padding: `0 ${theme.paddingXXS}px` }, toolbar: {
+                    gridApi.current = params.api;
+                }, rowData: labelData, tablePanelStyle: { marginTop: `0 ${token.paddingXXS}` }, panelStyle: { padding: `0 ${token.paddingXXS}px` }, toolbar: {
                     hideRecordCount: true,
                     renderToolbar: () => React.createElement(React.Fragment, null)
                 }, search: {
                     hidden: true,
                     searchButtonHidden: true,
                 }, noRecordsOverlayRenderer: () => React.createElement(React.Fragment, null), rowSelection: rowSelection })));
-    }
-    legendSelectChanged(params) {
-        const { labelData } = this.state;
-        if (labelData !== undefined && this.chartInstance !== null) {
-            const name = params.name;
-            const result = [...labelData];
-            const row = result.find((r) => r.DisplayName === name);
-            if (row) {
-                row.visible = params.selected[name];
-                if (row.visible && row.invalid) {
-                    this.loadVectorData([row]);
-                    return;
+    };
+    const onHeaderCheckboxToggle = async (checked) => {
+        dataContext?.setAllVectorVisibility(checked);
+    };
+    const checkboxCellRenderer = (params) => {
+        return (React.createElement(ColoredCheckbox, { index: params.data.id, checked: dataContext?.visible.has(params.data.ID), onChange: async (event) => {
+                const row = dataContext?.vectors.find((l) => l.ID === params.data.ID);
+                if (row) {
+                    dataContext?.toggleVectorVisibility(params.data.ID, event.target.checked);
                 }
+            } }));
+    };
+    const CustomHeader = (props) => {
+        return (React.createElement("div", { className: "custom-header-wrapper" },
+            React.createElement(Checkbox, { checked: dataContext?.allVectorsVisible() && !dataContext?.noVectorsVisible(), indeterminate: !dataContext?.allVectorsVisible() && !dataContext?.noVectorsVisible(), onChange: (e) => {
+                    props.onToggle(e.target.checked);
+                } })));
+    };
+    const getColumnDefs = () => ([
+        {
+            field: "checkbox",
+            headerName: i18n("Checkbox"),
+            headerComponent: CustomHeader,
+            headerComponentParams: {
+                onToggle: onHeaderCheckboxToggle
+            },
+            maxWidth: 32,
+            width: 32,
+            minWidth: 32,
+            cellRenderer: checkboxCellRenderer,
+            group: i18n("Basic Columns")
+        },
+        {
+            field: "DisplayName",
+            headerName: i18n("Name"),
+            group: i18n("Basic Columns")
+        },
+        {
+            field: "Min",
+            headerName: i18n("Min"),
+            valueGetter: (props) => dataContext?.visible.has(props.data.ID) ? props.data.Min : undefined,
+            valueFormatter: (props) => formatValue(props.value, props.data.RoundingType, props.data.RoundingPlaces),
+            type: ["alignRight"],
+            group: i18n("Basic Columns")
+        },
+        {
+            field: "Max",
+            headerName: i18n("Max"),
+            valueGetter: (props) => dataContext?.visible.has(props.data.ID) ? props.data.Max : undefined,
+            valueFormatter: (props) => formatValue(props.value, props.data.RoundingType, props.data.RoundingPlaces),
+            type: ["alignRight"],
+            group: i18n("Basic Columns")
+        },
+        {
+            field: "Sum",
+            headerName: i18n("Sum"),
+            valueGetter: (props) => dataContext?.visible.has(props.data.ID) ? props.data.Sum : undefined,
+            valueFormatter: (props) => formatValue(props.value, props.data.RoundingType, props.data.RoundingPlaces),
+            type: ["alignRight"],
+            group: i18n("Basic Columns")
+        },
+        {
+            field: "Avg",
+            headerName: i18n("Average"),
+            valueGetter: (props) => dataContext?.visible.has(props.data.ID) ? props.data.Avg : undefined,
+            valueFormatter: (props) => formatValue(props.value, props.data.RoundingType, props.data.RoundingPlaces),
+            type: ["alignRight"],
+            group: i18n("Basic Columns")
+        },
+        {
+            field: "Units",
+            headerName: i18n("Units"),
+            valueGetter: (props) => dataContext?.visible.has(props.data.ID) ? props.data.Units : undefined,
+            group: i18n("Basic Columns")
+        },
+    ]);
+    const columnDefs = useMemo(() => getColumnDefs(), [dataContext?.data, dataContext?.visible]);
+    useEffect(() => {
+        const selectedMap = {};
+        dataContext?.vectors.forEach((vector) => {
+            selectedMap[vector.DisplayName] = dataContext?.visible.has(vector.ID);
+        });
+        chartInstance.current?.setOption({ legend: { selected: selectedMap } });
+    }, [dataContext?.visible]);
+    useEffect(() => {
+        if (type === undefined || data === undefined || !range || !dataContext) {
+            return;
+        }
+        const dataSourceChanged = dataContext.loadedType !== type || dataContext.loadedData !== data;
+        if (isActive) {
+            if (dataSourceChanged) {
+                if (range.vectorPage !== 1) {
+                    range.updateValues(range.btTotal, range.etTotal, range.sampling, 1);
+                }
+                setLabelData(undefined);
+                dataContext.loadAllData(type, data);
+                return;
             }
-            this.setState({ labelData: result });
+            dataContext.loadSpecificVectors(dataContext.vectors.filter((v) => dataContext.visible.has(v.ID)));
         }
-    }
-    tooltipFormatter(p) {
-        const params = p;
-        const values = params[0].value;
-        const date = dayjs(values[0]).format(this.mask);
-        let list = `<div style="margin-bottom: 4px;">${date}</div>`;
-        params.forEach((item) => {
-            const values = item.value;
-            list += `<div style="display: flex; justify-content: space-between; align-items: center; min-width: 150px; gap: 20px;">`;
-            list += `<span style="display: flex; align-items: center;">${item.marker}<span style="margin-left: 5px;">${item.seriesName}</span></span>`;
-            list += `<span style="font-weight: bold;">${values[1] !== null ? LocaleHolder.formatNumber(values[1]) : "Invalid"}</span></div>`;
-        });
-        return list;
-    }
-    checkboxCellRenderer(params) {
-        const checked = params.data.visible;
-        return (React.createElement(ColoredCheckbox, { index: params.data.id, checked: checked, onChange: (event) => {
-                const { labelData } = this.state;
-                if (labelData) {
-                    const result = [...labelData];
-                    const row = labelData.find((l) => l.ID === params.data.ID);
-                    if (row) {
-                        row.visible = event.target.checked;
-                        this.chartInstance?.setOption({ legend: { selected: { [row.DisplayName]: row.visible } } });
-                        if (row.visible && row.invalid) {
-                            this.loadVectorData([row]);
-                            return;
-                        }
+        else if (dataSourceChanged) {
+            setLabelData(undefined);
+        }
+    }, [isActive, type, data, showTimeWindow, range]);
+    useEffect(() => {
+        if (dataContext?.data && dataContext.initialized) {
+            if (labelData === undefined) {
+                const chartSeries = dataContext.vectors.map((v) => {
+                    const values = dataContext.data[v.ID] || [];
+                    return {
+                        name: v.DisplayName ?? String(v.ID),
+                        id: v.ID,
+                        type: 'line',
+                        symbol: 'none',
+                        sampling: "minmax",
+                        step: "end",
+                        lineStyle: {
+                            width: 1,
+                        },
+                        data: values.data?.data?.map((v) => [v.Value.valueTime, v.Value.value]) ?? [],
+                        animationDuration: 300,
+                        animationEasing: 'exponentialOut',
+                    };
+                });
+                const selectedMap = {};
+                const labels = dataContext.vectors.map((v, index) => {
+                    const stats = dataContext.data[v.ID]?.data?.stats;
+                    return {
+                        ...v,
+                        id: index,
+                        Min: stats?.Min.value,
+                        Max: stats?.Max.value,
+                        Sum: stats?.Sum.value,
+                        Avg: stats?.Avg.value,
+                    };
+                });
+                labels?.forEach((item) => {
+                    selectedMap[item.DisplayName] = dataContext.isVectorVisible(item.ID);
+                });
+                chartInstance.current?.setOption({ series: chartSeries, legend: { selected: selectedMap } }, { replaceMerge: ['series'] });
+                setLabelData(labels);
+            }
+            else {
+                const newLabelData = [...labelData];
+                newLabelData.forEach((row) => {
+                    const values = dataContext.data[row.ID]?.data;
+                    if (values?.data) {
+                        chartInstance.current?.setOption({ series: [{ name: row.DisplayName, id: row.ID, data: values.data.map(v => [v.Value.valueTime, v.Value.value]) }] });
+                        row.Min = values.stats?.Min.value;
+                        row.Max = values.stats?.Max.value;
+                        row.Sum = values.stats?.Sum.value;
+                        row.Avg = values.stats?.Avg.value;
                     }
-                    this.setState({ labelData: result });
-                }
-            } }));
-    }
-    onHeaderCheckboxToggle(checked) {
-        const { labelData } = this.state;
-        if (!labelData) {
-            return;
+                });
+                setLabelData(newLabelData);
+            }
         }
-        const nextLabelData = [...labelData];
-        const selectedMap = {};
-        nextLabelData.forEach((l) => {
-            l.visible = checked;
-            selectedMap[l.DisplayName] = checked;
-        });
-        this.chartInstance?.setOption({ legend: { selected: selectedMap } });
-        this.setState({ labelData: nextLabelData });
+    }, [dataContext?.data, dataContext?.vectors, dataContext?.initialized]);
+    useEffect(() => {
+        chartInstance.current?.dispatchAction({ type: 'takeGlobalCursor', key: 'dataZoomSelect', dataZoomSelectActive: dataZoom });
+    }, [dataZoom]);
+    if (range && dataContext) {
+        return (React.createElement(EdaDataBasePanel, { api: api, type: type, data: data, size: size, range: range, dataContext: dataContext, showTimeWindow: showTimeWindow, pageSize: pageSize },
+            React.createElement("div", { className: css.styles.baseLayout },
+                renderChart(),
+                showLegend && renderLegend())));
     }
-    getColumnDefs() {
-        return [
-            {
-                field: "checkbox",
-                headerName: i18n("Checkbox"),
-                headerComponent: CustomHeader,
-                headerComponentParams: {
-                    labelData: this.state?.labelData,
-                    onToggle: this.onHeaderCheckboxToggle
-                },
-                maxWidth: 32,
-                width: 32,
-                minWidth: 32,
-                cellRenderer: this.checkboxCellRenderer,
-                group: i18n("Basic Columns")
-            },
-            {
-                field: "DisplayName",
-                headerName: i18n("Name"),
-                group: i18n("Basic Columns")
-            },
-            {
-                field: "Min",
-                headerName: i18n("Min"),
-                group: i18n("Basic Columns")
-            },
-            {
-                field: "Max",
-                headerName: i18n("Max"),
-                group: i18n("Basic Columns")
-            },
-            {
-                field: "Sum",
-                headerName: i18n("Sum"),
-                group: i18n("Basic Columns")
-            },
-            {
-                field: "Average",
-                headerName: i18n("Average"),
-                group: i18n("Basic Columns")
-            },
-            {
-                field: "Units",
-                headerName: i18n("Units"),
-                group: i18n("Basic Columns")
-            },
-        ];
+    else {
+        return React.createElement("h1", null, "no data");
     }
-}
-const CustomHeader = (props) => {
-    const { labelData, onToggle } = props;
-    const visibleCount = labelData?.filter((i) => i.visible).length ?? 0;
-    const totalCount = labelData?.length || 0;
-    return (React.createElement("div", { className: "custom-header-wrapper" },
-        React.createElement(Checkbox, { checked: totalCount > 0 && visibleCount === totalCount, indeterminate: visibleCount > 0 && visibleCount < totalCount, onChange: (e) => {
-                onToggle(e.target.checked);
-            } })));
 };
-export default withSharedSampleRangeContext(EdaGraphPanel);
+const ColoredCheckbox = ({ index, children, ...props }) => {
+    const theme = React.useMemo(() => ({
+        token: {
+            colorPrimary: colors[index % colors.length],
+        },
+        hashed: true,
+    }), [index]);
+    return (React.createElement(ConfigProvider, { theme: theme },
+        React.createElement(Checkbox, { ...props }, children)));
+};
+const tooltipFormatter = (p, mask, dataContext) => {
+    const params = p;
+    const values = params[0].value;
+    const date = dayjs(values[0]).format(mask);
+    let list = `<div style="margin-bottom: 4px;">${date}</div>`;
+    params.forEach((item) => {
+        const values = item.value;
+        const vectorInfo = dataContext?.vectors.find((v) => v.DisplayName === item.seriesName);
+        if (vectorInfo) {
+            const value = values[1] !== null ? (formatValue(values[1], vectorInfo.RoundingType, vectorInfo.RoundingPlaces) + " " + (vectorInfo.Units ?? "")) : "Invalid";
+            list += `<div style="display: flex; justify-content: space-between; align-items: center; min-width: 150px; gap: 20px;">`;
+            list += `<span style="display: flex; align-items: center;">${item.marker}<span style="margin-left: 5px;">${item.seriesName}</span></span>`;
+            list += `<span style="font-weight: bold;">${value}</span></div>`;
+        }
+    });
+    return list;
+};
 //# sourceMappingURL=edaGraphPanel.js.map