evui 3.1.38 → 3.1.42

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

@@ -441,38 +441,42 @@ class EvChart {
     let lh = 0;
 
     axesX.forEach((axis, index) => {
-      lw = range.x[index].size.width + labelBuffer.width;
-      lh = range.x[index].size.height + labelBuffer.height;
+      if (axis.labelStyle?.show) {
+        lw = range.x[index].size.width + labelBuffer.width;
+        lh = range.x[index].size.height + labelBuffer.height;
 
-      if (axis.position === 'bottom') {
-        if (lh > labelOffset.bottom) {
-          labelOffset.bottom = lh;
-        }
-      } else if (axis.position === 'top') {
-        if (lh > labelOffset.top) {
-          labelOffset.top = lh;
+        if (axis.position === 'bottom') {
+          if (lh > labelOffset.bottom) {
+            labelOffset.bottom = lh;
+          }
+        } else if (axis.position === 'top') {
+          if (lh > labelOffset.top) {
+            labelOffset.top = lh;
+          }
         }
-      }
 
-      labelOffset.left = (lw / 2) > labelOffset.left ? (lw / 2) : labelOffset.left;
-      labelOffset.right = (lw / 2) > labelOffset.right ? (lw / 2) : labelOffset.right;
+        labelOffset.left = (lw / 2) > labelOffset.left ? (lw / 2) : labelOffset.left;
+        labelOffset.right = (lw / 2) > labelOffset.right ? (lw / 2) : labelOffset.right;
+      }
     });
 
     axesY.forEach((axis, index) => {
-      lw = Math.max(range.y[index].size.width + labelBuffer.width, 42 + labelBuffer.width);
+      if (axis.labelStyle?.show) {
+        lw = Math.max(range.y[index].size.width + labelBuffer.width, 42 + labelBuffer.width);
 
-      if (axis.position === 'left') {
-        if (lw > labelOffset.left) {
-          labelOffset.left = lw;
-        }
-      } else if (axis.position === 'right') {
-        if (lw > labelOffset.right) {
-          labelOffset.right = lw;
+        if (axis.position === 'left') {
+          if (lw > labelOffset.left) {
+            labelOffset.left = lw;
+          }
+        } else if (axis.position === 'right') {
+          if (lw > labelOffset.right) {
+            labelOffset.right = lw;
+          }
         }
-      }
 
-      labelOffset.top = (lh / 2) > labelOffset.top ? (lh / 2) : labelOffset.top;
-      labelOffset.bottom = (lh / 2) > labelOffset.bottom ? (lh / 2) : labelOffset.bottom;
+        labelOffset.top = (lh / 2) > labelOffset.top ? (lh / 2) : labelOffset.top;
+        labelOffset.bottom = (lh / 2) > labelOffset.bottom ? (lh / 2) : labelOffset.bottom;
+      }
     });
 
     return labelOffset;

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

@@ -1,5 +1,4 @@
 import { defaultsDeep } from 'lodash-es';
-import { numberWithComma } from '@/common/utils';
 import { COLOR, BAR_OPTION } from '../helpers/helpers.constant';
 import Canvas from '../helpers/helpers.canvas';
 import Util from '../helpers/helpers.util';
@@ -333,67 +332,76 @@ class Bar {
    */
   drawValueLabels({ context, data, positions, isHighlight }) {
     const isHorizontal = this.isHorizontal;
-    const showValue = this.showValue;
+    const { fontSize, textColor, align, formatter } = this.showValue;
     const { x, y, w, h } = positions;
     const ctx = context;
 
     ctx.save();
     ctx.beginPath();
 
+    ctx.font = `normal normal normal ${fontSize}px Roboto`;
+    ctx.fillStyle = textColor;
+    ctx.lineWidth = 1;
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = isHorizontal && align !== 'center' ? 'left' : 'center';
+
     let value;
     const isStacked = !isNaN(data.o);
     if (data.o === null) {
-      value = numberWithComma(isHorizontal ? data.x : data.y);
+      value = isHorizontal ? data.x : data.y;
     } else if (isStacked) {
-      value = numberWithComma(data.o);
+      value = data.o;
     } else {
       value = '';
     }
 
-    ctx.font = `normal normal normal ${showValue.fontSize}px Roboto`;
-    ctx.fillStyle = showValue.textColor;
-    ctx.lineWidth = 1;
-    ctx.textBaseline = 'middle';
-    ctx.textAlign = isHorizontal && showValue.align !== 'center' ? 'left' : 'center';
+    let formattedTxt;
+    if (formatter) {
+      formattedTxt = formatter(value);
+    }
+
+    if (!formatter || typeof formattedTxt !== 'string') {
+      formattedTxt = Util.labelSignFormat(value);
+    }
 
-    const vw = Math.round(ctx.measureText(value).width);
-    const vh = showValue.fontSize + 4;
+    const vw = Math.round(ctx.measureText(formattedTxt).width);
+    const vh = fontSize + 4;
     const minXPos = x + 10;
     const minYPos = y - 10;
     const centerX = x + (w / 2) <= minXPos ? minXPos : x + (w / 2);
     const centerY = y + (h / 2) >= minYPos ? minYPos : y + (h / 2);
     const centerYHorizontal = isHighlight ? y + (h / 2) : y - (h / 2);
 
-    switch (showValue.align) {
+    switch (align) {
       case 'start':
         if (isHorizontal) {
-          ctx.fillText(value, minXPos, centerYHorizontal);
+          ctx.fillText(formattedTxt, minXPos, centerYHorizontal);
         } else {
-          ctx.fillText(value, centerX, minYPos);
+          ctx.fillText(formattedTxt, centerX, minYPos);
         }
         break;
       case 'center':
         if (isHorizontal) {
-          ctx.fillText(value, centerX, centerYHorizontal);
+          ctx.fillText(formattedTxt, centerX, centerYHorizontal);
         } else {
-          ctx.fillText(value, centerX, centerY);
+          ctx.fillText(formattedTxt, centerX, centerY);
         }
         break;
       case 'out':
         if (isHorizontal) {
-          ctx.fillText(value, minXPos + w, centerYHorizontal);
+          ctx.fillText(formattedTxt, minXPos + w, centerYHorizontal);
         } else {
-          ctx.fillText(value, centerX, y + h - (vh / 2));
+          ctx.fillText(formattedTxt, centerX, y + h - (vh / 2));
         }
         break;
       case 'end':
       default:
         if (isHorizontal) {
           const xPos = x + w - (vw * 2);
-          ctx.fillText(value, xPos <= minXPos ? minXPos : xPos, centerYHorizontal);
+          ctx.fillText(formattedTxt, xPos <= minXPos ? minXPos : xPos, centerYHorizontal);
         } else {
           const yPos = y + h + vh;
-          ctx.fillText(value, centerX, yPos >= minYPos ? minYPos : yPos);
+          ctx.fillText(formattedTxt, centerX, yPos >= minYPos ? minYPos : yPos);
         }
         break;
     }

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

@@ -303,6 +303,19 @@ class Line {
 
     return item;
   }
+
+  /**
+   * Returns items in range
+   * @param {object} params  range values
+   *
+   * @returns {array}
+   */
+  findItems({ xsp, width }) {
+    console.log(this.data);
+    const xep = xsp + width;
+
+    return this.data.filter(seriesData => (xsp - 1 <= seriesData.xp) && (seriesData.xp <= xep + 1));
+  }
 }
 
 export default Line;

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

@@ -58,6 +58,7 @@ export const BAR_OPTION = {
     use: false,
     fontSize: 12,
     textColor: '#000000',
+    formatter: null,
   },
 };
 
@@ -86,6 +87,7 @@ export const AXIS_OPTION = {
   interval: null,
   decimalPoint: null,
   labelStyle: {
+    show: true,
     fontSize: 12,
     color: '#25262E',
     fontFamily: 'Roboto',
@@ -95,6 +97,31 @@ export const AXIS_OPTION = {
   },
 };
 
+export const PLOT_LINE_OPTION = {
+  color: '#FF0000',
+  lineWidth: 1,
+};
+
+export const PLOT_LINE_LABEL_OPTION = {
+  show: false,
+  fontSize: 12,
+  fontColor: '#FF0000',
+  fillColor: '#FFFFFF',
+  lineColor: '#FF0000',
+  lineWidth: 0,
+  fontWeight: 400,
+  fontFamily: 'Roboto',
+  verticalAlign: 'middle',
+  textAlign: 'center',
+  textOverflow: 'none', // 'none', 'ellipsis'
+  maxWidth: null,
+};
+
+export const PLOT_BAND_OPTION = {
+  color: '#FAE59D',
+};
+
+
 export const TIME_INTERVALS = {
   millisecond: {
     common: true,

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

@@ -133,11 +133,11 @@ export default {
   /**
    * Create sign format with number
    * @param {number} value           graph value
-   * @param {string} decimalPoint    decimal point
+   * @param {number} decimalPoint    decimal point
    *
    * @returns {string} signed value
    */
-  labelSignFormat(value, decimalPoint) {
+  labelSignFormat(value, decimalPoint = 0) {
     const quad = quadrillion(1);
     const trill = trillion(1);
     const billi = billions(1);

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

@@ -146,8 +146,8 @@ const modules = {
     this.onMouseDown = (e) => {
       const { dragSelection, type } = this.options;
 
-      if (dragSelection.use && type === 'scatter') {
-        this.dragStart(e);
+      if (dragSelection.use && (type === 'scatter' || type === 'line')) {
+        this.dragStart(e, type);
       }
     };
 
@@ -174,7 +174,7 @@ const modules = {
    *
    * @returns {undefined}
    */
-  dragStart(evt) {
+  dragStart(evt, type) {
     const [offsetX, offsetY] = this.getMousePosition(evt);
     const chartRect = this.chartRect;
     const labelOffset = this.labelOffset;
@@ -231,9 +231,9 @@ const modules = {
       }
 
       dragInfo.xsp = Math.min(xcp, xep);
-      dragInfo.ysp = Math.min(ycp, yep);
+      dragInfo.ysp = type === 'scatter' ? Math.min(ycp, yep) : aRange.y1;
       dragInfo.width = Math.ceil(Math.abs(xep - xcp));
-      dragInfo.height = Math.ceil(Math.abs(yep - ycp));
+      dragInfo.height = type === 'scatter' ? Math.ceil(Math.abs(yep - ycp)) : aRange.y2 - aRange.y1;
 
       this.overlayClear();
       this.drawSelectionArea(dragInfo);

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

@@ -313,15 +313,18 @@ const modules = {
 
     let chartRect;
     const title = opt?.title?.show ? opt?.title?.height : 0;
-    const top = title + opt?.legend?.height;
+    const positionTop = title + opt?.legend?.height;
+    const { top = 0, bottom = 0, left = 0, right = 0 } = opt?.legend?.padding ?? {};
 
     if (!wrapperStyle || !legendStyle) {
       return;
     }
 
+    boxStyle.padding = `${top}px ${right}px ${bottom}px ${left}px`;
+
     switch (position) {
       case 'top':
-        wrapperStyle.padding = `${top}px 0 0 0`;
+        wrapperStyle.padding = `${positionTop}px 0 0 0`;
         chartRect = this.chartDOM.getBoundingClientRect();
 
         boxStyle.width = '100%';
@@ -335,7 +338,7 @@ const modules = {
         legendStyle.width = `${chartRect.width}px`;
         legendStyle.height = `${opt.legend.height + 4}px`; // 4 resize bar size
 
-        resizeStyle.top = `${top}px`;
+        resizeStyle.top = `${positionTop}px`;
         resizeStyle.right = '';
         resizeStyle.bottom = '';
         resizeStyle.left = '';

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

@@ -301,8 +301,21 @@ const modules = {
       ctx.save();
 
       // 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 (!opt.formatter || typeof formattedTxt !== 'string') {
+        formattedTxt = numberWithComma(value);
+      }
+
       ctx.textAlign = 'right';
-      ctx.fillText(numberWithComma(value), this.tooltipDOM.offsetWidth - boxPadding.r, itemY);
+      ctx.fillText(formattedTxt, this.tooltipDOM.offsetWidth - boxPadding.r, itemY);
       ctx.restore();
       ctx.closePath();