aldehyde 0.2.526 → 0.2.527

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-chart/index.tsx

@@ -21,12 +21,14 @@ const defOption = {
         boundaryGap: true,
         axisTick: { show: true },
         axisLabel: {},
-        min: undefined
+        min: undefined,
+        max: undefined
     },
     yAxis: {
         type: 'value',
         axisLabel: {},
-        min: undefined
+        min: undefined,
+        max: undefined
     },
     legend: { show: false },
     dataZoom: [],
@@ -325,24 +327,28 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         const option = _.cloneDeep(defOption);
         const yAxisLabel = yAxis?.axisLabel;
         const xAxisLabel = xAxis?.axisLabel;
-        let xAxisMin, yAxisMin;
+        let xAxisMin, yAxisMin, xAxisMax, yAxisMax;
         // 编辑态无数据显示默认数据
         const temData = isDesignMode && !tData?.length ? option.series : tData;
         if (temData?.length && xAxis?.type === "time" && xAxis?.timeCompleteZero) { // 时间轴配置-时间轴0点补全
             const dataTime = temData.map(r => r.data || []).flat().map(item => new Date(item[0]).getTime());
             const minTime = Math.min(...dataTime);
+            const maxTime = Math.max(...dataTime);
             xAxisMin = dayjs(minTime).startOf("day").valueOf() + 1; // 时间轴0点补全，+1毫秒，避免显示日期
+            xAxisMax = dayjs(maxTime).endOf("day").valueOf();
         }
         if (temData?.length && yAxis?.type === "time" && yAxis?.timeCompleteZero) {
             const dataTime = temData.map(r => r.data || []).flat().map(item => new Date(item[1]).getTime());
             const minTime = Math.min(...dataTime);
+            const maxTime = Math.max(...dataTime);
             yAxisMin = dayjs(minTime).startOf("day").valueOf() + 1;
+            yAxisMax = dayjs(maxTime).endOf("day").valueOf();
         }
         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, min: xAxisMin, axisTick: { show: xAxis?.axisLine?.show }, axisLabel: xAxisLabel.numFormat && xAxis.type === "value" ? { ...xAxisLabel, formatter: formatNumberUnit } : { ...xAxisLabel, showMinLabel: xAxisMin ? false : null } };
-        option.yAxis = { ...option.yAxis, ...yAxis, min: yAxisMin, axisLabel: yAxisLabel.numFormat && yAxis.type === "value" ? { ...yAxisLabel, formatter: formatNumberUnit } : { ...yAxisLabel, showMinLabel: yAxisMin ? false : null } };
+        option.xAxis = { ...option.xAxis, ...xAxis, min: xAxisMin, max: xAxisMax, axisTick: { show: xAxis?.axisLine?.show }, axisLabel: xAxisLabel.numFormat && xAxis.type === "value" ? { ...xAxisLabel, formatter: formatNumberUnit } : { ...xAxisLabel, showMinLabel: xAxisMin ? false : null } };
+        option.yAxis = { ...option.yAxis, ...yAxis, min: yAxisMin, max: yAxisMax, axisLabel: yAxisLabel.numFormat && yAxis.type === "value" ? { ...yAxisLabel, formatter: formatNumberUnit } : { ...yAxisLabel, showMinLabel: yAxisMin ? false : null } };
         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/lowcode-view/component/abstract-controller.ts

@@ -1,64 +1,64 @@
-export interface UpdateOptions {
-    reRender: boolean;
-}
-
-/**
- * 设计器自定义组件控制器的顶级抽象接口，用于控制自定义组件的整个生命周期
- * @param I 组件实例类型，若组件为React的class组件，则I=class的实例化对象。
- * 若组件为React的函数式组件，则I=forwardRef钩子传递出的ref引用（当然你也可以有其他自定义的实现）
- * 若组件为纯Js实现的组件，则I=组件实例化对象（可参考Echarts活G2创建实例后的返回值）
- * @param C 组件配置类型，即组件的完整属性类型
- */
-abstract class AbstractController<I = any, C = any> {
-
-    /**
-     * 组件实例引用
-     * @protected
-     */
-    protected instance: I | null = null;
-    /**
-     * 组件配置(包括组件数据)
-     * @protected
-     */
-    public config: C | null = null;
-    /**
-     * 组件所处容器的dom元素
-     * @protected
-     */
-    public container: HTMLElement | null = null;
-
-    /******************生命周期******************/
-
-    /**
-     * 创建组件并将组件挂载到指定的容器中
-     * @param container 容器
-     * @param config 组件配置
-     */
-    public abstract create(container: HTMLElement, config: C): Promise<void>;
-
-    /**
-     * 更新组件配置，并触发组件重新渲染
-     * @param config 组件属性（参数）
-     * @param upOp 操作类型
-     */
-    public abstract update(config: C, upOp?: UpdateOptions): void;
-
-    /**
-     * 销毁组件
-     */
-    public destroy(): void {
-        this.instance = null;
-        this.config = null;
-        this.container = null;
-    }
-
-
-    /******************普通方法******************/
-    /**
-     * 获取组件配置数据
-     */
-    public abstract getConfig(): C | null;
-
-}
-
-export default AbstractController;
+export interface UpdateOptions {
+    reRender: boolean;
+}
+
+/**
+ * 设计器自定义组件控制器的顶级抽象接口，用于控制自定义组件的整个生命周期
+ * @param I 组件实例类型，若组件为React的class组件，则I=class的实例化对象。
+ * 若组件为React的函数式组件，则I=forwardRef钩子传递出的ref引用（当然你也可以有其他自定义的实现）
+ * 若组件为纯Js实现的组件，则I=组件实例化对象（可参考Echarts活G2创建实例后的返回值）
+ * @param C 组件配置类型，即组件的完整属性类型
+ */
+abstract class AbstractController<I = any, C = any> {
+
+    /**
+     * 组件实例引用
+     * @protected
+     */
+    protected instance: I | null = null;
+    /**
+     * 组件配置(包括组件数据)
+     * @protected
+     */
+    public config: C | null = null;
+    /**
+     * 组件所处容器的dom元素
+     * @protected
+     */
+    public container: HTMLElement | null = null;
+
+    /******************生命周期******************/
+
+    /**
+     * 创建组件并将组件挂载到指定的容器中
+     * @param container 容器
+     * @param config 组件配置
+     */
+    public abstract create(container: HTMLElement, config: C): Promise<void>;
+
+    /**
+     * 更新组件配置，并触发组件重新渲染
+     * @param config 组件属性（参数）
+     * @param upOp 操作类型
+     */
+    public abstract update(config: C, upOp?: UpdateOptions): void;
+
+    /**
+     * 销毁组件
+     */
+    public destroy(): void {
+        this.instance = null;
+        this.config = null;
+        this.container = null;
+    }
+
+
+    /******************普通方法******************/
+    /**
+     * 获取组件配置数据
+     */
+    public abstract getConfig(): C | null;
+
+}
+
+export default AbstractController;