evui 3.3.10 → 3.3.13

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

@@ -51,28 +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 && !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 });
         }
       }
     }
@@ -175,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 };
@@ -185,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;
 
@@ -234,7 +250,7 @@ const modules = {
     const opt = this.options;
     const isHorizontal = !!opt.horizontal;
     const labelTipOpt = opt.selectLabel;
-    const { dataIndex, data } = this.defaultSelectLabelInfo;
+    const { dataIndex, data, label } = this.defaultSelectLabelInfo;
     let drawTip = false;
 
     if (dataIndex.length) {
@@ -248,86 +264,82 @@ const modules = {
         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 labelAxes = this.options.horizontal ? this.axesY[0] : this.axesX[0];
-      const labelStartPoint = aPos[labelAxes.units.rectStart];
-      const labelEndPoint = aPos[labelAxes.units.rectEnd];
-      const labelGap = (labelEndPoint - labelStartPoint) / labelAxes.labels.length;
-
-      const valueAxes = this.options.horizontal ? this.axesX[0] : this.axesY[0];
-      const valueStartPoint = aPos[valueAxes.units.rectStart];
-
-      const offset = this.options.type === 'bar' ? 4 : 6;
       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;
+      }
 
-      dataIndex.forEach((idx, i) => {
-        const labelCenter = Math.round(labelStartPoint + (labelGap * idx));
-        let gp;
-        const dp = labelCenter + (labelGap / 2);
+      data.forEach((selectedData, i) => {
         if (labelTipOpt.fixedPosTop) {
-          if (isHorizontal) {
-            gp = Canvas.calculateX(
-              this.axesRange.x[0].max,
-              this.axesRange.x[0].min,
-              this.axesRange.x[0].max,
-              chartWidth,
-              valueStartPoint);
-            gp += offset;
-          } else {
-            gp = Canvas.calculateY(
-                this.axesRange.y[0].max,
-                this.axesRange.y[0].min,
-                this.axesRange.y[0].max,
-                chartHeight,
-                valueStartPoint);
-            gp -= offset;
-          }
-        } else if (isHorizontal) {
-          const seriesList = Object.keys(data[i] ?? {});
-          const visibleSeries = seriesList.filter(sId => this.seriesList[sId].show);
-          const visibleValue = visibleSeries.map(sId => data[i][sId]);
-          const isExistGrp = seriesList.some(sId => this.seriesList[sId].isExistGrp);
-
-          let maxValue;
-          if (isExistGrp) {
-            maxValue = visibleValue.reduce((acc, v) => acc + v) ?? 0;
-          } else if (visibleValue.length) {
-            maxValue = Math.max(...visibleValue);
-          } else {
-            maxValue = this.axesRange.x[0].max;
-          }
-
-          gp = Canvas.calculateX(
-            maxValue,
-            this.axesRange.x[0].min,
-            this.axesRange.x[0].max,
-            chartWidth,
-            valueStartPoint);
-          gp += offset;
+          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 {
-          const seriesList = Object.keys(data[i] ?? {});
-          const visibleSeries = seriesList.filter(sId => this.seriesList[sId].show);
-          const visibleValue = visibleSeries.map(sId => data[i][sId]);
-          const isExistGrp = seriesList.some(sId => this.seriesList[sId].isExistGrp);
-
-          let maxValue;
-          if (isExistGrp) {
-            maxValue = visibleValue.reduce((acc, v) => acc + v) ?? 0;
-          } else if (visibleValue.length) {
-            maxValue = Math.max(...visibleValue);
-          } else {
-            maxValue = this.axesRange.y[0].max;
-          }
+          value = valueAxesRange.max;
+        }
+
+        if (labelAxes.labels) {
+          const labelCenter = Math.round(labelStartPoint + (labelGap * dataIndex[i]));
 
-          gp = Canvas.calculateY(
-              maxValue,
-              this.axesRange.y[0].min,
-              this.axesRange.y[0].max,
-              chartHeight,
-              valueStartPoint);
-          gp -= offset;
+          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,
@@ -351,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

@@ -129,17 +129,19 @@ export const PLOT_BAND_OPTION = {
 };
 
 export const HEAT_MAP_OPTION = {
-  ...LINE_OPTION,
-  colorOpt: {
-    min: '#FFFFFF',
-    max: '#0052FF',
-    categoryCnt: 5,
-    border: '#FFFFFF',
-    error: '#FF0000',
-  },
-  spaces: {
-    x: 0,
-    y: 0,
+  show: true,
+  highlight: {
+    maxShadowOpacity: 0.4,
+  },
+  xAxisIndex: 0,
+  yAxisIndex: 0,
+  showLegend: true,
+  showValue: {
+    use: false,
+    fontSize: 12,
+    textColor: '#000000',
+    formatter: null,
+    decimalPoint: 0,
   },
 };
 

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

@@ -54,7 +54,7 @@ const modules = {
       return new Pie(id, opt, index);
     } else if (type === 'heatMap') {
       this.seriesInfo.charts.heatMap.push(id);
-      return new HeatMap(id, opt, index);
+      return new HeatMap(id, opt, this.options.heatMapColor);
     }
 
     return false;

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

@@ -1,6 +1,5 @@
 import { reverse } from 'lodash-es';
 import Util from '../helpers/helpers.util';
-import { TIME_INTERVALS } from '../helpers/helpers.constant';
 
 const modules = {
   /**
@@ -37,8 +36,9 @@ const modules = {
             const sData = data[seriesID];
 
             if (series && sData) {
+              series.labels = label;
               series.data = this.addSeriesDSForHeatMap(sData);
-              series.minMax = this.getSeriesMinMaxForHeatMap(series.data, series.spaces);
+              series.minMax = this.getSeriesMinMax(series.data);
               series.valueOpt = this.getSeriesValueOptForHeatMap(series);
             }
           });
@@ -301,17 +301,20 @@ const modules = {
   /**
    * Take data to create data for each series
    * @param {array} data data array for each series
+   * @param {object}  label   chart label
+   *
    * @returns {array} data info added position and etc
    */
   addSeriesDSForHeatMap(data) {
-    return data.map(item => ({
-      x: item.x,
-      y: item.y,
-      o: item.value,
+    return data.map(({ x, y, value }) => ({
+      x,
+      y,
+      o: value,
       xp: null,
       yp: null,
+      w: null,
+      h: null,
       dataColor: null,
-      value: item.value,
       cId: null,
     }));
   },
@@ -414,73 +417,14 @@ 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 = targetInterval || 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 colorOpt = this.options.heatMapColor;
     const categoryCnt = colorOpt.categoryCnt;
 
     let maxValue = 0;
     let isExistError = false;
-    data.forEach(({ value }) => {
+    data.forEach(({ o: value }) => {
       if (maxValue < value) {
         maxValue = value;
       }
@@ -488,18 +432,19 @@ const modules = {
         isExistError = true;
       }
     });
-    const valueInterval = Math.ceil(maxValue / categoryCnt);
-    if (isExistError && colorAxis.length === categoryCnt) {
-      colorAxis.push({
+
+    if (isExistError && series.colorAxis.length === categoryCnt) {
+      series.colorAxis.push({
         id: `color#${categoryCnt}`,
         value: colorOpt.error,
         state: 'normal',
         show: true,
       });
     }
+
     return {
       max: maxValue,
-      interval: valueInterval,
+      interval: Math.ceil(maxValue / categoryCnt),
       existError: isExistError,
     };
   },
@@ -699,8 +644,8 @@ const modules = {
       const index = Math.floor(((this.options.horizontal ? y : x) - startPoint) / labelGap);
       labelIndex = scale.labels.length > index ? index : -1;
     } else {
-      hitInfo = this.getItemByPosition(offset, false);
-      labelIndex = hitInfo.maxIndex;
+      hitInfo = this.getItemByPosition(offset, this.options.selectLabel.useApproximateValue);
+      labelIndex = hitInfo.maxIndex ?? -1;
     }
 
     return {

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

@@ -54,7 +54,13 @@ const modules = {
 
         if (tooltip.use) {
           this.setTooltipLayoutPosition(hitInfo, e);
-          this.drawTooltip(hitInfo, this.tooltipCtx);
+          if (type === 'scatter') {
+            this.drawTooltipForScatter(hitInfo, this.tooltipCtx);
+          } else if (type === 'heatMap') {
+            this.drawToolTipForHeatMap(hitInfo, this.tooltipCtx);
+          } else {
+            this.drawTooltip(hitInfo, this.tooltipCtx);
+          }
         }
       } else if (tooltip.use) {
         this.hideTooltipDOM();
@@ -108,7 +114,7 @@ const modules = {
           this.render(hitInfo);
         }
 
-        ({ label: args.label, value: args.value, sId: args.seriesId } = hitInfo);
+        ({ label: args.label, value: args.value, sId: args.seriesId, acc: args.acc } = hitInfo);
       }
 
       if (typeof this.listeners['dbl-click'] === 'function') {
@@ -136,6 +142,7 @@ const modules = {
           value: args.value,
           sId: args.seriesId,
           maxIndex: args.dataIndex,
+          acc: args.acc,
         } = hitInfo);
       }
 
@@ -464,8 +471,12 @@ const modules = {
    */
   initSelectedLabelInfo() {
     const { use, limit } = this.options.selectLabel;
-    const infoObj = this.defaultSelectLabelInfo;
-    if (use && infoObj?.dataIndex) {
+
+    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);

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

@@ -80,10 +80,12 @@ const modules = {
     Object.values(seriesList).forEach((series) => {
       if (!series.isExistGrp && series.showLegend) {
         const { colorAxis, valueOpt } = series;
+        const { max, interval, existError } = valueOpt;
         colorAxis.forEach((colorItem, index) => {
-          const maxValue = valueOpt.interval * (index + 1);
-          const minValue = maxValue - valueOpt.interval;
-          const name = valueOpt.existError && index === colorAxis.length - 1
+          const minValue = interval * index;
+          const maxValue = index === colorAxis.length - 1
+            ? max : minValue + interval - 1;
+          const name = existError && index === colorAxis.length - 1
             ? 'error' : `${minValue} - ${maxValue}`;
           this.addLegend({
             cId: colorItem.id,
@@ -197,6 +199,7 @@ const modules = {
       this.update({
         updateSeries: false,
         updateSelTip: { update: false, keepDomain: false },
+        hitInfo: { sId: targetId },
       });
     };
 

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

@@ -27,6 +27,11 @@ const modules = {
 
     const chartWidth = centerX - (padding.left + padding.right);
     const chartHeight = centerY - (padding.bottom + padding.top);
+    if ((typeof chartWidth === 'number' && chartWidth < 0)
+      || (typeof chartHeight === 'number' && chartHeight < 0)) {
+      return;
+    }
+
     const innerRadius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
     const outerRadius = Math.min(chartWidth, chartHeight);
 
@@ -109,8 +114,14 @@ const modules = {
 
     const centerX = width / 2;
     const centerY = height / 2;
+
     const chartWidth = centerX - (padding.left + padding.right);
     const chartHeight = centerY - (padding.bottom + padding.top);
+    if ((typeof chartWidth === 'number' && chartWidth < 0)
+      || (typeof chartHeight === 'number' && chartHeight < 0)) {
+      return;
+    }
+
     const innerRadius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
     const outerRadius = Math.min(chartWidth, chartHeight);
 
@@ -190,8 +201,14 @@ const modules = {
 
     const centerX = width / 2;
     const centerY = height / 2;
+
     const chartWidth = centerX - (padding.left + padding.right);
     const chartHeight = centerY - (padding.bottom + padding.top);
+    if ((typeof chartWidth === 'number' && chartWidth < 0)
+      || (typeof chartHeight === 'number' && chartHeight < 0)) {
+      return;
+    }
+
     const radius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
 
     ctx.save();