aldehyde 0.2.512 → 0.2.514

package/src/aldehyde/lowcode-components/column-3d-chart/index.tsx

@@ -5,7 +5,7 @@ import { Spin } from "antd";
 import { useLocale } from "../../locale/useLocale";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
-import { handleTimeDataSort } from "../line-chart";
+import { handleTimeDataSort, formatNumberUnit } from "../line-chart";
 
 const defData = [["1990", 52], ["1991", 45], ["1992", 35], ["1993", 41], ["1994", 23], ["1995", 25], ["1996", 15]];
 
@@ -23,9 +23,11 @@ const defOption = {
         type: 'category',
         boundaryGap: true,
         axisTick: { show: true },
+        axisLabel: {}
     },
     yAxis: {
-        type: 'value'
+        type: 'value',
+        axisLabel: {}
     },
     legend: { show: false },
     dataZoom: [],
@@ -298,6 +300,8 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const renderChart = () => {
         const { grid, barWidth, legend, tooltip, color, xAxis, yAxis, isBackground, dataZoom, slider, groupType } = config;
         const option = _.cloneDeep(defOption);
+        const yAxisLabel = yAxis?.axisLabel;
+        const xAxisLabel = xAxis?.axisLabel;
         // 编辑态无数据显示默认数据
         const temData = isDesignMode && !data?.length ? defData : data;
         // 背景数据
@@ -310,8 +314,8 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         option.grid = grid;
         option.legend = { ...legend, ...legends[legend?.position] };
         option.tooltip = { trigger: "axis", ...tooltip };
-        option.xAxis = { ...option.xAxis, ...xAxis, axisTick: { show: xAxis?.axisLine?.show } };
-        option.yAxis = { ...option.yAxis, ...yAxis };
+        option.xAxis = { ...option.xAxis, ...xAxis, axisTick: { show: xAxis?.axisLine?.show }, axisLabel: xAxisLabel.numFormat && xAxis.type === "value" ? { ...xAxisLabel, formatter: formatNumberUnit } : xAxisLabel };
+        option.yAxis = { ...option.yAxis, ...yAxis, axisLabel: yAxisLabel.numFormat && yAxis.type === "value" ? { ...yAxisLabel, formatter: formatNumberUnit } : yAxisLabel };
         option.dataZoom = dataZoom ? [slider ? { type: "slider" } : undefined, { type: "inside", disabled: false }].filter(Boolean) : [];
         option.title.text = translate("${暂无数据}");
         option.title.show = !temData?.length;

package/src/aldehyde/lowcode-components/column-chart/index.tsx

@@ -5,7 +5,7 @@ import { Spin } from "antd";
 import { useLocale } from "../../locale/useLocale";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
-import { handleTimeDataSort } from "../line-chart";
+import { handleTimeDataSort, formatNumberUnit } from "../line-chart";
 
 const defColumnValue = [
     {
@@ -47,9 +47,11 @@ const defOption = {
         type: 'category',
         boundaryGap: true,
         axisTick: { show: true },
+        axisLabel: {}
     },
     yAxis: {
-        type: 'value'
+        type: 'value',
+        axisLabel: {}
     },
     dataZoom: [],
     legend: { show: false },
@@ -284,14 +286,16 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const renderChart = (tData) => {
         const { grid, barMaxWidth, legend, tooltip, color, xAxis, yAxis, dataZoom, slider, markLineColor, groupType } = config
         const option = _.cloneDeep(defOption);
+        const yAxisLabel = yAxis?.axisLabel;
+        const xAxisLabel = xAxis?.axisLabel;
         // 编辑态无数据显示默认数据
         const temData = isDesignMode && !tData?.length ? defDatas[componentType] || [] : tData;
         option.barMaxWidth = barMaxWidth;
         option.grid = grid;
         option.legend = { ...legend, ...legends[legend?.position], data: temData?.filter((item: any) => !item.isMarkLine && item.name).map((r: any) => r.name) };
         option.tooltip = { trigger: "axis", ...tooltip };
-        option.xAxis = { ...option.xAxis, ...xAxis, axisTick: { show: xAxis?.axisLine?.show } };
-        option.yAxis = { ...option.yAxis, ...yAxis };
+        option.xAxis = { ...option.xAxis, ...xAxis, axisTick: { show: xAxis?.axisLine?.show }, axisLabel: xAxisLabel.numFormat && xAxis.type === "value" ? { ...xAxisLabel, formatter: formatNumberUnit } : xAxisLabel };
+        option.yAxis = { ...option.yAxis, ...yAxis, axisLabel: yAxisLabel.numFormat && yAxis.type === "value" ? { ...yAxisLabel, formatter: formatNumberUnit } : yAxisLabel };
         option.dataZoom = dataZoom ? [slider ? { type: "slider" } : undefined, { type: "inside", disabled: false }].filter(Boolean) : [];
         option.title.text = translate("${暂无数据}");
         option.title.show = !temData?.length;

package/src/aldehyde/lowcode-components/data-number/index.less

@@ -1,11 +1,11 @@
-.data-number-component {
-  --stroke-color: #000000;
-  --stroke-width: 0;
-
-  height: 100%;
-  display: flex;
-  -webkit-text-stroke-color: var(--stroke-color);
-  -webkit-text-stroke-width: var(--stroke-width);
-  stroke-color: var(--stroke-color);
-  stroke-width: var(--stroke-width);
+.data-number-component {
+  --stroke-color: #000000;
+  --stroke-width: 0;
+
+  height: 100%;
+  display: flex;
+  -webkit-text-stroke-color: var(--stroke-color);
+  -webkit-text-stroke-width: var(--stroke-width);
+  stroke-color: var(--stroke-color);
+  stroke-width: var(--stroke-width);
 }

package/src/aldehyde/lowcode-components/date-time/index.less

@@ -1,5 +1,5 @@
-.date-time-component {
-  width: 100%;
-  height: 100%;
-  display: flex;
+.date-time-component {
+  width: 100%;
+  height: 100%;
+  display: flex;
 }

package/src/aldehyde/lowcode-components/date-time/index.tsx

@@ -1,65 +1,65 @@
-import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import dayjs from "dayjs";
-import './index.less';
-
-export interface DateTimeComponentStyle {
-    fontSize?: number;
-    color?: string;
-    fontFamily?: string;
-    fontWeight?: number;
-    alignItems?: string;
-    justifyContent?: string;
-    letterSpacing?: string;
-    formatType?: string;
-}
-
-export interface DateTimeComponentProps {
-    style?: DateTimeComponentStyle;
-}
-
-export interface DateTimeComponentRef {
-    updateConfig: (newConfig: DateTimeComponentProps) => void;
-    setEventHandler: (eventMap: Record<string, Function>) => void;
-    destroy: () => void;
-}
-
-const defFormatType = "YYYY年MM月DD日 HH时mm分ss秒";
-
-const DateTimeComponent = forwardRef((props: DateTimeComponentProps, ref: ForwardedRef<DateTimeComponentRef>) => {
-    const [config, setConfig] = useState<DateTimeComponentProps>({ ...props });
-    const [datetime, setDateTime] = useState<string>(dayjs().format(config.style?.formatType || defFormatType));
-    const timeRef = useRef<NodeJS.Timeout | null>(null);
-    const eventHandlerMap = useRef<Record<string, Function>>({});
-
-    const handleClearInterval = () => {
-        timeRef.current && clearInterval(timeRef.current);
-        timeRef.current = null;
-    }
-
-    useEffect(() => {
-        timeRef.current = setInterval(() => {
-            setDateTime(dayjs().format(config.style?.formatType || defFormatType));
-        }, 1000);
-        return () => {
-            handleClearInterval();
-        }
-    }, []);
-
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => setConfig({ ...newConfig }),
-        setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
-        destroy: () => {
-            handleClearInterval();
-        }
-    }));
-
-
-    return (
-        <div className="date-time-component" style={{ ...(config?.style || {}) }}>
-            {datetime}
-        </div>
-    );
-});
-
+import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import dayjs from "dayjs";
+import './index.less';
+
+export interface DateTimeComponentStyle {
+    fontSize?: number;
+    color?: string;
+    fontFamily?: string;
+    fontWeight?: number;
+    alignItems?: string;
+    justifyContent?: string;
+    letterSpacing?: string;
+    formatType?: string;
+}
+
+export interface DateTimeComponentProps {
+    style?: DateTimeComponentStyle;
+}
+
+export interface DateTimeComponentRef {
+    updateConfig: (newConfig: DateTimeComponentProps) => void;
+    setEventHandler: (eventMap: Record<string, Function>) => void;
+    destroy: () => void;
+}
+
+const defFormatType = "YYYY年MM月DD日 HH时mm分ss秒";
+
+const DateTimeComponent = forwardRef((props: DateTimeComponentProps, ref: ForwardedRef<DateTimeComponentRef>) => {
+    const [config, setConfig] = useState<DateTimeComponentProps>({ ...props });
+    const [datetime, setDateTime] = useState<string>(dayjs().format(config.style?.formatType || defFormatType));
+    const timeRef = useRef<NodeJS.Timeout | null>(null);
+    const eventHandlerMap = useRef<Record<string, Function>>({});
+
+    const handleClearInterval = () => {
+        timeRef.current && clearInterval(timeRef.current);
+        timeRef.current = null;
+    }
+
+    useEffect(() => {
+        timeRef.current = setInterval(() => {
+            setDateTime(dayjs().format(config.style?.formatType || defFormatType));
+        }, 1000);
+        return () => {
+            handleClearInterval();
+        }
+    }, []);
+
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => setConfig({ ...newConfig }),
+        setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
+        destroy: () => {
+            handleClearInterval();
+        }
+    }));
+
+
+    return (
+        <div className="date-time-component" style={{ ...(config?.style || {}) }}>
+            {datetime}
+        </div>
+    );
+});
+
 export default DateTimeComponent;

package/src/aldehyde/lowcode-components/four-angle-glow-border/index.less

@@ -1,50 +1,50 @@
-.four-angle-glow {
-  --fagb-color: #00ebff;
-  --fagb-width: 2px;
-  --fagb-length: 8px;
-  --fagb-radius: 3px;
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .angle {
-    position: absolute;
-    border: var(--fagb-width) solid var(--fagb-color);
-    width: var(--fagb-length);
-    height: var(--fagb-length);
-  }
-
-  .angle-tl {
-    margin: -1px 0 0 -1px;
-    border-right: 0;
-    border-bottom: 0;
-    border-top-left-radius: var(--fagb-radius);
-  }
-
-  .angle-tr {
-    top: 0;
-    right: 0;
-    border-left: 0;
-    border-bottom: 0;
-    margin: -1px -1px 0 0;
-    border-top-right-radius: var(--fagb-radius);
-  }
-
-  .angle-bl {
-    bottom: 0;
-    left: 0;
-    border-top: 0;
-    border-right: 0;
-    margin: 0 0 -1px -1px;
-    border-bottom-left-radius: var(--fagb-radius);
-  }
-
-  .angle-br {
-    bottom: 0;
-    right: 0;
-    border-left: 0;
-    border-top: 0;
-    margin: 0 -1px -1px 0;
-    border-bottom-right-radius: var(--fagb-radius);
-  }
+.four-angle-glow {
+  --fagb-color: #00ebff;
+  --fagb-width: 2px;
+  --fagb-length: 8px;
+  --fagb-radius: 3px;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .angle {
+    position: absolute;
+    border: var(--fagb-width) solid var(--fagb-color);
+    width: var(--fagb-length);
+    height: var(--fagb-length);
+  }
+
+  .angle-tl {
+    margin: -1px 0 0 -1px;
+    border-right: 0;
+    border-bottom: 0;
+    border-top-left-radius: var(--fagb-radius);
+  }
+
+  .angle-tr {
+    top: 0;
+    right: 0;
+    border-left: 0;
+    border-bottom: 0;
+    margin: -1px -1px 0 0;
+    border-top-right-radius: var(--fagb-radius);
+  }
+
+  .angle-bl {
+    bottom: 0;
+    left: 0;
+    border-top: 0;
+    border-right: 0;
+    margin: 0 0 -1px -1px;
+    border-bottom-left-radius: var(--fagb-radius);
+  }
+
+  .angle-br {
+    bottom: 0;
+    right: 0;
+    border-left: 0;
+    border-top: 0;
+    margin: 0 -1px -1px 0;
+    border-bottom-right-radius: var(--fagb-radius);
+  }
 }

package/src/aldehyde/lowcode-components/four-angle-glow-border/index.tsx

@@ -1,53 +1,53 @@
-import './index.less';
-import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
-
-export interface FourAngleGlowBorderStyle {
-    width?: number;
-    length?: number;
-    color?: string;
-    radius?: number;
-}
-
-export interface FourAngleGlowProps {
-    style?: FourAngleGlowBorderStyle;
-}
-
-export interface FourAngleGlowBorderRef {
-    updateConfig: (config: FourAngleGlowProps) => void;
-}
-
-const FourAngleGlowBorder = forwardRef((props: FourAngleGlowProps, ref: ForwardedRef<FourAngleGlowBorderRef>) => {
-    const [config] = useState<FourAngleGlowProps>({ ...props });
-    const fourAngleGlowRef = useRef<HTMLDivElement | null>(null);
-
-    const updateStyle = (style: FourAngleGlowBorderStyle) => {
-        const dom = fourAngleGlowRef.current;
-        if (dom) {
-            dom.style.setProperty('--fagb-length', `${style?.length}px`);
-            dom.style.setProperty('--fagb-color', style?.color);
-            dom.style.setProperty('--fagb-radius', `${style?.radius}px`);
-            dom.style.setProperty('--fagb-width', `${style?.width}px`);
-        }
-    };
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => updateStyle({ ...newConfig.style }),
-    }));
-
-    useEffect(() => {
-        updateStyle(config.style);
-    }, []);
-
-    return (
-        <div className="four-angle-glow" ref={fourAngleGlowRef}>
-            <span className="angle angle-tl" />
-            <span className="angle angle-tr" />
-            <span className="angle angle-bl" />
-            <span className="angle angle-br" />
-        </div>
-    );
-})
-
-export default FourAngleGlowBorder;
-
-
+import './index.less';
+import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+
+export interface FourAngleGlowBorderStyle {
+    width?: number;
+    length?: number;
+    color?: string;
+    radius?: number;
+}
+
+export interface FourAngleGlowProps {
+    style?: FourAngleGlowBorderStyle;
+}
+
+export interface FourAngleGlowBorderRef {
+    updateConfig: (config: FourAngleGlowProps) => void;
+}
+
+const FourAngleGlowBorder = forwardRef((props: FourAngleGlowProps, ref: ForwardedRef<FourAngleGlowBorderRef>) => {
+    const [config] = useState<FourAngleGlowProps>({ ...props });
+    const fourAngleGlowRef = useRef<HTMLDivElement | null>(null);
+
+    const updateStyle = (style: FourAngleGlowBorderStyle) => {
+        const dom = fourAngleGlowRef.current;
+        if (dom) {
+            dom.style.setProperty('--fagb-length', `${style?.length}px`);
+            dom.style.setProperty('--fagb-color', style?.color);
+            dom.style.setProperty('--fagb-radius', `${style?.radius}px`);
+            dom.style.setProperty('--fagb-width', `${style?.width}px`);
+        }
+    };
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => updateStyle({ ...newConfig.style }),
+    }));
+
+    useEffect(() => {
+        updateStyle(config.style);
+    }, []);
+
+    return (
+        <div className="four-angle-glow" ref={fourAngleGlowRef}>
+            <span className="angle angle-tl" />
+            <span className="angle angle-tr" />
+            <span className="angle angle-bl" />
+            <span className="angle angle-br" />
+        </div>
+    );
+})
+
+export default FourAngleGlowBorder;
+
+

package/src/aldehyde/lowcode-components/line-bar-chart/index.tsx

@@ -5,8 +5,7 @@ import { Spin } from "antd";
 import { useLocale } from "../../locale/useLocale";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
-import { handleTimeDataSort } from "../line-chart";
-
+import { handleTimeDataSort, formatNumberUnit } from "../line-chart";
 
 const defOption = {
     title: {
@@ -21,9 +20,11 @@ const defOption = {
         type: 'category',
         boundaryGap: true,
         axisTick: { show: true },
+        axisLabel: {}
     },
     yAxis: {
-        type: 'value'
+        type: 'value',
+        axisLabel: {}
     },
     legend: { show: false },
     barMaxWidth: 20,
@@ -276,14 +277,16 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const renderChart = (tData) => {
         const { grid, legend, tooltip, color, xAxis, yAxis, smooth, lineStyle, step, isArea, isGradient, areaStyle, barMaxWidth, symbol, dataZoom, slider, connectNulls, markLineColor, groupType } = config;
         const option = _.cloneDeep(defOption);
+        const yAxisLabel = yAxis?.axisLabel;
+        const xAxisLabel = xAxis?.axisLabel;
         // 编辑态无数据显示默认数据
         const temData = isDesignMode && !tData?.length ? option.series : tData;
         option.barMaxWidth = barMaxWidth;
         option.grid = grid;
         option.legend = { ...legend, ...legends[legend?.position], data: temData?.filter((item: any) => !item.isMarkLine && item.name).map((r: any) => r.name) };
         option.tooltip = { trigger: "axis", ...tooltip };
-        option.xAxis = { ...option.xAxis, ...xAxis, axisTick: { show: xAxis?.axisLine?.show } };
-        option.yAxis = { ...option.yAxis, ...yAxis };
+        option.xAxis = { ...option.xAxis, ...xAxis, axisTick: { show: xAxis?.axisLine?.show }, axisLabel: xAxisLabel.numFormat && xAxis.type === "value" ? { ...xAxisLabel, formatter: formatNumberUnit } : xAxisLabel };
+        option.yAxis = { ...option.yAxis, ...yAxis, axisLabel: yAxisLabel.numFormat && yAxis.type === "value" ? { ...yAxisLabel, formatter: formatNumberUnit } : yAxisLabel };
         option.dataZoom = dataZoom ? [slider ? { type: "slider" } : undefined, { type: "inside", disabled: false }].filter(Boolean) : [];
         option.title.text = translate("${暂无数据}");
         option.title.show = !temData?.length;

package/src/aldehyde/lowcode-components/line-chart/index.tsx

@@ -20,9 +20,11 @@ const defOption = {
         type: 'category',
         boundaryGap: true,
         axisTick: { show: true },
+        axisLabel: {}
     },
     yAxis: {
-        type: 'value'
+        type: 'value',
+        axisLabel: {}
     },
     legend: { show: false },
     dataZoom: [],
@@ -62,6 +64,25 @@ export const handleTimeDataSort = (data: { [key: string]: any }[], name: string,
     return temData;
 }
 
+// 数值单位格式化
+export const formatNumberUnit = (val: number | null | undefined, digit = 1) => {
+    if (val === null || val === undefined) return val;
+    const absVal = Math.abs(val);
+    // 阈值从大到小排序，新增单位直接在这里加
+    const units = [
+        { threshold: 100000000, divisor: 100000000, label: '亿' },
+        { threshold: 10000000, divisor: 10000000, label: '千万' },
+        { threshold: 10000, divisor: 10000, label: '万' }
+    ];
+    for (const u of units) {
+        if (absVal >= u.threshold) {
+            const numStr = parseFloat((val / u.divisor).toFixed(digit));
+            return numStr + " " + u.label;
+        }
+    }
+    return String(val);
+}
+
 // 处理数据格式 nullSetZero(是否空值置0)
 const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[], nullSetZero?: boolean) => {
     if (!data?.length) {
@@ -288,13 +309,15 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         const { grid, legend, tooltip, color, xAxis, yAxis, smooth, connectNulls, lineStyle, step, isArea, isGradient, areaStyle, dataZoom, slider, symbol: configSymbol, markLineColor, groupType } = config;
         const { itemStyle, ...symbol } = configSymbol || {};
         const option = _.cloneDeep(defOption);
+        const yAxisLabel = yAxis?.axisLabel;
+        const xAxisLabel = xAxis?.axisLabel;
         // 编辑态无数据显示默认数据
         const temData = isDesignMode && !tData?.length ? option.series : tData;
         option.grid = grid;
         option.legend = { ...legend, ...legends[legend?.position], data: temData?.filter((item: any) => !item.isMarkLine && item.name).map((r: any) => r.name) };
         option.tooltip = { trigger: "axis", ...tooltip };
-        option.xAxis = { ...option.xAxis, ...xAxis, axisTick: { show: xAxis?.axisLine?.show } };
-        option.yAxis = { ...option.yAxis, ...yAxis };
+        option.xAxis = { ...option.xAxis, ...xAxis, axisTick: { show: xAxis?.axisLine?.show }, axisLabel: xAxisLabel.numFormat && xAxis.type === "value" ? { ...xAxisLabel, formatter: formatNumberUnit } : xAxisLabel };
+        option.yAxis = { ...option.yAxis, ...yAxis, axisLabel: yAxisLabel.numFormat && yAxis.type === "value" ? { ...yAxisLabel, formatter: formatNumberUnit } : yAxisLabel };
         option.dataZoom = dataZoom ? [slider ? { type: "slider" } : undefined, { type: "inside", disabled: false }].filter(Boolean) : [];
         option.title.text = translate("${暂无数据}");
         option.title.show = !temData?.length;