evui 3.3.50 → 3.3.52

package/src/components/chart/Chart.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="zoomOptions.toolbar.show && !injectIsChartGroup"
+    v-if="zoomOptions.toolbar?.show && !injectIsChartGroup"
     ref="evChartToolbarRef"
   >
     <ev-chart-toolbar
@@ -79,6 +79,7 @@
       const injectBrushSeries = inject('brushSeries', { list: [], chartIdx: null });
       const injectGroupSelectedLabel = inject('groupSelectedLabel', null);
       const injectBrushIdx = inject('brushIdx', { start: 0, end: -1 });
+      const injectEvChartPropsInGroup = inject('evChartPropsInGroup', []);
 
       const {
         eventListeners,
@@ -110,10 +111,11 @@
         setDataForUseZoom,
         controlZoomIdx,
         onClickToolbar,
-      } = useZoomModel(
+      } = injectIsChartGroup ? {} : useZoomModel(
         normalizedOptions,
         { wrapper, evChartGroupRef: null },
         props.selectedLabel ? selectedLabel : selectedItem,
+        injectEvChartPropsInGroup,
       );
 
       const createChart = () => {
@@ -209,14 +211,14 @@
       }, { deep: true, flush: 'post' });
 
       watch(() => (injectGroupSelectedLabel?.value ?? selectedLabel.value), (newValue) => {
-        if (newValue.dataIndex) {
-          evChart.renderWithSelected(newValue.dataIndex);
+        if (newValue?.dataIndex) {
+          evChart.selectLabelByData(newValue.dataIndex, newValue?.targetAxis);
         }
       }, { deep: true, flush: 'post' });
 
       watch(() => props.selectedSeries, (newValue) => {
         if (newValue.seriesId) {
-          evChart.renderWithSelected(newValue.seriesId);
+          evChart.selectSeriesByData(newValue.seriesId);
         }
       }, { deep: true, flush: 'post' });
 
@@ -227,6 +229,10 @@
       }
 
       onMounted(async () => {
+        if (injectEvChartPropsInGroup?.value) {
+          injectEvChartPropsInGroup.value.push(props);
+        }
+
         await createChart();
         await drawChart();
       });
@@ -235,6 +241,10 @@
         if (evChart && 'destroy' in evChart) {
           evChart.destroy();
         }
+
+        if (injectEvChartPropsInGroup?.value?.length) {
+          injectEvChartPropsInGroup.value.length = 0;
+        }
       });
 
       onDeactivated(() => {
@@ -268,7 +278,7 @@
         injectIsChartGroup,
         onClickToolbar,
         normalizedOptions,
-        zoomOptions: toRef(evChartZoomOptions, 'zoom'),
+        zoomOptions: toRef(evChartZoomOptions ?? { zoom: {} }, 'zoom'),
       };
     },
   };

package/src/components/chart/chart.core.js

@@ -100,7 +100,7 @@ class EvChart {
     const { series, data, labels, groups } = this.data;
     const { type, axesX, axesY, tooltip, horizontal } = this.options;
 
-    this.createSeriesSet(series, type, horizontal);
+    this.createSeriesSet(series, type, horizontal, groups);
     if (groups.length) {
       this.addGroupInfo(groups);
     }
@@ -116,7 +116,7 @@ class EvChart {
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
 
-    this.initSelectedInfo?.();
+    this.initDefaultSelectInfo();
 
     this.drawChart();
 
@@ -161,7 +161,7 @@ class EvChart {
 
   /**
    * To draw canvas chart, it processes several sequential jobs
-   * @param {any} [hitInfo=undefined]    from mousemove callback (object or undefined)
+   * @param {any} [hitInfo=undefined]    from mousemove callback (object or object[] of undefined)
    *
    * @returns {undefined}
    */
@@ -186,7 +186,14 @@ class EvChart {
    * @returns {undefined}
    */
   drawSeries(hitInfo) {
-    const { maxTip, selectLabel, selectItem, selectSeries, brush, displayOverflow } = this.options;
+    const {
+      maxTip,
+      selectLabel,
+      selectItem,
+      selectSeries,
+      brush,
+      displayOverflow,
+    } = this.options;
 
     const opt = {
       ctx: this.bufferCtx,
@@ -196,6 +203,7 @@ class EvChart {
       maxTipOpt: { background: maxTip.background, color: maxTip.color },
       selectLabel: { option: selectLabel, selected: this.defaultSelectInfo },
       selectSeries: { option: selectSeries, selected: this.defaultSelectInfo },
+      selectItem: { option: selectItem, selected: this.defaultSelectItemInfo },
       overlayCtx: this.overlayCtx,
       isBrush: !!brush,
       displayOverflow,
@@ -231,21 +239,8 @@ class EvChart {
           case 'heatMap': {
             const legendHitInfo = hitInfo?.legend;
 
-            let selectInfo;
-            const defaultSelectInfo = this.defaultSelectItemInfo;
-            if (defaultSelectInfo?.dataIndex || defaultSelectInfo?.dataIndex === 0) {
-              selectInfo = { ...defaultSelectInfo };
-            } else {
-              selectInfo = null;
-            }
-
             series.draw({
               legendHitInfo,
-              selectInfo,
-              selectItem: {
-                option: selectItem,
-                selected: selectInfo,
-              },
               ...opt,
             });
             break;
@@ -702,7 +697,7 @@ class EvChart {
       this.seriesList = {};
       this.lastTip = { pos: null, value: null };
 
-      this.createSeriesSet(series, options.type, options.horizontal);
+      this.createSeriesSet(series, options.type, options.horizontal, groups);
 
       if (this.legendDOM) {
         this.updateLegend();
@@ -766,7 +761,7 @@ class EvChart {
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
 
-    this.initSelectedInfo?.();
+    this.initDefaultSelectInfo();
 
     this.render(updateInfo?.hitInfo);
 
@@ -930,6 +925,32 @@ class EvChart {
       this.tooltipDOM.style.display = 'none';
     }
   }
+
+  /**
+   * init defaultSelectInfo (for selectLabel, selectSeries options)
+   */
+  initDefaultSelectInfo() {
+    const {
+      type: chartType,
+      selectLabel,
+      selectSeries,
+    } = this.options;
+
+    if (selectLabel.use) {
+      let targetAxis = null;
+      if (chartType === 'heatMap' && selectLabel?.useBothAxis) {
+        targetAxis = this.defaultSelectInfo?.targetAxis;
+      }
+
+      this.defaultSelectInfo = !this.defaultSelectInfo?.dataIndex
+        ? { dataIndex: [], label: [], data: [] }
+        : this.getSelectedLabelInfoWithLabelData(this.defaultSelectInfo.dataIndex, targetAxis);
+    }
+
+    if (selectSeries.use && !this.defaultSelectInfo) {
+      this.defaultSelectInfo = { seriesId: [] };
+    }
+  }
 }
 
 export default EvChart;

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

@@ -1,7 +1,7 @@
 import { merge } from 'lodash-es';
+import { convertToPercent, truthy } from '@/common/utils';
 import Util from '../helpers/helpers.util';
 import { HEAT_MAP_OPTION } from '../helpers/helpers.constant';
-import { convertToPercent } from '../../../common/utils';
 
 class HeatMap {
   constructor(sId, opt, colorOpt, isHorizontal, isGradient) {
@@ -229,18 +229,28 @@ class HeatMap {
     this.size.h = yArea / this.labels.y.length;
 
     const getOpacity = (item, opacity, index) => {
-      const selectLabelOption = selectLabel?.option;
-      const useSelectLabel = selectLabelOption?.use && selectLabelOption?.useSeriesOpacity;
-      const selectItemOption = selectItem?.option;
-      const useSelectItem = selectItemOption?.use && selectItemOption?.useSeriesOpacity;
       if (!legendHitInfo) {
-        let isDownplay = false;
-        if (useSelectItem) {
-          isDownplay = selectItem?.selected && index !== selectItem?.selected?.dataIndex;
-        } else if (useSelectLabel) {
-          const selectedLabelList = selectLabel?.selected?.label;
-          isDownplay = selectedLabelList.length
-            && !selectedLabelList.includes(this.isHorizontal ? item.y : item.x);
+        let isDownplay;
+        const {
+          option: selectedItemOpt,
+          selected: selectedItem,
+        } = selectItem;
+
+        const {
+          option: selectedLabelOpt,
+          selected: selectedLabel,
+        } = selectLabel;
+
+        const isSelectedItem = truthy(selectedItem?.dataIndex) && selectedItem?.dataIndex > -1;
+        const isSelectedLabel = selectedLabel?.label?.length > 0;
+        if (isSelectedItem) {
+          isDownplay = selectedItemOpt.useSeriesOpacity
+            ? index !== selectedItem?.dataIndex
+            : false;
+        } else if (isSelectedLabel) {
+          isDownplay = selectedLabelOpt.useSeriesOpacity
+            ? !selectedLabel?.label?.includes(this.getItemLabel(selectLabel, item))
+            : false;
         }
         return isDownplay ? 0.1 : 1;
       }
@@ -608,6 +618,20 @@ class HeatMap {
 
     return selectionRange;
   }
+
+  getItemLabel(selectLabel, item) {
+    const {
+      option: selectedLabelOpt,
+      selected: selectedLabel,
+    } = selectLabel;
+
+    let targetLabel = this.isHorizontal ? item.y : item.x;
+    if (selectedLabelOpt?.useBothAxis && selectedLabel?.targetAxis) {
+      targetLabel = selectedLabel?.targetAxis === 'yAxis' ? item.y : item.x;
+    }
+
+    return targetLabel;
+  }
 }
 
 export default HeatMap;

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

@@ -292,7 +292,8 @@ const modules = {
 
       const seriesList = Object.keys(this.seriesList ?? {});
       const visibleSeries = seriesList.filter(sId => this.seriesList[sId].show);
-      const isExistGrp = seriesList.some(sId => this.seriesList[sId].isExistGrp);
+      const isExistGrp = seriesList
+          .some(sId => this.seriesList[sId].isExistGrp && !this.seriesList[sId].isOverlapping);
       const groups = this.data.groups?.[0] ?? [];
 
       let gp;

package/src/components/chart/model/model.series.js

@@ -11,11 +11,18 @@ const modules = {
    * @param {object}  series          chart series info
    * @param {string}  defaultType     default series type in options
    * @param {boolean} isHorizontal    determines if a horizontal option's value
+   * @param {object}  groups          group info
    *
    * @returns {undefined}
    */
-  createSeriesSet(series, defaultType, isHorizontal) {
-    Object.keys(series).forEach((key, index) => {
+  createSeriesSet(series, defaultType, isHorizontal, groups) {
+    let seriesKeys = Object.keys(series);
+
+    if (this.options.overlapping.use) {
+      seriesKeys = this.getOverlappingSeriesKeys(series, defaultType, groups);
+    }
+
+    seriesKeys.forEach((key, index) => {
       const type = series[key].type || defaultType;
       this.seriesList[key] = this.addSeries({
         type,
@@ -27,6 +34,30 @@ const modules = {
     });
   },
 
+  getOverlappingSeriesKeys(series, defaultType, groups) {
+    const barSeries = [];
+    const otherSeries = [];
+    const allGroups = groups.flat();
+
+    Object.keys(series).forEach((key) => {
+      const type = series[key].type || defaultType;
+      const isOverlappingBar = type === 'bar' && allGroups.length;
+
+      if (isOverlappingBar) {
+        const overlappingIdx = allGroups.findIndex(group => group === key);
+        barSeries.push({ key, overlappingIdx });
+      } else {
+        otherSeries.push({ key });
+      }
+    });
+
+    // 큰 값을 가지는 series가 먼저 그려지도록 groups에서 지정한 순서의 역순으로 정렬
+    barSeries.sort((a, b) => b.overlappingIdx - a.overlappingIdx);
+
+    return [...barSeries, ...otherSeries]
+        .map(({ key }) => key);
+  },
+
   /**
    * Takes series information to create series list.
    * @param {object} param   series info
@@ -79,6 +110,7 @@ const modules = {
         series.isExistGrp = true;
         series.bsId = prev;
         series.bsIds = group.filter((item, idx) => item !== curr && sIdx > idx);
+        series.isOverlapping = this.options.overlapping.use;
 
         if (!series.show) {
           interpolation--;

package/src/components/chart/model/model.store.js

@@ -48,7 +48,7 @@ const modules = {
             const sData = data[seriesID];
 
             if (series && sData) {
-              if (series.isExistGrp && series.stackIndex) {
+              if (series.isExistGrp && series.stackIndex && !series.isOverlapping) {
                 series.data = this.addSeriesStackDS(sData, label, series.bsIds, series.stackIndex);
               } else {
                 series.data = this.addSeriesDS(sData, label);
@@ -569,7 +569,7 @@ const modules = {
         }
       }
 
-      itemPosition = dataIndex.map((idx) => {
+      itemPosition = dataIndex?.map((idx) => {
         const dataInfo = this.getDataByValues(firShowSeriesID, idx);
 
         if (!dataInfo) {
@@ -700,7 +700,7 @@ const modules = {
    *
    * @returns {object} clicked series id
    */
-  getSeriesIdByPosition(offset) {
+  getSeriesInfoByPosition(offset) {
     const [clickedX, clickedY] = offset;
     const chartRect = this.chartRect;
     const labelOffset = this.labelOffset;
@@ -802,10 +802,11 @@ const modules = {
   /**
    * Find label info by position x and y
    * @param {array}   offset          position x and y
+   * @param {string | null}  targetAxis    target Axis Location ('xAxis', 'yAxis' , null)
    *
    * @returns {object} clicked label information
    */
-  getLabelInfoByPosition(offset) {
+  getLabelInfoByPosition(offset, targetAxis) {
     const [x, y] = offset;
     const aPos = {
       x1: this.chartRect.x1 + this.labelOffset.left,
@@ -814,12 +815,21 @@ const modules = {
       y2: this.chartRect.y2 - this.labelOffset.bottom,
     };
 
-    const seiresList = this.data.series;
-    const pointSize = Object.values(seiresList).sort(
+    const seriesList = this.data.series;
+    const pointSize = Object.values(seriesList).sort(
       (a, b) => b.pointSize ?? 0 - a.pointSize ?? 0,
     )[0]?.pointSize ?? 3; // default pointSize 3
     const { horizontal, selectLabel } = this.options;
-    const scale = horizontal ? this.axesY[0] : this.axesX[0];
+
+    let scale;
+    if (targetAxis === 'xAxis') {
+      scale = this.axesX[0];
+    } else if (targetAxis === 'yAxis') {
+      scale = this.axesY[0];
+    } else {
+      scale = horizontal ? this.axesY[0] : this.axesX[0];
+    }
+
     const startPoint = aPos[scale.units.rectStart];
     const endPoint = aPos[scale.units.rectEnd];
 
@@ -827,7 +837,8 @@ const modules = {
     let hitInfo;
     if (scale?.labels?.length) {
       const labelGap = (endPoint - startPoint) / scale.labels.length;
-      const index = Math.floor(((horizontal ? y : x) - startPoint) / labelGap);
+      const isYAxis = targetAxis === 'yAxis' || horizontal;
+      const index = Math.floor(((isYAxis ? y : x) - startPoint) / labelGap);
       labelIndex = scale.labels.length > index ? index : -1;
     } else {
       let offsetX;