evui 2.0.8 → 2.1.1

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

@@ -0,0 +1,272 @@
+import { defaultsDeep } from 'lodash-es';
+import { AXIS_OPTION, AXIS_UNITS } from '../helpers/helpers.constant';
+import Util from '../helpers/helpers.util';
+
+class Scale {
+  constructor(type, opt, ctx) {
+    const merged = defaultsDeep({}, opt, AXIS_OPTION);
+    Object.keys(merged).forEach((key) => {
+      this[key] = merged[key];
+    });
+
+    this.type = type;
+    this.ctx = ctx;
+    this.units = AXIS_UNITS[this.type];
+
+    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
+   *
+   * @returns {object} min/max value and label
+   */
+  calculateScaleRange(minMax) {
+    let maxValue;
+    let minValue;
+
+    if (this.range && this.range.length === 2) {
+      maxValue = this.range[1];
+      minValue = this.range[0];
+    } 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;
+    }
+
+    const minLabel = this.getLabelFormat(minValue);
+    const maxLabel = this.getLabelFormat(maxValue);
+
+    return {
+      min: minValue,
+      max: maxValue,
+      minLabel,
+      maxLabel,
+      size: Util.calcTextSize(maxLabel, Util.getLabelStyle(this.labelStyle)),
+    };
+  }
+
+  /**
+   * With range information, calculate how many labels in axis
+   * @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 > maxValue ? maxValue : increase;
+    const graphMin = minValue;
+    const graphRange = graphMax - graphMin;
+
+    numberOfSteps = Math.round(graphRange / interval);
+
+    if (maxValue === 1) {
+      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
+   * @param {object} chartRect      min/max information
+   * @param {object} labelOffset    label offset information
+   * @param {object} stepInfo       label steps information
+   *
+   * @returns {undefined}
+   */
+  draw(chartRect, labelOffset, stepInfo) {
+    const ctx = this.ctx;
+    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)];
+
+    let aliasPixel;
+
+    // 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 = 2;
+      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 + 1, startPoint);
+        ctx.lineTo(offsetPoint + aliasPixel + 1, endPoint);
+      }
+      ctx.stroke();
+      ctx.closePath();
+    }
+
+    if (steps === 0 || axisMin === null) {
+      return;
+    }
+
+    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);
+
+      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 (this.showIndicator) {
+          ctx.moveTo(linePosition, offsetPoint + 6);
+          ctx.lineTo(linePosition, offsetPoint);
+        }
+
+        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 (this.showIndicator) {
+          ctx.moveTo(offsetPoint - 6, linePosition);
+          ctx.lineTo(offsetPoint, linePosition);
+        }
+
+        if (ix !== 0 && this.showGrid) {
+          ctx.moveTo(offsetPoint, linePosition);
+          ctx.lineTo(offsetCounterPoint, linePosition);
+        }
+      }
+
+      ctx.stroke();
+      ctx.closePath();
+    }
+  }
+}
+
+export default Scale;

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

@@ -0,0 +1,30 @@
+import Scale from './scale';
+import Util from '../helpers/helpers.util';
+
+class LinearScale extends Scale {
+  /**
+   * Transforming label by designated format
+   * @param {number} value    label value
+   *
+   * @returns {string} formatted label
+   */
+  getLabelFormat(value) {
+    return Util.labelSignFormat(value, this.decimalPoint);
+  }
+
+  /**
+   * Calculate interval
+   * @param {object} range    range information
+   *
+   * @returns {number} interval
+   */
+  getInterval(range) {
+    const max = range.maxValue;
+    const min = range.minValue;
+    const step = range.maxSteps;
+
+    return this.interval ? this.interval : Math.ceil((max - min) / step);
+  }
+}
+
+export default LinearScale;

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

@@ -0,0 +1,120 @@
+import Scale from './scale';
+import Util from '../helpers/helpers.util';
+
+class LogarithmicScale extends Scale {
+  /**
+   * Calculate min/max value, label and size information for logarithmic scale
+   * @param {object} minMax    min/max information
+   *
+   * @returns {object} min/max value and label
+   */
+  calculateScaleRange(minMax) {
+    let maxValue;
+    let minValue;
+    if (this.range && this.range.length === 2) {
+      maxValue = this.range[1];
+      minValue = this.range[0];
+    } else {
+      maxValue = minMax.max;
+      minValue = minMax.min;
+    }
+
+    const rangeMagnitude = Util.calculateMagnitude(maxValue - minValue);
+    maxValue = Math.ceil(maxValue / (10 ** rangeMagnitude)) * (10 ** rangeMagnitude);
+
+    if (this.startToZero) {
+      minValue = 0;
+    }
+
+    if (maxValue === minValue) {
+      maxValue += 1;
+    }
+
+    const minLabel = this.getLabelFormat(minValue);
+    const maxLabel = this.getLabelFormat(maxValue);
+
+    return {
+      min: minValue,
+      max: maxValue,
+      minLabel,
+      maxLabel,
+      size: Util.calcTextSize(maxLabel, Util.getLabelStyle(this.labelStyle)),
+    };
+  }
+
+  /**
+   * With range information, calculate how many labels in axis
+   * @param {object}  range          min/max information
+   * @param {boolean} skipFitting    determines if label skipping job.
+   *
+   * @returns {object} steps, interval, min/max graph value
+   */
+  calculateSteps(range, skipFitting) {
+    const maxValue = range.maxValue;
+    const minValue = range.minValue;
+    const maxSteps = range.maxSteps;
+    const rangeMagnitude = Util.calculateMagnitude(maxValue - minValue);
+
+    let interval = this.getInterval(range);
+    let numberOfSteps;
+
+    const graphMax = maxValue;
+    const graphMin = minValue;
+    const graphRange = graphMax - graphMin;
+
+    numberOfSteps = Math.round(graphRange / interval);
+
+    if (maxValue === 1) {
+      interval = 0.2;
+      numberOfSteps = 5;
+    }
+
+    while ((numberOfSteps > maxSteps || (numberOfSteps * 2) < maxSteps) && !skipFitting) {
+      if (numberOfSteps > maxSteps) {
+        interval *= 2;
+        numberOfSteps = Math.ceil(graphRange / interval);
+      } else if (rangeMagnitude >= 0) {
+        if ((interval / 2) % 1 === 0) {
+          interval /= 2;
+          numberOfSteps = Math.ceil(graphRange / interval);
+        } else {
+          break;
+        }
+      } else {
+        interval /= 2;
+        numberOfSteps = Math.ceil(graphRange / interval);
+      }
+    }
+
+    return {
+      steps: numberOfSteps,
+      interval,
+      graphMin,
+      graphMax: Math.ceil(graphMin + (numberOfSteps * interval)),
+    };
+  }
+
+  /**
+   * Transforming label by designated format
+   * @param {any} value    label value
+   *
+   * @returns {string} formatted label
+   */
+  getLabelFormat(value) {
+    return Util.labelSignFormat(value, this.decimalPoint);
+  }
+
+  /**
+   * Calculate interval
+   * @param {object} range    range information
+   *
+   * @returns {number} interval
+   */
+  getInterval(range) {
+    const max = range.maxValue;
+    const min = range.minValue;
+    return 10 ** Util.calculateMagnitude(max - min);
+  }
+}
+
+export default LogarithmicScale;

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

@@ -0,0 +1,197 @@
+import Scale from './scale';
+import Util from '../helpers/helpers.util';
+
+class StepScale extends Scale {
+  constructor(type, opt, ctx, labels) {
+    super(type, opt, ctx);
+    this.labels = labels;
+  }
+
+  /**
+   * Calculate min/max value, label and size information for step scale
+   * @param {object} minMax       min/max information (unused on step scale)
+   * @param {object} chartRect    chart size information
+   *
+   * @returns {object} min/max value and label
+   */
+  calculateScaleRange(minMax, chartRect) {
+    const stepMinMax = Util.getStringMinMax(this.labels);
+    const maxValue = stepMinMax.max;
+    const minValue = stepMinMax.min;
+    const maxWidth = chartRect.chartWidth / (this.labels.length + 2);
+
+    return {
+      min: minValue,
+      max: maxValue,
+      minLabel: this.getLabelFormat(minValue, maxWidth),
+      maxLabel: this.getLabelFormat(maxValue, maxWidth),
+      size: Util.calcTextSize(
+        this.getLabelFormat(maxValue, maxWidth),
+        Util.getLabelStyle(this.labelStyle),
+      ),
+    };
+  }
+
+  /**
+   * With range information, calculate how many labels in axis
+   * @param {object}  range          min/max information
+   *
+   * @returns {object} steps, interval, min/max graph value
+   */
+  calculateSteps(range) {
+    return {
+      steps: this.labels.length,
+      interval: 1,
+      graphMin: range.minValue,
+      graphMax: range.maxValue,
+    };
+  }
+
+  /**
+   * Draw axis
+   * @param {object} chartRect      min/max information
+   * @param {object} labelOffset    label offset information
+   * @param {object} stepInfo       label steps information
+   *
+   * @returns {undefined}
+   */
+  draw(chartRect, labelOffset, stepInfo) {
+    const ctx = this.ctx;
+    const labels = this.labels;
+    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 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 maxWidth = chartRect.chartWidth / (this.labels.length + 2);
+
+    // label font 설정
+    ctx.font = Util.getLabelStyle(this.labelStyle);
+
+    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';
+    }
+
+    ctx.fillStyle = this.labelStyle.color;
+    ctx.lineWidth = 1;
+    const 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();
+
+    if (steps === 0) {
+      return;
+    }
+
+    const labelGap = (endPoint - startPoint) / labels.length;
+    let labelCenter = null;
+    let linePosition = null;
+
+    ctx.beginPath();
+    ctx.strokeStyle = this.gridLineColor;
+
+    let labelText;
+    let labelPoint;
+
+    labels.forEach((item, index) => {
+      labelCenter = Math.round(startPoint + (labelGap * index));
+      linePosition = labelCenter + aliasPixel;
+      labelText = this.getLabelFormat(item, maxWidth);
+
+      if (this.type === 'x') {
+        labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
+        ctx.fillText(labelText, labelCenter + (labelGap / 2), labelPoint);
+
+        if (index > 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 + (labelGap / 2));
+
+        if (index > 0 && this.showGrid) {
+          ctx.moveTo(offsetPoint, linePosition);
+          ctx.lineTo(offsetCounterPoint, linePosition);
+        }
+      }
+      ctx.stroke();
+    });
+
+    ctx.closePath();
+  }
+
+  /**
+   * Transforming label by designated format
+   * @param {string} value       label value
+   * @param {number} maxWidth    max width for each label
+   *
+   * @returns {string} formatted label
+   */
+  getLabelFormat(value, maxWidth) {
+    return this.labelStyle.fitWidth ? this.fittingString(value, maxWidth) : value;
+  }
+
+  /**
+   * Transforming ellipsis label by designated format and specific width
+   * @param {string} value       label value
+   * @param {number} maxWidth    max width for each label
+   *
+   * @returns {string} formatted label
+   */
+  fittingString(value, maxWidth) {
+    if (!value) {
+      return '';
+    }
+
+    if (!maxWidth) {
+      return value;
+    }
+
+    const ctx = this.ctx;
+
+    ctx.save();
+    ctx.font = Util.getLabelStyle(this.labelStyle);
+    const dir = this.labelStyle.fitDir;
+
+    const ellipsis = '…';
+    const ellipsisWidth = ctx.measureText(ellipsis).width;
+
+    let str = value;
+    let width = ctx.measureText(str).width;
+
+    if (width <= maxWidth || width <= ellipsisWidth) {
+      return str;
+    }
+
+    let len = str.length;
+    while (width >= maxWidth - ellipsisWidth && len-- > 0) {
+      str = dir === 'right' ? str.substring(0, len) : str.substring(1, str.length);
+      width = ctx.measureText(str).width;
+    }
+
+    return dir === 'right' ? str + ellipsis : ellipsis + str;
+  }
+}
+
+export default StepScale;