evui 3.3.13 → 3.3.16

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

@@ -144,15 +144,22 @@ const modules = {
           maxIndex: args.dataIndex,
           acc: args.acc,
         } = hitInfo);
-      }
-
-      if (this.options.selectLabel.use) {
+      } else if (this.options.selectLabel.use) {
         const offset = this.getMousePosition(e);
         const clickedLabelInfo = this.getLabelInfoByPosition(offset);
         const selected = this.selectLabel(clickedLabelInfo.labelIndex);
-        this.renderWithSelectLabel(selected.dataIndex);
+        this.renderWithSelected(selected.dataIndex);
+
+        args.selected = cloneDeep(this.defaultSelectInfo);
+      } else if (this.options.selectSeries.use) {
+        const offset = this.getMousePosition(e);
+        const hitInfo = this.getSeriesIdByPosition(offset);
+        if (hitInfo.sId !== null) {
+          const selected = this.selectSeries(hitInfo.sId);
+          this.renderWithSelected(selected.seriesId);
+        }
 
-        args.selected = cloneDeep(this.defaultSelectLabelInfo);
+        args.selected = cloneDeep(this.defaultSelectInfo);
       }
 
       if (typeof this.listeners.click === 'function') {
@@ -266,12 +273,21 @@ const modules = {
         yep = aOffsetY;
       }
 
-      dragInfo.xsp = Math.min(xcp, xep);
-      dragInfo.ysp = type === 'scatter' || type === 'heatMap' ? Math.min(ycp, yep) : aRange.y1;
-      dragInfo.width = Math.ceil(Math.abs(xep - xcp));
-      dragInfo.height = type === 'scatter' || type === 'heatMap'
+      if (type === 'heatMap') {
+        const rangeInfo = { xcp, xep, ycp, yep, range: aRange };
+        const { xsp, ysp, width, height } = this.getDragInfoForHeatMap(rangeInfo);
+        dragInfo.xsp = xsp;
+        dragInfo.ysp = ysp;
+        dragInfo.width = width;
+        dragInfo.height = height;
+      } else {
+        dragInfo.xsp = Math.min(xcp, xep);
+        dragInfo.ysp = type === 'scatter' ? Math.min(ycp, yep) : aRange.y1;
+        dragInfo.width = Math.ceil(Math.abs(xep - xcp));
+        dragInfo.height = type === 'scatter'
           ? Math.ceil(Math.abs(yep - ycp))
           : aRange.y2 - aRange.y1;
+      }
 
       this.overlayClear();
       this.drawSelectionArea(dragInfo);
@@ -289,7 +305,9 @@ const modules = {
         const args = {
           e,
           data: this.findSelectedItems(dragInfo),
-          range: this.getSelectionRage(dragInfo),
+          range: type === 'heatMap'
+            ? this.getSelectionRangeForHeatMap(dragInfo)
+            : this.getSelectionRage(dragInfo),
         };
 
         this.dragInfoBackup = defaultsDeep({}, dragInfo);
@@ -456,32 +474,51 @@ const modules = {
   },
 
   /**
-   * render after select label by index list
+   * render after selected label or selected series
    * @param indexList {array}  '[0, 1 ...]'
    */
-  renderWithSelectLabel(indexList) {
-    this.defaultSelectLabelInfo.dataIndex = indexList;
-    this.initSelectedLabelInfo();
+  renderWithSelected(list) {
+    if (this.options.selectLabel.use) {
+      this.defaultSelectInfo.dataIndex = list;
+    } else if (this.options.selectSeries.use) {
+      this.defaultSelectInfo.seriesId = list;
+    }
+    this.initSelectedInfo();
     this.render();
   },
 
   /**
-   * init defaultSelectLabelInfo object.
-   * (set each series data and label text)
+   * init defaultSelectInfo object.
+   * - at selectLabel using: set each series data and label text
+   * - at selectSeries using: set series state
    */
-  initSelectedLabelInfo() {
-    const { use, limit } = this.options.selectLabel;
-
-    if (use) {
-      if (!this.defaultSelectLabelInfo) {
-        this.defaultSelectLabelInfo = { dataIndex: [] };
+  initSelectedInfo() {
+    if (this.options.selectLabel.use) {
+      const { limit } = this.options.selectLabel;
+      if (!this.defaultSelectInfo) {
+        this.defaultSelectInfo = { dataIndex: [] };
       }
-      const infoObj = this.defaultSelectLabelInfo;
+      const infoObj = this.defaultSelectInfo;
       infoObj.dataIndex.splice(limit);
       infoObj.label = infoObj.dataIndex.map(i => this.data.labels[i]);
       const dataEntries = Object.entries(this.data.data);
       infoObj.data = infoObj.dataIndex.map(labelIdx => Object.fromEntries(
         dataEntries.map(([sId, data]) => [sId, data[labelIdx]])));
+    } else if (this.options.selectSeries.use) {
+      if (!this.defaultSelectInfo) {
+        this.defaultSelectInfo = { seriesId: [] };
+      }
+
+      const selectedList = this.defaultSelectInfo.seriesId;
+      Object.values(this.seriesList).forEach((series) => {
+        if (!selectedList.length) {
+          series.state = 'normal';
+        } else if (selectedList.includes(series.sId)) {
+          series.state = 'highlight';
+        } else {
+          series.state = 'downplay';
+        }
+      });
     }
   },
 
@@ -492,7 +529,7 @@ const modules = {
    */
   selectLabel(labelIndex) {
     const option = this.options?.selectLabel ?? {};
-    const before = this.defaultSelectLabelInfo ?? { dataIndex: [] };
+    const before = this.defaultSelectInfo ?? { dataIndex: [] };
     const after = cloneDeep(before);
 
     if (before.dataIndex.includes(labelIndex)) {
@@ -512,6 +549,28 @@ const modules = {
     return after;
   },
 
+  selectSeries(seriesId) {
+    const option = this.options?.selectSeries ?? {};
+    const before = this.defaultSelectInfo ?? { seriesId: [] };
+    const after = cloneDeep(before);
+
+    if (before.seriesId.includes(seriesId)) {
+      const idx = before.seriesId.indexOf(seriesId);
+      after.seriesId.splice(idx, 1);
+    } else if (seriesId) {
+      after.seriesId.push(seriesId);
+      if (option.limit > 0 && option.limit < after.seriesId.length) {
+        if (option.useDeselectOverflow) {
+          after.seriesId.splice(0, 1);
+        } else {
+          after.seriesId.pop();
+        }
+      }
+    }
+
+    return after;
+  },
+
   /**
    * Find items by series within a range
    * @param {object} range  object for find series items
@@ -591,6 +650,30 @@ const modules = {
 
     return targetValue / total;
   },
+
+  getDragInfoForHeatMap(range) {
+    const sId = Object.keys(this.seriesList)[0];
+    return this.seriesList[sId].findBlockRange(range);
+  },
+
+  getSelectionRangeForHeatMap(range) {
+    const dataRangeX = this.axesSteps.x.length ? this.axesSteps.x[0] : null;
+    const dataRangeY = this.axesSteps.y.length ? this.axesSteps.y[0] : null;
+
+    if (!dataRangeX || !dataRangeY) {
+      return null;
+    }
+
+    const sId = Object.keys(this.seriesList)[0];
+    const { xMin, xMax, yMin, yMax } = this.seriesList[sId].findSelectionRange(range);
+
+    return {
+      xMin: xMin ?? dataRangeX.graphMin,
+      xMax: xMax ?? dataRangeX.graphMax,
+      yMin: yMin ?? dataRangeY.graphMin,
+      yMax: yMax ?? dataRangeY.graphMax,
+    };
+  },
 };
 
 export default modules;

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

@@ -1,3 +1,5 @@
+import Util from '@/components/chart/helpers/helpers.util';
+
 const modules = {
   /**
    * Create legend DOM
@@ -80,13 +82,14 @@ const modules = {
     Object.values(seriesList).forEach((series) => {
       if (!series.isExistGrp && series.showLegend) {
         const { colorAxis, valueOpt } = series;
-        const { max, interval, existError } = valueOpt;
+        const { min, max, interval, existError } = valueOpt;
+        const endIndex = colorAxis.length - 1;
         colorAxis.forEach((colorItem, index) => {
-          const minValue = interval * index;
-          const maxValue = index === colorAxis.length - 1
-            ? max : minValue + interval - 1;
-          const name = existError && index === colorAxis.length - 1
-            ? 'error' : `${minValue} - ${maxValue}`;
+          const minValue = min + (interval * index);
+          const maxValue = index === endIndex
+            ? max : minValue + interval;
+          const name = existError && index === endIndex ? 'error' : `${minValue} - ${maxValue}`;
+
           this.addLegend({
             cId: colorItem.id,
             color: colorItem.value,
@@ -191,15 +194,24 @@ const modules = {
       }
       const nameDOM = targetDOM.getElementsByClassName('ev-chart-legend-name')[0];
       const targetId = nameDOM.series.sId;
+      const selectSeriesOption = this.options.selectSeries;
+      const selectedList = this.defaultSelectInfo?.seriesId ?? [];
 
       Object.values(this.seriesList).forEach((series) => {
-        series.state = series.sId === targetId ? 'highlight' : 'downplay';
+        series.state = series.sId === targetId
+        || (selectSeriesOption.use && selectedList.includes(targetId))
+          ? 'highlight' : 'downplay';
       });
 
+      let hitInfo = null;
+      if (Util.isPieType(this.options.type)) {
+        hitInfo = { sId: targetId, type: this.options.type };
+      }
+
       this.update({
         updateSeries: false,
         updateSelTip: { update: false, keepDomain: false },
-        hitInfo: { sId: targetId },
+        hitInfo,
       });
     };
 
@@ -209,8 +221,15 @@ const modules = {
      * @returns {undefined}
      */
     this.onLegendBoxLeave = () => {
+      const selectSeriesOption = this.options.selectSeries;
+      const selectedList = this.defaultSelectInfo?.seriesId ?? [];
       Object.values(this.seriesList).forEach((series) => {
-        series.state = 'normal';
+        if (selectSeriesOption.use && selectedList.length) {
+          series.state = selectedList.includes(series.sId)
+            ? 'highlight' : 'downplay';
+        } else {
+          series.state = 'normal';
+        }
       });
 
       this.update({

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

@@ -408,7 +408,7 @@ const modules = {
     }
 
     // 3. Draw value
-    let formattedTxt;
+    let formattedTxt = itemValue;
     if (opt.formatter) {
       formattedTxt = opt.formatter({
         x: xValue,
@@ -419,8 +419,6 @@ const modules = {
 
     if ((!opt.formatter || typeof formattedTxt !== 'string') && itemValue !== 'error') {
       formattedTxt = numberWithComma(itemValue);
-    } else {
-      formattedTxt = itemValue;
     }
 
     ctx.textAlign = 'right';

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

@@ -164,7 +164,7 @@ class Scale {
    *
    * @returns {undefined}
    */
-  draw(chartRect, labelOffset, stepInfo, hitInfo) {
+  draw(chartRect, labelOffset, stepInfo, hitInfo, selectLabelInfo) {
     const ctx = this.ctx;
     const options = this.options;
     const aPos = {
@@ -239,6 +239,13 @@ 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?.label
+            .map(t => this.getLabelFormat(Math.min(axisMax, t))).includes(labelText);
+
         const labelColor = this.labelStyle.color;
         let defaultOpacity = 1;
 
@@ -246,14 +253,17 @@ class Scale {
           defaultOpacity = Util.getOpacity(labelColor);
         }
 
-        ctx.fillStyle = Util.colorStringToRgba(labelColor, defaultOpacity);
+        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);
-          if (options?.selectItem?.showLabelTip && hitInfo?.label && !this.options?.horizontal) {
+          if (!isBlurredLabel
+            && 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,7 +7,6 @@ class StepScale extends Scale {
   constructor(type, opt, ctx, labels, options) {
     super(type, opt, ctx, options);
     this.labels = labels;
-    this.rangeMode = opt.rangeMode;
   }
 
   /**
@@ -18,7 +17,8 @@ class StepScale extends Scale {
    * @returns {object} min/max value and label
    */
   calculateScaleRange(minMax, chartRect) {
-    const stepMinMax = Util.getStringMinMax(this.labels);
+    const stepMinMax = this.rangeMode
+      ? minMax : Util.getStringMinMax(this.labels);
     const maxValue = stepMinMax.max;
     const minValue = stepMinMax.min;
     const maxWidth = chartRect.chartWidth / (this.labels.length + 2);
@@ -42,9 +42,20 @@ class StepScale extends Scale {
    * @returns {object} steps, interval, min/max graph value
    */
   calculateSteps(range) {
+    let numberOfSteps = this.labels.length;
+    let interval = 1;
+
+    if (this.rangeMode) {
+      const { maxSteps } = range;
+
+      while (numberOfSteps > maxSteps * 2) {
+        interval *= 2;
+        numberOfSteps = Math.round(numberOfSteps / interval);
+      }
+    }
     return {
-      steps: this.labels.length,
-      interval: 1,
+      steps: numberOfSteps,
+      interval,
       graphMin: range.minValue,
       graphMax: range.maxValue,
     };
@@ -68,7 +79,9 @@ class StepScale extends Scale {
       y2: chartRect.y2 - labelOffset.bottom,
     };
 
+    const oriSteps = this.labels.length;
     const steps = stepInfo.steps;
+    const count = stepInfo.interval;
 
     const startPoint = aPos[this.units.rectStart];
     const endPoint = aPos[this.units.rectEnd];
@@ -116,8 +129,10 @@ class StepScale extends Scale {
 
       let labelText;
       let labelPoint;
+      let index;
 
-      labels.forEach((item, index) => {
+      for (index = 0; index < oriSteps; index += count) {
+        const item = this.labels[index];
         labelCenter = Math.round(startPoint + (labelGap * index));
         linePosition = labelCenter + aliasPixel;
         labelText = this.getLabelFormat(item, maxWidth);
@@ -143,9 +158,9 @@ class StepScale extends Scale {
           ctx.fillText(labelText, xPoint, labelPoint);
 
           if (!isBlurredLabel
-              && this.options?.selectItem?.showLabelTip
-              && hitInfo?.label
-              && !this.options?.horizontal) {
+            && this.options?.selectItem?.showLabelTip
+            && hitInfo?.label
+            && !this.options?.horizontal) {
             const selectedLabel = hitInfo.label;
             if (selectedLabel === labelText) {
               const height = Math.round(ctx.measureText(this.labelStyle?.fontSize).width);
@@ -179,9 +194,9 @@ class StepScale extends Scale {
           }
         }
         ctx.stroke();
-      });
+      }
 
-      if (this.rangeMode) {
+      if (this.rangeMode && (index === this.labels.length)) {
         let labelLastText = +labels[labels.length - 1] + (+labels[1] - +labels[0]);
         if (isNaN(labelLastText)) {
           labelLastText = 'Max';

package/src/components/chart/uses.js

@@ -43,6 +43,7 @@ const DEFAULT_OPTIONS = {
   width: '100%',
   height: '100%',
   thickness: 1,
+  cPadRatio: 0,
   borderRadius: 0,
   combo: false,
   tooltip: {
@@ -94,6 +95,11 @@ const DEFAULT_OPTIONS = {
     useApproximateValue: false,
     tipBackground: '#000000',
   },
+  selectSeries: {
+    use: false,
+    limit: 1,
+    useDeselectOverflow: false,
+  },
   dragSelection: {
     use: false,
     keepDisplay: true,
@@ -108,6 +114,7 @@ const DEFAULT_OPTIONS = {
       show: false,
       color: '#FFFFFF',
       lineWidth: 1,
+      opacity: 1,
     },
     error: '#FF0000',
   },
@@ -145,6 +152,7 @@ export const useModel = () => {
 
   const selectItemInfo = cloneDeep(props.selectedItem);
   const selectLabelInfo = cloneDeep(props.selectedLabel);
+  const selectSeriesInfo = cloneDeep(props.selectedSeries);
 
   const eventListeners = {
     click: async (e) => {
@@ -152,9 +160,12 @@ export const useModel = () => {
       if (e.label) {
         emit('update:selectedItem', { seriesID: e.seriesId, dataIndex: e.dataIndex });
       }
-      if (e.selected) {
+      if (e.selected?.dataIndex) {
         emit('update:selectedLabel', { dataIndex: e.selected.dataIndex });
       }
+      if (e.selected?.seriesId) {
+        emit('update:selectedSeries', { seriesId: e.selected.seriesId });
+      }
       emit('click', e);
     },
     'dbl-click': async (e) => {
@@ -171,6 +182,7 @@ export const useModel = () => {
     eventListeners,
     selectItemInfo,
     selectLabelInfo,
+    selectSeriesInfo,
     getNormalizedData,
     getNormalizedOptions,
   };

package/src/components/grid/Grid.vue

@@ -198,12 +198,12 @@
                   }"
                 >
                   <!-- Cell Renderer -->
-                  <template v-if="!!$slots[column.field]">
+                  <div v-if="!!$slots[column.field]">
                     <slot
                       :name="column.field"
                       :item="{ row, column }"
                     />
-                  </template>
+                  </div>
                   <!-- Cell Value -->
                   <template v-else>
                     <div :title="getConvertValue(column, row[2][column.index])">
@@ -257,6 +257,7 @@
       minWidth,
       rowHeight,
     }"
+    :scroll-left="summaryScroll"
   />
   <!-- Pagination -->
   <grid-pagination
@@ -271,7 +272,7 @@
 </template>
 
 <script>
-import { reactive, toRefs, computed, watch, onMounted, onActivated, nextTick } from 'vue';
+import { reactive, toRefs, computed, watch, onMounted, onActivated, nextTick, ref } from 'vue';
 import Toolbar from './grid.toolbar';
 import FilterWindow from './grid.filter.window';
 import GridPagination from './grid.pagination';
@@ -474,7 +475,7 @@ export default {
       elementInfo,
       clearCheckInfo,
     });
-
+    const summaryScroll = ref(0);
     const {
       updateVScroll,
       updateHScroll,
@@ -485,6 +486,7 @@ export default {
       elementInfo,
       resizeInfo,
       pageInfo,
+      summaryScroll,
       getPagingData,
       updatePagingInfo,
     });
@@ -751,6 +753,7 @@ export default {
       },
     );
     return {
+      summaryScroll,
       showHeader,
       stripeStyle,
       borderStyle,

package/src/components/grid/grid.summary.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="summaryRef"
     :class="{
       'grid-summary': true,
       'non-border': styleInfo.borderStyle === 'none',
@@ -44,12 +45,18 @@
               height: `${styleInfo.rowHeight}px`,
             }"
           >
-            <template v-if="column.summaryRenderer">
+            <div
+              v-if="column.summaryRenderer"
+              :title="getSummaryRenderer(column)"
+            >
               {{ getSummaryRenderer(column) }}
-            </template>
-            <template v-else>
+            </div>
+            <div
+              v-else
+              :title="getSummaryValue(column, column.summaryType)"
+            >
               {{ getSummaryValue(column, column.summaryType)}}
-            </template>
+            </div>
           </span>
           <span
             v-else
@@ -62,7 +69,7 @@
 </template>
 
 <script>
-import { computed } from 'vue';
+import { computed, watch, ref, nextTick } from 'vue';
 import { numberWithComma } from '@/common/utils';
 
 export default {
@@ -88,8 +95,13 @@ export default {
       type: Boolean,
       default: false,
     },
+    scrollLeft: {
+      type: Number,
+      default: 0,
+    },
   },
   setup(props) {
+    const summaryRef = ref();
     const ROW_DATA_INDEX = 2;
     const stores = computed(() => props.stores);
     const columns = computed(() => props.orderedColumns);
@@ -102,7 +114,8 @@ export default {
         convertValue = numberWithComma(value);
         convertValue = convertValue === false ? value : convertValue;
       } else if (column.type === 'float') {
-        convertValue = convertValue.toFixed(column.decimal ?? 3);
+        const floatValue = convertValue.toFixed(column.decimal ?? 3);
+        convertValue = floatValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
       }
 
       return convertValue;
@@ -175,10 +188,19 @@ export default {
       });
       return result;
     };
+    watch(
+      () => props.scrollLeft,
+      (val) => {
+        nextTick(() => {
+          summaryRef.value.scrollLeft = val;
+        });
+      },
+    );
     return {
       columns,
       styleInfo,
       showCheckbox,
+      summaryRef,
       getSummaryValue,
       getSummaryRenderer,
     };
@@ -189,6 +211,9 @@ export default {
 <style lang="scss" scoped>
 @import 'style/grid.scss';
 .grid-summary {
+  width: 100%;
+  overflow: hidden;
+
   @include evThemify() {
     border-bottom: 1px solid evThemed('disabled');
     background-color: evThemed('background-lighten');
@@ -201,6 +226,11 @@ export default {
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 14px;
+    > div {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
     @include evThemify() {
       color: evThemed('font-color-base');

package/src/components/grid/uses.js

@@ -44,7 +44,8 @@ export const commonFunctions = () => {
       convertValue = numberWithComma(value);
       convertValue = convertValue === false ? value : convertValue;
     } else if (column.type === 'float') {
-      convertValue = convertValue.toFixed(column.decimal ?? 3);
+      const floatValue = convertValue.toFixed(column.decimal ?? 3);
+      convertValue = floatValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
     }
 
     return convertValue;
@@ -75,6 +76,7 @@ export const scrollEvent = (params) => {
     elementInfo,
     resizeInfo,
     pageInfo,
+    summaryScroll,
     getPagingData,
     updatePagingInfo,
   } = params;
@@ -122,6 +124,7 @@ export const scrollEvent = (params) => {
     const bodyEl = elementInfo.body;
 
     headerEl.scrollLeft = bodyEl.scrollLeft;
+    summaryScroll.value = bodyEl.scrollLeft;
   };
   /**
    * scroll 이벤트를 처리한다.