evui 3.3.10 → 3.3.13

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

@@ -1,5 +1,6 @@
 import { numberWithComma } from '@/common/utils';
 import debounce from '@/common/utils.debounce';
+import dayjs from 'dayjs';
 import Canvas from '../helpers/helpers.canvas';
 import Util from '../helpers/helpers.util';
 
@@ -310,13 +311,6 @@ 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,
@@ -342,18 +336,7 @@ const modules = {
 
     ctx.restore();
 
-    // 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';
+    this.setTooltipDOMStyle(opt);
   },
 
   /**
@@ -373,12 +356,13 @@ const modules = {
     const boxPadding = { t: 8, b: 8, r: 20, l: 16 };
     const isHorizontal = this.options.horizontal;
     const opt = this.options.tooltip;
+    let xValue = '';
+    let yValue = '';
 
     // 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 (this.axesX.length) {
+      xValue = this.axesX[hitAxis.x].getLabelFormat(hitItem.x);
+      this.tooltipHeaderDOM.textContent = xValue;
     }
 
     if (opt.textOverflow) {
@@ -412,23 +396,212 @@ const modules = {
       ctx.fillStyle = hitColor;
     }
 
-    // 1. Draw series color
+    // 1. Draw value color
     ctx.fillRect(itemX - 4, itemY - 12, 12, 12);
     ctx.fillStyle = opt.fontColor;
 
-    // 2. Draw series name
+    // 2. Draw value y names
     ctx.textBaseline = 'Bottom';
-    ctx.fillText(itemValue, itemX + COLOR_MARGIN, itemY);
+    if (this.axesY.length) {
+      yValue = this.axesY[hitAxis.y].getLabelFormat(hitItem.y);
+      ctx.fillText(yValue, itemX + COLOR_MARGIN, itemY);
+    }
+
+    // 3. Draw value
+    let formattedTxt;
+    if (opt.formatter) {
+      formattedTxt = opt.formatter({
+        x: xValue,
+        y: yValue,
+        value: itemValue,
+      });
+    }
+
+    if ((!opt.formatter || typeof formattedTxt !== 'string') && itemValue !== 'error') {
+      formattedTxt = numberWithComma(itemValue);
+    } else {
+      formattedTxt = itemValue;
+    }
+
+    ctx.textAlign = 'right';
+    ctx.fillText(formattedTxt, this.tooltipDOM.offsetWidth - boxPadding.r, itemY);
     ctx.closePath();
 
-    // set tooltipDOM's style
+    this.setTooltipDOMStyle(opt);
+  },
+
+  /**
+   *
+   * @param hitInfo
+   * @param context
+   */
+  drawTooltipForScatter(hitInfo, context) {
+    const ctx = context;
+    const items = hitInfo.items;
+    const [, maxValue] = hitInfo.maxTip;
+    const seriesKeys = this.alignSeriesList(Object.keys(items));
+    const boxPadding = { t: 8, b: 8, r: 8, l: 8 };
+    const opt = this.options.tooltip;
+    const xAxisOpt = this.options.axesX[0];
+
+    let x = 2;
+    let y = 2;
+
+    x += Util.aliasPixel(x);
+    y += Util.aliasPixel(y);
+
+    ctx.save();
+    ctx.scale(this.pixelRatio, this.pixelRatio);
+
+    if (this.tooltipBodyDOM.style.overflowY === 'auto') {
+      boxPadding.r += SCROLL_WIDTH;
+    }
+
+    x += boxPadding.l;
+    y += boxPadding.t;
+
+    ctx.font = FONT_STYLE;
+
+    const seriesList = [];
+    seriesKeys.forEach((seriesName) => {
+      seriesList.push({
+        data: items[seriesName].data,
+        color: items[seriesName].color,
+        name: items[seriesName].name,
+      });
+    });
+
+    if (opt.sortByValue) {
+      seriesList.sort((a, b) => {
+        let prev = a.data.o;
+        let next = b.data.o;
+
+        if (prev === null || prev === undefined) {
+          prev = a.data.y;
+        }
+
+        if (next === null || next === undefined) {
+          next = b.data.y;
+        }
+
+        return next - prev;
+      });
+    }
+
+    let textLineCnt = 1;
+    for (let ix = 0; ix < seriesList.length; ix++) {
+      const gdata = seriesList[ix].data;
+      const color = seriesList[ix].color;
+      const name = seriesList[ix].name;
+      const xValue = gdata.x;
+      let yValue;
+      if (gdata.o === null) {
+        yValue = gdata.y;
+      } else if (!isNaN(gdata.o)) {
+        yValue = gdata.o;
+      }
+
+      let itemX = x + 4;
+      let itemY = y + (textLineCnt * TEXT_HEIGHT);
+      itemX += Util.aliasPixel(itemX);
+      itemY += Util.aliasPixel(itemY);
+
+      ctx.beginPath();
+
+      if (typeof color !== 'string') {
+        ctx.fillStyle = Canvas.createGradient(
+          ctx,
+          false,
+          { x: itemX - 4, y: itemY, w: 12, h: -12 },
+          color,
+        );
+      } else {
+        ctx.fillStyle = color;
+      }
+
+      // 1. Draw series color
+      ctx.fillRect(itemX - 4, itemY - 12, 12, 12);
+      ctx.fillStyle = opt.fontColor;
+
+      // 2. Draw series name
+      ctx.textBaseline = 'Bottom';
+      const seriesNameSpaceWidth = opt.maxWidth - Math.round(ctx.measureText(maxValue).width)
+        - boxPadding.l - boxPadding.r - COLOR_MARGIN - VALUE_MARGIN;
+      const xPos = itemX + COLOR_MARGIN;
+      const yPos = itemY;
+
+      if (seriesNameSpaceWidth > ctx.measureText(name).width) { // draw normally
+        ctx.fillText(name, xPos, yPos);
+      } else if (opt.textOverflow === 'wrap') { // draw with wrap
+        let line = '';
+        let yPosWithWrap = yPos;
+
+        for (let jx = 0; jx < name.length; jx++) {
+          const char = name[jx];
+          const temp = `${line}${char}`;
+
+          if (ctx.measureText(temp).width > seriesNameSpaceWidth) {
+            ctx.fillText(line, xPos, yPosWithWrap);
+            line = char;
+            textLineCnt += 1;
+            yPosWithWrap += TEXT_HEIGHT;
+          } else {
+            line = temp;
+          }
+        }
+        ctx.fillText(line, xPos, yPosWithWrap);
+      } else { // draw with ellipsis
+        const shortSeriesName = Util.truncateLabelWithEllipsis(name, seriesNameSpaceWidth, ctx);
+        ctx.fillText(shortSeriesName, xPos, yPos);
+      }
+
+      ctx.save();
+
+      // 3. Draw value
+      let formattedTxt;
+      if (opt.formatter) {
+        formattedTxt = opt.formatter({
+          x: xValue,
+          y: yValue,
+          name,
+        });
+      }
+
+      if (!opt.formatter || typeof formattedTxt !== 'string') {
+        const formattedXValue = xAxisOpt.type === 'time'
+          ? dayjs(xValue).format(xAxisOpt.timeFormat)
+          : numberWithComma(xValue);
+        const formattedYValue = numberWithComma(yValue);
+        formattedTxt = `${formattedXValue}, ${formattedYValue}`;
+      }
+
+      ctx.textAlign = 'right';
+      ctx.fillText(formattedTxt, this.tooltipDOM.offsetWidth - boxPadding.r, itemY);
+      ctx.restore();
+      ctx.closePath();
+
+      // 4. add lineSpacing
+      y += LINE_SPACING;
+      textLineCnt += 1;
+    }
+
+    ctx.restore();
+
+    this.setTooltipDOMStyle(opt);
+  },
+
+  /**
+   * set style properties on tooltip DOM
+   * @param tooltipOptions
+   */
+  setTooltipDOMStyle(tooltipOptions) {
     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;
+    this.tooltipDOM.style.backgroundColor = tooltipOptions.backgroundColor;
+    this.tooltipDOM.style.border = `1px solid ${tooltipOptions.borderColor}`;
+    this.tooltipDOM.style.color = tooltipOptions.fontColor;
 
-    if (opt.useShadow) {
-      const shadowColor = `rgba(0, 0, 0, ${opt.shadowOpacity})`;
+    if (tooltipOptions.useShadow) {
+      const shadowColor = `rgba(0, 0, 0, ${tooltipOptions.shadowOpacity})`;
       this.tooltipDOM.style.boxShadow = `2px 2px 2px ${shadowColor}`;
     }
 

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

@@ -164,7 +164,7 @@ class Scale {
    *
    * @returns {undefined}
    */
-  draw(chartRect, labelOffset, stepInfo, hitInfo, selectLabelInfo) {
+  draw(chartRect, labelOffset, stepInfo, hitInfo) {
     const ctx = this.ctx;
     const options = this.options;
     const aPos = {
@@ -239,22 +239,21 @@ 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);
+        const labelColor = this.labelStyle.color;
+        let defaultOpacity = 1;
+
+        if (Util.getColorStringType(labelColor) === 'RGBA') {
+          defaultOpacity = Util.getOpacity(labelColor);
+        }
+
+        ctx.fillStyle = Util.colorStringToRgba(labelColor, defaultOpacity);
 
         let labelPoint;
 
         if (this.type === 'x') {
           labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
           ctx.fillText(labelText, labelCenter, labelPoint);
-          if (!isBlurredLabel
-              && options?.selectItem?.showLabelTip
-              && hitInfo?.label
-              && !this.options?.horizontal) {
+          if (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

@@ -7,6 +7,7 @@ class StepScale extends Scale {
   constructor(type, opt, ctx, labels, options) {
     super(type, opt, ctx, options);
     this.labels = labels;
+    this.rangeMode = opt.rangeMode;
   }
 
   /**
@@ -126,11 +127,20 @@ class StepScale extends Scale {
           && (this.options.horizontal === (this.type === 'y'))
           && selectLabelInfo?.dataIndex?.length
           && !selectLabelInfo?.dataIndex?.includes(index);
-        ctx.fillStyle = Util.colorStringToRgba(this.labelStyle.color, isBlurredLabel ? 0.1 : 1);
+
+        const labelColor = this.labelStyle.color;
+        let defaultOpacity = 1;
+
+        if (Util.getColorStringType(labelColor) === 'RGBA') {
+          defaultOpacity = Util.getOpacity(labelColor);
+        }
+
+        ctx.fillStyle = Util.colorStringToRgba(labelColor, isBlurredLabel ? 0.1 : defaultOpacity);
 
         if (this.type === 'x') {
           labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
-          ctx.fillText(labelText, labelCenter + (labelGap / 2), labelPoint);
+          const xPoint = this.rangeMode ? labelCenter : labelCenter + (labelGap / 2);
+          ctx.fillText(labelText, xPoint, labelPoint);
 
           if (!isBlurredLabel
               && this.options?.selectItem?.showLabelTip
@@ -160,7 +170,8 @@ class StepScale extends Scale {
           }
         } else {
           labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
-          ctx.fillText(labelText, labelPoint, labelCenter + (labelGap / 2));
+          const yPoint = this.rangeMode ? labelCenter : labelCenter + (labelGap / 2);
+          ctx.fillText(labelText, labelPoint, yPoint);
 
           if (index > 0 && this.showGrid) {
             ctx.moveTo(offsetPoint, linePosition);
@@ -170,6 +181,30 @@ class StepScale extends Scale {
         ctx.stroke();
       });
 
+      if (this.rangeMode) {
+        let labelLastText = +labels[labels.length - 1] + (+labels[1] - +labels[0]);
+        if (isNaN(labelLastText)) {
+          labelLastText = 'Max';
+        }
+        labelCenter = Math.round(startPoint + (labelGap * labels.length));
+        linePosition = labelCenter + aliasPixel;
+
+        if (this.type === 'x') {
+          ctx.fillText(labelLastText, labelCenter, labelPoint);
+          if (this.showGrid) {
+            ctx.moveTo(linePosition, offsetPoint);
+            ctx.lineTo(linePosition, offsetCounterPoint);
+          }
+        } else {
+          ctx.fillText(labelLastText, labelPoint, labelCenter);
+          if (this.showGrid) {
+            ctx.moveTo(offsetPoint, linePosition);
+            ctx.lineTo(offsetCounterPoint, linePosition);
+          }
+        }
+        ctx.stroke();
+      }
+
       ctx.closePath();
     }
 

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

@@ -164,7 +164,7 @@ class TimeCategoryScale extends Scale {
     }
 
     const graphGap = (endPoint - startPoint) / (labels.length || 1);
-    if (this.categoryMode) {
+    if (this.categoryMode && !this.rangeMode) {
       startPoint += Math.ceil(graphGap / 2) - 2;
     }
 
@@ -176,6 +176,7 @@ class TimeCategoryScale extends Scale {
     ctx.strokeStyle = this.gridLineColor;
 
     let labelText;
+    let labelPoint;
     for (let ix = 0; ix < oriSteps; ix += count) {
       ticks[ix] = axisMin + (ix * stepValue);
 
@@ -188,9 +189,15 @@ class TimeCategoryScale extends Scale {
         && (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;
+      const labelColor = this.labelStyle.color;
+      let defaultOpacity = 1;
+
+      if (Util.getColorStringType(labelColor) === 'RGBA') {
+        defaultOpacity = Util.getOpacity(labelColor);
+      }
+
+      ctx.fillStyle = Util.colorStringToRgba(labelColor, isBlurredLabel ? 0.1 : defaultOpacity);
 
       if (this.type === 'x') {
         labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
@@ -235,6 +242,31 @@ class TimeCategoryScale extends Scale {
       ctx.stroke();
     }
 
+    if (this.categoryMode && this.rangeMode && (count * steps) === oriSteps) {
+      const diffTime = dayjs(labels[1]).diff(dayjs(labels[0]));
+      const labelLastText = this.getLabelFormat(
+        dayjs(labels[labels.length - 1] + diffTime),
+      );
+
+      labelCenter = Math.round(startPoint + (graphGap * labels.length));
+      linePosition = labelCenter + aliasPixel;
+
+      if (this.type === 'x') {
+        ctx.fillText(labelLastText, labelCenter, labelPoint);
+        if (this.showGrid) {
+          ctx.moveTo(linePosition, offsetPoint);
+          ctx.lineTo(linePosition, offsetCounterPoint);
+        }
+      } else {
+        ctx.fillText(labelLastText, labelPoint, labelCenter);
+        if (this.showGrid) {
+          ctx.moveTo(offsetPoint, linePosition);
+          ctx.lineTo(offsetCounterPoint, linePosition);
+        }
+      }
+      ctx.stroke();
+    }
+
     ctx.closePath();
   }
 }

package/src/components/chart/uses.js

@@ -81,6 +81,7 @@ const DEFAULT_OPTIONS = {
     indicatorColor: '#000000',
     tipBackground: '#000000',
     tipTextColor: '#FFFFFF',
+    useSeriesOpacity: false,
   },
   selectLabel: {
     use: false,
@@ -99,6 +100,17 @@ const DEFAULT_OPTIONS = {
     fillColor: '#38ACEC',
     opacity: 0.65,
   },
+  heatMapColor: {
+    min: '#FFFFFF',
+    max: '#0052FF',
+    categoryCnt: 5,
+    stroke: {
+      show: false,
+      color: '#FFFFFF',
+      lineWidth: 1,
+    },
+    error: '#FF0000',
+  },
 };
 
 const DEFAULT_DATA = {