evui 3.4.123 → 3.4.201

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

@@ -25,21 +25,23 @@ const modules = {
           seriesIDs.forEach((seriesID) => {
             const series = this.seriesList[seriesID];
             const sData = data[seriesID];
+            const passingValue = series?.passingValue;
 
             if (series && sData) {
               series.data = this.addSeriesDSforScatter(sData);
-              series.minMax = this.getSeriesMinMax(series.data);
+              series.minMax = this.getSeriesMinMax(series.data, passingValue);
             }
           });
         } else if (typeKey === 'heatMap') {
           seriesIDs.forEach((seriesID) => {
             const series = this.seriesList[seriesID];
+            const passingValue = series?.passingValue;
             const sData = data[seriesID];
 
             if (series && sData) {
               series.labels = label;
               series.data = this.addSeriesDSForHeatMap(sData);
-              series.minMax = this.getSeriesMinMax(series.data);
+              series.minMax = this.getSeriesMinMax(series.data, passingValue);
               series.valueOpt = this.getSeriesValueOptForHeatMap(series);
             }
           });
@@ -68,7 +70,7 @@ const modules = {
               } else {
                 series.data = this.addSeriesDS(sData, label, series.isExistGrp);
               }
-              series.minMax = this.getSeriesMinMax(series.data);
+              series.minMax = this.getSeriesMinMax(series.data, series.passingValue);
             }
           });
         }
@@ -408,17 +410,21 @@ const modules = {
     const isHorizontal = this.options.horizontal;
     const sdata = [];
 
-    const getBaseDataPosition = (baseIndex, dataIndex) => {
+    const getBaseDataPosition = (baseIndex, dataIndex, curr) => {
       const nextBaseSeriesIndex = baseIndex - 1;
       const baseSeries = this.seriesList[bsIds[baseIndex]];
       const baseDataList = baseSeries.data;
       const baseData = baseDataList[dataIndex];
       const position = isHorizontal ? baseData?.x : baseData?.y;
-      const isPassingValue = baseSeries.passingValue === baseData?.o;
 
-      if (isPassingValue || position == null || !baseSeries.show) {
+      const baseValue = baseData?.o;
+      const isPassingValue = !Util.isNullOrUndefined(baseSeries?.passingValue)
+      && baseSeries?.passingValue === baseValue;
+      const isSameSign = (curr >= 0 && baseValue >= 0) || (curr < 0 && baseValue < 0);
+
+      if (isPassingValue || position == null || !isSameSign || !baseSeries.show) {
         if (nextBaseSeriesIndex > -1) {
-          return getBaseDataPosition(nextBaseSeriesIndex, dataIndex);
+          return getBaseDataPosition(nextBaseSeriesIndex, dataIndex, curr);
         }
 
         return 0;
@@ -429,7 +435,7 @@ const modules = {
 
     data.forEach((curr, index) => {
       const baseIndex = bsIds.length - 1 < 0 ? 0 : bsIds.length - 1;
-      let bdata = getBaseDataPosition(baseIndex, index); // base(previous) series data
+      let bdata = getBaseDataPosition(baseIndex, index, curr); // base(previous) series data
       let odata = curr; // current series original data
       let ldata = label[index]; // label data
       let gdata = curr; // current series data which added previous series's value
@@ -582,30 +588,34 @@ const modules = {
     return data;
   },
 
-
   /**
    * Take series data to create min/max info for each series
    * @param {object}  data    series data
    *
    * @returns {object} min/max info for series
    */
-  getSeriesMinMax(data) {
+  getSeriesMinMax(data, passingValue) {
     const def = { minX: null, minY: null, maxX: null, maxY: null, maxDomain: null };
     const isHorizontal = this.options.horizontal;
 
     if (data.length) {
+      const usePassingValue = !Util.isNullOrUndefined(passingValue);
+
       return data.reduce((acc, p, index) => {
         const minmax = acc;
         const px = p.x?.value || p.x;
         const py = p.y?.value || p.y;
+        const po = p.o?.value || p.o;
 
-        if (px <= minmax.minX) {
+        if ((usePassingValue ? (po !== passingValue && px <= minmax.minX) : px <= minmax.minX)) {
           minmax.minX = (px === null) ? 0 : px;
         }
-        if (py <= minmax.minY) {
+
+        if ((usePassingValue ? (po !== passingValue && py <= minmax.minY) : py <= minmax.minY)) {
           minmax.minY = (py === null) ? 0 : py;
         }
-        if (px >= minmax.maxX) {
+
+        if ((usePassingValue ? (po !== passingValue && px >= minmax.maxX) : px >= minmax.maxX)) {
           minmax.maxX = (px === null) ? 0 : px;
 
           if (isHorizontal && px !== null) {
@@ -613,7 +623,8 @@ const modules = {
             minmax.maxDomainIndex = index;
           }
         }
-        if (py >= minmax.maxY) {
+
+        if ((usePassingValue ? (po !== passingValue && py >= minmax.maxY) : py >= minmax.maxY)) {
           minmax.maxY = (py === null) ? 0 : py;
 
           if (!isHorizontal && py !== null) {
@@ -1256,13 +1267,25 @@ const modules = {
               minmax.y[axisY].min = smm.minY;
             }
           }
-          if (smm.maxX >= minmax.x[axisX].max) {
+
+          const isExistGrp = this.seriesList[key].isExistGrp;
+          const maxXisNegative = minmax.x[axisX].max < 0;
+
+          if (isExistGrp && maxXisNegative) {
+            minmax.x[axisX].max = smm.maxX;
+            minmax.x[axisX].maxSID = key;
+          } else if (!minmax.x[axisX].max || smm.maxX >= minmax.x[axisX].max) {
             minmax.x[axisX].max = smm.maxX;
             minmax.x[axisX].maxSID = key;
           }
-          if (smm.maxY >= minmax.y[axisY].max) {
+
+          const maxYisNegative = minmax.y[axisY].max < 0;
+          if (isExistGrp && maxYisNegative) {
+            minmax.y[axisY].max = smm.maxY;
+            minmax.y[axisY].maxSID = key;
+          } else if (!minmax.y[axisY].max || smm.maxY >= minmax.y[axisY].max) {
             minmax.y[axisY].max = smm.maxY;
-            minmax.y[axisX].maxSID = key;
+            minmax.y[axisY].maxSID = key;
           }
         }
 

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

@@ -183,8 +183,7 @@ const modules = {
 
     let useLegendSeries = [];
     if (groups) {
-      useLegendSeries = groups.slice().reverse()
-        .filter(sId => this.seriesList[sId].showLegend)
+      useLegendSeries = groups.filter(sId => this.seriesList[sId].showLegend)
         .map(sId => [sId, this.seriesList[sId]]);
     } else {
       useLegendSeries = Object.entries(this.seriesList)
@@ -221,9 +220,8 @@ const modules = {
     }
   },
   /**
-   * Adds legends for each group in `groups` array, iterating through each series
-   * within the group in reverse order. This ensures the legends align with the series
-   * order as displayed in the chart. Only adds series with `showLegend` set to `true`.
+   * Adds legends for each group in `groups` array, iterating through each series within the group.
+   * Only adds series with `showLegend` set to `true`.
    *
    * @param {Array} groups - Array of groups containing series identifiers.
    * @param {Object} seriesList - Object containing all series, keyed by series ID.
@@ -232,7 +230,7 @@ const modules = {
    */
   addLegendForGroups(groups, seriesList, useTable) {
     groups.forEach((group) => {
-      group.slice().reverse().forEach((sId) => {
+      group.forEach((sId) => {
         const series = seriesList[sId];
         if (series && series.showLegend) {
           this.addLegendBasedOnType(series, useTable);

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

@@ -93,8 +93,8 @@ class Scale {
     }
 
     if (this.startToZero) {
-      minValue = 0;
-    }
+        minValue = 0;
+      }
 
     if (maxValue === minValue) {
       maxValue += 1;
@@ -138,6 +138,7 @@ class Scale {
 
   /**
    * With range information, calculate how many labels in axis
+   * linear type은 scale.linear.js에서 처리
    * @param {object} range    min/max information
    *
    * @returns {object} steps, interval, min/max graph value
@@ -339,6 +340,13 @@ class Scale {
           ctx.beginPath();
           ticks[ix] = axisMinForLabel + (ix * stepValue);
 
+          const isZeroLine = ticks[ix] === 0;
+          if (isZeroLine && this.zeroLineColor) {
+            ctx.strokeStyle = this.zeroLineColor;
+          } else {
+            ctx.strokeStyle = this.gridLineColor;
+          }
+
           linePosition = labelCenter + aliasPixel;
           labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]), {
             prev: ticks[ix - 1] ?? '',
@@ -435,15 +443,17 @@ class Scale {
         }
 
         const mergedPlotBandOpt = defaultsDeep({}, plotBand, PLOT_BAND_OPTION);
-        const { from, to, label: labelOpt } = mergedPlotBandOpt;
+        const { from: userDefinedFrom, to: userDefinedTo, label: labelOpt } = mergedPlotBandOpt;
+        const from = userDefinedFrom ? Math.max(userDefinedFrom, axisMin) : axisMin;
+        const to = userDefinedTo ? Math.min(userDefinedTo, axisMax) : axisMax;
 
         this.setPlotBandStyle(mergedPlotBandOpt);
 
         let fromPos;
         let toPos;
         if (this.type === 'x') {
-          fromPos = Canvas.calculateX(from ?? minX, axisMin, axisMax, xArea, minX);
-          toPos = Canvas.calculateX(to ?? maxX, axisMin, axisMax, xArea, minX);
+          fromPos = Canvas.calculateX(from, axisMin, axisMax, xArea, minX);
+          toPos = Canvas.calculateX(to, axisMin, axisMax, xArea, minX);
 
           if (fromPos === null || toPos === null) {
             return;
@@ -451,8 +461,8 @@ class Scale {
 
           this.drawXPlotBand(fromPos, toPos, minX, maxX, minY, maxY);
         } else {
-          fromPos = Canvas.calculateY(from ?? axisMin, axisMin, axisMax, yArea, maxY);
-          toPos = Canvas.calculateY(to ?? axisMax, axisMin, axisMax, yArea, maxY);
+          fromPos = Canvas.calculateY(from, axisMin, axisMax, yArea, maxY);
+          toPos = Canvas.calculateY(to, axisMin, axisMax, yArea, maxY);
 
           if (fromPos === null || toPos === null) {
             return;
@@ -478,8 +488,6 @@ class Scale {
         const mergedPlotLineOpt = defaultsDeep({}, plotLine, PLOT_LINE_OPTION);
         const { value, label: labelOpt } = mergedPlotLineOpt;
 
-        this.setPlotLineStyle(mergedPlotLineOpt);
-
         let dataPos;
         if (this.type === 'x') {
           dataPos = Canvas.calculateX(value, axisMin, axisMax, xArea, minX);
@@ -488,6 +496,7 @@ class Scale {
             return;
           }
 
+          this.setPlotLineStyle(mergedPlotLineOpt);
           this.drawXPlotLine(dataPos, minX, maxX, minY, maxY);
         } else {
           dataPos = Canvas.calculateY(value, axisMin, axisMax, yArea, maxY);
@@ -496,6 +505,7 @@ class Scale {
             return;
           }
 
+          this.setPlotLineStyle(mergedPlotLineOpt);
           this.drawYPlotLine(dataPos, minX, maxX, minY, maxY);
         }
 

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

@@ -25,15 +25,195 @@ class LinearScale extends Scale {
    * Calculate interval
    * @param {object} range    range information
    *
-   * @returns {number} interval
+   * @returns {number}  interval (한 칸에 표시할 값의 간격)
    */
   getInterval(range) {
+    if (this.interval) return this.interval;
+
     const max = range.maxValue;
     const min = range.minValue;
-    const step = range.maxSteps;
+    const steps = range.maxSteps;
+
+    // step이 0이면 interval 계산 불가
+    if (!steps || steps <= 0) return 0;
+
+    // startToZero이고, 최소값이 음수일 경우 0을 반드시 포함
+    if (this.startToZero && min < 0) {
+      const totalRange = Math.abs(min) + Math.abs(max);
+
+      // 비율로 나눔
+      const negativeRatio = Math.abs(min) / totalRange;
+      const positiveRatio = Math.abs(max) / totalRange;
+
+      // 각 방향에 최소 1칸 이상 배정되도록 보장
+      let negativeSteps = Math.max(1, Math.round(negativeRatio * steps));
+      let positiveSteps = Math.max(1, steps - negativeSteps);
+
+      // 다시 합이 steps보다 커질 수도 있으니, 조정
+      if (negativeSteps + positiveSteps > steps) {
+        // 가장 큰 쪽에서 하나 줄임
+        if (negativeRatio > positiveRatio) {
+          negativeSteps -= 1;
+        } else {
+          positiveSteps -= 1;
+        }
+      }
+
+      return Math.ceil(
+        Math.max(
+          Math.abs(min) / (negativeSteps || 1),
+          Math.abs(max) / (positiveSteps || 1),
+        ),
+      );
+    }
+    return Math.ceil((max - min) / steps);
+  }
+
+    /**
+   * With range information, calculate how many labels in axis
+   * @param {object} range    min/max information
+   *
+   * @returns {object} steps, interval, min/max graph value
+   */
+  calculateSteps(range) {
+    const { maxValue, minValue } = range;
+    let { maxSteps = 1 } = range;
+
+    let interval = this.getInterval(range);
+    let graphMin = 0;
+    let graphMax = 0;
+
+    // 그래프 최대/최소 값 계산
+    if (minValue >= 0) {
+      // 전부 양수
+      graphMin = +minValue;
+      graphMax = Math.ceil(maxValue / interval) * interval;
+    } else if (maxValue >= 0) {
+      // 양수/음수 혼합
+      graphMin = Math.floor(minValue / interval) * interval;
+      graphMax = Math.ceil(maxValue / interval) * interval;
+    } else {
+      // 전부 음수
+      graphMax = +maxValue;
+      graphMin = Math.floor(minValue / interval) * interval;
+    }
+
+    const graphRange = graphMax - graphMin;
+    let numberOfSteps = Math.round(graphRange / interval);
+
+    // 특수 케이스: 양수 최소값, 최대값이 1일 경우
+    if (minValue > 0 && maxValue === 1) {
+      if (!this.decimalPoint) {
+        interval = 1;
+        numberOfSteps = 1;
+        maxSteps = 1;
+      } else if (maxSteps > 2) {
+        interval = 0.2;
+        numberOfSteps = 5;
+        maxSteps = 5;
+      } else {
+        interval = 0.5;
+        numberOfSteps = 2;
+        maxSteps = 2;
+      }
+    }
 
-    return this.interval ? this.interval : Math.ceil((max - min) / step);
+    // 최대 스텝 수 조정
+    while (numberOfSteps > maxSteps) {
+      interval *= 2;
+      numberOfSteps = Math.round(graphRange / interval);
+      interval = Math.ceil(graphRange / numberOfSteps);
+    }
+
+    if (graphRange > (numberOfSteps * interval)) {
+      interval = Math.ceil(graphRange / numberOfSteps);
+    }
+
+    return {
+      steps: numberOfSteps,
+      interval,
+      graphMin,
+      graphMax,
+    };
   }
+
+    /**
+   * Calculate min/max value, label and size information for axis
+   * @param {object} minMax    min/max information
+   * @param {object} scrollbarOpt scrollbar option
+   *
+   * @returns {object} min/max value and label
+   */
+    calculateScaleRange(minMax, scrollbarOpt) {
+      let maxValue;
+      let minValue;
+      let isDefaultMaxSameAsMin = false;
+
+      const range = scrollbarOpt?.use ? scrollbarOpt?.range : this.range;
+      if (Array.isArray(range) && range?.length === 2) {
+        if (this.options.type === 'heatMap') {
+          maxValue = range[1] > +minMax.max ? +minMax.max : range[1];
+          minValue = range[0] < +minMax.min ? +minMax.min : range[0];
+        } else {
+          maxValue = range[1];
+          minValue = range[0];
+        }
+      } else if (typeof range === 'function') {
+        [minValue, maxValue] = range(minMax.min, minMax.max);
+      } else {
+        maxValue = minMax.max;
+        minValue = minMax.min;
+      }
+
+      // autoScaleRatio 적용 케이스
+      if (this.autoScaleRatio) {
+        const temp = maxValue;
+        // 양수 방향에만 autoScaleRatio 적용
+        maxValue = Math.ceil(maxValue * (this.autoScaleRatio + 1));
+
+        if (maxValue > 0 && minValue < 0) {
+          // 양수/음수 혼합 케이스 -- 음수 방향에도 maxValue 증가분만큼 더하기
+          const diff = temp - maxValue;
+          minValue += diff;
+        } else if (maxValue < 0 && minValue < 0) {
+          // 전부 음수 케이스 -- 음수 방향에도 autoScaleRatio 적용
+          minValue = Math.ceil(minValue * (this.autoScaleRatio + 1));
+        }
+      }
+
+      // 0 기준 축 설정 케이스
+      if (this.startToZero) {
+        if (minValue > 0) {
+          minValue = 0;
+        }
+
+        if (maxValue < 0) {
+          maxValue = 0;
+        }
+      }
+
+      if (maxValue === minValue) {
+        maxValue += 1;
+        isDefaultMaxSameAsMin = true;
+      }
+
+      const minLabel = this.getLabelFormat(minValue);
+      const maxLabel = this.getLabelFormat(maxValue, {
+        isMaxValueSameAsMin: isDefaultMaxSameAsMin,
+      });
+
+      return {
+        min: minValue,
+        max: maxValue,
+        minLabel,
+        maxLabel,
+        size: Util.calcTextSize(
+          maxLabel,
+          Util.getLabelStyle(this.labelStyle),
+          this.labelStyle?.padding,
+        ),
+      };
+    }
 }
 
 export default LinearScale;