evui 3.4.207 → 3.4.209

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

@@ -1,265 +0,0 @@
-import Util from './helpers.util';
-
-export default {
-  /**
-   * Calculate X position
-   * @param {number|null|undefined}    value         graph value
-   * @param {number} min           min value
-   * @param {number} max           max value
-   * @param {number} area          height for axis
-   * @param {number} startPoint    startPoint
-   *
-   * @returns {number|null} position
-   */
-  calculateX(value, min, max, area, startPoint = 0) {
-    if (value === null || value === undefined) {
-      return null;
-    }
-
-    if (value > max || value < min) {
-      return null;
-    }
-
-    const scalingFactor = area / (max - min);
-    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 || value === undefined) {
-      return null;
-    }
-
-    const scalingFactor = area / (max - min);
-    return Math.ceil(startPoint + (scalingFactor * (value - min)));
-  },
-
-  /**
-   * Calculate Y position
-   * @param {number|null|undefined}    value         graph value
-   * @param {number} min           min value
-   * @param {number} max           max value
-   * @param {number} area          height for axis
-   * @param {number} startPoint    startPoint
-   *
-   * @returns {number|null} position
-   */
-  calculateY(value, min, max, area, startPoint = 0) {
-    let calcY;
-
-    if (value === null || value === undefined) {
-      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);
-  },
-
-  /**
-   * 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;
-    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;
-      default:
-        ctx.beginPath();
-        ctx.arc(x, y, radius, 0, Math.PI * 2);
-        ctx.closePath();
-        ctx.fill();
-        break;
-    }
-
-    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);
-    }
-  },
-
-  /**
-   * create Linear Gradient
-   * @param ctx
-   * @param isHorizontal
-   * @param positions
-   * @param stops
-   * @param isDownplay
-   *
-   * @returns {object} gradient
-   */
-  createGradient(ctx, isHorizontal, positions, stops, isDownplay) {
-    const { x, y, w, h } = positions;
-    let gradient;
-
-    if (isHorizontal) {
-      gradient = ctx.createLinearGradient(x, 0, x + w, 0);
-    } else {
-      gradient = ctx.createLinearGradient(0, y, 0, y + h);
-    }
-
-    for (let ix = 0; ix < stops.length; ix++) {
-      const stopIdx = stops[ix][0] ?? 0;
-      const stopColor = stops[ix][1] ?? 'rgba(255, 255, 255, 0)';
-      const noneDownplayOpacity = stopColor.includes('rgba') ? Util.getOpacity(stopColor) : 1;
-      const opacity = isDownplay ? 0.1 : noneDownplayOpacity;
-
-      gradient.addColorStop(stopIdx, Util.colorStringToRgba(stopColor, opacity));
-    }
-
-    return gradient;
-  },
-};

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

@@ -1,235 +0,0 @@
-export const AXIS_UNITS = {
-  x: {
-    rectStart: 'x1',
-    rectEnd: 'x2',
-    rectOffsetCounter: position => (position === 'top' ? 'y2' : 'y1'),
-    rectOffset: position => (position === 'top' ? 'y1' : 'y2'),
-  },
-  y: {
-    rectStart: 'y2',
-    rectEnd: 'y1',
-    rectOffsetCounter: position => (position === 'left' ? 'x2' : 'x1'),
-    rectOffset: position => (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 COLOR = [
-//   '#00C8FC', '#00F1CD', '#C19F87', '#008FD2', '#93F7FE', '#00FC78', '#0058DE',
-//   '#3BDEFF', '#254763', '#BAEDF9', '#A24E3D', '#1FD017', '#F1D3B6', '#AFC9C9',
-//   '#498700', '#3650FE', '#8786EF', '#68FBFB', '#BCF061', '#CBD3EA',
-// ];
-
-export const LINE_OPTION = {
-  show: true,
-  highlight: {
-    defaultSize: 4,
-    maxSize: 6,
-    maxShadowSize: 10,
-    maxShadowOpacity: 0.4,
-  },
-  xAxisIndex: 0,
-  yAxisIndex: 0,
-  point: true,
-  pointHighlight: true,
-  pointSize: 3,
-  pointStyle: '',
-  lineWidth: 2,
-  fill: false,
-  fillOpacity: 0.4,
-  showLegend: true,
-  passingValue: null,
-  interpolation: 'none',
-};
-
-export const BAR_OPTION = {
-  show: true,
-  highlight: {
-    pointSize: 5,
-  },
-  xAxisIndex: 0,
-  yAxisIndex: 0,
-  category: true,
-  showLegend: true,
-  showValue: {
-    use: false,
-    fontSize: 12,
-    textColor: '#000000',
-    formatter: null,
-    decimalPoint: 0,
-  },
-};
-
-export const PIE_OPTION = {
-  show: true,
-  showLegend: true,
-  stroke: {
-    show: true,
-    color: '#FFFFFF',
-    lineWidth: 2,
-  },
-  showValue: {
-    use: false,
-    fontSize: 12,
-    textColor: '#000000',
-    formatter: null,
-  },
-};
-
-export const AXIS_OPTION = {
-  min: null,
-  max: null,
-  autoScaleRatio: null,
-  startToZero: false,
-  showAxis: true,
-  axisLineColor: '#C9CFDC',
-  axisLineWidth: 1,
-  showGrid: true,
-  gridLineColor: '#C9CFDC',
-  showAxisTick: true,
-  showIndicator: false,
-  timeFormat: 'mm:ss',
-  range: null,
-  interval: null,
-  decimalPoint: 'auto',
-  labelStyle: {
-    show: true,
-    fontSize: 12,
-    color: '#25262E',
-    fontFamily: 'Roboto',
-    fontWeight: 400,
-    fitWidth: false,
-    fitDir: 'right',
-    alignToGridLine: false,
-    padding: 0,
-  },
-  title: {
-    use: false,
-    text: null,
-    fontWeight: 400,
-    fontSize: 12,
-    fontFamily: 'Roboto',
-    textAlign: 'right',
-    fontStyle: 'normal',
-    color: '#808080',
-  },
-  scrollbar: {
-    use: false,
-    width: 14,
-    height: 14,
-    background: '#F2F2F2',
-    showButton: true,
-    thumbStyle: {
-      background: '#929292',
-      radius: 0,
-    },
-  },
-};
-
-export const PLOT_LINE_LABEL_OPTION = {
-  show: false,
-  fontSize: 12,
-  fontColor: '#FF0000',
-  fillColor: '#FFFFFF',
-  lineColor: '#FF0000',
-  lineWidth: 0,
-  fontWeight: 400,
-  fontFamily: 'Roboto',
-  verticalAlign: 'middle',
-  textAlign: 'center',
-  textOverflow: 'none', // 'none', 'ellipsis'
-  maxWidth: null,
-};
-
-export const PLOT_LINE_OPTION = {
-  color: '#FF0000',
-  lineWidth: 1,
-  label: PLOT_LINE_LABEL_OPTION,
-};
-
-export const PLOT_BAND_OPTION = {
-  color: '#FAE59D',
-};
-
-export const HEAT_MAP_OPTION = {
-  show: true,
-  xAxisIndex: 0,
-  yAxisIndex: 0,
-  showLegend: true,
-  showValue: {
-    use: false,
-    fontSize: 12,
-    textColor: '#000000',
-    formatter: null,
-    decimalPoint: 0,
-  },
-  highlight: {
-    stroke: {
-      use: false,
-      color: null,
-      width: 1,
-      radius: 0,
-    },
-    shadow: {
-      use: true,
-      offsetX: 0,
-      offsetY: 0,
-      blur: 4,
-      color: '#959494',
-    },
-  },
-};
-
-
-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.6784e9,
-    steps: [1, 2, 3],
-  },
-  quarter: {
-    common: false,
-    size: 7.884e9,
-    steps: [1, 2, 3, 4],
-  },
-  year: {
-    common: true,
-    size: 3.154e10,
-  },
-};