evui 3.3.7 → 3.3.10

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

@@ -3,13 +3,16 @@ const modules = {
   /**
    * Draw series data
    *
+   * @params hitInfo
+   *
    * @returns {undefined}
    */
-  drawPie() {
+  drawPie(hitInfo) {
     const ctx = this.bufferCtx;
     const chartRect = this.chartRect;
     const pieDataSet = this.pieDataSet;
     const pieOption = this.options;
+    const padding = this.options.padding;
     const isDoughnut = !!pieOption.doughnutHoleSize;
 
     let slice;
@@ -22,8 +25,10 @@ const modules = {
     const centerX = chartRect.width / 2;
     const centerY = chartRect.height / 2;
 
-    const innerRadius = Math.min(centerX, centerY) * pieOption.doughnutHoleSize;
-    const outerRadius = Math.min(centerX, centerY);
+    const chartWidth = centerX - (padding.left + padding.right);
+    const chartHeight = centerY - (padding.bottom + padding.top);
+    const innerRadius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
+    const outerRadius = Math.min(chartWidth, chartHeight);
 
     for (let ix = 0; ix < pieDataSet.length; ix++) {
       const pie = pieDataSet[ix];
@@ -55,55 +60,59 @@ const modules = {
           series = this.seriesList[slice.id];
 
           if (value) {
+            const strokeOptions = { ...pieOption.pieStroke };
+            if (pie.data.length === 1 && pieOption.pieStroke.use) {
+              strokeOptions.use = false;
+
+              ctx.lineWidth = pieOption.pieStroke.lineWidth;
+              ctx.strokeStyle = pieOption.pieStroke.color;
+              ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+              ctx.stroke();
+            }
+
+            series.isSelect = hitInfo?.sId === slice.id;
             series.type = isDoughnut ? 'doughnut' : 'pie';
             series.centerX = centerX;
             series.centerY = centerY;
             series.radius = radius;
+            series.doughnutHoleSize = radius * (pieOption.doughnutHoleSize ?? 0);
             series.startAngle = startAngle;
             series.endAngle = endAngle;
             series.data = { o: value };
 
-            series.draw(ctx);
+            series.draw(ctx, strokeOptions);
             startAngle += sliceAngle;
           }
         }
       }
-
-      ctx.beginPath();
-      if (pieOption?.pieStroke?.use) {
-        ctx.lineWidth = pieOption.pieStroke.lineWidth;
-        ctx.strokeStyle = pieOption.pieStroke.color;
-        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-        ctx.stroke();
-      } else {
-        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-      }
-
-      ctx.closePath();
     }
   },
 
   /**
    * Draw series data
    *
+   * @params hitInfo
+   *
    * @returns {undefined}
    */
-  drawSunburst() {
+  drawSunburst(hitInfo) {
     const ctx = this.bufferCtx;
-    const chartRect = this.chartRect;
+    const { width, height } = this.chartRect;
     const pieDataSet = this.pieDataSet;
     const pieOption = this.options;
+    const padding = this.options.padding;
 
     this.calculateAngle();
 
     let slice;
     let series;
 
-    const centerX = chartRect.width / 2;
-    const centerY = chartRect.height / 2;
-
-    const innerRadius = Math.min(centerX, centerY) * pieOption.doughnutHoleSize;
-    const outerRadius = Math.min(centerX, centerY);
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const chartWidth = centerX - (padding.left + padding.right);
+    const chartHeight = centerY - (padding.bottom + padding.top);
+    const innerRadius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
+    const outerRadius = Math.min(chartWidth, chartHeight);
 
     for (let ix = 0; ix < pieDataSet.length; ix++) {
       const pie = pieDataSet[ix];
@@ -143,31 +152,30 @@ const modules = {
           series = this.seriesList[slice.id];
 
           if (slice.value) {
+            const strokeOptions = { ...pieOption.pieStroke };
+            if (pie.data.length === 1 && pieOption.pieStroke.use) {
+              strokeOptions.use = false;
+
+              ctx.lineWidth = pieOption.pieStroke.lineWidth;
+              ctx.strokeStyle = pieOption.pieStroke.color;
+              ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+              ctx.stroke();
+            }
+
+            series.isSelect = hitInfo?.sId === slice.id;
             series.type = 'sunburst';
             series.centerX = centerX;
             series.centerY = centerY;
             series.radius = radius;
+            series.doughnutHoleSize = radius * (pieOption.doughnutHoleSize ?? 0);
             series.startAngle = slice.sa;
             series.endAngle = slice.ea;
             series.data = { o: slice.value };
 
-            series.draw(ctx);
+            series.draw(ctx, strokeOptions);
           }
         }
       }
-
-      ctx.beginPath();
-
-      if (pieOption?.pieStroke?.use) {
-        ctx.lineWidth = pieOption.pieStroke.lineWidth;
-        ctx.strokeStyle = pieOption.pieStroke.color;
-        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-        ctx.stroke();
-      } else {
-        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-      }
-
-      ctx.closePath();
     }
   },
 
@@ -177,11 +185,15 @@ const modules = {
    */
   drawDoughnutHole(ctx = this.bufferCtx) {
     const pieOption = this.options;
+    const { width, height } = this.chartRect;
+    const padding = this.options.padding;
 
-    const centerX = this.chartRect.width / 2;
-    const centerY = this.chartRect.height / 2;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const chartWidth = centerX - (padding.left + padding.right);
+    const chartHeight = centerY - (padding.bottom + padding.top);
+    const radius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
 
-    const radius = Math.min(centerX, centerY) * pieOption.doughnutHoleSize;
     ctx.save();
     ctx.globalCompositeOperation = 'destination-out';
     ctx.beginPath();
@@ -195,19 +207,15 @@ const modules = {
     ctx.restore();
 
     // inner stroke
-    ctx.beginPath();
-
     if (pieOption?.pieStroke?.use) {
+      ctx.beginPath();
       ctx.strokeStyle = pieOption.pieStroke.color;
       ctx.lineWidth = pieOption.pieStroke.lineWidth;
       ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
       ctx.stroke();
-    } else {
-      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+      ctx.closePath();
     }
 
-    ctx.closePath();
-
     this.pieDataSet[this.pieDataSet.length - 1].ir = radius;
   },
 };

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

@@ -310,6 +310,13 @@ const modules = {
             value,
             name,
           });
+        } else if (this.options.type === 'heatMap') {
+          formattedTxt = opt.formatter({
+            x: this.options.horizontal ? hitItem.y : hitItem.x,
+            y: this.options.horizontal ? hitItem.x : hitItem.y,
+            name,
+            value,
+          });
         } else {
           formattedTxt = opt.formatter({
             x: this.options.horizontal ? value : hitItem.x,
@@ -349,6 +356,85 @@ const modules = {
     this.tooltipDOM.style.display = 'block';
   },
 
+  /**
+   * Draw tooltip canvas for heatmap
+   * @param {object} hitInfo    mousemove callback
+   * @param {object} context    tooltip canvas context
+   *
+   * @returns {undefined}
+   */
+  drawToolTipForHeatMap(hitInfo, context) {
+    const ctx = context;
+    const items = hitInfo.items;
+    const sId = hitInfo.hitId;
+    const hitItem = items[sId].data;
+    const hitAxis = items[sId].axis;
+    const hitColor = items[sId].color;
+    const boxPadding = { t: 8, b: 8, r: 20, l: 16 };
+    const isHorizontal = this.options.horizontal;
+    const opt = this.options.tooltip;
+
+    // draw tooltip Title(axis label) and add style class for wrap line about too much long label.
+    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)}`
+        : `${this.axesX[hitAxis.x].getLabelFormat(hitItem.x)} / ${this.axesY[hitAxis.y].getLabelFormat(hitItem.y)}`;
+    }
+
+    if (opt.textOverflow) {
+      this.tooltipHeaderDOM.classList.add(`ev-chart-tooltip-header--${opt.textOverflow}`);
+    }
+
+    // draw tooltip contents (series, value combination)
+    ctx.save();
+    ctx.scale(this.pixelRatio, this.pixelRatio);
+
+    if (this.tooltipBodyDOM.style.overflowY === 'auto') {
+      boxPadding.r += SCROLL_WIDTH;
+    }
+
+    const itemX = boxPadding.l + 2;
+    const itemY = boxPadding.t + TEXT_HEIGHT + 2;
+    const itemValue = hitItem.o > -1 ? hitItem.o : 'error';
+
+    ctx.font = FONT_STYLE;
+
+    ctx.beginPath();
+
+    if (typeof hitColor !== 'string') {
+      ctx.fillStyle = Canvas.createGradient(
+        ctx,
+        isHorizontal,
+        { x: itemX, y: itemY, w: 12, h: -12 },
+        hitColor,
+      );
+    } else {
+      ctx.fillStyle = hitColor;
+    }
+
+    // 1. Draw series color
+    ctx.fillRect(itemX - 4, itemY - 12, 12, 12);
+    ctx.fillStyle = opt.fontColor;
+
+    // 2. Draw series name
+    ctx.textBaseline = 'Bottom';
+    ctx.fillText(itemValue, itemX + COLOR_MARGIN, itemY);
+    ctx.closePath();
+
+    // set tooltipDOM's style
+    this.tooltipDOM.style.overflowY = 'hidden';
+    this.tooltipDOM.style.backgroundColor = opt.backgroundColor;
+    this.tooltipDOM.style.border = `1px solid ${opt.borderColor}`;
+    this.tooltipDOM.style.color = opt.fontColor;
+
+    if (opt.useShadow) {
+      const shadowColor = `rgba(0, 0, 0, ${opt.shadowOpacity})`;
+      this.tooltipDOM.style.boxShadow = `2px 2px 2px ${shadowColor}`;
+    }
+
+    this.tooltipDOM.style.display = 'block';
+  },
+
   /**
    * Draw graph item highlight
    * @param {object} hitInfo    mousemove callback
@@ -361,7 +447,7 @@ const modules = {
       const series = this.seriesList[sId];
       series.itemHighlight(hitInfo.items[sId], ctx);
 
-      if (series.type === 'sunburst' || series.type === 'doughnut') {
+      if (Util.isDoughnutHole(series.type)) {
         this.drawDoughnutHole(ctx);
       }
     });

package/src/components/chart/scale/scale.js

@@ -164,7 +164,7 @@ class Scale {
    *
    * @returns {undefined}
    */
-  draw(chartRect, labelOffset, stepInfo, hitInfo) {
+  draw(chartRect, labelOffset, stepInfo, hitInfo, selectLabelInfo) {
     const ctx = this.ctx;
     const options = this.options;
     const aPos = {
@@ -239,12 +239,22 @@ class Scale {
         linePosition = labelCenter + aliasPixel;
         labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
 
+        const isBlurredLabel = this.options?.selectLabel?.use
+          && this.options?.selectLabel?.useLabelOpacity
+          && (this.options.horizontal === (this.type === 'y'))
+          && selectLabelInfo?.dataIndex?.length
+          && !selectLabelInfo?.dataIndex?.includes(ix);
+        ctx.fillStyle = Util.colorStringToRgba(this.labelStyle.color, isBlurredLabel ? 0.1 : 1);
+
         let labelPoint;
 
         if (this.type === 'x') {
           labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
           ctx.fillText(labelText, labelCenter, labelPoint);
-          if (options?.selectItem?.showLabelTip && hitInfo?.label && !this.options?.horizontal) {
+          if (!isBlurredLabel
+              && options?.selectItem?.showLabelTip
+              && hitInfo?.label
+              && !this.options?.horizontal) {
             const selectedLabel = this.getLabelFormat(
               Math.min(axisMax, hitInfo.label + (0 * stepValue)),
             );

package/src/components/chart/scale/scale.step.js

@@ -57,7 +57,7 @@ class StepScale extends Scale {
    *
    * @returns {undefined}
    */
-  draw(chartRect, labelOffset, stepInfo, hitInfo) {
+  draw(chartRect, labelOffset, stepInfo, hitInfo, selectLabelInfo) {
     const ctx = this.ctx;
     const labels = this.labels;
     const aPos = {
@@ -121,14 +121,21 @@ class StepScale extends Scale {
         linePosition = labelCenter + aliasPixel;
         labelText = this.getLabelFormat(item, maxWidth);
 
+        const isBlurredLabel = this.options?.selectLabel?.use
+          && this.options?.selectLabel?.useLabelOpacity
+          && (this.options.horizontal === (this.type === 'y'))
+          && selectLabelInfo?.dataIndex?.length
+          && !selectLabelInfo?.dataIndex?.includes(index);
+        ctx.fillStyle = Util.colorStringToRgba(this.labelStyle.color, isBlurredLabel ? 0.1 : 1);
+
         if (this.type === 'x') {
           labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
           ctx.fillText(labelText, labelCenter + (labelGap / 2), labelPoint);
 
-          if (this.options?.selectItem?.showLabelTip
-            && hitInfo?.label
-            && !this.options?.horizontal
-          ) {
+          if (!isBlurredLabel
+              && this.options?.selectItem?.showLabelTip
+              && hitInfo?.label
+              && !this.options?.horizontal) {
             const selectedLabel = hitInfo.label;
             if (selectedLabel === labelText) {
               const height = Math.round(ctx.measureText(this.labelStyle?.fontSize).width);

package/src/components/chart/scale/scale.time.category.js

@@ -110,7 +110,7 @@ class TimeCategoryScale extends Scale {
    *
    * @returns {undefined}
    */
-  draw(chartRect, labelOffset, stepInfo, hitInfo) {
+  draw(chartRect, labelOffset, stepInfo, hitInfo, selectLabelInfo) {
     const ctx = this.ctx;
     const labels = this.labels;
     const aPos = {
@@ -183,12 +183,22 @@ class TimeCategoryScale extends Scale {
       linePosition = labelCenter + aliasPixel;
       labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
 
+      const isBlurredLabel = this.options?.selectLabel?.use
+        && this.options?.selectLabel?.useLabelOpacity
+        && (this.options.horizontal === (this.type === 'y'))
+        && selectLabelInfo?.dataIndex?.length
+        && !selectLabelInfo?.dataIndex?.includes(ix);
+      ctx.fillStyle = Util.colorStringToRgba(this.labelStyle.color, isBlurredLabel ? 0.1 : 1);
+
       let labelPoint;
 
       if (this.type === 'x') {
         labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
         ctx.fillText(labelText, labelCenter, labelPoint);
-        if (this.options?.selectItem?.showLabelTip && hitInfo?.label && !this.options?.horizontal) {
+        if (!isBlurredLabel
+            && this.options?.selectItem?.showLabelTip
+            && hitInfo?.label
+            && !this.options?.horizontal) {
           const selectedLabel = this.getLabelFormat(
             Math.min(axisMax, hitInfo.label + (0 * stepValue)),
           );

package/src/components/chart/uses.js

@@ -82,6 +82,17 @@ const DEFAULT_OPTIONS = {
     tipBackground: '#000000',
     tipTextColor: '#FFFFFF',
   },
+  selectLabel: {
+    use: false,
+    limit: 1,
+    useDeselectOverflow: false,
+    showTip: false,
+    useSeriesOpacity: true,
+    useLabelOpacity: true,
+    fixedPosTop: false,
+    useApproximateValue: false,
+    tipBackground: '#000000',
+  },
   dragSelection: {
     use: false,
     keepDisplay: true,
@@ -103,15 +114,25 @@ export const useModel = () => {
   const getNormalizedOptions = (options) => {
     const normalizedOptions = defaultsDeep({}, options, DEFAULT_OPTIONS);
 
-    if (options.type === 'scatter' && !options?.tooltip) {
+    if ((options.type === 'scatter' || options.type === 'heatMap') && !options?.tooltip) {
       normalizedOptions.tooltip.use = false;
     }
 
+    if (options.type === 'pie' && !options?.padding) {
+      normalizedOptions.padding = {
+        top: 2,
+        right: 2,
+        left: 2,
+        bottom: 4,
+      };
+}
+
     return normalizedOptions;
   };
   const getNormalizedData = data => defaultsDeep(data, DEFAULT_DATA);
 
-  const selectInfo = cloneDeep(props.selectedItem);
+  const selectItemInfo = cloneDeep(props.selectedItem);
+  const selectLabelInfo = cloneDeep(props.selectedLabel);
 
   const eventListeners = {
     click: async (e) => {
@@ -119,6 +140,9 @@ export const useModel = () => {
       if (e.label) {
         emit('update:selectedItem', { seriesID: e.seriesId, dataIndex: e.dataIndex });
       }
+      if (e.selected) {
+        emit('update:selectedLabel', { dataIndex: e.selected.dataIndex });
+      }
       emit('click', e);
     },
     'dbl-click': async (e) => {
@@ -133,7 +157,8 @@ export const useModel = () => {
 
   return {
     eventListeners,
-    selectInfo,
+    selectItemInfo,
+    selectLabelInfo,
     getNormalizedData,
     getNormalizedOptions,
   };