evui 3.3.11 → 3.3.12

package/package.json

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

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

@@ -44,15 +44,22 @@ class Line {
       return;
     }
 
-    const { ctx, chartRect, labelOffset, axesSteps } = param;
+    const { ctx, chartRect, labelOffset, axesSteps, selectLabel } = param;
     const extent = this.extent[this.state];
-
-    const fillOpacity = this.fillOpacity * extent.opacity;
+    const selectLabelOption = selectLabel.option;
+    const selectedLabel = selectLabel.selected;
+    const isExistSelectedLabel = selectLabelOption.use
+      && selectLabelOption.useSeriesOpacity
+      && selectedLabel.dataIndex?.length > 0;
+    const downplayOpacity = this.extent.downplay.opacity;
+
+    const fillOpacity = isExistSelectedLabel
+      ? this.fillOpacity * downplayOpacity : this.fillOpacity * extent.opacity;
     const lineWidth = this.lineWidth * extent.lineWidth;
 
     const getOpacity = (colorStr) => {
       const noneDownplayOpacity = colorStr.includes('rgba') ? Util.getOpacity(colorStr) : 1;
-      return this.state === 'downplay' ? 0.1 : noneDownplayOpacity;
+      return this.state === 'downplay' || isExistSelectedLabel ? 0.1 : noneDownplayOpacity;
     };
 
     const mainColor = this.color;
@@ -165,14 +172,18 @@ class Line {
 
       ctx.fill();
     }
-
-    if (this.point) {
+    if (this.point || isExistSelectedLabel) {
       ctx.strokeStyle = Util.colorStringToRgba(mainColor, mainColorOpacity);
-      ctx.fillStyle = Util.colorStringToRgba(pointFillColor, pointFillColorOpacity);
+      const focusStyle = Util.colorStringToRgba(pointFillColor, 1);
+      const blurStyle = Util.colorStringToRgba(pointFillColor, pointFillColorOpacity);
 
-      this.data.forEach((curr) => {
+      this.data.forEach((curr, i) => {
         if (curr.xp !== null && curr.yp !== null) {
-          Canvas.drawPoint(ctx, this.pointStyle, this.pointSize, curr.xp, curr.yp);
+          ctx.fillStyle = isExistSelectedLabel && selectedLabel.dataIndex.includes(i)
+            ? focusStyle : blurStyle;
+          if (this.point || selectedLabel.dataIndex.includes(i)) {
+            Canvas.drawPoint(ctx, this.pointStyle, this.pointSize, curr.xp, curr.yp);
+          }
         }
       });
     }

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

@@ -250,7 +250,7 @@ const modules = {
     const opt = this.options;
     const isHorizontal = !!opt.horizontal;
     const labelTipOpt = opt.selectLabel;
-    const { dataIndex, data } = this.defaultSelectLabelInfo;
+    const { dataIndex, data, label } = this.defaultSelectLabelInfo;
     let drawTip = false;
 
     if (dataIndex.length) {
@@ -264,86 +264,82 @@ const modules = {
         y1: chartRect.y1 + labelOffset.top,
         y2: chartRect.y2 - labelOffset.bottom,
       };
+      const labelAxes = isHorizontal ? this.axesY[0] : this.axesX[0];
+      const valueAxes = isHorizontal ? this.axesX[0] : this.axesY[0];
+      const valueAxesRange = isHorizontal ? this.axesRange.x[0] : this.axesRange.y[0];
+      const valuePositionCalcFunction = isHorizontal ? Canvas.calculateX : Canvas.calculateY;
+      const labelPositionCalcFunction = isHorizontal ? Canvas.calculateY : Canvas.calculateX;
 
-      const labelAxes = this.options.horizontal ? this.axesY[0] : this.axesX[0];
-      const labelStartPoint = aPos[labelAxes.units.rectStart];
-      const labelEndPoint = aPos[labelAxes.units.rectEnd];
-      const labelGap = (labelEndPoint - labelStartPoint) / labelAxes.labels.length;
-
-      const valueAxes = this.options.horizontal ? this.axesX[0] : this.axesY[0];
-      const valueStartPoint = aPos[valueAxes.units.rectStart];
-
-      const offset = this.options.type === 'bar' ? 4 : 6;
       const chartWidth = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
       const chartHeight = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
+      const valueSpace = isHorizontal ? chartWidth : chartHeight;
+      const valueStartPoint = aPos[valueAxes.units.rectStart];
+      let offset = this.options.type === 'bar' ? 4 : 6;
+      offset *= isHorizontal ? 1 : -1;
+
+      const seriesList = Object.keys(this.seriesList ?? {});
+      const visibleSeries = seriesList.filter(sId => this.seriesList[sId].show);
+      const isExistGrp = seriesList.some(sId => this.seriesList[sId].isExistGrp);
+      const groups = this.data.groups?.[0] ?? [];
+
+      let gp;
+      let dp;
+      let value;
+      let labelStartPoint;
+      let labelEndPoint;
+      let labelGap;
+      let graphX;
+      let lineSeries;
+      let sizeObj;
+
+      if (labelAxes.labels) {
+        labelStartPoint = aPos[labelAxes.units.rectStart];
+        labelEndPoint = aPos[labelAxes.units.rectEnd];
+        labelGap = (labelEndPoint - labelStartPoint) / labelAxes.labels.length;
+      } else {
+        graphX = this.axesSteps.x[0];
+        lineSeries = seriesList.find(sId => this.seriesList[sId]?.type === 'line');
+        sizeObj = this.seriesList[lineSeries].size;
+      }
 
-      dataIndex.forEach((idx, i) => {
-        const labelCenter = Math.round(labelStartPoint + (labelGap * idx));
-        let gp;
-        const dp = labelCenter + (labelGap / 2);
+      data.forEach((selectedData, i) => {
         if (labelTipOpt.fixedPosTop) {
-          if (isHorizontal) {
-            gp = Canvas.calculateX(
-              this.axesRange.x[0].max,
-              this.axesRange.x[0].min,
-              this.axesRange.x[0].max,
-              chartWidth,
-              valueStartPoint);
-            gp += offset;
-          } else {
-            gp = Canvas.calculateY(
-                this.axesRange.y[0].max,
-                this.axesRange.y[0].min,
-                this.axesRange.y[0].max,
-                chartHeight,
-                valueStartPoint);
-            gp -= offset;
-          }
-        } else if (isHorizontal) {
-          const seriesList = Object.keys(data[i] ?? {});
-          const visibleSeries = seriesList.filter(sId => this.seriesList[sId].show);
-          const visibleValue = visibleSeries.map(sId => data[i][sId]);
-          const isExistGrp = seriesList.some(sId => this.seriesList[sId].isExistGrp);
-
-          let maxValue;
-          if (isExistGrp) {
-            maxValue = visibleValue.reduce((acc, v) => acc + v) ?? 0;
-          } else if (visibleValue.length) {
-            maxValue = Math.max(...visibleValue);
-          } else {
-            maxValue = this.axesRange.x[0].max;
-          }
-
-          gp = Canvas.calculateX(
-            maxValue,
-            this.axesRange.x[0].min,
-            this.axesRange.x[0].max,
-            chartWidth,
-            valueStartPoint);
-          gp += offset;
+          value = valueAxesRange.max;
+        } else if (isExistGrp) {
+          const sumValue = visibleSeries.reduce((ac, sId) => (
+            groups.includes(sId) ? ac + (selectedData[sId]?.value ?? selectedData[sId]) : ac), 0);
+          const nonGroupValues = visibleSeries
+            .filter(sId => !groups.includes(sId))
+            .map(sId => selectedData[sId]?.value ?? selectedData[sId]);
+          value = Math.max(...nonGroupValues, sumValue);
+        } else if (visibleSeries.length) {
+          const visibleValue = visibleSeries
+            .map(sId => selectedData[sId]?.value ?? selectedData[sId]);
+          value = Math.max(...visibleValue);
         } else {
-          const seriesList = Object.keys(data[i] ?? {});
-          const visibleSeries = seriesList.filter(sId => this.seriesList[sId].show);
-          const visibleValue = visibleSeries.map(sId => data[i][sId]);
-          const isExistGrp = seriesList.some(sId => this.seriesList[sId].isExistGrp);
-
-          let maxValue;
-          if (isExistGrp) {
-            maxValue = visibleValue.reduce((acc, v) => acc + v) ?? 0;
-          } else if (visibleValue.length) {
-            maxValue = Math.max(...visibleValue);
-          } else {
-            maxValue = this.axesRange.y[0].max;
-          }
+          value = valueAxesRange.max;
+        }
+
+        if (labelAxes.labels) {
+          const labelCenter = Math.round(labelStartPoint + (labelGap * dataIndex[i]));
 
-          gp = Canvas.calculateY(
-              maxValue,
-              this.axesRange.y[0].min,
-              this.axesRange.y[0].max,
-              chartHeight,
-              valueStartPoint);
-          gp -= offset;
+          dp = labelCenter + (labelGap / 2);
+        } else {
+          dp = labelPositionCalcFunction(
+            label[i],
+            graphX.graphMin,
+            graphX.graphMax,
+            chartWidth - sizeObj.comboOffset,
+            aPos.x1 + (sizeObj.comboOffset / 2),
+          );
         }
+        gp = valuePositionCalcFunction(
+          value,
+          valueAxesRange.min,
+          valueAxesRange.max,
+          valueSpace,
+          valueStartPoint);
+        gp += offset;
 
         this.showTip({
           context: this.bufferCtx,

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

@@ -699,8 +699,8 @@ const modules = {
       const index = Math.floor(((this.options.horizontal ? y : x) - startPoint) / labelGap);
       labelIndex = scale.labels.length > index ? index : -1;
     } else {
-      hitInfo = this.getItemByPosition(offset, false);
-      labelIndex = hitInfo.maxIndex;
+      hitInfo = this.getItemByPosition(offset, this.options.selectLabel.useApproximateValue);
+      labelIndex = hitInfo.maxIndex ?? -1;
     }
 
     return {

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

@@ -468,8 +468,12 @@ const modules = {
    */
   initSelectedLabelInfo() {
     const { use, limit } = this.options.selectLabel;
-    const infoObj = this.defaultSelectLabelInfo;
-    if (use && infoObj?.dataIndex) {
+
+    if (use) {
+      if (!this.defaultSelectLabelInfo) {
+        this.defaultSelectLabelInfo = { dataIndex: [] };
+      }
+      const infoObj = this.defaultSelectLabelInfo;
       infoObj.dataIndex.splice(limit);
       infoObj.label = infoObj.dataIndex.map(i => this.data.labels[i]);
       const dataEntries = Object.entries(this.data.data);

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,12 +239,6 @@ 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);
-
         const labelColor = this.labelStyle.color;
         let defaultOpacity = 1;
 
@@ -252,17 +246,14 @@ class Scale {
           defaultOpacity = Util.getOpacity(labelColor);
         }
 
-        ctx.fillStyle = Util.colorStringToRgba(labelColor, isBlurredLabel ? 0.1 : defaultOpacity);
+        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/grid/grid.summary.vue

@@ -84,6 +84,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    isTree: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
     const ROW_DATA_INDEX = 2;
@@ -112,13 +116,18 @@ export default {
           return stores.value.store.length;
         }
         if (column.type === 'number' || column.type === 'float') {
-          const columnValues = stores.value.store.map(rows => rows[ROW_DATA_INDEX][columnIndex]);
+          let columnValues = [];
+          if (props.isTree) {
+            columnValues = stores.value.store.map(node => node.data?.[column.field]);
+          } else {
+            columnValues = stores.value.store.map(row => row[ROW_DATA_INDEX][columnIndex]);
+          }
           switch (summaryType) {
             case 'sum':
               result = columnValues.reduce((prev, curr) => {
                 const value = Number(curr);
                 if (!Number.isNaN(value)) {
-                  return prev + curr;
+                  return prev + value;
                 }
                 return prev;
               }, 0);
@@ -127,7 +136,7 @@ export default {
               result = columnValues.reduce((prev, curr) => {
                 const value = Number(curr);
                 if (!Number.isNaN(value)) {
-                  return prev + curr;
+                  return prev + value;
                 }
                 return prev;
               }, 0) / columnValues.length;
@@ -180,8 +189,10 @@ export default {
 <style lang="scss" scoped>
 @import 'style/grid.scss';
 .grid-summary {
-  background-color: #F8F9F9;
-  border-bottom: 1px solid #CFCFCF;
+  @include evThemify() {
+    border-bottom: 1px solid evThemed('disabled');
+    background-color: evThemed('background-lighten');
+  }
   .non-border {
     border-bottom: none !important;
   }
@@ -190,7 +201,10 @@ export default {
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 14px;
-    color: #737373;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+    }
   }
   .column {
     &.number,

package/src/components/grid/uses.js

@@ -38,7 +38,7 @@ export const commonFunctions = () => {
    * @returns {number|string} 변환된 데이터
    */
   const getConvertValue = (column, value) => {
-    let convertValue = value;
+    let convertValue = column.type === 'number' || column.type === 'float' ? Number(value) : value;
 
     if (column.type === 'number') {
       convertValue = numberWithComma(value);