evui 3.3.8 → 3.3.9

package/package.json

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

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

@@ -332,7 +332,7 @@ class Bar {
    */
   drawValueLabels({ context, data, positions, isHighlight }) {
     const isHorizontal = this.isHorizontal;
-    const { fontSize, textColor, align, formatter } = this.showValue;
+    const { fontSize, textColor, align, formatter, decimalPoint } = this.showValue;
     const { x, y, w, h } = positions;
     const ctx = context;
 
@@ -361,7 +361,7 @@ class Bar {
     }
 
     if (!formatter || typeof formattedTxt !== 'string') {
-      formattedTxt = Util.labelSignFormat(value);
+      formattedTxt = Util.labelSignFormat(value, decimalPoint);
     }
 
     const vw = Math.round(ctx.measureText(formattedTxt).width);

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

@@ -24,6 +24,7 @@ class Pie {
     this.centerX = 0;
     this.centerY = 0;
     this.radius = 0;
+    this.doughnutHoleSize = 0;
     this.startAngle = 0;
     this.endAngle = 0;
     this.slice = null;
@@ -45,6 +46,7 @@ class Pie {
     const slice = new Path2D();
 
     const radius = this.isSelect ? this.radius + 5 : this.radius;
+    const doughnutHoleRadius = this.radius * this.doughnutHoleSize;
 
     const color = this.color;
     const noneDownplayOpacity = color.includes('rgba') ? Util.getOpacity(color) : 1;
@@ -64,6 +66,10 @@ class Pie {
       ctx.stroke(slice);
     }
 
+    if (this.showValue?.use) {
+      this.drawValueLabels(ctx, doughnutHoleRadius);
+    }
+
     ctx.closePath();
 
     this.slice = slice;
@@ -101,6 +107,7 @@ class Pie {
   itemHighlight(item, context) {
     const ctx = context;
     const radius = this.isSelect ? this.radius + 5 : this.radius;
+    const doughnutHoleRadius = this.radius * this.doughnutHoleSize;
 
     ctx.save();
     ctx.shadowOffsetX = 0;
@@ -116,7 +123,62 @@ class Pie {
     ctx.arc(this.centerX, this.centerY, radius, this.startAngle, this.endAngle);
     ctx.lineTo(this.centerX, this.centerY);
     ctx.fill();
+
+    if (this.showValue?.use) {
+      this.drawValueLabels(ctx, doughnutHoleRadius);
+    }
+
     ctx.closePath();
+    ctx.restore();
+  }
+
+  /**
+   * Draw value label if series 'use' of showValue option is true
+   *
+   * @param context           canvas context
+   */
+  drawValueLabels(context) {
+    const { fontSize, textColor, formatter } = this.showValue;
+    const ctx = context;
+
+    ctx.save();
+    ctx.beginPath();
+
+    ctx.font = `normal normal normal ${fontSize}px Roboto`;
+    ctx.fillStyle = textColor;
+    ctx.lineWidth = 1;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    const value = this.data.o;
+
+    let formattedTxt;
+    if (formatter) {
+      formattedTxt = formatter(value);
+    }
+
+    if (!formatter || typeof formattedTxt !== 'string') {
+      formattedTxt = Util.labelSignFormat(value);
+    }
+
+    const ratio = 1.8;
+    const radius = this.radius - this.doughnutHoleSize;
+    const innerAngle = ((this.endAngle - this.startAngle) * 180) / Math.PI;
+    const valueHeight = fontSize + 4;
+    const valueWidth = Math.round(ctx.measureText(formattedTxt).width);
+
+    if (innerAngle >= valueWidth * ratio
+      && innerAngle >= valueHeight * ratio
+      && radius >= valueWidth * ratio
+      && radius >= valueHeight * ratio
+    ) {
+      const halfRadius = (radius / 2) + this.doughnutHoleSize;
+      const centerAngle = ((this.endAngle - this.startAngle) / 2) + this.startAngle;
+      const xPos = halfRadius * Math.cos(centerAngle) + this.centerX;
+      const yPos = halfRadius * Math.sin(centerAngle) + this.centerY;
+
+      ctx.fillText(formattedTxt, xPos, yPos);
+    }
 
     ctx.restore();
   }

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

@@ -59,6 +59,7 @@ export const BAR_OPTION = {
     fontSize: 12,
     textColor: '#000000',
     formatter: null,
+    decimalPoint: 0,
   },
 };
 
@@ -70,6 +71,12 @@ export const PIE_OPTION = {
     color: '#FFFFFF',
     lineWidth: 2,
   },
+  showValue: {
+    use: false,
+    fontSize: 12,
+    textColor: '#000000',
+    formatter: null,
+  },
 };
 
 export const AXIS_OPTION = {

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

@@ -452,8 +452,14 @@ const modules = {
 
   getItem({ seriesID, dataIndex }, useApproximate = false) {
     const dataInfo = this.getDataByValues(seriesID, dataIndex);
+
+    if (!dataInfo || !dataInfo?.xp || !dataInfo?.yp) {
+      return null;
+    }
+
     return this.getItemByPosition([dataInfo.xp, dataInfo.yp], useApproximate);
   },
+
   /**
    *
    * @param seriesID

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

@@ -75,6 +75,7 @@ const modules = {
             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 };
@@ -166,6 +167,7 @@ const modules = {
             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 };