d2aura 23.0.0

package/coreui/components/d2Chart/d2ChartPanel.js

@@ -0,0 +1,325 @@
+import React from "react";
+import ReactEcharts from "echarts-for-react";
+import { compactChartOptions, d2ChartOptions } from "./d2ChartOptions";
+import { at } from "lodash";
+import i18n from "d2core/i18n/i18n";
+import { Empty } from "antd";
+import isEqual from "lodash/isEqual";
+import D2ChartTablePanel from "./d2ChartTablePanel";
+import { ModalDialog } from "d2coreui/components/modal/modalDialog";
+import D2ChartToolboxPanel from "./d2ChartToolboxPanel";
+import { LoadingOutlined } from "@ant-design/icons";
+import { LineStyleEnum } from "../../../api/types/d2ChartTypes";
+import D2ChartUtils from "../../../api/util/d2ChartUtils";
+class D2ChartPanel extends React.Component {
+    constructor(props) {
+        super(props);
+        this.chartInstance = null;
+        this.d2ChartPanelInModal = null;
+        this.d2ChartTablePanel = null;
+        this.state = {
+            tableItems: [],
+            missingData: [],
+            modalVisible: false,
+            calendarDataVisible: false,
+            missingDataVisible: true,
+        };
+        this.onSwitchCalendarData = this.onSwitchCalendarData.bind(this);
+        this.onSwitchLegend = this.onSwitchLegend.bind(this);
+    }
+    componentDidUpdate(prevProps) {
+        if (!isEqual(this.props.markArea, prevProps.markArea) && this.props.d2ChartRecords.length > 0) {
+            this.onReload();
+        }
+    }
+    onSwitchLegend(name) {
+        const tableData = this.state.tableItems;
+        const d2ChartTableItem = tableData.find(value => value.id === name);
+        if (d2ChartTableItem) {
+            this.chartInstance.dispatchAction({
+                type: d2ChartTableItem.visible ? "legendUnSelect" : "legendSelect",
+                name: name,
+            });
+            d2ChartTableItem.visible = !d2ChartTableItem.visible;
+            this.setState({ tableItems: tableData }, () => this.d2ChartTablePanel?.updateGrid());
+        }
+    }
+    onSwitchCalendarData() {
+        const calendarDataVisible = this.state.calendarDataVisible;
+        const option = this.chartInstance.getOption();
+        if (calendarDataVisible) {
+            this.prepareCalendarMarkarea(option.series, option.dataset[0]);
+            this.chartInstance.setOption(option);
+        }
+        const calendarSeries = option.series.filter((value) => value.name.startsWith("__markArea-calendar-"));
+        calendarSeries.forEach(value => {
+            this.chartInstance.dispatchAction({
+                type: calendarDataVisible ? "legendSelect" : "legendUnSelect",
+                name: value.name,
+            });
+        });
+    }
+    prepareCalendarMarkarea(series, dataset) {
+        if (this.props.d2ChartCalendarRecords) {
+            const markAreas = D2ChartUtils.calendarRecordsToMarkAreas(this.props.d2ChartCalendarRecords);
+            Object.keys(markAreas).forEach(key => {
+                const markAreaName = `__markArea-calendar-${key}`;
+                const markArea = {
+                    name: markAreaName,
+                    type: "line",
+                    sampling: D2ChartPanel.SAMPLING_MODE,
+                    markArea: markAreas[key],
+                    encode: {
+                        x: "timestamp",
+                        y: markAreaName,
+                    },
+                };
+                const seriesIndex = series.findIndex(value => value.name === markAreaName);
+                if (seriesIndex >= 0) {
+                    series[seriesIndex] = markArea;
+                }
+                else {
+                    series.push(markArea);
+                }
+                const dimensionsIndex = dataset.dimensions.findIndex((value) => value === markAreaName);
+                if (dimensionsIndex >= 0) {
+                    dataset.dimensions[dimensionsIndex] = markAreaName;
+                }
+                else {
+                    dataset.dimensions.push(markAreaName);
+                }
+            });
+        }
+    }
+    onSwitchMissingData() {
+        this.chartInstance.dispatchAction({
+            type: this.state.missingDataVisible ? "legendSelect" : "legendUnSelect",
+            name: "__markArea-missing-data",
+        });
+    }
+    setTooltip(option) {
+        option.tooltip = {
+            trigger: "axis",
+            position: (_pos, params) => {
+                const param = params[0];
+                if (param && param.data) {
+                    const data = this.state.tableItems;
+                    data.forEach((value, index) => {
+                        if (value.visible) {
+                            value.tooltipValue = param.data[index + 1];
+                        }
+                        else {
+                            value.tooltipValue = undefined;
+                        }
+                    });
+                    this.setState({ tableItems: data, tooltipTime: param.data[0] }, () => {
+                        this.d2ChartTablePanel?.updateGrid();
+                    });
+                }
+            },
+            formatter: (params) => {
+                if (Array.isArray(params)) {
+                    const seriesToCompare = params.filter(value => !value.seriesName.startsWith("__"));
+                    if (seriesToCompare.length === 2) {
+                        const data = seriesToCompare[0].data;
+                        const seriesName1 = seriesToCompare[0].seriesName;
+                        const seriesName2 = seriesToCompare[1].seriesName;
+                        const dimensions = seriesToCompare[0].dimensionNames;
+                        const value1 = data[dimensions.findIndex(value => value === seriesName1)];
+                        const value2 = data[dimensions.findIndex(value => value === seriesName2)];
+                        if (value1 !== undefined && value2 !== undefined) {
+                            const gap = value1 - value2;
+                            return `Gap: ${gap.toFixed(4)}`;
+                        }
+                    }
+                }
+                return "";
+            }
+        };
+    }
+    getUniqueId(code, index) {
+        return `${code}@${index}`;
+    }
+    getDiemnsions(currentSeries) {
+        return currentSeries.map((value, index) => this.getUniqueId(value.code, index));
+    }
+    getSeriesFields(currentSeries) {
+        return currentSeries.map((_, index) => `col${index}`);
+    }
+    getSeries(currentSeries, optionColors) {
+        return currentSeries.map((value, index) => {
+            return {
+                name: this.getUniqueId(value.code, index),
+                type: "line",
+                sampling: D2ChartPanel.SAMPLING_MODE,
+                symbol: "none",
+                step: "end",
+                color: optionColors[value.colorIndex !== undefined ? value.colorIndex : index % optionColors.length],
+                encode: {
+                    x: "timestamp",
+                    y: this.getUniqueId(value.code, index)
+                },
+                areaStyle: value.fillColor ? {} : undefined,
+                lineStyle: { type: value.lineStyle ?? LineStyleEnum.SOLID }
+            };
+        });
+    }
+    getTableItems(currentSeries, seriesFields, optionColors) {
+        return currentSeries.map((series, index) => {
+            const recordValues = this.props.d2ChartRecords.map(value => at(value, seriesFields[index])[0]).filter(value => value !== undefined);
+            const uniqueId = this.getUniqueId(series.code, index);
+            const [min, max, sum] = recordValues.reduce(([min, max, sum], val) => [Math.min(min, val), Math.max(max, val), sum + val], [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY, 0]);
+            return {
+                id: uniqueId,
+                displayName: series.name,
+                color: optionColors[series.colorIndex !== undefined ? series.colorIndex : index % optionColors.length],
+                visible: this.state.tableItems.find(value => value.id === uniqueId)?.visible ?? true,
+                min: recordValues.length === 0 ? undefined : min,
+                max: recordValues.length === 0 ? undefined : max,
+                avg: recordValues.length === 0 ? undefined : sum / recordValues.length,
+                sum: sum,
+            };
+        });
+    }
+    getDatasetSource(seriesFields) {
+        return this.props.d2ChartRecords.map(record => {
+            const seriesValuesInTime = at(record, seriesFields);
+            const roundedSeriesValues = seriesValuesInTime.map(value => value !== undefined && value !== null ? +value.toFixed(4) : undefined);
+            roundedSeriesValues.unshift(record.date.getTime());
+            return roundedSeriesValues;
+        });
+    }
+    onReload() {
+        const tableItems = [];
+        let missingData = [];
+        const option = this.chartInstance?.getOption();
+        if (option) {
+            const currentSeries = this.props.d2ChartSeries;
+            const seriesFields = this.getSeriesFields(currentSeries);
+            const series = this.getSeries(currentSeries, option.color);
+            const dataset = {
+                dimensions: ["timestamp", ...this.getDiemnsions(currentSeries)],
+                source: this.getDatasetSource(seriesFields),
+            };
+            tableItems.push(...this.getTableItems(currentSeries, seriesFields, option.color));
+            this.setTooltip(option);
+            if (this.props.markArea) {
+                series.push({
+                    name: "__markArea",
+                    type: "line",
+                    sampling: D2ChartPanel.SAMPLING_MODE,
+                    markArea: this.props.markArea,
+                    encode: {
+                        x: "timestamp",
+                        y: "__markArea",
+                    },
+                });
+                dataset.dimensions.push("__markArea");
+            }
+            if (this.state.calendarDataVisible) {
+                this.prepareCalendarMarkarea(series, dataset);
+            }
+            const missingDataMarkArea = D2ChartUtils.getMissingDataMarkArea(this.props.d2ChartRecords, seriesFields);
+            missingData = missingDataMarkArea.data;
+            series.push({
+                name: "__markArea-missing-data",
+                type: "line",
+                sampling: D2ChartPanel.SAMPLING_MODE,
+                markArea: missingDataMarkArea,
+                encode: {
+                    x: "timestamp",
+                    y: "__markArea-missing-data",
+                },
+            });
+            dataset.dimensions.push("__markArea-missing-data");
+            option.dataset = dataset;
+            option.series = series;
+            option.markArea = undefined;
+            option.legend[0].selected = Object.fromEntries(tableItems.map(value => [value.id, value.visible]));
+            if (this.props.yAxisLabel) {
+                option.yAxis[0].name = this.props.yAxisLabel;
+            }
+            this.chartInstance.setOption(option, true);
+        }
+        this.setState({
+            tableItems: tableItems,
+            missingData: missingData,
+        });
+    }
+    resize() {
+        this.chartInstance?.resize();
+    }
+    renderToolbox() {
+        return (React.createElement(D2ChartToolboxPanel, { missingData: this.state.missingData, calendarDataVisible: this.state.calendarDataVisible, missingDataVisible: this.state.missingDataVisible, showCalendarIcon: !!this.props.d2ChartCalendarRecords, onSwitchCalendarData: () => {
+                this.setState({ calendarDataVisible: !this.state.calendarDataVisible }, () => {
+                    this.onSwitchCalendarData();
+                });
+            }, onSwitchMissingData: () => {
+                this.setState({ missingDataVisible: !this.state.missingDataVisible }, () => {
+                    this.onSwitchMissingData();
+                });
+            }, onZoomControlSwitch: zoomEnabled => {
+                this.chartInstance.dispatchAction({
+                    type: "takeGlobalCursor",
+                    key: "dataZoomSelect",
+                    dataZoomSelectActive: zoomEnabled
+                });
+            }, onZoomReset: () => {
+                this.chartInstance.dispatchAction({
+                    type: "dataZoom",
+                    start: 0,
+                    end: 100,
+                });
+            }, compact: this.props.compact, onFullScreen: () => {
+                this.setState({ modalVisible: true }, () => {
+                    setTimeout(() => this.d2ChartPanelInModal?.onReload());
+                    setTimeout(() => this.d2ChartPanelInModal?.resize());
+                });
+            } }));
+    }
+    renderModalDialog() {
+        return (React.createElement(ModalDialog, { mode: "NO_BUTTONS", open: this.state.modalVisible, onCancel: () => this.setState({ modalVisible: false }), title: i18n("Chart"), initialWidth: window.innerWidth * 0.8, initialHeight: window.innerHeight * 0.98 },
+            React.createElement(D2ChartPanel, { ref: component => {
+                    this.d2ChartPanelInModal = component;
+                }, d2ChartSeries: this.props.d2ChartSeries, d2ChartRecords: this.props.d2ChartRecords, d2ChartCalendarRecords: this.props.d2ChartCalendarRecords, loading: this.props.loading, tableHeight: 180, tableWrapperStyle: { padding: "0px 12px 8px" }, markArea: this.props.markArea })));
+    }
+    render() {
+        const style = {
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+        };
+        if (this.props.loading) {
+            return (React.createElement("div", { style: { alignItems: "center", ...style } },
+                React.createElement(LoadingOutlined, null)));
+        }
+        else if (this.props.d2ChartRecords.length === 0) {
+            return (React.createElement(Empty, { style: style, description: i18n("No records found."), imageStyle: { height: "8vh" } }));
+        }
+        else {
+            let computedTableHeight = this.props.tableHeight;
+            if (computedTableHeight === "auto") {
+                computedTableHeight = 62 + this.props.d2ChartSeries.length * 28;
+            }
+            return (React.createElement("div", { style: { position: "relative", ...style } },
+                this.renderModalDialog(),
+                this.renderToolbox(),
+                React.createElement(ReactEcharts, { style: { height: `calc(100% - ${computedTableHeight}px)` }, onChartReady: instance => {
+                        this.chartInstance = instance;
+                        const zr = instance.getZr();
+                        zr.on("mouseout", () => {
+                            const tableItems = this.state.tableItems;
+                            tableItems.forEach(value => value.tooltipValue = undefined);
+                            this.setState({ tableItems: tableItems, tooltipTime: undefined }, () => {
+                                this.d2ChartTablePanel?.updateGrid();
+                            });
+                        });
+                    }, option: this.props.compact ? compactChartOptions : d2ChartOptions }),
+                React.createElement(D2ChartTablePanel, { style: { height: computedTableHeight, ...this.props.tableWrapperStyle }, ref: component => this.d2ChartTablePanel = component, tableItems: this.state.tableItems, tooltipTime: this.state.tooltipTime, onSwitchLegend: this.onSwitchLegend })));
+        }
+    }
+}
+D2ChartPanel.SAMPLING_MODE = "minmax";
+export default D2ChartPanel;
+//# sourceMappingURL=d2ChartPanel.js.map

package/coreui/components/d2Chart/d2ChartPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"d2ChartPanel.js","sourceRoot":"","sources":["../../../../../coreui/components/d2Chart/d2ChartPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport ReactEcharts, {EChartsInstance, EChartsOption} from \"echarts-for-react\";\r\nimport {compactChartOptions, d2ChartOptions} from \"./d2ChartOptions\";\r\nimport {at} from \"lodash\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport {Empty} from \"antd\";\r\nimport {UnixTime} from \"d2jsapi\";\r\nimport isEqual from \"lodash/isEqual\";\r\nimport D2ChartTablePanel, {D2ChartTableItem} from \"./d2ChartTablePanel\";\r\nimport {ModalDialog, ModalDialogMode} from \"d2coreui/components/modal/modalDialog\";\r\nimport D2ChartToolboxPanel from \"./d2ChartToolboxPanel\";\r\nimport {LoadingOutlined} from \"@ant-design/icons\";\r\nimport {D2ChartRecord, D2ChartSeriesItem, LineStyleEnum, MarkArea, MarkAreaData} from \"../../../api/types/d2ChartTypes\";\r\nimport D2ChartUtils from \"../../../api/util/d2ChartUtils\";\r\n\r\ninterface SeriesItem {\r\n    name: string,\r\n    type: string,\r\n    sampling: string,\r\n    symbol?: string,\r\n    step?: string,\r\n    color?: string,\r\n    encode?: { x: string, y: string },\r\n    markArea?: MarkArea\r\n}\r\n\r\nexport interface Props {\r\n    d2ChartSeries: D2ChartSeriesItem[]\r\n    d2ChartRecords: D2ChartRecord[]\r\n    d2ChartCalendarRecords?: D2ChartRecord[]\r\n    loading?: boolean\r\n\r\n    markArea?: MarkArea\r\n    compact?: boolean\r\n    yAxisLabel?: string\r\n\r\n    tableHeight: number | \"auto\"\r\n    tableWrapperStyle?: Omit<React.CSSProperties, \"height\">\r\n}\r\n\r\ninterface State {\r\n    tableItems: D2ChartTableItem[]\r\n    tooltipTime?: UnixTime\r\n    missingData: MarkAreaData[][]\r\n\r\n    modalVisible: boolean\r\n    calendarDataVisible: boolean\r\n    missingDataVisible: boolean\r\n}\r\n\r\nexport default class D2ChartPanel extends React.Component<Props, State> {\r\n    private static SAMPLING_MODE = \"minmax\";\r\n    private chartInstance: EChartsInstance | null = null;\r\n    private d2ChartPanelInModal: D2ChartPanel | null = null;\r\n    private d2ChartTablePanel: D2ChartTablePanel | null = null;\r\n\r\n    constructor(props: Readonly<Props>) {\r\n        super(props);\r\n\r\n        this.state = {\r\n            tableItems: [],\r\n            missingData: [],\r\n            modalVisible: false,\r\n            calendarDataVisible: false,\r\n            missingDataVisible: true,\r\n        }\r\n\r\n        this.onSwitchCalendarData = this.onSwitchCalendarData.bind(this);\r\n        this.onSwitchLegend = this.onSwitchLegend.bind(this);\r\n    }\r\n\r\n    componentDidUpdate(prevProps: Readonly<Props>) {\r\n        if (!isEqual(this.props.markArea, prevProps.markArea) && this.props.d2ChartRecords.length > 0) {\r\n            this.onReload();\r\n        }\r\n    }\r\n\r\n    private onSwitchLegend(name: string) {\r\n        const tableData = this.state.tableItems;\r\n        const d2ChartTableItem = tableData.find(value => value.id === name);\r\n\r\n        if (d2ChartTableItem) {\r\n            this.chartInstance.dispatchAction({\r\n                type: d2ChartTableItem.visible ? \"legendUnSelect\" : \"legendSelect\",\r\n                name: name,\r\n            });\r\n\r\n            d2ChartTableItem.visible = !d2ChartTableItem.visible\r\n            this.setState({tableItems: tableData}, () => this.d2ChartTablePanel?.updateGrid());\r\n        }\r\n    }\r\n\r\n    private onSwitchCalendarData() {\r\n        const calendarDataVisible = this.state.calendarDataVisible;\r\n        const option = this.chartInstance.getOption();\r\n\r\n        if (calendarDataVisible) {\r\n            this.prepareCalendarMarkarea(option.series, option.dataset[0]);\r\n            this.chartInstance.setOption(option);\r\n        }\r\n        const calendarSeries = option.series.filter((value: SeriesItem) => value.name.startsWith(\"__markArea-calendar-\")) as SeriesItem[];\r\n        calendarSeries.forEach(value => {\r\n            this.chartInstance.dispatchAction({\r\n                type: calendarDataVisible ? \"legendSelect\" : \"legendUnSelect\",\r\n                name: value.name,\r\n            });\r\n        });\r\n    }\r\n\r\n    private prepareCalendarMarkarea(series: SeriesItem[], dataset: any) {\r\n        if (this.props.d2ChartCalendarRecords) {\r\n            const markAreas = D2ChartUtils.calendarRecordsToMarkAreas(this.props.d2ChartCalendarRecords);\r\n            Object.keys(markAreas).forEach(key => {\r\n                const markAreaName = `__markArea-calendar-${key}`;\r\n                const markArea = {\r\n                    name: markAreaName,\r\n                    type: \"line\",\r\n                    sampling: D2ChartPanel.SAMPLING_MODE,\r\n                    markArea: markAreas[key],\r\n                    encode: {\r\n                        x: \"timestamp\",\r\n                        y: markAreaName,\r\n                    },\r\n                }\r\n\r\n                const seriesIndex = series.findIndex(value => value.name === markAreaName);\r\n                if (seriesIndex >= 0) {\r\n                    series[seriesIndex] = markArea;\r\n                } else {\r\n                    series.push(markArea);\r\n                }\r\n\r\n                const dimensionsIndex = dataset.dimensions.findIndex((value: string) => value === markAreaName);\r\n                if (dimensionsIndex >= 0) {\r\n                    dataset.dimensions[dimensionsIndex] = markAreaName;\r\n                } else {\r\n                    dataset.dimensions.push(markAreaName);\r\n                }\r\n            });\r\n        }\r\n    }\r\n\r\n    private onSwitchMissingData() {\r\n        this.chartInstance.dispatchAction({\r\n            type: this.state.missingDataVisible ? \"legendSelect\" : \"legendUnSelect\",\r\n            name: \"__markArea-missing-data\",\r\n        });\r\n    }\r\n\r\n    private setTooltip(option: EChartsOption) {\r\n        option.tooltip = {\r\n            trigger: \"axis\",\r\n            position: (_pos: any, params: any[]) => {\r\n                const param = params[0];\r\n                if (param && param.data) {\r\n                    const data = this.state.tableItems;\r\n                    data.forEach((value, index) => {\r\n                        if (value.visible) {\r\n                            value.tooltipValue = param.data[index + 1]; //index 0 is timestamp\r\n                        } else {\r\n                            value.tooltipValue = undefined;\r\n                        }\r\n                    });\r\n\r\n                    this.setState({tableItems: data, tooltipTime: param.data[0]}, () => {\r\n                        this.d2ChartTablePanel?.updateGrid();\r\n                    });\r\n                }\r\n            },\r\n            formatter: (params: Object | Array<any>) => {\r\n                if (Array.isArray(params)) {\r\n                    const seriesToCompare = params.filter(value => !value.seriesName.startsWith(\"__\"));\r\n                    if (seriesToCompare.length === 2) {\r\n                        const data = seriesToCompare[0].data;\r\n                        const seriesName1 = seriesToCompare[0].seriesName;\r\n                        const seriesName2 = seriesToCompare[1].seriesName;\r\n                        const dimensions = seriesToCompare[0].dimensionNames as string[];\r\n\r\n                        const value1 = data[dimensions.findIndex(value => value === seriesName1)]\r\n                        const value2 = data[dimensions.findIndex(value => value === seriesName2)]\r\n                        if (value1 !== undefined && value2 !== undefined) {\r\n                            const gap = value1 - value2;\r\n                            return `Gap: ${gap.toFixed(4)}`;\r\n                        }\r\n                    }\r\n                }\r\n                return \"\";\r\n            }\r\n        }\r\n    }\r\n\r\n    private getUniqueId(code: string, index: number): string {\r\n        return `${code}@${index}`;\r\n    }\r\n\r\n    private getDiemnsions(currentSeries: D2ChartSeriesItem[]): string[] {\r\n        return currentSeries.map((value, index) => this.getUniqueId(value.code!, index));\r\n    }\r\n\r\n    private getSeriesFields(currentSeries: D2ChartSeriesItem[]): string[] {\r\n        return currentSeries.map((_, index) => `col${index}`);\r\n    }\r\n\r\n    private getSeries(currentSeries: D2ChartSeriesItem[], optionColors: string[]): SeriesItem[] {\r\n        return currentSeries.map((value, index) => {\r\n            return {\r\n                name: this.getUniqueId(value.code!, index),\r\n                type: \"line\",\r\n                sampling: D2ChartPanel.SAMPLING_MODE,\r\n                symbol: \"none\",\r\n                step: \"end\",\r\n                color: optionColors[value.colorIndex !== undefined ? value.colorIndex : index % optionColors.length],\r\n                encode: {\r\n                    x: \"timestamp\",\r\n                    y: this.getUniqueId(value.code!, index)\r\n                },\r\n                areaStyle: value.fillColor ? {} : undefined,\r\n                lineStyle: {type: value.lineStyle ?? LineStyleEnum.SOLID}\r\n            }\r\n        })\r\n    }\r\n\r\n    private getTableItems(currentSeries: D2ChartSeriesItem[], seriesFields: string[], optionColors: string[]): D2ChartTableItem[] {\r\n        return currentSeries.map((series, index) => {\r\n            const recordValues = this.props.d2ChartRecords.map(value => at(value, seriesFields[index])[0]).filter(value => value !== undefined) as number[];\r\n            const uniqueId = this.getUniqueId(series.code!, index);\r\n            const [min, max, sum] = recordValues.reduce(([min, max, sum], val) =>\r\n                    [Math.min(min, val), Math.max(max, val), sum + val],\r\n                [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY, 0]\r\n            );\r\n\r\n            return {\r\n                id: uniqueId,\r\n                displayName: series.name!,\r\n                color: optionColors[series.colorIndex !== undefined ? series.colorIndex : index % optionColors.length],\r\n                visible: this.state.tableItems.find(value => value.id === uniqueId)?.visible ?? true,\r\n                min: recordValues.length === 0 ? undefined : min,\r\n                max: recordValues.length === 0 ? undefined : max,\r\n                avg: recordValues.length === 0 ? undefined : sum / recordValues.length,\r\n                sum: sum,\r\n            }\r\n        });\r\n    }\r\n\r\n    private getDatasetSource(seriesFields: string[]): (number | undefined)[][] {\r\n        return this.props.d2ChartRecords.map(record => {\r\n            const seriesValuesInTime: (number | undefined | null)[] = at(record, seriesFields);\r\n            const roundedSeriesValues = seriesValuesInTime.map(value => value !== undefined && value !== null ? +value.toFixed(4) : undefined) as (number | undefined)[];\r\n            roundedSeriesValues.unshift(record.date.getTime());\r\n\r\n            return roundedSeriesValues;\r\n        })\r\n    }\r\n\r\n    onReload() {\r\n        const tableItems: D2ChartTableItem[] = [];\r\n        let missingData: MarkAreaData[][] = [];\r\n\r\n        const option = this.chartInstance?.getOption() as EChartsOption | undefined | null;\r\n        if (option) {\r\n            const currentSeries = this.props.d2ChartSeries;\r\n            const seriesFields = this.getSeriesFields(currentSeries);\r\n            const series = this.getSeries(currentSeries, option.color);\r\n            const dataset: { dimensions: string[], source: (number | undefined)[][] } = {\r\n                dimensions: [\"timestamp\", ...this.getDiemnsions(currentSeries)],\r\n                source: this.getDatasetSource(seriesFields),\r\n            }\r\n            tableItems.push(...this.getTableItems(currentSeries, seriesFields, option.color));\r\n\r\n            this.setTooltip(option);\r\n\r\n            // chart markArea\r\n            if (this.props.markArea) {\r\n                series.push({\r\n                    name: \"__markArea\",\r\n                    type: \"line\",\r\n                    sampling: D2ChartPanel.SAMPLING_MODE,\r\n                    markArea: this.props.markArea,\r\n                    encode: {\r\n                        x: \"timestamp\",\r\n                        y: \"__markArea\",\r\n                    },\r\n                });\r\n\r\n                dataset.dimensions.push(\"__markArea\");\r\n            }\r\n\r\n            //calendar markArea\r\n            if (this.state.calendarDataVisible) {\r\n                this.prepareCalendarMarkarea(series, dataset);\r\n            }\r\n\r\n            // missing data markArea\r\n            const missingDataMarkArea = D2ChartUtils.getMissingDataMarkArea(this.props.d2ChartRecords, seriesFields);\r\n            missingData = missingDataMarkArea.data;\r\n            series.push({\r\n                name: \"__markArea-missing-data\",\r\n                type: \"line\",\r\n                sampling: D2ChartPanel.SAMPLING_MODE,\r\n                markArea: missingDataMarkArea,\r\n                encode: {\r\n                    x: \"timestamp\",\r\n                    y: \"__markArea-missing-data\",\r\n                },\r\n            });\r\n\r\n            dataset.dimensions.push(\"__markArea-missing-data\");\r\n\r\n            option.dataset = dataset;\r\n            option.series = series;\r\n            option.markArea = undefined;\r\n            option.legend[0].selected = Object.fromEntries(tableItems.map(value => [value.id, value.visible]));\r\n\r\n            if (this.props.yAxisLabel) {\r\n                option.yAxis[0].name = this.props.yAxisLabel;\r\n            }\r\n\r\n            this.chartInstance.setOption(option, true);\r\n        }\r\n\r\n        this.setState({\r\n            tableItems: tableItems,\r\n            missingData: missingData,\r\n        });\r\n    }\r\n\r\n    resize() {\r\n        this.chartInstance?.resize();\r\n    }\r\n\r\n    private renderToolbox() {\r\n        return (\r\n            <D2ChartToolboxPanel\r\n                missingData={this.state.missingData}\r\n                calendarDataVisible={this.state.calendarDataVisible}\r\n                missingDataVisible={this.state.missingDataVisible}\r\n                showCalendarIcon={!!this.props.d2ChartCalendarRecords}\r\n                onSwitchCalendarData={() => {\r\n                    this.setState({calendarDataVisible: !this.state.calendarDataVisible}, () => {\r\n                        this.onSwitchCalendarData();\r\n                    })\r\n                }}\r\n                onSwitchMissingData={() => {\r\n                    this.setState({missingDataVisible: !this.state.missingDataVisible}, () => {\r\n                        this.onSwitchMissingData();\r\n                    })\r\n                }}\r\n                onZoomControlSwitch={zoomEnabled => {\r\n                    this.chartInstance.dispatchAction({\r\n                        type: \"takeGlobalCursor\",\r\n                        key: \"dataZoomSelect\",\r\n                        dataZoomSelectActive: zoomEnabled\r\n                    });\r\n                }}\r\n                onZoomReset={() => {\r\n                    this.chartInstance.dispatchAction({\r\n                        type: \"dataZoom\",\r\n                        start: 0,\r\n                        end: 100,\r\n                    });\r\n                }}\r\n                compact={this.props.compact}\r\n                onFullScreen={() => {\r\n                    this.setState({modalVisible: true}, () => {\r\n                        setTimeout(() => this.d2ChartPanelInModal?.onReload());\r\n                        setTimeout(() => this.d2ChartPanelInModal?.resize());\r\n                    })\r\n                }}\r\n            />\r\n        )\r\n    }\r\n\r\n    private renderModalDialog() {\r\n        return (\r\n            <ModalDialog\r\n                mode={ModalDialogMode.NO_BUTTONS}\r\n                open={this.state.modalVisible}\r\n                onCancel={() => this.setState({modalVisible: false})}\r\n                title={i18n(\"Chart\")}\r\n                initialWidth={window.innerWidth * 0.8}\r\n                initialHeight={window.innerHeight * 0.98}\r\n            >\r\n                <D2ChartPanel\r\n                    ref={component => {\r\n                        this.d2ChartPanelInModal = component;\r\n                    }}\r\n                    d2ChartSeries={this.props.d2ChartSeries}\r\n                    d2ChartRecords={this.props.d2ChartRecords}\r\n                    d2ChartCalendarRecords={this.props.d2ChartCalendarRecords}\r\n                    loading={this.props.loading}\r\n                    tableHeight={180}\r\n                    tableWrapperStyle={{padding: \"0px 12px 8px\"}}\r\n                    markArea={this.props.markArea}\r\n                />\r\n            </ModalDialog>\r\n        )\r\n    }\r\n\r\n    render() {\r\n        const style: React.CSSProperties = {\r\n            height: \"100%\",\r\n            display: \"flex\",\r\n            flexDirection: \"column\",\r\n            justifyContent: \"center\",\r\n        }\r\n\r\n        if (this.props.loading) {\r\n            return (\r\n                <div style={{alignItems: \"center\", ...style}}>\r\n                    <LoadingOutlined/>\r\n                </div>\r\n            );\r\n        } else if (this.props.d2ChartRecords.length === 0) {\r\n            return (\r\n                <Empty\r\n                    style={style}\r\n                    description={i18n(\"No records found.\")}\r\n                    imageStyle={{height: \"8vh\"}}\r\n                />\r\n            );\r\n        } else {\r\n            let computedTableHeight = this.props.tableHeight;\r\n            if (computedTableHeight === \"auto\") {\r\n                computedTableHeight = 62 + this.props.d2ChartSeries.length * 28;\r\n            }\r\n\r\n            return (\r\n                <div style={{position: \"relative\", ...style}}>\r\n                    {this.renderModalDialog()}\r\n                    {this.renderToolbox()}\r\n                    <ReactEcharts\r\n                        style={{height: `calc(100% - ${computedTableHeight}px)`}}\r\n                        onChartReady={instance => {\r\n                            this.chartInstance = instance;\r\n                            const zr = instance.getZr();\r\n                            zr.on(\"mouseout\", () => {\r\n                                const tableItems = this.state.tableItems;\r\n                                tableItems.forEach(value => value.tooltipValue = undefined);\r\n                                this.setState({tableItems: tableItems, tooltipTime: undefined}, () => {\r\n                                    this.d2ChartTablePanel?.updateGrid();\r\n                                });\r\n                            });\r\n                        }}\r\n                        option={this.props.compact ? compactChartOptions : d2ChartOptions}\r\n                    />\r\n                    <D2ChartTablePanel\r\n                        style={{height: computedTableHeight, ...this.props.tableWrapperStyle}}\r\n                        ref={component => this.d2ChartTablePanel = component}\r\n                        tableItems={this.state.tableItems}\r\n                        tooltipTime={this.state.tooltipTime}\r\n                        onSwitchLegend={this.onSwitchLegend}\r\n                    />\r\n                </div>\r\n            )\r\n        }\r\n    }\r\n}"]}

package/coreui/components/d2Chart/d2ChartTablePanel.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { DataGridColDef } from "d2coreui/components/grid/dataGrid";
+import { UnixTime } from "d2jsapi";
+export interface D2ChartTableItem {
+    id: string;
+    displayName: string;
+    color: string;
+    visible: boolean;
+    min?: number;
+    max?: number;
+    sum?: number;
+    avg?: number;
+    tooltipValue?: number;
+}
+interface Props {
+    tableItems: D2ChartTableItem[];
+    tooltipTime?: UnixTime;
+    style?: React.CSSProperties;
+    onSwitchLegend(name: string): void;
+}
+interface State {
+}
+export default class D2ChartTablePanel extends React.Component<Props, State> {
+    private initialColumnDefs?;
+    private gridApi?;
+    constructor(props: Readonly<Props>);
+    updateGrid(): void;
+    getInitialColumnDefs(): DataGridColDef[];
+    render(): React.JSX.Element;
+}
+export {};

package/coreui/components/d2Chart/d2ChartTablePanel.js

@@ -0,0 +1,121 @@
+import React from "react";
+import DataGrid from "d2coreui/components/grid/dataGrid";
+import i18n from "d2core/i18n/i18n";
+import { DateTimeUtils } from "d2core/utils/dateTimeUtils";
+import { LocaleHolder } from "d2core/i18n/localeHolder";
+export default class D2ChartTablePanel extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    updateGrid() {
+        this.gridApi?.applyTransaction({ update: this.props.tableItems });
+        const columnDefs = this.gridApi?.getColumnDefs();
+        if (columnDefs) {
+            const columnDefinition = columnDefs.find(value => value.colId === "tooltipValue");
+            if (columnDefinition) {
+                if (this.props.tooltipTime) {
+                    columnDefinition.headerName = DateTimeUtils.fromUnixTime(this.props.tooltipTime / 1000).format(LocaleHolder.getDateTimeFormat(true, true, false));
+                }
+                else {
+                    columnDefinition.headerName = i18n("Value");
+                }
+            }
+            this.gridApi?.updateGridOptions({ columnDefs: columnDefs });
+        }
+    }
+    getInitialColumnDefs() {
+        if (!this.initialColumnDefs) {
+            this.initialColumnDefs = [
+                {
+                    headerName: "",
+                    colId: "visible",
+                    field: "visible",
+                    minWidth: 48,
+                    maxWidth: 48,
+                    initialWidth: 48,
+                    cellRenderer: (params) => {
+                        const data = params.data;
+                        return (React.createElement("div", { style: {
+                                width: 22,
+                                height: 22,
+                                marginTop: 2,
+                                backgroundColor: data.color,
+                                flex: "none",
+                                cursor: "pointer"
+                            }, onClick: () => this.props.onSwitchLegend(data.id) }, data.visible &&
+                            React.createElement("svg", { viewBox: "0 0 22 22", style: { width: 20, height: 20, fill: "white" } },
+                                React.createElement("path", { d: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" }))));
+                    },
+                    group: i18n("Basic Columns")
+                },
+                {
+                    headerName: i18n("Title"),
+                    colId: "title",
+                    field: "displayName",
+                    initialWidth: 240,
+                    group: i18n("Basic Columns"),
+                },
+                {
+                    headerName: i18n("Value"),
+                    colId: "tooltipValue",
+                    field: "tooltipValue",
+                    initialWidth: 154,
+                    type: ["numberColumn", "alignRight"],
+                    enableCellChangeFlash: true,
+                    group: i18n("Basic Columns"),
+                },
+                {
+                    headerName: i18n("Min"),
+                    colId: "min",
+                    field: "min",
+                    initialWidth: 120,
+                    type: ["numberColumn", "alignRight"],
+                    group: i18n("Basic Columns"),
+                },
+                {
+                    headerName: i18n("Max"),
+                    colId: "max",
+                    field: "max",
+                    initialWidth: 120,
+                    type: ["numberColumn", "alignRight"],
+                    group: i18n("Basic Columns"),
+                },
+                {
+                    headerName: i18n("Sum"),
+                    colId: "sum",
+                    field: "sum",
+                    initialWidth: 120,
+                    type: ["numberColumn", "alignRight"],
+                    group: i18n("Basic Columns"),
+                },
+                {
+                    headerName: i18n("Avg"),
+                    colId: "avg",
+                    field: "avg",
+                    initialWidth: 120,
+                    type: ["numberColumn", "alignRight"],
+                    group: i18n("Basic Columns"),
+                },
+            ];
+        }
+        return this.initialColumnDefs;
+    }
+    render() {
+        return (React.createElement("div", { style: this.props.style },
+            React.createElement(DataGrid, { onGridReady: (params) => {
+                    this.gridApi = params.api;
+                }, paging: { pageSize: -1 }, columnDefs: this.getInitialColumnDefs(), onLoadData: callback => {
+                    callback(this.props.tableItems.length);
+                }, toolbar: {
+                    renderToolbar: () => React.createElement(React.Fragment, null),
+                    hideRecordCount: true
+                }, rowData: this.props.tableItems, panelStyle: { padding: 0 }, tablePanelStyle: { marginTop: 8 }, noRecordsOverlayRenderer: () => React.createElement("div", null), isRowSelectable: () => false, getRowStyle: (params) => {
+                    const data = params.node.data;
+                    if (!data.visible) {
+                        return { background: "#ddd" };
+                    }
+                    return;
+                } })));
+    }
+}
+//# sourceMappingURL=d2ChartTablePanel.js.map

package/coreui/components/d2Chart/d2ChartTablePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"d2ChartTablePanel.js","sourceRoot":"","sources":["../../../../../coreui/components/d2Chart/d2ChartTablePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAA0B,MAAM,mCAAmC,CAAC;AAC3E,OAAO,IAAI,MAAM,kBAAkB,CAAC;AAEpC,OAAO,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAC,YAAY,EAAC,MAAM,0BAA0B,CAAC;AA6BtD,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAAuB;IAIxE,YAAY,KAAsB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,UAAU;QACN,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAC,CAAC,CAAC;QAEhE,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,EAAE,aAAa,EAA0B,CAAC;QACzE,IAAI,UAAU,EAAE,CAAC;YACb,MAAM,gBAAgB,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,cAAc,CAAC,CAAC;YAClF,IAAI,gBAAgB,EAAE,CAAC;gBACnB,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;oBACzB,gBAAgB,CAAC,UAAU,GAAG,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;gBACtJ,CAAC;qBAAM,CAAC;oBACJ,gBAAgB,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;gBAChD,CAAC;YACL,CAAC;YACD,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,EAAC,UAAU,EAAE,UAAU,EAAC,CAAC,CAAC;QAC9D,CAAC;IACL,CAAC;IAED,oBAAoB;QAChB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC1B,IAAI,CAAC,iBAAiB,GAAG;gBACrB;oBACI,UAAU,EAAE,EAAE;oBACd,KAAK,EAAE,SAAS;oBAChB,KAAK,EAAE,SAAS;oBAChB,QAAQ,EAAE,EAAE;oBACZ,QAAQ,EAAE,EAAE;oBACZ,YAAY,EAAE,EAAE;oBAChB,YAAY,EAAE,CAAC,MAAW,EAAE,EAAE;wBAC1B,MAAM,IAAI,GAAG,MAAM,CAAC,IAAwB,CAAC;wBAE7C,OAAO,CACH,6BACI,KAAK,EAAE;gCACH,KAAK,EAAE,EAAE;gCACT,MAAM,EAAE,EAAE;gCACV,SAAS,EAAE,CAAC;gCACZ,eAAe,EAAE,IAAI,CAAC,KAAK;gCAC3B,IAAI,EAAE,MAAM;gCACZ,MAAM,EAAE,SAAS;6BACpB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,IAEhD,IAAI,CAAC,OAAO;4BACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAC;gCAClE,8BAAM,CAAC,EAAC,yDAAyD,GAAE,CACjE,CAER,CACT,CAAC;oBACN,CAAC;oBACD,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC;iBAC/B;gBACD;oBACI,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC;oBACzB,KAAK,EAAE,OAAO;oBACd,KAAK,EAAE,aAAa;oBACpB,YAAY,EAAE,GAAG;oBACjB,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC;iBAC/B;gBACD;oBACI,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC;oBACzB,KAAK,EAAE,cAAc;oBACrB,KAAK,EAAE,cAAc;oBACrB,YAAY,EAAE,GAAG;oBACjB,IAAI,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC;oBACpC,qBAAqB,EAAE,IAAI;oBAC3B,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC;iBAC/B;gBACD;oBACI,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC;oBACvB,KAAK,EAAE,KAAK;oBACZ,KAAK,EAAE,KAAK;oBACZ,YAAY,EAAE,GAAG;oBACjB,IAAI,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC;oBACpC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC;iBAC/B;gBACD;oBACI,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC;oBACvB,KAAK,EAAE,KAAK;oBACZ,KAAK,EAAE,KAAK;oBACZ,YAAY,EAAE,GAAG;oBACjB,IAAI,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC;oBACpC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC;iBAC/B;gBACD;oBACI,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC;oBACvB,KAAK,EAAE,KAAK;oBACZ,KAAK,EAAE,KAAK;oBACZ,YAAY,EAAE,GAAG;oBACjB,IAAI,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC;oBACpC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC;iBAC/B;gBACD;oBACI,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC;oBACvB,KAAK,EAAE,KAAK;oBACZ,KAAK,EAAE,KAAK;oBACZ,YAAY,EAAE,GAAG;oBACjB,IAAI,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC;oBACpC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC;iBAC/B;aACJ,CAAA;QACL,CAAC;QAED,OAAO,IAAI,CAAC,iBAAiB,CAAC;IAClC,CAAC;IAED,MAAM;QACF,OAAO,CACH,6BAAK,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACxB,oBAAC,QAAQ,IACL,WAAW,EAAE,CAAC,MAAsB,EAAE,EAAE;oBACpC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC;gBAC9B,CAAC,EACD,MAAM,EAAE,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAC,EACtB,UAAU,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACvC,UAAU,EAAE,QAAQ,CAAC,EAAE;oBACnB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;gBAC3C,CAAC,EACD,OAAO,EAAE;oBACL,aAAa,EAAE,GAAG,EAAE,CAAC,yCAAK;oBAC1B,eAAe,EAAE,IAAI;iBACxB,EACD,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAC9B,UAAU,EAAE,EAAC,OAAO,EAAE,CAAC,EAAC,EACxB,eAAe,EAAE,EAAC,SAAS,EAAE,CAAC,EAAC,EAC/B,wBAAwB,EAAE,GAAG,EAAE,CAAC,gCAAM,EACtC,eAAe,EAAE,GAAG,EAAE,CAAC,KAAK,EAC5B,WAAW,EAAE,CAAC,MAAW,EAAE,EAAE;oBACzB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAwB,CAAC;oBAClD,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;wBAChB,OAAO,EAAC,UAAU,EAAE,MAAM,EAAC,CAAA;oBAC/B,CAAC;oBACD,OAAO;gBACX,CAAC,GACH,CACA,CACT,CAAC;IACN,CAAC;CAEJ","sourcesContent":["import React from \"react\";\r\nimport DataGrid, {DataGridColDef} from \"d2coreui/components/grid/dataGrid\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport {ColDef, GridApi, GridReadyEvent} from \"ag-grid-community\";\r\nimport {DateTimeUtils} from \"d2core/utils/dateTimeUtils\";\r\nimport {LocaleHolder} from \"d2core/i18n/localeHolder\";\r\nimport {UnixTime} from \"d2jsapi\";\r\n\r\nexport interface D2ChartTableItem {\r\n    id: string\r\n    displayName: string\r\n    color: string\r\n    visible: boolean\r\n\r\n    min?: number\r\n    max?: number\r\n    sum?: number\r\n    avg?: number\r\n\r\n    tooltipValue?: number\r\n}\r\n\r\ninterface Props {\r\n    tableItems: D2ChartTableItem[]\r\n    tooltipTime?: UnixTime\r\n\r\n    style?: React.CSSProperties\r\n\r\n    onSwitchLegend(name: string): void\r\n}\r\n\r\ninterface State {\r\n}\r\n\r\nexport default class D2ChartTablePanel extends React.Component<Props, State> {\r\n    private initialColumnDefs?: DataGridColDef[];\r\n    private gridApi?: GridApi;\r\n\r\n    constructor(props: Readonly<Props>) {\r\n        super(props);\r\n    }\r\n\r\n    updateGrid() {\r\n        this.gridApi?.applyTransaction({update: this.props.tableItems});\r\n\r\n        const columnDefs = this.gridApi?.getColumnDefs() as ColDef[] | undefined;\r\n        if (columnDefs) {\r\n            const columnDefinition = columnDefs.find(value => value.colId === \"tooltipValue\");\r\n            if (columnDefinition) {\r\n                if (this.props.tooltipTime) {\r\n                    columnDefinition.headerName = DateTimeUtils.fromUnixTime(this.props.tooltipTime / 1000).format(LocaleHolder.getDateTimeFormat(true, true, false));\r\n                } else {\r\n                    columnDefinition.headerName = i18n(\"Value\");\r\n                }\r\n            }\r\n            this.gridApi?.updateGridOptions({columnDefs: columnDefs});\r\n        }\r\n    }\r\n\r\n    getInitialColumnDefs(): DataGridColDef[] {\r\n        if (!this.initialColumnDefs) {\r\n            this.initialColumnDefs = [\r\n                {\r\n                    headerName: \"\",\r\n                    colId: \"visible\",\r\n                    field: \"visible\",\r\n                    minWidth: 48,\r\n                    maxWidth: 48,\r\n                    initialWidth: 48,\r\n                    cellRenderer: (params: any) => {\r\n                        const data = params.data as D2ChartTableItem;\r\n\r\n                        return (\r\n                            <div\r\n                                style={{\r\n                                    width: 22,\r\n                                    height: 22,\r\n                                    marginTop: 2,\r\n                                    backgroundColor: data.color,\r\n                                    flex: \"none\",\r\n                                    cursor: \"pointer\"\r\n                                }}\r\n                                onClick={() => this.props.onSwitchLegend(data.id)}\r\n                            >\r\n                                {data.visible &&\r\n                                    <svg viewBox=\"0 0 22 22\" style={{width: 20, height: 20, fill: \"white\"}}>\r\n                                        <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\r\n                                    </svg>\r\n                                }\r\n                            </div>\r\n                        );\r\n                    },\r\n                    group: i18n(\"Basic Columns\")\r\n                },\r\n                {\r\n                    headerName: i18n(\"Title\"),\r\n                    colId: \"title\",\r\n                    field: \"displayName\",\r\n                    initialWidth: 240,\r\n                    group: i18n(\"Basic Columns\"),\r\n                },\r\n                {\r\n                    headerName: i18n(\"Value\"),\r\n                    colId: \"tooltipValue\",\r\n                    field: \"tooltipValue\",\r\n                    initialWidth: 154,\r\n                    type: [\"numberColumn\", \"alignRight\"],\r\n                    enableCellChangeFlash: true,\r\n                    group: i18n(\"Basic Columns\"),\r\n                },\r\n                {\r\n                    headerName: i18n(\"Min\"),\r\n                    colId: \"min\",\r\n                    field: \"min\",\r\n                    initialWidth: 120,\r\n                    type: [\"numberColumn\", \"alignRight\"],\r\n                    group: i18n(\"Basic Columns\"),\r\n                },\r\n                {\r\n                    headerName: i18n(\"Max\"),\r\n                    colId: \"max\",\r\n                    field: \"max\",\r\n                    initialWidth: 120,\r\n                    type: [\"numberColumn\", \"alignRight\"],\r\n                    group: i18n(\"Basic Columns\"),\r\n                },\r\n                {\r\n                    headerName: i18n(\"Sum\"),\r\n                    colId: \"sum\",\r\n                    field: \"sum\",\r\n                    initialWidth: 120,\r\n                    type: [\"numberColumn\", \"alignRight\"],\r\n                    group: i18n(\"Basic Columns\"),\r\n                },\r\n                {\r\n                    headerName: i18n(\"Avg\"),\r\n                    colId: \"avg\",\r\n                    field: \"avg\",\r\n                    initialWidth: 120,\r\n                    type: [\"numberColumn\", \"alignRight\"],\r\n                    group: i18n(\"Basic Columns\"),\r\n                },\r\n            ]\r\n        }\r\n\r\n        return this.initialColumnDefs;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div style={this.props.style}>\r\n                <DataGrid\r\n                    onGridReady={(params: GridReadyEvent) => {\r\n                        this.gridApi = params.api;\r\n                    }}\r\n                    paging={{pageSize: -1}}\r\n                    columnDefs={this.getInitialColumnDefs()}\r\n                    onLoadData={callback => {\r\n                        callback(this.props.tableItems.length);\r\n                    }}\r\n                    toolbar={{\r\n                        renderToolbar: () => <></>,\r\n                        hideRecordCount: true\r\n                    }}\r\n                    rowData={this.props.tableItems}\r\n                    panelStyle={{padding: 0}}\r\n                    tablePanelStyle={{marginTop: 8}}\r\n                    noRecordsOverlayRenderer={() => <div/>}\r\n                    isRowSelectable={() => false}\r\n                    getRowStyle={(params: any) => {\r\n                        const data = params.node.data as D2ChartTableItem;\r\n                        if (!data.visible) {\r\n                            return {background: \"#ddd\"}\r\n                        }\r\n                        return;\r\n                    }}\r\n                />\r\n            </div>\r\n        );\r\n    }\r\n\r\n}"]}

package/coreui/components/d2Chart/d2ChartToolboxPanel.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { MarkAreaData } from "../../../api/types/d2ChartTypes";
+interface ChartToolboxPanelProps {
+    missingData: MarkAreaData[][];
+    calendarDataVisible?: boolean;
+    missingDataVisible?: boolean;
+    showCalendarIcon?: boolean;
+    compact?: boolean;
+    onZoomControlSwitch(zoomEnabled: boolean): void;
+    onZoomReset(): void;
+    onFullScreen?(): void;
+    onSwitchCalendarData?(): void;
+    onSwitchMissingData?(): void;
+}
+interface ChartToolboxPanelState {
+    zoomEnabled: boolean;
+}
+export default class D2ChartToolboxPanel extends React.Component<ChartToolboxPanelProps, ChartToolboxPanelState> {
+    constructor(props: Readonly<ChartToolboxPanelProps>);
+    private renderZoomInIcon;
+    private renderZoomOutIcon;
+    private renderMissingDataIcon;
+    private renderFullScreenIcon;
+    private renderCalendarIcon;
+    render(): React.JSX.Element;
+}
+export {};