@ebiz/designer-components 0.0.18

package/src/components/charts/feature/expandLegend/mutiSelectList/statisticList.js

@@ -0,0 +1,146 @@
+/**
+ * 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 Tips from "../tips"
+import { CSS_CLASS,SVG_ICON } from "./constants";
+import { uuid } from "../../../util/math";
+import { getTextWidth } from "../../../util/dom";
+import { svgTransform } from "../../../util/convert";
+
+// tips文字大小
+const TEXT_SIZE = 14;
+function statisticsList() {
+    let maxWidth = this.root.getBoundingClientRect().width
+    const table = document.createElement('table')
+    table.classList.add(CSS_CLASS.TABLE)
+    const colgroup = document.createElement('colgroup')
+    this.statistics.head.forEach((item, index) => {
+        const col = document.createElement('col')
+        if (index === 0) {
+            col.style.width = maxWidth*toPoint(this.statistics?.firstColumnWidth)+'px'
+        }
+        colgroup.append(col)
+    })
+
+    const thead = document.createElement('thead')
+    thead.classList.add(CSS_CLASS.HEAD)
+    let headTr = `<tr>`
+    for (let item of this.statistics.head) {
+        headTr += tdString(item)
+    }
+    headTr += `</tr>`
+    thead.innerHTML = headTr
+    let textMaxWidth = maxWidth*toPoint(this.statistics?.firstColumnWidth)-12-10-16
+    const tbody = document.createElement('tbody')
+    this.data.forEach((data, index) => {
+        const tr = document.createElement('tr')
+        const itemTd = document.createElement('td')
+        itemTd.classList.add(CSS_CLASS.TABLE_ITEM)
+        itemTd.append(item.call(this, data, index, this.onclick,textMaxWidth))
+        tr.append(itemTd)
+        let statisticsData = this.statistics.data[index]
+
+        for (let tdData of statisticsData) {
+            const td = document.createElement('td')
+            td.classList.add(CSS_CLASS.OTHER_TABLE_ITEM)
+            td.innerHTML = `${tdData}`
+            tr.append(td)
+        }
+        tbody.append(tr)
+
+    });
+    table.append(colgroup, thead, tbody)
+    return table
+}
+
+
+function tdString(data) {
+    return `<td style="padding:6px ;">${data}</td>`
+}
+
+function item(data, index, onclick,textMaxWidth) {
+    let itemDom = document.createElement("div");
+    itemDom.id = `${CSS_CLASS.ITEM}_${uuid()}`;
+    itemDom.classList.add(CSS_CLASS.ITEM);
+    itemDom.title = data.name
+    let icon = document.createElement("div");
+
+    // icon是展示为线还是小圆点
+    if (this?.itemStyle?.icon === "line") {
+        icon.classList.add(CSS_CLASS.ICON_LINE);
+    } else {
+        icon.classList.add(CSS_CLASS.ICON_CIRCLE);
+    }
+    icon.style.background = data.color;
+    let text = document.createElement("span");
+    text.innerText = data.name;
+    text.classList.add(CSS_CLASS.ITEM_TEXT);
+
+    // 是否要展示tips
+    if (this?.itemStyle?.showTips) {
+        if (getTextWidth(data.name, 12) > textMaxWidth) {
+            let tips = new Tips(itemDom);
+            tips.setOption({
+                data: data.name,
+                onclick: () => { },
+            });
+        }
+    }
+    const copy = document.createElement('img')
+    copy.classList.add('copy')
+    if(this?.itemStyle?.copy){
+        const svg1 = svgTransform(SVG_ICON.COPY1)
+        const svg2 = svgTransform(SVG_ICON.COPY2)
+        copy.src = svg1
+
+        copy.addEventListener('mouseover', (e) => {
+            e.stopPropagation()
+            copy.src = svg2
+        })
+        copy.addEventListener('mouseleave', (e) => {
+            e.stopPropagation()
+            copy.src = svg1
+        })
+        copy.addEventListener('click', async (e) => {
+            e.stopPropagation()
+            let clipboard = navigator.clipboard || {
+                writeText: (text) => {
+                    let copyInput = document.createElement('input');
+                    copyInput.value = text;
+                    document.body.appendChild(copyInput);
+                    copyInput.select();
+                    document.execCommand('copy');
+                    document.body.removeChild(copyInput);
+                }
+            }
+            if (clipboard) {
+                await clipboard.writeText(data.name);
+            }
+        })
+    }
+    itemDom.append(icon, text, copy);
+
+    // 每个图例的点击事件
+    itemDom.addEventListener("click", (e) => {
+        e.stopPropagation();
+        icon.classList.toggle(CSS_CLASS.ICON_UNACTIVE);
+        text.classList.toggle(CSS_CLASS.ITEM_UNACTIVE);
+        onclick && onclick(this.data[index]);
+    });
+    return itemDom
+}
+
+function toPoint(percent){
+    let str=percent.replace("%","");
+        str= str/100;
+    return str;
+}
+export default statisticsList

package/src/components/charts/feature/expandLegend/singleSelect/constants.js

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ *
+ */
+export const CSS_CLASS = {
+    SINGLESELECT: "hui_expand_legend_singleselect",
+    SINGLESELECT_ACTIVE: "hui_expand_legend_singleselect_active",
+    SINGLESELECT_HIDDEN: "hui_expand_legend_singleselect_hidden",
+    ITEM: "hui_expand_legend_singleselect_item",
+    ITEM_ICON_LINE: "hui_expand_legend_singleselect_item_icon_line",
+    ITEM_ICON_CIRCLE: "hui_expand_legend_singleselect_item_icon_circle",
+    ITEM_NAME: "hui_expand_legend_singleselect_item_name",
+    CONTAINER: "hui_expand_legend_singleselect_container",
+    CONTAINER_EMPTY: "hui_expand_legend_singleselect_container_empty",
+    CONTAINER_EMPTY_TEXT: "hui_expand_legend_singleselect_container_empty_text",
+    CHECKBOX: "hui_expand_legend_singleselect_item_checkbox",
+    CHECKBOX_ICON: "hui_expand_legend_singleselect_item_checkbox_icon",
+    SEARCH: "hui_expand_legend_singleselect_search",
+    SEARCH_ICON: "hui_expand_legend_singleselect_search_icon",
+    SEARCH_INPUT: "hui_expand_legend_singleselect_search_input",
+};
+
+export const SVG_ICON = {
+    SEARCH: `<svg width="12.623047" height="12.557617" viewBox="0 0 12.623 12.5576" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with Pixso.</desc><defs/><path id="矢量 8" d="M0 5.5C0 2.46 2.46 0 5.5 0C8.53 0 11 2.46 11 5.5C11 6.83 10.52 8.05 9.74 9L12.47 11.7C12.67 11.89 12.67 12.21 12.47 12.4C12.3 12.58 12.03 12.6 11.84 12.47L9.03 9.71C8.08 10.51 6.84 11 5.5 11C2.46 11 0 8.53 0 5.5ZM10 5.5C10 3.01 7.98 1 5.5 1C3.01 1 1 3.01 1 5.5C1 7.98 3.01 10 5.5 10C7.98 10 10 7.98 10 5.5Z" fill="#808080" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
+    EMPTY: `<svg 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"><title>ic_ict_empty_data_border</title><g id="ic_ict_empty_data_border" stroke="none" stroke-width="2.4" fill="none" fill-rule="evenodd"><path d="M1.5054679,23.9816777 C1.5054679,20.4665945 1.49316512,16.9515113 1.5054679,13.4364281 C1.49839598,11.7354825 1.70745964,10.0405302 2.1276372,8.39228371 C3.04858836,4.90356362 5.32108808,2.83317961 8.80629066,2.0299831 C10.5538164,1.65241445 12.3387234,1.4755157 14.1263654,1.50272062 C20.8671186,1.50272062 27.6084577,1.50272062 34.3503826,1.50272062 C36.0530469,1.49215117 37.7507765,1.68688567 39.4068263,2.08270935 C42.9974813,2.96148015 45.1522258,5.23573899 45.9729972,8.81409369 C46.3419987,10.5052846 46.5182902,12.2328244 46.4985018,13.9636906 C46.4985018,20.7770935 46.4985018,27.5910823 46.4985018,34.405657 C46.5077071,36.0919093 46.3135624,37.7731207 45.920271,39.412893 C45.0415008,43.0053081 42.7566983,45.1495088 39.1783461,45.9702807 C37.4305962,46.3464204 35.6458526,46.5233029 33.8582713,46.4975432 C27.1456387,46.4975432 20.433592,46.4975432 13.7221311,46.4975432 C12.0064517,46.5115465 10.2952822,46.3197774 8.62526401,45.9263422 C5.01879113,45.0475714 2.85350138,42.7627673 2.03448756,39.1668372 C1.61619295,37.3389939 1.5054679,35.505878 1.5054679,33.6569443 C1.5054679,30.4324413 1.5054679,27.2073524 1.5054679,23.9816777 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.9816777 C1.5054679,20.4665945 1.49316512,16.9515113 1.5054679,13.4364281 C1.49839598,11.7354825 1.70745964,10.0405302 2.1276372,8.39228371 C3.04858836,4.90356362 5.32108808,2.83317961 8.80629066,2.0299831 C10.5538164,1.65241445 12.3387234,1.4755157 14.1263654,1.50272062 C20.8671186,1.50272062 27.6084577,1.50272062 34.3503826,1.50272062 C36.0530469,1.49215117 37.7507765,1.68688567 39.4068263,2.08270935 C42.9974813,2.96148015 45.1522258,5.23573899 45.9729972,8.81409369 C46.3419987,10.5052846 46.5182902,12.2328244 46.4985018,13.9636906 C46.4985018,20.7770935 46.4985018,27.5910823 46.4985018,34.405657 C46.5077071,36.0919093 46.3135624,37.7731207 45.920271,39.412893 C45.0415008,43.0053081 42.7566983,45.1495088 39.1783461,45.9702807 C37.4305962,46.3464204 35.6458526,46.5233029 33.8582713,46.4975432 C27.1456387,46.4975432 20.433592,46.4975432 13.7221311,46.4975432 C12.0064517,46.5115465 10.2952822,46.3197774 8.62526401,45.9263422 C5.01879113,45.0475714 2.85350138,42.7627673 2.03448756,39.1668372 C1.61619295,37.3389939 1.5054679,35.505878 1.5054679,33.6569443 C1.5054679,30.4324413 1.5054679,27.2073524 1.5054679,23.9816777 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="M3,30 L7.01381397,19.5640837 C7.60795557,18.0193155 9.09210941,17 10.7471964,17 L37.2528036,17 C38.9078906,17 40.3920444,18.0193155 40.986186,19.5640837 L43.4631774,26.0042613 L43.4631774,26.0042613" id="path4" stroke="#191919" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M37.7528036,16.5 C39.6147765,16.5 41.2844495,17.64673 41.9528588,19.3845941 L44.4298502,25.8247718 C44.5289796,26.0825081 44.4004032,26.3718048 44.142667,26.4709341 C43.8849307,26.5700635 43.595634,26.4414871 43.4965046,26.1837509 L41.0195132,19.7435732 C40.4996393,18.3919011 39.2010047,17.5 37.7528036,17.5 L11.2471964,17.5 C9.79899528,17.5 8.50036067,18.3919011 7.98048677,19.7435732 L3.9666728,30.1794895 C3.86754347,30.4372258 3.57824673,30.5658021 3.32051046,30.4666728 C3.06277419,30.3675435 2.93419786,30.0782467 3.0333272,29.8205105 L7.04714117,19.3845941 C7.71555047,17.64673 9.38522354,16.5 11.2471964,16.5 L37.7528036,16.5 Z" id="path5" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2.4" fill-opacity="0" fill="#FFFFFF" fill-rule="nonzero" stroke-linejoin="round"></path><path d="M45,30 L45,39 C45,42.3137085 42.3137085,45 39,45 L9,45 C5.6862915,45 3,42.3137085 3,39 L3,30 L18.3414086,29.9999922 C19.1650792,32.330381 21.3875594,34 24,34 C26.6124406,34 28.8349208,32.330381 29.6585914,29.9999922 L45,30 Z" id="path6" stroke="#191919" stroke-width="2.4" fill-opacity="0" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round"></path><path d="M24,4 L24,11 M8.52512627,7.02512627 L13.4748737,11.9748737 M34.5251263,11.9748737 L39.4748737,7.02512627" id="path7" stroke="#191919" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.17157288,6.67157288 C8.36683502,6.47631073 8.68341751,6.47631073 8.87867966,6.67157288 L13.8284271,11.6213203 C14.0236893,11.8165825 14.0236893,12.133165 13.8284271,12.3284271 C13.633165,12.5236893 13.3165825,12.5236893 13.1213203,12.3284271 L8.17157288,7.37867966 C7.97631073,7.18341751 7.97631073,6.86683502 8.17157288,6.67157288 Z M39.1213203,6.67157288 C39.3165825,6.47631073 39.633165,6.47631073 39.8284271,6.67157288 C40.0236893,6.86683502 40.0236893,7.18341751 39.8284271,7.37867966 L34.8786797,12.3284271 C34.6834175,12.5236893 34.366835,12.5236893 34.1715729,12.3284271 C33.9763107,12.133165 33.9763107,11.8165825 34.1715729,11.6213203 L39.1213203,6.67157288 Z M24,3.5 C24.2761424,3.5 24.5,3.72385763 24.5,4 L24.5,11 C24.5,11.2761424 24.2761424,11.5 24,11.5 C23.7238576,11.5 23.5,11.2761424 23.5,11 L23.5,4 C23.5,3.72385763 23.7238576,3.5 24,3.5 Z" id="path8" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2.4" fill-opacity="0" fill="#FFFFFF" fill-rule="nonzero" stroke-linejoin="round"></path></g></svg>`,
+    TICK: `<svg width="18.000000" height="16.000000" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="filter_1364_66812_dd" x="0.000000" y="0.000000" width="18.000000" height="16.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="0" dy="0"/><feGaussianBlur stdDeviation="1.33333"/><feComposite in2="hardAlpha" operator="out" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect_dropShadow_1"/><feBlend mode="normal" in="SourceGraphic" in2="effect_dropShadow_1" result="shape"/></filter></defs><g filter="url(#filter_1364_66812_dd)"><path id="Path" d="M12.57 4.29C12.85 3.94 13.36 3.9 13.7 4.18C14.05 4.47 14.09 4.98 13.81 5.32L8.58 11.7C8.28 12.07 7.74 12.1 7.4 11.76L4.24 8.66C3.92 8.34 3.91 7.83 4.22 7.51C4.53 7.19 5.04 7.18 5.36 7.5L7.9 9.99L12.57 4.29Z" fill="#FFFFFF" fill-opacity="1.000000" fill-rule="evenodd"/></g></svg>`,
+    COPY1:`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="#808080" d="m14.25,6c2.07,0,3.75,1.68,3.75,3.75v9c0,2.07-1.68,3.75-3.75,3.75H5.25c-2.07,0-3.75-1.68-3.75-3.75v-9c0-2.07,1.68-3.75,3.75-3.75h9Zm0,1.5H5.25c-1.24,0-2.25,1.01-2.25,2.25v9c0,1.24,1.01,2.25,2.25,2.25h9c1.24,0,2.25-1.01,2.25-2.25v-9c0-1.24-1.01-2.25-2.25-2.25Zm4.5-5.99c2.07,0,3.75,1.68,3.75,3.75v7.5c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-7.5c0-1.24-1.01-2.25-2.25-2.25h-7.5c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h7.5Z"></path>
+  </svg>`,
+    COPY2:`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="#000000" d="m14.25,6c2.07,0,3.75,1.68,3.75,3.75v9c0,2.07-1.68,3.75-3.75,3.75H5.25c-2.07,0-3.75-1.68-3.75-3.75v-9c0-2.07,1.68-3.75,3.75-3.75h9Zm0,1.5H5.25c-1.24,0-2.25,1.01-2.25,2.25v9c0,1.24,1.01,2.25,2.25,2.25h9c1.24,0,2.25-1.01,2.25-2.25v-9c0-1.24-1.01-2.25-2.25-2.25Zm4.5-5.99c2.07,0,3.75,1.68,3.75,3.75v7.5c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-7.5c0-1.24-1.01-2.25-2.25-2.25h-7.5c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h7.5Z"></path>
+  </svg>`,
+};

package/src/components/charts/feature/expandLegend/singleSelect/index.js

@@ -0,0 +1,170 @@
+/**
+ * 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 { CSS_CLASS } from "./constants";
+import search from "./search";
+import { item as createItem } from "./item";
+import position from "./position";
+const DEFAULT_OPTION = {
+    data: [11, 22, 33, 44, 55],
+    onclick: () => {},
+};
+const REMOVE_DELAY = 300;
+
+class SingleSelect {
+    static huicharts_SingleSelect = false;
+
+    constructor(element) {
+        this.root = element;
+
+        // 主题颜色
+        this.color = [];
+
+        // 点击图例的回调
+        this.onclick = () => {};
+
+        // 图例的一些样式
+        this.itemStyle;
+        if (!SingleSelect.huicharts_SingleSelect) {
+            SingleSelect.huicharts_SingleSelect = true;
+            document.addEventListener("click", hide);
+            document.addEventListener("wheel", hide);
+            window.addEventListener("resize", hide);
+        }
+    }
+
+    setOption(option) {
+        option = option || DEFAULT_OPTION;
+        let { data, onclick } = option;
+        this.onclick = onclick;
+        this.color = option?.color;
+        this.itemStyle = option?.itemStyle;
+        this.data = data
+
+        // 给根元素绑定点击事件
+        this.bindClick();
+    }
+
+    // 给根元素绑定点击事件
+    bindClick() {
+        this.root.addEventListener("click", (e) => {
+            e.stopPropagation();
+
+            // 是否有打开的单选框
+            let preSingleSelect = document.querySelector(`.${CSS_CLASS.SINGLESELECT}.${CSS_CLASS.SINGLESELECT_ACTIVE}`);
+            let preSingleSelectId = null;
+
+            // 有打开的就说明此次是关闭或者打开别的单选框
+            if (preSingleSelect !== null) {
+                preSingleSelectId = preSingleSelect.dataset.id;
+
+                // 先关闭单选框
+                preSingleSelect.classList.remove(CSS_CLASS.SINGLESELECT_ACTIVE);
+                preSingleSelect.classList.add(CSS_CLASS.SINGLESELECT_HIDDEN);
+                setTimeout(() => {
+                    document.body.removeChild(preSingleSelect);
+                }, REMOVE_DELAY);
+            }
+
+            // 如果是打开别的单选框就创建新的
+            if (preSingleSelectId !== this.root.id) {
+                const singleselectDom = this.singleselect();
+                document.body.appendChild(singleselectDom);
+                position.call(this, singleselectDom);
+            }
+        });
+    }
+
+    // 创建下拉框dom
+    singleselect() {
+        const singleselectDom = document.createElement("div");
+        singleselectDom.classList.add(CSS_CLASS.SINGLESELECT, CSS_CLASS.SINGLESELECT_ACTIVE);
+        const containerDom = this.container();
+        const searchDom = search.call(this, containerDom);
+        singleselectDom.append(searchDom, containerDom);
+
+        // 给每个选项绑定点击事件
+        singleselectDom.addEventListener("click", (e) => {
+            let target = e.target;
+            while (target.className.includes(CSS_CLASS.SINGLESELECT) && target.className !== CSS_CLASS.ITEM) {
+                target = target.parentNode;
+            }
+            if (target.className === CSS_CLASS.ITEM) {
+                let targetData = this.data[target.dataset.id];
+                target.firstChild.classList.toggle("active");
+                target.lastChild.classList.toggle("active");
+                targetData.selected = !targetData.selected;
+                this.onclick && this.onclick(targetData);
+            }
+            e.stopPropagation();
+        });
+        singleselectDom.addEventListener("wheel", (e) => {
+            e.stopPropagation();
+            if (containerDom.offsetHeight === containerDom.scrollHeight) {
+                e.preventDefault();
+            } else if (e.target === singleselectDom) {
+                e.preventDefault();
+            }
+        });
+        return singleselectDom;
+    }
+
+    // 刷新数据
+    refreshData(data) {
+        this.initData(data);
+    }
+
+    // 组装数据
+    initData(data) {
+        this.data = [];
+        if (Array.isArray(data)) {
+            for (let item of data) {
+                this.data.push({
+                    name: item["name"] === undefined ? item : item["name"],
+                    value: item["value"] === undefined ? item : item["value"],
+                    selected: item["selected"] === undefined ? true : item["selected"],
+                });
+            }
+        }
+    }
+
+    // 创建条目容器
+    container() {
+        const containerDom = document.createElement("div");
+        containerDom.classList.add(CSS_CLASS.CONTAINER);
+        let colorLength = this.color.length;
+        this.data.forEach((item, index) => {
+            if(item.display==="none")
+                return
+            let color = this.color[index % colorLength];
+            containerDom.appendChild(createItem(item, index, color, this.itemStyle));
+        });
+        return containerDom;
+    }
+
+    getData() {
+        return this.data;
+    }
+}
+
+// 隐藏所有的SingleSelect
+function hide(e) {
+    let item = document.querySelector(`.${CSS_CLASS.SINGLESELECT}.${CSS_CLASS.SINGLESELECT_ACTIVE}`);
+    if (item) {
+        item.classList.remove(CSS_CLASS.SINGLESELECT_ACTIVE);
+        item.classList.add(CSS_CLASS.SINGLESELECT_HIDDEN);
+        setTimeout(() => {
+            document.body.removeChild(item);
+        }, REMOVE_DELAY);
+    }
+}
+
+export default SingleSelect;

package/src/components/charts/feature/expandLegend/singleSelect/item.js

@@ -0,0 +1,74 @@
+/**
+ * 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 { CSS_CLASS, SVG_ICON } from "./constants";
+import { svgTransform } from "../../../util/convert";
+
+const CIRCLE = "circle";
+const LINE = "line";
+// 创建每条下拉选项
+function item(data, index, color, itemStyle) {
+    const itemDom = document.createElement("div");
+    itemDom.classList.add(CSS_CLASS.ITEM);
+    itemDom.dataset.id = index;
+    itemDom.style.setProperty("--active-color", color);
+    const itemIcon = document.createElement("div");
+    if (itemStyle?.icon === LINE) {
+        itemIcon.classList.add(CSS_CLASS.ITEM_ICON_LINE);
+    } else {
+        itemIcon.classList.add(CSS_CLASS.ITEM_ICON_CIRCLE);
+    }
+    const itemName = document.createElement("span");
+    itemName.innerText = data.name;
+    itemName.title = data.name;
+    itemName.classList.add(CSS_CLASS.ITEM_NAME);
+    if (data.selected) {
+        itemIcon.classList.add("active");
+        itemName.classList.add("active");
+    }
+    const copy = document.createElement('img')
+    copy.classList.add('copy')
+    if(itemStyle?.copy){
+        const svg1 = svgTransform(SVG_ICON.COPY1)
+        const svg2 = svgTransform(SVG_ICON.COPY2)
+        copy.src = svg1
+
+        copy.addEventListener('mouseover', (e) => {
+            e.stopPropagation()
+            copy.src = svg2
+        })
+        copy.addEventListener('mouseleave', (e) => {
+            e.stopPropagation()
+            copy.src = svg1
+        })
+        copy.addEventListener('click', async (e) => {
+            e.stopPropagation()
+            let clipboard = navigator.clipboard || {
+                writeText: (text) => {
+                    let copyInput = document.createElement('input');
+                    copyInput.value = text;
+                    document.body.appendChild(copyInput);
+                    copyInput.select();
+                    document.execCommand('copy');
+                    document.body.removeChild(copyInput);
+                }
+            }
+            if (clipboard) {
+                await clipboard.writeText(data.name);
+            }
+        })
+    }
+    itemDom.append(itemIcon, itemName, copy);
+
+    return itemDom;
+}
+
+export { item };

package/src/components/charts/feature/expandLegend/singleSelect/position.js

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ *
+ */
+// 确定下拉框位置
+function position(singleselect) {
+    const distance = this.root.getBoundingClientRect();
+    let preTopPosition = singleselect.dataset.top;
+    let topPosition = distance.bottom + 5;
+    let leftPosition = distance.left + distance.width - singleselect.clientWidth;
+    if (leftPosition <= 0) {
+        leftPosition = distance.left;
+    }
+
+    if (Number(preTopPosition) < topPosition || topPosition + singleselect.clientHeight > window.innerHeight) {
+        topPosition = distance.top - singleselect.clientHeight;
+    }
+    singleselect.style.left = leftPosition + "px";
+    singleselect.style.top = topPosition + "px";
+    singleselect.dataset.scrollY = window.scrollY;
+    singleselect.dataset.top = topPosition;
+    singleselect.dataset.scrollX = window.scrollX;
+    singleselect.dataset.left = leftPosition;
+    singleselect.dataset.id = this.root.id;
+}
+
+export default position;

package/src/components/charts/feature/expandLegend/singleSelect/search.js

@@ -0,0 +1,76 @@
+/**
+ * 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 { CSS_CLASS, SVG_ICON } from "./constants";
+import { svgTransform } from "../../../util/convert";
+import debounce from "../../../util/debounce";
+import { item as createItem } from "./item";
+
+// 创建搜索框
+function search(container) {
+    const searchDom = document.createElement("div");
+    searchDom.classList.add(CSS_CLASS.SEARCH);
+    searchDom.addEventListener("wheel", (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+    });
+    const searchIcon = document.createElement("img");
+    searchIcon.src = svgTransform(SVG_ICON.SEARCH);
+    searchIcon.classList.add(CSS_CLASS.SEARCH_ICON);
+
+    // 搜索的input
+    const searchInput = document.createElement("input");
+    searchInput.name = "searchDom";
+    searchInput.placeholder = "请输入关键词";
+    searchInput.addEventListener("wheel", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+    });
+
+    // input的输入事件
+    searchInput.addEventListener(
+        "input",
+        debounce(() => {
+            container.classList.remove(CSS_CLASS.CONTAINER_EMPTY);
+            container.innerHTML = "";
+            let isEmpty = true;
+            let colorLength = this.color.length;
+            this.data.forEach((item, index) => {
+                if(item.display==='none')
+                    return
+                if (item.name.toString().includes(searchInput.value)) {
+                    let color = this.color[index % colorLength];
+                    container.appendChild(createItem(item, index, color, this.itemStyle));
+                    isEmpty = false;
+                }
+            });
+
+            // 如果搜索结果为空
+            if (isEmpty) {
+                container.classList.add(CSS_CLASS.CONTAINER_EMPTY);
+                const emptyIcon = document.createElement("img");
+                emptyIcon.src = svgTransform(SVG_ICON.EMPTY);
+                emptyIcon.style.opacity = "0.2";
+                const emptyText = document.createElement("div");
+                emptyText.innerText = "无数据";
+                emptyText.classList.add(CSS_CLASS.CONTAINER_EMPTY_TEXT);
+                container.append(emptyIcon, emptyText);
+            }
+            let singleselectDom = container.querySelector(`.${CSS_CLASS.SINGLESELECT}`);
+            if (singleselectDom) this.setPosition(singleselectDom);
+        })
+    );
+    searchInput.classList.add(CSS_CLASS.SEARCH_INPUT);
+    searchDom.append(searchIcon, searchInput);
+    return searchDom;
+}
+
+export default search;

package/src/components/charts/feature/expandLegend/singleSelectLegend/constants.js

@@ -0,0 +1,41 @@
+/**
+ * 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.
+ *
+ */
+export const CSS_CLASS = {
+    SCROLL: "hui_expand_legend_scroll",
+    MORE: "hui_expand_legend_more",
+    PLACEHOLDER: "hui_expand_legend_placeholder",
+    PAGING_ICON_ROTATE: "hui_expand_legend_paging_icon_rotate",
+    ITEM: "hui_expand_legend_scroll_item",
+    ITEM_ICON: "hui_expand_legend_scroll_item_icon",
+    ITEM_ICON_LINE: "hui_expand_legend_scroll_item_icon_line",
+    ITEM_ICON_CIRCLE: "hui_expand_legend_scroll_item_icon_circle",
+    ITEM_ICON_UNACTIVE: "hui_expand_legend_scroll_item_icon_unactive",
+    ITEM_TEXT: "hui_expand_legend_scroll_item_text",
+    ITEM_TEXT_UNACTIVE: "hui_expand_legend_scroll_item_text_unactive",
+    PAGING: "hui_expand_legend_paging",
+    PAGING_TEXT: "hui_expand_legend_paging_text",
+    PAGING_ICON: "hui_expand_legend_paging_icon",
+    PAGING_LEFT: "hui_expand_legend_paging_left",
+    PAGING_RIGHT: "hui_expand_legend_paging_right",
+};
+
+export const SVG_ICON = {
+    LEFT_ARROW: `<svg width="4.773438" height="8.336914" viewBox="0 0 4.77344 8.33691" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with Pixso.</desc><defs/><path id="合并" d="M4.06 8.21L0.15 4.46C0.05 4.36 0 4.25 0 4.15C0 4.06 0.05 3.96 0.15 3.86L4.06 0.11C4.23 -0.05 4.49 -0.04 4.65 0.12C4.81 0.29 4.81 0.55 4.64 0.71L1.04 4.16L4.64 7.61C4.81 7.77 4.81 8.03 4.65 8.2C4.49 8.37 4.23 8.38 4.06 8.21Z" fill="#C9C9C9" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
+    RIGHT_ARROW: `<svg width="4.773438" height="8.336914" viewBox="0 0 4.77344 8.33691" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with Pixso.</desc><defs/><path id="合并" d="M0.7 8.21L4.62 4.46C4.71 4.36 4.77 4.25 4.77 4.15C4.76 4.06 4.71 3.96 4.62 3.86L0.7 0.11C0.53 -0.05 0.27 -0.04 0.11 0.12C-0.05 0.29 -0.04 0.55 0.12 0.71L3.73 4.16L0.12 7.61C-0.04 7.77 -0.05 8.03 0.11 8.2C0.27 8.37 0.53 8.38 0.7 8.21Z" fill="#191919" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
+    EVEN_MORE: `<svg width="12.000000" height="12.000000" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with Pixso.</desc><defs/><path id="合并" d="M0 6C0 5.58 0.33 5.25 0.75 5.25C1.16 5.25 1.5 5.58 1.5 6C1.5 6.41 1.16 6.75 0.75 6.75C0.33 6.75 0 6.41 0 6ZM6 5.25C5.58 5.25 5.25 5.58 5.25 6C5.25 6.41 5.58 6.75 6 6.75C6.41 6.75 6.75 6.41 6.75 6C6.75 5.58 6.41 5.25 6 5.25ZM10.5 6C10.5 5.58 10.83 5.25 11.25 5.25C11.66 5.25 12 5.58 12 6C12 6.41 11.66 6.75 11.25 6.75C10.83 6.75 10.5 6.41 10.5 6Z" fill="#191919" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
+    COPY1:`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="#808080" d="m14.25,6c2.07,0,3.75,1.68,3.75,3.75v9c0,2.07-1.68,3.75-3.75,3.75H5.25c-2.07,0-3.75-1.68-3.75-3.75v-9c0-2.07,1.68-3.75,3.75-3.75h9Zm0,1.5H5.25c-1.24,0-2.25,1.01-2.25,2.25v9c0,1.24,1.01,2.25,2.25,2.25h9c1.24,0,2.25-1.01,2.25-2.25v-9c0-1.24-1.01-2.25-2.25-2.25Zm4.5-5.99c2.07,0,3.75,1.68,3.75,3.75v7.5c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-7.5c0-1.24-1.01-2.25-2.25-2.25h-7.5c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h7.5Z"></path>
+  </svg>`,
+    COPY2:`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="#000000" d="m14.25,6c2.07,0,3.75,1.68,3.75,3.75v9c0,2.07-1.68,3.75-3.75,3.75H5.25c-2.07,0-3.75-1.68-3.75-3.75v-9c0-2.07,1.68-3.75,3.75-3.75h9Zm0,1.5H5.25c-1.24,0-2.25,1.01-2.25,2.25v9c0,1.24,1.01,2.25,2.25,2.25h9c1.24,0,2.25-1.01,2.25-2.25v-9c0-1.24-1.01-2.25-2.25-2.25Zm4.5-5.99c2.07,0,3.75,1.68,3.75,3.75v7.5c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-7.5c0-1.24-1.01-2.25-2.25-2.25h-7.5c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h7.5Z"></path>
+  </svg>`,
+};