evui 3.3.25 → 3.3.26

package/package.json

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

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

@@ -122,14 +122,21 @@ class EvChart {
   initRect() {
     const opt = this.options;
     if (opt.title.show) {
-      this.initTitle();
+      if (!this.isInitTitle) {
+        this.initTitle();
+      }
+
       this.showTitle();
     }
 
     if (opt.legend.show) {
-      this.initLegend();
+      if (!this.isInitLegend) {
+        this.initLegend();
+      }
+
       this.setLegendPosition();
     }
+
     this.chartRect = this.getChartRect();
   }
 
@@ -755,6 +762,7 @@ class EvChart {
     this.bufferCtx.restore();
     this.bufferCtx.save();
 
+    this.initRect();
     this.initScale();
     this.chartRect = this.getChartRect();
     this.drawChart();

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

@@ -150,7 +150,10 @@ class Pie {
 
     let formattedTxt;
     if (formatter) {
-      formattedTxt = formatter(value);
+      formattedTxt = formatter({
+        value,
+        percentage: this.data.percentage,
+      });
     }
 
     if (!formatter || typeof formattedTxt !== 'string') {

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

@@ -17,32 +17,15 @@ const modules = {
       if (this.dragInfo?.isMove) {
         return;
       }
+
       const { indicator, tooltip, type } = this.options;
       const offset = this.getMousePosition(e);
       const hitInfo = this.findHitItem(offset);
+
       if (tooltip?.showAllValueInRange && hitInfo?.items) {
-        const isHorizontal = !!this.options.horizontal;
-        const hitItemId = Object.keys(hitInfo.items)[0];
-        const hitItemData = isHorizontal
-          ? hitInfo.items?.[hitItemId]?.data?.y : hitInfo.items?.[hitItemId]?.data?.x;
-        const sIds = Object.keys(this.seriesList);
-        for (let ix = 0; ix < sIds.length; ix++) {
-          const sId = sIds[ix];
-          const series = this.seriesList[sId];
-          const hasData = series.data.find(data =>
-            (isHorizontal ? data.y : data?.x === hitItemData));
-          if (hasData && !hitInfo.items[sId] && series?.show) {
-            const item = {};
-            item.color = series.color;
-            item.hit = false;
-            item.name = series.name;
-            item.axis = { x: series.xAxisIndex, y: series.yAxisIndex };
-            item.index = isHorizontal ? series.yAxisIndex : series.xAxisIndex;
-            item.data = hasData;
-            hitInfo.items[sId] = item;
-          }
-        }
+        this.addNotHitInfo(hitInfo);
       }
+
       const ctx = this.overlayCtx;
 
       this.overlayClear();
@@ -376,10 +359,6 @@ const modules = {
     const items = {};
     const isHorizontal = !!this.options.horizontal;
     const ctx = this.tooltipCtx;
-    const tooltipOpt = this.options.tooltip;
-    const tooltipValueFormatter = typeof tooltipOpt.formatter === 'function'
-      ? tooltipOpt.formatter
-      : tooltipOpt.formatter?.value;
 
     let hitId = null;
     let maxs = '';
@@ -414,31 +393,11 @@ const modules = {
             item.axis = { x: series.xAxisIndex, y: series.yAxisIndex };
             items[sId] = item;
 
-            let formattedTxt = '';
-            if (tooltipValueFormatter) {
-              if (this.options.type === 'pie') {
-                formattedTxt = tooltipValueFormatter({
-                  value: gdata,
-                  name: sName,
-                });
-              } else if (this.options.type === 'heatMap') {
-                formattedTxt = tooltipValueFormatter({
-                  x: item.data.x,
-                  y: item.data.y,
-                  value: gdata > -1 ? gdata : 'error',
-                });
-              } else {
-                formattedTxt = tooltipValueFormatter({
-                  x: this.options.horizontal ? gdata : item.data.x,
-                  y: this.options.horizontal ? item.data.y : gdata,
-                  name: sName,
-                });
-              }
-            }
-
-            if (!tooltipValueFormatter || typeof formattedTxt !== 'string') {
-              formattedTxt = numberWithComma(gdata);
-            }
+            const formattedTxt = this.getFormattedTooltipValue({
+              seriesName: sName,
+              value: gdata,
+              itemData: item.data,
+            });
 
             item.data.formatted = formattedTxt;
 
@@ -470,6 +429,97 @@ const modules = {
     return { items, hitId, maxTip: [maxs, maxv], maxHighlight };
   },
 
+  /**
+   * get formatted value for tooltip
+   * @param seriesName
+   * @param value
+   * @param x
+   * @param y
+   * @returns {string}
+   */
+  getFormattedTooltipValue({ seriesName, value, itemData }) {
+    const tooltipOpt = this.options.tooltip;
+    const tooltipValueFormatter = typeof tooltipOpt.formatter === 'function'
+      ? tooltipOpt.formatter
+      : tooltipOpt.formatter?.value;
+
+    let formattedTxt = value;
+    if (tooltipValueFormatter) {
+      if (this.options.type === 'pie') {
+        formattedTxt = tooltipValueFormatter({
+          value,
+          name: seriesName,
+          percentage: itemData.percentage,
+        });
+      } else if (this.options.type === 'heatMap') {
+        formattedTxt = tooltipValueFormatter({
+          x: itemData.x,
+          y: itemData.y,
+          value: value > -1 ? value : 'error',
+        });
+      } else {
+        formattedTxt = tooltipValueFormatter({
+          x: this.options.horizontal ? value : itemData.x,
+          y: this.options.horizontal ? itemData.y : value,
+          name: seriesName,
+        });
+      }
+    }
+
+    if (value && (!tooltipValueFormatter || typeof formattedTxt !== 'string')) {
+      if (this.options.type === 'heatMap') {
+        formattedTxt = value < 0 ? 'error' : numberWithComma(value);
+      } else {
+        formattedTxt = numberWithComma(value);
+      }
+    }
+
+    return formattedTxt;
+  },
+
+  /**
+   * add not hit info
+   * @param hitInfo
+   */
+  addNotHitInfo(hitInfo) {
+    const isHorizontal = !!this.options.horizontal;
+
+    const hitItemId = Object.keys(hitInfo.items)[0];
+    const hitItemData = isHorizontal
+      ? hitInfo.items?.[hitItemId]?.data?.y : hitInfo.items?.[hitItemId]?.data?.x;
+
+    const sIds = Object.keys(this.seriesList);
+    for (let ix = 0; ix < sIds.length; ix++) {
+      const sId = sIds[ix];
+      const series = this.seriesList[sId];
+
+      const hasData = series.data.find(data => (
+          isHorizontal
+            ? data?.y === hitItemData
+            : data?.x === hitItemData
+        ),
+      );
+
+      if (hasData && !hitInfo.items[sId] && series?.show) {
+        const item = {};
+        item.color = series.color;
+        item.hit = false;
+        item.name = series.name;
+        item.axis = { x: series.xAxisIndex, y: series.yAxisIndex };
+        item.index = isHorizontal ? series.yAxisIndex : series.xAxisIndex;
+        item.data = hasData;
+        item.data.formatted = this.getFormattedTooltipValue({
+          seriesName: series.name,
+          value: hasData.o,
+          x: hasData.x,
+          y: hasData.y,
+        });
+
+        hitInfo.items[sId] = item;
+      }
+    }
+  },
+
   /**
    *
    * @param targetInfo {object}  '{ dataIndex: number, seriesID: string }'
@@ -695,7 +745,7 @@ const modules = {
     }
 
     const sId = Object.keys(this.seriesList)[0];
-    const { xMin, xMax, yMin, yMax } = this.seriesList[sId].findSelectionRange(range);
+    const { xMin, xMax, yMin, yMax } = this.seriesList[sId].findSelectionRange(range) ?? {};
 
     return {
       xMin: xMin ?? dataRangeX.graphMin,

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

@@ -183,9 +183,7 @@ const modules = {
     this.onLegendBoxLeave = () => {
       this.legendDragInfo.dragging = false;
 
-      const lineDOM = this.containerDOM.getElementsByClassName('ev-chart-legend-line')[0];
-      const targetDOM = lineDOM.getElementsByClassName('ev-chart-legend-thumb')[0];
-      this.clearOverlay(targetDOM);
+      this.clearOverlay();
 
       const seriesList = Object.values(this.seriesList);
       if (!seriesList.length) {
@@ -256,7 +254,7 @@ const modules = {
 
   clearOverlay() {
     const targetDOM = this.containerDOM.getElementsByClassName('ev-chart-legend-line')[0];
-    const overlayDOM = targetDOM.getElementsByClassName('ev-chart-legend-overlay')[0];
+    const overlayDOM = targetDOM?.getElementsByClassName('ev-chart-legend-overlay')[0];
     if (overlayDOM) {
       targetDOM.removeChild(overlayDOM);
 
@@ -307,13 +305,15 @@ const modules = {
 
     overlayDOM.appendChild(tooltipDOM);
     overlayDOM.appendChild(itemDOM);
-    targetDOM.appendChild(overlayDOM);
+    targetDOM?.appendChild(overlayDOM);
 
-    const thumbDOM = targetDOM.getElementsByClassName('ev-chart-legend-thumb')[0];
-    const labels = thumbDOM.children;
-    labels.forEach((labelDOM) => {
-      labelDOM.style.opacity = 0.2;
-    });
+    const thumbDOM = targetDOM?.getElementsByClassName('ev-chart-legend-thumb')[0];
+    if (thumbDOM) {
+      const labels = thumbDOM.children;
+      labels.forEach((labelDOM) => {
+        labelDOM.style.opacity = 0.2;
+      });
+    }
   },
 
   createLegendHandle(type) {

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

@@ -21,6 +21,7 @@ const modules = {
     let startAngle = 1.5 * Math.PI;
     let endAngle;
     let series;
+    let percentage;
 
     const centerX = chartRect.width / 2;
     const centerY = chartRect.height / 2;
@@ -57,6 +58,7 @@ const modules = {
         for (let jx = 0; jx < pie.data.length; jx++) {
           slice = pie.data[jx];
           value = slice.value;
+          percentage = (value / pie.total) * 100;
           sliceAngle = 2 * Math.PI * (value / pie.total);
           endAngle = startAngle + sliceAngle;
 
@@ -83,7 +85,7 @@ const modules = {
             series.doughnutHoleSize = radius * (pieOption.doughnutHoleSize ?? 0);
             series.startAngle = startAngle;
             series.endAngle = endAngle;
-            series.data = { o: value };
+            series.data = { o: value, percentage };
 
             series.draw(ctx, strokeOptions);
             startAngle += sliceAngle;

package/src/components/treeGrid/uses.js

@@ -360,10 +360,12 @@ export const clickEvent = (params) => {
   const getClickedRowData = (event, row) => {
     const tagName = event.target.tagName.toLowerCase();
     let cellInfo = {};
-    if (tagName === 'td') {
-      cellInfo = event.target.dataset;
-    } else {
-      cellInfo = event.target.closest('td').dataset;
+    if (event.target.offsetParent) {
+      if (tagName === 'td') {
+        cellInfo = event.target.dataset;
+      } else {
+        cellInfo = event.target.closest('td').dataset;
+      }
     }
     return {
       event,