evui 3.3.4 → 3.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.4",
+  "version": "3.3.7",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

package/src/components/chart/chart.core.js

@@ -193,7 +193,7 @@ class EvChart {
           }
 
           if (this.options.doughnutHoleSize > 0) {
-            this.drawDoughnutHole(series);
+            this.drawDoughnutHole();
           }
           break;
         }
@@ -555,7 +555,6 @@ class EvChart {
       if (!updateSelTip.keepDomain) {
         this.lastTip.pos = null;
         this.lastHitInfo = null;
-        this.defaultSelectInfo = null;
       }
     }
 
@@ -713,6 +712,8 @@ class EvChart {
       this.overlayCanvas.removeEventListener('mouseleave', this.onMouseLeave);
       this.overlayCanvas.removeEventListener('dblclick', this.onDblClick);
       this.overlayCanvas.removeEventListener('click', this.onClick);
+      this.overlayCanvas.removeEventListener('mousedown', this.onMouseDown);
+      this.overlayCanvas.removeEventListener('wheel', this.onWheel);
     }
 
     if (this.options.tooltip.use) {

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

@@ -177,7 +177,7 @@ class Bar {
   /**
    * Draw item highlight
    * @param {object}  item       object for drawing series data
-   * @param {object}  context    canvas context
+   * @param {CanvasRenderingContext2D}  context    canvas context
    *
    * @returns {undefined}
    */

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

@@ -20,31 +20,36 @@ class Pie {
     this.sId = sId;
     this.data = [];
     this.type = 'pie';
+    this.centerX = 0;
+    this.centerY = 0;
+    this.radius = 0;
+    this.startAngle = 0;
+    this.endAngle = 0;
+    this.slice = null;
+    this.state = null;
+    this.ctx = null;
   }
 
   /**
    * Draw series data
-   * @param {object} param     object for drawing series data
+   * @param context
    *
    * @returns {undefined}
    */
-  draw(param) {
-    const ctx = param.ctx;
-    const centerX = param.centerX;
-    const centerY = param.centerY;
-    const radius = param.radius;
-    const startAngle = param.startAngle;
-    const endAngle = param.endAngle;
+  draw(context) {
+    this.ctx = context;
+
     const color = this.color;
     const noneDownplayOpacity = color.includes('rgba') ? Util.getOpacity(color) : 1;
     const opacity = this.state === 'downplay' ? 0.1 : noneDownplayOpacity;
 
-    ctx.beginPath();
-    ctx.fillStyle = Util.colorStringToRgba(color, opacity);
-    ctx.moveTo(centerX, centerY);
-    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
-    ctx.fill();
-    ctx.closePath();
+    this.ctx.beginPath();
+    this.slice = new Path2D();
+    this.slice.moveTo(this.centerX, this.centerY);
+    this.slice.arc(this.centerX, this.centerY, this.radius, this.startAngle, this.endAngle);
+    this.ctx.fillStyle = Util.colorStringToRgba(color, opacity);
+    this.ctx.fill(this.slice);
+    this.ctx.closePath();
   }
 
   /**
@@ -53,38 +58,47 @@ class Pie {
    *
    * @returns {object} graph item
    */
-  findGraphRange(offset) {
-    const xp = offset[0];
-    const yp = offset[1];
-    const item = { data: null, hit: false, color: this.color };
-    const gdata = this.data;
-
-    let s = 0;
-    let e = gdata.length - 1;
-
-    while (s <= e) {
-      const m = Math.floor((s + e) / 2);
-      const sx = gdata[m].xp;
-      const sy = gdata[m].yp;
-      const ex = sx + gdata[m].w;
-      const ey = sy + gdata[m].h;
-
-      if ((sx - 4 <= xp) && (xp <= ex + 4)) {
-        item.data = gdata[m];
-
-        if ((ey - 4 <= yp) && (yp <= sy + 4)) {
-          item.hit = true;
-        }
-        return item;
-      } else if (sx + 4 < xp) {
-        s = m + 1;
-      } else {
-        e = m - 1;
-      }
+  findGraphData([offsetX, offsetY]) {
+    const item = { data: null, hit: false, color: null, index: -1 };
+
+    if (this.ctx?.isPointInPath(this.slice, offsetX, offsetY)) {
+      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;
+
+    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, this.radius, this.startAngle, this.endAngle);
+    ctx.fill();
+    ctx.closePath();
+
+    ctx.restore();
+  }
 }
 
 export default Pie;

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

@@ -1,4 +1,5 @@
 import { numberWithComma } from '@/common/utils';
+import dayjs from 'dayjs';
 import Canvas from '../helpers/helpers.canvas';
 
 const modules = {
@@ -12,23 +13,10 @@ const modules = {
     const opt = this.options;
     const isHorizontal = !!opt.horizontal;
     const maxTipOpt = opt.maxTip;
-    const selectItemOpt = opt.selectItem;
+    const selTipOpt = opt.selectItem;
     let maxArgs;
 
-    if (maxTipOpt.use) {
-      const maxSID = this.minMax[isHorizontal ? 'x' : 'y'][0].maxSID;
-      maxArgs = this.calculateTipInfo(this.seriesList[maxSID], 'max', null);
-
-      if (maxTipOpt.use && maxArgs) {
-        this.drawTextTip({ opt: maxTipOpt, tipType: 'max', ...maxArgs });
-
-        if (maxTipOpt.showIndicator) {
-          this.drawFixedIndicator({ opt: maxTipOpt, ...maxArgs });
-        }
-      }
-    }
-
-    if (selectItemOpt.use && tipLocationInfo) {
+    if (selTipOpt.use && tipLocationInfo) {
       const seriesInfo = this.seriesList[tipLocationInfo?.sId];
 
       if (!seriesInfo?.show) {
@@ -41,19 +29,27 @@ const modules = {
         tipLocationInfo,
       );
 
-      if (selectItemOpt.use && selArgs) {
+      if (selArgs) {
         let isSamePos = false;
 
         if (maxTipOpt.use && maxArgs?.dp === selArgs.dp) {
           isSamePos = true;
         }
 
-        if (selectItemOpt.showTextTip || selectItemOpt.showTip) {
-          this.drawTextTip({ opt: selectItemOpt, tipType: 'sel', isSamePos, ...selArgs });
+        if (selTipOpt.showTextTip || selTipOpt.showTip) {
+          if (selTipOpt.tipText === 'label') {
+            const axisOpt = isHorizontal ? opt.axesY[0] : opt.axesX[0];
+            const label = selArgs.label;
+            selArgs.text = axisOpt.type === 'time' ? dayjs(label).format(axisOpt.timeFormat) : label;
+          } else {
+            selArgs.text = numberWithComma(selArgs.value);
+          }
+
+          this.drawTextTip({ opt: selTipOpt, tipType: 'sel', isSamePos, ...selArgs });
         }
 
-        if (selectItemOpt.showIndicator) {
-          this.drawFixedIndicator({ opt: selectItemOpt, ...selArgs });
+        if (selTipOpt.showIndicator) {
+          this.drawFixedIndicator({ opt: selTipOpt, ...selArgs });
         }
       }
 
@@ -61,6 +57,20 @@ const modules = {
         this.lastHitInfo = tipLocationInfo;
       }
     }
+
+    if (maxTipOpt.use) {
+      const maxSID = this.minMax[isHorizontal ? 'x' : 'y'][0].maxSID;
+      maxArgs = this.calculateTipInfo(this.seriesList[maxSID], 'max', null);
+
+      if (maxTipOpt.use && maxArgs) {
+        maxArgs.text = numberWithComma(maxArgs.value);
+        this.drawTextTip({ opt: maxTipOpt, tipType: 'max', ...maxArgs });
+
+        if (maxTipOpt.showIndicator) {
+          this.drawFixedIndicator({ opt: maxTipOpt, ...maxArgs });
+        }
+      }
+    }
   },
 
   /**
@@ -116,19 +126,24 @@ const modules = {
     }
 
     let value = isHorizontal ? series.minMax.maxX : series.minMax.maxY;
-
+    let label;
     if (tipType === 'sel') {
       if (hitInfo && hitInfo.value !== null) {
         value = hitInfo.useStack ? hitInfo.acc : hitInfo.value;
+        label = hitInfo.label;
         lastTip.value = value;
+        lastTip.label = label;
       } else if (lastTip.value !== null) {
         value = lastTip.value;
+        label = lastTip.label;
       } else if (lastTip.pos !== null) {
         const item = type === 'bar'
           ? this.getItemByLabelIndex(lastTip.pos) : this.getItemByLabel(lastTip.pos);
 
         value = item.useStack ? item.acc : item.value;
+        label = item.label;
         lastTip.value = value;
+        lastTip.label = label;
       }
     }
 
@@ -157,7 +172,7 @@ const modules = {
     }
 
     const sizeObj = { xArea, yArea, graphX, graphY, xsp, xep, ysp };
-    const dataObj = { dp, value, text: numberWithComma(value), type };
+    const dataObj = { dp, value, label, type };
 
     return { ...sizeObj, ...dataObj };
   },

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

@@ -10,19 +10,19 @@ const modules = {
    */
   createDataSet(data, label) {
     Object.keys(this.seriesInfo.charts).forEach((typeKey) => {
-      const type = this.seriesInfo.charts[typeKey];
+      const seriesIDs = this.seriesInfo.charts[typeKey];
 
-      if (type.length) {
+      if (seriesIDs.length) {
         if (typeKey === 'pie') {
           if (this.options.sunburst) {
             this.createSunburstDataSet(data);
           } else {
-            this.createPieDataSet(data, type);
+            this.createPieDataSet(data, seriesIDs);
           }
         } else if (typeKey === 'scatter') {
-          type.forEach((sId) => {
-            const series = this.seriesList[sId];
-            const sData = data[sId];
+          seriesIDs.forEach((seriesID) => {
+            const series = this.seriesList[seriesID];
+            const sData = data[seriesID];
 
             if (series && sData) {
               series.data = this.addSeriesDSforScatter(sData);
@@ -30,9 +30,9 @@ const modules = {
             }
           });
         } else {
-          type.forEach((sId) => {
-            const series = this.seriesList[sId];
-            const sData = data[sId];
+          seriesIDs.forEach((seriesID) => {
+            const series = this.seriesList[seriesID];
+            const sData = data[seriesID];
 
             if (series && sData) {
               if (series.isExistGrp && series.stackIndex) {
@@ -153,25 +153,22 @@ const modules = {
 
   /**
    * Take chart data and to create normalized pie data
-   * @param {object}  data    chart series info
+   * @param {object}  data    chart data
+   * @param {String[]}  seriesIDs     chart series info
    *
    * @returns {undefined}
    */
-  createPieDataSet(data, pie) {
+  createPieDataSet(data, seriesIDs) {
     this.pieDataSet = [];
     const ds = this.pieDataSet;
+    ds[0] = { data: [], ir: 0, or: 0, total: 0 };
 
-    pie.forEach((sId) => {
-      data[sId].forEach((value, index) => {
-        if (!ds[index]) {
-          ds[index] = { data: [], ir: 0, or: 0, total: 0 };
-        }
-
-        if (this.seriesList[sId].show) {
-          ds[index].total += value || 0;
-          ds[index].data.push({ id: sId, value, sa: 0, ea: 0 });
-        }
-      });
+    seriesIDs.forEach((sId) => {
+      if (this.seriesList[sId].show) {
+        const value = data[sId][0] ?? 0;
+        ds[0].total += value;
+        ds[0].data.push({ id: sId, value, sa: 0, ea: 0 });
+      }
     });
 
     ds.forEach((item) => {

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

@@ -160,15 +160,17 @@ const modules = {
       }
     };
 
-    if (this.options?.tooltip?.useScrollbar) {
-      this.overlayCanvas.addEventListener('wheel', (e) => {
-        const isTooltipVisible = this.tooltipDOM.style.display === 'block';
+    this.onWheel = (e) => {
+      const isTooltipVisible = this.tooltipDOM.style.display === 'block';
 
-        if (isTooltipVisible) {
-          e.preventDefault();
-          this.tooltipBodyDOM.scrollTop += e.deltaY;
-        }
-      });
+      if (isTooltipVisible) {
+        e.preventDefault();
+        this.tooltipBodyDOM.scrollTop += e.deltaY;
+      }
+    };
+
+    if (this.options?.tooltip?.useScrollbar) {
+      this.overlayCanvas.addEventListener('wheel', this.onWheel, { passive: false });
     }
 
     this.overlayCanvas.addEventListener('mousemove', this.onMouseMove);
@@ -353,7 +355,7 @@ const modules = {
       if (series.findGraphData) {
         const item = series.findGraphData(offset, isHorizontal);
 
-        if (item.data) {
+        if (item?.data) {
           let gdata;
 
           if (item.data.o === null) {
@@ -408,6 +410,7 @@ const modules = {
    * @returns {boolean}
    */
   selectItemByData(targetInfo) {
+    this.defaultSelectInfo = targetInfo;
     const foundInfo = this.getItem(targetInfo, false);
 
     if (foundInfo) {

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

@@ -10,6 +10,7 @@ const modules = {
     const chartRect = this.chartRect;
     const pieDataSet = this.pieDataSet;
     const pieOption = this.options;
+    const isDoughnut = !!pieOption.doughnutHoleSize;
 
     let slice;
     let value;
@@ -54,14 +55,15 @@ const modules = {
           series = this.seriesList[slice.id];
 
           if (value) {
-            series.draw({
-              ctx,
-              centerX,
-              centerY,
-              radius,
-              startAngle,
-              endAngle,
-            });
+            series.type = isDoughnut ? 'doughnut' : 'pie';
+            series.centerX = centerX;
+            series.centerY = centerY;
+            series.radius = radius;
+            series.startAngle = startAngle;
+            series.endAngle = endAngle;
+            series.data = { o: value };
+
+            series.draw(ctx);
             startAngle += sliceAngle;
           }
         }
@@ -141,14 +143,15 @@ const modules = {
           series = this.seriesList[slice.id];
 
           if (slice.value) {
-            series.draw({
-              ctx,
-              centerX,
-              centerY,
-              radius,
-              startAngle: slice.sa,
-              endAngle: slice.ea,
-            });
+            series.type = 'sunburst';
+            series.centerX = centerX;
+            series.centerY = centerY;
+            series.radius = radius;
+            series.startAngle = slice.sa;
+            series.endAngle = slice.ea;
+            series.data = { o: slice.value };
+
+            series.draw(ctx);
           }
         }
       }
@@ -170,11 +173,9 @@ const modules = {
 
   /**
    * Draw doughnut hole
-   *
-   * @returns {undefined}
+   * @param ctx
    */
-  drawDoughnutHole() {
-    const ctx = this.bufferCtx;
+  drawDoughnutHole(ctx = this.bufferCtx) {
     const pieOption = this.options;
 
     const centerX = this.chartRect.width / 2;

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

@@ -177,9 +177,11 @@ const modules = {
     const opt = this.options.tooltip;
 
     // draw tooltip Title(axis label) and add style class for wrap line about too much long label.
-    this.tooltipHeaderDOM.textContent = this.options.horizontal
-      ? this.axesY[hitAxis.y].getLabelFormat(hitItem.y)
-      : this.axesX[hitAxis.x].getLabelFormat(hitItem.x);
+    if (this.axesX.length && this.axesY.length) {
+      this.tooltipHeaderDOM.textContent = this.options.horizontal
+        ? this.axesY[hitAxis.y].getLabelFormat(hitItem.y)
+        : this.axesX[hitAxis.x].getLabelFormat(hitItem.x);
+    }
 
     if (opt.textOverflow) {
       this.tooltipHeaderDOM.classList.add(`ev-chart-tooltip-header--${opt.textOverflow}`);
@@ -303,11 +305,18 @@ const modules = {
       // 3. Draw value
       let formattedTxt;
       if (opt.formatter) {
-        formattedTxt = opt.formatter({
-          x: this.options.horizontal ? value : hitItem.x,
-          y: this.options.horizontal ? hitItem.y : value,
-          name,
-        });
+        if (this.options.type === 'pie') {
+          formattedTxt = opt.formatter({
+            value,
+            name,
+          });
+        } else {
+          formattedTxt = opt.formatter({
+            x: this.options.horizontal ? value : hitItem.x,
+            y: this.options.horizontal ? hitItem.y : value,
+            name,
+          });
+        }
       }
 
       if (!opt.formatter || typeof formattedTxt !== 'string') {
@@ -349,7 +358,12 @@ const modules = {
    */
   drawItemsHighlight(hitInfo, ctx) {
     Object.keys(hitInfo.items).forEach((sId) => {
-      this.seriesList[sId].itemHighlight(hitInfo.items[sId], ctx);
+      const series = this.seriesList[sId];
+      series.itemHighlight(hitInfo.items[sId], ctx);
+
+      if (series.type === 'sunburst' || series.type === 'doughnut') {
+        this.drawDoughnutHole(ctx);
+      }
     });
   },
 

package/src/components/chart/uses.js

@@ -73,6 +73,7 @@ const DEFAULT_OPTIONS = {
   selectItem: {
     use: false,
     showTextTip: false,
+    tipText: 'value',
     showTip: false,
     showIndicator: false,
     fixedPosTop: false,