evui 3.4.129 → 3.4.131

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

@@ -1,6 +1,6 @@
 import { convertToPercent } from '@/common/utils';
 import debounce from '@/common/utils.debounce';
-import { inRange, isNil } from 'lodash-es';
+import { inRange } from 'lodash-es';
 import Canvas from '../helpers/helpers.canvas';
 import Util from '../helpers/helpers.util';
 
@@ -783,8 +783,8 @@ const modules = {
       y1: this.chartRect.y1 + this.labelOffset.top,
       y2: this.chartRect.y2 - this.labelOffset.bottom,
     };
-    const mouseXIp = 5; // mouseInterpolation - increased for better edge detection
-    const mouseYIp = 10;
+    const mouseXIp = 15; // mouseInterpolation - 더 넓은 범위에서 감지
+    const mouseYIp = 15; // Y축도 동일하게 증가
     const options = this.options;
 
     if (offsetX >= (graphPos.x1 - mouseXIp) && offsetX <= (graphPos.x2 + mouseXIp)
@@ -858,10 +858,18 @@ const modules = {
    *
    * @returns {undefined}
    */
-  drawSyncedIndicator({ horizontal, label, mousePosition, useAxisTrigger }) {
+  drawSyncedIndicator({ horizontal, label, mousePosition, dataLabel, isTooltipBased }) {
     if (!mousePosition || !!horizontal !== !!this.options.horizontal) {
       return;
     }
+
+    // tooltip 기반 동기화인 경우
+    if (isTooltipBased) {
+      this.drawSyncedIndicatorForTooltip({ dataLabel, mousePosition });
+      return;
+    }
+
+    // 기존 시간 기반 동기화
     if (
       this.options.syncHover === false
       || (!horizontal && !this.options.axesX.every(({ type }) => type === 'time'))
@@ -882,7 +890,6 @@ const modules = {
     }
 
     this.overlayClear();
-
     const graphPos = {
       x1: this.chartRect.x1 + this.labelOffset.left,
       x2: this.chartRect.x2 - this.labelOffset.right,
@@ -890,17 +897,7 @@ const modules = {
       y2: this.chartRect.y2 - this.labelOffset.bottom,
     };
 
-    if (useAxisTrigger && label) {
-      const matchIndex = this.data.labels?.findIndex(l => l?.valueOf() === label?.valueOf());
-      if (matchIndex >= 0) {
-        const seriesId = Object.keys(this.seriesList)?.[0];
-        const dataPoint = this.seriesList?.[seriesId]?.data?.[matchIndex];
-        if (dataPoint?.xp !== undefined && dataPoint?.xp !== null) {
-          const yPosition = !isNil(dataPoint.yp) ? dataPoint.yp : (graphPos.y1 + graphPos.y2) / 2;
-          this.drawIndicator([dataPoint.xp, yPosition], this.options.indicator.color);
-        }
-      }
-    } else if (horizontal) {
+    if (horizontal) {
       const chartHeight = graphPos.y2 - graphPos.y1;
       const offsetY = (chartHeight * (label - fromTime)) / (toTime - fromTime) + graphPos.y1;
       this.drawIndicator([graphPos.x2, offsetY], this.options.indicator.color);
@@ -911,6 +908,68 @@ const modules = {
     }
   },
 
+
+  /**
+   * 제공된 dataLabel과 일치하는 Label이 있다면 indicator를 그림
+   * @param {object} dataLabel   data label
+   * @param {object} mousePosition   mouse position
+   *
+   * @returns {undefined}
+   */
+  drawSyncedIndicatorForTooltip({ dataLabel, mousePosition }) {
+    if (!this.data?.labels || !dataLabel) {
+      return;
+    }
+
+    const matchingLabelIndex = this.data.labels.findIndex(
+      label => label?.valueOf() === dataLabel?.valueOf(),
+    );
+    if (matchingLabelIndex === -1) {
+      this.overlayClear();
+      return;
+    }
+
+    const { horizontal } = this.options;
+    const { top, bottom, left, right } = this.chartDOM.getBoundingClientRect();
+    const isHoveredChart = inRange(mousePosition[0], left, right)
+      && inRange(mousePosition[1], bottom, top);
+    if (isHoveredChart) {
+      return;
+    }
+
+    this.overlayClear();
+
+    const graphPos = {
+      x1: this.chartRect.x1 + this.labelOffset.left,
+      x2: this.chartRect.x2 - this.labelOffset.right,
+      y1: this.chartRect.y1 + this.labelOffset.top,
+      y2: this.chartRect.y2 - this.labelOffset.bottom,
+    };
+
+    const labelsCount = this.data.labels.length;
+    let indicatorPosition;
+
+    if (horizontal) {
+      const chartHeight = graphPos.y2 - graphPos.y1;
+      // CategoryMode인 경우 라벨들이 균등 간격으로 배치됨
+      const isCategoryMode = this.options.axesY?.some(axis => axis.categoryMode);
+      const positionY = isCategoryMode
+        ? graphPos.y1 + (chartHeight * (matchingLabelIndex + 0.5)) / labelsCount
+        : graphPos.y1 + (chartHeight * matchingLabelIndex) / (labelsCount - 1);
+      indicatorPosition = [graphPos.x2, positionY];
+    } else {
+      const chartWidth = graphPos.x2 - graphPos.x1;
+      // CategoryMode인 경우 라벨들이 균등 간격으로 배치됨
+      const isCategoryMode = this.options.axesX?.some(axis => axis.categoryMode);
+      const positionX = isCategoryMode
+        ? graphPos.x1 + (chartWidth * (matchingLabelIndex + 0.5)) / labelsCount
+        : graphPos.x1 + (chartWidth * matchingLabelIndex) / (labelsCount - 1);
+      indicatorPosition = [positionX, graphPos.y2];
+    }
+
+    this.drawIndicator(indicatorPosition, this.options.indicator.color);
+  },
+
   /**
    * Clear tooltip canvas
    *

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,7 +138,6 @@ 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
@@ -340,13 +339,6 @@ 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] ?? '',
@@ -443,17 +435,15 @@ 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, to, label: labelOpt } = mergedPlotBandOpt;
 
         this.setPlotBandStyle(mergedPlotBandOpt);
 
         let fromPos;
         let toPos;
         if (this.type === 'x') {
-          fromPos = Canvas.calculateX(from, axisMin, axisMax, xArea, minX);
-          toPos = Canvas.calculateX(to, axisMin, axisMax, xArea, minX);
+          fromPos = Canvas.calculateX(from ?? minX, axisMin, axisMax, xArea, minX);
+          toPos = Canvas.calculateX(to ?? maxX, axisMin, axisMax, xArea, minX);
 
           if (fromPos === null || toPos === null) {
             return;
@@ -461,8 +451,8 @@ class Scale {
 
           this.drawXPlotBand(fromPos, toPos, minX, maxX, minY, maxY);
         } else {
-          fromPos = Canvas.calculateY(from, axisMin, axisMax, yArea, maxY);
-          toPos = Canvas.calculateY(to, axisMin, axisMax, yArea, maxY);
+          fromPos = Canvas.calculateY(from ?? axisMin, axisMin, axisMax, yArea, maxY);
+          toPos = Canvas.calculateY(to ?? axisMax, axisMin, axisMax, yArea, maxY);
 
           if (fromPos === null || toPos === null) {
             return;

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

@@ -25,195 +25,15 @@ 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 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;
-      }
-    }
+    const step = range.maxSteps;
 
-    // 최대 스텝 수 조정
-    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,
-    };
+    return this.interval ? this.interval : Math.ceil((max - min) / step);
   }
-
-    /**
-   * 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;

package/src/components/chart/uses.js

@@ -90,7 +90,6 @@ const DEFAULT_OPTIONS = {
   combo: false,
   tooltip: {
     use: true,
-    trigger: 'axis',
     sortByValue: true,
     backgroundColor: '#4C4C4C',
     fontColor: '#FFFFFF',