evui 2.0.9 → 2.0.10

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

@@ -1,172 +0,0 @@
-import _ from 'lodash-es';
-import DataStore from './data';
-
-export default class SunburstDataStore extends DataStore {
-  init() {
-    this.initTreeData();
-    this.createTreeDummy();
-  }
-
-  getSeriesExtends(defaultSeries, param) { // eslint-disable-line class-methods-use-this
-    const extSeries = {
-      oData: param.data || null,
-      cData: null,
-      children: param.children === undefined ? [] : param.children,
-      parentIndex: null,
-    };
-
-    return _.merge(defaultSeries, extSeries);
-  }
-
-  initTreeData() {
-    const series = this.chartData.series;
-    const lvl = 0;
-
-    for (let ix = 0, ixLen = series.length; ix < ixLen; ix++) {
-      this.addSeries(series[ix]);
-
-      const seriesNode = this.seriesList[this.seriesList.length - 1];
-      seriesNode.lvl = lvl;
-      seriesNode.parentIndex = -1;
-      seriesNode.data = seriesNode.oData;
-
-      const pIndex = seriesNode.parentIndex;
-
-      if (!this.seriesGroupList[lvl]) {
-        this.seriesGroupList[lvl] = {};
-      }
-
-      if (!this.seriesGroupList[lvl][pIndex]) {
-        this.seriesGroupList[lvl][pIndex] = { totalValue: 0, node: [] };
-      }
-
-      this.seriesGroupList[lvl][pIndex].totalValue += seriesNode.data;
-      this.seriesGroupList[lvl][pIndex].node.push({
-        parentIndex: seriesNode.parentIndex,
-        seriesIndex: seriesNode.seriesIndex,
-        data: seriesNode.data,
-        hasChild: !!seriesNode.children.length,
-      });
-
-      for (let jx = 0, jxLen = seriesNode.children.length; jx < jxLen; jx++) {
-        this.traversalDFS(seriesNode.children[jx], seriesNode.seriesIndex);
-      }
-    }
-  }
-
-  traversalDFS(item, parentIndex) {
-    this.addSeries(item);
-    const seriesNode = this.seriesList[this.seriesList.length - 1];
-    const lvl = this.seriesList[parentIndex].lvl + 1;
-
-    seriesNode.lvl = lvl;
-    seriesNode.parentIndex = parentIndex;
-    seriesNode.data = item.data;
-
-    if (!this.seriesGroupList[lvl]) {
-      this.seriesGroupList[lvl] = {};
-    }
-    if (!this.seriesGroupList[lvl][parentIndex]) {
-      this.seriesGroupList[lvl][parentIndex] = { totalValue: 0, node: [] };
-    }
-
-    this.seriesGroupList[lvl][parentIndex].totalValue += seriesNode.data;
-    this.seriesGroupList[lvl][parentIndex].node.push({
-      parentIndex: seriesNode.parentIndex,
-      seriesIndex: seriesNode.seriesIndex,
-      data: seriesNode.data,
-      hasChild: !!seriesNode.children.length,
-    });
-
-    for (let ix = 0, ixLen = seriesNode.children.length; ix < ixLen; ix++) {
-      this.traversalDFS(seriesNode.children[ix], seriesNode.seriesIndex);
-    }
-  }
-
-  createTreeDummy() {
-    let node;
-    let keys;
-
-    for (let ix = 0, ixLen = this.seriesGroupList.length - 1; ix < ixLen; ix++) {
-      keys = Object.keys(this.seriesGroupList[ix]);
-      for (let jx = 0, jxLen = keys.length; jx < jxLen; jx++) {
-        node = this.seriesGroupList[ix][keys[jx]].node;
-
-        for (let kx = 0, kxLen = node.length; kx < kxLen; kx++) {
-          if (!node[kx].hasChild) {
-            this.seriesGroupList[ix + 1][node[kx].seriesIndex] = {
-              totalValue: node[kx].data,
-              node: [{
-                parentIndex: node[kx].seriesIndex,
-                seriesIndex: this.seriesList.length,
-                data: node[kx].data,
-                hasChild: false,
-                isDummy: true,
-              }],
-            };
-          }
-        }
-      }
-    }
-  }
-
-  addValue(seriesIndex, value, dataIndex) {
-    if (this.seriesList === undefined) {
-      return;
-    }
-    // category 형태의 데이터냐 아니냐에 따라 x,y 처리
-    const series = this.seriesList[seriesIndex];
-    const tempValue = {};
-    let dataIdx = dataIndex;
-
-    if (!series) {
-      return;
-    }
-
-    if (dataIndex === null || dataIndex === undefined) {
-      dataIdx = series.data.length;
-    }
-
-    if (!this.seriesGroupList[dataIdx]) {
-      this.seriesGroupList[dataIdx] = [];
-    }
-    this.seriesGroupList[dataIdx].push({ seriesIndex, data: value, show: series.show });
-
-    series.cData[dataIdx] = value;
-    series.oData[dataIdx] = value;
-
-    if (series.show) {
-      this.setMinMaxValue(series, tempValue, dataIdx);
-      this.setMaxLabelWidth(tempValue);
-    }
-  }
-
-  getSeriesGroupList() {
-    return this.seriesGroupList;
-  }
-
-  updateData() {
-    this.maxValueInfo = {
-      x: null,
-      y: null,
-      index: null,
-      seriesIndex: null,
-    };
-    this.minValueInfo = {
-      x: null,
-      y: null,
-      index: null,
-      seriesIndex: null,
-    };
-    this.labelTextMaxInfo = {
-      xLen: 0,
-      xText: '',
-      yLen: 0,
-      yText: '',
-    };
-    this.seriesGroupList.length = 0;
-    this.seriesList.length = 0;
-    this.initTreeData();
-    this.createTreeDummy();
-  }
-}

package/src/components/chart/element/element.bar.js

@@ -1,117 +0,0 @@
-import _merge from 'lodash/merge';
-import { COLOR, BAR_OPTION } from '../helpers/helpers.constant';
-import Canvas from '../helpers/helpers.canvas';
-
-class Bar {
-  constructor(sId, opt, sIdx) {
-    const merged = _merge({}, BAR_OPTION, opt);
-    Object.keys(merged).forEach((key) => {
-      this[key] = merged[key];
-    });
-
-    if (this.name === undefined) {
-      this.name = `series-${sIdx}`;
-    }
-
-    if (this.color === undefined) {
-      this.color = COLOR[sIdx];
-    }
-
-    this.sId = sId;
-    this.data = [];
-  }
-
-  draw(param) {
-    if (!this.show) {
-      return;
-    }
-
-    const ctx = param.ctx;
-    const chartRect = param.chartRect;
-    const labelOffset = param.labelOffset;
-    const axesSteps = param.axesSteps;
-    const index = param.showIndex;
-    const isHorizontal = param.isHorizontal;
-    const labels = param.integLabels;
-    const thickness = param.thickness;
-    const showSeriesCount = param.showSeriesCount;
-
-    let x;
-    let y;
-
-    const minmaxX = axesSteps.x[this.xAxisIndex];
-    const minmaxY = axesSteps.y[this.yAxisIndex];
-
-    const xArea = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
-    const yArea = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
-    const xsp = chartRect.x1 + labelOffset.left;
-    const ysp = chartRect.y2 - labelOffset.bottom;
-
-    const dArea = isHorizontal ? yArea : xArea;
-    const cArea = dArea / (labels.length || 1);
-    const cPad = 2;
-
-    let bArea;
-    if (this.isExistGrp) {
-      bArea = (cArea - (cPad * 2));
-    } else {
-      bArea = (cArea - (cPad * 2)) / showSeriesCount;
-    }
-    let w = isHorizontal ? null : Math.round(bArea * thickness);
-    let h = isHorizontal ? Math.round(bArea * thickness) : null;
-
-    // barArea내에서 barWidth로 빠진 부분을 계산.
-    const bPad = isHorizontal ? (bArea - h) / 2 : (bArea - w) / 2;
-    // series index에 따라 시작 X값 보정을 위한 변수.
-    const barSeriesX = this.isExistGrp ? 1 : index + 1;
-
-    let categoryPoint = null;
-
-    ctx.beginPath();
-    ctx.fillStyle = this.color;
-
-    this.data.forEach((item) => {
-      const posIdx = labels.indexOf(isHorizontal ? item.y : item.x);
-      if (posIdx < 0) {
-        return;
-      }
-
-      if (isHorizontal) {
-        categoryPoint = ysp - (cArea * posIdx) - cPad;
-      } else {
-        categoryPoint = xsp + (cArea * posIdx) + cPad;
-      }
-
-      if (isHorizontal) {
-        x = xsp;
-        y = Math.round(categoryPoint - ((bArea * barSeriesX) - (h + bPad)));
-      } else {
-        x = Math.round(categoryPoint + ((bArea * barSeriesX) - (w + bPad)));
-        y = ysp;
-      }
-
-      if (isHorizontal) {
-        if (item.b) {
-          w = Canvas.calculateX(item.x - item.b, minmaxX.graphMin, minmaxX.graphMax, xArea);
-          x = Canvas.calculateX(item.b, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
-        } else {
-          w = Canvas.calculateX(item.x, minmaxX.graphMin, minmaxX.graphMax, xArea);
-        }
-      } else if (item.b) { // vertical stack bar chart
-        h = Canvas.calculateY(item.y - item.b, minmaxY.graphMin, minmaxY.graphMax, yArea);
-        y = Canvas.calculateY(item.b, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
-      } else { // vertical bar chart
-        h = Canvas.calculateY(item.y, minmaxY.graphMin, minmaxY.graphMax, yArea);
-      }
-
-      ctx.fillRect(x, y, w, isHorizontal ? -h : h);
-
-      item.xp = x; // eslint-disable-line
-      item.yp = y; // eslint-disable-line
-      item.w = w; // eslint-disable-line
-      item.h = isHorizontal ? -h : h; // eslint-disable-line
-    });
-  }
-}
-
-export default Bar;

package/src/components/chart/element/element.line.js

@@ -1,137 +0,0 @@
-import _merge from 'lodash/merge';
-import { COLOR, LINE_OPTION } from '../helpers/helpers.constant';
-import Util from '../helpers/helpers.util';
-import Canvas from '../helpers/helpers.canvas';
-
-class Line {
-  constructor(sId, opt, sIdx) {
-    const merged = _merge({}, LINE_OPTION, opt);
-    Object.keys(merged).forEach((key) => {
-      this[key] = merged[key];
-    });
-
-    if (this.name === undefined) {
-      this.name = `series-${sIdx}`;
-    }
-
-    ['color', 'pointFill', 'fillColor'].forEach((colorProp) => {
-      if (this[colorProp] === undefined) {
-        this[colorProp] = COLOR[sIdx];
-      }
-    });
-
-    this.sId = sId;
-    this.data = [];
-  }
-
-  draw(param) {
-    if (!this.show) {
-      return;
-    }
-
-    const ctx = param.ctx;
-    const chartRect = param.chartRect;
-    const labelOffset = param.labelOffset;
-    const axesSteps = param.axesSteps;
-
-    ctx.beginPath();
-    ctx.lineJoin = 'round';
-    ctx.lineWidth = this.lineWidth;
-    ctx.strokeStyle = this.color;
-
-    if (this.fill) {
-      ctx.fillStyle = `rgba(${Util.hexToRgb(this.color)},${this.fillOpacity})` || '';
-    }
-
-    let startFillIndex = 0;
-    const endPoint = chartRect.y2 - labelOffset.bottom;
-
-    let x;
-    let y;
-    let aliasPixel;
-    let barAreaByCombo = 0;
-
-    const minmaxX = axesSteps.x[this.xAxisIndex];
-    const minmaxY = axesSteps.y[this.yAxisIndex];
-
-    let xArea = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
-    const yArea = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
-
-    if (this.combo) {
-      barAreaByCombo = xArea / (this.data.length || 1);
-      xArea -= barAreaByCombo;
-    }
-
-    const xsp = chartRect.x1 + labelOffset.left + (barAreaByCombo / 2);
-    const ysp = chartRect.y2 - labelOffset.bottom;
-
-    this.data.reduce((prev, curr, ix, item) => {
-      x = Canvas.calculateX(curr.x, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
-      y = Canvas.calculateY(curr.y, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
-
-      if (x !== null) {
-        aliasPixel = Util.aliasPixel(x);
-        x += aliasPixel;
-      }
-
-      if (y === null) {
-        if (ix - 1 > -1) {
-          if (this.fill && prev.y !== null) {
-            ctx.stroke();
-            ctx.lineTo(prev.xp, endPoint);
-            ctx.lineTo(item[startFillIndex].xp, endPoint);
-
-            ctx.fill();
-            ctx.beginPath();
-          }
-        }
-
-        startFillIndex = ix + 1;
-      } else if (ix === 0 || prev.y === null || curr.y === null ||
-        prev.x === null || curr.x === null) {
-        ctx.moveTo(x, y);
-      } else {
-        ctx.lineTo(x, y);
-      }
-
-      curr.xp = x; // eslint-disable-line
-      curr.yp = y; // eslint-disable-line
-
-      return curr;
-    }, this.data[0]);
-
-    ctx.stroke();
-
-    const dataLen = this.data.length;
-
-    if (this.fill && dataLen) {
-      ctx.fillStyle = `rgba(${Util.hexToRgb(this.color)},${this.fillOpacity})` || '';
-      if (this.stackIndex) {
-        this.data.reverse().forEach((curr) => {
-          x = Canvas.calculateX(curr.x, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
-          y = Canvas.calculateY(curr.b, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
-
-          ctx.lineTo(x, y);
-        });
-      } else {
-        ctx.lineTo(this.data[dataLen - 1].xp, endPoint);
-        ctx.lineTo(this.data[startFillIndex].xp, endPoint);
-      }
-
-      ctx.fill();
-    }
-
-    if (this.point) {
-      ctx.strokeStyle = this.color;
-      ctx.fillStyle = this.pointFill;
-
-      this.data.forEach((curr) => {
-        if (curr.xp !== null && curr.yp !== null) {
-          Canvas.drawPoint(ctx, this.pointStyle, this.pointSize, curr.xp, curr.yp);
-        }
-      });
-    }
-  }
-}
-
-export default Line;

package/src/components/chart/element/element.scatter.js

@@ -1,76 +0,0 @@
-import _merge from 'lodash/merge';
-import { COLOR, LINE_OPTION } from '../helpers/helpers.constant';
-import Util from '../helpers/helpers.util';
-import Canvas from '../helpers/helpers.canvas';
-
-class Scatter {
-  constructor(sId, opt, sIdx) {
-    const merged = _merge({}, LINE_OPTION, opt);
-    Object.keys(merged).forEach((key) => {
-      this[key] = merged[key];
-    });
-
-    if (this.name === undefined) {
-      this.name = `series-${sIdx}`;
-    }
-
-    ['color', 'pointFill', 'fillColor'].forEach((colorProp) => {
-      if (this[colorProp] === undefined) {
-        this[colorProp] = COLOR[sIdx];
-      }
-    });
-
-    this.sId = sId;
-    this.data = [];
-  }
-
-  draw(param) {
-    if (!this.show) {
-      return;
-    }
-
-    const ctx = param.ctx;
-    const chartRect = param.chartRect;
-    const labelOffset = param.labelOffset;
-    const axesSteps = param.axesSteps;
-
-    let x;
-    let y;
-    let aliasPixel;
-
-    const minmaxX = axesSteps.x[this.xAxisIndex];
-    const minmaxY = axesSteps.y[this.yAxisIndex];
-
-    const xArea = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
-    const yArea = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
-    const xsp = chartRect.x1 + labelOffset.left;
-    const ysp = chartRect.y2 - labelOffset.bottom;
-
-    this.data.forEach((item) => {
-      x = Canvas.calculateX(item.x, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
-      y = Canvas.calculateY(item.y, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
-
-      if (x !== null) {
-        aliasPixel = Util.aliasPixel(x);
-        x += aliasPixel;
-      }
-
-
-      item.xp = x; // eslint-disable-line
-      item.yp = y; // eslint-disable-line
-
-      return item;
-    }, this.data[0]);
-
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.pointFill;
-
-    this.data.forEach((curr) => {
-      if (curr.xp !== null && curr.yp !== null) {
-        Canvas.drawPoint(ctx, this.pointStyle, this.pointSize, curr.xp, curr.yp);
-      }
-    });
-  }
-}
-
-export default Scatter;

package/src/components/chart/helpers/helpers.canvas.js

@@ -1,143 +0,0 @@
-export default {
-  calculateX(value, min, max, area, startPoint = 0) {
-    if (value === null) {
-      return null;
-    }
-
-    if (value > max || value < min) {
-      return null;
-    }
-
-    const scalingFactor = area / (max - min);
-    return Math.ceil(startPoint + (scalingFactor * (value - min)));
-  },
-
-  calculateY(value, min, max, area, startPoint = 0) {
-    let calcY;
-
-    if (value === null) {
-      return null;
-    }
-
-    if (value > max || value < min) {
-      return null;
-    }
-    // Bar차트의 fillRect처리를 위해 invert값 추가 하여 Y값을 처리
-    const scalingFactor = area / (max - min);
-    if (startPoint) {
-      calcY = startPoint - (scalingFactor * (value - (min || 0)));
-    } else {
-      calcY = -(scalingFactor * (value - (min || 0)));
-    }
-    return Math.floor(calcY);
-  },
-
-  drawPoint(ctx, style, radius, x, y) {
-    let edgeLength;
-    let xOffset;
-    let yOffset;
-    let height;
-    let size;
-
-    if (isNaN(radius) || radius <= 0) {
-      return;
-    }
-
-    let offset;
-    let leftX;
-    let topY;
-    let sideSize;
-
-    switch (style) {
-      // Default includes circle
-      case 'triangle':
-        ctx.beginPath();
-        edgeLength = (3 * radius) / Math.sqrt(3);
-        height = (edgeLength * Math.sqrt(3)) / 2;
-        ctx.moveTo(x - (edgeLength / 2), y + (height / 3));
-        ctx.lineTo(x + (edgeLength / 2), y + (height / 3));
-        ctx.lineTo(x, y - ((2 * height) / 3));
-        ctx.closePath();
-        ctx.fill();
-        break;
-      case 'rect':
-        size = (1 / Math.SQRT2) * radius;
-        ctx.beginPath();
-        ctx.fillRect(x - size, y - size, 2 * size, 2 * size);
-        ctx.strokeRect(x - size, y - size, 2 * size, 2 * size);
-        break;
-      case 'rectRounded':
-        offset = radius / Math.SQRT2;
-        leftX = x - offset;
-        topY = y - offset;
-        sideSize = Math.SQRT2 * radius;
-        ctx.beginPath();
-        this.roundedRect(ctx, leftX, topY, sideSize, sideSize, radius / 2);
-        ctx.closePath();
-        ctx.fill();
-        break;
-      case 'rectRot':
-        size = (1 / Math.SQRT2) * radius;
-        ctx.beginPath();
-        ctx.moveTo(x - size, y);
-        ctx.lineTo(x, y + size);
-        ctx.lineTo(x + size, y);
-        ctx.lineTo(x, y - size);
-        ctx.closePath();
-        ctx.fill();
-        break;
-      case 'cross':
-        ctx.beginPath();
-        ctx.moveTo(x, y + radius);
-        ctx.lineTo(x, y - radius);
-        ctx.moveTo(x - radius, y);
-        ctx.lineTo(x + radius, y);
-        ctx.closePath();
-        break;
-      case 'crossRot':
-        ctx.beginPath();
-        xOffset = Math.cos(Math.PI / 4) * radius;
-        yOffset = Math.sin(Math.PI / 4) * radius;
-        ctx.moveTo(x - xOffset, y - yOffset);
-        ctx.lineTo(x + xOffset, y + yOffset);
-        ctx.moveTo(x - xOffset, y + yOffset);
-        ctx.lineTo(x + xOffset, y - yOffset);
-        ctx.closePath();
-        break;
-      case 'star':
-        ctx.beginPath();
-        ctx.moveTo(x, y + radius);
-        ctx.lineTo(x, y - radius);
-        ctx.moveTo(x - radius, y);
-        ctx.lineTo(x + radius, y);
-        xOffset = Math.cos(Math.PI / 4) * radius;
-        yOffset = Math.sin(Math.PI / 4) * radius;
-        ctx.moveTo(x - xOffset, y - yOffset);
-        ctx.lineTo(x + xOffset, y + yOffset);
-        ctx.moveTo(x - xOffset, y + yOffset);
-        ctx.lineTo(x + xOffset, y - yOffset);
-        ctx.closePath();
-        break;
-      case 'line':
-        ctx.beginPath();
-        ctx.moveTo(x - radius, y);
-        ctx.lineTo(x + radius, y);
-        ctx.closePath();
-        break;
-      case 'dash':
-        ctx.beginPath();
-        ctx.moveTo(x, y);
-        ctx.lineTo(x + radius, y);
-        ctx.closePath();
-        break;
-      default:
-        ctx.beginPath();
-        ctx.arc(x, y, radius, 0, Math.PI * 2);
-        ctx.closePath();
-        ctx.fill();
-        break;
-    }
-
-    ctx.stroke();
-  },
-};