evui 3.4.151 → 3.4.153

package/package.json

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

package/src/components/chart/Chart.vue

@@ -34,70 +34,71 @@
   import EvChartToolbar from './ChartToolbar';
   import { useModel, useWrapper, useZoomModel } from './uses';
 
-  export default {
-    name: 'EvChart',
-    components: {
-      EvChartToolbar,
+export default {
+  name: 'EvChart',
+  components: {
+    EvChartToolbar,
+  },
+  props: {
+    selectedItem: {
+      type: Object,
+      default: null,
     },
-    props: {
-      selectedItem: {
-        type: Object,
-        default: null,
-      },
-      selectedLabel: {
-        type: Object,
-        default: null,
-      },
-      selectedSeries: {
-        type: Object,
-        default: null,
-      },
-      options: {
-        type: Object,
-        default: () => ({}),
-      },
-      data: {
-        type: Object,
-        default: () => ({}),
-      },
-      resizeTimeout: {
-        type: Number,
-        default: 0,
-      },
-      zoomStartIdx: {
-        type: Number,
-        default: 0,
-      },
-      zoomEndIdx: {
-        type: Number,
-        default: 0,
-      },
-      realTimeScatterReset: {
-        type: Boolean,
-        default: false,
-      },
+    selectedLabel: {
+      type: Object,
+      default: null,
     },
-    emits: [
-      'click',
-      'dbl-click',
-      'drag-select',
-      'mouse-move',
-      'update:selectedItem',
-      'update:selectedLabel',
-      'update:selectedSeries',
-      'update:zoomStartIdx',
-      'update:zoomEndIdx',
-      'update:realTimeScatterReset',
-    ],
-    setup(props, { emit }) {
-      let evChart = null;
-      const isMounted = ref(false);
-      const injectIsChartGroup = inject('isChartGroup', false);
-      const injectBrushSeries = inject('brushSeries', { list: [], chartIdx: null });
-      const injectGroupSelectedLabel = inject('groupSelectedLabel', null);
-      const injectGroupHoveredLabel = inject('groupHoveredLabel', null);
-      const injectBrushIdx = inject('brushIdx', { start: 0, end: -1 });
-      const injectEvChartPropsInGroup = inject('evChartPropsInGroup', []);
+    selectedSeries: {
+      type: Object,
+      default: null,
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    resizeTimeout: {
+      type: Number,
+      default: 0,
+    },
+    zoomStartIdx: {
+      type: Number,
+      default: 0,
+    },
+    zoomEndIdx: {
+      type: Number,
+      default: 0,
+    },
+    realTimeScatterReset: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    'click',
+    'dbl-click',
+    'drag-select',
+    'mouse-move',
+    'update:selectedItem',
+    'update:selectedLabel',
+    'update:selectedSeries',
+    'update:zoomStartIdx',
+    'update:zoomEndIdx',
+    'update:realTimeScatterReset',
+    'click-legend',
+  ],
+  setup(props, { emit }) {
+    let evChart = null;
+    const isMounted = ref(false);
+    const injectIsChartGroup = inject('isChartGroup', false);
+    const injectBrushSeries = inject('brushSeries', { list: [], chartIdx: null });
+    const injectGroupSelectedLabel = inject('groupSelectedLabel', null);
+    const injectGroupHoveredLabel = inject('groupHoveredLabel', null);
+    const injectBrushIdx = inject('brushIdx', { start: 0, end: -1 });
+    const injectEvChartPropsInGroup = inject('evChartPropsInGroup', []);
 
       const {
         eventListeners,
@@ -269,9 +270,12 @@
 
           emit('update:realTimeScatterReset', false);
         }
-      });
+      },
+    );
 
-      watch(() => props.options.realTimeScatter?.use, (use) => {
+    watch(
+      () => props.options.realTimeScatter?.use,
+      (use) => {
         evChart.options.realTimeScatter.use = use ?? false;
 
         evChart.update({

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

@@ -127,6 +127,10 @@ class EvChart {
     this.axesX = this.createAxes('x', axesX);
     this.axesY = this.createAxes('y', axesY);
 
+    if (axesX?.[0]?.scrollbar?.use || axesY?.[0]?.scrollbar?.use) {
+      this.initScrollbar();
+    }
+
     this.initDefaultSelectInfo();
 
     this.drawChart();
@@ -162,10 +166,6 @@ class EvChart {
       this.setLegendPosition();
     }
 
-    if (opt.axesX?.[0]?.scrollbar?.use || opt.axesY?.[0]?.scrollbar?.use) {
-      this.initScrollbar();
-    }
-
     this.chartRect = this.getChartRect();
   }
 
@@ -277,7 +277,6 @@ class EvChart {
     this.drawSeries(hitInfo);
 
     if (this.scrollbar?.x?.use || this.scrollbar?.y?.use) {
-      this.initScrollbar();
       this.updateScrollbarPosition();
     }
 
@@ -852,6 +851,21 @@ class EvChart {
     return labelOffset;
   }
 
+  /**
+   * Update scrollbar information
+   * @param {boolean} updateData is update data
+   * @returns {undefined}
+   */
+  updateScrollbar(updateData) {
+    if (this.scrollbar?.x?.isInit || this.options.axesX?.[0]?.scrollbar?.use) {
+      this.updateScrollbarInfo('x', updateData);
+    }
+
+    if (this.scrollbar?.y?.isInit || this.options.axesY?.[0]?.scrollbar?.use) {
+      this.updateScrollbarInfo('y', updateData);
+    }
+  }
+
   /**
    * To re-render chart, reset properties, canvas and then render chart.
    * @param {object} updateInfo   information for each components are needed to update
@@ -871,7 +885,6 @@ class EvChart {
       updateLegend,
       updateData,
       updateTooltip,
-      updateByScrollbar,
       lightUpdate,
     } = updateInfo;
 
@@ -879,9 +892,7 @@ class EvChart {
       return;
     }
 
-    if (updateByScrollbar) {
-      this.updateScrollbar?.(updateData);
-    }
+    this.updateScrollbar(updateData);
 
     this.resetProps();
 
@@ -992,7 +1003,6 @@ class EvChart {
 
     this.initDefaultSelectInfo();
 
-
     let renderHitInfo = updateInfo?.hitInfo;
     if (!renderHitInfo?.legend && this.legendHover?.sId) {
       renderHitInfo = { ...(renderHitInfo || {}), legend: this.legendHover };
@@ -1065,20 +1075,16 @@ class EvChart {
    * @returns {undefined}
    */
   resize(promiseRes) {
-    // 차트 크기가 변경될 때 저장된 스크롤 픽셀 위치를 초기화하여
-    // 새로운 크기에 맞춰 스크롤바 크기/위치를 재계산하도록 함
-    if (this.scrollbar?.x) {
-      delete this.scrollbar.x.savedPosition;
-    }
-    if (this.scrollbar?.y) {
-      delete this.scrollbar.y.savedPosition;
-    }
-
     this.clear();
     this.bufferCtx.restore();
     this.bufferCtx.save();
 
     this.initRect();
+
+    if (this.options.axesX?.[0]?.scrollbar?.use || this.options.axesY?.[0]?.scrollbar?.use) {
+      this.initScrollbar();
+    }
+
     this.initScale();
     this.chartRect = this.getChartRect();
     this.drawChart();

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

@@ -1018,8 +1018,11 @@ const modules = {
     const isHorizontal = !!this.options.horizontal;
     const mousePos = isHorizontal ? yp : xp;
 
-    // 첫 번째 표시 중인 시리즈를 기준으로 라벨 위치 확인
-    const referenceSeries = sIds.find(sId => this.seriesList[sId]?.show);
+    // 데이터 있는 시리즈를 기준으로 라벨 위치 확인
+    const referenceSeries = sIds.find((sId) => {
+      const series = this.seriesList[sId];
+      return series?.show && series?.data?.length > 0;
+    });
     if (!referenceSeries || !this.seriesList[referenceSeries]?.data) {
       return -1;
     }

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

@@ -542,10 +542,28 @@ const modules = {
         this.brushSeries.chartIdx = chartIdx;
       }
 
-      this.update({
-        updateSeries: false,
-        updateSelTip: { update: true, keepDomain: true },
-      });
+      if (this.options.eventBehavior?.legendClick !== 'emitOnly') {
+        this.update({
+          updateSeries: false,
+          updateSelTip: { update: true, keepDomain: true },
+        });
+      }
+
+      // click-legend event 발생
+      const activeSeries = Object.values(this.seriesList).filter(series => series.show);
+      const activeSeriesIds = activeSeries.map(series => series.sId);
+      const isActiveAll = activeSeriesIds.length === Object.values(this.seriesList).length;
+      const args = {
+        e,
+        data: {
+          seriesIds: isActiveAll ? [] : activeSeriesIds,
+          isActiveAll,
+        },
+      };
+
+      if (typeof this.listeners['click-legend'] === 'function') {
+        this.listeners['click-legend'](args);
+      }
     };
 
     /**
@@ -750,10 +768,28 @@ const modules = {
         }
       }
 
-      this.update({
-        updateSeries: false,
-        updateSelTip: { update: true, keepDomain: true },
-      });
+      if (this.options.eventBehavior?.legendClick !== 'emitOnly') {
+        this.update({
+          updateSeries: false,
+          updateSelTip: { update: true, keepDomain: true },
+        });
+      }
+
+      // click-legend event 발생
+      const activeSeries = series.colorState.filter(colorItem => colorItem.show);
+      const activeSerieIndices = activeSeries.map(colorItem => +colorItem.id.split('#')[1]);
+      const isActiveAll = series.colorState.length === activeSeries.length;
+      const args = {
+        e,
+        data: {
+          seriesIndices: isActiveAll ? [] : activeSerieIndices,
+          isActiveAll,
+        },
+      };
+
+      if (typeof this.listeners['click-legend'] === 'function') {
+        this.listeners['click-legend'](args);
+      }
     };
 
     /**

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

@@ -29,6 +29,8 @@ const module = {
       scrollbarOpt[key] = merged[key];
     });
 
+    delete scrollbarOpt.savedPosition;
+
     if (!scrollbarOpt.isInit) {
       scrollbarOpt.type = axisOpt?.[0]?.type;
       scrollbarOpt.range = axisOpt?.[0]?.range?.length ? [...axisOpt?.[0]?.range] : null;
@@ -83,14 +85,6 @@ const module = {
     }
   },
 
-  /**
-   * update scrollbar information
-   */
-  updateScrollbar(updateData) {
-    this.updateScrollbarInfo('x', updateData);
-    this.updateScrollbarInfo('y', updateData);
-  },
-
   /**
    * Updated scrollbar information with updated axis information
    * @param dir axis direction (x | y)
@@ -449,7 +443,6 @@ const module = {
       this.update({
         updateSeries: false,
         updateSelTip: { update: false, keepDomain: false },
-        updateByScrollbar: true,
         lightUpdate: minValue > 1,
       });
     }

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

@@ -11,7 +11,8 @@ class LinearScale extends Scale {
    * @returns {string} formatted label
    */
   getTruthyValue(value) {
-    return truthyNumber(value) ? Number(value.toFixed(this.decimalPoint)) : value;
+    const decimalPoint = this.adjustedDecimalPoint ?? this.decimalPoint;
+    return truthyNumber(value) ? Number(value.toFixed(decimalPoint)) : value;
   }
 
   getLabelFormat(value, data = {}) {
@@ -31,8 +32,8 @@ class LinearScale extends Scale {
       }
     }
 
-
-    return Util.labelSignFormat(value, this.decimalPoint);
+    const decimalPoint = this.adjustedDecimalPoint ?? this.decimalPoint;
+    return Util.labelSignFormat(value, decimalPoint);
   }
 
 
@@ -58,41 +59,171 @@ class LinearScale extends Scale {
     return Math.ceil((max - min) / step);
   }
 
-    /**
-   * Get decimal point from range
-   * @param {object} {
-   *  graphRange: number,
-   *  numberOfSteps: number,
-   *  interval: number,
-   * }
+
+  /**
+   * Get auto decimal point from interval
+   * interval을 표현할 수 있는 최소 decimal 반환
+   * 너무 긴 decimal은 제한
+   * @param {number} interval
    * @returns {number} decimal point
    */
-  getDecimalPointFromRange({
-    graphRange,
-    numberOfSteps,
-  }) {
-    if (numberOfSteps <= 0 || graphRange === 0) {
+  getAutoDecimalPointFromInterval(interval) {
+    if (!isFinite(interval) || interval === 0) {
       return 0;
     }
 
-    const interval = graphRange / numberOfSteps;
-    if (interval === 0) {
+    const absInterval = Math.abs(interval);
+
+    // 1 미만 값 처리 (소수점 최대 10자리 제한)
+    if (absInterval < 1) {
+      let decimals = 0;
+      let temp = absInterval;
+
+      while (temp < 1) {
+        temp *= 10;
+        decimals++;
+
+        if (decimals > 10) {
+          break;
+        }
+      }
+
+      return decimals;
+    }
+
+    // 1 이상 값 처리 (소수점 최대 2자리 제한)
+    for (let decimal = 0; decimal <= 6; decimal++) {
+      const rounded = Number(absInterval.toFixed(decimal));
+
+      if (Math.abs(rounded - absInterval) < 1e-10) {
+        return Math.min(decimal, 2);
+      }
+    }
+
+    return 2;
+  }
+
+  /**
+   * axis interval을 nice number로 변환
+   * (1, 2, 5 × 10^n)
+   *
+   * @param {Object} params
+   * @param {number} params.range
+   * @param {boolean} params.round
+   * @returns {number}
+   */
+  getNiceNumber({ range, round = false }) {
+    if (!isFinite(range) || range <= 0) {
       return 0;
     }
 
-    let decimals = 0;
-    let temp = interval;
+    const exponent = Math.floor(Math.log10(range));
+    const fraction = range / (10 ** exponent);
+
+    let niceFraction;
 
-    while (temp < 1) {
-      temp *= 10;
-      decimals++;
+    if (round) {
+      if (fraction < 1.5) {
+        niceFraction = 1;
+      } else if (fraction < 3) {
+        niceFraction = 2;
+      } else if (fraction < 7) {
+        niceFraction = 5;
+      } else {
+        niceFraction = 10;
+      }
+    } else if (fraction <= 1) {
+      niceFraction = 1;
+    } else if (fraction <= 2) {
+      niceFraction = 2;
+    } else if (fraction <= 5) {
+      niceFraction = 5;
+    } else {
+      niceFraction = 10;
+    }
+
+    return niceFraction * (10 ** exponent);
+  }
 
-      if (decimals > 10) {
-        break;
+  /**
+   * 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 { minValue, maxValue } = range;
+    const maxSteps = Math.max(1, range.maxSteps);
+
+    const hasUserRange = Array.isArray(this.range) && this.range.length === 2;
+    const hasUserInterval = (
+      typeof this.interval === 'number'
+      || (typeof this.interval === 'object' && this.interval !== null)
+    );
+
+    const resolvedInterval = hasUserInterval ? this.getInterval(range) : null;
+    const isValidInterval = (
+      resolvedInterval != null
+      && resolvedInterval > 0
+      && isFinite(resolvedInterval)
+    );
+
+    const graphMin = +minValue;
+    let graphMax = +maxValue;
+    const graphRange = graphMax - graphMin;
+
+    let interval;
+    let steps;
+
+    if (hasUserRange && isValidInterval) {
+      // 1) user range + interval
+      const candidateSteps = graphRange / resolvedInterval;
+      const isExactlyDividable = Math.abs(candidateSteps - Math.round(candidateSteps)) < 1e-10;
+
+      if (isExactlyDividable && candidateSteps <= maxSteps) {
+        interval = resolvedInterval;
+        steps = Math.round(candidateSteps);
+      } else {
+        // interval 호환되지 않음 -> 사용자 interval을 사용하지 않음
+        steps = maxSteps;
+        interval = graphRange / steps;
+      }
+    } else if (hasUserRange) {
+      // 2) user range only
+      steps = maxSteps;
+      interval = graphRange / steps;
+    } else if (isValidInterval) {
+      // 3) user interval only
+      interval = resolvedInterval;
+      steps = Math.ceil(graphRange / interval);
+
+      while (steps > maxSteps) {
+        interval *= 2;
+        steps = Math.ceil(graphRange / interval);
       }
+
+      graphMax = graphMin + (interval * steps);
+    } else {
+      // 4) auto
+      interval = this.getNiceNumber({
+        range: graphRange / maxSteps,
+        round: true,
+      });
+
+      steps = Math.ceil(graphRange / interval);
+      graphMax = graphMin + (interval * steps);
     }
 
-    return decimals;
+    this.adjustedDecimalPoint = this.decimalPoint === 'auto'
+      ? this.getAutoDecimalPointFromInterval(interval)
+      : this.decimalPoint;
+
+    return {
+      steps,
+      interval,
+      graphMin,
+      graphMax,
+    };
   }
 }
 

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

@@ -44,6 +44,100 @@ class TimeScale extends Scale {
     }
     return Math.ceil((max - min) / step);
   }
+
+  /**
+   * 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, maxSteps } = range;
+
+    // 사용자 interval로 인식하는 경우: 숫자 또는 객체({ time, unit }) 형태만
+    // 문자열('hour', 'second' 등)은 기존 로직(분기 D)으로 처리
+    const hasUserRange = Array.isArray(this.range) && this.range.length === 2;
+    const hasUserInterval = (
+      typeof this.interval === 'number'
+      || (typeof this.interval === 'object' && this.interval !== null)
+    );
+
+    const resolvedInterval = hasUserInterval ? this.getInterval(range) : null;
+    const isValidInterval = (
+      resolvedInterval != null
+      && resolvedInterval > 0
+      && isFinite(resolvedInterval)
+    );
+
+    const graphMin = +minValue;
+    let graphMax = +maxValue;
+    const graphRange = graphMax - graphMin;
+
+    let interval;
+    let steps;
+
+    if (hasUserRange && isValidInterval) {
+      // 1) user range + interval
+      const candidateSteps = graphRange / resolvedInterval;
+      const isExactlyDividable = Math.abs(candidateSteps - Math.round(candidateSteps)) < 1e-10;
+      if (isExactlyDividable && candidateSteps <= maxSteps) {
+        // 1-1) interval 호환되는 경우
+        interval = resolvedInterval;
+        steps = Math.round(candidateSteps);
+      } else {
+        // 1-2) interval 호환되지 않음 -> 사용자 interval을 사용하지 않음
+        steps = maxSteps;
+        interval = graphRange / steps;
+      }
+    } else if (hasUserRange) {
+      // 2) user range only
+      steps = maxSteps;
+      interval = graphRange / steps;
+    } else if (isValidInterval) {
+      // 3) user interval only
+      interval = resolvedInterval;
+      steps = Math.ceil(graphRange / interval);
+      while (steps > maxSteps) {
+        interval *= 2;
+        steps = Math.ceil(graphRange / interval);
+      }
+      graphMax = graphMin + (interval * steps);
+    } else {
+      // 4) 기존 로직
+      interval = this.getInterval(range);
+      let increase = minValue;
+      let numberOfSteps;
+
+      while (increase < maxValue) {
+        increase += interval;
+      }
+
+      graphMax = increase;
+
+      numberOfSteps = Math.round(graphRange / interval);
+
+      while (numberOfSteps > maxSteps) {
+        interval *= 2;
+        numberOfSteps = Math.round(graphRange / interval);
+        const tempInterval = graphRange / numberOfSteps;
+        interval = this.decimalPoint ? tempInterval : Math.ceil(tempInterval);
+      }
+
+      if (graphMax - graphMin > (numberOfSteps * interval)) {
+        const tempInterval = (graphMax - graphMin) / numberOfSteps;
+        interval = this.decimalPoint ? tempInterval : Math.ceil(tempInterval);
+      }
+
+      steps = numberOfSteps;
+    }
+
+    return {
+      steps,
+      interval,
+      graphMin,
+      graphMax,
+    };
+  }
 }
 
 export default TimeScale;