evui 2.1.0 → 2.1.1

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

@@ -1,20 +1,31 @@
+import throttle from '@/common/utils.throttle';
 import Model from './model';
 import TimeScale from './scale/scale.time';
 import LinearScale from './scale/scale.linear';
 import LogarithmicScale from './scale/scale.logarithmic';
 import StepScale from './scale/scale.step';
+import TimeCategoryScale from './scale/scale.time.category';
 import Title from './plugins/plugins.title';
 import Legend from './plugins/plugins.legend';
+import Interaction from './plugins/plugins.interaction';
+import Tooltip from './plugins/plugins.tooltip';
+import Pie from './plugins/plugins.pie';
+import Tip from './element/element.tip';
 
 class EvChart {
-  constructor(target, data, options) {
+  constructor(target, data, options, listeners) {
     Object.keys(Model).forEach(key => Object.assign(this, Model[key]));
     Object.assign(this, Title);
     Object.assign(this, Legend);
+    Object.assign(this, Interaction);
+    Object.assign(this, Tooltip);
+    Object.assign(this, Pie);
+    Object.assign(this, Tip);
 
     this.target = target;
     this.data = data;
     this.options = options;
+    this.listeners = listeners;
 
     this.wrapperDOM = document.createElement('div');
     this.wrapperDOM.className = 'ev-chart-wrapper';
@@ -45,25 +56,25 @@ class EvChart {
 
     this.isInitLegend = false;
     this.isInitTitle = false;
-
+    this.isInit = false;
     this.seriesList = {};
-    this.chartRect = {};
-    this.showSeriesInfo = {
+    this.lastTip = { pos: null, value: null };
+    this.seriesInfo = {
+      charts: { pie: [], bar: [], line: [], scatter: [] },
       count: 0,
-      barSeriesIds: [],
     };
-    this.integratedLabels = this.data.labels.slice();
   }
 
+  /**
+   * Initialize chart object
+   *
+   * @returns {undefined}
+   */
   init() {
-    const series = this.data.series;
-    const data = this.data.data;
-    const labels = this.data.labels;
-    const groups = this.data.groups;
-
-    const options = this.options;
+    const { series, data, labels, groups } = this.data;
+    const { type, axesX, axesY, tooltip, horizontal } = this.options;
 
-    this.createSeriesSet(series, options.type);
+    this.createSeriesSet(series, type, horizontal);
     if (groups.length) {
       this.addGroupInfo(groups);
     }
@@ -71,98 +82,170 @@ class EvChart {
     this.createDataSet(data, labels);
     this.minMax = this.getStoreMinMax();
 
-    this.axesX = this.createAxes('x', options.axesX);
-    this.axesY = this.createAxes('y', options.axesY);
+    this.initRect();
+
+    this.axesX = this.createAxes('x', axesX);
+    this.axesY = this.createAxes('y', axesY);
+
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
 
-    this.initRect();
+    this.initScale();
     this.drawChart();
+
+    if (tooltip.use) {
+      this.createTooltipDOM();
+
+      if (tooltip.throttledMove) {
+        this.onMouseMove = throttle(this.onMouseMove, 30);
+      }
+    }
+
+    this.createEventFunctions();
+    this.isInit = true;
   }
 
+  /**
+   * Initialize chart rectangle
+   *
+   * @returns {undefined}
+   */
   initRect() {
     const opt = this.options;
     if (opt.title.show) {
-      this.createTitle();
       this.initTitle();
       this.showTitle();
     }
 
     if (opt.legend.show) {
-      this.createLegend();
       this.initLegend();
       this.setLegendPosition();
     }
     this.chartRect = this.getChartRect();
   }
 
-  drawChart() {
+  /**
+   * To draw canvas chart, it processes several sequential jobs
+   * @param {any} [hitInfo=undefined]    from mousemove callback (object or undefined)
+   *
+   * @returns {undefined}
+   */
+  drawChart(hitInfo) {
     this.labelRange = this.getAxesLabelRange();
     this.axesSteps = this.calculateSteps();
     this.drawAxis();
     this.drawSeries();
-
+    this.drawTip(hitInfo);
     this.displayCtx.drawImage(this.bufferCanvas, 0, 0);
   }
 
+  /**
+   * Draw each series
+   *
+   * @returns {undefined}
+   */
   drawSeries() {
+    const thickness = this.options.thickness;
+    const maxTip = this.options.maxTip;
+
+    const opt = {
+      ctx: this.bufferCtx,
+      chartRect: this.chartRect,
+      labelOffset: this.labelOffset,
+      axesSteps: this.axesSteps,
+      maxTipOpt: { background: maxTip.background, color: maxTip.color },
+    };
+
     let showIndex = 0;
     let showSeriesCount = 0;
-    this.showSeriesInfo.barSeriesIds.forEach((series) => {
+
+    this.seriesInfo.charts.bar.forEach((series) => {
       if (this.seriesList[series].show) {
         showSeriesCount++;
       }
     });
 
-
-    Object.values(this.seriesList).forEach((series) => {
-      series.draw({
-        ctx: this.bufferCtx,
-        chartRect: this.chartRect,
-        labelOffset: this.labelOffset,
-        axesSteps: this.axesSteps,
-        isHorizontal: this.options.horizontal,
-        integLabels: this.integratedLabels,
-        thickness: this.options.thickness,
-        showSeriesCount,
-        showIndex,
-      });
-
-      if (series.show) {
-        showIndex++;
+    const chartKeys = Object.keys(this.seriesInfo.charts);
+    for (let ix = 0; ix < chartKeys.length; ix++) {
+      const chartType = chartKeys[ix];
+      const chartTypeSet = this.seriesInfo.charts[chartType];
+
+      for (let jx = 0; jx < chartTypeSet.length; jx++) {
+        const series = this.seriesList[chartTypeSet[jx]];
+
+        if (chartType === 'line' || chartType === 'scatter') {
+          series.draw(opt);
+        } else if (chartType === 'bar') {
+          series.draw({ thickness, showSeriesCount, showIndex, ...opt });
+
+          if (series.show) {
+            showIndex++;
+          }
+        } else {
+          if (this.options.sunburst) {
+            this.drawSunburst();
+          } else {
+            this.drawPie();
+          }
+
+          if (this.options.doughnutHoleSize > 0) {
+            this.drawDoughnutHole();
+          }
+          break;
+        }
       }
-    });
+    }
   }
 
-  createAxes(dir, axes) {
+  /**
+   * Create axes
+   * @param {string} dir    axis direction
+   * @param {array}  axes   axes array
+   *
+   * @returns {array} axes objects in array
+   */
+  createAxes(dir, axes = []) {
     const ctx = this.bufferCtx;
-    const integLabels = this.integratedLabels;
+    const labels = this.data.labels;
 
     return axes.map((axis) => {
       switch (axis.type) {
         case 'linear':
           return new LinearScale(dir, axis, ctx);
         case 'time':
+          if (axis.categoryMode) {
+            return new TimeCategoryScale(dir, axis, ctx, labels);
+          }
           return new TimeScale(dir, axis, ctx);
         case 'log':
           return new LogarithmicScale(dir, axis, ctx);
         case 'step':
-          return new StepScale(dir, axis, ctx, integLabels);
+          return new StepScale(dir, axis, ctx, labels);
         default:
           return false;
       }
     });
   }
 
+  /**
+   * Calculate min/max value, label and size information for each axis
+   *
+   * @returns {object} axes min/max information
+   */
   getAxesRange() {
     /* eslint-disable max-len */
-    const axesXMinMax = this.axesX.map((axis, index) => axis.calculateScaleRange(this.minMax.x[index]));
-    const axesYMinMax = this.axesY.map((axis, index) => axis.calculateScaleRange(this.minMax.y[index]));
+    const axesXMinMax = this.axesX.map((axis, index) => axis.calculateScaleRange(this.minMax.x[index], this.chartRect));
+    const axesYMinMax = this.axesY.map((axis, index) => axis.calculateScaleRange(this.minMax.y[index], this.chartRect));
     /* eslint-enable max-len */
 
     return { x: axesXMinMax, y: axesYMinMax };
   }
 
+  /**
+   * Draw each axis
+   *
+   * @returns {undefined}
+   */
   drawAxis() {
     this.axesX.forEach((axis, index) => {
       axis.draw(this.chartRect, this.labelOffset, this.axesSteps.x[index]);
@@ -173,6 +256,11 @@ class EvChart {
     });
   }
 
+  /**
+   * With each axis's min/max value and label information, calculate how many labels in each axis
+   *
+   * @returns {object} each axis's label steps in axes array
+   */
   calculateSteps() {
     const axesXMinMax = this.axesX.map((axis, index) => {
       const range = {
@@ -198,6 +286,11 @@ class EvChart {
     return { x: axesXMinMax, y: axesYMinMax };
   }
 
+  /**
+   * Calculate axis's min/max label steps
+   *
+   * @returns {object} axes's label range
+   */
   getAxesLabelRange() {
     const axesXSteps = this.axesX.map((axis, index) => {
       const size = this.axesRange.x[index].size;
@@ -212,20 +305,62 @@ class EvChart {
     return { x: axesXSteps, y: axesYSteps };
   }
 
-  getChartRect() {
-    const width = this.chartDOM.getBoundingClientRect().width || 10;
-    const height = this.chartDOM.getBoundingClientRect().height || 10;
+  /**
+   * Reset devicePixelRatio for high DPI
+   *
+   * @returns {undefined}
+   */
+  initScale() {
+    const devicePixelRatio = window.devicePixelRatio || 1;
+    const backingStoreRatio = this.displayCtx.webkitBackingStorePixelRatio
+      || this.displayCtx.mozBackingStorePixelRatio
+      || this.displayCtx.msBackingStorePixelRatio
+      || this.displayCtx.oBackingStorePixelRatio
+      || this.displayCtx.backingStorePixelRatio
+      || 1;
+
+    this.pixelRatio = devicePixelRatio / backingStoreRatio;
+
+    if (this.oldPixelRatio !== this.pixelRatio) {
+      this.oldPixelRatio = this.pixelRatio;
+    }
+
+    this.bufferCtx.scale(this.pixelRatio, this.pixelRatio);
+    this.overlayCtx.scale(this.pixelRatio, this.pixelRatio);
+  }
+
+  /**
+   * Get chart DOM size and set canvas size
+   *
+   * @returns {object} chart size information
+   */
+  getChartDOMRect() {
+    const rect = this.chartDOM.getBoundingClientRect();
+    const width = rect.width || 10;
+    const height = rect.height || 10;
 
     this.setWidth(width);
     this.setHeight(height);
 
-    const chartWidth = width - 8;
-    const chartHeight = height - 8;
+    return { width, height };
+  }
 
-    const x1 = 4;
-    const x2 = Math.max(width - 4, x1 + 2);
-    const y1 = 4;
-    const y2 = Math.max(height - 4, y1 + 2);
+  /**
+   * Calculate chart size
+   *
+   * @returns {object} chart size information
+   */
+  getChartRect() {
+    const { width, height } = this.getChartDOMRect();
+
+    const padding = { top: 20, right: 2, left: 2, bottom: 4 };
+    const chartWidth = width - padding.left - padding.right;
+    const chartHeight = height - padding.top - padding.bottom;
+
+    const x1 = padding.left;
+    const x2 = Math.max(width - padding.right, x1 + 2);
+    const y1 = padding.top;
+    const y2 = Math.max(height - padding.bottom, y1 + 2);
 
     return {
       x1,
@@ -239,6 +374,12 @@ class EvChart {
     };
   }
 
+  /**
+   * Set canvas width
+   * @param {number} width    canvas width from chartDOM.width
+   *
+   * @returns {undefined}
+   */
   setWidth(width) {
     if (!this.displayCanvas) {
       return;
@@ -252,6 +393,12 @@ class EvChart {
     this.overlayCanvas.style.width = `${width}px`;
   }
 
+  /**
+   * Set canvas height
+   * @param {number} height    canvas width from chartDOM.height
+   *
+   * @returns {undefined}
+   */
   setHeight(height) {
     if (!this.displayCanvas) {
       return;
@@ -265,15 +412,29 @@ class EvChart {
     this.overlayCanvas.style.height = `${height}px`;
   }
 
+  /**
+   * Calculate labels offset from chart rect (Axis 영역을 벗어나는 label 크기 계산)
+   *
+   * ex)
+   * Y축 label의 넓이와 (X축 최소값 label 넓이 / 2) 중 넓은 값이 left label offset으로 처리됨
+   *
+   * 0 |
+   *   |
+   *   |
+   * 0 ----------------------
+   * hh:mm                 hh:mm
+   *
+   * @returns {object} label offset for edge
+   */
   getLabelOffset() {
     const axesX = this.axesX;
     const axesY = this.axesY;
     const range = this.axesRange;
     const labelOffset = { top: 2, left: 2, right: 2, bottom: 2 };
-    const labelBuffer = { width: 20, height: 4 };
+    const labelBuffer = { width: 14, height: 4 };
 
-    let lw;
-    let lh;
+    let lw = 0;
+    let lh = 0;
 
     axesX.forEach((axis, index) => {
       lw = range.x[index].size.width + labelBuffer.width;
@@ -294,7 +455,7 @@ class EvChart {
     });
 
     axesY.forEach((axis, index) => {
-      lw = range.y[index].size.width + labelBuffer.width;
+      lw = Math.max(range.y[index].size.width + labelBuffer.width, 42 + labelBuffer.width);
 
       if (axis.position === 'left') {
         if (lw > labelOffset.left) {
@@ -312,30 +473,65 @@ class EvChart {
 
     return labelOffset;
   }
-  update(updateSeries) {
+
+  /**
+   * To re-render chart, reset properties, canvas and then render chart.
+   * @param {object} updateInfo   information for each components are needed to update
+   *
+   * @returns {undefined}
+   */
+  update(updateInfo) {
     const options = this.options;
     const data = this.data.data;
     const labels = this.data.labels;
     const groups = this.data.groups;
     const series = this.data.series;
 
-    this.clearObject();
-    this.integratedLabels = labels.slice();
+    const { updateSeries, updateSelTip } = updateInfo;
+
+    if (!this.isInit) {
+      return;
+    }
+
+    this.resetProps();
+
     if (updateSeries) {
+      this.seriesInfo = null;
+      this.seriesList = null;
+      this.lastTip = null;
+
+      this.seriesInfo = {
+        charts: {
+          pie: [],
+          bar: [],
+          line: [],
+          scatter: [],
+        },
+        count: 0,
+      };
       this.seriesList = {};
+      this.lastTip = { pos: null, value: null };
+
       this.createSeriesSet(series, options.type);
+
+      if (this.legendDOM) {
+        this.resetLegend();
+      }
+    }
+
+    if (updateSelTip.update) {
+      this.lastTip.value = null;
+
+      if (!updateSelTip.keepDomain) {
+        this.lastTip.pos = null;
+      }
     }
 
     if (groups.length) {
       this.addGroupInfo(groups);
     }
-    this.createDataSet(data, labels);
 
-    this.minMax = this.getStoreMinMax();
-    this.axesX = this.createAxes('x', options.axesX);
-    this.axesY = this.createAxes('y', options.axesY);
-    this.axesRange = this.getAxesRange();
-    this.labelOffset = this.getLabelOffset();
+    this.createDataSet(data, labels);
 
     // title update
     if (options.title.show) {
@@ -361,36 +557,51 @@ class EvChart {
     } else if (this.isInitLegend) {
       this.hideLegend();
     }
+    this.chartRect = this.getChartRect();
+
+    this.minMax = this.getStoreMinMax();
+    this.axesX = this.createAxes('x', options.axesX);
+    this.axesY = this.createAxes('y', options.axesY);
+    this.axesRange = this.getAxesRange();
+    this.labelOffset = this.getLabelOffset();
 
     this.render();
   }
-  clearObject() {
-    delete this.minMax;
-    delete this.axesX;
-    delete this.axesY;
-    delete this.axesRange;
-    delete this.labelOffset;
-  }
-  destroy() {}
-  reset() {
-    this.seriesList = {};
-    this.minMax = null;
+
+  /**
+   * To re-render chart, reset properties
+   *
+   * @returns {undefined}
+   */
+  resetProps() {
+    this.axesX[0] = null;
+    this.axesY[0] = null;
     this.axesX = null;
     this.axesY = null;
+    this.minMax = null;
     this.axesRange = null;
     this.labelOffset = null;
     this.chartRect = null;
-
-    this.titleDOM.remove();
-    this.legendDOM.remove();
-    this.resizeDOM.remove();
-    this.ghostDOM.remove();
+    this.pieDataSet = [];
   }
-  render() {
-    this.clear();
-    this.chartRect = this.getChartRect();
-    this.drawChart();
+
+  /**
+   * Clear overlay canvas
+   *
+   * @returns {undefined}
+   */
+  overlayClear() {
+    this.clearRectRatio = (this.pixelRatio < 1) ? this.pixelRatio : 1;
+
+    this.overlayCtx.clearRect(0, 0, this.overlayCanvas.width / this.clearRectRatio,
+      this.overlayCanvas.height / this.clearRectRatio);
   }
+
+  /**
+   * Clear display and buffer canvas
+   *
+   * @returns {undefined}
+   */
   clear() {
     this.clearRectRatio = (this.pixelRatio < 1) ? this.pixelRatio : 1;
 
@@ -401,6 +612,88 @@ class EvChart {
     this.overlayCtx.clearRect(0, 0, this.overlayCanvas.width / this.clearRectRatio,
       this.overlayCanvas.height / this.clearRectRatio);
   }
+
+  /**
+   * Resize chart
+   *
+   * @returns {undefined}
+   */
+  resize() {
+    this.clear();
+    this.bufferCtx.restore();
+    this.bufferCtx.save();
+
+    this.getChartDOMRect();
+    this.initScale();
+    this.drawChart();
+  }
+
+  /**
+   * Render chart
+   * @param {any} [hitInfo=undefined]   hit item from mouse click/dblclick
+   *
+   * @returns {undefined}
+   */
+  render(hitInfo) {
+    this.clear();
+    this.chartRect = this.getChartRect();
+    this.initScale();
+    this.drawChart(hitInfo);
+  }
+
+  /**
+   * destroy chart component
+   *
+   * @returns {undefined}
+   */
+  destroy() {
+    if (!this.isInit) {
+      return;
+    }
+
+    const target = this.target;
+
+    if (this.options.legend.show) {
+      if (this.legendBoxDOM) {
+        this.legendBoxDOM.removeEventListener('click', this.onLegendBoxClick);
+        this.legendBoxDOM.removeEventListener('mouseover', this.onLegendBoxOver);
+        this.legendBoxDOM.removeEventListener('mouseleave', this.onLegendBoxLeave);
+      }
+
+      if (this.resizeDOM) {
+        this.resizeDOM.removeEventListener('mousedown', this.onResizeMouseDown);
+      }
+    }
+
+    if (this.overlayCanvas) {
+      this.overlayCanvas.removeEventListener('mousemove', this.onMouseMove);
+      this.overlayCanvas.removeEventListener('mouseleave', this.onMouseLeave);
+      this.overlayCanvas.removeEventListener('dblclick', this.onDblClick);
+      this.overlayCanvas.removeEventListener('click', this.onClick);
+    }
+
+    if (this.options.tooltip.use) {
+      this.tooltipCanvas.remove();
+      this.tooltipCanvas = null;
+      this.tooltipDOM.remove();
+      this.tooltipDOM = null;
+    }
+
+    this.wrapperDOM = null;
+    this.chartDOM = null;
+    this.legendDOM = null;
+    this.legendBoxDOM = null;
+    this.resizeDOM = null;
+    this.ghostDOM = null;
+    this.titleDOM = null;
+    this.displayCanvas = null;
+    this.bufferCanvas = null;
+    this.overlayCanvas = null;
+
+    while (target.hasChildNodes()) {
+      target.removeChild(target.firstChild);
+    }
+  }
 }
 
 export default EvChart;