evui 3.1.39 → 3.1.43

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

@@ -5,6 +5,7 @@ import {
   AXIS_UNITS,
   PLOT_LINE_OPTION,
   PLOT_LINE_LABEL_OPTION,
+  PLOT_BAND_OPTION,
 } from '../helpers/helpers.constant';
 import Util from '../helpers/helpers.util';
 
@@ -219,82 +220,115 @@ 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);
+      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);
+      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]));
+        labelCenter = Math.round(startPoint + (labelGap * ix));
+        linePosition = labelCenter + aliasPixel;
+        labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
 
-      let labelPoint;
+        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 (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);
+          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);
 
-        if (ix === steps) {
-          linePosition += 1;
-        }
+          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();
+      }
     }
 
-    // Draw plot line
-    if (this.plotLines?.length) {
+    // 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;
-      const maxY = aPos.y2;
+      const minY = aPos.y1 + padding; // top
+      const maxY = aPos.y2; // bottom
+
+      this.plotBands?.forEach((plotBand) => {
+        if (!plotBand.from && !plotBand.to) {
+          return;
+        }
+
+        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);
+        }
+
+        if (labelOpt.show) {
+          const labelOptions = this.getNormalizedLabelOptions(chartRect, labelOpt);
+          const textXY = this.getPlotBandLabelPosition(fromPos, toPos, labelOptions, maxX, minY);
+          this.drawPlotLabel(labelOptions, textXY);
+        }
 
-      this.plotLines.forEach((plotLine) => {
+        ctx.restore();
+      });
+
+      this.plotLines?.forEach((plotLine) => {
         if (!plotLine.value) {
           return;
         }
@@ -304,12 +338,19 @@ class Scale {
 
         this.setPlotLineStyle(mergedPlotLineOpt);
 
+        let dataPos;
         if (this.type === 'x') {
-          const dataX = Canvas.calculateX(value, axisMin, axisMax, xArea, minX);
-          this.drawXPlotLine(dataX, minX, maxX, minY, maxY, labelOpt);
+          dataPos = Canvas.calculateX(value, axisMin, axisMax, xArea, minX);
+          this.drawXPlotLine(dataPos, minX, maxX, minY, maxY);
         } else {
-          const dataY = Canvas.calculateY(value, axisMin, axisMax, yArea, maxY);
-          this.drawYPlotLine(dataY, minX, maxX, minY, maxY, labelOpt);
+          dataPos = Canvas.calculateY(value, axisMin, axisMax, yArea, maxY);
+          this.drawYPlotLine(dataPos, minX, maxX, minY, maxY);
+        }
+
+        if (labelOpt.show) {
+          const labelOptions = this.getNormalizedLabelOptions(chartRect, labelOpt);
+          const textXY = this.getPlotLineLabelPosition(dataPos, labelOptions, maxX, minY);
+          this.drawPlotLabel(labelOptions, textXY);
         }
 
         ctx.restore();
@@ -337,6 +378,55 @@ class Scale {
     }
   }
 
+  /**
+   * 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
@@ -344,11 +434,10 @@ class Scale {
    * @param {number} maxX          Max X Position
    * @param {number} minY          Min Y Position
    * @param {number} maxY          Max Y Position
-   * @param {object} labelOpt      plotLine Options
    *
    * @returns {undefined}
    */
-  drawXPlotLine(dataX, minX, maxX, minY, maxY, labelOpt) {
+  drawXPlotLine(dataX, minX, maxX, minY, maxY) {
     const ctx = this.ctx;
 
     if (!dataX || dataX < minX || dataX > maxX) {
@@ -363,51 +452,6 @@ class Scale {
     ctx.stroke();
     ctx.restore();
     ctx.closePath();
-
-    if (labelOpt) {
-      const mergedLabelOpt = defaultsDeep({}, labelOpt, PLOT_LINE_LABEL_OPTION);
-
-      ctx.save();
-      ctx.beginPath();
-      ctx.font = Util.getLabelStyle(mergedLabelOpt);
-
-      const {
-        fontSize,
-        labelBoxPadding,
-        labelHalfWidth,
-      } = this.getLabelParameters(mergedLabelOpt);
-
-      if (fontSize <= 0) {
-        return;
-      }
-
-      let textX;
-      switch (mergedLabelOpt.textAlign) {
-        case 'left':
-          textX = dataX - labelHalfWidth - labelBoxPadding;
-          break;
-
-        case 'right':
-          textX = dataX + labelHalfWidth + labelBoxPadding;
-          break;
-
-        case 'center':
-        default:
-          textX = dataX;
-          break;
-      }
-
-      const textY = minY - labelBoxPadding - fontSize;
-
-      this.drawPlotLineLabel(mergedLabelOpt, {
-        top: minY - (labelBoxPadding * 2) - fontSize,
-        bottom: minY - labelBoxPadding,
-        left: textX - labelHalfWidth - labelBoxPadding,
-        right: textX + labelHalfWidth + labelBoxPadding,
-        x: textX,
-        y: textY,
-      });
-    }
   }
 
   /**
@@ -417,11 +461,10 @@ class Scale {
    * @param {number} maxX          Max X Position
    * @param {number} minY          Min Y Position
    * @param {number} maxY          Max Y Position
-   * @param {object} labelOpt      plotLine Options
    *
    * @returns {undefined}
    */
-  drawYPlotLine(dataY, minX, maxX, minY, maxY, labelOpt) {
+  drawYPlotLine(dataY, minX, maxX, minY, maxY) {
     const ctx = this.ctx;
 
     if (!dataY || dataY > maxY || dataY < minY) {
@@ -436,91 +479,263 @@ class Scale {
     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;
 
-    if (labelOpt) {
-      const mergedLabelOpt = defaultsDeep({}, labelOpt, PLOT_LINE_LABEL_OPTION);
+    const checkValidPosition = y => y || y > minY || y < maxY;
 
-      ctx.save();
-      ctx.beginPath();
-      ctx.font = Util.getLabelStyle(mergedLabelOpt);
+    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;
 
-      const {
-        fontSize,
-        labelWidth,
-        labelHalfHeight,
-        labelBoxPadding,
-      } = this.getLabelParameters(mergedLabelOpt);
+        case 'right':
+          textX = toPos - labelHalfWidth - labelBoxPadding;
+          break;
 
-      if (fontSize <= 0) {
-        return;
+        case 'center':
+        default:
+          textX = ((toPos - fromPos) / 2) + fromPos;
+          break;
       }
+    } else {
+      textX = maxX + labelWidth + labelBoxPadding;
 
-      let textY;
-      switch (mergedLabelOpt.verticalAlign) {
+      switch (verticalAlign) {
         case 'top':
-          textY = dataY - labelHalfHeight - labelBoxPadding;
+          textY = toPos + labelHalfHeight + labelBoxPadding;
           break;
 
         case 'bottom':
-          textY = dataY + labelHalfHeight + labelBoxPadding;
+          textY = fromPos - labelHalfHeight - labelBoxPadding;
           break;
 
         case 'middle':
         default:
-          textY = dataY;
+          textY = ((fromPos - toPos) / 2) + toPos;
           break;
       }
-
-      const textX = maxX + labelWidth + labelBoxPadding;
-
-      this.drawPlotLineLabel(mergedLabelOpt, {
-        top: textY - labelHalfHeight - labelBoxPadding,
-        bottom: textY + labelHalfHeight + labelBoxPadding,
-        left: textX - labelWidth - (labelBoxPadding / 2),
-        right: textX + labelBoxPadding,
-        x: textX,
-        y: textY,
-      });
     }
+
+    return { textX, textY };
   }
 
   /**
-   * Calculate Values for drawing label
-   * @param {object} labelOpt      plotLine Options
+   * 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 {object}
+   * @returns {undefined}
    */
-  getLabelParameters(labelOpt) {
-    const ctx = this.ctx;
-    const fontSize = labelOpt.fontSize > 20 ? 20 : labelOpt.fontSize;
-    const labelBoxPadding = fontSize / 4;
-    const labelWidth = ctx.measureText(labelOpt.text).width;
-    const labelHalfWidth = labelWidth / 2;
-    const labelHalfHeight = fontSize / 2;
-
-    return {
+  getPlotLineLabelPosition(dataPos, labelOpt, maxX, minY) {
+    const {
       fontSize,
-      labelBoxPadding,
       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} labelOpt      plot line Label Options
-   * @param {object} positions     label positions
+   * @param {object} labelOptions  plot line Label Options
+   * @param {object} positions     x, y Position
    *
    * @returns {undefined}
    */
-  drawPlotLineLabel(labelOpt, positions) {
+  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;
-    const { top, bottom, left, right, x, y } = positions;
+    ctx.save();
+    ctx.beginPath();
+    ctx.font = Util.getLabelStyle(labelOptions);
+
+    let top = 0;
+    let bottom = 0;
+    let left = 0;
+    let right = 0;
 
-    ctx.fillStyle = labelOpt.fillColor;
-    ctx.strokeStyle = labelOpt.lineColor;
-    ctx.lineWidth = labelOpt.lineWidth;
+    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);
@@ -528,12 +743,13 @@ class Scale {
     ctx.lineTo(left, bottom);
     ctx.fill();
 
-    if (labelOpt.lineWidth > 0) {
+    if (lineWidth > 0) {
       ctx.stroke();
     }
 
-    ctx.fillStyle = labelOpt.fontColor;
-    ctx.fillText(labelOpt.text, x, y);
+    ctx.fillStyle = fontColor;
+
+    ctx.fillText(label, textX, textY);
     ctx.closePath();
   }
 }