evui 3.4.2 → 3.4.5

package/package.json

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

package/src/common/utils.js

@@ -136,3 +136,17 @@ export function getPrecision(v) {
 export function checkNullAndUndefined(value) {
   return value === null || value === undefined;
 }
+
+/**
+ * Check if the device is mobile
+ * @returns {boolean}
+ */
+export function mobileCheck() {
+  return (
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent,
+    )
+    || 'ontouchstart' in window
+    || navigator.maxTouchPoints
+  );
+}

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

@@ -1,4 +1,5 @@
 import throttle from '@/common/utils.throttle';
+import { mobileCheck } from '@/common/utils';
 import Model from './model';
 import TimeScale from './scale/scale.time';
 import LinearScale from './scale/scale.linear';
@@ -40,6 +41,7 @@ class EvChart {
       Object.assign(this, GradientLegend);
     }
 
+    this.isMobile = mobileCheck();
     this.brushSeries = brushSeries;
     this.target = target;
     this.data = data;
@@ -377,12 +379,12 @@ class EvChart {
     return axes.map((axis) => {
       switch (axis.type) {
         case 'linear':
-          return new LinearScale(dir, axis, ctx, options);
+          return new LinearScale(dir, axis, ctx, labels, options);
         case 'time':
           if (axis.categoryMode) {
             return new TimeCategoryScale(dir, axis, ctx, labels, options);
           }
-          return new TimeScale(dir, axis, ctx, options);
+          return new TimeScale(dir, axis, ctx, labels, options);
         case 'log':
           return new LogarithmicScale(dir, axis, ctx);
         case 'step':
@@ -939,6 +941,7 @@ class EvChart {
       this.overlayCanvas.removeEventListener('click', this.onClick);
       this.overlayCanvas.removeEventListener('mousedown', this.onMouseDown);
       this.overlayCanvas.removeEventListener('wheel', this.onWheel);
+      window.removeEventListener('click', this.dragTouchSelectionEvent);
     }
 
     if (this.options.tooltip.use) {

package/src/components/chart/helpers/helpers.constant.js

@@ -127,11 +127,6 @@ export const AXIS_OPTION = {
   },
 };
 
-export const PLOT_LINE_OPTION = {
-  color: '#FF0000',
-  lineWidth: 1,
-};
-
 export const PLOT_LINE_LABEL_OPTION = {
   show: false,
   fontSize: 12,
@@ -147,6 +142,12 @@ export const PLOT_LINE_LABEL_OPTION = {
   maxWidth: null,
 };
 
+export const PLOT_LINE_OPTION = {
+  color: '#FF0000',
+  lineWidth: 1,
+  label: PLOT_LINE_LABEL_OPTION,
+};
+
 export const PLOT_BAND_OPTION = {
   color: '#FAE59D',
 };

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

@@ -15,7 +15,7 @@ const modules = {
      * @returns {undefined}
      */
     this.onMouseMove = (e) => {
-      if (this.dragInfo?.isMove) {
+      if (this.dragInfo?.isMove || this.isMobile) {
         return;
       }
 
@@ -265,11 +265,53 @@ const modules = {
           break;
         }
 
-        case 'pie':
+        case 'pie': {
+          if (useSelectItem) {
+            setSelectedItemInfo();
+          }
+
+          break;
+        }
+
         case 'scatter': {
           if (useSelectItem) {
             setSelectedItemInfo();
           }
+
+          // 모바일용 dragSelection
+          if (this.options.dragSelection?.use && this.isMobile) {
+            let touchInfo = this.setTouchInfo(e);
+            this.overlayClear();
+
+            if (this.options.dragSelection.keepDisplay
+              && (e.layerX < touchInfo.range.x1
+              || e.layerY < touchInfo.range.y1
+              || e.layerX > touchInfo.range.x2
+              || e.layerY > touchInfo.range.y2)) {
+              this.isTouchOverlay = false;
+            } else {
+              touchInfo = this.setTouchBoxDimensions(touchInfo);
+              this.isTouchOverlay = true;
+              this.drawSelectionArea(touchInfo);
+            }
+
+            if (!this.options.dragSelection.keepDisplay) {
+              setTimeout(() => {
+                this.isTouchOverlay = false;
+                this.overlayClear();
+              }, 100);
+            }
+
+            args.e = e;
+            args.touchInfo = touchInfo;
+            args.data = this.findSelectedItems(touchInfo);
+            args.range = this.getSelectionRange(touchInfo);
+
+            if (typeof this.listeners['drag-select'] === 'function') {
+              this.listeners['drag-select'](args);
+            }
+          }
+
           break;
         }
       }
@@ -313,6 +355,9 @@ const modules = {
     this.overlayCanvas.addEventListener('dblclick', this.onDblClick);
     this.overlayCanvas.addEventListener('click', this.onClick);
     this.overlayCanvas.addEventListener('mousedown', this.onMouseDown);
+
+    this.dragTouchSelectionEvent = e => this.dragTouchSelectionDestroy(e);
+    window.addEventListener('click', this.dragTouchSelectionEvent);
   },
 
   /**
@@ -551,6 +596,99 @@ const modules = {
     return curMouseTargetVal;
   },
 
+  /**
+   * Processes touch event to determine touch position within the chart.
+   *
+   * @param {TouchEvent} event - the touch event to process
+   * @returns {object} - the processed touch information
+   */
+  setTouchInfo(event) {
+    let [offsetX, offsetY] = this.getMousePosition(event);
+    const chartRect = this.chartRect;
+    const labelOffset = this.labelOffset;
+    const range = {
+      x1: chartRect.x1 + labelOffset.left,
+      x2: chartRect.x2 - labelOffset.right,
+      y1: chartRect.y1 + labelOffset.top,
+      y2: chartRect.y2 - labelOffset.bottom,
+    };
+
+    offsetX = Math.max(range.x1, Math.min(offsetX, range.x2));
+    offsetY = Math.max(range.y1, Math.min(offsetY, range.y2));
+
+    return {
+      xcp: offsetX,
+      ycp: offsetY,
+      range,
+    };
+  },
+
+  /**
+   * Adjusts the touch box dimensions based on the provided touch information.
+   *
+   * @param {object} touchInfo - The touch information including touch position and plotting range
+   * @returns {object} - The adjusted touch information
+   */
+  setTouchBoxDimensions(touchInfo) {
+    const boxSize = this.options.dragSelection?.size || 50;
+    const halfBoxSize = boxSize / 2;
+    const { xcp, ycp, range } = touchInfo;
+    let xsp = xcp - halfBoxSize;
+    let ysp = ycp - halfBoxSize;
+    let width = boxSize;
+    let height = boxSize;
+
+    this.boxOverflow = {
+      x1: false,
+      x2: false,
+      y1: false,
+      y2: false,
+    };
+
+    if (xcp < range.x1 + halfBoxSize) {
+      xsp = range.x1;
+      width = halfBoxSize - (range.x1 - xcp);
+      this.boxOverflow.x1 = true;
+    }
+    if (xcp > range.x2 - halfBoxSize) {
+      width = halfBoxSize - (xcp - range.x2);
+      this.boxOverflow.x2 = true;
+    }
+    if (ycp < range.y1 + halfBoxSize) {
+      ysp = range.y1;
+      height = halfBoxSize - (range.y1 - ycp);
+      this.boxOverflow.y1 = true;
+    }
+    if (ycp > range.y2 - halfBoxSize) {
+      height = halfBoxSize - (ycp - range.y2);
+      this.boxOverflow.y2 = true;
+    }
+
+    touchInfo.xsp = xsp;
+    touchInfo.ysp = ysp;
+    touchInfo.width = width;
+    touchInfo.height = height;
+
+    return touchInfo;
+  },
+
+  /**
+   * Remove a touch selection.
+   *
+   * @param {TouchEvent} e - the touch event to process
+   * @returns {undefined}
+   */
+  dragTouchSelectionDestroy(e) {
+    if (
+      this.options.dragSelection?.use
+      && e.target !== this.overlayCanvas
+      && this.isTouchOverlay
+    ) {
+      this.isTouchOverlay = false;
+      this.overlayClear();
+    }
+  },
+
   /**
    * Find graph item on mouse position
    * @param {array} offset    return value from getMousePosition()
@@ -952,16 +1090,24 @@ const modules = {
     const yMinRatio = this.getRatioInRange(range.y1, range.y2, yep);
     const yMaxRatio = this.getRatioInRange(range.y1, range.y2, ysp);
 
-    const xMin = dataRangeX.graphMin + graphWidth * xMinRatio;
-    const xMax = dataRangeX.graphMin + graphWidth * xMaxRatio;
-    const yMin = dataRangeY.graphMin + graphHeight * (1 - yMinRatio);
-    const yMax = dataRangeY.graphMin + graphHeight * (1 - yMaxRatio);
+    const xMin = this.isMobile && this.boxOverflow?.x1
+      ? Math.min(this.minMax.x[0].min, dataRangeX.graphMin)
+      : Math.max(dataRangeX.graphMin + graphWidth * xMinRatio, dataRangeX.graphMin);
+    const xMax = this.isMobile && this.boxOverflow?.x2
+      ? Math.max(this.minMax.x[0].max, dataRangeX.graphMax)
+      : Math.min(dataRangeX.graphMin + graphWidth * xMaxRatio, dataRangeX.graphMax);
+    const yMin = this.isMobile && this.boxOverflow?.y2
+      ? Math.min(this.minMax.y[0].min, dataRangeY.graphMin)
+      : Math.max(dataRangeY.graphMin + graphHeight * (1 - yMinRatio), dataRangeY.graphMin);
+    const yMax = this.isMobile && this.boxOverflow?.y1
+      ? Math.max(this.minMax.y[0].max, dataRangeY.graphMax)
+      : Math.min(dataRangeY.graphMin + graphHeight * (1 - yMaxRatio), dataRangeY.graphMax);
 
     return {
-      xMin: Math.max(+parseFloat(xMin).toFixed(3), dataRangeX.graphMin),
-      xMax: Math.min(+parseFloat(xMax).toFixed(3), dataRangeX.graphMax),
-      yMin: Math.max(+parseFloat(yMin).toFixed(3), dataRangeY.graphMin),
-      yMax: Math.min(+parseFloat(yMax).toFixed(3), dataRangeY.graphMax),
+      xMin: +xMin.toFixed(3),
+      xMax: +xMax.toFixed(3),
+      yMin: +yMin.toFixed(3),
+      yMax: +yMax.toFixed(3),
     };
   },
 

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

@@ -10,7 +10,7 @@ import {
 import Util from '../helpers/helpers.util';
 
 class Scale {
-  constructor(type, axisOpt, ctx, options) {
+  constructor(type, axisOpt, ctx, labels, options) {
     const merged = defaultsDeep({}, axisOpt, AXIS_OPTION);
     Object.keys(merged).forEach((key) => {
       this[key] = merged[key];
@@ -19,6 +19,7 @@ class Scale {
     this.type = type;
     this.ctx = ctx;
     this.units = AXIS_UNITS[this.type];
+    this.labels = labels;
     this.options = options;
 
     if (!this.position) {
@@ -275,10 +276,22 @@ class Scale {
     }
 
     if (this.labelStyle?.show) {
-      const labelGap = (endPoint - startPoint) / steps;
+      const distance = endPoint - startPoint;
+      const labelGap = distance / steps;
       const ticks = [];
+      const size = stepInfo.interval;
       let labelCenter = null;
       let linePosition = null;
+      let offsetStartPoint = startPoint;
+      let axisMinForLabel = axisMin;
+
+      if (this.type === 'x' && options?.axesX[0].flow && this.labels.length !== steps + 1) {
+        const axisMinByMinutes = Math.floor(axisMin / size) * size;
+        if (axisMinByMinutes !== +axisMin) {
+          axisMinForLabel = axisMinByMinutes + size;
+          offsetStartPoint += (distance / (axisMax - axisMin)) * (axisMinForLabel - axisMin);
+        }
+      }
 
       ctx.strokeStyle = this.gridLineColor;
       ctx.lineWidth = 1;
@@ -286,82 +299,85 @@ class Scale {
 
       let labelText;
       for (let ix = 0; ix <= steps; ix++) {
-        ctx.beginPath();
-        ticks[ix] = axisMin + (ix * stepValue);
+        labelCenter = Math.round(offsetStartPoint + (labelGap * ix));
 
-        labelCenter = Math.round(startPoint + (labelGap * ix));
-        linePosition = labelCenter + aliasPixel;
-        labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
+        if (labelCenter <= endPoint || this.type !== 'x' || !options?.axesX[0].flow || this.labels.length === steps + 1) {
+          ctx.beginPath();
+          ticks[ix] = axisMinForLabel + (ix * stepValue);
 
-        const isBlurredLabel = this.options?.selectLabel?.use
-          && this.options?.selectLabel?.useLabelOpacity
-          && (this.options.horizontal === (this.type === 'y'))
-          && selectLabelInfo?.dataIndex?.length
-          && !selectLabelInfo?.label
-            .map(t => this.getLabelFormat(Math.min(axisMax, t))).includes(labelText);
+          linePosition = labelCenter + aliasPixel;
+          labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
 
-        const labelColor = this.labelStyle.color;
-        let defaultOpacity = 1;
+          const isBlurredLabel = this.options?.selectLabel?.use
+            && this.options?.selectLabel?.useLabelOpacity
+            && (this.options.horizontal === (this.type === 'y'))
+            && selectLabelInfo?.dataIndex?.length
+            && !selectLabelInfo?.label
+              .map(t => this.getLabelFormat(Math.min(axisMax, t))).includes(labelText);
 
-        if (Util.getColorStringType(labelColor) === 'RGBA') {
-          defaultOpacity = Util.getOpacity(labelColor);
-        }
+          const labelColor = this.labelStyle.color;
+          let defaultOpacity = 1;
 
-        ctx.fillStyle = Util.colorStringToRgba(labelColor, isBlurredLabel ? 0.1 : defaultOpacity);
+          if (Util.getColorStringType(labelColor) === 'RGBA') {
+            defaultOpacity = Util.getOpacity(labelColor);
+          }
 
-        let labelPoint;
+          ctx.fillStyle = Util.colorStringToRgba(labelColor, isBlurredLabel ? 0.1 : defaultOpacity);
 
-        if (this.type === 'x') {
-          labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
-          if (options?.brush?.showLabel || !options?.brush) {
-            ctx.fillText(labelText, labelCenter, labelPoint);
-          }
+          let labelPoint;
 
-          if (!isBlurredLabel
-            && options?.selectItem?.showLabelTip
-            && hitInfo?.label
-            && !this.options?.horizontal) {
-            const selectedLabel = this.getLabelFormat(
-              Math.min(axisMax, hitInfo.label + (0 * stepValue)),
-            );
-            if (selectedLabel === labelText) {
-              const height = Math.round(ctx.measureText(this.labelStyle?.fontSize).width);
-              Util.showLabelTip({
-                ctx: this.ctx,
-                width: Math.round(ctx.measureText(selectedLabel).width) + 10,
-                height,
-                x: labelCenter,
-                y: labelPoint + (height - 2),
-                borderRadius: 2,
-                arrowSize: 3,
-                text: labelText,
-                backgroundColor: options?.selectItem?.labelTipStyle?.backgroundColor,
-                textColor: options?.selectItem?.labelTipStyle?.textColor,
-              });
+          if (this.type === 'x') {
+            labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
+            if (options?.brush?.showLabel || !options?.brush) {
+              ctx.fillText(labelText, labelCenter, labelPoint);
             }
-          }
-          if (ix !== 0 && this.showGrid) {
-            ctx.moveTo(linePosition, offsetPoint);
-            ctx.lineTo(linePosition, offsetCounterPoint);
-          }
-        } else {
-          labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
-          if (options?.brush?.showLabel || !options?.brush) {
-            ctx.fillText(labelText, labelPoint, labelCenter);
-          }
 
-          if (ix === steps) {
-            linePosition -= 1;
-          }
+            if (!isBlurredLabel
+              && options?.selectItem?.showLabelTip
+              && hitInfo?.label
+              && !this.options?.horizontal) {
+              const selectedLabel = this.getLabelFormat(
+                Math.min(axisMax, hitInfo.label + (0 * stepValue)),
+              );
+              if (selectedLabel === labelText) {
+                const height = Math.round(ctx.measureText(this.labelStyle?.fontSize).width);
+                Util.showLabelTip({
+                  ctx: this.ctx,
+                  width: Math.round(ctx.measureText(selectedLabel).width) + 10,
+                  height,
+                  x: labelCenter,
+                  y: labelPoint + (height - 2),
+                  borderRadius: 2,
+                  arrowSize: 3,
+                  text: labelText,
+                  backgroundColor: options?.selectItem?.labelTipStyle?.backgroundColor,
+                  textColor: options?.selectItem?.labelTipStyle?.textColor,
+                });
+              }
+            }
+            if ((ix !== 0 || options?.axesX[0].flow) && this.showGrid) {
+              ctx.moveTo(linePosition, offsetPoint);
+              ctx.lineTo(linePosition, offsetCounterPoint);
+            }
+          } else {
+            labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
+            if (options?.brush?.showLabel || !options?.brush) {
+              ctx.fillText(labelText, labelPoint, labelCenter);
+            }
+
+            if (ix === steps) {
+              linePosition -= 1;
+            }
 
-          if (ix !== 0 && this.showGrid) {
-            ctx.moveTo(offsetPoint, linePosition);
-            ctx.lineTo(offsetCounterPoint, linePosition);
+            if (ix !== 0 && this.showGrid) {
+              ctx.moveTo(offsetPoint, linePosition);
+              ctx.lineTo(offsetCounterPoint, linePosition);
+            }
           }
-        }
 
-        ctx.stroke();
-        ctx.closePath();
+          ctx.stroke();
+          ctx.closePath();
+        }
       }
     }
 
@@ -527,7 +543,7 @@ class Scale {
 
   /**
    * Draw X Plot line
-   * @param {object} dataX         Data's X Position
+   * @param {number} dataX         Data's X Position
    * @param {number} minX          Min X Position
    * @param {number} maxX          Max X Position
    * @param {number} minY          Min Y Position
@@ -544,8 +560,11 @@ class Scale {
       return;
     }
 
-    ctx.moveTo(dataX, maxY);
-    ctx.lineTo(dataX, minY);
+    let dataXPos = dataX;
+    dataXPos += Util.aliasPixel(ctx.lineWidth);
+
+    ctx.moveTo(dataXPos, maxY);
+    ctx.lineTo(dataXPos, minY);
 
     ctx.stroke();
     ctx.restore();
@@ -554,7 +573,7 @@ class Scale {
 
   /**
    * Draw Y Plot line
-   * @param {object} dataY         Data's Y Position
+   * @param {number} dataY         Data's Y Position
    * @param {number} minX          Min X Position
    * @param {number} maxX          Max X Position
    * @param {number} minY          Min Y Position
@@ -571,8 +590,11 @@ class Scale {
       return;
     }
 
-    ctx.moveTo(minX, dataY);
-    ctx.lineTo(maxX, dataY);
+    let dataYPos = dataY;
+    dataYPos += Util.aliasPixel(ctx.lineWidth);
+
+    ctx.moveTo(minX, dataYPos);
+    ctx.lineTo(maxX, dataYPos);
 
     ctx.stroke();
     ctx.restore();

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

@@ -5,11 +5,6 @@ import Util from '../helpers/helpers.util';
 import { truthyNumber } from '../../../common/utils';
 
 class StepScale extends Scale {
-  constructor(type, axisOpt, ctx, labels, options) {
-    super(type, axisOpt, ctx, options);
-    this.labels = labels;
-  }
-
   /**
    * Calculate min/max value, label and size information for step scale
    * @param {object} minMax       min/max information (unused on step scale)

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

@@ -4,12 +4,6 @@ import Scale from './scale';
 import Util from '../helpers/helpers.util';
 
 class TimeCategoryScale extends Scale {
-  constructor(type, axisOpt, ctx, labels, options) {
-    super(type, axisOpt, ctx);
-    this.labels = labels;
-    this.options = options;
-  }
-
   /**
    * Transforming label by designated format
    * @param {number} value       label value

package/src/components/chart/uses.js

@@ -181,6 +181,7 @@ const DEFAULT_OPTIONS = {
   dragSelection: {
     use: false,
     keepDisplay: true,
+    size: 50,
     fillColor: '#38ACEC',
     opacity: 0.65,
   },