evui 2.0.9 → 2.1.2

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

@@ -0,0 +1,356 @@
+import { numberWithComma } from '@/common/utils';
+import Canvas from '../helpers/helpers.canvas';
+
+const modules = {
+  /**
+   * Draw TextTip with hitInfo
+   * @param {object} [hitInfo=undefined]    mouse hit information
+   *
+   * @returns {undefined}
+   */
+  drawTip(hitInfo) {
+    const opt = this.options;
+    const isHorizontal = !!opt.horizontal;
+    const maxTipOpt = opt.maxTip;
+    const selectItemOpt = opt.selectItem;
+
+    if (maxTipOpt.use || selectItemOpt.use) {
+      const maxSID = this.minMax[isHorizontal ? 'x' : 'y'][0].maxSID;
+      const selSID = hitInfo && hitInfo.sId ? hitInfo.sId : maxSID;
+
+      const maxArgs = this.calculateTipInfo(this.seriesList[maxSID], 'max', null);
+      const selArgs = this.calculateTipInfo(this.seriesList[selSID], 'sel', hitInfo);
+
+      if (maxTipOpt.use && maxArgs) {
+        this.drawTextTip({ opt: maxTipOpt, tipType: 'max', ...maxArgs });
+
+        if (maxTipOpt.showIndicator) {
+          this.drawFixedIndicator({ opt: maxTipOpt, ...maxArgs });
+        }
+      }
+
+      if (selectItemOpt.use && selArgs) {
+        let isSamePos = false;
+
+        if (maxTipOpt.use && maxArgs && maxArgs.dp === selArgs.dp) {
+          isSamePos = true;
+        }
+
+        if (selectItemOpt.showTextTip || selectItemOpt.showTip) {
+          this.drawTextTip({ opt: selectItemOpt, tipType: 'sel', isSamePos, ...selArgs });
+        }
+
+        if (selectItemOpt.showIndicator) {
+          this.drawFixedIndicator({ opt: selectItemOpt, ...selArgs });
+        }
+      }
+    }
+  },
+
+  /**
+   * Calculate tip size and contents
+   * @param {object} series     series information (max series or selected series)
+   * @param {string} tipType    tip type [sel = user select, max = max value]
+   * @param {object} hitInfo    mouse hit information
+   *
+   * @returns {object} size and tip contents
+   */
+  calculateTipInfo(series, tipType, hitInfo) {
+    if (!series) {
+      return false;
+    }
+
+    const isHorizontal = !!this.options.horizontal;
+    const lastTip = this.lastTip;
+    const chartRect = this.chartRect;
+    const labelOffset = this.labelOffset;
+    const graphPos = {
+      x1: chartRect.x1 + labelOffset.left,
+      x2: chartRect.x2 - labelOffset.right,
+      y1: chartRect.y1 + labelOffset.top,
+      y2: chartRect.y2 - labelOffset.bottom,
+    };
+
+    const yArea = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
+    const xArea = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
+
+    const graphX = this.axesSteps.x[series.xAxisIndex];
+    const graphY = this.axesSteps.y[series.yAxisIndex];
+
+    const xsp = graphPos.x1;
+    const xep = graphPos.x2;
+    const ysp = graphPos.y2;
+
+    const { type, size } = series;
+    const { maxDomain, maxDomainIndex } = series.minMax;
+    const seriesMaxY = series.minMax.maxY;
+
+    if (maxDomain === null || maxDomainIndex < 0) {
+      return false;
+    }
+
+    let ldata = type === 'bar' ? maxDomainIndex : maxDomain;
+
+    if (tipType === 'sel') {
+      if (hitInfo && hitInfo.label !== null) {
+        lastTip.pos = type === 'bar' ? hitInfo.maxIndex : hitInfo.label;
+        ldata = lastTip.pos;
+      } else if (lastTip.pos !== null) {
+        ldata = lastTip.pos;
+      }
+    }
+
+    let value = seriesMaxY;
+
+    if (tipType === 'sel') {
+      if (hitInfo && hitInfo.value !== null) {
+        value = hitInfo.useStack ? hitInfo.acc : hitInfo.value;
+        lastTip.value = value;
+      } else if (lastTip.value !== null) {
+        value = lastTip.value;
+      } else if (lastTip.pos !== null) {
+        const item = type === 'bar'
+          ? this.getItemByLabelIndex(lastTip.pos) : this.getItemByLabel(lastTip.pos);
+
+        value = item.useStack ? item.acc : item.value;
+        lastTip.value = value;
+      }
+    }
+
+    let cp;
+    let halfBarSize;
+    let dp;
+
+    if (type === 'bar') {
+      if (isHorizontal) {
+        halfBarSize = Math.round(size.h / 2);
+        cp = ysp - (size.cat * ldata) - size.cPad;
+        dp = (cp - ((size.bar * size.ix) - (size.h + size.bPad))) + halfBarSize;
+      } else {
+        halfBarSize = Math.round(size.w / 2);
+        cp = xsp + (size.cat * ldata) + size.cPad;
+        dp = cp + ((size.bar * size.ix) - (size.w + size.bPad)) + halfBarSize;
+      }
+    } else if (type === 'line') {
+      dp = Canvas.calculateX(
+        ldata,
+        graphX.graphMin,
+        graphX.graphMax,
+        xArea - size.comboOffset,
+        xsp + (size.comboOffset / 2),
+      );
+    }
+
+    const sizeObj = { xArea, yArea, graphX, graphY, xsp, xep, ysp };
+    const dataObj = { dp, value, text: numberWithComma(value), type };
+
+    return { ...sizeObj, ...dataObj };
+  },
+  drawFixedIndicator(param) {
+    const isHorizontal = !!this.options.horizontal;
+    const ctx = this.bufferCtx;
+    const { graphX, graphY, xArea, yArea, xsp, ysp, dp, type, value, opt } = param;
+    const offset = type === 'bar' ? 0 : 3;
+
+    let gp;
+
+    if (opt.fixedPosTop) {
+      if (isHorizontal) {
+        gp = Canvas.calculateX(graphX.graphMax, graphX.graphMin, graphX.graphMax, xArea, xsp);
+      } else {
+        gp = Canvas.calculateY(graphY.graphMax, graphY.graphMin, graphY.graphMax, yArea, ysp);
+        gp -= offset;
+      }
+    } else if (isHorizontal) {
+      gp = Canvas.calculateX(value, graphX.graphMin, graphX.graphMax, xArea, xsp);
+    } else {
+      gp = Canvas.calculateY(value, graphY.graphMin, graphY.graphMax, yArea, ysp);
+      gp -= offset;
+    }
+
+    if (dp === null || dp < xsp) {
+      return;
+    }
+
+    ctx.beginPath();
+    ctx.save();
+    ctx.strokeStyle = opt.indicatorColor;
+    ctx.lineWidth = 2;
+
+    if (isHorizontal) {
+      ctx.moveTo(xsp, dp);
+      ctx.lineTo(gp, dp);
+    } else {
+      ctx.moveTo(dp, ysp);
+      ctx.lineTo(dp, gp);
+    }
+
+    ctx.stroke();
+    ctx.restore();
+    ctx.closePath();
+  },
+
+  /**
+   * Calculate x, y position to draw text tip
+   * @param {object} param     object for drawing text tip
+   *
+   * @returns {undefined}
+   */
+  drawTextTip(param) {
+    const isHorizontal = !!this.options.horizontal;
+    const ctx = this.bufferCtx;
+    const { graphX, graphY, xArea, yArea, xsp, xep, ysp } = param;
+    const { dp, value, text, opt, type, tipType, isSamePos } = param;
+
+    const arrowSize = 4;
+    const maxTipHeight = 20;
+    const borderRadius = 4;
+    const offset = type === 'bar' ? 4 : 6;
+
+    let gp;
+    let tdp = dp;
+
+    if (opt.fixedPosTop) {
+      if (isHorizontal) {
+        gp = Canvas.calculateX(graphX.graphMax, graphX.graphMin, graphX.graphMax, xArea, xsp);
+        gp += offset;
+      } else {
+        gp = Canvas.calculateY(graphY.graphMax, graphY.graphMin, graphY.graphMax, yArea, ysp);
+        gp -= offset;
+      }
+    } else if (isHorizontal) {
+      gp = Canvas.calculateX(value, graphX.graphMin, graphX.graphMax, xArea, xsp);
+      gp += offset;
+    } else {
+      gp = Canvas.calculateY(value, graphY.graphMin, graphY.graphMax, yArea, ysp);
+      gp -= offset;
+    }
+
+    let maxTipType = 'center';
+
+    ctx.save();
+    ctx.font = 'normal normal bold 14px Roboto';
+    const maxTipWidth = Math.round(Math.max(ctx.measureText(text).width + 12, 40));
+
+    if (dp + (maxTipWidth / 2) > xep - 10) {
+      maxTipType = 'right';
+      tdp -= (maxTipWidth / 2) - (arrowSize * 2);
+    } else if (dp - (maxTipWidth / 2) < xsp + 10) {
+      maxTipType = 'left';
+      tdp += (maxTipWidth / 2) - (arrowSize * 2);
+    }
+
+    ctx.restore();
+
+    if (opt.showTextTip || tipType === 'max') {
+      this.showTextTip({
+        context: ctx,
+        type: maxTipType,
+        width: maxTipWidth,
+        height: maxTipHeight,
+        x: tdp,
+        y: gp,
+        opt,
+        arrowSize,
+        borderRadius,
+        text,
+      });
+    }
+
+    if (opt.showTip && tipType === 'sel') {
+      this.showTip({
+        context: ctx,
+        x: dp,
+        y: gp,
+        opt,
+        arrowSize,
+        isSamePos,
+      });
+    }
+  },
+
+  /**
+   * Draw text tip
+   * @param {object} param     object for drawing text tip
+   *
+   * @returns {undefined}
+   */
+  showTextTip(param) {
+    const { type, width, height, x, y, arrowSize, borderRadius, text, opt } = param;
+    const ctx = param.context;
+
+    const sx = x - (width / 2);
+    const ex = x + (width / 2);
+    const sy = y - height;
+    const ey = y;
+
+    ctx.save();
+    ctx.font = 'normal normal bold 14px Roboto';
+
+    ctx.fillStyle = opt.tipBackground;
+    ctx.shadowBlur = 0;
+
+    ctx.beginPath();
+    ctx.moveTo(sx + borderRadius, sy);
+    ctx.quadraticCurveTo(sx, sy, sx, sy + borderRadius);
+    ctx.lineTo(sx, ey - borderRadius);
+    ctx.quadraticCurveTo(sx, ey, sx + borderRadius, ey);
+
+    if (type === 'left') {
+      ctx.lineTo(sx + borderRadius + arrowSize, ey + arrowSize);
+      ctx.lineTo(sx + borderRadius + (arrowSize * 2), ey);
+      ctx.lineTo(ex - borderRadius, ey);
+    } else if (type === 'right') {
+      ctx.lineTo(ex - (arrowSize * 2) - borderRadius, ey);
+      ctx.lineTo(ex - arrowSize - borderRadius, ey + arrowSize);
+      ctx.lineTo(ex - borderRadius, ey);
+    } else {
+      ctx.lineTo(x - arrowSize, ey);
+      ctx.lineTo(x, ey + arrowSize);
+      ctx.lineTo(x + arrowSize, ey);
+      ctx.lineTo(ex - borderRadius, ey);
+    }
+
+    ctx.quadraticCurveTo(ex, ey, ex, ey - borderRadius);
+    ctx.lineTo(ex, sy + borderRadius);
+    ctx.quadraticCurveTo(ex, sy, ex - borderRadius, sy);
+    ctx.lineTo(sx + borderRadius, sy);
+    ctx.closePath();
+    ctx.fill();
+    ctx.restore();
+    ctx.save();
+    ctx.font = 'normal normal bold 14px Roboto';
+    ctx.fillStyle = opt.tipTextColor;
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = 'center';
+    ctx.fillText(`${text}`, x, sy + (height / 2));
+    ctx.restore();
+  },
+
+  /**
+   * Draw arrow tip
+   * @param {object} param     object for drawing arrow tip
+   *
+   * @returns {undefined}
+   */
+  showTip(param) {
+    const { x, y, opt, isSamePos } = param;
+    const ctx = param.context;
+    const offset = isSamePos ? 24 : 0;
+    const cy = y - offset;
+    ctx.save();
+
+    ctx.fillStyle = opt.tipBackground;
+    ctx.beginPath();
+    ctx.moveTo(x, cy);
+    ctx.lineTo(x + 6, cy - 6);
+    ctx.lineTo(x - 6, cy - 6);
+    ctx.lineTo(x, cy);
+    ctx.closePath();
+    ctx.fill();
+
+    ctx.restore();
+  },
+};
+
+export default modules;

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

@@ -1,4 +1,14 @@
 export default {
+  /**
+   * Calculate X position
+   * @param {any}    value         graph value
+   * @param {number} min           min value
+   * @param {number} max           max value
+   * @param {number} area          height for axis
+   * @param {number} startPoint    startPoint
+   *
+   * @returns {any} position
+   */
   calculateX(value, min, max, area, startPoint = 0) {
     if (value === null) {
       return null;
@@ -12,6 +22,35 @@ export default {
     return Math.ceil(startPoint + (scalingFactor * (value - min)));
   },
 
+  /**
+   * Calculate X position (for timebar)
+   * @param {any}    value         graph value
+   * @param {number} min           min value
+   * @param {number} max           max value
+   * @param {number} area          height for axis
+   * @param {number} startPoint    startPoint
+   *
+   * @returns {any} position
+   */
+  calculateSubX(value, min, max, area, startPoint = 0) {
+    if (value === null) {
+      return null;
+    }
+
+    const scalingFactor = area / (max - min);
+    return Math.ceil(startPoint + (scalingFactor * (value - min)));
+  },
+
+  /**
+   * Calculate Y position
+   * @param {any}    value         graph value
+   * @param {number} min           min value
+   * @param {number} max           max value
+   * @param {number} area          height for axis
+   * @param {number} startPoint    startPoint
+   *
+   * @returns {any} position
+   */
   calculateY(value, min, max, area, startPoint = 0) {
     let calcY;
 
@@ -32,6 +71,16 @@ export default {
     return Math.floor(calcY);
   },
 
+  /**
+   * Draw point for chart
+   * @param {object} ctx       canvas context
+   * @param {string} style     point style
+   * @param {number} radius    radius
+   * @param {number} x         x position
+   * @param {number} y         y position
+   *
+   * @returns {undefined}
+   */
   drawPoint(ctx, style, radius, x, y) {
     let edgeLength;
     let xOffset;
@@ -140,4 +189,49 @@ export default {
 
     ctx.stroke();
   },
+
+  /**
+   * Draw roundedRect point for chart
+   * @param {object} ctx       canvas context
+   * @param {number} x         x position
+   * @param {number} y         y position
+   * @param {string} width     width
+   * @param {number} height    height
+   * @param {number} radius    radius
+   *
+   * @returns {undefined}
+   */
+  roundedRect(ctx, x, y, width, height, radius) {
+    const pi = Math.PI;
+    const halfPi = pi / 2;
+
+    if (radius) {
+      const r = Math.min(radius, height / 2, width / 2);
+      const left = x + r;
+      const top = y + r;
+      const right = (x + width) - r;
+      const bottom = (y + height) - r;
+
+      ctx.moveTo(x, top);
+      if (left < right && top < bottom) {
+        ctx.arc(left, top, r, -pi, -halfPi);
+        ctx.arc(right, top, r, -halfPi, 0);
+        ctx.arc(right, bottom, r, 0, halfPi);
+        ctx.arc(left, bottom, r, halfPi, pi);
+      } else if (left < right) {
+        ctx.moveTo(left, y);
+        ctx.arc(right, top, r, -halfPi, halfPi);
+        ctx.arc(left, top, r, halfPi, pi + halfPi);
+      } else if (top < bottom) {
+        ctx.arc(left, top, r, -pi, 0);
+        ctx.arc(left, bottom, r, 0, pi);
+      } else {
+        ctx.arc(left, top, r, -pi, pi);
+      }
+      ctx.closePath();
+      ctx.moveTo(x, y);
+    } else {
+      ctx.rect(x, y, width, height);
+    }
+  },
 };

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

@@ -29,16 +29,20 @@ export const COLOR = [
 export const LINE_OPTION = {
   show: true,
   highlight: {
-    pointSize: 5,
+    defaultSize: 4,
+    maxSize: 6,
+    maxShadowSize: 10,
+    maxShadowOpacity: 0.4,
   },
   xAxisIndex: 0,
   yAxisIndex: 0,
   point: true,
-  pointSize: 4,
+  pointSize: 3,
   pointStyle: '',
   lineWidth: 2,
   fill: false,
   fillOpacity: 0.4,
+  showLegend: true,
 };
 
 export const BAR_OPTION = {
@@ -49,25 +53,40 @@ export const BAR_OPTION = {
   xAxisIndex: 0,
   yAxisIndex: 0,
   category: true,
+  showLegend: true,
+  showValue: {
+    use: false,
+    fontSize: 12,
+    textColor: '#000000',
+  },
 };
 
+export const PIE_OPTION = {
+  show: true,
+  showLegend: true,
+};
 
 export const AXIS_OPTION = {
   min: null,
   max: null,
   autoScaleRatio: null,
   startToZero: false,
+  showAxis: true,
+  axisLineColor: '#C9CFDC',
   showGrid: true,
-  axisLineColor: '#b4b6ba',
-  gridLineColor: '#e7e9ed',
+  gridLineColor: '#C9CFDC',
+  showIndicator: false,
   timeFormat: 'mm:ss',
   range: null,
   interval: null,
   decimalPoint: null,
   labelStyle: {
     fontSize: 12,
-    color: '#333',
-    fontFamily: 'Droid Sans',
+    color: '#25262E',
+    fontFamily: 'Roboto',
+    fontWeight: 400,
+    fitWidth: false,
+    fitDir: 'right',
   },
 };
 

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

@@ -1,4 +1,18 @@
+import {
+  billions,
+  millions,
+  quadrillion,
+  trillion,
+  truthy,
+} from '@/common/utils';
+
 export default {
+  /**
+   * Transforming hex to rgb code
+   * @param {string} hex    hex color code
+   *
+   * @returns {string} rgb code
+   */
   hexToRgb(hex) {
     if (!hex) {
       return false;
@@ -13,63 +27,88 @@ export default {
     return `${r},${g},${b}`;
   },
 
+  /**
+   * To logarithmic scale, compute log value
+   * @param {number} value    graph value
+   *
+   * @returns {number} computed value
+   */
   calculateMagnitude(value) {
     return Math.floor(Math.log(value) / Math.LN10);
   },
 
+  /**
+   * Set alias pixel to deal with anti-aliasing
+   * @param {number} width    line width
+   *
+   * @returns {number} computed value
+   */
   aliasPixel(width) {
-    return (width % 2 === 0) ? 0 : 0.5;
+    return width % 2 === 0 ? 0 : 0.5;
   },
 
+  /**
+   * Create string for canvas font style
+   * @param {object} style    style object by user
+   *
+   * @returns {string} computed value
+   */
   getLabelStyle(style) {
-    return `normal ${style.fontSize}px ${style.fontFamily}`;
+    return `normal normal ${style.fontWeight} ${style.fontSize}px ${style.fontFamily}`;
   },
 
+  /**
+   * Create sign format with number
+   * @param {number} value           graph value
+   * @param {string} decimalPoint    decimal point
+   *
+   * @returns {string} signed value
+   */
   labelSignFormat(value, decimalPoint) {
+    const quad = quadrillion(1);
+    const trill = trillion(1);
+    const billi = billions(1);
+    const milli = millions(1);
+    const killo = 1000;
+
     let label;
-    if (typeof value === 'number') {
-      if (value >= 1000000000000000) {
-        if (value % 1000000000000000 === 0) {
-          label = `${(value / 1000000000000000).toFixed(decimalPoint)}P`;
-        } else {
-          label = `${(value / 1000000000000000).toFixed(1)}P`;
-        }
-      } else if (value >= 1000000000000) {
-        if (value % 1000000000000 === 0) {
-          label = `${(value / 1000000000000).toFixed(decimalPoint)}T`;
-        } else {
-          label = `${(value / 1000000000000).toFixed(1)}T`;
-        }
-      } else if (value >= 1000000000) {
-        if (value % 1000000000 === 0) {
-          label = `${(value / 1000000000).toFixed(decimalPoint)}G`;
-        } else {
-          label = `${(value / 1000000000).toFixed(1)}G`;
-        }
-      } else if (value >= 1000000) {
-        if (value % 1000000 === 0) {
-          label = `${(value / 1000000).toFixed(decimalPoint)}M`;
-        } else {
-          label = `${(value / 1000000).toFixed(1)}M`;
-        }
-      } else if (value >= 1000) {
-        if (value % 1000 === 0) {
-          label = `${(value / 1000).toFixed(decimalPoint)}K`;
-        } else {
-          label = `${(value / 1000).toFixed(1)}K`;
-        }
-      } else if (value < 1 && value > 0) {
-        label = value.toFixed(1);
-      } else {
-        label = value.toFixed(decimalPoint);
+    if (!truthy(value)) {
+      return value;
+    }
+
+    const assignLabelWith = (v, target, lb) => {
+      if (v % target === 0) {
+        return `${(v / target).toFixed(decimalPoint)}${lb}`;
       }
+      return `${(v / target).toFixed(1)}${lb}`;
+    };
+
+    if (value >= quad) {
+      label = assignLabelWith(value, quad, 'P');
+    } else if (value >= trill) {
+      label = assignLabelWith(value, trill, 'T');
+    } else if (value >= billi) {
+      label = assignLabelWith(value, billi, 'G');
+    } else if (value >= milli) {
+      label = assignLabelWith(value, milli, 'M');
+    } else if (value >= killo) {
+      label = assignLabelWith(value, 1000, 'K');
+    } else if (value < 1 && value > 0) {
+      label = value.toFixed(1);
     } else {
-      label = value;
+      label = value.toFixed(decimalPoint);
     }
 
     return label;
   },
 
+  /**
+   * Calculate text size with html
+   * @param {string} text         text is needed to check size
+   * @param {string} fontStyle    text font style
+   *
+   * @returns {object} text size information
+   */
   calcTextSize(text, fontStyle) {
     const calc = document.createElement('span');
     const style = `visibility:hidden; position:absolute; top:-10000px; font: ${fontStyle};`;
@@ -88,6 +127,12 @@ export default {
     return { width, height };
   },
 
+  /**
+   * Comparing strings
+   * @param {array} array    compared array
+   *
+   * @returns {object} min/max information
+   */
   getStringMinMax(array) {
     const minMax = {
       min: array[0],

package/src/components/chart/index.js

@@ -1,4 +1,3 @@
 import Chart from './chart';
 
 export default Chart;
-