evui 3.3.62 → 3.3.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.62",
+  "version": "3.3.64",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",
@@ -22,6 +22,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "dayjs": "^1.10.4",
+    "korean-regexp": "^1.0.10",
     "vue": "^3.0.0",
     "vue-resize-observer": "^2.0.15",
     "vue3-observe-visibility": "^0.1.2",

package/src/components/chart/Chart.vue

@@ -67,6 +67,7 @@
       'click',
       'dbl-click',
       'drag-select',
+      'mouse-move',
       'update:selectedItem',
       'update:selectedLabel',
       'update:selectedSeries',
@@ -126,9 +127,13 @@
           selected = selectSeriesInfo;
         }
 
+        const chartData = props.options.realTimeScatter?.use
+          ? { ...props.data, groups: [], labels: [] }
+          : normalizedData;
+
         evChart = new EvChart(
           wrapper.value,
-          normalizedData,
+          chartData,
           normalizedOptions,
           eventListeners,
           selectItemInfo,
@@ -165,14 +170,16 @@
       }, { deep: true, flush: 'post' });
 
       watch(() => props.data, (chartData) => {
-        const newData = getNormalizedData(chartData);
+        const newData = props.options.realTimeScatter?.use
+          ? { ...chartData, groups: [], labels: [] }
+          : getNormalizedData(chartData);
         const isUpdateSeries = !isEqual(newData.series, evChart.data.series)
             || !isEqual(newData.groups, evChart.data.groups)
             || props.options.type === 'heatMap';
 
         const isUpdateData = !isEqual(newData, evChart.data);
 
-        evChart.data = cloneDeep(newData);
+        evChart.data = props.options.realTimeScatter?.use ? newData : cloneDeep(newData);
 
         evChart.update({
           updateSeries: isUpdateSeries,

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

@@ -104,14 +104,18 @@ class EvChart {
    */
   init() {
     const { series, data, labels, groups } = this.data;
-    const { type, axesX, axesY, tooltip, horizontal } = this.options;
+    const { type, axesX, axesY, tooltip, horizontal, realTimeScatter } = this.options;
 
     this.createSeriesSet(series, type, horizontal, groups);
     if (groups.length) {
       this.addGroupInfo(groups);
     }
 
-    this.createDataSet(data, labels);
+    if (realTimeScatter?.use) {
+      this.createRealTimeScatterDataSet(data);
+    } else {
+      this.createDataSet(data, labels);
+    }
     this.minMax = this.getStoreMinMax();
 
     this.initRect();
@@ -232,6 +236,8 @@ class EvChart {
       }
     });
 
+    const duple = new Set();
+
     const chartKeys = Object.keys(this.seriesInfo.charts);
     for (let ix = 0; ix < chartKeys.length; ix++) {
       const chartType = chartKeys[ix];
@@ -322,6 +328,7 @@ class EvChart {
             series.draw({
               legendHitInfo,
               selectInfo,
+              duple,
               ...opt,
             });
             break;
@@ -752,7 +759,11 @@ class EvChart {
       this.addGroupInfo(groups);
     }
 
-    this.createDataSet(data, labels);
+    if (this.options.realTimeScatter?.use) {
+      this.createRealTimeScatterDataSet(data);
+    } else {
+      this.createDataSet(data, labels);
+    }
 
     // title update
     if (options.title.show) {

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

@@ -4,7 +4,7 @@ import Util from '../helpers/helpers.util';
 import Canvas from '../helpers/helpers.canvas';
 
 class Scatter {
-  constructor(sId, opt, sIdx) {
+  constructor(sId, opt, sIdx, realTimeScatter = false) {
     const merged = merge({}, LINE_OPTION, opt);
     Object.keys(merged).forEach((key) => {
       this[key] = merged[key];
@@ -14,7 +14,7 @@ class Scatter {
       this.name = `series-${sIdx}`;
     }
 
-    ['color', 'pointFill', 'fillColor'].forEach((colorProp) => {
+    ['color', 'pointFill', 'fillColor', 'overflowColor'].forEach((colorProp) => {
       if (this[colorProp] === undefined) {
         this[colorProp] = COLOR[sIdx];
       }
@@ -23,6 +23,7 @@ class Scatter {
     this.sId = sId;
     this.data = [];
     this.type = 'scatter';
+    this.realTimeScatter = realTimeScatter;
   }
 
   /**
@@ -36,14 +37,45 @@ class Scatter {
       return;
     }
 
-    const ctx = param.ctx;
-    const chartRect = param.chartRect;
-    const labelOffset = param.labelOffset;
-    const axesSteps = param.axesSteps;
-    const displayOverflow = param.displayOverflow;
+    if (this.realTimeScatter) {
+      this.realTimeScatterDraw(param);
+    } else {
+      this.defaultScatterDraw(param);
+    }
+  }
+
+  /**
+   * Calculate opacity for a data item in the series.
+   * @param {object} param - The parameter object passed to the draw function.
+   * @param {string} colorStr - The color string of the item.
+   * @param {number} dataIndex - The index of the item in the data array.
+   *
+   * @returns {number} - The calculated opacity level for the item.
+   */
+  getOpacity(param, colorStr, dataIndex) {
+    const noneDownplayOpacity = colorStr.includes('rgba') ? Util.getOpacity(colorStr) : 1;
+    let isDownplay = false;
+
+    const { selectInfo, legendHitInfo } = param;
+    if (legendHitInfo) {
+      isDownplay = legendHitInfo.sId !== this.sId;
+    } else if (selectInfo) {
+      isDownplay = selectInfo?.seriesID !== this.sId || selectInfo?.dataIndex !== dataIndex;
+    }
+
+    return isDownplay ? 0.1 : noneDownplayOpacity;
+  }
+
+  /**
+   * Calculate x and y coordinates for a data item in the series.
+   * @param {object} item - The data item for which coordinates are to be calculated.
+   * @param {object} param - The parameter object passed to the draw function.
+   *
+   * @returns {undefined}
+   */
+  calcItem(item, param) {
+    const { chartRect, labelOffset, axesSteps, displayOverflow } = param;
 
-    let x;
-    let y;
     let aliasPixel;
     const minmaxX = axesSteps.x[this.xAxisIndex];
     const minmaxY = axesSteps.y[this.yAxisIndex];
@@ -53,53 +85,118 @@ class Scatter {
     const xsp = chartRect.x1 + labelOffset.left;
     const ysp = chartRect.y2 - labelOffset.bottom;
 
-    if (displayOverflow) {
-      this.data = this.data.map(val => ({
-        ...val,
-        y: val.y > minmaxY.graphMax ? minmaxY.graphMax : val.y,
-      }));
+    let x = Canvas.calculateX(item.x, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
+    const y = Canvas.calculateY(
+      displayOverflow && item.y > minmaxY.graphMax
+        ? minmaxY.graphMax
+        : item.y,
+      minmaxY.graphMin,
+      minmaxY.graphMax,
+      yArea,
+      ysp,
+    );
+
+    if (x !== null) {
+      aliasPixel = Util.aliasPixel(x);
+      x += aliasPixel;
     }
 
-    this.data.forEach((item) => {
-      x = Canvas.calculateX(item.x, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
-      y = Canvas.calculateY(item.y, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
+    item.xp = x;
+    item.yp = y;
+  }
 
-      if (x !== null) {
-        aliasPixel = Util.aliasPixel(x);
-        x += aliasPixel;
-      }
+  /**
+   * Draw default scatter chart
+   * @param {object} param - The parameter object passed to the draw function.
+   *
+   * @returns {undefined}
+   */
+  defaultScatterDraw(param) {
+    const { ctx } = param;
 
-      item.xp = x; // eslint-disable-line
-      item.yp = y; // eslint-disable-line
+    this.data.forEach((item, idx) => {
+      this.calcItem(item, param);
 
-      return item;
-    }, this.data[0]);
+      if (item.xp !== null && item.yp !== null) {
+        const color = item.dataColor || this.color;
+        ctx.strokeStyle = Util.colorStringToRgba(color, this.getOpacity(param, color, idx));
 
-    const getOpacity = (colorStr, dataIndex) => {
-      const noneDownplayOpacity = colorStr.includes('rgba') ? Util.getOpacity(colorStr) : 1;
-      let isDownplay = false;
+        const pointFillColor = item.dataColor || this.pointFill;
+        ctx.fillStyle = Util.colorStringToRgba(
+          pointFillColor,
+          this.getOpacity(param, pointFillColor, idx),
+        );
 
-      const { selectInfo, legendHitInfo } = param;
-      if (legendHitInfo) {
-        isDownplay = legendHitInfo.sId !== this.sId;
-      } else if (selectInfo) {
-        isDownplay = selectInfo?.seriesID !== this.sId || selectInfo?.dataIndex !== dataIndex;
+        Canvas.drawPoint(ctx, this.pointStyle, this.pointSize, item.xp, item.yp);
       }
+    });
+  }
+
+  /**
+   * Draw real time scatter chart
+   * @param {object} param - The parameter object passed to the draw function.
+   *
+   * @returns {undefined}
+   */
+  realTimeScatterDraw(param) {
+    const { ctx, axesSteps, duple } = 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;
+
+    for (let i = 0; i < this.data[this.sId].dataGroup.length; i++) {
+      for (let j = 0; j < this.data[this.sId].dataGroup[i].data.length; j++) {
+        const item = this.data[this.sId].dataGroup[i].data[j];
+
+        if (!duple.has(`${item.x}${item.y}`)) {
+          duple.add(`${item.x}${item.y}`);
 
-      return isDownplay ? 0.1 : noneDownplayOpacity;
-    };
+          this.calcItem(item, param);
 
-    this.data.forEach((curr, idx) => {
-      if (curr.xp !== null && curr.yp !== null) {
-        const color = curr.dataColor || this.color;
-        ctx.strokeStyle = Util.colorStringToRgba(color, getOpacity(color, idx));
+          if (item.xp !== null && item.yp !== null) {
+            const overflowColor = item.y > minmaxY.graphMax && this.overflowColor;
+            const color = overflowColor || item.color || this.color;
 
-        const pointFillColor = curr.dataColor || this.pointFill;
-        ctx.fillStyle = Util.colorStringToRgba(pointFillColor, getOpacity(pointFillColor, idx));
+            ctx.strokeStyle = color;
 
-        Canvas.drawPoint(ctx, this.pointStyle, this.pointSize, curr.xp, curr.yp);
+            const pointFillColor = overflowColor || this.pointFill || item.color || this.color;
+            ctx.fillStyle = pointFillColor;
+
+            Canvas.drawPoint(ctx, pointStyle, pointSize, item.xp, item.yp);
+          }
+        }
       }
-    });
+    }
+  }
+
+  /**
+   * Filters and returns data items based on input coordinates
+   *
+   * @param {Array} data - The data to filter
+   * @param {number} xsp - Start X coordinate
+   * @param {number} ysp - Start Y coordinate
+   * @param {number} xep - End X coordinate
+   * @param {number} yep - End Y coordinate
+   * @returns {Array} Filtered data items
+   */
+  findItemsInRange(data, xsp, ysp, xep, yep) {
+    return data.filter(seriesData =>
+      (xsp - 1 <= seriesData.xp && seriesData.xp <= xep + 1
+      && ysp - 1 <= seriesData.yp && seriesData.yp <= yep + 1));
+  }
+
+  defaultScatterFindItems(gdata, xsp, ysp, xep, yep) {
+    return this.findItemsInRange(gdata, xsp, ysp, xep, yep);
+  }
+
+  realTimeScatterFindItems(gdata, xsp, ysp, xep, yep) {
+    const items = [];
+    for (let i = 0; i < gdata[this.sId].dataGroup.length; i++) {
+      const obj = gdata[this.sId].dataGroup[i];
+      items.push(...this.findItemsInRange(obj.data, xsp, ysp, xep, yep));
+    }
+
+    return items;
   }
 
   /**
@@ -112,9 +209,13 @@ class Scatter {
     const gdata = this.data;
     const xep = xsp + width;
     const yep = ysp + height;
-    const items = gdata.filter(seriesData =>
-        (xsp - 1 <= seriesData.xp && seriesData.xp <= xep + 1
-        && ysp - 1 <= seriesData.yp && seriesData.yp <= yep + 1));
+    let items = [];
+
+    if (this.realTimeScatter) {
+      items = this.realTimeScatterFindItems(gdata, xsp, ysp, xep, yep);
+    } else {
+      items = this.defaultScatterFindItems(gdata, xsp, ysp, xep, yep);
+    }
 
     return items;
   }
@@ -161,6 +262,8 @@ class Scatter {
    * @returns {object} graph item
    */
   findGraphData(offset) {
+    if (this.realTimeScatter) return false;
+
     const xp = offset[0];
     const yp = offset[1];
     const item = { data: null, hit: false, color: this.color, index: null };

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

@@ -72,7 +72,7 @@ const modules = {
       return new Line(id, opt, index);
     } else if (type === 'scatter') {
       this.seriesInfo.charts.scatter.push(id);
-      return new Scatter(id, opt, index);
+      return new Scatter(id, opt, index, this.options.realTimeScatter?.use);
     } else if (type === 'bar') {
       this.seriesInfo.charts.bar.push(id);
 

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

@@ -1,4 +1,5 @@
 import { reverse } from 'lodash-es';
+import dayjs from 'dayjs';
 import Util from '../helpers/helpers.util';
 
 const modules = {
@@ -61,6 +62,185 @@ const modules = {
     });
   },
 
+  /**
+   * Take chart data and create a two-dimensional array, specify max/min and delete/add over time.
+   * @param {object}  datas    chart series info
+   *
+   * @returns {undefined}
+   */
+  createRealTimeScatterDataSet(datas) {
+    const keys = Object.keys(datas);
+
+    if (!this.isInit) {
+      this.dataSet = {};
+    }
+
+    const minMaxValues = {
+      maxY: 0,
+      minY: Infinity,
+      fromTime: 0,
+      toTime: 0,
+    };
+
+    for (let x = 0; x < keys.length; x++) {
+      const key = keys[x];
+      const data = datas[key];
+      const storeLength = data.length;
+      let lastTime = 0;
+
+      if (!this.isInit) {
+        this.dataSet[key] = {
+          dataGroup: [],
+          startIndex: 0,
+          endIndex: 0,
+          length: 0,
+          fromTime: 0,
+          toTime: 0,
+        };
+        this.dataSet[key].length = this.options.realTimeScatter.range || 300;
+        this.dataSet[key].toTime = Math.floor(Date.now() / 1000) * 1000;
+        this.dataSet[key].fromTime = this.dataSet[key].toTime
+          - this.dataSet[key].length * 1000;
+        this.dataSet[key].endIndex = this.dataSet[key].length - 1;
+      }
+
+      for (let i = 0; i < storeLength; i++) {
+        const item = data[i];
+
+        if (lastTime < item.x) {
+          lastTime = item.x;
+        }
+      }
+
+      lastTime = Math.floor(lastTime / 1000) * 1000;
+      if (
+        (this.dataSet[key].toTime - lastTime) / 1000
+        > this.dataSet[key].length && key === ''
+      ) {
+        return;
+      }
+
+      let gapCount = (lastTime - this.dataSet[key].toTime) / 1000;
+      if (gapCount > 0) {
+        this.dataSet[key].toTime = lastTime;
+        this.dataSet[key].fromTime = lastTime
+          - this.dataSet[key].length * 1000;
+      }
+
+      if (!this.isInit) {
+        for (let i = 0; i < this.dataSet[key].length; i++) {
+          this.dataSet[key].dataGroup[i] = {
+            data: [],
+            max: 0,
+            min: Infinity,
+          };
+        }
+      } else if (gapCount > 0) {
+        if (gapCount >= this.dataSet[key].length) {
+          for (let i = 0; i < this.dataSet[key].length; i++) {
+            this.dataSet[key].dataGroup[i].data.length = 0;
+            this.dataSet[key].dataGroup[i].max = 0;
+            this.dataSet[key].dataGroup[i].min = Infinity;
+          }
+
+          this.dataSet[key].startIndex = 0;
+          this.dataSet[key].endIndex = this.dataSet[key].length - 1;
+        } else {
+          while (gapCount > 0) {
+            if (
+              this.dataSet[key].dataGroup[this.dataSet[key].startIndex]
+               === null
+            ) {
+              this.dataSet[key].dataGroup[this.dataSet[key].startIndex] = {
+                data: [],
+                max: 0,
+                min: Infinity,
+              };
+            } else {
+              this.dataSet[key]
+                .dataGroup[this.dataSet[key].startIndex].data.length = 0;
+              this.dataSet[key]
+                .dataGroup[this.dataSet[key].startIndex].max = 0;
+              this.dataSet[key]
+                .dataGroup[this.dataSet[key].startIndex].min = Infinity;
+            }
+
+            ++this.dataSet[key].startIndex;
+
+            if (this.dataSet[key].startIndex >= this.dataSet[key].length) {
+              this.dataSet[key].startIndex = 0;
+            }
+
+            ++this.dataSet[key].endIndex;
+            if (this.dataSet[key].endIndex >= this.dataSet[key].length) {
+              this.dataSet[key].endIndex = 0;
+            }
+            --gapCount;
+          }
+        }
+      }
+
+      for (let i = 0; i < storeLength; i++) {
+        const item = data[i];
+        const xAxisTime = Math.floor(item.x / 1000) * 1000;
+
+        if (this.dataSet[key].fromTime <= xAxisTime) {
+          let index = this.dataSet[key].endIndex
+          - (this.dataSet[key].toTime - xAxisTime) / 1000;
+          if (index < 0) {
+            index = this.dataSet[key].length + index;
+          }
+
+          this.dataSet[key].dataGroup[index].data.push({
+            x: item.x,
+            y: item.y,
+            color: item.color,
+          });
+
+          this.dataSet[key].dataGroup[index].max = Math.max(
+            this.dataSet[key].dataGroup[index].max,
+            item.y,
+          );
+          this.dataSet[key].dataGroup[index].min = Math.min(
+            this.dataSet[key].dataGroup[index].min,
+            item.y,
+          );
+        }
+      }
+
+      const tempMinMax = {
+        maxY: 0,
+        minY: Infinity,
+      };
+
+      for (let i = 0; i < this.dataSet[key].length; i++) {
+        if (this.dataSet[key].dataGroup[i].max > tempMinMax.maxY) {
+          tempMinMax.maxY = this.dataSet[key].dataGroup[i].max;
+        }
+
+        if (this.dataSet[key].dataGroup[i].min < tempMinMax.minY) {
+          tempMinMax.minY = this.dataSet[key].dataGroup[i].min;
+        }
+      }
+
+      minMaxValues.maxY = Math.max(minMaxValues.maxY, tempMinMax.maxY);
+      minMaxValues.minY = Math.min(minMaxValues.minY, tempMinMax.minY);
+      minMaxValues.fromTime = this.dataSet[key].fromTime;
+      minMaxValues.toTime = this.dataSet[key].toTime;
+    }
+
+    this.seriesInfo.charts.scatter.forEach((seriesID) => {
+      const series = this.seriesList[seriesID];
+      series.data = this.dataSet;
+      series.minMax = {
+        minX: dayjs(minMaxValues.fromTime),
+        minY: minMaxValues.minY,
+        maxX: dayjs(minMaxValues.toTime),
+        maxY: minMaxValues.maxY,
+      };
+    });
+  },
+
   /**
    * Take chart data and to create normalized pie data
    * @param {object}  data    chart series info
@@ -855,7 +1035,7 @@ const modules = {
       }
     } else if (scale?.labels?.length) {
       const labelGap = (endPoint - startPoint) / scale.labels.length;
-      const isYAxis = targetAxis === 'yAxis' || horizontal;
+      const isYAxis = targetAxis === 'yAxis';
       const index = Math.floor(((isYAxis ? y : x) - startPoint) / labelGap);
       labelIndex = scale.labels.length > index ? index : -1;
     } else {
@@ -886,6 +1066,92 @@ const modules = {
     };
   },
 
+  /**
+   * Get current mouse target label value in label array or calculated using mouse position
+   * @param {string}   targetAxis          target Axis Location ('xAxis', 'yAxis')
+   * @param {array}  offset    return value from getMousePosition()
+   * @param {number}  labelIndex
+   *
+   * @returns {object} current mouse target label value
+   */
+  getCurMouseLabelVal(targetAxis, offset, labelIndex) {
+    const { type: chartType, horizontal } = this.options;
+    const isXAxis = targetAxis === 'xAxis';
+    const targetAxisDirection = isXAxis ? 'x' : 'y';
+
+    let labelVal = '';
+    let labelIdx = -1;
+
+    const findLabelValInLabelArr = () => {
+      let result = '';
+      switch (chartType) {
+        case 'bar':
+        case 'line': {
+          result = (
+            (horizontal && !isXAxis)
+            || (!horizontal && isXAxis)
+          ) ? this.data.labels[labelIndex] : '';
+          break;
+        }
+        case 'heatMap': {
+          result = this.data.labels[targetAxisDirection][labelIndex];
+          break;
+        }
+        default:
+          break;
+      }
+
+      return result;
+    };
+
+    const calLabelValUseMousePos = () => {
+      let result = '';
+      const aPos = {
+        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 {
+        steps,
+        interval: labelValInterval,
+        graphMin,
+      } = this.axesSteps[targetAxisDirection][0];
+      const {
+        width: labelWidth,
+        height: labelHeight,
+      } = this.axesRange[targetAxisDirection][0].size;
+      const axes = isXAxis ? this.axesX : this.axesY;
+      const axisStartPoint = aPos[axes[0].units.rectStart];
+      const axisEndPoint = aPos[axes[0].units.rectEnd];
+      const curMousePosInAxis = Math.abs(offset[isXAxis ? 0 : 1] - axisStartPoint);
+      const labelMidLength = (isXAxis ? labelWidth : labelHeight) / 2;
+      const labelPosInterval = Math.abs(axisStartPoint - axisEndPoint) / steps;
+      const labelStep = Math.floor((curMousePosInAxis + labelMidLength) / labelPosInterval);
+
+      if (
+        ((labelPosInterval * labelStep) + labelMidLength > curMousePosInAxis)
+        && ((labelPosInterval * labelStep) - labelMidLength < curMousePosInAxis)
+      ) {
+        result = (labelStep * labelValInterval) + graphMin;
+      }
+
+      return result;
+    };
+
+    if (typeof labelIndex === 'number') {
+      labelVal = findLabelValInLabelArr();
+      labelIdx = labelIndex;
+    }
+
+    if (!labelVal) {
+      labelVal = calLabelValUseMousePos();
+      labelIdx = -1;
+    }
+
+    return { labelVal, labelIdx };
+  },
+
   /**
    * Create min/max information for all of data
    * @property seriesList