evui 3.4.206 → 3.4.208

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

@@ -1,197 +0,0 @@
-import { merge } from 'lodash-es';
-import { PIE_OPTION, COLOR } from '../helpers/helpers.constant';
-import Util from '../helpers/helpers.util';
-
-class Pie {
-  constructor(sId, opt, sIdx) {
-    const merged = merge({}, PIE_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.show = true;
-    this.data = [];
-    this.type = 'pie';
-    this.centerX = 0;
-    this.centerY = 0;
-    this.radius = 0;
-    this.doughnutHoleSize = 0;
-    this.startAngle = 0;
-    this.endAngle = 0;
-    this.ctx = null;
-    this.isSelect = false;
-  }
-
-  /**
-   * Draw series data
-   * @param context
-   * @param strokeOptions
-   *
-   *
-   * @returns {undefined}
-   */
-  draw(context, strokeOptions) {
-    const ctx = context ?? this.ctx;
-    const slice = new Path2D();
-
-    const radius = this.isSelect ? this.radius + 5 : this.radius;
-
-    const color = this.color;
-    const noneDownplayOpacity = color.includes('rgba') ? Util.getOpacity(color) : 1;
-    const opacity = this.isDownplay ? 0.1 : noneDownplayOpacity;
-
-    ctx.beginPath();
-    slice.moveTo(this.centerX, this.centerY);
-    slice.arc(this.centerX, this.centerY, radius, this.startAngle, this.endAngle);
-    slice.lineTo(this.centerX, this.centerY);
-    ctx.fillStyle = Util.colorStringToRgba(color, opacity);
-    ctx.fill(slice);
-
-    if (strokeOptions.use) {
-      ctx.lineCap = 'round';
-      ctx.lineWidth = strokeOptions?.lineWidth;
-      ctx.strokeStyle = strokeOptions?.color;
-      ctx.stroke(slice);
-    }
-
-    if (this.showValue?.use) {
-      this.drawValueLabels(ctx);
-    }
-
-    ctx.closePath();
-    this.ctx = ctx;
-  }
-
-  /**
-   * Find graph item
-   * @param {array}    offset          mouse position
-   *
-   * @returns {object} graph item
-   */
-  findGraphData([offsetX, offsetY]) {
-    const item = { data: null, hit: false, color: null, index: -1 };
-    const {
-      radius,
-      startAngle,
-      endAngle,
-      centerX,
-      centerY,
-    } = this;
-
-    const distance = Math.sqrt((offsetX - centerX) ** 2 + (offsetY - centerY) ** 2);
-    const radian = (2.5 * Math.PI) - Math.atan2((offsetX - centerX), (offsetY - centerY));
-    const isPointInPath = radius > distance && radian >= startAngle && radian <= endAngle;
-
-    if (this.show && isPointInPath) {
-      item.type = this.type;
-      item.data = this.data;
-      item.hit = true;
-      item.color = this.color;
-      item.index = 0;
-    }
-
-    return item;
-  }
-
-  /**
-   * Draw item highlight
-   *
-   * @param item {object} object for drawing series data
-   * @param context {CanvasRenderingContext2D} canvas context
-   *
-   * @returns {undefined}
-   */
-  itemHighlight(item, context) {
-    const ctx = context;
-    const radius = this.isSelect ? this.radius + 5 : this.radius;
-
-    ctx.save();
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
-    ctx.shadowBlur = 4;
-
-    const color = item?.data?.dataColor || this.color;
-    ctx.fillStyle = color;
-    ctx.shadowColor = color;
-
-    ctx.beginPath();
-    ctx.moveTo(this.centerX, this.centerY);
-    ctx.arc(this.centerX, this.centerY, radius, this.startAngle, this.endAngle);
-    ctx.lineTo(this.centerX, this.centerY);
-    ctx.fill();
-
-    if (this.showValue?.use) {
-      this.drawValueLabels(ctx);
-    }
-
-    ctx.closePath();
-    ctx.restore();
-  }
-
-  /**
-   * Draw value label if series 'use' of showValue option is true
-   *
-   * @param context           canvas context
-   */
-  drawValueLabels(context) {
-    const ctx = context;
-    const value = this.data.o;
-    const { fontSize, textColor, formatter } = this.showValue;
-
-    let formattedTxt;
-    if (formatter) {
-      formattedTxt = formatter({
-        value,
-        percentage: this.data.percentage,
-      });
-    }
-
-    if (!formatter || typeof formattedTxt !== 'string') {
-      formattedTxt = Util.labelSignFormat(value);
-    }
-
-    const ratio = 1.8;
-    const radius = this.radius - this.doughnutHoleSize;
-    const innerAngle = ((this.endAngle - this.startAngle) * 180) / Math.PI;
-    const valueHeight = fontSize + 4;
-    const valueWidth = Math.round(ctx.measureText(formattedTxt).width);
-
-    if (innerAngle >= valueWidth * ratio
-      && innerAngle >= valueHeight * ratio
-      && radius >= valueWidth * ratio
-      && radius >= valueHeight * ratio
-    ) {
-      ctx.save();
-      ctx.beginPath();
-
-      const noneDownplayOpacity = textColor.includes('rgba') ? Util.getOpacity(textColor) : 1;
-      const opacity = this.state === 'downplay' ? 0.1 : noneDownplayOpacity;
-
-      ctx.font = `normal normal normal ${fontSize}px Roboto`;
-      ctx.fillStyle = Util.colorStringToRgba(textColor, opacity);
-      ctx.lineWidth = 1;
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-
-      const halfRadius = (radius / 2) + this.doughnutHoleSize;
-      const centerAngle = ((this.endAngle - this.startAngle) / 2) + this.startAngle;
-      const xPos = halfRadius * Math.cos(centerAngle) + this.centerX;
-      const yPos = halfRadius * Math.sin(centerAngle) + this.centerY;
-
-      ctx.fillText(formattedTxt, xPos, yPos);
-
-      ctx.restore();
-    }
-  }
-}
-
-export default Pie;

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

@@ -1,320 +0,0 @@
-import { merge } from 'lodash-es';
-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, realTimeScatter = false) {
-    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', 'overflowColor'].forEach((colorProp) => {
-      if (this[colorProp] === undefined) {
-        this[colorProp] = COLOR[sIdx];
-      }
-    });
-
-    this.sId = sId;
-    this.data = [];
-    this.type = 'scatter';
-    this.realTimeScatter = realTimeScatter;
-  }
-
-  /**
-   * Draw series data
-   * @param {object} param     object for drawing series data
-   *
-   * @returns {undefined}
-   */
-  draw(param) {
-    if (!this.show) {
-      return;
-    }
-
-    if (this.realTimeScatter) {
-      this.realTimeScatterDraw(param);
-    } else {
-      this.defaultScatterDraw(param);
-    }
-  }
-
-  /**
-   * Calculate opacity for a data item in the series.
-   * @param {object} param - The parameter object passed to the draw function.
-   * @param {string} colorStr - The color string of the item.
-   * @param {number} dataIndex - The index of the item in the data array.
-   *
-   * @returns {number} - The calculated opacity level for the item.
-   */
-  getOpacity(param, colorStr, dataIndex) {
-    const noneDownplayOpacity = colorStr.includes('rgba') ? Util.getOpacity(colorStr) : 1;
-    let isDownplay = false;
-
-    const { selectInfo, legendHitInfo } = param;
-    if (legendHitInfo) {
-      isDownplay = legendHitInfo.sId !== this.sId;
-    } else if (selectInfo) {
-      isDownplay = selectInfo?.seriesID !== this.sId || selectInfo?.dataIndex !== dataIndex;
-    }
-
-    return isDownplay ? 0.1 : noneDownplayOpacity;
-  }
-
-  /**
-   * Calculate x and y coordinates for a data item in the series.
-   * @param {object} item - The data item for which coordinates are to be calculated.
-   * @param {object} param - The parameter object passed to the draw function.
-   *
-   * @returns {undefined}
-   */
-  calcItem(item, param) {
-    const { chartRect, labelOffset, axesSteps, displayOverflow } = param;
-
-    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;
-
-    let x = Canvas.calculateX(item.x, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
-    const y = Canvas.calculateY(
-      displayOverflow && item.y > minmaxY.graphMax
-        ? minmaxY.graphMax
-        : item.y,
-      minmaxY.graphMin,
-      minmaxY.graphMax,
-      yArea,
-      ysp,
-    );
-
-    if (x !== null) {
-      aliasPixel = Util.aliasPixel(x);
-      x += aliasPixel;
-    }
-
-    item.xp = x;
-    item.yp = y;
-  }
-
-  /**
-   * Draw default scatter chart
-   * @param {object} param - The parameter object passed to the draw function.
-   *
-   * @returns {undefined}
-   */
-  defaultScatterDraw(param) {
-    const { ctx, axesSteps, duple, legendHitInfo, coordinateDedupe } = param;
-    const minmaxY = axesSteps.y[this.yAxisIndex];
-
-    // Adjusted because Real Time Scatter is drawn from the back.
-    for (let i = 0; i < this.data.length; i++) {
-      const item = this.data[i];
-      const idx = i;
-      const isDedupeOn = coordinateDedupe !== false;
-      let shouldDraw;
-      if (legendHitInfo) {
-        shouldDraw = (legendHitInfo.sId === this.sId);
-      } else if (isDedupeOn) {
-        shouldDraw = duple.get(`${item.x}${item.y}`) === this.sId;
-      } else {
-        shouldDraw = true;
-      }
-
-      if (shouldDraw) {
-        this.calcItem(item, param);
-
-        if (item.xp !== null && item.yp !== null) {
-          const overflowColor = item.y > minmaxY.graphMax && this.overflowColor;
-          const color = overflowColor || item.dataColor || this.color;
-          ctx.strokeStyle = Util.colorStringToRgba(color, this.getOpacity(param, color, idx));
-
-          const pointFillColor = item.dataColor || this.pointFill;
-          ctx.fillStyle = Util.colorStringToRgba(
-            pointFillColor,
-            this.getOpacity(param, pointFillColor, idx),
-          );
-
-          Canvas.drawPoint(ctx, this.pointStyle, this.pointSize, item.xp, item.yp);
-        }
-      }
-    }
-  }
-
-  /**
-   * Draw real time scatter chart
-   * @param {object} param - The parameter object passed to the draw function.
-   *
-   * @returns {undefined}
-   */
-  realTimeScatterDraw(param) {
-    const { ctx, axesSteps, duple, legendHitInfo, coordinateDedupe } = param;
-    const minmaxY = axesSteps.y[this.yAxisIndex];
-    const pointStyle = typeof this.pointStyle === 'string' ? this.pointStyle : this.pointStyle.value;
-    const pointSize = typeof this.pointSize === 'number' ? this.pointSize : this.pointSize.value;
-
-    for (let i = 0; i < this.data[this.sId]?.dataGroup?.length; i++) {
-      for (let j = 0; j < this.data[this.sId]?.dataGroup[i]?.data.length; j++) {
-        const item = this.data[this.sId]?.dataGroup[i]?.data[j];
-
-        const isDedupeOnRT = coordinateDedupe !== false;
-        let shouldDraw;
-        if (legendHitInfo) {
-          shouldDraw = (legendHitInfo.sId === this.sId);
-        } else if (isDedupeOnRT) {
-          shouldDraw = duple.get(`${item.x}${item.y}`) === this.sId;
-        } else {
-          shouldDraw = true;
-        }
-
-        if (shouldDraw) {
-          this.calcItem(item, param);
-
-          if (item.xp !== null && item.yp !== null) {
-            const overflowColor = item.y > minmaxY.graphMax && this.overflowColor;
-            const baseStrokeColor = overflowColor || item.color || this.color;
-            const baseFillColor = overflowColor || item.color || this.pointFill || this.color;
-
-            const strokeOpacity = this.getOpacity(param, baseStrokeColor, j);
-            const fillOpacity = this.getOpacity(param, baseFillColor, j);
-
-            ctx.strokeStyle = Util.colorStringToRgba(baseStrokeColor, strokeOpacity);
-            ctx.fillStyle = Util.colorStringToRgba(baseFillColor, fillOpacity);
-
-            Canvas.drawPoint(ctx, pointStyle, pointSize, item.xp, item.yp);
-          }
-        }
-      }
-    }
-  }
-
-  /**
-   * Filters and returns data items based on input coordinates
-   *
-   * @param {Array} data - The data to filter
-   * @param {number} xsp - Start X coordinate
-   * @param {number} ysp - Start Y coordinate
-   * @param {number} xep - End X coordinate
-   * @param {number} yep - End Y coordinate
-   * @returns {Array} Filtered data items
-   */
-  findItemsInRange(data, xsp, ysp, xep, yep) {
-    return data.filter(seriesData =>
-      (xsp - 1 <= seriesData.xp && seriesData.xp <= xep + 1
-      && ysp - 1 <= seriesData.yp && seriesData.yp <= yep + 1));
-  }
-
-  defaultScatterFindItems(gdata, xsp, ysp, xep, yep) {
-    return this.findItemsInRange(gdata, xsp, ysp, xep, yep);
-  }
-
-  realTimeScatterFindItems(gdata, xsp, ysp, xep, yep) {
-    const items = [];
-    for (let i = 0; i < gdata[this.sId].dataGroup.length; i++) {
-      const obj = gdata[this.sId].dataGroup[i];
-      items.push(...this.findItemsInRange(obj.data, xsp, ysp, xep, yep));
-    }
-
-    return items;
-  }
-
-  /**
-   *Returns items in range
-   * @param {object} params  range values
-   *
-   * @returns {array}
-   */
-  findItems({ xsp, ysp, width, height }) {
-    const gdata = this.data;
-    const xep = xsp + width;
-    const yep = ysp + height;
-    let items = [];
-
-    if (this.realTimeScatter) {
-      items = this.realTimeScatterFindItems(gdata, xsp, ysp, xep, yep);
-    } else {
-      items = this.defaultScatterFindItems(gdata, xsp, ysp, xep, yep);
-    }
-
-    return items;
-  }
-
-  /**
-   * Draw item highlight
-   * @param {object}   item       object for drawing series data
-   * @param {object}   context    canvas context
-   * @param {boolean}  isMax      determines if this series has max value
-   *
-   * @returns {undefined}
-   */
-  itemHighlight(item, context) {
-    const gdata = item.data;
-    const ctx = context;
-
-    const x = gdata.xp;
-    const y = gdata.yp;
-
-    ctx.save();
-    if (x !== null && y !== null) {
-      const color = gdata.dataColor || this.color;
-      const pointFillColor = gdata.dataColor || this.pointFill;
-
-      ctx.strokeStyle = Util.colorStringToRgba(color, 0);
-
-      ctx.fillStyle = Util.colorStringToRgba(pointFillColor, this.highlight.maxShadowOpacity);
-      Canvas.drawPoint(ctx, this.pointStyle, this.highlight.maxShadowSize, x, y);
-
-      ctx.fillStyle = color;
-      Canvas.drawPoint(ctx, this.pointStyle, this.highlight.maxSize, x, y);
-
-      ctx.fillStyle = '#fff';
-      Canvas.drawPoint(ctx, this.pointStyle, this.highlight.defaultSize, x, y);
-    }
-
-    ctx.restore();
-  }
-
-  /**
-   * Find graph item for tooltip
-   * @param {array}  offset       mouse position
-   *
-   * @returns {object} graph item
-   */
-  findGraphData(offset) {
-    if (this.realTimeScatter) return false;
-
-    const xp = offset[0];
-    const yp = offset[1];
-    const item = { data: null, hit: false, color: this.color, index: null };
-    const pointSize = this.pointSize;
-    const gdata = this.data;
-
-    const targetIndex = gdata.findIndex((data) => {
-      const x = data.xp;
-      const y = data.yp;
-
-      return (x - pointSize <= xp)
-        && (xp <= x + pointSize)
-        && (y - pointSize <= yp)
-        && (yp <= y + pointSize);
-    });
-
-    if (targetIndex > -1) {
-      item.data = gdata[targetIndex];
-      item.index = targetIndex;
-      item.hit = true;
-    }
-
-    return item;
-  }
-}
-
-export default Scatter;