evui 3.4.201 → 3.4.202

package/package.json

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

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

@@ -272,21 +272,24 @@ class EvChart {
       isReverseOrder ? jx-- : jx++
     ) {
       const series = this.seriesList[chartTypeSet[jx]];
-      if (this.options.realTimeScatter?.use) {
-        const seriesDatas = series.data[series.sId]?.dataGroup;
-        for (let i = 0; i < seriesDatas.length; i++) {
-          const dataItems = seriesDatas[i]?.data || [];
-          for (let j = 0; j < dataItems.length; j++) {
-            const item = dataItems[j];
+      const shouldInclude = !!series?.show;
+      if (shouldInclude) {
+        if (this.options.realTimeScatter?.use) {
+          const seriesDatas = series.data[series.sId]?.dataGroup;
+          for (let i = 0; i < seriesDatas.length; i++) {
+            const dataItems = seriesDatas[i]?.data || [];
+            for (let j = 0; j < dataItems.length; j++) {
+              const item = dataItems[j];
+              duple.set(`${item.x}${item.y}`, series.sId);
+            }
+          }
+        } else {
+          const seriesDatas = this.data.data[chartTypeSet[jx]] ?? [];
+          for (let i = 0; i < seriesDatas.length; i++) {
+            const item = seriesDatas[i];
             duple.set(`${item.x}${item.y}`, series.sId);
           }
         }
-      } else {
-        const seriesDatas = this.data.data[chartTypeSet[jx]] ?? [];
-        for (let i = 0; i < seriesDatas.length; i++) {
-          const item = seriesDatas[i];
-          duple.set(`${item.x}${item.y}`, series.sId);
-        }
       }
     }
   }
@@ -341,7 +344,7 @@ class EvChart {
       const chartType = chartKeys[ix];
       const chartTypeSet = this.seriesInfo.charts[chartType];
 
-      if (chartType === 'scatter') {
+      if (chartType === 'scatter' && this.options.coordinateDedupe) {
         this.collectDuplicatePoints(duple, chartTypeSet);
       }
 
@@ -435,6 +438,7 @@ class EvChart {
               legendHitInfo,
               selectInfo,
               duple,
+              coordinateDedupe: this.options.coordinateDedupe,
               ...opt,
             });
             break;

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

@@ -483,10 +483,7 @@ class HeatMap {
       const y1 = yp;
       const y2 = yp + h;
 
-      return ((x1 >= xsp && x1 <= xep) && (y1 >= ysp && y1 <= yep))
-         || ((x1 >= xsp && x1 <= xep) && (y2 >= ysp && y2 <= yep))
-         || ((x2 >= xsp && x2 <= xep) && (y1 >= ysp && y1 <= yep))
-        || ((x2 >= xsp && x2 <= xep) && (y2 >= ysp && y2 <= yep));
+      return ((x1 >= xsp && x2 <= xep) && (y1 >= ysp && y2 <= yep));
     });
   }
 
@@ -695,8 +692,8 @@ class HeatMap {
         y: { steps: yCurrentCount, min: yMin, max: yMax },
       } = this.currentLabelInfo;
 
-      const labelXCount = xCurrentCount || labelX.x.length;
-      const labelYCount = yCurrentCount || labelY.y.length;
+      const labelXCount = xCurrentCount || labelX.length;
+      const labelYCount = yCurrentCount || labelY.length;
       const gapX = (x2 - x1) / labelXCount;
       const gapY = (y2 - y1) / labelYCount;
 

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

@@ -112,14 +112,22 @@ class Scatter {
    * @returns {undefined}
    */
   defaultScatterDraw(param) {
-    const { ctx, axesSteps, duple, legendHitInfo } = param;
+    const { ctx, axesSteps, duple, legendHitInfo, coordinateDedupe } = param;
     const minmaxY = axesSteps.y[this.yAxisIndex];
 
     // Adjusted because Real Time Scatter is drawn from the back.
     for (let i = 0; i < this.data.length; i++) {
       const item = this.data[i];
       const idx = i;
-      const shouldDraw = legendHitInfo ? (legendHitInfo.sId === this.sId) : duple.get(`${item.x}${item.y}`) === this.sId;
+      const isDedupeOn = coordinateDedupe !== false;
+      let shouldDraw;
+      if (legendHitInfo) {
+        shouldDraw = (legendHitInfo.sId === this.sId);
+      } else if (isDedupeOn) {
+        shouldDraw = duple.get(`${item.x}${item.y}`) === this.sId;
+      } else {
+        shouldDraw = true;
+      }
 
       if (shouldDraw) {
         this.calcItem(item, param);
@@ -148,7 +156,7 @@ class Scatter {
    * @returns {undefined}
    */
   realTimeScatterDraw(param) {
-    const { ctx, axesSteps, duple, legendHitInfo } = param;
+    const { ctx, axesSteps, duple, legendHitInfo, coordinateDedupe } = param;
     const minmaxY = axesSteps.y[this.yAxisIndex];
     const pointStyle = typeof this.pointStyle === 'string' ? this.pointStyle : this.pointStyle.value;
     const pointSize = typeof this.pointSize === 'number' ? this.pointSize : this.pointSize.value;
@@ -157,7 +165,15 @@ class Scatter {
       for (let j = 0; j < this.data[this.sId]?.dataGroup[i]?.data.length; j++) {
         const item = this.data[this.sId]?.dataGroup[i]?.data[j];
 
-        const shouldDraw = legendHitInfo ? (legendHitInfo.sId === this.sId) : duple.get(`${item.x}${item.y}`) === this.sId;
+        const isDedupeOnRT = coordinateDedupe !== false;
+        let shouldDraw;
+        if (legendHitInfo) {
+          shouldDraw = (legendHitInfo.sId === this.sId);
+        } else if (isDedupeOnRT) {
+          shouldDraw = duple.get(`${item.x}${item.y}`) === this.sId;
+        } else {
+          shouldDraw = true;
+        }
 
         if (shouldDraw) {
           this.calcItem(item, param);

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

@@ -37,7 +37,22 @@ const modules = {
         if (tooltip.use && this.isInitTooltip) {
           this.drawItemsHighlight(hitInfo, ctx);
 
-          if (tooltip?.formatter?.html) {
+          if (typeof tooltip?.returnValue === 'function') {
+            const seriesList = [];
+            Object.keys(hitInfo.items).forEach((sId) => {
+              seriesList.push({
+                sId,
+                data: hitInfo.items[sId].data,
+                color: hitInfo.items[sId].color,
+                name: hitInfo.items[sId].name,
+                dataId: hitInfo.items[sId].id,
+                index: hitInfo.items[sId].index,
+              });
+            });
+
+            this.hideTooltipDOM();
+            tooltip.returnValue(seriesList, e);
+          } else if (tooltip?.formatter?.html) {
             this.drawCustomTooltip(hitInfo?.items);
             this.setCustomTooltipLayoutPosition(hitInfo, e);
           } else {
@@ -52,6 +67,10 @@ const modules = {
           }
         }
       } else if (tooltip.use && this.isInitTooltip) {
+        if (typeof tooltip?.returnValue === 'function') {
+          tooltip.returnValue([], e);
+        }
+
         this.hideTooltipDOM();
       }
 
@@ -88,7 +107,7 @@ const modules = {
      * @returns {undefined}
      */
 
-    this.onMouseLeave = () => {
+    this.onMouseLeave = (e) => {
       const { tooltip, dragSelection } = this.options;
 
       if (tooltip.throttledMove) {
@@ -100,6 +119,10 @@ const modules = {
       }
 
       if (tooltip.use && this.isInitTooltip) {
+        if (typeof tooltip?.returnValue === 'function') {
+          tooltip.returnValue([], e);
+        }
+
         this.tooltipClear();
       }
       this.listeners['mouse-leave']();

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

@@ -444,8 +444,12 @@ class Scale {
 
         const mergedPlotBandOpt = defaultsDeep({}, plotBand, PLOT_BAND_OPTION);
         const { from: userDefinedFrom, to: userDefinedTo, label: labelOpt } = mergedPlotBandOpt;
-        const from = userDefinedFrom ? Math.max(userDefinedFrom, axisMin) : axisMin;
-        const to = userDefinedTo ? Math.min(userDefinedTo, axisMax) : axisMax;
+        const from = !Util.isNullOrUndefined(userDefinedFrom)
+         ? Math.max(userDefinedFrom, axisMin)
+         : axisMin;
+        const to = !Util.isNullOrUndefined(userDefinedTo)
+          ? Math.min(userDefinedTo, axisMax)
+          : axisMax;
 
         this.setPlotBandStyle(mergedPlotBandOpt);
 

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

@@ -127,9 +127,6 @@ class TimeCategoryScale extends Scale {
     const stepValue = stepInfo.rawInterval;
     const oriSteps = stepInfo.oriSteps;
 
-    // 2개 이하일 경우, 첫번째와 마지막 라벨만 표시
-    const count = steps <= 2 ? oriSteps : Math.round(oriSteps / steps);
-
     let startPoint = aPos[this.units.rectStart];
     const endPoint = aPos[this.units.rectEnd];
     const offsetPoint = aPos[this.units.rectOffset(this.position)];
@@ -184,7 +181,19 @@ class TimeCategoryScale extends Scale {
     let labelText;
     let labelPoint;
     let ix;
-    const maxIndex = oriSteps === count ? oriSteps : oriSteps - 1;
+
+    // 2개 이하일 경우, 첫번째와 마지막 라벨만 표시
+    let count = steps <= 2 ? oriSteps : Math.round(oriSteps / steps);
+
+    // 첫번째 라벨이 축 시작점보다 오른쪽에 있을 경우, count를 1로 설정
+    // 추후 개선 필요: 근본적 문제는 라벨이 2개인 경우 oriSteps가 1로 와야하는데 2로 옴. horizontal일 때 예외처리 필요.
+    const isStartPointRightOfRectStart = startPoint > Math.ceil(aPos[this.units.rectStart]);
+    if (this.type === 'x' && isStartPointRightOfRectStart && count === oriSteps) {
+      count = 1;
+    }
+
+    const maxIndex = count === oriSteps ? oriSteps : oriSteps - 1;
+
     for (ix = 0; ix <= maxIndex; ix += count) {
       ticks[ix] = dayjs(axisMin).valueOf() + (ix * stepValue);
 
@@ -244,7 +253,11 @@ class TimeCategoryScale extends Scale {
             });
           }
         }
-        if ((ix !== 0 && ix < oriSteps && this.showGrid)) {
+        if (
+          ix < oriSteps && this.showGrid && (
+            isStartPointRightOfRectStart || (!isStartPointRightOfRectStart && ix !== 0)
+          )
+        ) {
           ctx.moveTo(linePosition, offsetPoint);
           ctx.lineTo(linePosition, offsetCounterPoint);
         }
@@ -252,7 +265,10 @@ class TimeCategoryScale extends Scale {
         labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
         ctx.fillText(labelText, labelPoint, labelCenter);
 
-        if ((ix !== 0 && ix < oriSteps && this.showGrid)) {
+        if (
+          ix < oriSteps && this.showGrid && (
+            isStartPointRightOfRectStart || (!isStartPointRightOfRectStart && ix !== 0)
+          )) {
           ctx.moveTo(offsetPoint, linePosition);
           ctx.lineTo(offsetCounterPoint, linePosition);
         }

package/src/components/chart/uses.js

@@ -246,6 +246,7 @@ const DEFAULT_OPTIONS = {
     decimalPoint: 0,
   },
   seriesReverse: false,
+  coordinateDedupe: true,
 };
 
 const DEFAULT_DATA = {

package/src/components/treeGrid/TreeGrid.vue

@@ -895,8 +895,8 @@ export default {
     );
     watch(
       () => [props.width, props.height, props.option.columnWidth],
-      (value) => {
-        resizeInfo.columnWidth = value[3];
+      () => {
+        if (props.option.columnWidth != null) resizeInfo.columnWidth = props.option.columnWidth;
         stores.orderedColumns.map((column) => {
           const item = column;