evui 3.4.89 → 3.4.91

package/package.json

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

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

@@ -855,14 +855,24 @@ const modules = {
             if (ldata !== null && ldata !== undefined) {
               const g = isHorizontal ? data.o || data.x : data.o || data.y;
 
-              if (series.stackIndex) {
+              if (series.stackIndex != null) {
                 acc += !isNaN(data.o) ? data.o : 0;
                 useStack = true;
               } else {
                 acc += data.y;
               }
 
-              if (maxValue === null || maxValue <= g) {
+
+              if (maxType === 'bar' && useStack) {
+                if (item.hit) {
+                  maxValue = g;
+                  maxSeriesID = seriesID;
+                  maxIndex = index;
+                  maxLabel = ldata;
+                  maxValuePos = lp;
+                  maxType = series.type;
+                }
+              } else if (maxValue === null || maxValue <= g) {
                 maxValue = g;
                 maxSeriesID = seriesID;
                 maxLabel = ldata;

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

@@ -114,18 +114,16 @@ const modules = {
       const selectItem = this.options.selectItem;
       const args = { e };
 
-      if (selectItem.use) {
-        const offset = this.getMousePosition(e);
-        const hitInfo = this.getItemByPosition(offset, selectItem.useApproximateValue);
-
+      const offset = this.getMousePosition(e);
+      const hitInfo = this.getItemByPosition(offset, selectItem.useApproximateValue);
 
-        if (hitInfo.label !== null) {
-          this.render(hitInfo);
-        }
 
-        ({ label: args.label, value: args.value, sId: args.seriesId, acc: args.acc } = hitInfo);
+      if (hitInfo.label !== null) {
+        this.render(hitInfo);
       }
 
+      ({ label: args.label, value: args.value, sId: args.seriesId, acc: args.acc } = hitInfo);
+
       if (typeof this.listeners['dbl-click'] === 'function') {
         this.listeners['dbl-click'](args);
       }
@@ -177,6 +175,7 @@ const modules = {
       };
 
       const setSelectedLabelInfo = (targetAxis) => {
+        const itemHitInfo = this.getItemByPosition(offset, false);
         const {
           labelIndex: clickedLabelIndex,
         } = this.getLabelInfoByPosition(offset, targetAxis);
@@ -195,10 +194,14 @@ const modules = {
           eventTarget: 'label',
           ...cloneDeep(this.defaultSelectInfo),
         };
+        args.label = itemHitInfo.label;
+        args.dataIndex = itemHitInfo.maxIndex;
       };
 
       const setSelectedSeriesInfo = () => {
+        const itemHitInfo = this.getItemByPosition(offset, false);
         const hitInfo = this.getSeriesInfoByPosition(offset);
+
         if (hitInfo.sId !== null) {
           const allSelectedList = this.updateSelectedSeriesInfo(hitInfo.sId);
           this.defaultSelectInfo.seriesId = allSelectedList.seriesId;
@@ -207,6 +210,8 @@ const modules = {
             eventTarget: 'series',
             ...cloneDeep(this.defaultSelectInfo),
           };
+          args.label = itemHitInfo.label;
+          args.dataIndex = itemHitInfo.maxIndex;
         }
       };
 
@@ -770,16 +775,23 @@ const modules = {
           }
 
           if (gdata !== null && gdata !== undefined) {
-            const sName = series.name;
-            const sw = ctx ? ctx.measureText(sName).width : 1;
+            const formattedSeriesName = this.getFormattedTooltipLabel({
+              dataId: series.id,
+              seriesId: sId,
+              seriesName: series.name,
+              itemData: item.data,
+             });
+            const sw = ctx ? ctx.measureText(formattedSeriesName).width : 1;
 
-            item.name = sName;
+            item.id = series.id;
+            item.name = formattedSeriesName;
             item.axis = { x: series.xAxisIndex, y: series.yAxisIndex };
             items[sId] = item;
 
             const formattedTxt = this.getFormattedTooltipValue({
+              dataId: series.id,
               seriesId: sId,
-              seriesName: sName,
+              seriesName: formattedSeriesName,
               value: gdata,
               itemData: item.data,
             });
@@ -787,7 +799,7 @@ const modules = {
             item.data.formatted = formattedTxt;
 
             if (maxsw < sw) {
-              maxs = sName;
+              maxs = formattedSeriesName;
               maxsw = sw;
             }
 
@@ -814,15 +826,42 @@ const modules = {
     return { items, hitId, maxTip: [maxs, maxv], maxHighlight };
   },
 
+  /**
+   * get formatted label for tooltip
+   * @param dataId
+   * @param seriesId
+   * @param seriesName
+   * @param itemData
+   * @returns {string}
+   */
+  getFormattedTooltipLabel({ dataId, seriesId, seriesName, itemData }) {
+    const opt = this.options;
+    const tooltipOpt = opt.tooltip;
+    const tooltipLabelFormatter = tooltipOpt?.formatter?.label;
+
+    let formattedLabel = seriesName;
+    if (tooltipLabelFormatter) {
+      formattedLabel = tooltipLabelFormatter({
+        dataId,
+        seriesId,
+        seriesName,
+        itemData,
+      });
+    }
+
+    return formattedLabel;
+  },
+
   /**
    * get formatted value for tooltip
+   * @param dataId
    * @param seriesId
    * @param seriesName
    * @param value
    * @param itemData
    * @returns {string}
    */
-  getFormattedTooltipValue({ seriesId, seriesName, value, itemData }) {
+  getFormattedTooltipValue({ dataId, seriesId, seriesName, value, itemData }) {
     const opt = this.options;
     const isHorizontal = !!opt.horizontal;
     const tooltipOpt = opt.tooltip;
@@ -838,6 +877,7 @@ const modules = {
           name: seriesName,
           percentage: itemData?.percentage,
           seriesId,
+          dataId,
         });
       } else if (opt.type === 'heatMap') {
         formattedTxt = tooltipValueFormatter({
@@ -845,6 +885,7 @@ const modules = {
           y: itemData?.y,
           value: value > -1 ? value : 'error',
           seriesId,
+          dataId,
         });
       } else {
         formattedTxt = tooltipValueFormatter({
@@ -852,6 +893,7 @@ const modules = {
           y: isHorizontal ? itemData?.y : value,
           name: seriesName,
           seriesId,
+          dataId,
         });
       }
     }
@@ -893,9 +935,17 @@ const modules = {
           ),
         );
 
-        const formattedValue = this.getFormattedTooltipValue({
+        const formattedSeriesName = this.getFormattedTooltipLabel({
+          dataId: series.id,
           seriesId: sId,
           seriesName: series.name,
+          itemData: hasData,
+         });
+
+        const formattedValue = this.getFormattedTooltipValue({
+          dataId: series.id,
+          seriesId: sId,
+          seriesName: formattedSeriesName,
           value: hasData?.o,
           itemData: hasData,
         });
@@ -904,7 +954,7 @@ const modules = {
           const item = {};
           item.color = series.color;
           item.hit = false;
-          item.name = series.name;
+          item.name = formattedSeriesName;
           item.axis = { x: series.xAxisIndex, y: series.yAxisIndex };
           item.index = isHorizontal ? series.yAxisIndex : series.xAxisIndex;
           item.data = hasData;
@@ -914,9 +964,9 @@ const modules = {
         }
 
         const maxSeriesNameWidth = ctx ? ctx.measureText(maxSeriesName).width : 1;
-        const seriesNameWidth = ctx ? ctx.measureText(series.name).width : 1;
+        const seriesNameWidth = ctx ? ctx.measureText(formattedSeriesName).width : 1;
         if (maxSeriesNameWidth < seriesNameWidth) {
-          maxSeriesName = series.name;
+          maxSeriesName = formattedSeriesName;
         }
 
         const maxValueWidth = ctx ? ctx.measureText(maxValueTxt).width : 1;

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

@@ -293,9 +293,11 @@ const modules = {
     const seriesList = [];
     seriesKeys.forEach((seriesName) => {
       seriesList.push({
+        id: seriesName,
         data: items[seriesName].data,
         color: items[seriesName].color,
         name: items[seriesName].name,
+        dataId: items[seriesName].id,
       });
     });
 
@@ -342,11 +344,18 @@ const modules = {
         ctx.fillStyle = color;
       }
 
+      const curTooltipInfo = {
+        id: seriesList[ix].id,
+        name: seriesList[ix].name,
+        value: valueText,
+        dataId: seriesList[ix].dataId,
+      };
+
       // 1. Draw series color
       this.drawSeriesColorShape(ctx, opt.colorShape, { x: itemX, y: itemY });
 
       // 2. Draw series name
-      ctx.fillStyle = opt.fontColor?.label ?? opt.fontColor;
+      ctx.fillStyle = typeof opt.fontColor.label === 'function' ? opt.fontColor.label(curTooltipInfo) : opt.fontColor.label ?? opt.fontColor;
       ctx.textBaseline = 'Bottom';
       const seriesNameSpaceWidth = opt.maxWidth - Math.round(ctx.measureText(maxValue).width)
         - boxPadding.l - boxPadding.r - seriesColorMarginRight - VALUE_MARGIN;
@@ -381,7 +390,7 @@ const modules = {
       ctx.save();
 
       // 3. Draw value
-      ctx.fillStyle = opt.fontColor?.value ?? opt.fontColor;
+      ctx.fillStyle = typeof opt.fontColor.value === 'function' ? opt.fontColor.value(curTooltipInfo) : opt.fontColor.value ?? opt.fontColor;
       ctx.textAlign = 'right';
       ctx.fillText(valueText, this.tooltipDOM.offsetWidth - boxPadding.r, itemY);
       ctx.restore();
@@ -470,11 +479,18 @@ const modules = {
       ctx.fillStyle = hitColor;
     }
 
+    const curTooltipInfo = {
+      id: hitInfo.hitId,
+      name: hitItem.y,
+      value: valueText,
+      dataId: items[sId].id,
+    };
+
     // 1. Draw value color
     this.drawSeriesColorShape(ctx, opt.colorShape, { x: itemX, y: itemY });
 
     // 2. Draw value y names
-    ctx.fillStyle = opt.fontColor?.label ?? opt.fontColor;
+    ctx.fillStyle = typeof opt.fontColor.label === 'function' ? opt.fontColor.label(curTooltipInfo) : opt.fontColor.label ?? opt.fontColor;
     ctx.textBaseline = 'Bottom';
     if (this.axesY.length) {
       ctx.fillText(
@@ -485,6 +501,7 @@ const modules = {
 
     // 3. Draw value
     ctx.textAlign = 'right';
+    ctx.fillStyle = typeof opt.fontColor.value === 'function' ? opt.fontColor.value(curTooltipInfo) : opt.fontColor.value ?? opt.fontColor;
     ctx.fillText(valueText, this.tooltipDOM.offsetWidth - boxPadding.r, itemY);
     ctx.closePath();
   },
@@ -582,11 +599,18 @@ const modules = {
         ctx.fillStyle = color;
       }
 
+      const curTooltipInfo = {
+        id: hitInfo.hitId,
+        name: seriesList[ix].name,
+        value: valueText,
+        dataId: seriesList[ix].dataId,
+      };
+
       // 1. Draw series color
       this.drawSeriesColorShape(ctx, opt.colorShape, { x: itemX, y: itemY });
 
       // 2. Draw series name
-      ctx.fillStyle = opt.fontColor?.label ?? opt.fontColor;
+      ctx.fillStyle = typeof opt.fontColor.label === 'function' ? opt.fontColor.label(curTooltipInfo) : opt.fontColor.label ?? opt.fontColor;
       ctx.textBaseline = 'Bottom';
       const seriesNameSpaceWidth = opt.maxWidth - Math.round(ctx.measureText(maxValue).width)
         - boxPadding.l - boxPadding.r - seriesColorMarginRight - VALUE_MARGIN;
@@ -622,6 +646,7 @@ const modules = {
 
       // 3. Draw value
       ctx.textAlign = 'right';
+      ctx.fillStyle = typeof opt.fontColor.value === 'function' ? opt.fontColor.value(curTooltipInfo) : opt.fontColor.value ?? opt.fontColor;
       ctx.fillText(valueText, this.tooltipDOM.offsetWidth - boxPadding.r, itemY);
       ctx.restore();
       ctx.closePath();

package/src/components/treeGrid/uses.js

@@ -453,11 +453,14 @@ export const checkEvent = (params) => {
     getPagingData,
   } = params;
   const { emit } = getCurrentInstance();
+
   /**
    * row에 대한 체크 상태를 해제한다.
    *
    * @param {array} row - row 데이터
    */
+  const isEachMode = () => checkInfo.useCheckbox.mode === 'each';
+
   const unCheckedRow = (row) => {
     const index = stores.treeStore.findIndex(
       item => item.index === row.index);
@@ -467,6 +470,10 @@ export const checkEvent = (params) => {
     }
   };
   const onCheckChildren = (node) => {
+    if (isEachMode()) {
+      return;
+    }
+
     if (node.hasChild) {
       node.children.forEach((children) => {
         const childNode = children;
@@ -486,6 +493,10 @@ export const checkEvent = (params) => {
     }
   };
   const onCheckParent = (node) => {
+    if (isEachMode()) {
+      return;
+    }
+
     const parentNode = node.parent;
     if (parentNode) {
       const isCheck = parentNode.children.every(n => n.checked);
@@ -574,7 +585,7 @@ export const checkEvent = (params) => {
    */
   const onCheckAll = (event) => {
     const status = checkInfo.isHeaderChecked;
-    let store = stores.store;
+    let store = stores.store?.filter(row => row.isFilter);
     if (pageInfo.isClientPaging) {
       store = getPagingData();
     }