evui 3.3.20 → 3.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.20",
+  "version": "3.3.21",
   "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/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/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/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,