evui 3.4.206 → 3.4.208

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

@@ -1,951 +0,0 @@
-import Canvas from '@/components/chart/helpers/helpers.canvas';
-import { defaultsDeep } from 'lodash-es';
-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 {
-  constructor(type, axisOpt, ctx, options) {
-    const merged = defaultsDeep({}, axisOpt, AXIS_OPTION);
-    Object.keys(merged).forEach((key) => {
-      this[key] = merged[key];
-    });
-
-    this.type = type;
-    this.ctx = ctx;
-    this.units = AXIS_UNITS[this.type];
-    this.options = options;
-
-    if (!this.position) {
-      this.position = type === 'x' ? 'bottom' : 'left';
-    }
-  }
-
-  /**
-   * Calculate axis's min/max label steps
-   * @param {string} type           axis direction ('x', 'y')
-   * @param {object} chartRect      chart size information
-   * @param {object} labelOffset    chart label offset information
-   * @param {number} tickSize       label's size
-   *
-   * @returns {object} label range
-   */
-  calculateLabelRange(type, chartRect, labelOffset, tickSize) {
-    let chartSize;
-    let axisOffset;
-    let bufferedTickSize;
-
-    if (type === 'x') {
-      chartSize = chartRect.chartWidth;
-      bufferedTickSize = Math.floor(tickSize * 1.1);
-      axisOffset = [labelOffset.left, labelOffset.right];
-    } else {
-      chartSize = chartRect.chartHeight;
-      axisOffset = [labelOffset.top, labelOffset.bottom];
-      bufferedTickSize = tickSize + (Math.floor(chartSize * 0.1));
-    }
-
-    const drawRange = chartSize - (axisOffset[0] + axisOffset[1]);
-    const minSteps = 1;
-    const maxSteps = Math.max(Math.floor(drawRange / bufferedTickSize) - 1, 1);
-
-    return {
-      min: minSteps,
-      max: maxSteps,
-    };
-  }
-
-  /**
-   * Calculate min/max value, label and size information for axis
-   * @param {object} minMax    min/max information
-   * @param {object} scrollbarOpt scrollbar option
-   *
-   * @returns {object} min/max value and label
-   */
-  calculateScaleRange(minMax, scrollbarOpt) {
-    let maxValue;
-    let minValue;
-    let isDefaultMaxSameAsMin = false;
-
-    const range = scrollbarOpt?.use ? scrollbarOpt?.range : this.range;
-    if (Array.isArray(range) && range?.length === 2) {
-      if (this.options.type === 'heatMap') {
-        maxValue = range[1] > +minMax.max ? +minMax.max : range[1];
-        minValue = range[0] < +minMax.min ? +minMax.min : range[0];
-      } else {
-        maxValue = range[1];
-        minValue = range[0];
-      }
-    } else if (typeof range === 'function') {
-      [minValue, maxValue] = range(minMax.min, minMax.max);
-    } else {
-      maxValue = minMax.max;
-      minValue = minMax.min;
-    }
-
-    if (this.autoScaleRatio) {
-      maxValue = Math.ceil(maxValue * (this.autoScaleRatio + 1));
-    }
-
-    if (this.startToZero) {
-        minValue = 0;
-      }
-
-    if (maxValue === minValue) {
-      maxValue += 1;
-      isDefaultMaxSameAsMin = true;
-    }
-
-    const minLabel = this.getLabelFormat(minValue);
-    const maxLabel = this.getLabelFormat(maxValue, {
-      isMaxValueSameAsMin: isDefaultMaxSameAsMin,
-    });
-
-    return {
-      min: minValue,
-      max: maxValue,
-      minLabel,
-      maxLabel,
-      size: Util.calcTextSize(
-        maxLabel,
-        Util.getLabelStyle(this.labelStyle),
-        this.labelStyle?.padding,
-      ),
-    };
-  }
-
-  /**
-   * return width what has max length
-   * @param {string[]} notFormattedLabels
-   * @reutrn number maxWidth
-   */
-  getLabelWidthHasMaxLength(notFormattedLabels) {
-    return (notFormattedLabels ?? []).reduce((max, label) => {
-      const formattedLabel = this.getLabelFormat(label);
-      const width = Util.calcTextSize(
-          formattedLabel,
-          Util.getLabelStyle(this.labelStyle),
-      )?.width ?? 0;
-
-      return Math.max(max, width);
-    }, 0);
-  }
-
-  /**
-   * With range information, calculate how many labels in axis
-   * linear type은 scale.linear.js에서 처리
-   * @param {object} range    min/max information
-   *
-   * @returns {object} steps, interval, min/max graph value
-   */
-  calculateSteps(range) {
-    const { maxValue, minValue } = range;
-    let { maxSteps } = range;
-
-    let interval = this.getInterval(range);
-    let increase = minValue;
-    let numberOfSteps;
-
-    while (increase < maxValue) {
-      increase += interval;
-    }
-
-    const graphMax = increase;
-    const graphMin = minValue;
-    const graphRange = graphMax - graphMin;
-
-    numberOfSteps = Math.round(graphRange / interval);
-
-    if (maxValue === 1) {
-      if (!this.decimalPoint) {
-        interval = 1;
-        numberOfSteps = 1;
-        maxSteps = 1;
-      } else if (maxSteps > 2) {
-        interval = 0.2;
-        numberOfSteps = 5;
-        maxSteps = 5;
-      } else {
-        interval = 0.5;
-        numberOfSteps = 2;
-        maxSteps = 2;
-      }
-    }
-
-    while (numberOfSteps > maxSteps) {
-      interval *= 2;
-      numberOfSteps = Math.round(graphRange / interval);
-      interval = Math.ceil(graphRange / numberOfSteps);
-    }
-
-    if (graphMax - graphMin > (numberOfSteps * interval)) {
-      interval = Math.ceil((graphMax - graphMin) / numberOfSteps);
-    }
-
-    return {
-      steps: numberOfSteps,
-      interval,
-      graphMin,
-      graphMax,
-    };
-  }
-
-  /**
-   * Draw Axis Title
-   *
-   * @param {object} chartRect      min/max information
-   * @param {object} labelOffset    label offset information
-   *
-   * @returns {undefined}
-   */
-  drawAxisTitle(chartRect, labelOffset) {
-    const titleOpt = this.title;
-
-    if (!titleOpt?.use || isNaN(titleOpt.fontSize)) {
-      return;
-    }
-
-    const ctx = this.ctx;
-    ctx.save();
-    ctx.font = Util.getLabelStyle(titleOpt);
-    ctx.fillStyle = titleOpt.color;
-    ctx.textAlign = titleOpt.textAlign;
-
-    const axisLinePosition = {
-      xLeft: chartRect.x1 + labelOffset.left,
-      xRight: chartRect.x2 - labelOffset.right,
-      yTop: chartRect.y1,
-    };
-
-    let titleXPos;
-    let titleYPos;
-
-    const margin = 10;
-    if (this.type === 'x') {
-      titleXPos = axisLinePosition.xRight;
-      titleYPos = chartRect.y2 + titleOpt.fontSize + margin;
-    } else {
-      titleYPos = axisLinePosition.yTop - titleOpt.fontSize - margin;
-      titleXPos = axisLinePosition.xLeft;
-    }
-
-    if (titleXPos > 0 && titleYPos > 0) {
-      ctx.fillText(titleOpt.text, titleXPos, titleYPos);
-    }
-
-    ctx.restore();
-  }
-
-  /**
-   * Draw axis
-   * @param {object} chartRect      min/max information
-   * @param {object} labelOffset    label offset information
-   * @param {object} stepInfo       label steps information
-   * @param {object} hitInfo        hit information
-   * @param {object} selectLabelInfo selected label information
-   * @param {object} dataLabels     data label information, x axis only
-   *
-   * @returns {undefined}
-   */
-  draw(chartRect, labelOffset, stepInfo, hitInfo, selectLabelInfo, dataLabels) {
-    const ctx = this.ctx;
-    const options = this.options;
-    const aPos = {
-      x1: chartRect.x1 + labelOffset.left,
-      x2: chartRect.x2 - labelOffset.right,
-      y1: chartRect.y1 + labelOffset.top,
-      y2: chartRect.y2 - labelOffset.bottom,
-    };
-
-    const steps = stepInfo.steps;
-    const axisMin = stepInfo.graphMin;
-    const axisMax = stepInfo.graphMax;
-    const stepValue = stepInfo.interval;
-
-    const startPoint = aPos[this.units.rectStart];
-    const endPoint = aPos[this.units.rectEnd];
-    const offsetPoint = aPos[this.units.rectOffset(this.position)];
-    const offsetCounterPoint = aPos[this.units.rectOffsetCounter(this.position)];
-
-    const AXIS_TICK_LENGTH = 5;
-
-    let aliasPixel;
-
-    this.drawAxisTitle(chartRect, labelOffset);
-
-    // label font 설정
-    ctx.font = Util.getLabelStyle(this.labelStyle);
-    ctx.fillStyle = this.labelStyle.color;
-
-    if (this.type === 'x') {
-      ctx.textAlign = 'center';
-      ctx.textBaseline = this.position === 'top' ? 'bottom' : 'top';
-    } else {
-      ctx.textAlign = this.position === 'left' ? 'right' : 'left';
-      ctx.textBaseline = 'middle';
-    }
-
-    if (this.showAxis) {
-      ctx.lineWidth = this.axisLineWidth;
-      aliasPixel = Util.aliasPixel(ctx.lineWidth);
-
-      ctx.beginPath();
-      ctx.strokeStyle = this.axisLineColor;
-
-      if (this.type === 'x') {
-        ctx.moveTo(startPoint, offsetPoint + aliasPixel);
-        ctx.lineTo(endPoint, offsetPoint + aliasPixel);
-      } else {
-        ctx.moveTo(offsetPoint + aliasPixel, startPoint);
-        ctx.lineTo(offsetPoint + aliasPixel, endPoint);
-      }
-      ctx.stroke();
-      ctx.closePath();
-    }
-
-    if (steps === 0 || axisMin === null) {
-      return;
-    }
-
-    if (this.labelStyle?.show) {
-      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 && dataLabels.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;
-      aliasPixel = Util.aliasPixel(ctx.lineWidth);
-
-      let labelText;
-      for (let ix = 0; ix <= steps; ix++) {
-        labelCenter = Math.round(offsetStartPoint + (labelGap * ix));
-
-        if (labelCenter <= endPoint || this.type !== 'x' || !options?.axesX[0].flow || dataLabels.length === steps + 1) {
-          ctx.beginPath();
-          ticks[ix] = axisMinForLabel + (ix * stepValue);
-
-          const isZeroLine = ticks[ix] === 0;
-          if (isZeroLine && this.zeroLineColor) {
-            ctx.strokeStyle = this.zeroLineColor;
-          } else {
-            ctx.strokeStyle = this.gridLineColor;
-          }
-
-          linePosition = labelCenter + aliasPixel;
-          labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]), {
-            prev: ticks[ix - 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), {
-                prev: ticks[ix - 1] ?? '',
-              })).includes(labelText);
-
-          const labelColor = this.labelStyle.color;
-          let defaultOpacity = 1;
-
-          if (Util.getColorStringType(labelColor) === 'RGBA') {
-            defaultOpacity = Util.getOpacity(labelColor);
-          }
-
-          ctx.fillStyle = Util.colorStringToRgba(labelColor, isBlurredLabel ? 0.1 : defaultOpacity);
-
-          let labelPoint;
-
-          if (this.type === 'x') {
-            labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
-            if (options?.brush?.showLabel || !options?.brush) {
-              ctx.fillText(labelText, labelCenter, 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.showAxisTick) {
-              ctx.beginPath();
-              ctx.strokeStyle = this.axisLineColor;
-              ctx.moveTo(linePosition, offsetPoint);
-              ctx.lineTo(linePosition, offsetPoint + AXIS_TICK_LENGTH);
-              ctx.stroke();
-              ctx.closePath();
-            }
-
-            if ((ix !== 0 || options?.axesX[0].flow) && this.showGrid) {
-              ctx.beginPath();
-              ctx.strokeStyle = this.gridLineColor;
-              ctx.moveTo(linePosition, offsetPoint);
-              ctx.lineTo(linePosition, offsetCounterPoint);
-              ctx.stroke();
-              ctx.closePath();
-            }
-          } 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 (this.showAxisTick) {
-              ctx.beginPath();
-              ctx.strokeStyle = this.axisLineColor;
-              ctx.moveTo(offsetPoint + (this.axisLineWidth ?? 1), linePosition);
-              ctx.lineTo(offsetPoint - AXIS_TICK_LENGTH, linePosition);
-              ctx.stroke();
-              ctx.closePath();
-            }
-
-            if (ix !== 0 && this.showGrid) {
-              ctx.beginPath();
-              ctx.strokeStyle = this.gridLineColor;
-              ctx.moveTo(offsetPoint, linePosition);
-              ctx.lineTo(offsetCounterPoint, linePosition);
-              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;
-      const maxX = aPos.x2 + padding;
-      const minY = aPos.y1 - padding; // top
-      const maxY = aPos.y2; // bottom
-
-      this.plotBands?.forEach((plotBand) => {
-        const mergedPlotBandOpt = defaultsDeep({}, plotBand, PLOT_BAND_OPTION);
-        const { from: userDefinedFrom, to: userDefinedTo, label: labelOpt } = mergedPlotBandOpt;
-        const from = !Util.isNullOrUndefined(userDefinedFrom)
-         ? Math.max(userDefinedFrom, axisMin)
-         : axisMin;
-        const to = !Util.isNullOrUndefined(userDefinedTo)
-          ? Math.min(userDefinedTo, axisMax)
-          : axisMax;
-
-        this.setPlotBandStyle(mergedPlotBandOpt);
-
-        let fromPos;
-        let toPos;
-        if (this.type === 'x') {
-          fromPos = Canvas.calculateX(from, axisMin, axisMax, xArea, minX);
-          toPos = Canvas.calculateX(to, axisMin, axisMax, xArea, minX);
-
-          if (fromPos === null || toPos === null) {
-            return;
-          }
-
-          this.drawXPlotBand(fromPos, toPos, minX, maxX, minY, maxY);
-        } else {
-          fromPos = Canvas.calculateY(from, axisMin, axisMax, yArea, maxY);
-          toPos = Canvas.calculateY(to, axisMin, axisMax, yArea, maxY);
-
-          if (fromPos === null || toPos === null) {
-            return;
-          }
-
-          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);
-        }
-
-        ctx.restore();
-      });
-
-      this.plotLines?.forEach((plotLine) => {
-        if (typeof +plotLine.value !== 'number') {
-          return;
-        }
-
-        const mergedPlotLineOpt = defaultsDeep({}, plotLine, PLOT_LINE_OPTION);
-        const { value, label: labelOpt } = mergedPlotLineOpt;
-
-        let dataPos;
-        if (this.type === 'x') {
-          dataPos = Canvas.calculateX(value, axisMin, axisMax, xArea, minX);
-
-          if (dataPos === null) {
-            return;
-          }
-
-          this.setPlotLineStyle(mergedPlotLineOpt);
-          this.drawXPlotLine(dataPos, minX, maxX, minY, maxY);
-        } else {
-          dataPos = Canvas.calculateY(value, axisMin, axisMax, yArea, maxY);
-
-          if (dataPos === null) {
-            return;
-          }
-
-          this.setPlotLineStyle(mergedPlotLineOpt);
-          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();
-      });
-    }
-  }
-
-  /**
-   * 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 {number} 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;
-    }
-
-    let dataXPos = dataX;
-    dataXPos += Util.aliasPixel(ctx.lineWidth);
-
-    ctx.moveTo(dataXPos, maxY);
-    ctx.lineTo(dataXPos, minY);
-
-    ctx.stroke();
-    ctx.restore();
-    ctx.closePath();
-  }
-
-  /**
-   * Draw Y Plot line
-   * @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
-   * @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;
-    }
-
-    let dataYPos = dataY;
-    dataYPos += Util.aliasPixel(ctx.lineWidth);
-
-    ctx.moveTo(minX, dataYPos);
-    ctx.lineTo(maxX, dataYPos);
-
-    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.fillStyle = fontColor;
-
-    ctx.fillText(label, textX, textY);
-    ctx.closePath();
-  }
-}
-
-export default Scale;