evui 3.4.207 → 3.4.208

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

@@ -1,400 +0,0 @@
-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;
-    }
-
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-
-    const r = parseInt(result[1], 16);
-    const g = parseInt(result[2], 16);
-    const b = parseInt(result[3], 16);
-
-    return `${r},${g},${b}`;
-  },
-
-  /**
-   * Check color string and return what type it is. ('HEX', 'RGB', 'RGBA' or 'NONE')
-   * @param colorStr
-   * @returns {string} color type
-   */
-  getColorStringType(colorStr) {
-    if (!colorStr) {
-      return '';
-    }
-
-    const noneWhiteSpaceColorStr = colorStr.replace(/ /g, '');
-    const isHEX = /^#(?:[A-Fa-f0-9]{3}){1,2}$/.exec(noneWhiteSpaceColorStr);
-    const isRGB = /^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}[)]$/.exec(noneWhiteSpaceColorStr);
-    const isRGBA = /^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1?)\s*[)]$/.exec(noneWhiteSpaceColorStr);
-    let result = '';
-
-    if (isHEX) {
-      result = 'HEX';
-    } else if (isRGB) {
-      result = 'RGB';
-    } else if (isRGBA) {
-      result = 'RGBA';
-    } else {
-      result = 'NONE';
-    }
-
-    return result;
-  },
-
-  /**
-   * Transforming color string to rgba code
-   * Return BLACK ('rgba(0, 0, 0, ${opacity})') if fail transforming
-   * @param colorStr        hex color code, rgb, rgba .. etc
-   * @param opacity            color opacity. (default 1)translate
-   * @returns {string} transformed rgba
-   */
-  colorStringToRgba(colorStr, opacity = 1) {
-    const noneWhiteSpaceColorStr = colorStr.replace(/ /g, '');
-    const colorType = this.getColorStringType(noneWhiteSpaceColorStr);
-    let resultRGBA = '';
-
-    switch (colorType) {
-      case 'HEX':
-        resultRGBA = `rgba(${this.hexToRgb(noneWhiteSpaceColorStr)},${opacity})`;
-        break;
-      case 'RGB':
-        resultRGBA = noneWhiteSpaceColorStr.replace(')', `, ${opacity})`).replace('rgb', 'rgba');
-        break;
-      case 'RGBA':
-        resultRGBA = noneWhiteSpaceColorStr.replace(`${this.getOpacity(colorStr)})`, `${opacity})`);
-        break;
-      default:
-        resultRGBA = `rgba(0, 0, 0, ${opacity})`;
-        break;
-    }
-
-    return resultRGBA;
-  },
-
-  /**
-   * get opacity value on rgba color string
-   * ex) input  : rgba(255, 255, 255, 0.1)
-   *     return : 0.1
-   * @param rgbaColorString
-   * @returns {string} opacity
-   */
-  getOpacity(rgbaColorString) {
-    const noneWhiteSpaceColorStr = rgbaColorString?.replace(/ /g, '');
-    const colorType = this.getColorStringType(noneWhiteSpaceColorStr);
-
-    if (colorType === 'RGBA') {
-      return noneWhiteSpaceColorStr.replace(/^.*,(.+)\)/, '$1');
-    }
-
-    return '1';
-  },
-
-  /**
-   * 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;
-  },
-
-  /**
-   * Create string for canvas font style
-   * @param {object} style    style object by user
-   *
-   * @returns {string} computed value
-   */
-  getLabelStyle(style) {
-    const {
-      fontStyle = 'normal',
-      fontWeight = 'normal',
-      fontSize = '12',
-      fontFamily = 'Roboto',
-    } = style;
-
-    return `${fontStyle} normal ${fontWeight} ${fontSize}px ${fontFamily}`;
-  },
-
-  /**
-   * Create sign format with number
-   * @param {number} value           graph value
-   * @param {number} decimalPoint    decimal point
-   *
-   * @returns {string} signed value
-   */
-  labelSignFormat(value, decimalPoint = 0) {
-    const quad = quadrillion(1);
-    const trill = trillion(1);
-    const billi = billions(1);
-    const milli = millions(1);
-    const killo = 1000;
-
-    let label;
-    if (!truthy(value)) {
-      return value;
-    }
-
-    const isNegative = value < 0;
-    const absValue = Math.abs(value);
-
-    const assignLabelWith = (v, target, lb) => {
-      const result = v % target === 0
-        ? `${(v / target).toFixed(decimalPoint)}${lb}`
-        : `${(v / target).toFixed(1)}${lb}`;
-
-      return isNegative ? `-${result}` : result;
-    };
-
-    if (absValue >= quad) {
-      label = assignLabelWith(absValue, quad, 'P');
-    } else if (absValue >= trill) {
-      label = assignLabelWith(absValue, trill, 'T');
-    } else if (absValue >= billi) {
-      label = assignLabelWith(absValue, billi, 'G');
-    } else if (absValue >= milli) {
-      label = assignLabelWith(absValue, milli, 'M');
-    } else if (absValue >= killo) {
-      label = assignLabelWith(absValue, 1000, 'K');
-    } else {
-      label = isNegative ? `-${absValue.toFixed(decimalPoint)}` : 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
-   * @param {number} padding      user define text padding
-   *
-   * @returns {object} text size information
-   */
-  calcTextSize(text, fontStyle, padding = 0) {
-    const calc = document.createElement('span');
-    const style = `visibility:hidden; position:absolute; top:-10000px; font: ${fontStyle}; padding: 0 ${padding}px`;
-
-    calc.setAttribute('style', style);
-    calc.style.font = fontStyle;
-    calc.textContent = text;
-    document.body.appendChild(calc);
-
-    const rect = calc.getBoundingClientRect();
-    const width = rect.width || 2;
-    const height = rect.height || 2;
-
-    calc.remove();
-
-    return { width, height };
-  },
-
-  /**
-   * Comparing strings
-   * @param {array} array    compared array
-   *
-   * @returns {object} min/max information
-   */
-  getStringMinMax(array) {
-    const minMax = {
-      min: array[0],
-      max: array[0],
-    };
-
-    array.forEach((item) => {
-      if (minMax?.max?.length < item?.length) {
-        minMax.max = item;
-      }
-
-      if (minMax?.min?.length > item?.length) {
-        minMax.min = item;
-      }
-    });
-
-    return minMax;
-  },
-
-  /**
-   * Truncate the long string to short string with ellipsis until fitting maxWidth
-   * @param {string} str         target string
-   * @param {number} maxWidth    maximum string width on canvas
-   * @param {Object} ctx         canvas context
-   * @param {string} direction   left or right  (default: right)
-   */
-  truncateLabelWithEllipsis(str, maxWidth, ctx, direction = 'right') {
-    if (!str) {
-      return '';
-    }
-
-    if (!maxWidth) {
-      return str;
-    }
-
-    const ellipsis = '…';
-    const ellipsisWidth = ctx.measureText(ellipsis).width;
-
-    let temp = str;
-    let tempWidth = ctx.measureText(temp).width;
-
-    if (tempWidth <= maxWidth || tempWidth <= ellipsisWidth) {
-      return str;
-    }
-
-    let len = temp.length;
-    while (tempWidth >= maxWidth - ellipsisWidth && len-- > 0) {
-      temp = direction === 'right' ? temp.substring(0, len) : temp.substring(1, temp.length);
-      tempWidth = ctx.measureText(temp).width;
-    }
-
-    return direction === 'right' ? temp + ellipsis : ellipsis + temp;
-  },
-  /**
-   * Draw text tip
-   * @param {object} param     object for drawing text tip
-   *
-   * @returns {undefined}
-   */
-  showLabelTip(param) {
-    const {
-      ctx,
-      width,
-      height,
-      x,
-      y,
-      arrowSize,
-      borderRadius,
-      text,
-      backgroundColor,
-      textColor,
-    } = param;
-    const sx = x - (width / 2);
-    const ex = x + (width / 2);
-    const sy = y - height;
-    const ey = y;
-
-    ctx.beginPath();
-    ctx.save();
-    ctx.fillStyle = backgroundColor || '#E96E2C';
-    ctx.strokeStyle = backgroundColor || '#E96E2C';
-    ctx.shadowBlur = 0;
-    ctx.moveTo(sx + borderRadius, sy);
-    ctx.quadraticCurveTo(sx, sy, sx, sy + borderRadius);
-    ctx.lineTo(sx, ey - borderRadius);
-    ctx.quadraticCurveTo(sx, ey, sx + borderRadius, 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(x - arrowSize, sy);
-    ctx.lineTo(x, sy - arrowSize);
-    ctx.lineTo(x + arrowSize, sy);
-    ctx.lineTo(sx + borderRadius, sy);
-    ctx.closePath();
-    ctx.fill();
-    ctx.restore();
-    ctx.save();
-    ctx.font = 'normal normal bold 12px Roboto';
-    ctx.fillStyle = textColor || '#FFF';
-    ctx.textBaseline = 'middle';
-    ctx.textAlign = 'center';
-    ctx.fillText(`${text}`, x, sy + (height / 2));
-    ctx.restore();
-    ctx.beginPath();
-  },
-
-  isPieType(type) {
-    return type === 'pie' || type === 'doughnut' || type === 'sunburst';
-  },
-
-  isDoughnutHole(type) {
-    return type === 'doughnut' || type === 'sunburst';
-  },
-
-  setDOMStyle(targetDOM, styleObject) {
-    if (!targetDOM || !styleObject) {
-      return;
-    }
-
-    Object.keys(styleObject)?.forEach((key) => {
-      targetDOM.style[key] = styleObject[key];
-    });
-  },
-
-  /**
-   * Check the value exceeds 9007199254740991 or less than -9007199254740991
-   * null =>  safe Integer
-   * string and undefined => Not Safe Integer
-   * @param {any} value
-   * @returns {boolean}
-   */
-  checkSafeInteger(value) {
-    return value <= Number.MAX_SAFE_INTEGER && value >= Number.MIN_SAFE_INTEGER;
-  },
-
-  /**
-   * Convert html(string) To Element
-   * @param htmlString
-   * @returns {ChildNode}
-   */
-  htmlToElement(htmlString) {
-    const template = document.createElement('template');
-    template.innerHTML = htmlString.trim();
-    return template.content.firstChild;
-  },
-
-  /**
-   * Check The value is null or undefined
-   * @param { number | undefined | null } value
-   * @returns {boolean}
-   */
-  isNullOrUndefined(value) {
-    return value === null || value === undefined;
-  },
-
-  rgbaAdjustHalfOpacity(color) {
-    const rgbRegex = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/;
-    const rgbaRegex = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)$/;
-
-    if (rgbRegex.test(color)) {
-      const [, r, g, b] = color.match(rgbRegex);
-      return `rgba(${r}, ${g}, ${b}, 0.5)`;
-    }
-
-    if (rgbaRegex.test(color)) {
-      const [, r, g, b, a] = color.match(rgbaRegex);
-      const newOpacity = (parseFloat(a) / 2).toFixed(2);
-      return `rgba(${r}, ${g}, ${b}, ${newOpacity})`;
-    }
-
-    if (color.startsWith('#') && color.length > 7) {
-      return color;
-    }
-
-    return `${color}80`;
-  },
-};

package/src/components/chart/index.js

@@ -1,9 +0,0 @@
-import VueResizeObserver from 'vue-resize-observer';
-import EvChart from './Chart';
-
-EvChart.install = (app) => {
-    app.component(EvChart.name, EvChart);
-    app.use(VueResizeObserver);
-};
-
-export default EvChart;

package/src/components/chart/model/index.js

@@ -1,50 +0,0 @@
-import Store from './model.store';
-import Series from './model.series';
-
-export default { Store, Series };
-
-
-  /**
-   * @typedef {Object} ChartDOMSize
-   * @property {number} width - 차트 DOM의 너비
-   * @property {number} height - 차트 DOM의 높이
-   */
-
-  /**
-   * @typedef {Object} ChartRect
-   * @property {number} x1 - 차트 영역의 시작 X 좌표
-   * @property {number} x2 - 차트 영역의 끝 X 좌표
-   * @property {number} y1 - 차트 영역의 시작 Y 좌표
-   * @property {number} y2 - 차트 영역의 끝 Y 좌표
-   * @property {number} chartWidth - 실제 차트 그리기 영역의 너비
-   * @property {number} chartHeight - 실제 차트 그리기 영역의 높이
-   * @property {number} width - 전체 차트 컨테이너의 너비
-   * @property {number} height - 전체 차트 컨테이너의 높이
-   */
-
-
-    /**
-   * @typedef {Object} MouseLabelValue
-   * @property {string|number} labelVal - 마우스 위치에 해당하는 라벨 값
-   * @property {number} labelIdx - 라벨 인덱스 (없으면 -1)
-   */
-
-
-      /**
-   * @typedef {Object} ChartSeriesDataPoint
-   * @property {number|null} x - x축 값 또는 라벨
-   * @property {number|null} y - y축 값 또는 데이터 값
-   * @property {number|null} o - 원본 데이터 값
-   * @property {number|null} b - 스택형 차트의 베이스 값
-   * @property {number|null} xp - x좌표 위치(픽셀 등)
-   * @property {number|null} yp - y좌표 위치(픽셀 등)
-   * @property {number|null} w - 너비
-   * @property {number|null} h - 높이
-   * @property {string|null} dataColor - 데이터 색상
-   * @property {string|null} dataTextColor - 텍스트 색상
-   */
-
-
-   /**
-    * @typedef {'none' | 'linear' | 'zero'} InterpolationType
-    */

package/src/components/chart/model/model.series.js

@@ -1,125 +0,0 @@
-import Line from '../element/element.line';
-import Scatter from '../element/element.scatter';
-import Bar from '../element/element.bar';
-import TimeBar from '../element/element.bar.time';
-import Pie from '../element/element.pie';
-import HeatMap from '../element/element.heatmap';
-
-const modules = {
-  /**
-   * Takes series information to create series list.
-   * @param {object}  series          chart series info
-   * @param {string}  defaultType     default series type in options
-   * @param {boolean} isHorizontal    determines if a horizontal option's value
-   * @param {object}  groups          group info
-   *
-   * @returns {undefined}
-   */
-  createSeriesSet(series, defaultType, isHorizontal, groups) {
-    let seriesKeys = Object.keys(series);
-
-    if (this.options.overlapping.use) {
-      seriesKeys = this.getOverlappingSeriesKeys(series, defaultType, groups);
-    }
-
-    seriesKeys.forEach((key, index) => {
-      const type = series[key].type || defaultType;
-      this.seriesList[key] = this.addSeries({
-        type,
-        id: key,
-        opt: series[key],
-        index,
-        isHorizontal,
-      });
-    });
-  },
-
-  getOverlappingSeriesKeys(series, defaultType, groups) {
-    const barSeries = [];
-    const otherSeries = [];
-    const allGroups = groups.flat();
-
-    Object.keys(series).forEach((key) => {
-      const type = series[key].type || defaultType;
-      const isOverlappingBar = type === 'bar' && allGroups.length;
-
-      if (isOverlappingBar) {
-        const overlappingIdx = allGroups.findIndex(group => group === key);
-        barSeries.push({ key, overlappingIdx });
-      } else {
-        otherSeries.push({ key });
-      }
-    });
-
-    // 큰 값을 가지는 series가 먼저 그려지도록 groups에서 지정한 순서의 역순으로 정렬
-    barSeries.sort((a, b) => b.overlappingIdx - a.overlappingIdx);
-
-    return [...barSeries, ...otherSeries]
-        .map(({ key }) => key);
-  },
-
-  /**
-   * Takes series information to create series list.
-   * @param {object} param   series info
-   *
-   * @returns {object} object for proper series type
-   */
-  addSeries(param) {
-    const { type, id, opt, index, isHorizontal } = param;
-
-    if (type === 'line') {
-      this.seriesInfo.charts.line.push(id);
-      return new Line(id, opt, index);
-    } else if (type === 'scatter') {
-      this.seriesInfo.charts.scatter.push(id);
-      return new Scatter(id, opt, index, this.options.realTimeScatter?.use);
-    } else if (type === 'bar') {
-      this.seriesInfo.charts.bar.push(id);
-
-      if (opt.timeMode) {
-        return new TimeBar(id, opt, index, isHorizontal);
-      }
-      return new Bar(id, opt, index, isHorizontal);
-    } else if (type === 'pie') {
-      this.seriesInfo.charts.pie.push(id);
-      return new Pie(id, opt, index);
-    } else if (type === 'heatMap') {
-      this.seriesInfo.charts.heatMap.push(id);
-      const { heatMapColor, legend } = this.options;
-      const isGradient = legend.type === 'gradient';
-      return new HeatMap(id, opt, heatMapColor, isHorizontal, isGradient);
-    }
-
-    return false;
-  },
-
-  /**
-   * Set series group to create stack chart
-   * @param {object} groups   group info
-   *
-   * @returns {undefined}
-   */
-  addGroupInfo(groups) {
-    groups.forEach((group, gIdx) => {
-      let interpolation = 0;
-      group.reduce((prev, curr, sIdx) => {
-        const series = this.seriesList[curr];
-
-        series.stackIndex = sIdx + interpolation;
-        series.groupIndex = gIdx;
-        series.isExistGrp = true;
-        series.bsId = prev;
-        series.bsIds = group.filter((item, idx) => item !== curr && sIdx > idx);
-        series.isOverlapping = this.options.overlapping.use;
-
-        if (!series.show) {
-          interpolation--;
-        }
-
-        return !series.show ? prev : curr;
-      }, group[0]);
-    });
-  },
-};
-
-export default modules;