evui 3.3.20 → 3.3.23

package/package.json

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

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

@@ -1,4 +1,5 @@
 import { defaultsDeep } from 'lodash-es';
+import { truthy } from '@/common/utils';
 import { COLOR, BAR_OPTION } from '../helpers/helpers.constant';
 import Canvas from '../helpers/helpers.canvas';
 import Util from '../helpers/helpers.util';
@@ -359,13 +360,11 @@ class Bar {
     ctx.textAlign = isHorizontal && align !== 'center' ? 'left' : 'center';
 
     let value;
-    const isStacked = !isNaN(data.o);
-    if (data.o === null) {
-      value = isHorizontal ? data.x : data.y;
-    } else if (isStacked) {
+    const isStacked = truthy(this.stackIndex);
+    if (isStacked) {
       value = data.o;
     } else {
-      value = '';
+      value = (isHorizontal ? data.x : data.y) ?? '';
     }
 
     let formattedTxt;
@@ -374,49 +373,73 @@ class Bar {
     }
 
     if (!formatter || typeof formattedTxt !== 'string') {
-      formattedTxt = Util.labelSignFormat(value, decimalPoint);
+      formattedTxt = Util.labelSignFormat(value, decimalPoint) ?? '';
     }
 
-    const vw = Math.round(ctx.measureText(formattedTxt).width);
-    const vh = fontSize + 4;
+    const textWidth = Math.round(ctx.measureText(formattedTxt).width);
+    const textHeight = fontSize + 4;
     const minXPos = x + 10;
     const minYPos = y - 10;
+    const widthFreeSpaceToDraw = w - 10;
+    const heightFreeSpaceToDraw = Math.abs(h + 10);
     const centerX = x + (w / 2) <= minXPos ? minXPos : x + (w / 2);
     const centerY = y + (h / 2) >= minYPos ? minYPos : y + (h / 2);
     const centerYHorizontal = isHighlight ? y + (h / 2) : y - (h / 2);
 
     switch (align) {
-      case 'start':
+      case 'start': {
         if (isHorizontal) {
-          ctx.fillText(formattedTxt, minXPos, centerYHorizontal);
-        } else {
+          if (textWidth < widthFreeSpaceToDraw) {
+            ctx.fillText(formattedTxt, minXPos, centerYHorizontal);
+          }
+        } else if (textHeight < heightFreeSpaceToDraw) {
           ctx.fillText(formattedTxt, centerX, minYPos);
         }
+
         break;
-      case 'center':
+      }
+
+      case 'center': {
         if (isHorizontal) {
-          ctx.fillText(formattedTxt, centerX, centerYHorizontal);
-        } else {
+          if (textWidth < widthFreeSpaceToDraw) {
+            ctx.fillText(formattedTxt, centerX, centerYHorizontal);
+          }
+        } else if (textHeight < heightFreeSpaceToDraw) {
           ctx.fillText(formattedTxt, centerX, centerY);
         }
+
         break;
-      case 'out':
+      }
+
+      case 'out': {
+        if (isStacked) {
+          console.warn('[EVUI][Bar Chart] In case of Stack Bar Chart, \'out\' of \'showValue\'\'s align is not supported.');
+          return;
+        }
+
         if (isHorizontal) {
           ctx.fillText(formattedTxt, minXPos + w, centerYHorizontal);
         } else {
-          ctx.fillText(formattedTxt, centerX, y + h - (vh / 2));
+          ctx.fillText(formattedTxt, centerX, y + h - (textHeight / 2));
         }
+
         break;
-      case 'end':
+      }
+
       default:
+      case 'end': {
         if (isHorizontal) {
-          const xPos = x + w - (vw * 2);
-          ctx.fillText(formattedTxt, xPos <= minXPos ? minXPos : xPos, centerYHorizontal);
-        } else {
-          const yPos = y + h + vh;
+          if (textWidth < widthFreeSpaceToDraw) {
+            const xPos = x + w - (textWidth * 2);
+            ctx.fillText(formattedTxt, xPos <= minXPos ? minXPos : xPos, centerYHorizontal);
+          }
+        } else if (textHeight < heightFreeSpaceToDraw) {
+          const yPos = y + h + textHeight;
           ctx.fillText(formattedTxt, centerX, yPos >= minYPos ? minYPos : yPos);
         }
+
         break;
+      }
     }
 
     ctx.restore();

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

@@ -15,7 +15,10 @@ class HeatMap {
 
     this.sId = sId;
     this.data = [];
-    this.labels = {};
+    this.labels = {
+      x: [],
+      y: [],
+    };
     this.valueOpt = {};
     this.size = {
       w: 0,
@@ -137,7 +140,7 @@ class HeatMap {
     ctx.beginPath();
     if (this.stroke.show) {
       const { radius } = this.stroke;
-      if (radius > 0) {
+      if (radius > 0 && radius < h && radius < w) {
         ctx.moveTo(x + radius, y);
         ctx.arcTo(x + w, y, x + w, y + h, radius);
         ctx.arcTo(x + w, y + h, x, y + h, radius);

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

@@ -698,9 +698,15 @@ const modules = {
               vector: { start: position[dataIndex - 1], end: position[dataIndex] },
             }));
 
+            const isEmptyVector = (arr => !arr || !Array.isArray(arr) || arr?.length !== 2);
+
             // canvas 의 클릭 위치값은 제 4 사분면의 위치이므로 clickedY, y1, y2 의 값은 음수를 취한다.
             if (isStackChart) {
               hitSeries = vectorList.find(({ vector }) => {
+                if (isEmptyVector(vector?.start) && isEmptyVector(vector?.end)) {
+                  return false;
+                }
+
                 const [x1, y1] = vector.start;
                 const [x2, y2] = vector.end;
                 const v1 = [x2 - x1, y1 - y2];
@@ -713,6 +719,10 @@ const modules = {
               })?.sId;
             } else {
               hitSeries = vectorList.find(({ vector }) => {
+                if (isEmptyVector(vector?.start) && isEmptyVector(vector?.end)) {
+                  return false;
+                }
+
                 const [x1, y1] = vector.start;
                 const [x2, y2] = vector.end;
                 const a = (y1 - y2) / (x2 - x1);

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

@@ -38,8 +38,10 @@ const modules = {
       this.createLegendLayout();
       this.createLegend();
     }
-    const series = Object.values(this.seriesList)[0];
-    this.setLegendStyle(series);
+
+    Object.values(this.seriesList).forEach((series) => {
+      this.setLegendStyle(series);
+    });
     this.initEvent();
 
     this.isInitLegend = true;
@@ -76,7 +78,12 @@ const modules = {
         return;
       }
 
-      const { colorState } = Object.values(this.seriesList)[0];
+      const seriesList = Object.values(this.seriesList);
+      if (!seriesList.length) {
+        return;
+      }
+
+      const { colorState } = seriesList[0];
       const { start, end } = colorState[0];
 
       colorState[0].selectedValue = null;
@@ -102,7 +109,12 @@ const modules = {
         value = this.isSide ? 100 - value : value;
         const dir = isStart ? 'start' : 'end';
 
-        const { colorState } = Object.values(this.seriesList)[0];
+        const seriesList = Object.values(this.seriesList);
+        if (!seriesList.length) {
+          return;
+        }
+
+        const { colorState } = seriesList[0];
         const { start, end } = colorState[0];
         if ((isStart && value > end) || (!isStart && value < start)) {
           return;
@@ -132,7 +144,12 @@ const modules = {
     this.onLegendBoxOver = (e) => {
       const type = e.target.dataset.type;
 
-      const { colorState, valueOpt } = Object.values(this.seriesList)[0];
+      const seriesList = Object.values(this.seriesList);
+      if (!seriesList.length) {
+        return;
+      }
+
+      const { colorState, valueOpt } = seriesList[0];
       const state = colorState[0];
 
       let value = this.getSelectedValue(e);
@@ -170,7 +187,12 @@ const modules = {
       const targetDOM = lineDOM.getElementsByClassName('ev-chart-legend-thumb')[0];
       this.clearOverlay(targetDOM);
 
-      const { colorState } = Object.values(this.seriesList)[0];
+      const seriesList = Object.values(this.seriesList);
+      if (!seriesList.length) {
+        return;
+      }
+
+      const { colorState } = seriesList[0];
       colorState[0].selectedValue = null;
 
       this.update({
@@ -210,8 +232,9 @@ const modules = {
     this.resetLegend();
     this.createLegend();
 
-    const series = Object.values(this.seriesList)[0];
-    this.setLegendStyle(series);
+    Object.values(this.seriesList).forEach((series) => {
+      this.setLegendStyle(series);
+    });
   },
 
   /**
@@ -249,6 +272,9 @@ const modules = {
     this.clearOverlay();
     const handleSize = this.legendHandleSize;
     const { min, max } = opt;
+    if (min === undefined || max === undefined) {
+      return;
+    }
 
     const targetDOM = this.containerDOM.getElementsByClassName('ev-chart-legend-line')[0];
 
@@ -326,6 +352,10 @@ const modules = {
    * @returns {undefined}
    */
   createLegend() {
+    if (!Object.values(this.seriesList).length) {
+      return;
+    }
+
     const opt = this.options.legend;
     this.isSide = !['top', 'bottom'].includes(opt.position);
     const legendSize = this.isSide ? opt.width : opt.height;
@@ -364,6 +394,7 @@ const modules = {
     const { valueOpt, colorState } = series;
 
     const { min, max, decimalPoint } = valueOpt;
+
     const { start, end } = colorState[0];
     const startColor = series.getColorForGradient(start);
     const endColor = series.getColorForGradient(end);
@@ -400,8 +431,10 @@ const modules = {
     const labelDOM = thumbDOM.getElementsByClassName('ev-chart-legend-label');
     labelDOM[0].style.cssText = `${labelStyle}0%;`;
     labelDOM[1].style.cssText = `${labelStyle}100%;`;
-    labelDOM[0].innerText = this.isSide ? maxText : minText;
-    labelDOM[1].innerText = this.isSide ? minText : maxText;
+    if (min !== undefined && max !== undefined) {
+      labelDOM[0].innerText = this.isSide ? maxText : minText;
+      labelDOM[1].innerText = this.isSide ? minText : maxText;
+    }
 
     const handleDOM = this.containerDOM.getElementsByClassName('ev-chart-legend-handle');
     handleDOM[0].style.cssText = defaultHandleStyle + startStyle;
@@ -524,8 +557,9 @@ const modules = {
    * @returns {undefined}
    */
   updateLegendContainerSize() {
-    const series = Object.values(this.seriesList)[0];
-    this.setLegendStyle(series);
+    Object.values(this.seriesList).forEach((series) => {
+      this.setLegendStyle(series);
+    });
   },
 
   /**

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

@@ -531,6 +531,7 @@ const modules = {
     const resizeStyle = this.resizeDOM?.style;
 
     let chartRect;
+    let legendPad;
     const title = opt?.title?.show ? opt?.title?.height : 0;
     const positionTop = title + opt?.legend?.height;
     const { top = 0, bottom = 0, left = 0, right = 0 } = opt?.legend?.padding ?? {};
@@ -545,9 +546,10 @@ const modules = {
       case 'top':
         wrapperStyle.padding = `${positionTop}px 0 0 0`;
         chartRect = this.chartDOM.getBoundingClientRect();
+        legendPad = parseInt(legendStyle.paddingTop) + parseInt(legendStyle.paddingBottom);
 
         boxStyle.width = '100%';
-        boxStyle.height = `${opt.legend.height}px`;
+        boxStyle.height = `${opt.legend.height - legendPad}px`;
 
         legendStyle.top = `${title}px`;
         legendStyle.right = '';
@@ -555,7 +557,7 @@ const modules = {
         legendStyle.left = '';
 
         legendStyle.width = `${chartRect.width}px`;
-        legendStyle.height = `${opt.legend.height + 4}px`; // 4 resize bar size
+        legendStyle.height = `${opt.legend.height + (resizeStyle ? 4 : 0)}px`; // 4 resize bar size
 
         if (resizeStyle) {
           resizeStyle.top = `${positionTop}px`;
@@ -598,9 +600,10 @@ const modules = {
       case 'bottom':
         wrapperStyle.padding = `${title}px 0 ${opt.legend.height}px 0`;
         chartRect = this.chartDOM.getBoundingClientRect();
+        legendPad = parseInt(legendStyle.paddingTop) + parseInt(legendStyle.paddingBottom);
 
         boxStyle.width = '100%';
-        boxStyle.height = `${opt.legend.height}px`;
+        boxStyle.height = `${opt.legend.height - legendPad}px`;
 
         legendStyle.top = '';
         legendStyle.right = '';
@@ -608,7 +611,7 @@ const modules = {
         legendStyle.left = '0px';
 
         legendStyle.width = `${chartRect.width}px`;
-        legendStyle.height = `${opt.legend.height + 4}px`; // 4 resize bar size
+        legendStyle.height = `${opt.legend.height + (resizeStyle ? 4 : 0)}px`; // 4 resize bar size
 
         if (resizeStyle) {
           resizeStyle.top = '';

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

@@ -1,9 +1,9 @@
-import { numberWithComma } from '@/common/utils';
+import { numberWithComma, convertToPercent } 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';
-import { convertToPercent } from '../../../common/utils';
+
 
 const TITLE_HEIGHT = 30;
 const TEXT_HEIGHT = 14;
@@ -11,7 +11,7 @@ const LINE_SPACING = 8;
 const COLOR_MARGIN = 16;
 const VALUE_MARGIN = 50;
 const SCROLL_WIDTH = 17;
-const FONT_STYLE = 'normal normal lighter 14px Roboto';
+let fontStyle = 'normal normal lighter 14px Roboto';
 
 const modules = {
   /**
@@ -34,6 +34,7 @@ const modules = {
     this.tooltipCtx = this.tooltipCanvas.getContext('2d');
 
     this.tooltipDOM.style.display = 'none';
+    this.setFontFamily();
 
     this.tooltipBodyDOM.appendChild(this.tooltipCanvas);
     this.tooltipDOM.appendChild(this.tooltipHeaderDOM);
@@ -52,6 +53,15 @@ const modules = {
     }
   },
 
+  /**
+   * set tooltip's font style
+   */
+  setFontFamily() {
+    const fontFamily = this.options?.tooltip?.fontFamily ?? 'Roboto';
+    fontStyle = `normal normal lighter 14px ${fontFamily}`;
+    this.tooltipHeaderDOM.style.fontFamily = fontFamily;
+  },
+
   /**
    * Set tooltip DOM's position and style
    * @param {object} hitInfo    value and mouse position touched
@@ -73,7 +83,7 @@ const modules = {
 
     // calculate and decide width of canvas El(contentsWidth)
     ctx.save();
-    ctx.font = FONT_STYLE;
+    ctx.font = fontStyle;
     const isHorizontal = !!this.options.horizontal;
     const label = isHorizontal ? items[hitInfo.hitId]?.data?.y : items[hitInfo.hitId]?.data?.x;
     const tooltipValue = label?.length > maxSeries.length ? label : maxSeries;
@@ -216,7 +226,7 @@ const modules = {
     x += boxPadding.l;
     y += boxPadding.t;
 
-    ctx.font = FONT_STYLE;
+    ctx.font = fontStyle;
 
     const seriesList = [];
     seriesKeys.forEach((seriesName) => {
@@ -414,7 +424,7 @@ const modules = {
     const itemY = boxPadding.t + TEXT_HEIGHT + 2;
     const itemValue = hitItem.o > -1 ? hitItem.o : 'error';
 
-    ctx.font = FONT_STYLE;
+    ctx.font = fontStyle;
 
     ctx.beginPath();
 
@@ -490,7 +500,7 @@ const modules = {
     x += boxPadding.l;
     y += boxPadding.t;
 
-    ctx.font = FONT_STYLE;
+    ctx.font = fontStyle;
 
     const seriesList = [];
     seriesKeys.forEach((seriesName) => {

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

@@ -48,11 +48,16 @@ class StepScale extends Scale {
     if (this.rangeMode) {
       const { maxSteps } = range;
 
-      while (numberOfSteps > maxSteps * 2) {
-        interval *= 2;
-        numberOfSteps = Math.round(numberOfSteps / interval);
+      if (maxSteps > 2) {
+        while (numberOfSteps > maxSteps * 2) {
+          interval *= 2;
+          numberOfSteps = Math.round(numberOfSteps / interval);
+        }
+      } else {
+        interval = this.labels.length;
       }
     }
+
     return {
       steps: numberOfSteps,
       interval,

package/src/components/chart/style/chart.scss

@@ -223,7 +223,6 @@
 
   .ev-chart-tooltip-header {
     padding: 8px 16px 0 16px;
-    font-family: Roboto, serif;
     overflow: hidden;
     font-size: 16px;
 

package/src/components/chart/uses.js

@@ -59,6 +59,7 @@ const DEFAULT_OPTIONS = {
     debouncedHide: false,
     useScrollbar: false,
     textOverflow: 'wrap',
+    fontFamily: 'Roboto',
   },
   indicator: {
     use: true,

package/src/components/grid/Grid.vue

@@ -263,7 +263,7 @@
   <grid-pagination
     v-if="usePage && !isInfinite"
     v-model="currentPage"
-    :total="store.length"
+    :total="pageTotal"
     :per-page="perPage"
     :visible-page="visiblePage"
     :show-page-info="showPageInfo"
@@ -392,7 +392,7 @@ export default {
       startIndex: 0,
       prevPage: 0,
       currentPage: 0,
-      total: computed(() => (props.option.page?.total || 0)),
+      pageTotal: computed(() => (props.option.page?.total || 0)),
       perPage: computed(() => (props.option.page?.perPage || 20)),
       visiblePage: computed(() => (props.option.page?.visiblePage || 8)),
       order: computed(() => (props.option.page?.order || 'center')),

package/src/components/grid/uses.js

@@ -963,7 +963,7 @@ export const pagingEvent = (params) => {
         currentPage: pageInfo.currentPage,
         prevPage: pageInfo.prevPage,
         startIndex: pageInfo.startIndex,
-        total: pageInfo.total,
+        total: pageInfo.pageTotal,
         perPage: pageInfo.perPage,
       },
       sortInfo: {

package/src/components/select/Select.vue

@@ -118,10 +118,11 @@
       >
         <input
           v-if="filterable"
-          v-model="filterTextRef"
           type="text"
           class="ev-input-query"
           :placeholder="searchPlaceholder"
+          :value="filterTextRef"
+          @input="changeFilterText"
         />
         <div
           ref="itemWrapper"
@@ -242,6 +243,7 @@ export default {
       filteredItems,
       clickSelectInput,
       clickOutsideDropbox,
+      changeFilterText,
       changeDropboxPosition,
       clickItem,
       selectedItemClass,
@@ -266,6 +268,7 @@ export default {
       filteredItems,
       clickSelectInput,
       clickOutsideDropbox,
+      changeFilterText,
       changeDropboxPosition,
       clickItem,
       selectedItemClass,

package/src/components/select/uses.js

@@ -127,6 +127,13 @@ export const useDropdown = (param) => {
     return props.items.filter(v => v.name.toUpperCase().includes(trimText.toUpperCase())) || [];
   });
 
+  /**
+   * filterable 에서 text input 이벤트 핸들러
+   */
+  const changeFilterText = (e) => {
+    filterTextRef.value = e?.target?.value;
+  };
+
   /**
    * dropdown box 위치 변경하는 메소드
    */
@@ -255,6 +262,7 @@ export const useDropdown = (param) => {
     filteredItems,
     clickSelectInput,
     clickOutsideDropbox,
+    changeFilterText,
     changeDropboxPosition,
     clickItem,
     selectedItemClass,

package/src/components/treeGrid/TreeGrid.vue

@@ -178,7 +178,7 @@
   <grid-pagination
     v-if="usePage && !isInfinite"
     v-model="currentPage"
-    :total="showTreeStore.length"
+    :total="pageTotal"
     :per-page="perPage"
     :visible-page="visiblePage"
     :show-page-info="showPageInfo"
@@ -290,7 +290,7 @@ export default {
       startIndex: 0,
       prevPage: 0,
       currentPage: 0,
-      total: computed(() => (props.option.page?.total || 0)),
+      pageTotal: computed(() => (props.option.page?.total || 0)),
       perPage: computed(() => (props.option.page?.perPage || 20)),
       visiblePage: computed(() => (props.option.page?.visiblePage || 8)),
       order: computed(() => (props.option.page?.order || 'center')),

package/src/components/treeGrid/uses.js

@@ -841,7 +841,7 @@ export const pagingEvent = (params) => {
         currentPage: pageInfo.currentPage,
         prevPage: pageInfo.prevPage,
         startIndex: pageInfo.startIndex,
-        total: pageInfo.total,
+        total: pageInfo.pageTotal,
         perPage: pageInfo.perPage,
       },
       searchInfo: {