aldehyde 0.2.496 → 0.2.498

package/src/aldehyde/table/page-chart.tsx

@@ -1,196 +1,196 @@
-import React, { memo, useEffect, useMemo, useRef } from "react";
-import { Row, Col, Empty } from "antd";
-import LowcodeComponents from "../lowcode-components/index";
-import { LtmplConfig } from "../tmpl/interface";
-import "./page-chart.less";
-
-const { LineChart, ColumnChart, Column3dChart, BarChart, PieChart, LineBarChart } = LowcodeComponents;
-
-const colors = ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de"];
-
-const lineChart = { // 基础折线图配置
-    renderer: "svg",
-    step: false,
-    smooth: true,
-    isArea: false,
-    dataZoom: false,
-    slider: false,
-    connectNulls: false,
-    nullSetZero: false,
-    areaStyle: { opacity: 0.2 },
-    color: colors,
-    lineStyle: { width: 1 },
-    symbol: { symbolSize: 4, showSymbol: false, symbol: "circle", itemStyle: { color: colors } },
-    xAxis: { type: "category", show: true, position: "bottom", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
-    yAxis: { type: "value", show: true, position: "left", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
-    grid: { top: 30, bottom: 30, left: 30, right: 20, },
-    legend: { show: false, position: "top", orient: "horizontal", type: "plain", textStyle: { color: "#333333" } },
-    tooltip: { show: true }
-};
-
-const columnChart = { // 基础柱状图配置
-    renderer: "svg",
-    color: colors,
-    barMaxWidth: 20,
-    lineStyle: { width: 1 },
-    dataZoom: false,
-    slider: false,
-    xAxis: { type: "category", show: true, position: "bottom", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
-    yAxis: { type: "value", show: true, position: "left", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
-    grid: { top: 30, bottom: 30, left: 30, right: 20, },
-    legend: { show: false, position: "top", orient: "horizontal", type: "plain", textStyle: { color: "#333333" } },
-    tooltip: { show: true }
-};
-
-const pieChart = { // 基础饼图
-    isHalf: false,
-    renderer: "svg",
-    radius: 70, innerRadius: 0, color: colors,
-    padAngle: 0,
-    label: { show: true, position: "outside", formatter: "{b}", color: "#C6C6C6", fontStyle: "normal", fontWeight: "normal", fontSize: 12 },
-    labelLine: { show: true, smooth: false },
-    legend: { show: false, position: "top", orient: "horizontal", type: "plain", formatter: "a", space: 0, textStyle: { color: "#C6C6C6", fontSize: 14, padding: 12 } },
-    tooltip: { show: true },
-    center: { x: 50, y: 50 }
-};
-
-const styleConfig = {
-    lineChart,
-    areaChart: {
-        ...lineChart,
-        isArea: true,
-        isGradient: true,
-        color: colors,
-    },
-    stepLineChart: {
-        ...lineChart,
-        step: true,
-    },
-    lineBarChart: {
-        ...lineChart,
-        color: ["#91cc75", "#5470c6"],
-        barMaxWidth: 20,
-        smooth: false,
-        symbol: { symbolSize: 4, showSymbol: false, symbol: "circle" }
-    },
-    columnChart,
-    stackColumnChart: {
-        ...columnChart,
-        color: colors
-    },
-    column3DChart: {
-        renderer: "svg",
-        color: "#0687f3",
-        barWidth: 20,
-        isBackground: true,
-        dataZoom: false,
-        slider: false,
-        lineStyle: { width: 1 },
-        xAxis: { type: "category", show: true, position: "bottom", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
-        yAxis: { type: "value", show: true, position: "left", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
-        grid: { top: 30, bottom: 30, left: 30, right: 20, },
-        legend: { show: false, position: "top", orient: "horizontal", type: "plain", textStyle: { color: "#333333" } },
-        tooltip: { show: true }
-    },
-    barChart: {
-        color: colors,
-        barMaxWidth: 20,
-        dataZoom: false,
-        xAxis: { type: "value", show: true, position: "bottom", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
-        yAxis: { type: "category", show: true, position: "left", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
-        grid: { top: 10, bottom: 30, left: 40, right: 20, },
-        legend: { show: false, position: "top", orient: "horizontal", type: "plain", textStyle: { color: "#333333" } },
-        tooltip: { show: true }
-    },
-    pieChart,
-    roseChart: {
-        ...pieChart,
-        roseType: "radius"
-    }
-}
-
-/**
- * 展示图表
- */
-
-interface Props {
-    ltmplConfig: LtmplConfig;
-    criteriaData: { [key: string]: any };
-}
-
-const Index = memo((props: Props) => {
-    const { ltmplConfig, criteriaData } = props;
-    const { pageChartConfigs, criteria } = ltmplConfig;
-    const childRefs = useRef<Map<number, any>>(new Map());
-
-    const temCriteriaData = useMemo(() => {
-        if (!criteriaData) {
-            return {};
-        }
-        return criteria?.reduce((total, item) => { // 处理搜索条件
-            if (`c_${item.sourceId}` in criteriaData) {
-                total[`c_${item.sourceId}`] = criteriaData[`c_${item.sourceId}`];
-            }
-            return total;
-        }, { pageSize: 8640 }); // 10秒一个数据，24小时数据量
-    }, [criteriaData]);
-
-    useEffect(() => {
-        return () => {
-            childRefs.current.forEach((instance) => {
-                instance.destroy(); // 逐个销毁
-            });
-        };
-    }, []);
-
-    useEffect(() => {
-        childRefs.current.forEach((instance) => {
-            instance.updateSearchParams(temCriteriaData); // 逐个更新查询条件
-        });
-    }, [temCriteriaData]);
-
-    const renderChart = (item, index) => {
-        const chartProps = {
-            style: styleConfig[item.type],
-            data: { sourceType: "sourceId", sourceId: item.dataSourceId, isInitParams: true },
-            ref: (el: any) => { if (el) childRefs.current.set(index, el); },
-        };
-        switch (item.type) {
-            case "lineChart": // 基础折线图
-                return <LineChart {...chartProps} />;
-            case "areaChart": // 面积图
-                return <LineChart {...chartProps} />;
-            case "stepLineChart": // 阶梯图
-                return <LineChart {...chartProps} />;
-            case "lineBarChart": // 折柱混合图
-                return <LineBarChart {...chartProps} />;
-            case "columnChart": // 基础柱状图
-                return <ColumnChart base={{ type: "ColumnChart" }} {...chartProps} />;
-            case "stackColumnChart": // 堆叠柱状图
-                return <ColumnChart base={{ type: "StackColumnChart" }} {...chartProps} />;
-            case "column3DChart": // 立体柱状图
-                return <Column3dChart {...chartProps} />;
-            case "barChart": // 条形图
-                return <BarChart {...chartProps} />;
-            case "pieChart": // 饼图
-                return <PieChart {...chartProps} />;
-            case "roseChart": // 玫瑰图
-                return <PieChart {...chartProps} />;
-            default:
-                return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-        }
-    };
-
-    if (!pageChartConfigs?.length) {
-        return "";
-    }
-
-    return <Row>
-        {pageChartConfigs.map((item, index) =>
-            <Col key={index} span={item.colSpan || 24}>
-                <div className="page-chart">{renderChart(item, index)}</div>
-            </Col>)}
-    </Row>;
-});
-
-export default Index;
+import React, { memo, useEffect, useMemo, useRef } from "react";
+import { Row, Col, Empty } from "antd";
+import LowcodeComponents from "../lowcode-components/index";
+import { LtmplConfig } from "../tmpl/interface";
+import "./page-chart.less";
+
+const { LineChart, ColumnChart, Column3dChart, BarChart, PieChart, LineBarChart } = LowcodeComponents;
+
+const colors = ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de"];
+
+const lineChart = { // 基础折线图配置
+    renderer: "svg",
+    step: false,
+    smooth: true,
+    isArea: false,
+    dataZoom: false,
+    slider: false,
+    connectNulls: false,
+    nullSetZero: false,
+    areaStyle: { opacity: 0.2 },
+    color: colors,
+    lineStyle: { width: 1 },
+    symbol: { symbolSize: 4, showSymbol: false, symbol: "circle", itemStyle: { color: colors } },
+    xAxis: { type: "category", show: true, position: "bottom", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+    yAxis: { type: "value", show: true, position: "left", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+    grid: { top: 30, bottom: 30, left: 30, right: 20, },
+    legend: { show: false, position: "top", orient: "horizontal", type: "plain", textStyle: { color: "#333333" } },
+    tooltip: { show: true }
+};
+
+const columnChart = { // 基础柱状图配置
+    renderer: "svg",
+    color: colors,
+    barMaxWidth: 20,
+    lineStyle: { width: 1 },
+    dataZoom: false,
+    slider: false,
+    xAxis: { type: "category", show: true, position: "bottom", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+    yAxis: { type: "value", show: true, position: "left", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+    grid: { top: 30, bottom: 30, left: 30, right: 20, },
+    legend: { show: false, position: "top", orient: "horizontal", type: "plain", textStyle: { color: "#333333" } },
+    tooltip: { show: true }
+};
+
+const pieChart = { // 基础饼图
+    isHalf: false,
+    renderer: "svg",
+    radius: 70, innerRadius: 0, color: colors,
+    padAngle: 0,
+    label: { show: true, position: "outside", formatter: "{b}", color: "#C6C6C6", fontStyle: "normal", fontWeight: "normal", fontSize: 12 },
+    labelLine: { show: true, smooth: false },
+    legend: { show: false, position: "top", orient: "horizontal", type: "plain", formatter: "a", space: 0, textStyle: { color: "#C6C6C6", fontSize: 14, padding: 12 } },
+    tooltip: { show: true },
+    center: { x: 50, y: 50 }
+};
+
+const styleConfig = {
+    lineChart,
+    areaChart: {
+        ...lineChart,
+        isArea: true,
+        isGradient: true,
+        color: colors,
+    },
+    stepLineChart: {
+        ...lineChart,
+        step: true,
+    },
+    lineBarChart: {
+        ...lineChart,
+        color: ["#91cc75", "#5470c6"],
+        barMaxWidth: 20,
+        smooth: false,
+        symbol: { symbolSize: 4, showSymbol: false, symbol: "circle" }
+    },
+    columnChart,
+    stackColumnChart: {
+        ...columnChart,
+        color: colors
+    },
+    column3DChart: {
+        renderer: "svg",
+        color: "#0687f3",
+        barWidth: 20,
+        isBackground: true,
+        dataZoom: false,
+        slider: false,
+        lineStyle: { width: 1 },
+        xAxis: { type: "category", show: true, position: "bottom", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+        yAxis: { type: "value", show: true, position: "left", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+        grid: { top: 30, bottom: 30, left: 30, right: 20, },
+        legend: { show: false, position: "top", orient: "horizontal", type: "plain", textStyle: { color: "#333333" } },
+        tooltip: { show: true }
+    },
+    barChart: {
+        color: colors,
+        barMaxWidth: 20,
+        dataZoom: false,
+        xAxis: { type: "value", show: true, position: "bottom", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+        yAxis: { type: "category", show: true, position: "left", axisLabel: { rotate: 0, fontSize: 12, color: "#c6c6c6", }, name: "", nameLocation: "end", nameTextStyle: { fontSize: 12, color: "#c6c6c6" }, axisLine: { show: true, lineStyle: { width: 1, color: "#595959", } }, splitLine: { show: false, lineStyle: { type: "dashed", width: 1, color: "#ffffff1a" } } },
+        grid: { top: 10, bottom: 30, left: 40, right: 20, },
+        legend: { show: false, position: "top", orient: "horizontal", type: "plain", textStyle: { color: "#333333" } },
+        tooltip: { show: true }
+    },
+    pieChart,
+    roseChart: {
+        ...pieChart,
+        roseType: "radius"
+    }
+}
+
+/**
+ * 展示图表
+ */
+
+interface Props {
+    ltmplConfig: LtmplConfig;
+    criteriaData: { [key: string]: any };
+}
+
+const Index = memo((props: Props) => {
+    const { ltmplConfig, criteriaData } = props;
+    const { pageChartConfigs, criteria } = ltmplConfig;
+    const childRefs = useRef<Map<number, any>>(new Map());
+
+    const temCriteriaData = useMemo(() => {
+        if (!criteriaData) {
+            return {};
+        }
+        return criteria?.reduce((total, item) => { // 处理搜索条件
+            if (`c_${item.sourceId}` in criteriaData) {
+                total[`c_${item.sourceId}`] = criteriaData[`c_${item.sourceId}`];
+            }
+            return total;
+        }, { pageSize: 8640 }); // 10秒一个数据，24小时数据量
+    }, [criteriaData]);
+
+    useEffect(() => {
+        return () => {
+            childRefs.current.forEach((instance) => {
+                instance.destroy(); // 逐个销毁
+            });
+        };
+    }, []);
+
+    useEffect(() => {
+        childRefs.current.forEach((instance) => {
+            instance.updateSearchParams(temCriteriaData); // 逐个更新查询条件
+        });
+    }, [temCriteriaData]);
+
+    const renderChart = (item, index) => {
+        const chartProps = {
+            style: styleConfig[item.type],
+            data: { sourceType: "sourceId", sourceId: item.dataSourceId, isInitParams: true },
+            ref: (el: any) => { if (el) childRefs.current.set(index, el); },
+        };
+        switch (item.type) {
+            case "lineChart": // 基础折线图
+                return <LineChart {...chartProps} />;
+            case "areaChart": // 面积图
+                return <LineChart {...chartProps} />;
+            case "stepLineChart": // 阶梯图
+                return <LineChart {...chartProps} />;
+            case "lineBarChart": // 折柱混合图
+                return <LineBarChart {...chartProps} />;
+            case "columnChart": // 基础柱状图
+                return <ColumnChart base={{ type: "ColumnChart" }} {...chartProps} />;
+            case "stackColumnChart": // 堆叠柱状图
+                return <ColumnChart base={{ type: "StackColumnChart" }} {...chartProps} />;
+            case "column3DChart": // 立体柱状图
+                return <Column3dChart {...chartProps} />;
+            case "barChart": // 条形图
+                return <BarChart {...chartProps} />;
+            case "pieChart": // 饼图
+                return <PieChart {...chartProps} />;
+            case "roseChart": // 玫瑰图
+                return <PieChart {...chartProps} />;
+            default:
+                return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        }
+    };
+
+    if (!pageChartConfigs?.length) {
+        return "";
+    }
+
+    return <Row>
+        {pageChartConfigs.map((item, index) =>
+            <Col key={index} span={item.colSpan || 24}>
+                <div className="page-chart">{renderChart(item, index)}</div>
+            </Col>)}
+    </Row>;
+});
+
+export default Index;