evui 3.4.113 → 3.4.115

package/package.json

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

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

@@ -171,47 +171,53 @@ class EvChart {
     this.drawSyncedIndicator({ horizontal, label, mousePosition });
   }
 
-  adjustYAxisWidth() {
+  adjustXAndYAxisWidth() {
     // fitWidth(maxWidth에 넘을 시 말줄임표 들어가는 기능)을 사용중인 step Axis인 경우에는 적용 제외
-    const isStepAxisUseFitWidth = this.options.axesY?.some(axisY => axisY.type === 'step' && axisY.labelStyle?.fitWidth);
+    const isStepXAxisUseFitWidth = this.options.axesX?.some(axisX => axisX.type === 'step' && axisX.labelStyle?.fitWidth);
+    const isStepYAxisUseFitWidth = this.options.axesY?.some(axisY => axisY.type === 'step' && axisY.labelStyle?.fitWidth);
 
-    if (
-        !this.axesY?.length
-        || !this.axesRange?.y
-        || !this.axesSteps?.y?.length
-        || isStepAxisUseFitWidth
-    ) {
-      return;
-    }
+    const getNotFormattedLabels = (axesSteps) => {
+      const { interval, graphMin, graphMax, steps = 0 } = axesSteps ?? {};
+      let result = [];
 
-    let notFormattedLabels = [];
-    const { interval, graphMin, graphMax, steps = 0 } = this.axesSteps?.y[0] ?? {};
-    if (interval) {
-      for (let i = 0; i < steps; i++) {
-        notFormattedLabels.push(graphMin + (i * interval));
+      if (interval) {
+        result = Array.from({ length: steps }, (_, i) => graphMin + i * interval);
+        result.push(graphMax);
+      } else {
+        const { labels } = this.data;
+        result = labels?.y ?? labels ?? [];
       }
-      notFormattedLabels.push(graphMax);
-    } else {
-      notFormattedLabels = this.data.labels?.y ?? this.data.labels ?? [];
-    }
 
-    const yMaxWidth = this.axesY[0]?.getLabelWidthHasMaxLength(notFormattedLabels);
-    if (yMaxWidth > 0) {
-      const adjustedRange = {
-        x: this.axesRange.x,
-        y: this.axesRange.y.map(value => ({
-          ...value,
-          size: {
-            width: yMaxWidth,
-            height: value.size.height,
-          },
-        })),
-      };
+      return result;
+    };
 
-      this.labelOffset = this.getLabelOffset(adjustedRange);
-      this.labelRange = this.getAxesLabelRange();
-      this.axesSteps = this.calculateSteps();
-    }
+    const notFormattedXLabels = getNotFormattedLabels(this.axesSteps?.x[0]);
+    const notFormattedYLabels = getNotFormattedLabels(this.axesSteps?.y[0]);
+
+    const xMaxWidth = this.axesX[0]?.getLabelWidthHasMaxLength(notFormattedXLabels);
+    const yMaxWidth = this.axesY[0]?.getLabelWidthHasMaxLength(notFormattedYLabels);
+
+    const adjustedRange = {
+      x: !isStepXAxisUseFitWidth ? this.axesRange?.x?.map(value => ({
+        ...value,
+        size: {
+          width: Math.max(xMaxWidth, value.size.width),
+          height: value.size.height,
+        },
+      })) : this.axesRange?.x,
+      y: !isStepYAxisUseFitWidth ? this.axesRange?.y?.map(value => ({
+        ...value,
+        size: {
+          width: Math.max(yMaxWidth, value.size.width),
+          height: value.size.height,
+        },
+      })) : this.axesRange?.y,
+    };
+
+    this.axesRange = adjustedRange;
+    this.labelOffset = this.getLabelOffset(adjustedRange);
+    this.labelRange = this.getAxesLabelRange();
+    this.axesSteps = this.calculateSteps();
   }
 
   /**
@@ -228,7 +234,7 @@ class EvChart {
     this.labelRange = this.getAxesLabelRange();
     this.axesSteps = this.calculateSteps();
 
-    this.adjustYAxisWidth();
+    this.adjustXAndYAxisWidth();
 
     this.drawAxis(hitInfo);
     this.drawSeries(hitInfo);

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

@@ -34,7 +34,7 @@ class Line {
     this.size = {
       comboOffset: 0,
     };
-    this.usePassingValue = !isUndefined(this.passingValue) && this.interpolation === 'linear';
+    this.useLinearInterpolation = this.interpolation === 'linear' || (this.interpolation === 'none' && !!this.passingValue);
   }
 
   /**
@@ -129,7 +129,7 @@ class Line {
       let x = getXPos(curr.x);
       let y = getYPos(curr.y);
 
-      if (this.isExistGrp && this.usePassingValue && curr.o === this.passingValue) {
+      if (this.isExistGrp && this.useLinearInterpolation && curr.o === null) {
         y = getYPos(curr.b ?? 0);
       }
 
@@ -140,16 +140,14 @@ class Line {
       curr.xp = x;
       curr.yp = y;
 
-      if (this.usePassingValue && curr.o === this.passingValue) {
+      if (this.useLinearInterpolation && curr.o === null) {
         if (!this.isExistGrp) {
           return;
         }
       }
 
-      if ((isNil(prevValid?.y) && this.usePassingValue && this.passingValue !== prevValid?.o)
-        || (!this.usePassingValue && isNil(curr.o) && this.interpolation !== 'zero')
-        || (!this.usePassingValue && isNil(prevValid?.y))
-        || (isNil(curr.o) && curr.y == null && this.passingValue !== curr.o)) {
+      if ((isNil(prevValid?.y) && !this.isExistGrp)
+        || (!this.useLinearInterpolation && (isNil(prevValid?.y) || isNil(curr.o)))) {
         ctx.moveTo(x, y);
       } else {
         ctx.lineTo(x, y);
@@ -197,18 +195,17 @@ class Line {
       /** @type {Array<[number, number]>} */
       const needFillDataIndexList = [];
       for (let i = 0; i < valueArray.length + 1; i++) {
-        const isNoneInterpolation = this.interpolation === 'none' || (this.usePassingValue && this.passingValue !== null);
-
-        if (isNoneInterpolation ? isNil(valueArray[i]) : isUndefined(valueArray[i])) {
+        if ((this.useLinearInterpolation && isUndefined(valueArray[i]))
+          || (!this.useLinearInterpolation && isNil(valueArray[i]))) {
           if (start !== null && end !== null) {
             const temp = valueArray.slice(start, i);
             const lastNormalValueIndex = temp.findLastIndex(
-              item => !isNil(item) && item !== this.passingValue);
+              item => !isNil(item) && item !== null);
             needFillDataIndexList.push([start, start + lastNormalValueIndex]);
             start = null;
             end = null;
           }
-        } else if (this.usePassingValue && valueArray[i] === this.passingValue) {
+        } else if (this.useLinearInterpolation && valueArray[i] === null) {
           end = i;
         } else {
           start = start === null ? i : start;
@@ -232,7 +229,7 @@ class Line {
 
           if (ix === startIndex) {
             ctx.moveTo(currData.xp, currData.yp);
-          } else if (this.isExistGrp || this.passingValue !== currData.o || (this.interpolation === 'zero' && isNil(currData.o))) {
+          } else if (this.isExistGrp || currData.o !== null) {
             ctx.lineTo(currData.xp, currData.yp);
           }
 
@@ -257,14 +254,18 @@ class Line {
       ctx.strokeStyle = Util.colorStringToRgba(mainColor, mainColorOpacity);
       const focusStyle = Util.colorStringToRgba(pointFillColor, 1);
       const blurStyle = Util.colorStringToRgba(pointFillColor, pointFillColorOpacity);
+      const isLinearSingle = this.interpolation === 'linear' && this.data.filter(item => item.o !== null).length === 1;
 
       this.data.forEach((curr, ix) => {
-        if (curr.xp === null || curr.yp === null || curr.o === this.passingValue) {
+        if (curr.xp === null || curr.yp === null || curr.o === null) {
           return;
         }
 
-        const isSingle = this.interpolation === 'none' && Util.isNullOrUndefined(this.data[ix - 1]?.o)
-          && Util.isNullOrUndefined(this.data[ix + 1]?.o);
+        const prevData = this.data[ix - 1]?.o;
+        const nextData = this.data[ix + 1]?.o;
+
+        const isSingle = (!this.useLinearInterpolation && isNil(prevData) && isNil(nextData))
+          || isLinearSingle;
         const isSelectedLabel = selectedLabelIndexList.includes(ix);
         if (this.point || isSingle || isSelectedLabel) {
           ctx.fillStyle = isSelectedLabel && !legendHitInfo ? focusStyle : blurStyle;
@@ -291,7 +292,7 @@ class Line {
     const { xp, yp, o } = gdata;
 
     ctx.save();
-    if (xp !== null && yp !== null && o !== this.passingValue && this.pointHighlight) {
+    if (xp !== null && yp !== null && o !== null && this.pointHighlight) {
       ctx.strokeStyle = Util.colorStringToRgba(this.color, 0);
       ctx.fillStyle = Util.colorStringToRgba(this.color, this.highlight.maxShadowOpacity);
       Canvas.drawPoint(ctx, this.pointStyle, this.highlight.maxShadowSize, xp, yp);
@@ -403,7 +404,7 @@ class Line {
       }
     }
 
-    if (this.usePassingValue && item?.data?.o === this.passingValue) {
+    if (this.useLinearInterpolation && item?.data?.o === null) {
       item.data = null;
     }
 

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

@@ -46,17 +46,20 @@ const modules = {
         } else {
           seriesIDs.forEach((seriesID) => {
             const series = this.seriesList[seriesID];
-            const sData = data[seriesID];
-
+            const sData = data[seriesID].map((item) => {
+              if (series.interpolation === 'zero' && !item) {
+                return 0;
+              }
+              if (item === series.passingValue) {
+                return null;
+              }
+              return item;
+            });
             if (series && sData) {
               if (series.isExistGrp && series.stackIndex && !series.isOverlapping) {
-                series.data = this.addSeriesStackDS(
-                  sData, label, series.bsIds, series.stackIndex, series.interpolation,
-                );
+                series.data = this.addSeriesStackDS(sData, label, series.bsIds, series.stackIndex);
               } else {
-                series.data = this.addSeriesDS(
-                  sData, label, series.isExistGrp, series.interpolation,
-                );
+                series.data = this.addSeriesDS(sData, label, series.isExistGrp);
               }
               series.minMax = this.getSeriesMinMax(series.data);
             }
@@ -389,13 +392,12 @@ const modules = {
    * @param {object}  label   chart label
    * @param {array}   bsIds   stacked base data ID List
    * @param {number}  sIdx    series ordered index
-   * @param {import('./index').InterpolationType}  interpolation   interpolation type
    *
    * @typedef {import('./index').ChartSeriesDataPoint} ChartSeriesDataPoint
    *
    * @returns {ChartSeriesDataPoint[]} data for each series
    */
-  addSeriesStackDS(data, label, bsIds, sIdx = 0, interpolation = 'none') {
+  addSeriesStackDS(data, label, bsIds, sIdx = 0) {
     const isHorizontal = this.options.horizontal;
     const sdata = [];
 
@@ -443,7 +445,7 @@ const modules = {
           gdata = oData;
         }
 
-        sdata.push(this.addData(gdata, ldata, odata, bdata, interpolation));
+        sdata.push(this.addData(gdata, ldata, odata, bdata));
       }
     });
 
@@ -455,13 +457,12 @@ const modules = {
    * @param {object}  data    chart series info
    * @param {object}  label   chart label
    * @param {boolean}  isBase   is Base(bottommost) series at stack chart
-   * @param {import('./index').InterpolationType}  interpolation   interpolation type
    *
    * @typedef {import('./index').ChartSeriesDataPoint} ChartSeriesDataPoint
    *
    * @returns {ChartSeriesDataPoint[]} data for each series
    */
-  addSeriesDS(data, label, isBase, interpolation = 'none') {
+  addSeriesDS(data, label, isBase) {
     const isHorizontal = this.options.horizontal;
     const sdata = [];
     const passingValue = this.seriesList[Object.keys(this.seriesList)[0]]?.passingValue;
@@ -479,12 +480,7 @@ const modules = {
         const isPassingValueWithStack = isBase
           && !Util.isNullOrUndefined(passingValue)
           && gdata === passingValue;
-        sdata.push(this.addData(
-          isPassingValueWithStack ? 0 : gdata,
-          ldata,
-          gdata,
-          null,
-          interpolation,
+        sdata.push(this.addData(isPassingValueWithStack ? 0 : gdata, ldata, gdata,
         ));
       }
     });
@@ -535,13 +531,12 @@ const modules = {
    * @param {object}  ldata    label data (x-axis value for vertical chart)
    * @param {object}  odata    original data (without stacked value)
    * @param {object}  bdata    base data (stacked value)
-   * @param {import('./index').InterpolationType}  interpolation   interpolation type
    *
    * @typedef {import('./index').ChartSeriesDataPoint} ChartSeriesDataPoint
    *
    * @returns {ChartSeriesDataPoint} data for each graph point
    */
-  addData(gdata, ldata, odata = null, bdata = null, interpolation = 'none') {
+  addData(gdata, ldata, odata = null, bdata = null) {
     let data;
     let gdataValue = null;
     let odataValue = null;
@@ -554,7 +549,7 @@ const modules = {
       gdataColor = gdata.color;
       dataTextColor = gdata.textColor;
     } else {
-      gdataValue = interpolation === 'zero' && !gdata ? bdata ?? 0 : gdata ?? null;
+      gdataValue = gdata ?? null;
     }
 
     if (odata !== null && typeof odata === 'object') {

package/src/components/grid/Grid.vue

@@ -804,6 +804,7 @@ export default {
         index,
         hiddenDisplay: false,
         ...column,
+        width: isFinite(column.width) ? column.width : undefined,
         sortOption: {
           sortType: column?.sortOption?.sortType || 'init',
         },

package/src/components/treeGrid/TreeGrid.vue

@@ -451,6 +451,7 @@ export default {
         index,
         hiddenDisplay: false,
         ...column,
+        width: isFinite(column.width) ? column.width : undefined,
         sortOption: {
            sortType: column?.sortOption?.sortType || 'init',
         },