evui 2.0.8 → 2.1.1

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

@@ -1,262 +0,0 @@
-import BaseChart from './chart.base';
-import Util from '../core/core.util';
-
-export default class LineChart extends BaseChart {
-  drawChart() {
-    if (!this.chartRect.width || !this.chartRect.height ||
-      this.chartRect.width < 1 || this.chartRect.height < 1) {
-      return;
-    }
-
-    this.setLabelOffset();
-    this.createAxis();
-    this.createLine();
-
-    this.displayCtx.drawImage(this.bufferCanvas, 0, 0);
-  }
-
-  createLine() {
-    const groups = this.data.groups;
-    const graphData = this.graphData;
-    const skey = Object.keys(graphData);
-    let series;
-
-    if (groups.length) {
-      for (let ix = 0, ixLen = groups.length; ix < ixLen; ix++) {
-        const group = groups[ix];
-        for (let jx = 0, jxLen = group.length; jx < jxLen; jx++) {
-          series = this.seriesList[group[jx]];
-
-          if (series.show) {
-            this.drawSeries(group[jx], graphData[group[jx]]);
-          }
-        }
-      }
-    }
-
-    for (let ix = 0, ixLen = skey.length; ix < ixLen; ix++) {
-      series = this.seriesList[skey[ix]];
-
-      if (!series.isExistGrp && series.show) {
-        this.drawSeries(skey[ix], graphData[skey[ix]]);
-      }
-    }
-  }
-
-  drawSeries(seriesId, data) {
-    const series = this.seriesList[seriesId];
-    const ctx = this.bufferCtx;
-    const color = series.color;
-
-    const isFill = series.fill;
-    const stackIndex = series.stackIndex;
-
-    ctx.beginPath();
-    ctx.lineJoin = 'round';
-    ctx.lineWidth = series.lineWidth;
-    ctx.strokeStyle = color;
-
-    if (isFill) {
-      ctx.fillStyle = `rgba(${Util.hexToRgb(color)},${series.fillOpacity})` || '';
-    }
-
-    let startFillIndex = 0;
-    const endPoint = this.chartRect.y2 - this.labelOffset.bottom;
-    const dataLen = data.length;
-
-    let x;
-    let y;
-    let gdata;
-    let prev;
-    let convX;
-    let convY;
-    let aliasPixel;
-
-    for (let ix = 0; ix < dataLen; ix++) {
-      gdata = data[ix];
-      prev = data[ix - 1];
-
-      x = this.calculateX(gdata.x, series.xAxisIndex, true);
-      y = this.calculateY(gdata.y, series.yAxisIndex, false);
-
-      aliasPixel = Util.aliasPixel(x);
-      x += aliasPixel;
-
-      if (y === null) {
-        if (ix - 1 > -1) {
-          if (isFill && prev.y !== null) {
-            ctx.stroke();
-            ctx.lineTo(prev.xp, endPoint);
-            ctx.lineTo(data[startFillIndex].xp, endPoint);
-
-            // 단순히 fill을 위해서 하단 lineTo는 의미가 없으나 명확성을 위해 남겨둠
-            ctx.lineTo(data[startFillIndex].xp, data[startFillIndex].yp);
-
-            ctx.fill();
-            ctx.beginPath();
-          }
-        }
-
-        startFillIndex = ix + 1;
-      } else if (ix === 0 || prev.y === null || gdata.y === null ||
-        // 시작 지점 혹은 이전/현 X또는 Y값이 없다면 moveTo로 좌표를 이동
-        // null 데이터가 들어왔을 시 차트를 끊어내기 위함.
-        prev.x === null || gdata.x === null) {
-        ctx.moveTo(x, y);
-      } else {
-        ctx.lineTo(x, y);
-      }
-
-      gdata.xp = x;
-      gdata.yp = y;
-    }
-
-    ctx.stroke();
-    if (isFill && dataLen && data[dataLen - 1].y !== null) {
-      ctx.fillStyle = `rgba(${Util.hexToRgb(color)},${series.fillOpacity})` || '';
-
-      if (stackIndex) {
-        for (let ix = dataLen - 1; ix >= startFillIndex; ix--) {
-          gdata = data[ix];
-
-          convX = this.calculateX(gdata.x, series.xAxisIndex, true);
-          convY = this.calculateY(gdata.b, series.yAxisIndex, false);
-
-          ctx.lineTo(convX, convY);
-        }
-      } else {
-        ctx.lineTo(data[dataLen - 1].xp, endPoint);
-        ctx.lineTo(data[startFillIndex].xp, endPoint);
-      }
-      // 단순히 fill을 위해서 하단 lineTo는 의미가 없으나 명확성을 위해 남겨둠
-      ctx.lineTo(data[startFillIndex].xp, data[startFillIndex].yp);
-
-      ctx.fill();
-    }
-
-    // 포인트 효과를 마지막에 다시 그리는 이유는 마지막에 그려야 다른 그림과 겹치지 않음.
-    if (series.point) {
-      ctx.strokeStyle = color;
-      ctx.fillStyle = series.pointFill;
-      ctx.lineWidth = series.lineWidth;
-      for (let ix = 0, ixLen = dataLen; ix < ixLen; ix++) {
-        gdata = data[ix];
-
-        if (gdata.xp !== null && gdata.yp !== null) {
-          this.drawPoint(ctx, series.pointStyle, series.pointSize, gdata.xp, gdata.yp);
-        }
-      }
-    }
-  }
-
-  seriesHighlight(seriesId) {
-    const ctx = this.overlayCtx;
-    const series = this.seriesList[seriesId];
-    const data = this.graphData[seriesId];
-    const color = series.color;
-
-    let x = null;
-    let y = null;
-    let gdata;
-    let prev;
-
-    ctx.beginPath();
-    ctx.lineJoin = 'round';
-    ctx.lineWidth = 2;
-    ctx.strokeStyle = color;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
-    ctx.shadowBlur = 8;
-    ctx.shadowColor = color;
-
-    for (let ix = 0, ixLen = data.length; ix < ixLen; ix++) {
-      gdata = data[ix];
-      prev = data[ix - 1];
-
-      x = gdata.xp;
-      y = gdata.yp;
-
-      // 시작 지점 혹은 이전/현 X또는 Y값이 없다면 moveTo로 좌표를 이동
-      // null 데이터가 들어왔을 시 차트를 끊어내기 위함.
-      if (ix === 0 || prev.y === null || gdata.y === null || prev.x === null || gdata.x === null) {
-        ctx.moveTo(x, y);
-      } else {
-        ctx.lineTo(x, y);
-      }
-    }
-
-    ctx.stroke();
-    ctx.closePath();
-
-    if (series.point) {
-      const pSize = series.highlight.pointSize;
-
-      ctx.beginPath();
-      ctx.strokeStyle = color;
-      ctx.lineWidth = 2;
-      ctx.fillStyle = color;
-
-      for (let ix = 0, ixLen = data.length; ix < ixLen; ix++) {
-        gdata = data[ix];
-
-        if (gdata.xp !== null && gdata.yp !== null) {
-          this.drawPoint(ctx, series.pointStyle, pSize, gdata.xp, gdata.yp);
-        }
-      }
-    }
-  }
-
-  itemHighlight(item) {
-    if (item.index === null || item.sId === null) {
-      return;
-    }
-
-    const graphData = this.graphData;
-    const gdata = graphData[item.sId];
-    const ctx = this.overlayCtx;
-    const series = this.seriesList[item.sId];
-
-    if (!series.point) {
-      return;
-    }
-
-    const color = series.color;
-    const x = gdata[item.index].xp;
-    const y = gdata[item.index].yp;
-    const pSize = series.highlight.pointSize;
-
-    ctx.strokeStyle = color;
-    ctx.lineWidth = series.lineWidth;
-    ctx.fillStyle = series.pointFill;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
-    ctx.shadowBlur = 4;
-    ctx.shadowColor = color;
-
-    if (x !== null && y !== null) {
-      this.drawPoint(ctx, series.pointStyle, pSize, x, y);
-    }
-  }
-
-  showCrosshair(offset) {
-    const ctx = this.overlayCtx;
-    const x = offset[0];
-    const y = offset[1];
-    const graphPos = this.getChartGraphPos();
-
-    if ((x >= (graphPos.x1 - 1) && x <= (graphPos.x2 + 1))
-      && (y >= (graphPos.y1 - 1) && y <= (graphPos.y2 + 1))) {
-      ctx.strokeStyle = '#ff5500';
-      ctx.lineWidth = 2;
-
-      ctx.beginPath();
-      ctx.save();
-      ctx.shadowBlur = 0;
-      ctx.moveTo(x, graphPos.y1);
-      ctx.lineTo(x, graphPos.y2);
-
-      ctx.stroke();
-      ctx.restore();
-    }
-  }
-}

package/src/components/chart/charts/chart.pie.js

@@ -1,383 +0,0 @@
-import _ from 'lodash';
-import BaseChart from './chart.base';
-import PieDataStore from '../core/data/data.pie';
-
-export default class PieChart extends BaseChart {
-  constructor(target, data, options) {
-    super(target, data, options);
-
-    this.radiusArr = [];
-  }
-
-  createDataStore() {
-    this.store = new PieDataStore({
-      chartData: this.data,
-      chartOptions: this.options,
-    });
-  }
-
-  drawChart() {
-    this.createPie();
-    this.displayCtx.drawImage(this.bufferCanvas, 0, 0);
-  }
-
-  createPie() {
-    const graphData = this.graphData;
-    let dsLength = 0;
-    let showIndex = 0;
-
-    for (let ix = 0, ixLen = graphData.length; ix < ixLen; ix++) {
-      if (graphData[ix].total) {
-        dsLength += 1;
-      }
-    }
-
-    for (let ix = 0, ixLen = graphData.length; ix < ixLen; ix++) {
-      this.store.sortingDescDataSet(ix);
-      if (graphData[ix].total) {
-        this.drawPieDataSet(graphData[ix], showIndex, dsLength);
-        showIndex += 1;
-      }
-    }
-
-    if (this.options.doughnutHoleSize > 0) {
-      this.drawDoughnutHole(graphData.length - 1);
-    }
-  }
-
-  drawPieDataSet(dataSetInfo, dsIndex, dsLength) {
-    let item;
-    let val;
-    let sliceAngle;
-    let color;
-    let startAngle = 1.5 * Math.PI;
-    let endAngle;
-    let series;
-
-    const dsInfo = dataSetInfo;
-    const width = this.chartRect.chartWidth - this.chartRect.padding.left;
-    const height = this.chartRect.chartHeight - this.chartRect.padding.top;
-
-    const centerX = (width / 2) + this.chartRect.padding.left;
-    const centerY = (height / 2) + this.chartRect.padding.top;
-
-    const innerRadius = Math.min(width / 2, height / 2) * this.options.doughnutHoleSize;
-    const outerRadius = Math.min(width / 2, height / 2);
-
-    const radius = outerRadius - (((outerRadius - innerRadius) / dsLength) * dsIndex);
-
-    dsInfo.or = radius;
-    if (dsIndex < dsLength - 1) {
-      dsInfo.ir = outerRadius - (((outerRadius - innerRadius) / dsLength) * (dsIndex + 1));
-    } else {
-      dsInfo.ir = 1;
-    }
-
-    if (dsInfo.total) {
-      for (let ix = 0, ixLen = dsInfo.data.length; ix < ixLen; ix++) {
-        item = dsInfo.data[ix];
-        series = this.seriesList[item.id];
-        val = item.value;
-        sliceAngle = 2 * Math.PI * (val / dsInfo.total);
-        endAngle = startAngle + sliceAngle;
-        color = this.seriesList[item.id].color;
-
-        item.sa = startAngle;
-        item.ea = endAngle;
-
-        if (val && series.show) {
-          this.drawPieSlice(centerX, centerY, radius, startAngle, endAngle, color, ixLen === 1);
-          startAngle += sliceAngle;
-        }
-      }
-
-      this.bufferCtx.beginPath();
-      this.bufferCtx.lineWidth = this.options.border;
-      this.bufferCtx.strokeStyle = '#fff';
-      this.bufferCtx.strokeOpacity = 0;
-      this.bufferCtx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-      this.bufferCtx.stroke();
-      this.bufferCtx.closePath();
-    }
-  }
-
-  drawPieSlice(centerX, centerY, radius, startAngle, endAngle, color, isSingle) {
-    const ctx = this.bufferCtx;
-    ctx.beginPath();
-    ctx.fillStyle = color;
-    if (!isSingle) {
-      ctx.moveTo(centerX, centerY);
-    }
-    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
-    ctx.fill();
-    ctx.closePath();
-  }
-
-  drawDoughnutHole(dsIndex) {
-    const ctx = this.bufferCtx;
-
-    const width = this.chartRect.chartWidth - this.chartRect.padding.left;
-    const height = this.chartRect.chartHeight - this.chartRect.padding.top;
-    const centerX = (width / 2) + this.chartRect.padding.left;
-    const centerY = (height / 2) + this.chartRect.padding.top;
-
-    const radius = Math.min(width / 2, height / 2) * this.options.doughnutHoleSize;
-    ctx.save();
-    ctx.globalCompositeOperation = 'destination-out';
-    ctx.beginPath();
-    ctx.fillStyle = '#fff';
-    ctx.fillOpacity = 0;
-    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-    ctx.fill();
-    ctx.strokeStyle = '#fff';
-    ctx.stroke();
-    ctx.closePath();
-    ctx.restore();
-
-    // inner stroke
-    ctx.beginPath();
-    ctx.strokeStyle = '#fff';
-    ctx.lineWidth = this.options.border;
-    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
-    ctx.stroke();
-    ctx.closePath();
-
-    this.graphData[dsIndex].ir = radius;
-  }
-
-  seriesHighlight(seriesId) {
-    const ctx = this.overlayCtx;
-    const series = this.seriesList[seriesId];
-    const color = series.color;
-    const graphData = this.graphData;
-
-    const width = this.chartRect.chartWidth - this.chartRect.padding.left;
-    const height = this.chartRect.chartHeight - this.chartRect.padding.top;
-    const centerX = (width / 2) + this.chartRect.padding.left;
-    const centerY = (height / 2) + this.chartRect.padding.top;
-
-    let findIndex = false;
-    for (let ix = 0, ixLen = graphData.length; ix < ixLen; ix++) {
-      const gdata = graphData[ix];
-
-      for (let jx = 0, jxLen = gdata.data.length; jx < jxLen; jx++) {
-        if (gdata.data[jx].id === seriesId) {
-          findIndex = jx;
-        }
-      }
-
-      const info = gdata.data[findIndex];
-      const or = gdata.or;
-      const ir = gdata.ir;
-
-      const sa = info.sa;
-      const ea = info.ea;
-
-      ctx.fillStyle = color;
-      ctx.shadowOffsetX = 0;
-      ctx.shadowOffsetY = 0;
-      ctx.shadowBlur = 8;
-      ctx.shadowColor = color;
-      ctx.lineWidth = this.options.border;
-      ctx.strokeStyle = '#fff';
-      ctx.beginPath();
-      ctx.moveTo(centerX, centerY);
-      ctx.arc(centerX, centerY, or, sa, ea);
-      ctx.fill();
-      ctx.closePath();
-      ctx.save();
-      ctx.beginPath();
-      ctx.moveTo(centerX, centerY);
-      ctx.globalCompositeOperation = 'destination-out';
-      ctx.fillOpacity = 1;
-      ctx.arc(centerX, centerY, ir, sa - 1, ea + 1);
-      ctx.fill();
-      ctx.closePath();
-      ctx.restore();
-    }
-
-    const hole = Math.min(width / 2, height / 2) * this.options.doughnutHoleSize;
-    ctx.save();
-    ctx.globalCompositeOperation = 'destination-out';
-    ctx.beginPath();
-    ctx.fillStyle = '#fff';
-    ctx.fillOpacity = 0;
-    ctx.arc(centerX, centerY, hole, 0, 2 * Math.PI);
-    ctx.fill();
-    ctx.strokeStyle = '#fff';
-    ctx.stroke();
-    ctx.closePath();
-    ctx.restore();
-  }
-
-  itemHighlight(item) {
-    if (item.dsIndex === null || item.sId === null) {
-      return;
-    }
-    const ctx = this.overlayCtx;
-
-    const series = this.seriesList[item.sId];
-    const color = series.color;
-    const ds = this.graphData[item.dsIndex];
-    const gdata = _.find(ds.data, { id: item.sId });
-
-    const width = this.chartRect.chartWidth - this.chartRect.padding.left;
-    const height = this.chartRect.chartHeight - this.chartRect.padding.top;
-    const centerX = (width / 2) + this.chartRect.padding.left;
-    const centerY = (height / 2) + this.chartRect.padding.top;
-
-    const or = ds.or;
-    const ir = ds.ir;
-
-    const sa = gdata.sa;
-    const ea = gdata.ea;
-
-    ctx.fillStyle = color;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
-    ctx.shadowBlur = 8;
-    ctx.shadowColor = color;
-    ctx.lineWidth = this.options.border;
-    ctx.strokeStyle = '#fff';
-
-    ctx.save();
-    ctx.beginPath();
-    ctx.moveTo(centerX, centerY);
-    ctx.arc(centerX, centerY, or, sa, ea);
-    ctx.fill();
-    ctx.closePath();
-
-
-    ctx.beginPath();
-    ctx.moveTo(centerX, centerY);
-    ctx.globalCompositeOperation = 'destination-out';
-    ctx.fillOpacity = 1;
-    ctx.arc(centerX, centerY, ir, sa - 1, ea + 1);
-    ctx.fill();
-    ctx.closePath();
-    ctx.restore();
-
-    const hole = Math.min(width / 2, height / 2) * this.options.doughnutHoleSize;
-    ctx.save();
-    ctx.globalCompositeOperation = 'destination-out';
-    ctx.beginPath();
-    ctx.fillStyle = '#fff';
-    ctx.fillOpacity = 0;
-    ctx.arc(centerX, centerY, hole, 0, 2 * Math.PI);
-    ctx.fill();
-    ctx.strokeStyle = '#fff';
-    ctx.stroke();
-    ctx.closePath();
-    ctx.restore();
-  }
-
-  findHitItem(offset) {
-    const mouseX = offset[0];
-    const mouseY = offset[1];
-
-    const width = this.chartRect.chartWidth;
-    const height = this.chartRect.chartHeight;
-    const centerX = (width / 2) + this.chartRect.padding.left;
-    const centerY = (height / 2) + this.chartRect.padding.top;
-
-    const dx = mouseX - centerX;
-    const dy = mouseY - centerY;
-
-    let angle;
-    angle = ((Math.atan2(-dy, -dx) * 180) / Math.PI) - 90;
-    angle = angle < 0 ? 360 + angle : angle;
-    const rad = ((angle * Math.PI) / 180) + (1.5 * Math.PI);
-    const distance = Math.round(Math.sqrt((dx ** 2) + (dy ** 2)));
-
-    const graphData = this.graphData;
-    let gdata;
-    let dsIndex = null;
-    let sId = null;
-
-    for (let ix = 0, ixLen = graphData.length; ix < ixLen; ix++) {
-      gdata = graphData[ix];
-      if (distance > gdata.ir && distance < gdata.or) {
-        dsIndex = ix;
-      }
-    }
-
-    if (graphData[dsIndex]) {
-      for (let ix = 0, ixLen = graphData[dsIndex].data.length; ix < ixLen; ix++) {
-        gdata = graphData[dsIndex].data[ix];
-
-        if (rad > gdata.sa && rad < gdata.ea) {
-          sId = gdata.id;
-        }
-      }
-    }
-
-    return { dsIndex, sId };
-  }
-
-  showTooltip(offset, e, item) {
-    const index = item.dsIndex;
-    if (index === null) {
-      this.tooltipDOM.style.display = 'none';
-      return;
-    }
-
-    const graphData = this.graphData[item.dsIndex].data;
-    const offsetX = offset[0];
-    const offsetY = offset[1];
-
-    const mouseX = e.pageX;
-    const mouseY = e.pageY;
-    const clientX = e.clientX;
-    const clientY = e.clientY;
-    const bodyWidth = document.body.clientWidth;
-    const bodyHeight = document.body.clientHeight;
-
-    const graphPos = {
-      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,
-    };
-
-    if ((offsetX >= (graphPos.x1 - 1) && offsetX <= (graphPos.x2))
-      && (offsetY >= (graphPos.y1 - 1) && offsetY <= (graphPos.y2 + 1))) {
-      this.tooltipTitleDOM.style.display = 'none';
-
-      const listDOM = this.ulDOM.children;
-      let sId;
-      let series;
-      let valueDOM;
-      let gdata;
-
-      for (let ix = 0, ixLen = listDOM.length; ix < ixLen; ix++) {
-        sId = listDOM[ix].dataset.seriesId;
-        series = this.seriesList[sId];
-
-        if (series && series.show) {
-          gdata = _.find(graphData, { id: sId }).value;
-          listDOM[ix].style.display = 'block';
-          valueDOM = listDOM[ix].children[3];
-          valueDOM.textContent = gdata;
-        } else {
-          listDOM[ix].style.display = 'none';
-        }
-      }
-
-      this.tooltipDOM.style.display = 'block';
-
-      if (offsetX > ((graphPos.x2 * 4) / 5) || clientX > ((bodyWidth * 4) / 5)) {
-        this.tooltipDOM.style.left = `${mouseX - (this.tooltipDOM.clientWidth + 10)}px`;
-      } else {
-        this.tooltipDOM.style.left = `${mouseX + 15}px`;
-      }
-
-      if (offsetY > ((graphPos.y2 * 3) / 4) || clientY > ((bodyHeight * 3) / 4)) {
-        this.tooltipDOM.style.top = `${mouseY - (this.tooltipDOM.clientHeight + 5)}px`;
-      } else {
-        this.tooltipDOM.style.top = `${mouseY + 10}px`;
-      }
-    } else {
-      this.tooltipDOM.style.display = 'none';
-    }
-  }
-}