evui 3.4.131 → 3.4.133

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.4.131",
+  "version": "3.4.133",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

package/src/components/chart/element/element.line.js

@@ -341,7 +341,7 @@ class Line {
             item.hit = true;
           }
         }
-      } else if (typeof this.beforeFindItemIndex === 'number' && this.show && useSelectLabelOrItem) {
+      } else if (typeof this.beforeFindItemIndex === 'number' && this.beforeFindItemIndex !== -1 && this.show && useSelectLabelOrItem) {
         item.data = gdata[this.beforeFindItemIndex];
         item.index = this.beforeFindItemIndex;
       } else {
@@ -434,27 +434,28 @@ class Line {
           }
 
           // 두 가지 임계값 설정
-          const strictThreshold = avgInterval * 0.3; // 엄격한 임계값: 데이터 간격의 30%
-          const relaxedThreshold = avgInterval; // 느슨한 임계값: 데이터 간격 전체
+          const threshold = Math.max(avgInterval, 1);
 
           // 1. 먼저 엄격한 임계값으로 정확한 매치 확인
-          if (closestXDistance <= strictThreshold) {
+          if (closestXDistance <= threshold) {
             // 정확히 일치하거나 매우 가까운 데이터가 있음
             item.data = gdata[closestIndex];
             item.index = closestIndex;
           } else {
-            // 2. 정확한 매치가 없을 때, 현재 X 위치 근처에 다른 유효 데이터가 있는지 확인
-            let hasNearbyValidData = false;
-            for (let i = 0; i < validData.length; i++) {
-              const xDist = Math.abs(xp - validData[i].xp);
-              if (xDist <= strictThreshold) {
-                hasNearbyValidData = true;
-                break;
+            // 2. 정확한 매치가 없을 때, 현재 X 위치 근처에 다른 데이터가 있는지 확인
+            let hasNearbyAnyData = false;
+            let closestDistance = isLinearInterpolation ? Infinity : threshold;
+            const dataSet = isLinearInterpolation ? validData : gdata;
+            for (let i = 0; i < dataSet.length; i++) {
+              const xDist = Math.abs(xp - dataSet[i].xp);
+              if (xDist <= closestDistance) {
+                hasNearbyAnyData = true;
+                closestDistance = xDist;
+                closestIndex = isLinearInterpolation ? dataSet[i].originalIndex : i;
               }
             }
 
-            // 3. 근처에 다른 유효 데이터가 없을 때만 느슨한 임계값 적용
-            if (!hasNearbyValidData && closestXDistance <= relaxedThreshold) {
+            if (hasNearbyAnyData) {
               item.data = gdata[closestIndex];
               item.index = closestIndex;
             }

package/src/components/chart/plugins/plugins.interaction.js

@@ -317,7 +317,6 @@ const modules = {
       };
 
       const setSelectedLabelInfo = (targetAxis) => {
-        const itemHitInfo = this.getItemByPosition(offset, false);
         const {
           labelIndex: clickedLabelIndex,
         } = this.getLabelInfoByPosition(offset, targetAxis);
@@ -336,8 +335,8 @@ const modules = {
           eventTarget: 'label',
           ...cloneDeep(this.defaultSelectInfo),
         };
-        args.label = itemHitInfo.label;
-        args.dataIndex = itemHitInfo.maxIndex;
+        args.label = this.defaultSelectInfo?.label?.at(0);
+        args.dataIndex = this.defaultSelectInfo?.dataIndex?.at(0);
       };
 
       const setSelectedSeriesInfo = () => {
@@ -906,75 +905,16 @@ const modules = {
     let maxg = null;
     let maxSID = null;
 
-    // 파이 차트는 특별한 처리가 필요
-    if (this.options.type === 'pie') {
-      for (let ix = 0; ix < sIds.length; ix++) {
-        const sId = sIds[ix];
-        const series = this.seriesList[sId];
-
-        if (series.findGraphData && series.show) {
-          const item = series.findGraphData(offset);
-
-          if (item?.data && item.hit) {
-            const gdata = item.data.o;
-
-            if (gdata !== null && gdata !== undefined) {
-              const formattedSeriesName = this.getFormattedTooltipLabel({
-                dataId: series.id,
-                seriesId: sId,
-                seriesName: series.name,
-                itemData: item.data,
-              });
-              const sw = ctx ? ctx.measureText(formattedSeriesName).width : 1;
-
-              item.id = series.id;
-              item.name = formattedSeriesName;
-              item.axis = { x: 0, y: 0 };
-              items[sId] = item;
-
-              const formattedTxt = this.getFormattedTooltipValue({
-                dataId: series.id,
-                seriesId: sId,
-                seriesName: formattedSeriesName,
-                value: gdata,
-                itemData: item.data,
-              });
-
-              item.data.formatted = formattedTxt;
-
-              if (maxsw < sw) {
-                maxs = formattedSeriesName;
-                maxsw = sw;
-              }
-
-              if (maxv.length <= `${formattedTxt}`.length) {
-                maxv = `${formattedTxt}`;
-              }
-
-              if (maxg === null || maxg <= gdata) {
-                maxg = gdata;
-                maxSID = sId;
-              }
-
-              hitId = sId;
-            }
-          }
-        }
-      }
-
-      const maxHighlight = maxg !== null ? [maxSID, maxg] : null;
-      return { items, hitId, maxTip: [maxs, maxv], maxHighlight };
-    }
-
     // 1. 먼저 공통으로 사용할 데이터 인덱스 결정
     const targetDataIndex = this.findClosestDataIndex(offset, sIds);
 
-    if (targetDataIndex === -1) {
+    if (targetDataIndex === -1 && this.options.type !== 'pie') {
       return { items, hitId, maxTip: [maxs, maxv], maxHighlight: null };
     }
 
     // 2. 모든 시리즈가 동일한 데이터 인덱스 사용
     const allSeriesIsBar = sIds.every(sId => this.seriesList[sId].type === 'bar');
+
     for (let ix = 0; ix < sIds.length; ix++) {
       const sId = sIds[ix];
       const series = this.seriesList[sId];
@@ -1056,8 +996,6 @@ const modules = {
     const [xp, yp] = offset;
     const isHorizontal = !!this.options.horizontal;
     const mousePos = isHorizontal ? yp : xp;
-    let closestDistance = Infinity;
-    let closestIndex = -1;
 
     // 첫 번째 표시 중인 시리즈를 기준으로 라벨 위치 확인
     const referenceSeries = sIds.find(sId => this.seriesList[sId]?.show);
@@ -1067,6 +1005,39 @@ const modules = {
 
     const referenceData = this.seriesList[referenceSeries].data;
 
+    // 데이터 간격 계산 - 모든 데이터(null 포함)의 평균 간격 사용
+    let avgInterval = 50;
+    if (referenceData.length > 1) {
+      const intervals = [];
+      for (let i = 1; i < referenceData.length; i++) {
+        const prevPoint = referenceData[i - 1];
+        const currPoint = referenceData[i];
+        if (prevPoint && currPoint) {
+          let prevPos;
+          let currPos;
+
+          if (isHorizontal) {
+            prevPos = prevPoint.h ? prevPoint.yp + (prevPoint.h / 2) : prevPoint.yp;
+            currPos = currPoint.h ? currPoint.yp + (currPoint.h / 2) : currPoint.yp;
+          } else {
+            prevPos = prevPoint.w ? prevPoint.xp + (prevPoint.w / 2) : prevPoint.xp;
+            currPos = currPoint.w ? currPoint.xp + (currPoint.w / 2) : currPoint.xp;
+          }
+
+          if (prevPos !== null && currPos !== null) {
+            intervals.push(Math.abs(currPos - prevPos));
+          }
+        }
+      }
+      if (intervals.length > 0) {
+        avgInterval = intervals.reduce((a, b) => a + b, 0) / intervals.length;
+      }
+    }
+
+    let closestDistance = this.seriesList?.[referenceSeries]?.useLinearInterpolation?.()
+      ? Infinity : avgInterval;
+    let closestIndex = -1;
+
     // 각 라벨에서 가장 가까운 것 찾기
     for (let i = 0; i < referenceData.length; i++) {
       // 이 라벨에 유효한 데이터가 있는 시리즈가 하나 이상 있는지 확인

package/src/components/chart/plugins/plugins.legend.js

@@ -206,15 +206,10 @@ const modules = {
     const { groups } = this.data;
     const { seriesList } = this;
 
-    if (this.options.legend.virtualScroll) {
-      if (this.useTable) {
-        this.addLegendForGroups(groups, seriesList, true);
-        this.addStandaloneLegends(seriesList, true);
-      } else {
-        this.renderVisibleLegendsFrameId = requestAnimationFrame(() => {
-          this.renderVisibleLegends();
-        });
-      }
+    if (this.options.legend.virtualScroll && !this.useTable) {
+      this.renderVisibleLegendsFrameId = requestAnimationFrame(() => {
+        this.renderVisibleLegends();
+      });
     } else {
       this.addLegendForGroups(groups, seriesList, this.useTable);
       this.addStandaloneLegends(seriesList, this.useTable);
@@ -362,19 +357,116 @@ const modules = {
     }
 
     const classList = {
-      container: `ev-chart-legend${this.useTable ? '--table__container' : '-container'}`,
+      container: `ev-chart-legend${this.useTable ? '--table__row' : '-container'}`,
       color: `ev-chart-legend${this.useTable ? '--table__color' : '-color'}`,
       name: `ev-chart-legend${this.useTable ? '--table__name' : '-name'}`,
       value: `ev-chart-legend${this.useTable ? '--table__value' : '-value'}`,
     };
 
+    /**
+     * callback for legendBoxDOM to show/hide clicked series
+     *
+     * @param {Element} _targetDOM - target DOM
+     * @param {string} _inactiveColor - inactive color
+     * @returns {void}
+     */
+    const inactiveDomAndSeries = (_targetDOM, _inactiveColor) => {
+      const _colorDOM = _targetDOM?.getElementsByClassName(classList.color)[0];
+      const _nameDOM = _targetDOM?.getElementsByClassName(classList.name)[0];
+      const _valueDOMList = _targetDOM?.getElementsByClassName(classList.value);
+      const _series = _targetDOM?.series;
+
+      _colorDOM.style.backgroundColor = _inactiveColor;
+      _colorDOM.style.borderColor = _inactiveColor;
+      _nameDOM.style.color = _inactiveColor;
+      _valueDOMList?.forEach((dom) => {
+        dom.style.color = _inactiveColor;
+      });
+
+      _series.show = false;
+      _targetDOM.dataset.inactive = true;
+    };
+
+    /**
+     * callback for legendBoxDOM to show/hide clicked series
+     *
+     * @param {Element} _targetDOM - target DOM
+     * @param {string} _activeColor - active color
+     * @returns {void}
+     */
+    const activeDomAndSeries = (_targetDOM, _activeColor) => {
+      let seriesColor;
+
+      const _colorDOM = _targetDOM?.getElementsByClassName(classList.color)[0];
+      const _nameDOM = _targetDOM?.getElementsByClassName(classList.name)[0];
+      const _valueDOMList = _targetDOM?.getElementsByClassName(classList.value);
+      const _series = _targetDOM?.series;
+
+      if (typeof _series.color !== 'string') {
+        seriesColor = _series.color[_series.color.length - 1][1];
+      } else {
+        seriesColor = _series.color;
+      }
+
+      if (_series.type === 'line' && _series.fill) {
+        _colorDOM.style.height = '8px';
+        _colorDOM.style.backgroundColor = Util.rgbaAdjustHalfOpacity(seriesColor);
+        _colorDOM.style.border = `1px solid ${seriesColor}`;
+      } else {
+        _colorDOM.style.backgroundColor = seriesColor;
+      }
+
+      _nameDOM.style.color = _activeColor;
+      _valueDOMList?.forEach((dom) => {
+        const style = this.options.legend.table?.columns[dom.dataset.type]?.style;
+        dom.style.color = style?.color ? style.color : _activeColor;
+      });
+
+      _series.show = true;
+      _targetDOM.dataset.inactive = false;
+    };
+
+    const hideAllSeries = () => {
+      const legendSeries = (() => {
+        if (this.data.groups.at(0)) {
+          return this.data.groups.at(0).slice().reverse()
+            .filter(sId => this.seriesList[sId].showLegend)
+            .map(sId => [sId, this.seriesList[sId]]);
+        }
+        return Object.entries(this.seriesList)
+          .filter(([, series]) => series.showLegend);
+      })();
+      legendSeries.forEach(([, s]) => {
+        s.show = false;
+      });
+    };
+    const showAllSeries = () => {
+      const legendSeries = (() => {
+        if (this.data.groups.at(0)) {
+          return this.data.groups.at(0).slice().reverse()
+            .filter(sId => this.seriesList[sId].showLegend)
+            .map(sId => [sId, this.seriesList[sId]]);
+        }
+        return Object.entries(this.seriesList)
+          .filter(([, series]) => series.showLegend);
+      })();
+      legendSeries.forEach(([, s]) => {
+        s.show = true;
+      });
+    };
+
     /**
      * callback for legendBoxDOM to show/hide clicked series
      *
      * @returns {undefined}
      */
+    /**
+     * 범례 박스 클릭 이벤트 핸들러
+     * 시리즈의 표시/숨김을 토글하고 범례의 시각적 상태를 변경
+     */
     this.onLegendBoxClick = (e) => {
       const { legend: opt } = this.options;
+
       if (opt?.stopClickEvt) {
         return;
       }
@@ -385,59 +477,63 @@ const modules = {
         return;
       }
 
-      const series = targetDOM?.series;
-
       const colorDOM = targetDOM?.getElementsByClassName(classList.color)[0];
       const nameDOM = targetDOM?.getElementsByClassName(classList.name)[0];
-      const valueDOMList = targetDOM?.getElementsByClassName(classList.value);
-
-      const isActive = !targetDOM?.className.includes('inactive');
-      if (isActive && this.seriesInfo.count === 1) {
-        return;
-      }
+      const isActive = targetDOM?.dataset.inactive === 'false';
 
       if (!colorDOM || !nameDOM) {
         return;
       }
 
-      if (isActive) {
-        this.seriesInfo.count--;
+      // clickMode active - 클릭시 활성화
+      if (opt.clickMode === 'active') {
+        const legendContainerDOMs = Array.from(
+          this.legendBoxDOM.getElementsByClassName(classList.container),
+        );
+        const isActiveAll = legendContainerDOMs.every(dom => dom.dataset.inactive === 'false');
 
-        const inactiveColor = opt.inactive;
-        colorDOM.style.backgroundColor = inactiveColor;
-        colorDOM.style.borderColor = inactiveColor;
-        nameDOM.style.color = inactiveColor;
-        valueDOMList?.forEach((dom) => {
-          dom.style.color = inactiveColor;
-        });
-      } else {
-        this.seriesInfo.count++;
+        if (isActiveAll) {
+          legendContainerDOMs.forEach((dom) => {
+            inactiveDomAndSeries(dom, opt.inactive);
+          });
+          hideAllSeries();
+
+          activeDomAndSeries(targetDOM, opt.color);
+          this.seriesInfo.count = 1;
+        } else if (isActive) {
+          inactiveDomAndSeries(targetDOM, opt.inactive);
+          this.seriesInfo.count--;
+        } else if (!isActive) {
+          activeDomAndSeries(targetDOM, opt.color);
+          this.seriesInfo.count++;
+        }
 
-        let seriesColor;
-        if (typeof series.color !== 'string') {
-          seriesColor = series.color[series.color.length - 1][1];
-        } else {
-          seriesColor = series.color;
+        const isInactiveAll = legendContainerDOMs.every(dom => dom.dataset.inactive === 'true');
+
+        if (isInactiveAll) {
+          legendContainerDOMs.forEach((dom) => {
+            activeDomAndSeries(dom, opt.color);
+          });
+          showAllSeries();
+          this.seriesInfo.count = legendContainerDOMs.length;
         }
+      }
 
-        if (series.type === 'line' && series.fill) {
-          colorDOM.style.height = '8px';
-          colorDOM.style.backgroundColor = Util.rgbaAdjustHalfOpacity(seriesColor);
-          colorDOM.style.border = `1px solid ${seriesColor}`;
-        } else {
-          colorDOM.style.backgroundColor = seriesColor;
+      // clickMode inactive - 클릭시 비활성화
+      if (opt.clickMode !== 'active') {
+        if (isActive && this.seriesInfo.count === 1) {
+          return;
         }
 
-        nameDOM.style.color = opt.color;
-        valueDOMList?.forEach((dom) => {
-          const style = opt.table?.columns[dom.dataset.type]?.style;
-          dom.style.color = style?.color ? style.color : opt.color;
-        });
+        if (isActive) {
+          inactiveDomAndSeries(targetDOM, opt.inactive);
+          this.seriesInfo.count--;
+        } else {
+          activeDomAndSeries(targetDOM, opt.color);
+          this.seriesInfo.count++;
+        }
       }
 
-      series.show = !series.show;
-      targetDOM.classList.toggle('inactive');
-
       if (this.brushSeries) {
         const seriesList = [...this.brushSeries.list];
         seriesList[chartIdx] = this.seriesList;
@@ -515,6 +611,73 @@ const modules = {
     if (this.isInitLegend) {
       return;
     }
+    const classList = {
+      container: `ev-chart-legend${this.useTable ? '--table__row' : '-container'}`,
+      color: `ev-chart-legend${this.useTable ? '--table__color' : '-color'}`,
+      name: `ev-chart-legend${this.useTable ? '--table__name' : '-name'}`,
+    };
+
+    /**
+     * callback for legendBoxDOM to show/hide clicked series
+     *
+     * @param {Element} _targetDOM - target DOM
+     * @param {string} _inactiveColor - inactive color
+     * @returns {void}
+     */
+    const inactiveDomAndSeries = (_targetDOM, _inactiveColor) => {
+      const _colorDOM = _targetDOM?.getElementsByClassName(classList.color)[0];
+      const _nameDOM = _targetDOM?.getElementsByClassName(classList.name)[0];
+      const _series = Object.values(this.seriesList)[0];
+      const targetId = _targetDOM?.series?.cId;
+
+      _colorDOM.style.backgroundColor = _inactiveColor;
+      _colorDOM.style.borderColor = _inactiveColor;
+      _nameDOM.style.color = _inactiveColor;
+
+      const targetIndex = _series.colorState.findIndex(colorItem => colorItem.id === targetId);
+      if (targetIndex > -1) {
+        _series.colorState[targetIndex].show = false;
+      }
+
+      _targetDOM.dataset.inactive = true;
+    };
+
+    /**
+     * callback for legendBoxDOM to show/hide clicked series
+     *
+     * @param {Element} _targetDOM - target DOM
+     * @param {string} _activeColor - active color
+     * @returns {void}
+     */
+    const activeDomAndSeries = (_targetDOM, _activeColor) => {
+      const _colorDOM = _targetDOM?.getElementsByClassName(classList.color)[0];
+      const _nameDOM = _targetDOM?.getElementsByClassName(classList.name)[0];
+      const _series = Object.values(this.seriesList)[0];
+      const targetId = _targetDOM?.series?.cId;
+
+      _colorDOM.style.backgroundColor = _targetDOM?.series?.color;
+      _nameDOM.style.color = _activeColor;
+
+      const targetIndex = _series.colorState.findIndex(colorItem => colorItem.id === targetId);
+      if (targetIndex > -1) {
+        _series.colorState[targetIndex].show = true;
+      }
+
+      _targetDOM.dataset.inactive = false;
+    };
+
+    const hideAllSeries = () => {
+      const series = Object.values(this.seriesList)[0];
+      series.colorState.forEach((colorItem) => {
+        colorItem.show = false;
+      });
+    };
+    const showAllSeries = () => {
+      const series = Object.values(this.seriesList)[0];
+      series.colorState.forEach((colorItem) => {
+        colorItem.show = true;
+      });
+    };
 
     /**
      * callback for legendBoxDOM to show/hide clicked series
@@ -533,36 +696,57 @@ const modules = {
         return;
       }
 
-      const colorDOM = targetDOM?.getElementsByClassName('ev-chart-legend-color')[0];
-      const nameDOM = targetDOM?.getElementsByClassName('ev-chart-legend-name')[0];
-      const targetId = targetDOM?.series?.cId;
-      const isActive = !colorDOM?.className.includes('inactive');
+      const colorDOM = targetDOM?.getElementsByClassName(classList.color)[0];
+      const nameDOM = targetDOM?.getElementsByClassName(classList.name)[0];
+      const isActive = targetDOM?.dataset.inactive === 'false';
       const activeCount = series.colorState.filter(colorItem => colorItem.show).length;
 
-      if (isActive && activeCount === 1) {
-        return;
-      }
-
       if (!colorDOM || !nameDOM) {
         return;
       }
 
-      if (isActive) {
-        colorDOM.style.backgroundColor = opt.inactive;
-        colorDOM.style.borderColor = opt.inactive;
-        nameDOM.style.color = opt.inactive;
-      } else {
-        colorDOM.style.backgroundColor = targetDOM?.series?.color;
-        nameDOM.style.color = opt.color;
-      }
+      // clickMode active - 클릭시 활성화
+      if (opt.clickMode === 'active') {
+        const legendContainerDOMs = Array.from(
+          this.legendBoxDOM.getElementsByClassName(classList.container),
+        );
+        const isActiveAll = legendContainerDOMs.every(dom => dom.dataset.inactive === 'false');
 
-      const targetIndex = series.colorState.findIndex(colorItem => colorItem.id === targetId);
-      if (targetIndex > -1) {
-        series.colorState[targetIndex].show = !isActive;
+        if (isActiveAll) {
+          legendContainerDOMs.forEach((dom) => {
+            inactiveDomAndSeries(dom, opt.inactive);
+          });
+          hideAllSeries();
+
+          activeDomAndSeries(targetDOM, opt.color);
+        } else if (isActive) {
+          inactiveDomAndSeries(targetDOM, opt.inactive);
+        } else if (!isActive) {
+          activeDomAndSeries(targetDOM, opt.color);
+        }
+
+        const isInactiveAll = legendContainerDOMs.every(dom => dom.dataset.inactive === 'true');
+
+        if (isInactiveAll) {
+          legendContainerDOMs.forEach((dom) => {
+            activeDomAndSeries(dom, opt.color);
+          });
+          showAllSeries();
+        }
       }
 
-      colorDOM.classList.toggle('inactive');
-      nameDOM.classList.toggle('inactive');
+      // clickMode inactive - 클릭시 비활성화
+      if (opt.clickMode !== 'active') {
+        if (isActive && activeCount === 1) {
+          return;
+        }
+
+        if (isActive) {
+          inactiveDomAndSeries(targetDOM, opt.inactive);
+        } else {
+          activeDomAndSeries(targetDOM, opt.color);
+        }
+      }
 
       this.update({
         updateSeries: false,
@@ -791,13 +975,19 @@ const modules = {
    *
    * @returns {undefined}
    */
+  /**
+   * 새로운 범례 아이템을 생성하고 범례 영역에 추가
+   * @param {Object} series - 시리즈 정보 객체
+   */
   addLegend(series) {
     const opt = this.options.legend;
+
     const containerDOM = document.createElement('div');
     const colorDOM = document.createElement('span');
     const nameDOM = document.createElement('div');
 
-    containerDOM.className = `ev-chart-legend-container ${!series.show ? ' inactive' : ''}`;
+    containerDOM.className = 'ev-chart-legend-container';
+    containerDOM.dataset.inactive = !series.show;
     containerDOM.series = series;
 
     colorDOM.className = 'ev-chart-legend-color';
@@ -808,7 +998,6 @@ const modules = {
 
     nameDOM.className = 'ev-chart-legend-name';
 
-    // set series color
     let seriesColor;
     if (!series.show) {
       seriesColor = opt.inactive;
@@ -828,6 +1017,7 @@ const modules = {
     }
 
     colorDOM.dataset.type = 'color';
+
     nameDOM.style.color = opt.color;
     nameDOM.textContent = series.name;
     nameDOM.setAttribute('title', series.name);
@@ -842,12 +1032,14 @@ const modules = {
     } else {
       containerDOM.style.width = '100%';
     }
+
     containerDOM.style.height = `${this.legendItemHeight}px`;
     containerDOM.style.display = 'inline-block';
     containerDOM.style.overflow = 'hidden';
     containerDOM.dataset.type = 'container';
 
     this.legendBoxDOM.insertBefore(containerDOM, this.legendBottomSpacer);
+
     if (series.show) {
       this.seriesInfo.count++;
     }
@@ -869,7 +1061,8 @@ const modules = {
 
     // create row
     const rowDOM = document.createElement('tr');
-    rowDOM.className = `ev-chart-legend--table__row ${!series.show ? ' inactive' : ''}`;
+    rowDOM.className = 'ev-chart-legend--table__row';
+    rowDOM.dataset.inactive = !series.show;
     Util.setDOMStyle(rowDOM, opt.table?.style?.row);
     rowDOM.series = series;
     rowDOM.dataset.type = 'container';

package/src/components/chart/uses.js

@@ -39,6 +39,7 @@ const DEFAULT_OPTIONS = {
     height: 24,
     allowResize: false,
     virtualScroll: false,
+    clickMode: 'active',
     table: {
       use: false,
       columns: {

package/src/components/select/uses.js

@@ -300,9 +300,11 @@ export const useDropdown = (param) => {
     if (props.filterable) {
       filterTextRef.value = '';
     }
-    mv.value = val;
     isDropbox.value = false;
-    changeMv();
+    if (mv.value !== val) {
+      mv.value = val;
+      changeMv();
+    }
   };
   const multipleClickItem = (val) => {
     if (props.filterable) {