light-chaser-pro 1.0.0

package/light-chaser-app/src/comps/antd/area-base/AntdBaseAreaConfig.tsx

@@ -0,0 +1,269 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import React, {Component} from 'react';
+import {AreaOptions, ShapeStyle} from "@antv/g2plot";
+import AntdCommonAreaController from "../../antd-common/area/AntdCommonAreaController";
+import {AntdCartesianCoordinateSys} from "../../antd-common/config/AntdFragment";
+import {MappingOptions} from "@antv/g2plot/lib/adaptor/geometries/base";
+import {AntdBaseDesignerController} from "../../antd-common/AntdBaseDesignerController";
+
+import AntdCommonUtil from "../../antd-common/AntdCommonUtil";
+import {ConfigType} from "../../../designer/right/ConfigContent";
+import {FieldChangeData, LCGUI} from "light-chaser-ui/lib/gui/LCGUI.tsx";
+import {Control} from "light-chaser-ui/lib/types.ts";
+import G2ColorUtil from "../../antd-common/util/G2ColorUtil.ts";
+import LCGUIUtil from "light-chaser-ui/lib/gui/LCGUIUtil.ts";
+import {g2plotLabelSetSchema} from "../../common-component/schema-fragment/SchemaFragment.ts";
+import {Label} from "@antv/g2plot/src/types/label.ts";
+
+class AntdBaseAreaStyleConfig extends Component<ConfigType> {
+
+    AreaCoordinateSysChange = (config: AreaOptions) => {
+        const controller = this.props.controller as AntdCommonAreaController;
+        controller.update({style: config});
+    }
+
+    render() {
+        const {controller} = this.props;
+        const config: AreaOptions = controller.getConfig().style;
+        return (
+            <>
+                <AntdBaseAreaGraphics controller={controller}/>
+                <AntdCartesianCoordinateSys onChange={this.AreaCoordinateSysChange} config={config}/>
+            </>
+        );
+    }
+}
+
+export {AntdBaseAreaStyleConfig};
+
+export const AntdBaseAreaGraphics: React.FC<ConfigType> = ({controller}) => {
+
+    const config: AreaOptions = controller.getConfig().style;
+
+    const _onChange = (fieldChangeData: FieldChangeData) => {
+        const {id, data, dataKeyPath} = fieldChangeData;
+        let {dataFragment} = fieldChangeData;
+        if (id === 'areaColor') {
+            const g2Color = G2ColorUtil.parseCssToG2Color(data as string);
+            dataFragment = LCGUIUtil.createObjectFromArray(dataKeyPath, g2Color);
+        }
+        if (id === 'colorConvert')
+            dataFragment = LCGUIUtil.createObjectFromArray(dataKeyPath, G2ColorUtil.parseCssToG2Color(data as string));
+        controller.update(dataFragment);
+    }
+
+    const schema: Control = {
+        key: 'style',
+        type: 'accordion',
+        label: '图形',
+        children: [
+            {
+                type: 'sub-accordion',
+                label: '基础',
+                children: [
+                    {
+                        label: '基准填充',
+                        type: 'switch',
+                        key: 'startOnZero',
+                        value: !!config?.startOnZero,
+                    },
+                ]
+            },
+            {
+                label: '数据点',
+                type: 'sub-accordion',
+                children: [
+                    {
+                        type: 'grid',
+                        children: [
+                            {
+                                key: 'point',
+                                children: [
+                                    {
+                                        label: '尺寸',
+                                        type: 'number-input',
+                                        key: 'size',
+                                        value: (config?.point as MappingOptions)?.size as number || 0,
+                                        config: {
+                                            min: 0,
+                                            max: 10,
+                                        }
+                                    },
+                                    {
+                                        key: 'style',
+                                        children: [
+                                            {
+                                                key: 'lineWidth',
+                                                type: 'number-input',
+                                                label: '描边宽',
+                                                value: (config?.point?.style as ShapeStyle)?.lineWidth,
+                                                config: {
+                                                    min: 0
+                                                }
+                                            },
+                                            {
+                                                id: 'colorConvert',
+                                                key: 'fill',
+                                                type: 'color-picker',
+                                                label: '颜色',
+                                                value: G2ColorUtil.parseG2ToCssColor((config?.point?.style as ShapeStyle)?.fill ?? "#fff"),
+                                                config: {
+                                                    showText: true,
+                                                    modes: ['single', "radial", "linear"]
+                                                }
+                                            },
+                                            {
+                                                id: 'colorConvert',
+                                                key: 'stroke',
+                                                type: 'color-picker',
+                                                label: '描边色',
+                                                value: G2ColorUtil.parseG2ToCssColor((config?.point?.style as ShapeStyle)?.stroke ?? '#fff'),
+                                                config: {
+                                                    showText: true,
+                                                    modes: ['single', "radial", "linear"]
+                                                }
+                                            },
+                                        ]
+                                    },
+                                    {
+                                        key: 'shape',
+                                        type: 'select',
+                                        label: '形状',
+                                        value: (config?.point as MappingOptions)?.shape as string || 'circle',
+                                        config: {
+                                            options: [
+                                                {value: 'circle', label: '圈形'},
+                                                {value: 'square', label: '方形'},
+                                                {value: 'bowtie', label: '领结'},
+                                                {value: 'diamond', label: '钻石'},
+                                                {value: 'hexagon', label: '六角形'},
+                                                {value: 'triangle', label: '三角形'}]
+                                        }
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ],
+            },
+            {
+                label: '数据线',
+                type: 'sub-accordion',
+                children: [
+                    {
+                        type: 'grid',
+                        config: {
+                            gridGap: '15px'
+                        },
+                        children: [
+                            {
+                                label: '平滑',
+                                type: 'switch',
+                                key: 'smooth',
+                                value: !!config?.smooth,
+                            },
+                            {
+                                key: 'line',
+                                children: [
+                                    {
+                                        key: 'size',
+                                        type: 'number-input',
+                                        label: '宽度',
+                                        value: config?.line?.size as number || 0,
+                                        config: {
+                                            min: 0,
+                                            max: 10,
+                                        }
+                                    },
+                                    {
+                                        key: 'color',
+                                        id: 'areaColor',
+                                        type: 'color-picker',
+                                        label: '颜色',
+                                        value: G2ColorUtil.parseG2ToCssColor(config?.line?.color as string || '#fff'),
+                                        config: {
+                                            showText: true,
+                                            modes: ['single', 'linear', 'radial']
+                                        }
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                label: '数据面',
+                type: 'sub-accordion',
+                key: 'areaStyle',
+                children: [
+                    {
+                        type: 'grid',
+                        children: [{
+                            key: 'fill',
+                            id: 'areaColor',
+                            type: 'color-picker',
+                            label: '颜色',
+                            value: G2ColorUtil.parseG2ToCssColor((config?.areaStyle as ShapeStyle)?.fill || '#fff'),
+                            config: {
+                                showText: true,
+                                modes: ['single', 'linear', 'radial']
+                            }
+                        }]
+                    }
+                ]
+            },
+            g2plotLabelSetSchema(config?.label as Label)
+        ],
+    }
+
+    return (
+        <LCGUI schema={schema} onFieldChange={_onChange}/>
+    )
+}
+
+export const AntdBaseAreaFieldMapping: React.FC<ConfigType<AntdBaseDesignerController>> = (props) => {
+    const {controller} = props;
+    const config = controller?.config?.style;
+    const options = AntdCommonUtil.getDataFieldOptions(controller);
+    const schema: Control = {
+        key: 'style',
+        type: 'grid',
+        children: [
+            {
+                key: 'xField',
+                type: 'select',
+                label: 'X字段',
+                value: config?.xField,
+                config: {
+                    options,
+                }
+            },
+            {
+                key: 'yField',
+                type: 'select',
+                label: 'Y字段',
+                value: config?.yField,
+                config: {
+                    options,
+                }
+            }
+        ]
+    }
+
+    const onFieldChange = (fieldChangeData: FieldChangeData) => {
+        controller.update(fieldChangeData.dataFragment);
+    }
+
+    return <div style={{padding: 10}}><LCGUI schema={schema} onFieldChange={onFieldChange}/></div>
+}

package/light-chaser-app/src/comps/antd/area-base/AntdBaseAreaDefinition.ts

@@ -0,0 +1,232 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import baseAreaImg from "./base-area.png";
+import AbstractAreaDefinition from "../../antd-common/area/AbstractAreaDefinition";
+import {AntdAreaProps} from "../../antd-common/area/AntdCommonAreaController";
+import React from "react";
+import {BaseInfoType, MenuToConfigMappingType} from "light-chaser-types/types/ComponentTypes.ts";
+
+const AntdBaseAreaStyleConfig = React.lazy(() => import("./AntdBaseAreaConfig").then((module) => ({default: module.AntdBaseAreaStyleConfig})));
+const AntdBaseAreaFieldMapping = React.lazy(() => import("./AntdBaseAreaConfig").then((module) => ({default: module.AntdBaseAreaFieldMapping})));
+
+class AntdBaseAreaDefinition extends AbstractAreaDefinition {
+
+    getBaseInfo(): BaseInfoType {
+        return {
+            compName: "Antd基础面积图",
+            compKey: "AntdBaseArea",
+            categorize: "chart",
+            subCategorize: "area"
+        };
+    }
+
+    getChartImg(): string {
+        return baseAreaImg;
+    }
+
+    getMenuToConfigContentMap(): MenuToConfigMappingType {
+        const menuToConfigContentMap = super.getMenuToConfigContentMap();
+        menuToConfigContentMap!['style'] = AntdBaseAreaStyleConfig;
+        menuToConfigContentMap!['mapping'] = AntdBaseAreaFieldMapping;
+        return menuToConfigContentMap;
+    }
+
+    getInitConfig(): AntdAreaProps {
+        const data = [
+            {
+                name: "Q1",
+                value: 12
+            },
+            {
+                name: "Q2",
+                value: 30
+            },
+            {
+                name: "Q3",
+                value: 45
+            },
+            {
+                name: "Q4",
+                value: 60
+            },
+            {
+                name: "Q5",
+                value: 230
+            },
+            {
+                name: "Q6",
+                value: 84
+            },
+            {
+                name: "Q7",
+                value: 160
+            },
+            {
+                name: "Q8",
+                value: 76
+            },
+            {
+                name: "Q9",
+                value: 50
+            },
+            {
+                name: "Q10",
+                value: 48
+            },
+            {
+                name: "Q11",
+                value: 83
+            },
+            {
+                name: "Q12",
+                value: 75
+            },
+            {
+                name: "Q13",
+                value: 77
+            },
+            {
+                name: "Q14",
+                value: 82
+            },
+            {
+                name: "Q15",
+                value: 47
+            },
+            {
+                name: "Q16",
+                value: 86
+            },
+            {
+                name: "Q17",
+                value: 54
+            },
+            {
+                name: "Q18",
+                value: 45
+            },
+            {
+                name: "Q19",
+                value: 25
+            },
+            {
+                name: "Q20",
+                value: 22
+            }
+        ];
+        return {
+            base: {
+                id: "",
+                name: '基础面积图',
+                type: 'AntdBaseArea',
+            },
+            style: {
+                data: data,
+                xField: "name",
+                yField: "value",
+                label: {
+                    position: "top",
+                    offsetY: -4,
+                    style: {
+                        fill: "#ffffff",
+                        fontSize: 14
+                    },
+                },
+                smooth: true,
+                supportCSSTransform: true,
+                isStack: false,
+                startOnZero: false,
+                point: {
+                    size: 0,
+                    style: {
+                        fill: "#205e9a",
+                        stroke: "#ffffff",
+                        lineWidth: 0
+                    }
+                },
+                line: {
+                    color: "r(0.5,0.5,1) 0.55:#00aaff 1:#004074",
+                    size: 1.5
+                },
+                areaStyle: {
+                    fillOpacity: 1,
+                    fill: "l(90) 0:#016eb7 0.85:#0964a133"
+                },
+                xAxis: {
+                    range: [0, 1],
+                    grid: null,
+                    label: {
+                        style: {
+                            fill: "#fff",
+                            fontSize: 10
+                        }
+                    },
+                    line: {
+                        style: {
+                            stroke: "#c7c7c76e",
+                            lineWidth: 1
+                        }
+                    },
+                    tickLine: null,
+                    subTickLine: null,
+                    title: null,
+                    position: "bottom"
+                },
+                yAxis: {
+                    tickCount: 3,
+                    grid: null,
+                    label: {
+                        style: {
+                            fill: "#fff",
+                            fontSize: 10
+                        }
+                    },
+                    line: null,
+                    tickLine: null,
+                    subTickLine: null,
+                    title: null
+                },
+                legend: {
+                    position: "right-top",
+                    layout: "vertical",
+                    itemName: {
+                        style: {
+                            fill: "#00f0ffff",
+                            fontSize: 12
+                        }
+                    }
+                },
+                animation: {
+                    appear: {
+                        animation: "wave-in",
+                        duration: 3000
+                    }
+                }
+            },
+            filter: {
+                enable: false,
+                blur: 0,
+                brightness: 1,
+                contrast: 1,
+                opacity: 1,
+                saturate: 1,
+                hueRotate: 0
+            },
+            data: {
+                sourceType: 'static',
+                value: data
+            },
+        };
+    }
+}
+
+export default AntdBaseAreaDefinition;