evui 3.3.12 → 3.3.13

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

@@ -311,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,
@@ -363,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) {
@@ -402,13 +396,35 @@ 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();
 
     this.setTooltipDOMStyle(opt);

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;
   }
 
   /**
@@ -138,7 +139,8 @@ class StepScale extends Scale {
 
         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
@@ -168,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);
@@ -178,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);
 
@@ -198,8 +199,6 @@ class TimeCategoryScale extends Scale {
 
       ctx.fillStyle = Util.colorStringToRgba(labelColor, isBlurredLabel ? 0.1 : defaultOpacity);
 
-      let labelPoint;
-
       if (this.type === 'x') {
         labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
         ctx.fillText(labelText, labelCenter, labelPoint);
@@ -243,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

@@ -100,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 = {

package/src/components/grid/Grid.vue

@@ -605,8 +605,13 @@ export default {
     );
     watch(
       () => props.checked,
-      (checkedList) => {
-        checkInfo.checkedRows = checkedList;
+      (value) => {
+        checkInfo.checkedRows = value;
+      },
+    );
+    watch(
+      () => checkInfo.checkedRows,
+      (value) => {
         checkInfo.isHeaderChecked = false;
         let store = stores.store;
         if (pageInfo.isClientPaging) {
@@ -614,20 +619,27 @@ export default {
         }
         if (store.length) {
           store.forEach((row) => {
-            row[ROW_CHECK_INDEX] = checkedList.includes(row[ROW_DATA_INDEX]);
+            row[ROW_CHECK_INDEX] = value.includes(row[ROW_DATA_INDEX]);
           });
-          checkInfo.isHeaderChecked = checkedList.length === store.length;
+          checkInfo.isHeaderChecked = value.length === store.length;
         }
         updateVScroll();
       },
     );
     watch(
       () => props.selected,
-      (selectedList) => {
+      (value) => {
+        if (selectInfo.useSelect) {
+          selectInfo.selectedRow = value;
+        }
+      },
+    );
+    watch(
+      () => selectInfo.selectedRow,
+      (value) => {
         if (selectInfo.useSelect) {
-          selectInfo.selectedRow = selectedList;
           stores.store.forEach((row) => {
-            row[ROW_SELECT_INDEX] = selectInfo.selectedRow.includes(row[ROW_DATA_INDEX]);
+            row[ROW_SELECT_INDEX] = value.includes(row[ROW_DATA_INDEX]);
           });
           updateVScroll();
         }

package/src/components/treeGrid/TreeGrid.vue

@@ -457,16 +457,21 @@ export default {
 
     watch(
       () => props.checked,
-      (checkedList) => {
+      (value) => {
+        checkInfo.checkedRows = value;
+      },
+    );
+    watch(
+      () => checkInfo.checkedRows,
+      (value) => {
+        checkInfo.isHeaderChecked = false;
         let store = stores.store;
         if (pageInfo.isClientPaging) {
           store = getPagingData();
         }
-        checkInfo.checkedRows = checkedList;
-        checkInfo.isHeaderChecked = false;
         if (store.length) {
           store.forEach((row) => {
-            row.checked = !!checkedList.find(c => c.index === row.index);
+            row.checked = !!value.find(checkedRow => checkedRow.index === row.index);
           });
           checkHeader(store);
         }
@@ -475,12 +480,21 @@ export default {
     );
     watch(
       () => props.selected,
-      (selectedList) => {
-        selectInfo.selectedRow = selectedList;
-        stores.store.forEach((row) => {
-          row.selected = !!selectInfo.selectedRow.find(s => s.index === row.index);
-        });
-        updateVScroll();
+      (value) => {
+        if (selectInfo.useSelect) {
+          selectInfo.selectedRow = value;
+        }
+      },
+    );
+    watch(
+      () => selectInfo.selectedRow,
+      (value) => {
+        if (selectInfo.useSelect) {
+          stores.store.forEach((row) => {
+            row.selected = !!value.find(selectedRow => selectedRow.index === row.index);
+          });
+          updateVScroll();
+        }
       }, { deep: true },
     );
     watch(