evui 3.3.9 → 3.3.12

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

@@ -14,9 +14,15 @@ const modules = {
     const isHorizontal = !!opt.horizontal;
     const maxTipOpt = opt.maxTip;
     const selTipOpt = opt.selectItem;
+    const labelTipOpt = opt.selectLabel;
     let maxArgs;
+    let isExistSelectedLabel;
 
-    if (selTipOpt.use && tipLocationInfo) {
+    if (labelTipOpt.use && labelTipOpt.showTip) {
+      isExistSelectedLabel = this.drawLabelTip();
+    }
+
+    if (selTipOpt.use && tipLocationInfo && !isExistSelectedLabel) {
       const seriesInfo = this.seriesList[tipLocationInfo?.sId];
 
       if (!seriesInfo?.show) {
@@ -45,29 +51,30 @@ const modules = {
             selArgs.text = numberWithComma(selArgs.value);
           }
 
-          this.drawTextTip({ opt: selTipOpt, tipType: 'sel', isSamePos, ...selArgs });
+          this.drawTextTip({ opt: selTipOpt, tipType: 'sel', seriesOpt: seriesInfo, isSamePos, ...selArgs });
         }
 
         if (selTipOpt.showIndicator) {
-          this.drawFixedIndicator({ opt: selTipOpt, ...selArgs });
+          this.drawFixedIndicator({ opt: selTipOpt, seriesOpt: seriesInfo, ...selArgs });
         }
       }
 
-      if (tipLocationInfo && tipLocationInfo.label !== null) {
+      if (tipLocationInfo && tipLocationInfo?.label && tipLocationInfo?.label === 0) {
         this.lastHitInfo = tipLocationInfo;
       }
     }
 
-    if (maxTipOpt.use) {
+    if (maxTipOpt.use && !isExistSelectedLabel) {
       const maxSID = this.minMax[isHorizontal ? 'x' : 'y'][0].maxSID;
-      maxArgs = this.calculateTipInfo(this.seriesList[maxSID], 'max', null);
+      const seriesInfo = this.seriesList[maxSID];
+      maxArgs = this.calculateTipInfo(seriesInfo, 'max', null);
 
       if (maxTipOpt.use && maxArgs) {
         maxArgs.text = numberWithComma(maxArgs.value);
-        this.drawTextTip({ opt: maxTipOpt, tipType: 'max', ...maxArgs });
+        this.drawTextTip({ opt: maxTipOpt, tipType: 'max', seriesOpt: seriesInfo, ...maxArgs });
 
         if (maxTipOpt.showIndicator) {
-          this.drawFixedIndicator({ opt: maxTipOpt, ...maxArgs });
+          this.drawFixedIndicator({ opt: maxTipOpt, seriesOpt: seriesInfo, ...maxArgs });
         }
       }
     }
@@ -76,7 +83,8 @@ const modules = {
   /**
    * 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 {string} tipType    tip type
+   * [sel = user select series, label = user select label, max = max value]
    * @param {object} hitInfo    mouse hit information
    *
    * @returns {object} size and tip contents
@@ -169,6 +177,14 @@ const modules = {
         xArea - size.comboOffset,
         xsp + (size.comboOffset / 2),
       );
+    } else if (type === 'scatter') {
+      dp = Canvas.calculateX(
+        ldata,
+        graphX.graphMin,
+        graphX.graphMax,
+        xArea,
+        xsp,
+      );
     }
 
     const sizeObj = { xArea, yArea, graphX, graphY, xsp, xep, ysp };
@@ -179,8 +195,14 @@ const modules = {
   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;
+    const { graphX, graphY, xArea, yArea, xsp, ysp, dp, type, value, opt, seriesOpt } = param;
+    let offset = 0;
+
+    if (type === 'line') {
+      offset += 3;
+    } else if (type === 'scatter') {
+      offset += seriesOpt?.pointSize ?? 0;
+    }
 
     let gp;
 
@@ -220,6 +242,117 @@ const modules = {
     ctx.closePath();
   },
 
+  /**
+   * Draw Selected Label Tip
+   * @returns {boolean} Whether drew at least one tip
+   */
+  drawLabelTip() {
+    const opt = this.options;
+    const isHorizontal = !!opt.horizontal;
+    const labelTipOpt = opt.selectLabel;
+    const { dataIndex, data, label } = this.defaultSelectLabelInfo;
+    let drawTip = false;
+
+    if (dataIndex.length) {
+      drawTip = true;
+
+      const chartRect = this.chartRect;
+      const labelOffset = this.labelOffset;
+      const aPos = {
+        x1: chartRect.x1 + labelOffset.left,
+        x2: chartRect.x2 - labelOffset.right,
+        y1: chartRect.y1 + labelOffset.top,
+        y2: chartRect.y2 - labelOffset.bottom,
+      };
+      const labelAxes = isHorizontal ? this.axesY[0] : this.axesX[0];
+      const valueAxes = isHorizontal ? this.axesX[0] : this.axesY[0];
+      const valueAxesRange = isHorizontal ? this.axesRange.x[0] : this.axesRange.y[0];
+      const valuePositionCalcFunction = isHorizontal ? Canvas.calculateX : Canvas.calculateY;
+      const labelPositionCalcFunction = isHorizontal ? Canvas.calculateY : Canvas.calculateX;
+
+      const chartWidth = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
+      const chartHeight = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
+      const valueSpace = isHorizontal ? chartWidth : chartHeight;
+      const valueStartPoint = aPos[valueAxes.units.rectStart];
+      let offset = this.options.type === 'bar' ? 4 : 6;
+      offset *= isHorizontal ? 1 : -1;
+
+      const seriesList = Object.keys(this.seriesList ?? {});
+      const visibleSeries = seriesList.filter(sId => this.seriesList[sId].show);
+      const isExistGrp = seriesList.some(sId => this.seriesList[sId].isExistGrp);
+      const groups = this.data.groups?.[0] ?? [];
+
+      let gp;
+      let dp;
+      let value;
+      let labelStartPoint;
+      let labelEndPoint;
+      let labelGap;
+      let graphX;
+      let lineSeries;
+      let sizeObj;
+
+      if (labelAxes.labels) {
+        labelStartPoint = aPos[labelAxes.units.rectStart];
+        labelEndPoint = aPos[labelAxes.units.rectEnd];
+        labelGap = (labelEndPoint - labelStartPoint) / labelAxes.labels.length;
+      } else {
+        graphX = this.axesSteps.x[0];
+        lineSeries = seriesList.find(sId => this.seriesList[sId]?.type === 'line');
+        sizeObj = this.seriesList[lineSeries].size;
+      }
+
+      data.forEach((selectedData, i) => {
+        if (labelTipOpt.fixedPosTop) {
+          value = valueAxesRange.max;
+        } else if (isExistGrp) {
+          const sumValue = visibleSeries.reduce((ac, sId) => (
+            groups.includes(sId) ? ac + (selectedData[sId]?.value ?? selectedData[sId]) : ac), 0);
+          const nonGroupValues = visibleSeries
+            .filter(sId => !groups.includes(sId))
+            .map(sId => selectedData[sId]?.value ?? selectedData[sId]);
+          value = Math.max(...nonGroupValues, sumValue);
+        } else if (visibleSeries.length) {
+          const visibleValue = visibleSeries
+            .map(sId => selectedData[sId]?.value ?? selectedData[sId]);
+          value = Math.max(...visibleValue);
+        } else {
+          value = valueAxesRange.max;
+        }
+
+        if (labelAxes.labels) {
+          const labelCenter = Math.round(labelStartPoint + (labelGap * dataIndex[i]));
+
+          dp = labelCenter + (labelGap / 2);
+        } else {
+          dp = labelPositionCalcFunction(
+            label[i],
+            graphX.graphMin,
+            graphX.graphMax,
+            chartWidth - sizeObj.comboOffset,
+            aPos.x1 + (sizeObj.comboOffset / 2),
+          );
+        }
+        gp = valuePositionCalcFunction(
+          value,
+          valueAxesRange.min,
+          valueAxesRange.max,
+          valueSpace,
+          valueStartPoint);
+        gp += offset;
+
+        this.showTip({
+          context: this.bufferCtx,
+          x: isHorizontal ? gp : dp,
+          y: isHorizontal ? dp : gp,
+          opt: labelTipOpt,
+          isSamePos: false,
+        });
+      });
+    }
+
+    return drawTip;
+  },
   /**
    * Calculate x, y position to draw text tip
    * @param {object} param     object for drawing text tip
@@ -230,12 +363,20 @@ const modules = {
     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 { dp, value, text, opt, type, tipType, isSamePos, seriesOpt } = param;
 
     const arrowSize = 4;
     const maxTipHeight = 20;
     const borderRadius = 4;
-    const offset = type === 'bar' ? 4 : 6;
+
+    let offset = 1;
+    if (type === 'line') {
+      offset += 6;
+    } else if (type === 'scatter') {
+      offset += seriesOpt?.pointSize;
+    } else if (type === 'bar') {
+      offset += 4;
+    }
 
     let gp;
     let tdp = dp;

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

@@ -128,6 +128,21 @@ export const PLOT_BAND_OPTION = {
   color: '#FAE59D',
 };
 
+export const HEAT_MAP_OPTION = {
+  ...LINE_OPTION,
+  colorOpt: {
+    min: '#FFFFFF',
+    max: '#0052FF',
+    categoryCnt: 5,
+    border: '#FFFFFF',
+    error: '#FF0000',
+  },
+  spaces: {
+    x: 0,
+    y: 0,
+  },
+};
+
 
 export const TIME_INTERVALS = {
   millisecond: {

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

@@ -3,6 +3,7 @@ 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 = {
   /**
@@ -51,6 +52,9 @@ const modules = {
     } 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);
+      return new HeatMap(id, opt, index);
     }
 
     return false;

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

@@ -1,5 +1,6 @@
 import { reverse } from 'lodash-es';
 import Util from '../helpers/helpers.util';
+import { TIME_INTERVALS } from '../helpers/helpers.constant';
 
 const modules = {
   /**
@@ -30,6 +31,17 @@ const modules = {
               series.minMax = this.getSeriesMinMax(series.data);
             }
           });
+        } else if (typeKey === 'heatMap') {
+          seriesIDs.forEach((seriesID) => {
+            const series = this.seriesList[seriesID];
+            const sData = data[seriesID];
+
+            if (series && sData) {
+              series.data = this.addSeriesDSForHeatMap(sData);
+              series.minMax = this.getSeriesMinMaxForHeatMap(series.data, series.spaces);
+              series.valueOpt = this.getSeriesValueOptForHeatMap(series);
+            }
+          });
         } else {
           seriesIDs.forEach((seriesID) => {
             const series = this.seriesList[seriesID];
@@ -286,6 +298,24 @@ const modules = {
     });
   },
 
+  /**
+   * Take data to create data for each series
+   * @param {array} data data array for each series
+   * @returns {array} data info added position and etc
+   */
+  addSeriesDSForHeatMap(data) {
+    return data.map(item => ({
+      x: item.x,
+      y: item.y,
+      o: item.value,
+      xp: null,
+      yp: null,
+      dataColor: null,
+      value: item.value,
+      cId: null,
+    }));
+  },
+
   /**
    * Take data to create data object for graph
    * @param {object}  gdata    graph data (y-axis value for vertical chart)
@@ -384,6 +414,96 @@ const modules = {
     return def;
   },
 
+  adjustMinMax(max, min, opt, space) {
+    if ((opt.type === 'time' && opt.categoryMode) || opt.type === 'step') {
+      return {
+        max,
+        min,
+      };
+    }
+
+    let targetMax = max;
+    let targetMin = min;
+    if (targetMax > 0 && opt.interval && space) {
+      if (targetMax < (opt.interval * space)) {
+        targetMax += opt.interval;
+      }
+    }
+
+    let targetInterval = opt.interval;
+    if (opt.type === 'time') {
+      if (typeof targetInterval === 'string') {
+        targetInterval = TIME_INTERVALS[targetInterval].size;
+      } else if (typeof targetInterval === 'object') {
+        targetInterval = targetInterval.time * TIME_INTERVALS[targetInterval.unit].size;
+      }
+    }
+
+    if (!opt.startToZero || targetMin > 0) {
+      const targetSpace = space ? (space - 1) : (targetMax - targetMin);
+      const targetStep = Math.ceil((max - targetMin) / targetSpace);
+        targetMin = targetMin < targetStep ? 0 : targetMin - targetStep;
+    }
+
+    return {
+      max: targetMax,
+      min: targetMin,
+    };
+  },
+  /**
+   * Take series data to create min/max info for each series
+   * @param data
+   * @param spaces
+   * @returns {*|{maxDomain: null, minY: null, minX: null, maxY: null, maxX: null}}
+   */
+  getSeriesMinMaxForHeatMap(data, spaces) {
+    const axesXOption = this.options.axesX[0];
+    const axesYOption = this.options.axesY[0];
+    const seriesMinMax = this.getSeriesMinMax(data);
+
+    const adjustX = this.adjustMinMax(seriesMinMax.maxX, seriesMinMax.minX, axesXOption, spaces.x);
+    seriesMinMax.maxX = adjustX.max;
+    seriesMinMax.minX = adjustX.min;
+
+    const adjustY = this.adjustMinMax(seriesMinMax.maxY, seriesMinMax.minY, axesYOption, spaces.y);
+    seriesMinMax.maxY = adjustY.max;
+    seriesMinMax.minY = adjustY.min;
+
+    return seriesMinMax;
+  },
+
+  getSeriesValueOptForHeatMap(series) {
+    const data = series.data;
+    const colorOpt = series.colorOpt;
+    const colorAxis = series.colorAxis;
+    const categoryCnt = colorOpt.categoryCnt;
+
+    let maxValue = 0;
+    let isExistError = false;
+    data.forEach(({ value }) => {
+      if (maxValue < value) {
+        maxValue = value;
+      }
+      if (value < 0) {
+        isExistError = true;
+      }
+    });
+    const valueInterval = Math.ceil(maxValue / categoryCnt);
+    if (isExistError && colorAxis.length === categoryCnt) {
+      colorAxis.push({
+        id: `color#${categoryCnt}`,
+        value: colorOpt.error,
+        state: 'normal',
+        show: true,
+      });
+    }
+    return {
+      max: maxValue,
+      interval: valueInterval,
+      existError: isExistError,
+    };
+  },
+
   /**
    * Get graph items for each series by label index
    * @param {number} labelIndex  label index
@@ -553,6 +673,42 @@ const modules = {
     };
   },
 
+  /**
+   * Find label info by position x and y
+   * @param {array}   offset          position x and y
+   *
+   * @returns {object} clicked label information
+   */
+  getLabelInfoByPosition(offset) {
+    const [x, y] = offset;
+    const aPos = {
+      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,
+    };
+
+    const scale = this.options.horizontal ? this.axesY[0] : this.axesX[0];
+    const startPoint = aPos[scale.units.rectStart];
+    const endPoint = aPos[scale.units.rectEnd];
+
+    let labelIndex;
+    let hitInfo;
+    if (scale.labels) {
+      const labelGap = (endPoint - startPoint) / scale.labels.length;
+      const index = Math.floor(((this.options.horizontal ? y : x) - startPoint) / labelGap);
+      labelIndex = scale.labels.length > index ? index : -1;
+    } else {
+      hitInfo = this.getItemByPosition(offset, this.options.selectLabel.useApproximateValue);
+      labelIndex = hitInfo.maxIndex ?? -1;
+    }
+
+    return {
+      labelIndex,
+      hitInfo,
+    };
+  },
+
   /**
    * Create min/max information for all of data
    * @property seriesList
@@ -584,7 +740,8 @@ const modules = {
 
         if (smm && series.show) {
           if (!isHorizontal) {
-            if (smm.minX && ((minmax.x[axisX].min === null || (smm.minX < minmax.x[axisX].min)))) {
+            if (smm.minX !== null
+                && ((minmax.x[axisX].min === null || (smm.minX < minmax.x[axisX].min)))) {
               minmax.x[axisX].min = smm.minX;
             }
             if (minmax.y[axisY].min === null || (smm.minY < minmax.y[axisY].min)) {
@@ -594,7 +751,8 @@ const modules = {
             if (minmax.x[axisX].min === null || (smm.minX < minmax.x[axisX].min)) {
               minmax.x[axisX].min = smm.minX;
             }
-            if (smm.minY && (minmax.y[axisY].min === null || (smm.minY < minmax.y[axisY].min))) {
+            if (smm.minY !== null
+                && (minmax.y[axisY].min === null || (smm.minY < minmax.y[axisY].min))) {
               minmax.y[axisY].min = smm.minY;
             }
           }

package/src/components/chart/plugins/plugins.interaction.js

@@ -1,5 +1,5 @@
 import { numberWithComma } from '@/common/utils';
-import { defaultsDeep } from 'lodash-es';
+import { cloneDeep, defaultsDeep } from 'lodash-es';
 
 const modules = {
   /**
@@ -48,13 +48,17 @@ const modules = {
       this.overlayClear();
 
       if (Object.keys(hitInfo.items).length) {
-        if (this.options.type !== 'scatter' || tooltip.use) {
+        if ((type !== 'scatter' && type !== 'heatMap') || tooltip.use) {
           this.drawItemsHighlight(hitInfo, ctx);
         }
 
         if (tooltip.use) {
           this.setTooltipLayoutPosition(hitInfo, e);
-          this.drawTooltip(hitInfo, this.tooltipCtx);
+          if (type === 'scatter') {
+            this.drawTooltipForScatter(hitInfo, this.tooltipCtx);
+          } else {
+            this.drawTooltip(hitInfo, this.tooltipCtx);
+          }
         }
       } else if (tooltip.use) {
         this.hideTooltipDOM();
@@ -64,7 +68,7 @@ const modules = {
         this.drawSelectionArea(this.dragInfoBackup);
       }
 
-      if (indicator.use && type !== 'pie' && type !== 'scatter') {
+      if (indicator.use && type !== 'pie' && type !== 'scatter' && type !== 'heatMap') {
         this.drawIndicator(offset, indicator.color);
       }
     };
@@ -139,6 +143,15 @@ const modules = {
         } = hitInfo);
       }
 
+      if (this.options.selectLabel.use) {
+        const offset = this.getMousePosition(e);
+        const clickedLabelInfo = this.getLabelInfoByPosition(offset);
+        const selected = this.selectLabel(clickedLabelInfo.labelIndex);
+        this.renderWithSelectLabel(selected.dataIndex);
+
+        args.selected = cloneDeep(this.defaultSelectLabelInfo);
+      }
+
       if (typeof this.listeners.click === 'function') {
         if (!this.dragInfoBackup) {
           this.listeners.click(args);
@@ -154,7 +167,7 @@ const modules = {
     this.onMouseDown = (e) => {
       const { dragSelection, type } = this.options;
 
-      if (dragSelection.use && (type === 'scatter' || type === 'line')) {
+      if (dragSelection.use && (type === 'scatter' || type === 'line' || type === 'heatMap')) {
         this.removeSelectionArea();
         this.dragStart(e, type);
       }
@@ -251,9 +264,11 @@ const modules = {
       }
 
       dragInfo.xsp = Math.min(xcp, xep);
-      dragInfo.ysp = type === 'scatter' ? Math.min(ycp, yep) : aRange.y1;
+      dragInfo.ysp = type === 'scatter' || type === 'heatMap' ? Math.min(ycp, yep) : aRange.y1;
       dragInfo.width = Math.ceil(Math.abs(xep - xcp));
-      dragInfo.height = type === 'scatter' ? Math.ceil(Math.abs(yep - ycp)) : aRange.y2 - aRange.y1;
+      dragInfo.height = type === 'scatter' || type === 'heatMap'
+          ? Math.ceil(Math.abs(yep - ycp))
+          : aRange.y2 - aRange.y1;
 
       this.overlayClear();
       this.drawSelectionArea(dragInfo);
@@ -367,7 +382,7 @@ const modules = {
           }
 
           if (gdata !== null && gdata !== undefined) {
-            const sName = `${series.name}`;
+            const sName = series.name;
             const sw = ctx ? ctx.measureText(sName).width : 1;
 
             item.name = sName;
@@ -412,7 +427,7 @@ const modules = {
    * @returns {boolean}
    */
   selectItemByData(targetInfo, chartType) {
-    this.defaultSelectInfo = targetInfo;
+    this.defaultSelectItemInfo = targetInfo;
 
     let foundInfo;
     if (chartType === 'pie') {
@@ -437,9 +452,66 @@ const modules = {
     return true;
   },
 
+  /**
+   * render after select label by index list
+   * @param indexList {array}  '[0, 1 ...]'
+   */
+  renderWithSelectLabel(indexList) {
+    this.defaultSelectLabelInfo.dataIndex = indexList;
+    this.initSelectedLabelInfo();
+    this.render();
+  },
+
+  /**
+   * init defaultSelectLabelInfo object.
+   * (set each series data and label text)
+   */
+  initSelectedLabelInfo() {
+    const { use, limit } = this.options.selectLabel;
+
+    if (use) {
+      if (!this.defaultSelectLabelInfo) {
+        this.defaultSelectLabelInfo = { dataIndex: [] };
+      }
+      const infoObj = this.defaultSelectLabelInfo;
+      infoObj.dataIndex.splice(limit);
+      infoObj.label = infoObj.dataIndex.map(i => this.data.labels[i]);
+      const dataEntries = Object.entries(this.data.data);
+      infoObj.data = infoObj.dataIndex.map(labelIdx => Object.fromEntries(
+        dataEntries.map(([sId, data]) => [sId, data[labelIdx]])));
+    }
+  },
+
+  /**
+   * Add or delete selected label index, according to policy and option
+   * (set each series data and label text)
+   * @param labelIndex {array}  '[0, 1 ...]'
+   */
+  selectLabel(labelIndex) {
+    const option = this.options?.selectLabel ?? {};
+    const before = this.defaultSelectLabelInfo ?? { dataIndex: [] };
+    const after = cloneDeep(before);
+
+    if (before.dataIndex.includes(labelIndex)) {
+      const idx = before.dataIndex.indexOf(labelIndex);
+      after.dataIndex.splice(idx, 1);
+    } else if (labelIndex > -1) {
+      after.dataIndex.push(labelIndex);
+      if (option.limit > 0 && option.limit < after.dataIndex.length) {
+        if (option.useDeselectOverflow) {
+          after.dataIndex.splice(0, 1);
+        } else {
+          after.dataIndex.pop();
+        }
+      }
+    }
+
+    return after;
+  },
+
   /**
    * Find items by series within a range
-   * @param {object} param  object for find series items
+   * @param {object} range  object for find series items
    *
    * @returns {object}
    */