aldehyde 0.2.503 → 0.2.504

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

@@ -112,6 +112,7 @@ export interface ComponentStyle {
     dataZoom?: boolean;
     slider?: boolean; // 区域缩放是否显示滑动条
     markLineColor?: string[]; // 标记线颜色
+    groupType?: string; // 图表分组类型（用于图表联动）
 }
 
 export interface ComponentProps {
@@ -263,7 +264,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     }, [searchParams, initSearchParams]);
 
     const renderChart = () => {
-        const { grid, barMaxWidth, legend, tooltip, color, xAxis, yAxis, dataZoom, slider, markLineColor } = config
+        const { grid, barMaxWidth, legend, tooltip, color, xAxis, yAxis, dataZoom, slider, markLineColor, groupType } = config
         const option = _.cloneDeep(defOption);
         // 编辑态无数据显示默认数据
         const temData = isDesignMode && !data?.length ? defDatas[componentType] || [] : data;
@@ -326,6 +327,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
                 }
             }
         }).filter(Boolean);
+        if (groupType) chart.current.group = groupType;
         chart.current.setOption(option, true);
     }
     useEffect(() => {

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

@@ -105,6 +105,7 @@ export interface ComponentStyle {
     connectNulls?: boolean; // 是否连接空值
     nullSetZero?: boolean; // 空值是否置0
     markLineColor?: string[]; // 标记线颜色
+    groupType?: string; // 图表分组类型（用于图表联动）
 }
 
 export interface ComponentProps {
@@ -256,7 +257,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     }, [searchParams, initSearchParams]);
 
     const renderChart = () => {
-        const { grid, legend, tooltip, color, xAxis, yAxis, smooth, lineStyle, step, isArea, isGradient, areaStyle, barMaxWidth, symbol, dataZoom, slider, connectNulls, markLineColor } = config;
+        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 temData = isDesignMode && !data?.length ? option.series : data;
@@ -332,6 +333,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
                 }
             }
         }).filter(Boolean);
+        if (groupType) chart.current.group = groupType;
         chart.current.setOption(option, true);
     };
 

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

@@ -116,6 +116,7 @@ export interface ComponentStyle {
     connectNulls?: boolean; // 是否连接空值
     nullSetZero?: boolean; // 空值是否置0
     markLineColor?: string[]; // 标记线颜色
+    groupType?: string; // 图表分组类型（用于图表联动）
 }
 
 export interface ComponentProps {
@@ -267,7 +268,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     }, [searchParams, initSearchParams]);
 
     const renderChart = () => {
-        const { grid, legend, tooltip, color, xAxis, yAxis, smooth, connectNulls, lineStyle, step, isArea, isGradient, areaStyle, dataZoom, slider, symbol: configSymbol, markLineColor } = config;
+        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);
         // 编辑态无数据显示默认数据
@@ -339,6 +340,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
                 }
             }
         }).filter(Boolean);
+        if (groupType) chart.current.group = groupType;
         chart.current.setOption(option, true);
     };
 

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;