aldehyde 0.2.284 → 0.2.285

package/lib/lowcode-components/capsule-bar-chart/index.js

@@ -0,0 +1,179 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import * as echarts from 'echarts';
+import React, { useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import _ from 'lodash';
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+const defSeriesConfig = {
+    itemStyle: {
+        borderRadius: 20
+    },
+    showBackground: true,
+    backgroundStyle: {
+        color: "transparent",
+        borderColor: "rgba(255, 255, 255, 0.5)",
+        borderWidth: 0.3,
+        borderRadius: 20,
+        shadowColor: 'rgba(255, 255, 255, 0.5)',
+        shadowBlur: 8,
+    }
+};
+const defOption = {
+    title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'middle',
+        show: false, // 无数据时显示
+    },
+    tooltip: { trigger: "axis" },
+    grid: { top: 30, let: 30, right: 20, bottom: 30 },
+    yAxis: {
+        type: 'category',
+        boundaryGap: true,
+        axisTick: { show: true },
+    },
+    xAxis: {
+        type: 'value',
+        axisTick: { show: true },
+    },
+    legend: { show: false },
+    barMaxWidth: 20,
+    series: [
+        Object.assign({ data: [[525, "1990"], [459, "1991"], [357, "1992"], [414, "1993"], [234, "1994"]], type: 'bar' }, defSeriesConfig)
+    ]
+};
+const legends = {
+    top: { top: 0 },
+    bottom: { bottom: 0 },
+    left: { left: 5, top: "center" },
+    right: { right: 5, top: "center" },
+    leftTop: { left: 5 },
+    rightTop: { right: 5 },
+    leftBottom: { left: 5, bottom: 0 },
+    rightBottom: { right: 5, bottom: 0 },
+};
+// 处理数据格式
+const handleData = (data) => {
+    var _a;
+    if (!(data === null || data === void 0 ? void 0 : data.length)) {
+        return [];
+    }
+    const temData = data.map((r) => {
+        const { config, value } = r;
+        const vNames = Object.keys(config).filter((r) => r.startsWith("v")).sort((a, b) => parseInt(a.substring(1)) - parseInt(b.substring(1)));
+        return {
+            name: config.d1,
+            data: vNames.map((r) => ({
+                name: config[r],
+                data: value.map((v) => [v[r], v["d1"]]),
+            }))
+        };
+    });
+    return ((_a = temData[0]) === null || _a === void 0 ? void 0 : _a.data) || [];
+};
+const Index = forwardRef((props, ref) => {
+    const { style, data: propsData, isDesignMode } = props;
+    const [config, setConfig] = useState(style || {});
+    const [size, setSize] = useState();
+    const [dataConfig, setDataConfig] = useState(Object.assign({}, propsData)); // 数据源配置
+    const [data, setData] = useState([]);
+    const chartRef = useRef(null);
+    const chart = useRef(null);
+    const pollingIntervalRef = useRef(null);
+    const handleDestroy = () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        window.removeEventListener('resize', handleResize);
+        chart.current.dispose();
+    };
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { base, style: newStyle, data: newDataConfig } = newConfig;
+            setConfig(Object.assign({}, (newStyle || {})));
+            setSize({ width: base.width, height: base.height });
+            setDataConfig(newDataConfig);
+        },
+        destroy: handleDestroy,
+    }));
+    // 窗口大小变化时重新调整图表大小
+    const handleResize = () => {
+        chart.current.resize({ animation: { duration: 500 } });
+    };
+    useEffect(() => {
+        chart.current = echarts.init(chartRef.current);
+        window.addEventListener('resize', handleResize);
+        return () => {
+            handleDestroy();
+        };
+    }, []);
+    // 请求数据
+    const getData = () => __awaiter(void 0, void 0, void 0, function* () {
+        const { entities: { config, value } } = (yield HydrocarbonService.requestMstrucLtmplQueryTop(null, dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceId, null)) || {};
+        const temData = handleData(value);
+        setData(temData);
+        return config;
+    });
+    // 初始化请求数据
+    const getInitData = () => __awaiter(void 0, void 0, void 0, function* () {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = yield getData();
+        if ((config === null || config === void 0 ? void 0 : config.requestType) === "polling") {
+            pollingIntervalRef.current = setInterval(() => { getData(); }, (config === null || config === void 0 ? void 0 : config.pollingInterval) || 60000);
+        }
+    });
+    // 静态数据处理
+    useEffect(() => {
+        if ((dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType) === 'staticData') {
+            setData(handleData(dataConfig.staticData));
+        }
+    }, [dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType, dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.staticData]);
+    /**
+     * 数据源数据请求
+     * 1、编辑态不请求数据
+     */
+    useEffect(() => {
+        if (!isDesignMode && (dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType) === 'sourceId' && (dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceId)) {
+            getInitData();
+        }
+        else if ((dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType) === 'sourceId') {
+            setData([]);
+        }
+    }, [dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType, dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceId]);
+    const renderChart = () => {
+        var _a, _b;
+        const { grid, barMaxWidth, legend, tooltip, color, xAxis, yAxis, label } = config;
+        const option = _.cloneDeep(defOption);
+        // 编辑态无数据显示默认数据
+        const temData = isDesignMode && !(data === null || data === void 0 ? void 0 : data.length) ? option.series : data;
+        option.barMaxWidth = barMaxWidth;
+        option.grid = grid;
+        option.legend = Object.assign(Object.assign({}, legend), legends[legend === null || legend === void 0 ? void 0 : legend.position]);
+        option.tooltip = Object.assign({ trigger: "axis" }, tooltip);
+        option.xAxis = Object.assign(Object.assign(Object.assign({}, option.xAxis), xAxis), { axisTick: { show: (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.axisLine) === null || _a === void 0 ? void 0 : _a.show } });
+        option.yAxis = Object.assign(Object.assign(Object.assign({}, option.yAxis), yAxis), { axisTick: { show: (_b = yAxis === null || yAxis === void 0 ? void 0 : yAxis.axisLine) === null || _b === void 0 ? void 0 : _b.show } });
+        option.title.show = !(temData === null || temData === void 0 ? void 0 : temData.length);
+        option.series = temData.map((r) => (Object.assign(Object.assign(Object.assign({ type: "bar" }, defSeriesConfig), r), { label: label, itemStyle: {
+                borderRadius: 20, color: (params) => color[params.dataIndex] || "#63b2ee"
+            } })));
+        chart.current.setOption(option, true);
+    };
+    useEffect(() => {
+        if (config) {
+            renderChart();
+        }
+    }, [config, data]);
+    useEffect(() => {
+        if (size) {
+            handleResize();
+        }
+    }, [size]);
+    return React.createElement("div", { ref: chartRef, style: { width: '100%', height: '100%' } });
+});
+export default Index;
+//# sourceMappingURL=index.js.map

package/lib/lowcode-components/capsule-bar-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/aldehyde/lowcode-components/capsule-bar-chart/index.tsx"],"names":[],"mappings":"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"}

package/lib/lowcode-components/circular-progress-chart/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { DataConfigProps } from "../data";
+export interface ComponentStyle {
+    title?: {
+        [key: string]: any;
+    };
+    barWidth?: number;
+    color?: string;
+    backgroundColor?: string;
+}
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base: {
+        width: number;
+        height: number;
+    };
+    data?: DataConfigProps;
+    isDesignMode?: boolean;
+}
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
+}
+declare const Index: React.ForwardRefExoticComponent<ComponentProps & React.RefAttributes<ComponentRef>>;
+export default Index;
+//# sourceMappingURL=index.d.ts.map

package/lib/lowcode-components/circular-progress-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/aldehyde/lowcode-components/circular-progress-chart/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqF,MAAM,OAAO,CAAC;AAG1G,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAwE1C,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,YAAY;IACzB,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,KAAK,qFAuGT,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/lib/lowcode-components/circular-progress-chart/index.js

@@ -0,0 +1,179 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import * as echarts from 'echarts';
+import React, { useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import _ from 'lodash';
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+const defOption = {
+    title: {
+        show: true,
+        text: "30 %",
+        x: 'center',
+        y: 'center',
+        textStyle: {
+            color: '#ffffff',
+            fontSize: 24,
+        },
+    },
+    angleAxis: {
+        axisLine: {
+            show: false,
+        },
+        axisLabel: {
+            show: false,
+        },
+        splitLine: {
+            show: false,
+        },
+        axisTick: {
+            show: false,
+        },
+        min: 0,
+        max: 100,
+        startAngle: 90,
+    },
+    radiusAxis: {
+        type: 'category',
+        axisLine: {
+            show: false,
+        },
+        axisTick: {
+            show: false,
+        },
+        axisLabel: {
+            show: true,
+        },
+        data: [],
+    },
+    polar: {
+        radius: '150%',
+        center: ['50%', '50%'],
+    },
+    series: [
+        // 极坐标系下柱状图
+        {
+            type: 'bar',
+            data: [30],
+            z: 1,
+            coordinateSystem: 'polar',
+            barWidth: 24,
+            roundCap: 1,
+            color: "#446bf5"
+        },
+        {
+            type: 'bar',
+            data: [100],
+            z: 0,
+            silent: true,
+            coordinateSystem: 'polar',
+            barWidth: 24,
+            roundCap: true,
+            color: '#E8EDF3',
+            barGap: '-100%',
+        },
+    ],
+};
+const Index = forwardRef((props, ref) => {
+    const { style, data: propsData, isDesignMode } = props;
+    const [config, setConfig] = useState(style || {});
+    const [size, setSize] = useState();
+    const [dataConfig, setDataConfig] = useState(Object.assign({}, propsData)); // 数据源配置
+    const [data, setData] = useState(0);
+    const chartRef = useRef(null);
+    const chart = useRef(null);
+    const pollingIntervalRef = useRef(null);
+    const handleDestroy = () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        window.removeEventListener('resize', handleResize);
+        chart.current.dispose();
+    };
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { base, style: newStyle, data: newDataConfig } = newConfig;
+            setConfig(Object.assign({}, (newStyle || {})));
+            setSize({ width: base.width, height: base.height });
+            setDataConfig(newDataConfig);
+        },
+        destroy: handleDestroy,
+    }));
+    // 窗口大小变化时重新调整图表大小
+    const handleResize = () => {
+        chart.current.resize({ animation: { duration: 500 } });
+    };
+    useEffect(() => {
+        chart.current = echarts.init(chartRef.current);
+        window.addEventListener('resize', handleResize);
+        return () => {
+            handleDestroy();
+        };
+    }, []);
+    // 请求数据
+    const getData = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c;
+        const { entities: { config, value } } = (yield HydrocarbonService.requestMstrucLtmplQueryTop(null, dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceId, null)) || {};
+        const temData = ((_c = (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.v1) || 0;
+        setData(temData * 100);
+        return config;
+    });
+    // 初始化请求数据
+    const getInitData = () => __awaiter(void 0, void 0, void 0, function* () {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = yield getData();
+        if ((config === null || config === void 0 ? void 0 : config.requestType) === "polling") {
+            pollingIntervalRef.current = setInterval(() => { getData(); }, (config === null || config === void 0 ? void 0 : config.pollingInterval) || 60000);
+        }
+    });
+    // 静态数据处理
+    useEffect(() => {
+        if ((dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType) === 'staticData') {
+            const { value } = dataConfig.staticData || {};
+            setData((value || 0) * 100);
+        }
+    }, [dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType, dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.staticData]);
+    /**
+     * 数据源数据请求
+     * 1、编辑态不请求数据
+     */
+    useEffect(() => {
+        if (!isDesignMode && (dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType) === 'sourceId' && (dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceId)) {
+            getInitData();
+        }
+        else if ((dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType) === 'sourceId') {
+            setData(0);
+        }
+    }, [dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType, dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceId]);
+    const renderChart = () => {
+        const { title, color, backgroundColor, barWidth } = config;
+        const option = _.cloneDeep(defOption);
+        // 编辑态数据源类型显示默认数据30
+        const temData = isDesignMode && (dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType) === 'sourceId' ? 30 : (data || 0);
+        option.title = Object.assign(Object.assign(Object.assign({}, option.title), title), { text: `${temData || "-"}%` });
+        option.series = option.series.map((item, index) => {
+            index === 0 && (item.data = [temData]);
+            item.color = index === 0 ? color : backgroundColor;
+            item.barWidth = barWidth;
+            return item;
+        });
+        chart.current.setOption(option, true);
+    };
+    useEffect(() => {
+        if (config) {
+            renderChart();
+        }
+    }, [config, data]);
+    useEffect(() => {
+        if (size) {
+            handleResize();
+        }
+    }, [size]);
+    return React.createElement("div", { ref: chartRef, style: { width: '100%', height: '100%' } });
+});
+export default Index;
+//# sourceMappingURL=index.js.map

package/lib/lowcode-components/circular-progress-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/aldehyde/lowcode-components/circular-progress-chart/index.tsx"],"names":[],"mappings":"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"}

package/lib/lowcode-components/column-chart/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export interface ChartComponentStyle {
+import { DataConfigProps } from "../data";
+export interface ComponentStyle {
     tooltip?: {
         show: boolean;
     };
@@ -21,16 +22,20 @@ export interface ChartComponentStyle {
     };
     barMaxWidth?: number;
 }
-export interface ChartComponentProps {
-    style?: ChartComponentStyle;
+export interface ComponentProps {
+    style?: ComponentStyle;
     base: {
         width: number;
         height: number;
+        type: string;
     };
+    data?: DataConfigProps;
+    isDesignMode?: boolean;
 }
-export interface BaseTextComponentRef {
-    updateConfig: (newConfig: ChartComponentProps) => void;
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
 }
-declare const Index: React.ForwardRefExoticComponent<ChartComponentProps & React.RefAttributes<BaseTextComponentRef>>;
+declare const Index: React.ForwardRefExoticComponent<ComponentProps & React.RefAttributes<ComponentRef>>;
 export default Index;
 //# sourceMappingURL=index.d.ts.map

package/lib/lowcode-components/column-chart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/aldehyde/lowcode-components/column-chart/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqF,MAAM,OAAO,CAAC;AAoC1G,MAAM,WAAW,mBAAmB;IAChC,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAC/B,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAC/B,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAChC,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;CAC1C;AAED,MAAM,WAAW,oBAAoB;IACjC,YAAY,EAAE,CAAC,SAAS,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAC1D;AAED,QAAA,MAAM,KAAK,kGAwDT,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/aldehyde/lowcode-components/column-chart/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqF,MAAM,OAAO,CAAC;AAG1G,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAiF1C,MAAM,WAAW,cAAc;IAC3B,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAC/B,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAC/B,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACtD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,YAAY;IACzB,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,KAAK,qFA6GT,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/lib/lowcode-components/column-chart/index.js

@@ -1,13 +1,52 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
-import lodash from 'lodash';
+import _ from 'lodash';
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+const defColumnValue = [
+    {
+        data: [["1990", 52], ["1991", 45], ["1992", 35], ["1993", 41], ["1994", 23], ["1995", 25], ["1996", 15]],
+        type: 'bar',
+    }
+];
+const defStackValue = [
+    {
+        data: [["1990", 3], ["1991", 4], ["1992", 3.5], ["1993", 5], ["1994", 4.9], ["1995", 6], ["1996", 7]],
+        type: 'bar',
+        name: "Val1",
+        stack: "stack"
+    },
+    {
+        data: [["1990", 3], ["1991", 4], ["1992", 3.5], ["1993", 5], ["1994", 4.9], ["1995", 6], ["1996", 7]],
+        type: 'bar',
+        name: "Val2",
+        stack: "stack"
+    }
+];
+const defDatas = {
+    ColumnChart: defColumnValue,
+    StackColumnChart: defStackValue,
+};
 const defOption = {
+    title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'middle',
+        show: false, // 无数据时显示
+    },
     tooltip: { trigger: "axis" },
     grid: { top: 30, let: 30, right: 20, bottom: 30 },
     xAxis: {
         type: 'category',
         boundaryGap: true,
-        data: ['1990', '1991', '1992', '1993', '1994', '1995', '1996'],
         axisTick: { show: true },
     },
     yAxis: {
@@ -15,12 +54,7 @@ const defOption = {
     },
     legend: { show: false },
     barMaxWidth: 30,
-    series: [
-        {
-            data: [525, 459, 357, 414, 234, 250, 156],
-            type: 'bar',
-        }
-    ]
+    series: defColumnValue
 };
 const legends = {
     top: { top: 0 },
@@ -32,17 +66,47 @@ const legends = {
     leftBottom: { left: 5, bottom: 0 },
     rightBottom: { right: 5, bottom: 0 },
 };
+// 处理数据格式
+const handleData = (data) => {
+    var _a;
+    if (!(data === null || data === void 0 ? void 0 : data.length)) {
+        return [];
+    }
+    const temData = data.map((r) => {
+        const { config, value } = r;
+        const vNames = Object.keys(config).filter((r) => r.startsWith("v")).sort((a, b) => parseInt(a.substring(1)) - parseInt(b.substring(1)));
+        return {
+            name: config.d1,
+            data: vNames.map((r) => ({
+                name: config[r],
+                data: value.map((v) => [v["d1"], v[r]]),
+            }))
+        };
+    });
+    return ((_a = temData[0]) === null || _a === void 0 ? void 0 : _a.data) || [];
+};
 const Index = forwardRef((props, ref) => {
-    const [config, setConfig] = useState(props.style || {});
+    const { style, base: { type: componentType }, data: propsData, isDesignMode } = props;
+    const [config, setConfig] = useState(style || {});
     const [size, setSize] = useState();
+    const [dataConfig, setDataConfig] = useState(Object.assign({}, propsData)); // 数据源配置
+    const [data, setData] = useState([]);
     const chartRef = useRef(null);
     const chart = useRef(null);
+    const pollingIntervalRef = useRef(null);
+    const handleDestroy = () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        window.removeEventListener('resize', handleResize);
+        chart.current.dispose();
+    };
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
-            const { base, style } = newConfig;
-            setConfig(Object.assign({}, (style || {})));
+            const { base, style: newStyle, data: newDataConfig } = newConfig;
+            setConfig(Object.assign({}, (newStyle || {})));
             setSize({ width: base.width, height: base.height });
+            setDataConfig(newDataConfig);
         },
+        destroy: handleDestroy,
     }));
     // 窗口大小变化时重新调整图表大小
     const handleResize = () => {
@@ -52,28 +116,63 @@ const Index = forwardRef((props, ref) => {
         chart.current = echarts.init(chartRef.current);
         window.addEventListener('resize', handleResize);
         return () => {
-            window.removeEventListener('resize', handleResize);
-            chart.current.dispose();
+            handleDestroy();
         };
     }, []);
+    // 请求数据
+    const getData = () => __awaiter(void 0, void 0, void 0, function* () {
+        const { entities: { config, value } } = (yield HydrocarbonService.requestMstrucLtmplQueryTop(null, dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceId, null)) || {};
+        const temData = handleData(value);
+        setData(temData);
+        return config;
+    });
+    // 初始化请求数据
+    const getInitData = () => __awaiter(void 0, void 0, void 0, function* () {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = yield getData();
+        if ((config === null || config === void 0 ? void 0 : config.requestType) === "polling") {
+            pollingIntervalRef.current = setInterval(() => { getData(); }, (config === null || config === void 0 ? void 0 : config.pollingInterval) || 60000);
+        }
+    });
+    // 静态数据处理
+    useEffect(() => {
+        if ((dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType) === 'staticData') {
+            setData(handleData(dataConfig.staticData));
+        }
+    }, [dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType, dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.staticData]);
+    /**
+     * 数据源数据请求
+     * 1、编辑态不请求数据
+     */
+    useEffect(() => {
+        if (!isDesignMode && (dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType) === 'sourceId' && (dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceId)) {
+            getInitData();
+        }
+        else if ((dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType) === 'sourceId') {
+            setData([]);
+        }
+    }, [dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceType, dataConfig === null || dataConfig === void 0 ? void 0 : dataConfig.sourceId]);
     const renderChart = () => {
         var _a;
         const { grid, barMaxWidth, legend, tooltip, color, xAxis, yAxis, } = config;
-        const option = lodash.cloneDeep(defOption);
+        const option = _.cloneDeep(defOption);
+        // 编辑态无数据显示默认数据
+        const temData = isDesignMode && !(data === null || data === void 0 ? void 0 : data.length) ? defDatas[componentType] || [] : data;
         option.barMaxWidth = barMaxWidth;
         option.grid = grid;
         option.legend = Object.assign(Object.assign({}, legend), legends[legend === null || legend === void 0 ? void 0 : legend.position]);
         option.tooltip = Object.assign({ trigger: "axis" }, tooltip);
         option.xAxis = Object.assign(Object.assign(Object.assign({}, option.xAxis), xAxis), { axisTick: { show: (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.axisLine) === null || _a === void 0 ? void 0 : _a.show } });
         option.yAxis = Object.assign(Object.assign({}, option.yAxis), yAxis);
-        option.series = option.series.map((r, index) => (Object.assign(Object.assign({}, r), { itemStyle: { color: color[index] } })));
+        option.title.show = !(temData === null || temData === void 0 ? void 0 : temData.length);
+        option.series = temData.map((r, index) => (Object.assign(Object.assign({ type: "bar" }, r), { itemStyle: { color: color[index] }, stack: componentType === 'StackColumnChart' ? 'stack' : undefined })));
         chart.current.setOption(option, true);
     };
     useEffect(() => {
         if (config) {
             renderChart();
         }
-    }, [config]);
+    }, [config, data]);
     useEffect(() => {
         if (size) {
             handleResize();