evui 3.3.51 → 3.3.53

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

@@ -1,5 +1,5 @@
 import { numberWithComma } from '@/common/utils';
-import { cloneDeep, defaultsDeep } from 'lodash-es';
+import { cloneDeep, defaultsDeep, inRange } from 'lodash-es';
 
 const modules = {
   /**
@@ -116,9 +116,22 @@ const modules = {
         this.isMouseMove = false;
         return;
       }
+
       const args = { e };
-      if (this.options.selectItem.use && this.options.selectItem.useClick) {
-        const offset = this.getMousePosition(e);
+      const offset = this.getMousePosition(e);
+
+      const {
+        type: chartType,
+        selectItem: selectItemOpt,
+        selectLabel: selectLabelOpt,
+        selectSeries: selectSeriesOpt,
+      } = this.options;
+
+      const useSelectItem = selectItemOpt?.use && selectItemOpt?.useClick;
+      const useSelectLabel = selectLabelOpt?.use && selectLabelOpt?.useClick;
+      const useSelectSeries = selectSeriesOpt?.use && selectSeriesOpt?.useClick;
+
+      const setSelectedItemInfo = () => {
         const hitInfo = this.getItemByPosition(offset, false);
 
         ({
@@ -129,29 +142,103 @@ const modules = {
           acc: args.acc,
         } = hitInfo);
 
-        if (this.options.type === 'heatMap') {
-          args.deselect = this.setDeselectItem(hitInfo);
+        if (hitInfo?.sId) {
+          args.selected = {
+            eventTarget: 'item',
+            seriesId: this.isDeselectItem(hitInfo) ? null : hitInfo.sId,
+            dataIndex: this.isDeselectItem(hitInfo) ? null : hitInfo.maxIndex,
+          };
         }
+      };
 
-        if (hitInfo.label !== null) {
-          this.render(hitInfo);
+      const setSelectedLabelInfo = (targetAxis) => {
+        const {
+          labelIndex: clickedLabelIndex,
+        } = this.getLabelInfoByPosition(offset, targetAxis);
+
+        const {
+          dataIndex: dataIndexList,
+        } = this.regulateSelectedLabelInfo(clickedLabelIndex, targetAxis);
+
+        this.defaultSelectInfo = this.getSelectedLabelInfoWithLabelData(dataIndexList, targetAxis);
+
+        if (targetAxis) {
+          this.defaultSelectInfo.targetAxis = dataIndexList?.length ? targetAxis : null;
         }
-      } else if (this.options.selectLabel.use && this.options.selectLabel.useClick) {
-        const offset = this.getMousePosition(e);
-        const clickedLabelInfo = this.getLabelInfoByPosition(offset);
-        const selected = this.selectLabel(clickedLabelInfo.labelIndex);
-        this.renderWithSelected(selected.dataIndex);
 
-        args.selected = cloneDeep(this.defaultSelectInfo);
-      } else if (this.options.selectSeries.use && this.options.selectSeries.useClick) {
-        const offset = this.getMousePosition(e);
-        const hitInfo = this.getSeriesIdByPosition(offset);
+        args.selected = {
+          eventTarget: 'label',
+          ...cloneDeep(this.defaultSelectInfo),
+        };
+      };
+
+      const setSelectedSeriesInfo = () => {
+        const hitInfo = this.getSeriesInfoByPosition(offset);
         if (hitInfo.sId !== null) {
-          const selected = this.selectSeries(hitInfo.sId);
-          this.renderWithSelected(selected.seriesId);
+          const allSelectedList = this.updateSelectedSeriesInfo(hitInfo.sId);
+          this.defaultSelectInfo.seriesId = allSelectedList.seriesId;
+
+          args.selected = {
+            eventTarget: 'series',
+            ...cloneDeep(this.defaultSelectInfo),
+          };
         }
+      };
 
-        args.selected = cloneDeep(this.defaultSelectInfo);
+      switch (chartType) {
+        case 'line': {
+          if (useSelectItem) {
+            setSelectedItemInfo();
+          } else if (useSelectLabel) {
+            setSelectedLabelInfo();
+          } else if (useSelectSeries) {
+            setSelectedSeriesInfo();
+          }
+          break;
+        }
+
+        case 'bar': {
+          if (useSelectItem) {
+            setSelectedItemInfo();
+          } else if (useSelectLabel) {
+            setSelectedLabelInfo();
+          }
+          break;
+        }
+
+        case 'heatMap': {
+          if (useSelectItem && useSelectLabel) {
+            const { useBothAxis } = selectLabelOpt;
+
+            const location = this.getClickedLocation(offset);
+
+            if (location === 'chartBackground') {
+              this.clearSelectedLabelInfo();
+              args.deselected = { eventTarget: 'label' };
+              setSelectedItemInfo();
+            } else if (location === 'yAxis' || location === 'xAxis') {
+              this.clearSelectedItemInfo();
+              args.deselected = { eventTarget: 'item' };
+              setSelectedLabelInfo(useBothAxis ? location : null);
+            }
+          } else if (useSelectItem) {
+            setSelectedItemInfo();
+          } else if (useSelectLabel) {
+            setSelectedLabelInfo();
+          }
+          break;
+        }
+
+        case 'pie':
+        case 'scatter': {
+          if (useSelectItem) {
+            setSelectedItemInfo();
+          }
+          break;
+        }
+
+        default:
+          break;
       }
 
       if (typeof this.listeners.click === 'function') {
@@ -300,7 +387,7 @@ const modules = {
           data: this.findSelectedItems(dragInfo),
           range: type === 'heatMap'
             ? this.getSelectionRangeForHeatMap(dragInfo)
-            : this.getSelectionRage(dragInfo),
+            : this.getSelectionRange(dragInfo),
         };
 
         this.dragInfoBackup = defaultsDeep({}, dragInfo);
@@ -570,11 +657,12 @@ const modules = {
   },
 
   /**
-   *
+   * Select Item
+   * Set backup data that selected item information
+   * render chart
    * @param targetInfo {object}  '{ dataIndex: number, seriesID: string }'
-   * @param chartType {string}  'bar', 'line', 'pie', 'scatter'
+   * @param chartType {string}  'bar', 'line', 'pie', 'scatter', 'heatMap'
    *
-   * @returns {boolean}
    */
   selectItemByData(targetInfo, chartType) {
     this.defaultSelectItemInfo = targetInfo;
@@ -586,94 +674,102 @@ const modules = {
         sId: targetInfo.seriesID,
       };
     } else {
-      if (isNaN(targetInfo?.dataIndex)) {
-        return false;
-      }
-
-      foundInfo = this.getItem(targetInfo, false);
+      foundInfo = isNaN(targetInfo?.dataIndex) ? null : this.getItem(targetInfo, false);
     }
 
-    if (foundInfo) {
-      this.render(foundInfo);
-    } else {
-      return false;
-    }
+    this.render(foundInfo);
+  },
 
-    return true;
+  /**
+   * Select Label
+   * set backup data that selected label information list
+   * render chart
+   * @param labelIndexList {number[]}
+   * @param targetAxis {string | null}
+   * @returns {boolean}
+   */
+  selectLabelByData(labelIndexList, targetAxis) {
+    this.defaultSelectInfo = this.getSelectedLabelInfoWithLabelData(labelIndexList, targetAxis);
+    this.render();
   },
 
   /**
-   * render after selected label or selected series
-   * @param indexList {array}  '[0, 1 ...]'
+   * Select Series
+   * set backup data that selected series information list
+   * render chart
+   * @param seriesIdList {number[]}  '
+   * @returns {boolean}
    */
-  renderWithSelected(list) {
-    if (this.options.selectLabel.use) {
-      this.defaultSelectInfo.dataIndex = list;
-    } else if (this.options.selectSeries.use) {
-      this.defaultSelectInfo.seriesId = list;
-    }
-    this.initSelectedInfo();
+  selectSeriesByData(seriesIdList) {
+    this.defaultSelectInfo.seriesId = seriesIdList;
     this.render();
   },
 
+
   /**
-   * init defaultSelectInfo object.
-   * - at selectLabel using: set each series data and label text
-   * - at selectSeries using: set series state
+   * Get each series data and label text
+   * @param labelIndexList{number[]}
+   * @param targetAxis{string | null}
+   * @returns {object[]}
    */
-  initSelectedInfo() {
-    if (this.options.selectLabel.use) {
-      if (!this.defaultSelectInfo) {
-        this.defaultSelectInfo = { dataIndex: [] };
+  getSelectedLabelInfoWithLabelData(labelIndexList, targetAxis) {
+    const { selectLabel: selectLabelOpt, type: chartType, horizontal } = this.options;
+    const result = cloneDeep(this.defaultSelectInfo);
+    result.dataIndex = labelIndexList;
+
+    switch (chartType) {
+      case 'bar':
+      case 'line': {
+        result.dataIndex.splice(selectLabelOpt.limit);
+
+        result.label = result.dataIndex.map(i => this.data.labels[i]);
+
+        const dataEntries = Object.entries(this.data.data);
+        result.data = result.dataIndex.map(labelIdx => Object.fromEntries(
+          dataEntries.map(([sId, data]) => [sId, data[labelIdx]])));
+        break;
       }
 
-      if (this.options.type === 'heatMap') {
-        this.initSelectedInfoForHeatMap();
-        return;
-      }
+      case 'heatMap': {
+        const { limit, useBothAxis } = this.options.selectLabel;
 
-      const { limit } = this.options.selectLabel;
-      const infoObj = this.defaultSelectInfo;
-      infoObj.dataIndex.splice(limit);
-      infoObj.label = infoObj.dataIndex.map(i => this.data.labels[i]);
-      const dataEntries = Object.entries(this.data.data);
-      infoObj.data = infoObj.dataIndex.map(labelIdx => Object.fromEntries(
-        dataEntries.map(([sId, data]) => [sId, data[labelIdx]])));
-    } else if (this.options.selectSeries.use) {
-      if (!this.defaultSelectInfo) {
-        this.defaultSelectInfo = { seriesId: [] };
-      }
-    }
-  },
+        result.dataIndex.splice(limit);
 
-  /**
-   * init defaultSelectInfo object for HeatMap.
-   * - at selectLabel using: set each series data and label text
-   */
-  initSelectedInfoForHeatMap() {
-    const { limit } = this.options.selectLabel;
-    const isHorizontal = this.options.horizontal;
+        let targetAxisDirection;
+        if (useBothAxis) {
+          targetAxisDirection = targetAxis === 'yAxis' ? 'y' : 'x';
+        } else {
+          targetAxisDirection = horizontal ? 'y' : 'x';
+        }
 
-    const infoObj = this.defaultSelectInfo;
-    infoObj.dataIndex.splice(limit);
+        result.label = result.dataIndex.map(i => this.data.labels[targetAxisDirection][i]);
 
-    const targetLabel = isHorizontal ? 'y' : 'x';
-    infoObj.label = infoObj.dataIndex.map(i => this.data.labels[targetLabel][i]);
+        const dataValues = Object.values(this.data.data)[0];
+        result.data = dataValues.filter(({ x, y }) =>
+          (result.label.includes(targetAxisDirection === 'y' ? y : x)),
+        );
+        break;
+      }
+
+      default:
+        break;
+    }
 
-    const dataValues = Object.values(this.data.data)[0];
-    infoObj.data = dataValues.filter(({ x, y }) =>
-      (infoObj.label.includes(isHorizontal ? y : x)),
-    );
+    return result;
   },
 
   /**
    * Add or delete selected label index, according to policy and option
-   * (set each series data and label text)
-   * @param labelIndex {array}  '[0, 1 ...]'
+   * @param labelIndex {number}
+   * @param targetAxis {string | null}
+   * @returns after {number[]}  '[0, 1 ...]' result Label index List
    */
-  selectLabel(labelIndex) {
+  regulateSelectedLabelInfo(labelIndex, targetAxis) {
     const option = this.options?.selectLabel ?? {};
-    const before = this.defaultSelectInfo ?? { dataIndex: [] };
+    const before = this.defaultSelectInfo?.targetAxis === targetAxis
+      ? { ...this.defaultSelectInfo, targetAxis }
+      : { dataIndex: [], targetAxis };
+
     const after = cloneDeep(before);
 
     if (before.dataIndex.includes(labelIndex)) {
@@ -693,7 +789,12 @@ const modules = {
     return after;
   },
 
-  selectSeries(seriesId) {
+  /**
+   * Add or delete selected series Index,according to policy and option
+   * @param seriesId {number}
+   * @returns after {number[]}  '[0, 1 ...]' result series Id List
+   */
+  updateSelectedSeriesInfo(seriesId) {
     const option = this.options?.selectSeries ?? {};
     const before = this.defaultSelectInfo ?? { seriesId: [] };
     const after = cloneDeep(before);
@@ -749,7 +850,7 @@ const modules = {
    *                 object.range: coordinate-based range in graph
    * @returns {object}
    */
-  getSelectionRage({ xsp, ysp, width, height, range }) {
+  getSelectionRange({ xsp, ysp, width, height, range }) {
     const dataRangeX = this.axesSteps.x.length ? this.axesSteps.x[0] : null;
     const dataRangeY = this.axesSteps.y.length ? this.axesSteps.y[0] : null;
 
@@ -819,17 +920,67 @@ const modules = {
     };
   },
 
-  setDeselectItem(hitInfo) {
-    let deselect = false;
-    if (this.options.selectItem.useDeselectItem) {
-      const isEqualSelectItem = hitInfo?.maxIndex === this.defaultSelectItemInfo?.dataIndex;
-      if (!isNaN(hitInfo?.maxIndex) && isEqualSelectItem) {
-        deselect = true;
-        this.defaultSelectItemInfo = null;
-        return true;
-      }
+  /**
+   * Check hitInfo is deselected Item through re-click
+   * @param hitInfo
+   * @returns {boolean}
+   */
+  isDeselectItem(hitInfo) {
+    return this.options.selectItem.useDeselectItem
+      && hitInfo?.maxIndex === this.defaultSelectItemInfo?.dataIndex
+      && hitInfo?.sId === this.defaultSelectItemInfo?.seriesID
+      && !isNaN(hitInfo?.maxIndex);
+  },
+
+  /**
+   * Get mouse click location (xAxis, yAxis, chartBackground, canvas)
+   * @param offset
+   * @returns {string}
+   */
+  getClickedLocation(offset) {
+    const [offsetX, offsetY] = offset;
+
+    const aPos = {
+      x1: this.chartRect.x1 + this.labelOffset.left,
+      x2: this.chartRect.x2 - this.labelOffset.right,
+      y1: this.chartRect.y1 + this.labelOffset.top,
+      y2: this.chartRect.y2 - this.labelOffset.bottom,
+    };
+    const xAxisStartPoint = aPos[this.axesX[0].units.rectStart];
+    const xAxisEndPoint = aPos[this.axesX[0].units.rectEnd];
+    const yAxisStartPoint = aPos[this.axesY[0].units.rectStart];
+    const yAxisEndPoint = aPos[this.axesY[0].units.rectEnd];
+
+    if (
+      inRange(offsetX, this.chartRect.x1, aPos.x1)
+      && inRange(offsetY, yAxisStartPoint, yAxisEndPoint)
+    ) {
+      return 'yAxis';
+    } else if (
+      inRange(offsetX, xAxisStartPoint, xAxisEndPoint)
+      && inRange(offsetY, aPos.y2, this.chartRect.y2)) {
+      return 'xAxis';
+    } else if (
+      inRange(offsetX, aPos.x1, aPos.x2)
+      && inRange(offsetY, aPos.y1, aPos.y2)) {
+      return 'chartBackground';
     }
-    return deselect;
+
+    return 'canvas';
+  },
+
+  /**
+   * Clear 'defaultSelectInfo'
+   */
+  clearSelectedLabelInfo() {
+    this.defaultSelectInfo = { dataIndex: [] };
+  },
+
+  /**
+   * Clear 'defaultSelectItemInfo'
+   */
+  clearSelectedItemInfo() {
+    this.defaultSelectItemInfo = null;
   },
 };
 

package/src/components/chart/scale/scale.step.js

@@ -69,13 +69,15 @@ class StepScale extends Scale {
 
   /**
    * Draw axis
-   * @param {object} chartRect      min/max information
-   * @param {object} labelOffset    label offset information
-   * @param {object} stepInfo       label steps information
+   * @param {object} chartRect  min/max information
+   * @param {object} labelOffset  label offset information
+   * @param {object} stepInfo  label steps information
+   * @param {object} hitInfo  legend Hit Info
+   * @param {object} selectedLabelInfo Selected Label Info
    *
    * @returns {undefined}
    */
-  draw(chartRect, labelOffset, stepInfo, hitInfo, selectLabelInfo) {
+  draw(chartRect, labelOffset, stepInfo, hitInfo, selectedLabelInfo) {
     const ctx = this.ctx;
     const labels = this.labels;
     const aPos = {
@@ -146,11 +148,24 @@ class StepScale extends Scale {
         linePosition = labelCenter + aliasPixel;
         labelText = this.getLabelFormat(item, maxWidth);
 
-        const isBlurredLabel = this.options?.selectLabel?.use
-          && this.options?.selectLabel?.useLabelOpacity
-          && (this.options.horizontal === (this.type === 'y'))
-          && selectLabelInfo?.dataIndex?.length
-          && !selectLabelInfo?.dataIndex?.includes(index);
+        const {
+          selectLabel: selectLabelOpt,
+          selectItem: selectItemOpt,
+          horizontal,
+        } = this.options;
+
+        let targetAxis;
+        if (selectedLabelInfo?.targetAxis) {
+          targetAxis = selectedLabelInfo?.targetAxis === 'yAxis' ? 'y' : 'x';
+        } else {
+          targetAxis = horizontal ? 'y' : 'x';
+        }
+
+        const isBlurredLabel = selectLabelOpt?.use
+          && selectLabelOpt?.useLabelOpacity
+          && targetAxis === this.type
+          && selectedLabelInfo?.dataIndex?.length
+          && !selectedLabelInfo?.dataIndex?.includes(index);
 
         const labelColor = this.labelStyle.color;
         let defaultOpacity = 1;
@@ -167,9 +182,9 @@ class StepScale extends Scale {
           ctx.fillText(labelText, xPoint, labelPoint);
 
           if (!isBlurredLabel
-            && this.options?.selectItem?.showLabelTip
+            && selectItemOpt?.showLabelTip
             && hitInfo?.label
-            && !this.options?.horizontal) {
+            && !horizontal) {
             const selectedLabel = hitInfo.label;
             if (selectedLabel === labelText) {
               const height = Math.round(ctx.measureText(this.labelStyle?.fontSize).width);
@@ -182,8 +197,8 @@ class StepScale extends Scale {
                 borderRadius: 2,
                 arrowSize: 3,
                 text: labelText,
-                backgroundColor: this.options?.selectItem?.labelTipStyle?.backgroundColor,
-                textColor: this.options?.selectItem?.labelTipStyle?.textColor,
+                backgroundColor: selectItemOpt?.labelTipStyle?.backgroundColor,
+                textColor: selectItemOpt?.labelTipStyle?.textColor,
               });
             }
           }

package/src/components/chart/uses.js

@@ -1,4 +1,12 @@
-import { ref, computed, getCurrentInstance, nextTick, reactive, onUpdated, watch } from 'vue';
+import {
+  ref,
+  reactive,
+  computed,
+  watch,
+  getCurrentInstance,
+  nextTick,
+  onUpdated,
+} from 'vue';
 import { cloneDeep, defaultsDeep, isEqual } from 'lodash-es';
 import { getQuantity } from '@/common/utils';
 import EvChartZoom from '@/components/chart/chartZoom.core';
@@ -162,6 +170,7 @@ const DEFAULT_OPTIONS = {
     },
     showTextTip: false,
     showIndicator: false,
+    useBothAxis: false,
   },
   selectSeries: {
     use: false,
@@ -228,7 +237,7 @@ const DEFAULT_DATA = {
   data: {},
 };
 
-export const useModel = (selectedLabel) => {
+export const useModel = (injectGroupSelectedLabel) => {
   const { props, emit } = getCurrentInstance();
 
   const getNormalizedOptions = (options) => {
@@ -252,32 +261,56 @@ export const useModel = (selectedLabel) => {
   const getNormalizedData = data => defaultsDeep(data, DEFAULT_DATA);
 
   const selectItemInfo = cloneDeep(props.selectedItem);
-  const selectLabelInfo = cloneDeep(props.selectedLabel ?? selectedLabel?.value);
+  const selectLabelInfo = cloneDeep(props.selectedLabel ?? injectGroupSelectedLabel?.value);
   const selectSeriesInfo = cloneDeep(props.selectedSeries);
 
   const eventListeners = {
     click: async (e) => {
       await nextTick();
-      if (e.label) {
-        let selectedItem = { seriesID: e.seriesId, dataIndex: e.dataIndex };
-        if ('deselect' in e) {
-          if (e.deselect) {
-            selectedItem = null;
+      const { seriesId, dataIndex, eventTarget, targetAxis } = e?.selected ?? {};
+      const { eventTarget: deselectedEventTarget } = e?.deselected ?? {};
+
+      switch (eventTarget) {
+        case 'item': {
+          if (seriesId !== null) {
+            emit('update:selectedItem', {
+              seriesID: seriesId,
+              dataIndex,
+            });
+            if (deselectedEventTarget === 'label') {
+              emit('update:selectedLabel', { dataIndex: [] });
+            }
+          } else {
+            emit('update:selectedItem', null);
           }
-          delete e.deselect;
+          break;
         }
-        emit('update:selectedItem', selectedItem);
-      }
-      if (e.selected?.dataIndex) {
-        if (selectedLabel?.value) {
-          selectedLabel.value.dataIndex = e.selected.dataIndex;
-        } else {
-          emit('update:selectedLabel', { dataIndex: e.selected.dataIndex });
+
+        case 'label': {
+          if (injectGroupSelectedLabel?.value) {
+            injectGroupSelectedLabel.value.dataIndex = dataIndex;
+          } else {
+            emit('update:selectedLabel', {
+              dataIndex,
+              targetAxis,
+            });
+
+            if (deselectedEventTarget === 'item') {
+              emit('update:selectedItem', null);
+            }
+          }
+          break;
         }
+
+        case 'series': {
+          emit('update:selectedSeries', { seriesId });
+          break;
+        }
+
+        default:
+          break;
       }
-      if (e.selected?.seriesId) {
-        emit('update:selectedSeries', { seriesId: e.selected.seriesId });
-      }
+
       emit('click', e);
     },
     'dbl-click': async (e) => {
@@ -332,8 +365,9 @@ export const useZoomModel = (
   evChartNormalizedOptions,
   { wrapper: evChartWrapper, evChartGroupRef },
   selectedLabelOrItem,
+  evChartPropsInGroup,
 ) => {
-  const { props, slots, emit } = getCurrentInstance();
+  const { props, emit } = getCurrentInstance();
 
   const isExecuteZoom = ref(false);
   const isUseZoomMode = ref(false);
@@ -393,23 +427,17 @@ export const useZoomModel = (
   };
 
   const createEvChartZoom = () => {
-    if (evChartGroupRef) {
+    if (evChartGroupRef?.value) {
       evChartInfo.dom = evChartGroupRef.value.querySelectorAll('.ev-chart-container');
 
-      let chartIdx = 0;
       if (evChartInfo.dom.length) {
-        slots.default(evChartInfo.dom).forEach(({ type, props: evChartProps }) => {
-          if (type?.name === 'EvChart') {
-            const { options, data } = evChartProps;
+        evChartPropsInGroup.value.forEach(({ data, options }, idx) => {
+          data.chartIdx = idx;
 
-            data.chartIdx = chartIdx;
-            chartIdx++;
+          evChartInfo.props.data.push(data);
+          evChartInfo.props.options.push(options);
 
-            evChartInfo.props.data.push(data);
-            evChartInfo.props.options.push(options);
-          } else if (type?.name === 'EvChartBrush') {
-            brushChartIdx.value.push(evChartProps?.options?.chartIdx ?? 0);
-          }
+          brushChartIdx.value.push(idx);
         });
       }
     } else {