evui 2.0.9 → 2.0.10

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

@@ -1,217 +0,0 @@
-import moment from 'moment';
-import { AXIS_UNITS } from '../core.constant';
-import Util from '../core.util';
-
-class Axis {
-  constructor(props) {
-    this.type = props.type;
-    this.options = props.options;
-    this.ctx = props.ctx;
-
-    this.chartRect = props.chartRect;
-    this.labelOffset = props.labelOffset;
-  }
-
-  createAxis(axisMinMax) {
-    this.units = AXIS_UNITS[this.type];
-    this.skipFitting = false;
-
-    this.axisPosInfo = {
-      x1: this.chartRect.x1 + this.labelOffset.left,
-      x2: this.chartRect.x2 - this.labelOffset.right,
-      y1: this.chartRect.y1 + this.labelOffset.top,
-      y2: this.chartRect.y2 - this.labelOffset.bottom,
-    };
-
-    this.calculateRange(axisMinMax);
-    this.drawAxis();
-  }
-
-  calculateRange(axisMinMax) {
-    if (!axisMinMax) {
-      return;
-    }
-
-    // init variable
-    const options = this.options;
-    const chartRect = this.chartRect;
-
-    let maxValue;
-    let minValue;
-
-    if (options.range && options.range.length === 2) {
-      if (options.labelType === 'time') {
-        maxValue = +moment(options.range[1]);
-        minValue = +moment(options.range[0]);
-      } else {
-        maxValue = options.labelType === 'time' ? +moment(options.range[1]) : options.range[1];
-        minValue = options.labelType === 'time' ? +moment(options.range[0]) : options.range[0];
-      }
-    } else {
-      maxValue = axisMinMax ? (axisMinMax.max || 1) : 1;
-      minValue = axisMinMax ? (axisMinMax.min || 0) : 0;
-    }
-
-    if (options.autoScaleRatio) {
-      maxValue = Math.round(maxValue * (options.autoScaleRatio + 1));
-    }
-
-    if (options.isSetMinZero && options.labelType === 'linear') {
-      minValue = 0;
-    }
-
-    let currentLabelOffset;
-    let tickSize;
-
-    // 실제 Axis가 그려질 영역
-    const chartSize = this.units.pos === 'x' ? chartRect.chartWidth : chartRect.chartHeight;
-
-    if (this.units.pos === 'x') {
-      currentLabelOffset = [this.labelOffset.left, this.labelOffset.right];
-    } else {
-      currentLabelOffset = [this.labelOffset.top, this.labelOffset.bottom];
-    }
-    const drawRange = chartSize - (currentLabelOffset[0] + currentLabelOffset[1]);
-
-    if (this.units.pos === 'x') {
-      // tickSize는 실제 step을 구하기 위해 각 축의 Label중 가장 큰 값을 기준으로 Size를 구한다.
-      tickSize = this.ctx.measureText(this.labelFormat(maxValue)).width + 20;
-    } else {
-     // Y축의 경우 글자의 높이로 전체 영역을 나누기 위함.
-      tickSize = options.labelStyle.fontSize * 2;
-    }
-
-    const minSteps = 2;
-    const maxSteps = Math.floor(drawRange / tickSize);
-
-    this.skipFitting = minSteps >= maxSteps;
-
-    if (maxValue < 1) {
-      maxValue = 1;
-    }
-
-    if (maxValue === minValue) {
-      maxValue += 0.5;
-      if (minValue >= 0.5 && !options.isSetMinZero) {
-        minValue -= 0.5;
-      } else {
-        maxValue += 0.5;
-      }
-    }
-
-    this.calculateSteps({ maxValue, minValue, maxSteps, minSteps });
-  }
-
-  drawAxis() {
-    const options = this.options;
-    const startPoint = this.axisPosInfo[this.units.rectStart];
-    const endPoint = this.axisPosInfo[this.units.rectEnd];
-    const offsetPoint = this.axisPosInfo[this.units.rectOffset(options.position)];
-    const offsetCounterPoint = this.axisPosInfo[this.units.rectOffsetCounter(options.position)];
-
-    // label font 설정
-    this.ctx.font = Util.getLabelStyle(options);
-
-    if (this.units.pos === 'x') {
-      this.ctx.textAlign = 'center';
-      this.ctx.textBaseline = options.position === 'top' ? 'bottom' : 'top';
-    } else if (this.units.pos === 'y') {
-      this.ctx.textAlign = options.position === 'left' ? 'right' : 'left';
-      this.ctx.textBaseline = 'middle';
-    }
-    this.ctx.fillStyle = options.labelStyle.color;
-
-    if (this.steps === 0) {
-      return;
-    }
-
-    // 각 라벨간 간격
-    const labelGap = (endPoint - startPoint) / this.steps;
-
-    let labelCenter = null;
-    let linePosition = null;
-
-    if (options.ticks === null) {
-      options.ticks = [];
-    } else {
-      options.ticks.length = 0;
-    }
-
-    // grid 그리기
-    this.ctx.lineWidth = 1;
-    const aliasPixel = Util.aliasPixel(this.ctx.lineWidth);
-
-    // Axis Line
-    this.ctx.beginPath();
-    this.ctx.strokeStyle = options.axisLineColor;
-    if (this.units.pos === 'x') {
-      this.ctx.moveTo(startPoint, offsetPoint + aliasPixel);
-      this.ctx.lineTo(endPoint, offsetPoint + aliasPixel);
-    } else {
-      this.ctx.moveTo(offsetPoint + aliasPixel, startPoint);
-      this.ctx.lineTo(offsetPoint + aliasPixel, endPoint);
-    }
-    this.ctx.stroke();
-
-    // Grid
-    this.ctx.beginPath();
-    this.ctx.strokeStyle = options.gridLineColor;
-
-    const ticks = options.ticks;
-    const showGrid = options.showGrid;
-    let labelText;
-
-    for (let ix = 0; ix <= this.steps; ix++) {
-      if (this.isStepValueFloat) {
-        ticks[ix] = Math.round(this.axisMin + ((ix * this.stepValue) * 10)) / 10;
-      } else {
-        ticks[ix] = this.axisMin + (ix * this.stepValue);
-      }
-
-      labelCenter = Math.round(startPoint + (labelGap * ix));
-      linePosition = labelCenter + aliasPixel;
-      labelText = this.labelFormat(ticks[ix]);
-
-      let labelPoint;
-
-      if (this.units.pos === 'x') {
-        labelPoint = options.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
-        this.ctx.fillText(labelText, labelCenter, labelPoint);
-
-        if (ix !== 0 && showGrid) {
-          this.ctx.moveTo(linePosition, offsetPoint);
-          this.ctx.lineTo(linePosition, offsetCounterPoint);
-        }
-      } else {
-        labelPoint = options.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
-        this.ctx.fillText(labelText, labelPoint, labelCenter);
-
-        if (ix !== 0 && showGrid) {
-          this.ctx.moveTo(offsetPoint, linePosition);
-          this.ctx.lineTo(offsetCounterPoint, linePosition);
-        }
-      }
-
-      this.ctx.stroke();
-    }
-
-    this.ctx.closePath();
-  }
-
-  labelFormat(value) {
-    const options = this.options;
-    let label;
-
-    if (options.timeFormat !== null) {
-      label = moment(value).format(options.timeFormat);
-    } else if (options.labelType === 'linear') {
-      label = Util.labelFormat(value);
-    } else {
-      label = value;
-    }
-
-    return label;
-  }
-}
-
-export default Axis;

package/src/components/chart/core/axis/axis.scale.auto.js

@@ -1,69 +0,0 @@
-import Util from '../core.util';
-import Axis from './axis';
-
-class AxisAutoScale extends Axis {
-  calculateSteps(rangeInfo) {
-    const maxValue = rangeInfo.maxValue;
-    const minValue = rangeInfo.minValue;
-    const maxSteps = rangeInfo.maxSteps;
-    const minSteps = rangeInfo.minSteps;
-
-    const options = this.options;
-    const valueRange = Math.abs(maxValue - minValue);
-    const rangeMagnitude = Util.calculateMagnitude(valueRange);
-    const graphMin = minValue;
-
-    let graphMax;
-    let stepValue;
-    let numberOfSteps;
-
-    if (options.autoScaleRatio) {
-      graphMax = maxValue;
-    } else {
-      graphMax = Math.ceil(maxValue / (10 ** rangeMagnitude)) * (10 ** rangeMagnitude);
-    }
-
-    const graphRange = graphMax - graphMin;
-    stepValue = 10 ** rangeMagnitude;
-    numberOfSteps = Math.ceil(graphRange / stepValue);
-
-    if (maxValue === 1) {
-      stepValue = 0.2;
-      numberOfSteps = 5;
-    }
-
-    while ((numberOfSteps > maxSteps || (numberOfSteps * 2) < maxSteps) && !this.skipFitting) {
-      if (numberOfSteps > maxSteps) {
-        stepValue *= 2;
-        numberOfSteps = Math.ceil(graphRange / stepValue);
-
-        if (numberOfSteps % 1 !== 0) {
-          this.skipFitting = true;
-        }
-      } else if (rangeMagnitude >= 0) {
-        if ((stepValue / 2) % 1 === 0) {
-          stepValue /= 2;
-          numberOfSteps = Math.ceil(graphRange / stepValue);
-        } else {
-          break;
-        }
-      } else {
-        stepValue /= 2;
-        numberOfSteps = Math.ceil(graphRange / stepValue);
-      }
-    }
-
-    if (this.skipFitting) {
-      numberOfSteps = minSteps;
-      stepValue = graphRange / numberOfSteps;
-    }
-
-    this.steps = numberOfSteps;
-    this.stepValue = stepValue;
-    this.isStepValueFloat = (`${stepValue}`).indexOf('.') > -1;
-    this.axisMin = graphMin;
-    this.axisMax = Math.ceil((graphMin + (numberOfSteps * stepValue)) * 1000) / 1000;
-  }
-}
-
-export default AxisAutoScale;

package/src/components/chart/core/axis/axis.scale.fixed.js

@@ -1,65 +0,0 @@
-import { TIME_INTERVALS } from '../core.constant';
-import Axis from './axis';
-
-class AxisFixedScale extends Axis {
-  constructor(props) {
-    super(props);
-
-    if (this.options.labelType === 'time') {
-      this.interval = TIME_INTERVALS[this.options.interval].size;
-    } else {
-      this.interval = +this.options.interval;
-    }
-  }
-
-  calculateSteps(rangeInfo) {
-    const maxValue = rangeInfo.maxValue;
-    const minValue = rangeInfo.minValue;
-    const maxSteps = rangeInfo.maxSteps;
-    const minSteps = rangeInfo.minSteps;
-
-    const options = this.options;
-
-    let incValue = minValue;
-    let stepValue;
-    let numberOfSteps;
-
-    while (incValue < maxValue) {
-      incValue += this.interval;
-    }
-
-    const graphMax = (options.autoScaleRatio && incValue <= maxValue) ? maxValue : incValue;
-    const graphMin = minValue;
-    const graphRange = graphMax - graphMin;
-
-    stepValue = this.interval;
-    numberOfSteps = Math.round(graphRange / stepValue);
-
-    if (maxValue === 1) {
-      stepValue = 0.2;
-      numberOfSteps = 5;
-    }
-
-    while (numberOfSteps > maxSteps && !this.skipFitting) {
-      stepValue *= 2;
-      numberOfSteps = Math.round(graphRange / stepValue);
-
-      if (numberOfSteps % 1 !== 0) {
-        this.skipFitting = true;
-      }
-    }
-
-    if (this.skipFitting) {
-      numberOfSteps = minSteps;
-      stepValue = graphRange / numberOfSteps;
-    }
-
-    this.steps = numberOfSteps;
-    this.stepValue = stepValue;
-    this.isStepValueFloat = (`${stepValue}`).indexOf('.') > -1;
-    this.axisMin = graphMin;
-    this.axisMax = Math.ceil((graphMin + (numberOfSteps * stepValue)) * 1000) / 1000;
-  }
-}
-
-export default AxisFixedScale;

package/src/components/chart/core/axis/axis.scale.steps.js

@@ -1,149 +0,0 @@
-import Axis from './axis';
-import Util from '../core.util';
-
-class AxisStepsScale extends Axis {
-  calculateSteps(rangeInfo) {
-    const maxSteps = rangeInfo.maxSteps;
-    const minSteps = rangeInfo.minSteps;
-
-    const graphMax = this.axisData[this.axisData.length - 1];
-    const graphMin = this.axisData[0];
-    const graphRange = this.axisData.length;
-
-    let stepValue = 1;
-    let numberOfSteps = Math.round(graphRange / stepValue);
-
-    if (graphMax === 1) {
-      stepValue = 1;
-      numberOfSteps = 1;
-    }
-
-    while (numberOfSteps > maxSteps && !this.skipFitting) {
-      stepValue *= 2;
-      numberOfSteps = Math.round(graphRange / stepValue);
-
-      if (numberOfSteps % 1 !== 0) {
-        this.skipFitting = true;
-      }
-    }
-
-    if (this.skipFitting) {
-      numberOfSteps = minSteps;
-      stepValue = graphRange / numberOfSteps;
-    }
-
-    this.steps = numberOfSteps;
-    this.stepValue = stepValue;
-    this.isStepValueFloat = false;
-    this.axisMin = graphMin;
-    this.axisMax = graphMax;
-  }
-
-  drawAxis() {
-    if (this.steps === 0) {
-      return;
-    }
-
-    const options = this.options;
-    const startPoint = this.axisPosInfo[this.units.rectStart];
-    const endPoint = this.axisPosInfo[this.units.rectEnd];
-    const offsetPoint = this.axisPosInfo[this.units.rectOffset(options.position)];
-    const offsetCounterPoint = this.axisPosInfo[this.units.rectOffsetCounter(options.position)];
-
-    const labelType = options.labelType;
-
-    if (this.units.pos === 'x') {
-      this.ctx.textAlign = this.stepValue > 1 ? 'start' : 'center';
-      this.ctx.textBaseline = options.position === 'top' ? 'bottom' : 'top';
-    } else if (this.units.pos === 'y') {
-      this.ctx.textAlign = options.position === 'left' ? 'right' : 'left';
-      this.ctx.textBaseline = 'middle';
-    }
-    this.ctx.fillStyle = options.labelStyle.color;
-    this.ctx.font = Util.getLabelStyle(options);
-
-
-    let labelPos;
-
-    const labelCount = labelType === 'category' ? this.axisData.length : this.axisData.length - 1;
-    const labelGap = (endPoint - startPoint) / labelCount;
-
-    if (labelType === 'category') {
-      labelPos = this.stepValue > 1 ? 0 : labelGap / 2;
-    } else {
-      labelPos = 0;
-    }
-
-    let labelCenter = null;
-    let linePosition = null;
-
-    this.ticks = [];
-
-    if (options.ticks === null) {
-      options.ticks = [];
-    } else {
-      options.ticks.length = 0;
-    }
-
-    // grid 그리기
-    this.ctx.lineWidth = 1;
-    const aliasPixel = Util.aliasPixel(this.ctx.lineWidth);
-
-    // Axis Line
-    this.ctx.beginPath();
-    this.ctx.strokeStyle = options.axisLineColor;
-    if (this.units.pos === 'x') {
-      this.ctx.moveTo(startPoint, offsetPoint + aliasPixel);
-      this.ctx.lineTo(endPoint, offsetPoint + aliasPixel);
-    } else {
-      this.ctx.moveTo(offsetPoint + aliasPixel, startPoint);
-      this.ctx.lineTo(offsetPoint + aliasPixel, endPoint);
-    }
-    this.ctx.stroke();
-
-    // Grid
-    this.ctx.beginPath();
-    this.ctx.strokeStyle = options.gridLineColor;
-
-    let labelText;
-
-    for (let ix = 0, ixLen = labelType === 'category' ? labelCount - 1 : labelCount; ix <= ixLen; ix++) {
-      if (this.axisData[ix]) {
-        options.ticks[ix] = this.axisData[ix];
-      } else {
-        options.ticks[ix] = '';
-      }
-
-      labelCenter = Math.round(startPoint + (labelGap * ix));
-      linePosition = labelCenter + aliasPixel;
-      labelText = this.labelFormat(options.ticks[ix]);
-
-      let labelPoint;
-      if (this.units.pos === 'x') {
-        if (ix % this.stepValue === 0 || ix === ixLen) {
-          labelPoint = options.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
-          this.ctx.fillText(labelText, labelCenter + labelPos, labelPoint);
-
-          if (this.options.showGrid) {
-            this.ctx.moveTo(linePosition, offsetPoint);
-            this.ctx.lineTo(linePosition, offsetCounterPoint);
-          }
-        }
-      } else if (this.units.pos === 'y') {
-        if (ix % this.stepValue === 0 || ix === ixLen) {
-          labelPoint = options.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
-          this.ctx.fillText(labelText, labelPoint, labelCenter + labelPos);
-
-          if (ix !== 0 && this.options.showGrid) {
-            this.ctx.moveTo(offsetPoint, linePosition);
-            this.ctx.lineTo(offsetCounterPoint, linePosition);
-          }
-        }
-      }
-    }
-
-    this.ctx.stroke();
-  }
-}
-
-export default AxisStepsScale;

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

@@ -1,116 +0,0 @@
-export const AXIS_UNITS = {
-  x: {
-    pos: 'x',
-    len: 'width',
-    dir: 'horizontal',
-    rectStart: 'x1',
-    rectEnd: 'x2',
-    rectOffsetCounter(position) {
-      return position === 'top' ? 'y2' : 'y1';
-    },
-    rectOffset(position) {
-      return position === 'top' ? 'y1' : 'y2';
-    },
-  },
-  y: {
-    pos: 'y',
-    len: 'height',
-    dir: 'vertical',
-    rectStart: 'y2',
-    rectEnd: 'y1',
-    rectOffsetCounter(position) {
-      return position === 'left' ? 'x2' : 'x1';
-    },
-    rectOffset(position) {
-      return position === 'left' ? 'x1' : 'x2';
-    },
-  },
-};
-
-export const COLOR = [
-  '#2b99f0', '#8ac449', '#00C4C5', '#ffde00', '#ff7781', '#8470ff', '#75cd8e',
-  '#48d1cc', '#fec64f', '#fe984f', '#0052ff', '#00a48c', '#83cfde', '#dfe32d',
-  '#ff7d40', '#99c7ff', '#a5fee3', '#0379c9', '#eef093', '#ffa891', '#00c5cd',
-  '#009bc7', '#cacaff', '#ffc125', '#df6264',
-];
-
-export const LINE_OPTION = {
-  color: '#000', // this.chartOptions.colors[skey.length]
-  show: true,
-  highlight: {
-    pointSize: 5,
-  },
-  xAxisIndex: 0,
-  yAxisIndex: 0,
-  point: true,
-  pointSize: 4,
-  pointStyle: '',
-  pointFill: '#000',
-  lineWidth: 2,
-  fill: false,
-  fillColor: '#000',
-  fiillOpacity: 0.4,
-};
-
-export const CHART_DATA_STRUCT = {
-  bar: 'array',
-  line: 'array',
-  scatter: 'array',
-  pie: 'array',
-  sunburst: 'tree',
-};
-
-export const CHART_AXIS_TYPE = {
-  bar: 'axis',
-  line: 'axis',
-  scatter: 'axis',
-  pie: 'axisless',
-  sunburst: 'axisless',
-};
-
-export const TIME_INTERVALS = {
-  millisecond: {
-    common: true,
-    size: 1,
-    steps: [1, 2, 5, 10, 20, 50, 100, 250, 500],
-  },
-  second: {
-    common: true,
-    size: 1000,
-    steps: [1, 2, 5, 10, 30],
-  },
-  minute: {
-    common: true,
-    size: 60000,
-    steps: [1, 2, 5, 10, 30],
-  },
-  hour: {
-    common: true,
-    size: 3600000,
-    steps: [1, 2, 3, 6, 12],
-  },
-  day: {
-    common: true,
-    size: 86400000,
-    steps: [1, 2, 5],
-  },
-  week: {
-    common: false,
-    size: 604800000,
-    steps: [1, 2, 3, 4],
-  },
-  month: {
-    common: true,
-    size: 2.628e9,
-    steps: [1, 2, 3],
-  },
-  quarter: {
-    common: false,
-    size: 7.884e9,
-    steps: [1, 2, 3, 4],
-  },
-  year: {
-    common: true,
-    size: 3.154e10,
-  },
-};