evui 3.3.13 → 3.3.14

package/package.json

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

package/src/components/chart/Chart.vue

@@ -24,6 +24,10 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         type: Object,
         default: null,
       },
+      selectedSeries: {
+        type: Object,
+        default: null,
+      },
       options: {
         type: Object,
         default: () => ({}),
@@ -43,6 +47,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
       'drag-select',
       'update:selectedItem',
       'update:selectedLabel',
+      'update:selectedSeries',
     ],
     setup(props) {
       let evChart = {};
@@ -52,6 +57,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         eventListeners,
         selectItemInfo,
         selectLabelInfo,
+        selectSeriesInfo,
         getNormalizedData,
         getNormalizedOptions,
       } = useModel();
@@ -67,13 +73,20 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
       );
 
       const createChart = () => {
+        let selected;
+        if (normalizedOptions.selectLabel.use) {
+          selected = selectLabelInfo;
+        } else if (normalizedOptions.selectSeries.use) {
+          selected = selectSeriesInfo;
+        }
+
         evChart = new EvChart(
           wrapper.value,
           normalizedData,
           normalizedOptions,
           eventListeners,
           selectItemInfo,
-          selectLabelInfo,
+          selected,
         );
       };
 
@@ -115,7 +128,13 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
 
         await watch(() => props.selectedLabel, (newValue) => {
           if (newValue.dataIndex) {
-            evChart.renderWithSelectLabel(newValue.dataIndex);
+            evChart.renderWithSelected(newValue.dataIndex);
+          }
+        }, { deep: true });
+
+        await watch(() => props.selectedSeries, (newValue) => {
+          if (newValue.seriesId) {
+            evChart.renderWithSelected(newValue.seriesId);
           }
         }, { deep: true });
       });

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

@@ -14,7 +14,7 @@ import Pie from './plugins/plugins.pie';
 import Tip from './element/element.tip';
 
 class EvChart {
-  constructor(target, data, options, listeners, defaultSelectItemInfo, defaultSelectLabelInfo) {
+  constructor(target, data, options, listeners, defaultSelectItemInfo, defaultSelectInfo) {
     Object.keys(Model).forEach(key => Object.assign(this, Model[key]));
     Object.assign(this, Title);
     Object.assign(this, Legend);
@@ -66,7 +66,7 @@ class EvChart {
     };
 
     this.defaultSelectItemInfo = defaultSelectItemInfo;
-    this.defaultSelectLabelInfo = defaultSelectLabelInfo;
+    this.defaultSelectInfo = defaultSelectInfo;
   }
 
   /**
@@ -93,7 +93,7 @@ class EvChart {
 
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
-    this.initSelectedLabelInfo();
+    this.initSelectedInfo();
 
     this.drawChart();
 
@@ -153,7 +153,7 @@ class EvChart {
    * @returns {undefined}
    */
   drawSeries(hitInfo) {
-    const { maxTip, selectLabel, selectItem } = this.options;
+    const { maxTip, selectLabel, selectItem, selectSeries } = this.options;
 
     const opt = {
       ctx: this.bufferCtx,
@@ -161,7 +161,8 @@ class EvChart {
       labelOffset: this.labelOffset,
       axesSteps: this.axesSteps,
       maxTipOpt: { background: maxTip.background, color: maxTip.color },
-      selectLabel: { option: selectLabel, selected: this.defaultSelectLabelInfo },
+      selectLabel: { option: selectLabel, selected: this.defaultSelectInfo },
+      selectSeries: { option: selectSeries, selected: this.defaultSelectInfo },
     };
 
     let showIndex = 0;
@@ -331,7 +332,7 @@ class EvChart {
         this.labelOffset,
         this.axesSteps.x[index],
         hitInfo,
-        this.defaultSelectLabelInfo);
+        this.defaultSelectInfo);
     });
 
     this.axesY.forEach((axis, index) => {
@@ -340,7 +341,7 @@ class EvChart {
         this.labelOffset,
         this.axesSteps.y[index],
         hitInfo,
-        this.defaultSelectLabelInfo);
+        this.defaultSelectInfo);
     });
   }
 
@@ -660,7 +661,7 @@ class EvChart {
     this.axesY = this.createAxes('y', options.axesY);
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
-    this.initSelectedLabelInfo();
+    this.initSelectedInfo();
 
     this.render(updateInfo?.hitInfo);
 

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

@@ -147,8 +147,6 @@ class Line {
       if (this.stackIndex) {
         const reversedDataList = this.data.slice().reverse();
         reversedDataList.forEach((curr, ix) => {
-          ctx.beginPath();
-
           x = getXPos(curr.x);
           y = getYPos(curr.b);
 

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

@@ -250,7 +250,7 @@ const modules = {
     const opt = this.options;
     const isHorizontal = !!opt.horizontal;
     const labelTipOpt = opt.selectLabel;
-    const { dataIndex, data, label } = this.defaultSelectLabelInfo;
+    const { dataIndex, data, label } = this.defaultSelectInfo;
     let drawTip = false;
 
     if (dataIndex.length) {

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

@@ -618,6 +618,101 @@ const modules = {
     };
   },
 
+  /**
+   * Find seriesId by position x and y
+   * @param {array}   offset          position x and y
+   *
+   * @returns {object} clicked series id
+   */
+  getSeriesIdByPosition(offset) {
+    const [clickedX, clickedY] = offset;
+    const chartRect = this.chartRect;
+    const labelOffset = this.labelOffset;
+    const aPos = {
+      x1: chartRect.x1 + labelOffset.left,
+      x2: chartRect.x2 - labelOffset.right,
+      y1: chartRect.y1 + labelOffset.top,
+      y2: chartRect.y2 - labelOffset.bottom,
+    };
+    const valueAxes = this.axesY[0];
+    const labelAxes = this.axesX[0];
+    const valueStartPoint = aPos[valueAxes.units.rectStart];
+    const valueEndPoint = aPos[valueAxes.units.rectEnd];
+    const labelStartPoint = aPos[labelAxes.units.rectStart];
+    const labelEndPoint = aPos[labelAxes.units.rectEnd];
+
+    const result = { sId: null };
+
+    if (clickedY > valueEndPoint && clickedY < valueStartPoint
+      && clickedX < labelEndPoint && clickedX > labelStartPoint) {
+      let hitSeries;
+      let positionList;
+      const hitItem = this.findHitItem(offset);
+      const hitSeriesList = Object.keys(hitItem.items);
+
+      switch (this.options.type) {
+        case 'line': {
+          const orderedSeriesList = this.seriesInfo.charts.line;
+          const isStackChart = Object.values(this.seriesList).some(({ stackIndex }) => stackIndex);
+
+          if (hitSeriesList.length) { // 클릭한 위치에 data 가 존재하는 경우
+            if (isStackChart) {
+              positionList = orderedSeriesList.filter(sId => hitSeriesList.includes(sId))
+                .map(sId => ({ sId, position: hitItem.items[sId]?.data?.yp }));
+              hitSeries = positionList.find(({ position }) => clickedY > position)?.sId;
+            } else {
+              hitSeries = Object.entries(hitItem.items).find(([, { hit }]) => hit)?.[0];
+            }
+          } else { // 클릭한 위치에 data 가 존재하지 않는 경우
+            const visibleSeriesList = orderedSeriesList.filter(sId => this.seriesList[sId].show);
+            positionList = visibleSeriesList.map(sId => ({
+              sId,
+              position: this.seriesList[sId].data?.map(({ xp, yp }) => [xp, yp]),
+            }));
+            const dataIndex = positionList[0].position?.findIndex(([xp]) => xp >= clickedX);
+            const vectorList = positionList.map(({ sId, position }) => ({
+              sId,
+              vector: { start: position[dataIndex - 1], end: position[dataIndex] },
+            }));
+
+            // canvas 의 클릭 위치값은 제 4 사분면의 위치이므로 clickedY, y1, y2 의 값은 음수를 취한다.
+            if (isStackChart) {
+              hitSeries = vectorList.find(({ vector }) => {
+                const [x1, y1] = vector.start;
+                const [x2, y2] = vector.end;
+                const v1 = [x2 - x1, y1 - y2];
+                const v2 = [x2 - clickedX, clickedY - y2];
+                const xp = v1[0] * v2[1] - v1[1] * v2[0];
+
+                return vector.start.every(v => typeof v === 'number')
+                  && vector.end.every(v => typeof v === 'number')
+                  && xp > 0;
+              })?.sId;
+            } else {
+              hitSeries = vectorList.find(({ vector }) => {
+                const [x1, y1] = vector.start;
+                const [x2, y2] = vector.end;
+                const a = (y1 - y2) / (x2 - x1);
+                const b = -1;
+                const c = -y1 - a * x1;
+                const distance = Math.abs(a * clickedX - b * clickedY + c)
+                  / Math.sqrt(a ** 2 + b ** 2);
+
+                return distance < 3;
+              })?.sId;
+            }
+          }
+          break;
+        }
+        default:
+          break;
+      }
+
+      result.sId = hitSeries;
+    }
+
+    return result;
+  },
   /**
    * Find label info by position x and y
    * @param {array}   offset          position x and y

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

@@ -144,15 +144,22 @@ const modules = {
           maxIndex: args.dataIndex,
           acc: args.acc,
         } = hitInfo);
-      }
-
-      if (this.options.selectLabel.use) {
+      } else if (this.options.selectLabel.use) {
         const offset = this.getMousePosition(e);
         const clickedLabelInfo = this.getLabelInfoByPosition(offset);
         const selected = this.selectLabel(clickedLabelInfo.labelIndex);
-        this.renderWithSelectLabel(selected.dataIndex);
+        this.renderWithSelected(selected.dataIndex);
+
+        args.selected = cloneDeep(this.defaultSelectInfo);
+      } else if (this.options.selectSeries.use) {
+        const offset = this.getMousePosition(e);
+        const hitInfo = this.getSeriesIdByPosition(offset);
+        if (hitInfo.sId !== null) {
+          const selected = this.selectSeries(hitInfo.sId);
+          this.renderWithSelected(selected.seriesId);
+        }
 
-        args.selected = cloneDeep(this.defaultSelectLabelInfo);
+        args.selected = cloneDeep(this.defaultSelectInfo);
       }
 
       if (typeof this.listeners.click === 'function') {
@@ -456,32 +463,51 @@ const modules = {
   },
 
   /**
-   * render after select label by index list
+   * render after selected label or selected series
    * @param indexList {array}  '[0, 1 ...]'
    */
-  renderWithSelectLabel(indexList) {
-    this.defaultSelectLabelInfo.dataIndex = indexList;
-    this.initSelectedLabelInfo();
+  renderWithSelected(list) {
+    if (this.options.selectLabel.use) {
+      this.defaultSelectInfo.dataIndex = list;
+    } else if (this.options.selectSeries.use) {
+      this.defaultSelectInfo.seriesId = list;
+    }
+    this.initSelectedInfo();
     this.render();
   },
 
   /**
-   * init defaultSelectLabelInfo object.
-   * (set each series data and label text)
+   * init defaultSelectInfo object.
+   * - at selectLabel using: set each series data and label text
+   * - at selectSeries using: set series state
    */
-  initSelectedLabelInfo() {
-    const { use, limit } = this.options.selectLabel;
-
-    if (use) {
-      if (!this.defaultSelectLabelInfo) {
-        this.defaultSelectLabelInfo = { dataIndex: [] };
+  initSelectedInfo() {
+    if (this.options.selectLabel.use) {
+      const { limit } = this.options.selectLabel;
+      if (!this.defaultSelectInfo) {
+        this.defaultSelectInfo = { dataIndex: [] };
       }
-      const infoObj = this.defaultSelectLabelInfo;
+      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: [] };
+      }
+
+      const selectedList = this.defaultSelectInfo.seriesId;
+      Object.values(this.seriesList).forEach((series) => {
+        if (!selectedList.length) {
+          series.state = 'normal';
+        } else if (selectedList.includes(series.sId)) {
+          series.state = 'highlight';
+        } else {
+          series.state = 'downplay';
+        }
+      });
     }
   },
 
@@ -492,7 +518,7 @@ const modules = {
    */
   selectLabel(labelIndex) {
     const option = this.options?.selectLabel ?? {};
-    const before = this.defaultSelectLabelInfo ?? { dataIndex: [] };
+    const before = this.defaultSelectInfo ?? { dataIndex: [] };
     const after = cloneDeep(before);
 
     if (before.dataIndex.includes(labelIndex)) {
@@ -512,6 +538,28 @@ const modules = {
     return after;
   },
 
+  selectSeries(seriesId) {
+    const option = this.options?.selectSeries ?? {};
+    const before = this.defaultSelectInfo ?? { seriesId: [] };
+    const after = cloneDeep(before);
+
+    if (before.seriesId.includes(seriesId)) {
+      const idx = before.seriesId.indexOf(seriesId);
+      after.seriesId.splice(idx, 1);
+    } else if (seriesId) {
+      after.seriesId.push(seriesId);
+      if (option.limit > 0 && option.limit < after.seriesId.length) {
+        if (option.useDeselectOverflow) {
+          after.seriesId.splice(0, 1);
+        } else {
+          after.seriesId.pop();
+        }
+      }
+    }
+
+    return after;
+  },
+
   /**
    * Find items by series within a range
    * @param {object} range  object for find series items

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

@@ -191,9 +191,13 @@ const modules = {
       }
       const nameDOM = targetDOM.getElementsByClassName('ev-chart-legend-name')[0];
       const targetId = nameDOM.series.sId;
+      const selectSeriesOption = this.options.selectSeries;
+      const selectedList = this.defaultSelectInfo?.seriesId ?? [];
 
       Object.values(this.seriesList).forEach((series) => {
-        series.state = series.sId === targetId ? 'highlight' : 'downplay';
+        series.state = series.sId === targetId
+        || (selectSeriesOption.use && selectedList.includes(targetId))
+          ? 'highlight' : 'downplay';
       });
 
       this.update({
@@ -209,8 +213,15 @@ const modules = {
      * @returns {undefined}
      */
     this.onLegendBoxLeave = () => {
+      const selectSeriesOption = this.options.selectSeries;
+      const selectedList = this.defaultSelectInfo?.seriesId ?? [];
       Object.values(this.seriesList).forEach((series) => {
-        series.state = 'normal';
+        if (selectSeriesOption.use && selectedList.length) {
+          series.state = selectedList.includes(series.sId)
+            ? 'highlight' : 'downplay';
+        } else {
+          series.state = 'normal';
+        }
       });
 
       this.update({

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

@@ -164,7 +164,7 @@ class Scale {
    *
    * @returns {undefined}
    */
-  draw(chartRect, labelOffset, stepInfo, hitInfo) {
+  draw(chartRect, labelOffset, stepInfo, hitInfo, selectLabelInfo) {
     const ctx = this.ctx;
     const options = this.options;
     const aPos = {
@@ -239,6 +239,13 @@ class Scale {
         linePosition = labelCenter + aliasPixel;
         labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
 
+        const isBlurredLabel = this.options?.selectLabel?.use
+          && this.options?.selectLabel?.useLabelOpacity
+          && (this.options.horizontal === (this.type === 'y'))
+          && selectLabelInfo?.dataIndex?.length
+          && !selectLabelInfo?.label
+            .map(t => this.getLabelFormat(Math.min(axisMax, t))).includes(labelText);
+
         const labelColor = this.labelStyle.color;
         let defaultOpacity = 1;
 
@@ -246,14 +253,17 @@ class Scale {
           defaultOpacity = Util.getOpacity(labelColor);
         }
 
-        ctx.fillStyle = Util.colorStringToRgba(labelColor, defaultOpacity);
+        ctx.fillStyle = Util.colorStringToRgba(labelColor, isBlurredLabel ? 0.1 : defaultOpacity);
 
         let labelPoint;
 
         if (this.type === 'x') {
           labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
           ctx.fillText(labelText, labelCenter, labelPoint);
-          if (options?.selectItem?.showLabelTip && hitInfo?.label && !this.options?.horizontal) {
+          if (!isBlurredLabel
+            && options?.selectItem?.showLabelTip
+            && hitInfo?.label
+            && !this.options?.horizontal) {
             const selectedLabel = this.getLabelFormat(
               Math.min(axisMax, hitInfo.label + (0 * stepValue)),
             );

package/src/components/chart/uses.js

@@ -94,6 +94,11 @@ const DEFAULT_OPTIONS = {
     useApproximateValue: false,
     tipBackground: '#000000',
   },
+  selectSeries: {
+    use: false,
+    limit: 1,
+    useDeselectOverflow: false,
+  },
   dragSelection: {
     use: false,
     keepDisplay: true,
@@ -145,6 +150,7 @@ export const useModel = () => {
 
   const selectItemInfo = cloneDeep(props.selectedItem);
   const selectLabelInfo = cloneDeep(props.selectedLabel);
+  const selectSeriesInfo = cloneDeep(props.selectedSeries);
 
   const eventListeners = {
     click: async (e) => {
@@ -152,9 +158,12 @@ export const useModel = () => {
       if (e.label) {
         emit('update:selectedItem', { seriesID: e.seriesId, dataIndex: e.dataIndex });
       }
-      if (e.selected) {
+      if (e.selected?.dataIndex) {
         emit('update:selectedLabel', { dataIndex: e.selected.dataIndex });
       }
+      if (e.selected?.seriesId) {
+        emit('update:selectedSeries', { seriesId: e.selected.seriesId });
+      }
       emit('click', e);
     },
     'dbl-click': async (e) => {
@@ -171,6 +180,7 @@ export const useModel = () => {
     eventListeners,
     selectItemInfo,
     selectLabelInfo,
+    selectSeriesInfo,
     getNormalizedData,
     getNormalizedOptions,
   };