evui 3.4.138 → 3.4.140

package/package.json

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

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

@@ -1,4 +1,4 @@
-import { mobileCheck } from '@/common/utils';
+import { mobileCheck, truthyNumber } from '@/common/utils';
 import Model from './model';
 import TimeScale from './scale/scale.time';
 import LinearScale from './scale/scale.linear';
@@ -196,21 +196,29 @@ class EvChart {
     const notFormattedXLabels = getNotFormattedLabels(this.axesSteps?.x[0]);
     const notFormattedYLabels = getNotFormattedLabels(this.axesSteps?.y[0]);
 
+    const yFixWidth = truthyNumber(this.axesY[0]?.labelStyle?.fixWidth)
+      ? this.axesY[0]?.labelStyle?.fixWidth
+      : 0;
+    const xFixWidth = truthyNumber(this.axesX[0]?.labelStyle?.fixWidth)
+      ? this.axesX[0]?.labelStyle?.fixWidth
+      : 0;
+
     const xMaxWidth = this.axesX[0]?.getLabelWidthHasMaxLength(notFormattedXLabels);
     const yMaxWidth = this.axesY[0]?.getLabelWidthHasMaxLength(notFormattedYLabels);
 
+
     const adjustedRange = {
       x: !isStepXAxisUseFitWidth ? this.axesRange?.x?.map(value => ({
         ...value,
         size: {
-          width: Math.max(xMaxWidth, value.size.width),
+          width: xFixWidth || Math.max(xMaxWidth, value.size.width),
           height: value.size.height,
         },
       })) : this.axesRange?.x,
       y: !isStepYAxisUseFitWidth ? this.axesRange?.y?.map(value => ({
         ...value,
         size: {
-          width: Math.max(yMaxWidth, value.size.width),
+          width: yFixWidth || Math.max(yMaxWidth, value.size.width),
           height: value.size.height,
         },
       })) : this.axesRange?.y,

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

@@ -108,6 +108,7 @@ export const AXIS_OPTION = {
     fitDir: 'right',
     alignToGridLine: false,
     padding: 0,
+    fixWidth: undefined,
   },
   title: {
     use: false,

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

@@ -1,5 +1,6 @@
 import Canvas from '@/components/chart/helpers/helpers.canvas';
 import { defaultsDeep } from 'lodash-es';
+import { truthyNumber } from '@/common/utils';
 import {
   AXIS_OPTION,
   AXIS_UNITS,
@@ -382,7 +383,7 @@ class Scale {
           if (this.type === 'x') {
             labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
             if (options?.brush?.showLabel || !options?.brush) {
-              ctx.fillText(labelText, labelCenter, labelPoint);
+              ctx.fillText(this.checkFixWidth(labelText), labelCenter, labelPoint);
             }
 
             if (!isBlurredLabel
@@ -429,7 +430,7 @@ class Scale {
           } else {
             labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
             if (options?.brush?.showLabel || !options?.brush) {
-              ctx.fillText(labelText, labelPoint, labelCenter);
+              ctx.fillText(this.checkFixWidth(labelText), labelPoint, labelCenter);
             }
 
             if (ix === steps) {
@@ -949,6 +950,21 @@ class Scale {
     ctx.fillText(label, textX, textY);
     ctx.closePath();
   }
+
+  /**
+   * Check if the label width is greater than the fix width
+   * @param {string} value label value
+   * @returns
+   */
+  checkFixWidth(value) {
+    const { fixWidth, fitDir } = this.labelStyle;
+
+    if (truthyNumber(fixWidth) && fixWidth > 0) {
+      return Util.truncateLabelWithEllipsis(value, fixWidth, this.ctx, fitDir);
+    }
+    return value;
+   }
 }
 
+
 export default Scale;

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

@@ -10,14 +10,16 @@ class LinearScale extends Scale {
    *
    * @returns {string} formatted label
    */
+  getTruthyValue(value) {
+    return truthyNumber(value) ? Number(value.toFixed(this.decimalPoint)) : value;
+  }
+
   getLabelFormat(value, data = {}) {
     if (this.formatter) {
-      const formattedLabel = this.formatter(Number(value.toFixed(this.decimalPoint)), {
+      const formattedLabel = this.formatter(this.getTruthyValue(value), {
         ...data,
         prevOriginalValue: data?.prev,
-        prevDecimalPointValue: truthyNumber(data?.prev)
-        ? Number(data?.prev.toFixed(this.decimalPoint))
-        : null,
+        prevDecimalPointValue: this.getTruthyValue(data?.prev),
         currentOriginalValue: value,
         currentDecimalPointValue: Number(value.toFixed(this.decimalPoint)),
       });
@@ -27,9 +29,11 @@ class LinearScale extends Scale {
       }
     }
 
+
     return Util.labelSignFormat(value, this.decimalPoint);
   }
 
+
   /**
    * Calculate interval
    * @param {object} range    range information

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

@@ -223,7 +223,7 @@ class StepScale extends Scale {
         if (this.type === 'x') {
           labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
           const xPoint = alignToGridLine ? labelCenter : labelCenter + (labelGap / 2);
-          ctx.fillText(labelText, xPoint, labelPoint);
+          ctx.fillText(this.checkFixWidth(labelText), xPoint, labelPoint);
 
           if (!isBlurredLabel
             && selectItemOpt?.showLabelTip
@@ -267,7 +267,7 @@ class StepScale extends Scale {
         } else {
           labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
           const yPoint = alignToGridLine ? labelCenter : labelCenter + (labelGap / 2);
-          ctx.fillText(labelText, labelPoint, yPoint);
+          ctx.fillText(this.checkFixWidth(labelText), labelPoint, yPoint);
           drawnLabels.push(labelText);
 
           if (this.showAxisTick) {
@@ -307,13 +307,13 @@ class StepScale extends Scale {
 
         const lastLabelText = this.getLabelFormat(`${lastLabelValue}`, maxWidth);
         if (this.type === 'x') {
-          ctx.fillText(lastLabelText, labelCenter, labelPoint);
+          ctx.fillText(this.checkFixWidth(lastLabelText), labelCenter, labelPoint);
           if (this.showGrid) {
             ctx.moveTo(linePosition, offsetPoint);
             ctx.lineTo(linePosition, offsetCounterPoint);
           }
         } else {
-          ctx.fillText(lastLabelText, labelPoint, labelCenter);
+          ctx.fillText(this.checkFixWidth(lastLabelText), labelPoint, labelCenter);
           if (this.showGrid) {
             ctx.moveTo(offsetPoint, linePosition);
             ctx.lineTo(offsetCounterPoint, linePosition);
@@ -406,6 +406,7 @@ class StepScale extends Scale {
       }
     }
 
+
     return this.labelStyle.fitWidth ? this.fittingString(value, maxWidth) : value;
   }
 

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

@@ -26,6 +26,7 @@ class TimeCategoryScale extends Scale {
       }
     }
 
+
     return dayjs(value).format(this.timeFormat);
   }
 
@@ -231,7 +232,7 @@ class TimeCategoryScale extends Scale {
 
       if (this.type === 'x') {
         labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
-        ctx.fillText(labelText, labelCenter, labelPoint);
+        ctx.fillText(this.checkFixWidth(labelText), labelCenter, labelPoint);
         if (!isBlurredLabel
             && this.options?.selectItem?.showLabelTip
             && hitInfo?.label
@@ -279,7 +280,7 @@ class TimeCategoryScale extends Scale {
         }
       } else {
         labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
-        ctx.fillText(labelText, labelPoint, labelCenter);
+        ctx.fillText(this.checkFixWidth(labelText), labelPoint, labelCenter);
 
         if (this.showAxisTick) {
           ctx.beginPath();
@@ -316,13 +317,13 @@ class TimeCategoryScale extends Scale {
       linePosition = labelCenter + aliasPixel;
 
       if (this.type === 'x') {
-        ctx.fillText(labelLastText, labelCenter, labelPoint);
+        ctx.fillText(this.checkFixWidth(labelLastText), labelCenter, labelPoint);
         if (this.showGrid) {
           ctx.moveTo(linePosition, offsetPoint);
           ctx.lineTo(linePosition, offsetCounterPoint);
         }
       } else {
-        ctx.fillText(labelLastText, labelPoint, labelCenter);
+        ctx.fillText(this.checkFixWidth(labelLastText), labelPoint, labelCenter);
         if (this.showGrid) {
           ctx.moveTo(offsetPoint, linePosition);
           ctx.lineTo(offsetCounterPoint, linePosition);