evui 3.1.38 → 3.1.42

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

@@ -1,5 +1,12 @@
+import Canvas from '@/components/chart/helpers/helpers.canvas';
 import { defaultsDeep } from 'lodash-es';
-import { AXIS_OPTION, AXIS_UNITS } from '../helpers/helpers.constant';
+import {
+  AXIS_OPTION,
+  AXIS_UNITS,
+  PLOT_LINE_OPTION,
+  PLOT_LINE_LABEL_OPTION,
+  PLOT_BAND_OPTION,
+} from '../helpers/helpers.constant';
 import Util from '../helpers/helpers.util';
 
 class Scale {
@@ -213,80 +220,537 @@ class Scale {
       return;
     }
 
-    const labelGap = (endPoint - startPoint) / steps;
-    const ticks = [];
-    let labelCenter = null;
-    let linePosition = null;
+    if (this.labelStyle?.show) {
+      const labelGap = (endPoint - startPoint) / steps;
+      const ticks = [];
+      let labelCenter = null;
+      let linePosition = null;
 
-    ctx.strokeStyle = this.gridLineColor;
-    ctx.lineWidth = 1;
-    aliasPixel = Util.aliasPixel(ctx.lineWidth);
-
-    let labelText;
-    for (let ix = 0; ix <= steps; ix++) {
-      ctx.beginPath();
-      ticks[ix] = axisMin + (ix * stepValue);
+      ctx.strokeStyle = this.gridLineColor;
+      ctx.lineWidth = 1;
+      aliasPixel = Util.aliasPixel(ctx.lineWidth);
 
-      labelCenter = Math.round(startPoint + (labelGap * ix));
-      linePosition = labelCenter + aliasPixel;
-      labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
+      let labelText;
+      for (let ix = 0; ix <= steps; ix++) {
+        ctx.beginPath();
+        ticks[ix] = axisMin + (ix * stepValue);
+
+        labelCenter = Math.round(startPoint + (labelGap * ix));
+        linePosition = labelCenter + aliasPixel;
+        labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
+
+        let labelPoint;
+
+        if (this.type === 'x') {
+          labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
+          ctx.fillText(labelText, labelCenter, labelPoint);
+          if (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 && this.showGrid) {
+            ctx.moveTo(linePosition, offsetPoint);
+            ctx.lineTo(linePosition, offsetCounterPoint);
+          }
+        } else {
+          labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
+          ctx.fillText(labelText, labelPoint, labelCenter);
 
-      let labelPoint;
+          if (ix === steps) {
+            linePosition += 1;
+          }
 
-      if (this.type === 'x') {
-        labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
-        ctx.fillText(labelText, labelCenter, labelPoint);
-        if (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 && this.showGrid) {
+            ctx.moveTo(offsetPoint, linePosition);
+            ctx.lineTo(offsetCounterPoint, linePosition);
           }
         }
-        if (this.showIndicator) {
-          ctx.moveTo(linePosition, offsetPoint + 6);
-          ctx.lineTo(linePosition, offsetPoint);
+
+        ctx.stroke();
+        ctx.closePath();
+      }
+    }
+
+    // Draw plot lines and plot bands
+    if (this.plotBands?.length || this.plotLines?.length) {
+      const xArea = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
+      const yArea = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
+      const padding = aliasPixel + 1;
+      const minX = aPos.x1 + padding;
+      const maxX = aPos.x2;
+      const minY = aPos.y1 + padding; // top
+      const maxY = aPos.y2; // bottom
+
+      this.plotBands?.forEach((plotBand) => {
+        if (!plotBand.from && !plotBand.to) {
+          return;
         }
 
-        if (ix !== 0 && this.showGrid) {
-          ctx.moveTo(linePosition, offsetPoint);
-          ctx.lineTo(linePosition, offsetCounterPoint);
+        const mergedPlotBandOpt = defaultsDeep({}, plotBand, PLOT_BAND_OPTION);
+        const { from, to, label: labelOpt } = mergedPlotBandOpt;
+
+        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);
+          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);
+          this.drawYPlotBand(fromPos, toPos, minX, maxX, minY, maxY);
         }
-      } else {
-        labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
-        ctx.fillText(labelText, labelPoint, labelCenter);
 
-        if (ix === steps) {
-          linePosition += 1;
+        if (labelOpt.show) {
+          const labelOptions = this.getNormalizedLabelOptions(chartRect, labelOpt);
+          const textXY = this.getPlotBandLabelPosition(fromPos, toPos, labelOptions, maxX, minY);
+          this.drawPlotLabel(labelOptions, textXY);
         }
 
-        if (this.showIndicator) {
-          ctx.moveTo(offsetPoint - 6, linePosition);
-          ctx.lineTo(offsetPoint, linePosition);
+        ctx.restore();
+      });
+
+      this.plotLines?.forEach((plotLine) => {
+        if (!plotLine.value) {
+          return;
+        }
+
+        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);
+          this.drawXPlotLine(dataPos, minX, maxX, minY, maxY);
+        } else {
+          dataPos = Canvas.calculateY(value, axisMin, axisMax, yArea, maxY);
+          this.drawYPlotLine(dataPos, minX, maxX, minY, maxY);
         }
 
-        if (ix !== 0 && this.showGrid) {
-          ctx.moveTo(offsetPoint, linePosition);
-          ctx.lineTo(offsetCounterPoint, linePosition);
+        if (labelOpt.show) {
+          const labelOptions = this.getNormalizedLabelOptions(chartRect, labelOpt);
+          const textXY = this.getPlotLineLabelPosition(dataPos, labelOptions, maxX, minY);
+          this.drawPlotLabel(labelOptions, textXY);
         }
+
+        ctx.restore();
+      });
+    }
+  }
+
+  /**
+   * Set plot line style
+   * @param {object} plotLine      plotLine Options
+   *
+   * @returns {undefined}
+   */
+  setPlotLineStyle(plotLine) {
+    const ctx = this.ctx;
+    const { color, lineWidth } = plotLine;
+
+    ctx.beginPath();
+    ctx.save();
+    ctx.lineWidth = lineWidth;
+    ctx.strokeStyle = color;
+
+    if (plotLine.segments) {
+      ctx.setLineDash(plotLine.segments);
+    }
+  }
+
+  /**
+   * Set plot band style
+   * @param {object} plotBand      plotBand Options
+   *
+   * @returns {undefined}
+   */
+  setPlotBandStyle(plotBand) {
+    const ctx = this.ctx;
+    const { color } = plotBand;
+
+    ctx.beginPath();
+    ctx.save();
+    ctx.fillStyle = color;
+  }
+
+  /**
+   * Draw X Plot band
+   * @param {number} fromDataX     From data's X Position
+   * @param {number} toDataX       To data's X Position
+   * @param {number} minX          Min X Position
+   * @param {number} maxX          Max X Position
+   * @param {number} minY          Min Y Position
+   * @param {number} maxY          Max Y Position
+   *
+   * @returns {undefined}
+   */
+  drawXPlotBand(fromDataX, toDataX, minX, maxX, minY, maxY) {
+    const ctx = this.ctx;
+
+    const checkValidPosition = x => x || x > minX || x < maxX;
+
+    if (!checkValidPosition(fromDataX) || !checkValidPosition(toDataX)) {
+      ctx.closePath();
+      ctx.restore();
+      return;
+    }
+
+    ctx.moveTo(fromDataX, minY);
+    ctx.lineTo(fromDataX, maxY);
+    ctx.lineTo(toDataX, maxY);
+    ctx.lineTo(toDataX, minY);
+    ctx.lineTo(fromDataX, minY);
+
+    ctx.stroke();
+    ctx.fill();
+    ctx.restore();
+    ctx.closePath();
+  }
+
+  /**
+   * Draw X Plot line
+   * @param {object} dataX         Data's X Position
+   * @param {number} minX          Min X Position
+   * @param {number} maxX          Max X Position
+   * @param {number} minY          Min Y Position
+   * @param {number} maxY          Max Y Position
+   *
+   * @returns {undefined}
+   */
+  drawXPlotLine(dataX, minX, maxX, minY, maxY) {
+    const ctx = this.ctx;
+
+    if (!dataX || dataX < minX || dataX > maxX) {
+      ctx.closePath();
+      ctx.restore();
+      return;
+    }
+
+    ctx.moveTo(dataX, maxY);
+    ctx.lineTo(dataX, minY);
+
+    ctx.stroke();
+    ctx.restore();
+    ctx.closePath();
+  }
+
+  /**
+   * Draw Y Plot line
+   * @param {object} dataY         Data's Y Position
+   * @param {number} minX          Min X Position
+   * @param {number} maxX          Max X Position
+   * @param {number} minY          Min Y Position
+   * @param {number} maxY          Max Y Position
+   *
+   * @returns {undefined}
+   */
+  drawYPlotLine(dataY, minX, maxX, minY, maxY) {
+    const ctx = this.ctx;
+
+    if (!dataY || dataY > maxY || dataY < minY) {
+      ctx.closePath();
+      ctx.restore();
+      return;
+    }
+
+    ctx.moveTo(minX, dataY);
+    ctx.lineTo(maxX, dataY);
+
+    ctx.stroke();
+    ctx.restore();
+    ctx.closePath();
+  }
+
+  /**
+   * Draw Y Plot band
+   * @param {number} fromDataY     From data's Y Position (bottom)
+   * @param {number} toDataY       To data's Y Position (top)
+   * @param {number} minX          Min X Position
+   * @param {number} maxX          Max X Position
+   * @param {number} minY          Min Y Position
+   * @param {number} maxY          Max Y Position
+   *
+   * @returns {undefined}
+   */
+  drawYPlotBand(fromDataY, toDataY, minX, maxX, minY, maxY) {
+    const ctx = this.ctx;
+
+    const checkValidPosition = y => y || y > minY || y < maxY;
+
+    if (!checkValidPosition(fromDataY) || !checkValidPosition(toDataY)) {
+      ctx.closePath();
+      ctx.restore();
+      return;
+    }
+
+    ctx.moveTo(minX, fromDataY);
+    ctx.lineTo(minX, toDataY);
+    ctx.lineTo(maxX, toDataY);
+    ctx.lineTo(maxX, fromDataY);
+    ctx.lineTo(minX, fromDataY);
+
+    ctx.fill();
+    ctx.restore();
+    ctx.closePath();
+  }
+
+  /**
+   * get normalized options for plot label
+   * @param {object} chartRect     chartRect
+   * @param {object} labelOpt      plotLine Options
+   *
+   * @returns {object}
+   */
+  getNormalizedLabelOptions(chartRect, labelOpt) {
+    const mergedLabelOpt = defaultsDeep({}, labelOpt, PLOT_LINE_LABEL_OPTION);
+
+    const ctx = this.ctx;
+    const { maxWidth } = mergedLabelOpt;
+    const fontSize = mergedLabelOpt.fontSize > 20 ? 20 : mergedLabelOpt.fontSize;
+    let label = mergedLabelOpt.text;
+    let labelWidth = maxWidth ?? ctx.measureText(label).width;
+
+    const plotLabelAreaWidth = this.type === 'y'
+      ? chartRect.width - chartRect.chartWidth
+      : maxWidth ?? chartRect.width;
+
+    if (plotLabelAreaWidth < ctx.measureText(label).width && mergedLabelOpt.textOverflow === 'ellipsis') {
+      label = Util.truncateLabelWithEllipsis(mergedLabelOpt.text, plotLabelAreaWidth, ctx);
+      labelWidth = ctx.measureText(label).width;
+    }
+
+    return {
+      label,
+      fontSize,
+      labelWidth,
+      labelBoxPadding: fontSize / 4,
+      labelHalfWidth: labelWidth / 2,
+      labelHalfHeight: fontSize / 2,
+      ...mergedLabelOpt,
+    };
+  }
+
+  /**
+   * Calculate position of plot band's label
+   * @param {object} fromPos       from data position
+   * @param {object} toPos         to data position
+   * @param {object} labelOpt      label options
+   * @param {object} maxX          max x position
+   * @param {object} minY          min y position
+   *
+   * @returns {object}
+   */
+  getPlotBandLabelPosition(fromPos, toPos, labelOpt, maxX, minY) {
+    const {
+      fontSize,
+      labelWidth,
+      labelHalfWidth,
+      labelHalfHeight,
+      labelBoxPadding,
+      textAlign,
+      verticalAlign,
+    } = labelOpt;
+
+    if (fontSize <= 0) {
+      return { textX: 0, textY: 0 };
+    }
+
+    let textX;
+    let textY;
+
+    if (this.type === 'x') {
+      textY = minY - labelBoxPadding - fontSize;
+
+      switch (textAlign) {
+        case 'left':
+          textX = fromPos + labelHalfWidth + labelBoxPadding;
+          break;
+
+        case 'right':
+          textX = toPos - labelHalfWidth - labelBoxPadding;
+          break;
+
+        case 'center':
+        default:
+          textX = ((toPos - fromPos) / 2) + fromPos;
+          break;
+      }
+    } else {
+      textX = maxX + labelWidth + labelBoxPadding;
+
+      switch (verticalAlign) {
+        case 'top':
+          textY = toPos + labelHalfHeight + labelBoxPadding;
+          break;
+
+        case 'bottom':
+          textY = fromPos - labelHalfHeight - labelBoxPadding;
+          break;
+
+        case 'middle':
+        default:
+          textY = ((fromPos - toPos) / 2) + toPos;
+          break;
       }
+    }
 
+    return { textX, textY };
+  }
+
+  /**
+   * Calculate position of plot line's label
+   * @param {object} dataPos       data position
+   * @param {object} labelOpt      label options
+   * @param {object} maxX          max x position
+   * @param {object} minY          min y position
+   *
+   * @returns {undefined}
+   */
+  getPlotLineLabelPosition(dataPos, labelOpt, maxX, minY) {
+    const {
+      fontSize,
+      labelWidth,
+      labelHalfWidth,
+      labelHalfHeight,
+      labelBoxPadding,
+    } = labelOpt;
+
+    if (fontSize <= 0) {
+      return { textX: 0, textY: 0 };
+    }
+
+    let textX;
+    let textY;
+
+    if (this.type === 'x') {
+      textY = minY - labelBoxPadding - fontSize;
+
+      switch (labelOpt.textAlign) {
+        case 'left':
+          textX = dataPos - labelHalfWidth - labelBoxPadding;
+          break;
+
+        case 'right':
+          textX = dataPos + labelHalfWidth + labelBoxPadding;
+          break;
+
+        case 'center':
+        default:
+          textX = dataPos;
+          break;
+      }
+    } else {
+      textX = maxX + labelWidth + labelBoxPadding;
+
+      switch (labelOpt.verticalAlign) {
+        case 'top':
+          textY = dataPos - labelHalfHeight - labelBoxPadding;
+          break;
+
+        case 'bottom':
+          textY = dataPos + labelHalfHeight + labelBoxPadding;
+          break;
+
+        case 'middle':
+        default:
+          textY = dataPos;
+          break;
+      }
+    }
+
+    return { textX, textY };
+  }
+
+  /**
+   * Calculate Values for drawing label
+   * @param {object} labelOptions  plot line Label Options
+   * @param {object} positions     x, y Position
+   *
+   * @returns {undefined}
+   */
+  drawPlotLabel(labelOptions, positions) {
+    if (!positions) {
+      return;
+    }
+
+    const { textX, textY } = positions;
+    const {
+      label,
+      fontSize,
+      fontColor,
+      fillColor,
+      lineColor,
+      lineWidth,
+      labelBoxPadding,
+      labelWidth,
+      labelHalfWidth,
+      labelHalfHeight,
+    } = labelOptions;
+
+    if (fontSize <= 0) {
+      return;
+    }
+
+    const ctx = this.ctx;
+    ctx.save();
+    ctx.beginPath();
+    ctx.font = Util.getLabelStyle(labelOptions);
+
+    let top = 0;
+    let bottom = 0;
+    let left = 0;
+    let right = 0;
+
+    if (this.type === 'x') {
+      top = textY - labelBoxPadding;
+      bottom = textY + fontSize;
+      left = textX - labelHalfWidth - labelBoxPadding;
+      right = textX + labelHalfWidth + labelBoxPadding;
+    } else {
+      top = textY - labelHalfHeight - labelBoxPadding;
+      bottom = textY + labelHalfHeight + labelBoxPadding;
+      left = textX - labelWidth;
+      right = textX + labelBoxPadding;
+    }
+
+    ctx.fillStyle = fillColor;
+    ctx.strokeStyle = lineColor;
+    ctx.lineWidth = lineWidth;
+    ctx.moveTo(left, bottom);
+    ctx.lineTo(left, top);
+    ctx.lineTo(right, top);
+    ctx.lineTo(right, bottom);
+    ctx.lineTo(left, bottom);
+    ctx.fill();
+
+    if (lineWidth > 0) {
       ctx.stroke();
-      ctx.closePath();
     }
+
+    ctx.fillStyle = fontColor;
+
+    ctx.fillText(label, textX, textY);
+    ctx.closePath();
   }
 }
 

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

@@ -9,6 +9,14 @@ class LinearScale extends Scale {
    * @returns {string} formatted label
    */
   getLabelFormat(value) {
+    if (this.formatter) {
+      const formattedLabel = this.formatter(value);
+
+      if (typeof formattedLabel === 'string') {
+        return formattedLabel;
+      }
+    }
+
     return Util.labelSignFormat(value, this.decimalPoint);
   }
 

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

@@ -101,6 +101,14 @@ class LogarithmicScale extends Scale {
    * @returns {string} formatted label
    */
   getLabelFormat(value) {
+    if (this.formatter) {
+      const formattedLabel = this.formatter(value);
+
+      if (typeof formattedLabel === 'string') {
+        return formattedLabel;
+      }
+    }
+
     return Util.labelSignFormat(value, this.decimalPoint);
   }