@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/framework/module/data/Manager.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+class DataManager{
+    constructor(){
+        this.nodes = {};
+        this.lines = {};
+        this.connectors = {};
+    }
+
+    setNodes(nodes){
+        this.nodes = nodes;
+    }
+
+    getNodes(){
+        return this.nodes;
+    }
+
+    getNodeId(id){
+        return this.nodes[id];
+    }
+
+    setLines(lines){
+        this.lines = lines;
+    }
+
+    getLines(){
+        return this.lines;
+    }
+
+    getLineById(id){
+        return this.lines[id];
+    }
+
+    setConnectors(connectors){
+        this.connectors = connectors;
+    }
+
+    getConnectors(){
+        return this.connectors;
+    }
+
+    getConnectorId(id){
+        return this.connectors[id];
+    }
+}
+
+export default DataManager;

package/src/components/charts/framework/module/legend/Item.js

@@ -0,0 +1,218 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import merge from '../../../util/merge'
+import { bindAttributes, getCssProperty, getClassName, convertNumberCssVal } from './util'
+import getSymbol from './getSymbol'
+import { isArray } from '../../../util/type'
+import { getColor } from '../../../util/color'
+import { appendDom, appendHTML } from '../../../util/dom'
+import cloneDeep from '../../../util/cloneDeep'
+
+class Item {
+    static symbolSize = {
+        circle: [8, 8],
+        rect: [24,12],
+        arrowline:[20,20],
+        arrowDottedline:[20,20],
+        dottedline:[20,20],
+    }
+
+    static layout = {
+        horizontal: 'row',
+        vertical: 'column'
+    }
+
+    static defaultOptions = {
+        //支持其他css属性
+        gap: 16,
+        inactiveColor: '#DFDFDF',
+        orientation: 'horizontal',
+        marker: {
+            type: 'circle',
+            color: [
+                "#6D8FF0",
+                "#00A874",
+                "#BD72F0",
+                "#54BCCE",
+                "#FDC000",
+                "#9185F0",
+                "#00A2B5"
+            ],
+        },
+        label: {
+            fontSize: 14,
+            color: '#191919'
+        }
+    }
+    option = {}
+    // 是否是激活态
+    active = true
+    data = null
+    container = null
+    itemContainer = null
+    markerContainer = null
+
+    constructor(option, data, container) {
+        const defaultOption = cloneDeep(Item.defaultOptions)
+        merge(defaultOption, option)
+        this.option = Object.assign({}, defaultOption)
+        this.data = data
+        this.container = container
+    }
+
+    init() {
+        this.mixStyleInData()
+        this.initWrapper()
+        if (this.option.render) {
+            const params = this.getItemParams()
+            const htmlStr = this.option.render(params, this.itemContainer)
+            htmlStr && appendHTML(this.itemContainer, htmlStr)
+            return
+        }
+        this.initMarker()
+        this.intieLabel()
+    }
+
+
+    intieLabel() {
+        const labelContainer = document.createElement('div')
+        const className = getClassName('labelContainer')
+        const style = this.getCssStyle(this.option.label)
+        const props = {
+            attributes: {
+                class: className,
+                style
+            }
+        }
+        bindAttributes(labelContainer, props)
+        appendHTML(labelContainer, this.data.name)
+        appendDom(this.itemContainer, labelContainer)
+    }
+
+    getItemIndex() {
+        const [, index] = this.option.uuid.split('=')
+        return index
+    }
+
+
+    getSymbolColor() {
+        const { color } = this.option.marker
+        if (isArray(color)) {
+            const index = this.getItemIndex()
+            return getColor(color, index)
+        }
+        return color
+    }
+
+
+    initMarker() {
+        this.markerContainer = document.createElement('div')
+        const className = getClassName('markerContainer')
+        const { type, ...other } = this.option.marker
+        const color = this.getSymbolColor()
+        const symbol = getSymbol(type)
+        const [width, height] = this.getSymbolSize(type)
+        const style = {
+            ...this.getCssStyle(other),
+            width,
+            height,
+            color
+        }
+        const props = {
+            attributes: {
+                class: className,
+                style
+            }
+        }
+        bindAttributes(this.markerContainer, props)
+        appendDom(this.itemContainer, this.markerContainer)
+        appendHTML(this.markerContainer, symbol)
+    }
+
+    //获取默认的sumbol的大小
+    getSymbolSize(type) {
+        const [width, height] = Item.symbolSize[type] ?? ['unset', 'unset']
+        return [convertNumberCssVal(width), convertNumberCssVal(height)]
+    }
+
+    getCssStyle(option) {
+        return getCssProperty(option)
+    }
+
+    mixStyleInData() {
+        if (this.data?.itemStyle) {
+            merge(this.option, this.data.itemStyle)
+        }
+    }
+
+    click = (e) => {
+        const { disabled } = this.data
+        if (disabled) return
+        this.active=!this.active
+        if(!this.option.render){
+            this.toggleState()
+        }
+        const params = this.getItemParams()
+        this.option?.onClick?.(params, e)
+    }
+
+    toggleState(){
+        if(this.active){
+            this.itemContainer.classList.remove('inactive')
+        }else{
+            this.itemContainer.classList.add('inactive')
+        }
+    }
+
+    initWrapper() {
+        const { orientation } = this.option
+        this.itemContainer = document.createElement('div')
+        const layout = Item.layout[orientation]
+        const style = {
+            ...this.getCssStyle(this.option),
+            flexDirection: layout,
+        }
+        const className = getClassName('itemContainer')
+        const props = {
+            attributes: {
+                class: className,
+                style
+            },
+            events: {
+                click: this.click
+            }
+        }
+        bindAttributes(this.itemContainer, props)
+        appendDom(this.container, this.itemContainer)
+        this.itemContainer.style.setProperty('--huicharts-legend-inactiveColor', this.option.inactiveColor)
+    }
+
+
+    getItemParams() {
+        const params = {
+            ...this.data,
+            uuid: this.option.uuid,
+            dataIndex: this.getItemIndex(),
+            active: this.active
+        }
+        return params
+    }
+
+    render() {
+
+
+
+    }
+
+}
+
+export default Item

package/src/components/charts/framework/module/legend/constants.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+const CLASS_PREFIX='huicharts-legend-'
+
+export {CLASS_PREFIX}

package/src/components/charts/framework/module/legend/getSymbol.js

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { getClassName } from "./util";
+function rectSymbol() {
+    return `<svg class="${getClassName('symbol')}" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 48.0002 24" fill="none" version="1.1">
+    <rect width="48" height="24" fill="currentColor"/>
+  </svg>`
+}
+
+function cricleSymbol() {
+    return `<svg class="${getClassName('symbol')}" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 48.0002 48" fill="none" version="1.1">
+        <rect id="ic_ict_intermediate_notes-中间节点/base/ic_ict_intermediate_notes" width="48.000000" height="48.000000" fill="#FFFFFF" fill-opacity="0" />
+        <path id="path1" d="M0 23.98C0 20.23 -0.01 16.48 0 12.73C-0.01 10.91 0.22 9.1 0.66 7.35C1.65 3.63 4.07 1.42 7.79 0.56C9.65 0.16 11.56 -0.03 13.46 0C20.65 0 27.84 0 35.04 0C36.85 -0.01 38.66 0.19 40.43 0.62C44.26 1.55 46.56 3.98 47.43 7.8C47.83 9.6 48.01 11.44 47.99 13.29C47.99 20.56 47.99 27.83 47.99 35.09C48 36.89 47.8 38.69 47.38 40.44C46.44 44.27 44 46.55 40.19 47.43C38.32 47.83 36.42 48.02 34.51 47.99C27.35 47.99 20.19 47.99 13.03 47.99C11.2 48.01 9.38 47.8 7.6 47.38C3.75 46.45 1.44 44.01 0.57 40.17C0.12 38.22 0 36.27 0 34.3C0 30.86 0 27.42 0 23.98Z" fill="#FFFFFF" fill-opacity="0" fill-rule="evenodd" />
+        <circle id="path2" cx="24.000000" cy="24.000000" r="24.000000" fill="#FFFFFF" fill-opacity="0" />
+        <ellipse id="path3" cx="24.000244" cy="24.000000" rx="22.500122" ry="22.5" fill="currentColor" fill-opacity="1" />
+        <ellipse id="path3" cx="24.000244" cy="24.000000" rx="22.500122" ry="22.5" stroke="currentColor" stroke-opacity="1.000000" stroke-width="2.4" />
+    </svg>`
+}
+
+function arrowlineSymbol() {
+    return `<svg class="${getClassName('symbol')}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 48 48" fill="none" version="1.1">
+	<rect id="ic_ict_terrain_legend_work_right-地形图例工作路线_向右/base/ic_ict_terrain_legend_work_right" width="48.000000" height="48.000000" fill="#FFFFFF" fill-opacity="0"></rect>
+	<path id="path1" d="M0 23.98C0 20.23 -0.01 16.48 0 12.73C-0.01 10.91 0.22 9.1 0.66 7.35C1.65 3.63 4.07 1.42 7.79 0.56C9.65 0.16 11.56 -0.03 13.46 0C20.65 0 27.84 0 35.04 0C36.85 -0.01 38.66 0.19 40.43 0.62C44.26 1.55 46.56 3.98 47.43 7.8C47.83 9.6 48.01 11.44 47.99 13.29C47.99 20.56 47.99 27.83 47.99 35.09C48 36.89 47.8 38.69 47.38 40.44C46.44 44.27 44 46.55 40.19 47.43C38.32 47.83 36.42 48.02 34.51 47.99C27.35 47.99 20.19 47.99 13.03 47.99C11.2 48.01 9.38 47.8 7.6 47.38C3.75 46.45 1.44 44.01 0.57 40.17C0.12 38.22 0 36.27 0 34.3C0 30.86 0 27.42 0 23.98Z" fill="#FFFFFF" fill-opacity="0" fill-rule="evenodd"></path>
+	<circle id="path2" cx="24.000000" cy="24.000000" r="24.000000" fill="#FFFFFF" fill-opacity="0"></circle>
+	<path id="path3" d="M43.98 22.98L43.98 22.52L44 22.5C44.84 22.5 45.5 23.16 45.5 24C45.5 24.84 44.84 25.5 44 25.5L43.98 25.48L43.98 25.01L35.91 33.03L35.91 14.96L43.98 22.98ZM3.02 25.48L3 25.5C2.15 25.5 1.5 24.84 1.5 24C1.5 23.16 2.15 22.5 3 22.5L3.02 22.52L3.02 25.48Z" fill="#FFFFFF" fill-opacity="0" fill-rule="evenodd"></path>
+	<path id="path3" d="M45 24L35.91 33.03L45 24L35.91 14.96L45 24M3 24L44 24" stroke="currentColor" stroke-opacity="1" stroke-width="2.4" stroke-linejoin="round" stroke-linecap="round"></path>
+	<path id="path4" d="M36.62 14.25C36.22 13.86 35.59 13.86 35.2 14.26C34.81 14.65 34.82 15.29 35.21 15.68L42.57 22.99L3 22.99C2.48 22.99 2.06 23.38 2 23.88L2 23.99C2 24.55 2.44 25 3 25L42.57 25L35.21 32.31C34.85 32.67 34.82 33.24 35.12 33.64L35.2 33.73C35.59 34.13 36.22 34.13 36.62 33.74L45.7 24.71C46.09 24.32 46.09 23.67 45.7 23.28L36.62 14.25Z" fill="#FFFFFF" fill-opacity="0" fill-rule="evenodd"></path>
+	<path id="path4" d="M35.2 14.26C34.81 14.65 34.82 15.29 35.21 15.68L42.57 22.99L3 22.99C2.48 22.99 2.06 23.38 2 23.88L2 23.99C2 24.55 2.44 25 3 25L42.57 25L35.21 32.31C34.85 32.67 34.82 33.24 35.12 33.64L35.2 33.73C35.59 34.13 36.22 34.13 36.62 33.74L45.7 24.71C46.09 24.32 46.09 23.67 45.7 23.28L36.62 14.25C36.22 13.86 35.59 13.86 35.2 14.26ZM36.62 14.25C36.22 13.86 35.59 13.86 35.2 14.26M35.2 14.26C34.81 14.65 34.82 15.29 35.21 15.68M35.21 15.68L42.57 22.99M42.57 22.99L3 22.99M3 22.99C2.48 22.99 2.06 23.38 2 23.88M2 23.88L2 23.99M2 23.99C2 24.55 2.44 25 3 25M3 25L42.57 25M42.57 25L35.21 32.31M35.21 32.31C34.85 32.67 34.82 33.24 35.12 33.64M35.12 33.64L35.2 33.73M35.2 33.73C35.59 34.13 36.22 34.13 36.62 33.74M36.62 33.74L45.7 24.71M45.7 24.71C46.09 24.32 46.09 23.67 45.7 23.28M45.7 23.28L36.62 14.25" stroke="#FFFFFF" stroke-opacity="0" stroke-width="2.4"></path>
+</svg>`
+}
+
+function arrowDottedlineSymbol() {
+    return `<svg class="${getClassName('symbol')}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 48 48" fill="none" version="1.1">
+	<rect id="ic_ict_terrain_legend_protects_routes_right-地形图例保护路线_向右/base/ic_ict_terrain_legend_protects_routes_right" width="48.000000" height="48.000000" fill="#FFFFFF" fill-opacity="0"></rect>
+	<path id="path1" d="M0 23.98C0 20.23 -0.01 16.48 0 12.73C-0.01 10.91 0.22 9.1 0.66 7.35C1.65 3.63 4.07 1.42 7.79 0.56C9.65 0.16 11.56 -0.03 13.46 0C20.65 0 27.84 0 35.04 0C36.85 -0.01 38.66 0.19 40.43 0.62C44.26 1.55 46.56 3.98 47.43 7.8C47.83 9.6 48.01 11.44 47.99 13.29C47.99 20.56 47.99 27.83 47.99 35.09C48 36.89 47.8 38.69 47.38 40.44C46.44 44.27 44 46.55 40.19 47.43C38.32 47.83 36.42 48.02 34.51 47.99C27.35 47.99 20.19 47.99 13.03 47.99C11.2 48.01 9.38 47.8 7.6 47.38C3.75 46.45 1.44 44.01 0.57 40.17C0.12 38.22 0 36.27 0 34.3C0 30.86 0 27.42 0 23.98Z" fill="#FFFFFF" fill-opacity="0" fill-rule="evenodd"></path>
+	<circle id="path2" cx="24.000000" cy="24.000000" r="24.000000" fill="#FFFFFF" fill-opacity="0"></circle>
+	<path id="path3" d="M43.98 22.98L43.98 22.52L44 22.5C44.83 22.5 45.5 23.16 45.5 24C45.5 24.84 44.83 25.5 44 25.5L43.98 25.48L43.98 25.01L35.91 33.03L35.91 25.49C35.11 25.45 34.5 24.81 34.5 24C34.5 23.18 35.11 22.54 35.91 22.5L35.91 14.96L43.98 22.98ZM3.02 25.48L3 25.5C2.16 25.5 1.5 24.84 1.5 24C1.5 23.16 2.16 22.5 3 22.5L3.02 22.52L3.02 25.48ZM9 22.5L8.97 22.52L8.97 25.48L9 25.5C9.83 25.5 10.5 24.84 10.5 24C10.5 23.16 9.83 22.5 9 22.5ZM14.02 25.48L14 25.5C13.16 25.5 12.5 24.84 12.5 24C12.5 23.16 13.16 22.5 14 22.5L14.02 22.52L14.02 25.48ZM20 22.5L19.98 22.52L19.98 25.48L20 25.5C20.83 25.5 21.5 24.84 21.5 24C21.5 23.16 20.83 22.5 20 22.5ZM25.02 25.48L25 25.5C24.16 25.5 23.5 24.84 23.5 24C23.5 23.16 24.16 22.5 25 22.5L25.02 22.52L25.02 25.48ZM31 22.5L30.98 22.52L30.98 25.48L31 25.5C31.83 25.5 32.5 24.84 32.5 24C32.5 23.16 31.83 22.5 31 22.5Z" fill="#FFFFFF" fill-opacity="0" fill-rule="evenodd"></path>
+	<path id="path3" d="M45 24L35.91 33.03L45 24L35.91 14.96L45 24M36 24L44 24M25 24L31 24M14 24L20 24M3 24L9 24" stroke="currentColor" stroke-opacity="1" stroke-width="2.4" stroke-linejoin="round" stroke-linecap="round"></path>
+	<path id="path4" d="M35.2 14.26C35.59 13.86 36.22 13.86 36.62 14.25L45.7 23.28C46.09 23.67 46.09 24.32 45.7 24.71L36.62 33.74C36.22 34.13 35.59 34.13 35.2 33.73L35.12 33.64C34.82 33.24 34.85 32.67 35.21 32.31L42.57 25L36 25C35.44 25 35 24.55 35 23.99L35 23.88C35.06 23.38 35.48 22.99 36 22.99L42.57 22.99L35.21 15.68C34.82 15.29 34.81 14.65 35.2 14.26ZM2 24C2 23.44 2.44 22.99 3 22.99L8 22.99C8.55 22.99 9 23.44 9 24C9 24.55 8.55 25 8 25L3 25C2.44 25 2 24.55 2 24ZM14 22.99C13.44 22.99 13 23.44 13 24C13 24.55 13.44 25 14 25L19 25C19.55 25 20 24.55 20 24C20 23.44 19.55 22.99 19 22.99L14 22.99ZM24 24C24 23.44 24.44 22.99 25 22.99L30 22.99C30.55 22.99 31 23.44 31 24C31 24.55 30.55 25 30 25L25 25C24.44 25 24 24.55 24 24Z" fill="#FFFFFF" fill-opacity="0" fill-rule="evenodd"></path>
+	<path id="path4" d="M35.2 14.26C34.81 14.65 34.82 15.29 35.21 15.68L42.57 22.99L36 22.99C35.48 22.99 35.06 23.38 35 23.88L35 23.99C35 24.55 35.44 25 36 25L42.57 25L35.21 32.31C34.85 32.67 34.82 33.24 35.12 33.64L35.2 33.73C35.59 34.13 36.22 34.13 36.62 33.74L45.7 24.71C46.09 24.32 46.09 23.67 45.7 23.28L36.62 14.25C36.22 13.86 35.59 13.86 35.2 14.26ZM24 24C24 24.55 24.44 25 25 25L30 25C30.55 25 31 24.55 31 24C31 23.44 30.55 22.99 30 22.99L25 22.99C24.44 22.99 24 23.44 24 24ZM13 24C13 24.55 13.44 25 14 25L19 25C19.55 25 20 24.55 20 24C20 23.44 19.55 22.99 19 22.99L14 22.99C13.44 22.99 13 23.44 13 24ZM2 24C2 24.55 2.44 25 3 25L8 25C8.55 25 9 24.55 9 24C9 23.44 8.55 22.99 8 22.99L3 22.99C2.44 22.99 2 23.44 2 24ZM36.62 14.25C36.22 13.86 35.59 13.86 35.2 14.26M35.2 14.26C34.81 14.65 34.82 15.29 35.21 15.68M35.21 15.68L42.57 22.99M42.57 22.99L36 22.99M36 22.99C35.48 22.99 35.06 23.38 35 23.88M35 23.88L35 23.99M35 23.99C35 24.55 35.44 25 36 25M36 25L42.57 25M42.57 25L35.21 32.31M35.21 32.31C34.85 32.67 34.82 33.24 35.12 33.64M35.12 33.64L35.2 33.73M35.2 33.73C35.59 34.13 36.22 34.13 36.62 33.74M36.62 33.74L45.7 24.71M45.7 24.71C46.09 24.32 46.09 23.67 45.7 23.28M45.7 23.28L36.62 14.25M25 22.99C24.44 22.99 24 23.44 24 24M24 24C24 24.55 24.44 25 25 25M25 25L30 25M30 25C30.55 25 31 24.55 31 24M31 24C31 23.44 30.55 22.99 30 22.99M30 22.99L25 22.99M14 22.99C13.44 22.99 13 23.44 13 24M13 24C13 24.55 13.44 25 14 25M14 25L19 25M19 25C19.55 25 20 24.55 20 24M20 24C20 23.44 19.55 22.99 19 22.99M19 22.99L14 22.99M3 22.99C2.44 22.99 2 23.44 2 24M2 24C2 24.55 2.44 25 3 25M3 25L8 25M8 25C8.55 25 9 24.55 9 24M9 24C9 23.44 8.55 22.99 8 22.99M8 22.99L3 22.99" stroke="#FFFFFF" stroke-opacity="0" stroke-width="2.4"></path>
+</svg>`
+}
+
+function dottedlineSymbol() {
+    return `<svg class="${getClassName('symbol')}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 48 48" version="1.1">
+    <g id="ic_ict_a_dashed_line_border" stroke="none" stroke-width="2.4" fill="none" fill-rule="evenodd">
+        <path d="M1.5054679,23.9816621 C1.5054679,20.4665814 1.49316512,16.9515006 1.5054679,13.4364198 C1.49839598,11.7354754 1.70745964,10.0405243 2.1276372,8.39227893 C3.04858836,4.90356126 5.32108808,2.83317869 8.80629066,2.02998273 C10.5538164,1.65241434 12.3387234,1.47551572 14.1263654,1.50272062 C20.8671186,1.50272062 27.6084577,1.50272062 34.3503826,1.50272062 C36.0530469,1.49215117 37.7507765,1.68688554 39.4068263,2.08270894 C42.9974813,2.96147914 45.1522258,5.2357364 45.9729972,8.81408862 C46.3419987,10.5052784 46.5182902,12.232817 46.4985018,13.9636819 C46.4985018,20.7770802 46.4985018,27.5910643 46.4985018,34.4056342 C46.5077071,36.0918853 46.3135624,37.7730956 45.920271,39.4128667 C45.0415008,43.0052793 42.7566983,45.1494786 39.1783461,45.9702499 C37.4305962,46.3463893 35.6458526,46.5232717 33.8582713,46.497512 C27.1456387,46.497512 20.433592,46.497512 13.7221311,46.497512 C12.0064517,46.5115153 10.2952822,46.3197463 8.62526401,45.9263114 C5.01879113,45.0475412 2.85350138,42.7627387 2.03448756,39.1668111 C1.61619295,37.3389691 1.5054679,35.5058545 1.5054679,33.656922 C1.5054679,30.4324212 1.5054679,27.2073346 1.5054679,23.9816621 Z" id="path1" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2.4" fill-opacity="0" fill="#FFFFFF" fill-rule="nonzero"></path>
+        <path d="M1.5054679,23.9816621 C1.5054679,20.4665814 1.49316512,16.9515006 1.5054679,13.4364198 C1.49839598,11.7354754 1.70745964,10.0405243 2.1276372,8.39227893 C3.04858836,4.90356126 5.32108808,2.83317869 8.80629066,2.02998273 C10.5538164,1.65241434 12.3387234,1.47551572 14.1263654,1.50272062 C20.8671186,1.50272062 27.6084577,1.50272062 34.3503826,1.50272062 C36.0530469,1.49215117 37.7507765,1.68688554 39.4068263,2.08270894 C42.9974813,2.96147914 45.1522258,5.2357364 45.9729972,8.81408862 C46.3419987,10.5052784 46.5182902,12.232817 46.4985018,13.9636819 C46.4985018,20.7770802 46.4985018,27.5910643 46.4985018,34.4056342 C46.5077071,36.0918853 46.3135624,37.7730956 45.920271,39.4128667 C45.0415008,43.0052793 42.7566983,45.1494786 39.1783461,45.9702499 C37.4305962,46.3463893 35.6458526,46.5232717 33.8582713,46.497512 C27.1456387,46.497512 20.433592,46.497512 13.7221311,46.497512 C12.0064517,46.5115153 10.2952822,46.3197463 8.62526401,45.9263114 C5.01879113,45.0475412 2.85350138,42.7627387 2.03448756,39.1668111 C1.61619295,37.3389691 1.5054679,35.5058545 1.5054679,33.656922 C1.5054679,30.4324212 1.5054679,27.2073346 1.5054679,23.9816621 Z" id="path2" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2.4" opacity="0.200000003" fill-rule="nonzero"></path>
+        <circle id="path3" fill-opacity="0" fill="#FFFFFF" cx="24" cy="24" r="24"></circle>
+        <path d="M13,23 L3,23.01 L13,23 Z M29,23 L19,23.01 L29,23 Z M45,23 L35,23.01 L45,23 Z" id="path4" stroke="currentColor" stroke-width="2.4" fill="currentColor" fill-rule="nonzero" stroke-linejoin="round"></path>
+        <path d="M13,22 C13.5522847,22 14,22.4477153 14,23 C14,23.5128358 13.6139598,23.9355072 13.1166211,23.9932723 L13,24 L3,24 C2.44771525,24 2,23.5522847 2,23 C2,22.4871642 2.38604019,22.0644928 2.88337887,22.0067277 L3,22 L13,22 Z M29,22 C29.5522847,22 30,22.4477153 30,23 C30,23.5128358 29.6139598,23.9355072 29.1166211,23.9932723 L29,24 L19,24 C18.4477153,24 18,23.5522847 18,23 C18,22.4871642 18.3860402,22.0644928 18.8833789,22.0067277 L19,22 L29,22 Z M45,22 C45.5522847,22 46,22.4477153 46,23 C46,23.5128358 45.6139598,23.9355072 45.1166211,23.9932723 L45,24 L35,24 C34.4477153,24 34,23.5522847 34,23 C34,22.4871642 34.3860402,22.0644928 34.8833789,22.0067277 L35,22 L45,22 Z" id="path5" stroke-opacity="0" stroke="currentColor" stroke-width="2.4" fill-opacity="0" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+</svg>`
+}
+
+
+
+
+
+
+
+
+const symbolMap = {
+    rect: rectSymbol,
+    circle: cricleSymbol,
+    arrowline: arrowlineSymbol,
+    arrowDottedline: arrowDottedlineSymbol,
+    dottedline: dottedlineSymbol
+}
+
+function getSymbol(type) {
+    return symbolMap[type]() ?? cricleSymbol()
+}
+
+
+
+export default getSymbol

package/src/components/charts/framework/module/legend/index.js

@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { getClassName, bindAttributes, getCssProperty, convertNumberCssVal } from './util'
+import LegendItem from './Item.js'
+import { isArray } from '../../../util/type'
+import { hashString } from '../../../util/math'
+import {appendDom} from  '../../../util/dom'
+class LegendManger {
+    static layout = {
+        horizontal: 'row',
+        vertical: 'column'
+    }
+    static defaultOptions = {
+        left: 16,
+        bottom: 16,
+        orientation: 'vertical',
+        padding: 20,
+        gap: 16,
+        backgroundColor: '#FFFFFF',
+        border: '1px solid #EEEEEE',
+        boxShadow: '0 0 4px rgba(0, 0, 0, 0.2)',
+        borderRadius: '4px'
+    }
+    //  图表容器
+    container = null
+    //  图例容器
+    legendContainer = null
+    // 是否已经绘制过
+    draw = false
+    //配置项
+    option = {}
+    // 选中的items
+    selectItems = []
+    // items = []
+    //当前渲染使用的option
+    // pendingProps = null
+    //之前渲染使用的option
+    // memoizedProps = null;
+
+    constructor(option, dom) {
+        this.option = Object.assign({}, LegendManger.defaultOptions, option)
+        this.pendingProps = this.option
+        this.container = dom
+        this.init()
+    }
+
+    getCssStyle() {
+        const { gap } = this.option
+        if (isArray(gap)) {
+            const [rowGap, columnGap] = gap
+            this.option.gap = `${convertNumberCssVal(rowGap)} ${convertNumberCssVal(columnGap)}`
+        }
+        const css = getCssProperty(this.option)
+        return css
+    }
+
+    initWrapper() {
+        const { orientation } = this.option
+        this.legendContainer = document.createElement('div')
+        const layout = LegendManger.layout[orientation]
+        const style = {
+            ...this.getCssStyle(),
+            flexDirection: layout
+        }
+        const className = getClassName('container')
+        const props = {
+            attributes: {
+                class: className,
+                style
+            }
+        }
+        bindAttributes(this.legendContainer, props)
+        appendDom( this.container,this.legendContainer)
+    }
+
+    initItems() {
+        const { data, onClick, render, itemStyle, ...other } = this.option
+        if (data && !!data.length) {
+            //只将相关option传入
+            const option = {
+                onClick,
+                render,
+                ...itemStyle,
+            }
+            data.forEach((item, index) => {
+                const uuid = `huicharts-legendItem-${hashString()}=${index}`
+                option.uuid = uuid
+                const legendItem = new LegendItem(option, item, this.legendContainer)
+                legendItem.init()
+                // this.items.push(legendItem)
+            })
+        }
+    }
+
+    init() {
+        this.initWrapper()
+        this.initItems()
+    }
+
+    render() {
+        if (!this.draw) {
+            return
+        }
+        // if (!!this.items.length) {
+           
+        // }
+    }
+}
+
+export default LegendManger

package/src/components/charts/framework/module/legend/util.js

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { CLASS_PREFIX } from './constants'
+import { isNumber } from '../../../util/type'
+import { setStyle } from '../../../util/dom'
+function convertNumberCssVal(cssVal, unit = 'px') {
+    if (isNumber(cssVal) && cssVal !== 0) {
+        return `${cssVal}${unit}`
+    }
+    return cssVal
+}
+
+// 本方法是兼容使用者传css配置传数字的场景
+// function transformCssProperty(cssObj) {
+//     const cssMap = Object.entries(cssObj)
+//     const newMap = cssMap.map(item => {
+//         const [, value] = item
+//         item[1] = convertNumberCssVal(value)
+//         return item
+//     })
+//     return Object.fromEntries(newMap)
+// }
+
+
+function getClassName(name) {
+    return `${CLASS_PREFIX}${name}`
+}
+
+
+function bindEvents(dom, events) {
+    if (!events) return
+    for (let e in events) {
+        if (Object.hasOwnProperty.call(events, e)) {
+            dom.addEventListener(e, events[e])
+        }
+    }
+}
+
+function bindAttributes(dom, props) {
+    const { events, attributes } = props
+    const { style, ...other } = attributes
+    setStyle(dom, other)
+    if (style) {
+        Object.assign(dom.style, style)
+    }
+    bindEvents(dom, events)
+}
+
+//判断属性是不是css属性
+function isCssProperty(property) {
+    const testElement = document.createElement('div');
+    return property in testElement.style; // 如果属性存在于style对象中，则认为它是CSS属性
+}
+
+
+function getCssProperty(obj) {
+    const cssObj = {}
+    for (let key in obj) {
+        if (Object.hasOwnProperty.call(obj, key) && isCssProperty(key)) {
+            cssObj[key] = convertNumberCssVal(obj[key])
+        }
+    }
+    return cssObj
+}
+
+export {
+    getClassName,
+    convertNumberCssVal,
+    bindAttributes,
+    isCssProperty,
+    getCssProperty
+}