evui 3.3.18 → 3.3.21

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

@@ -81,12 +81,12 @@ const modules = {
 
     Object.values(seriesList).forEach((series) => {
       if (!series.isExistGrp && series.showLegend) {
-        const { colorAxis, valueOpt } = series;
+        const { colorState, valueOpt } = series;
         const { min, max, interval, existError, decimalPoint } = valueOpt;
-        const length = colorAxis.length;
+        const length = colorState.length;
         const endIndex = existError ? length - 2 : length - 1;
         for (let index = 0; index < length; index++) {
-          const colorItem = colorAxis[index];
+          const colorItem = colorState[index];
           const minValue = min + (interval * index);
           let maxValue = minValue + interval;
           if (index < endIndex) {
@@ -112,7 +112,7 @@ const modules = {
 
           this.addLegend({
             cId: colorItem.id,
-            color: colorItem.value,
+            color: colorItem.color,
             name,
           });
         }
@@ -292,7 +292,7 @@ const modules = {
       const nameDOM = targetDOM?.getElementsByClassName('ev-chart-legend-name')[0];
       const isActive = !colorDOM?.className.includes('inactive');
       const targetId = nameDOM.series.cId;
-      const activeCount = series.colorAxis.filter(colorItem => colorItem.show).length;
+      const activeCount = series.colorState.filter(colorItem => colorItem.show).length;
 
       if (isActive && activeCount === 1) {
         return;
@@ -311,9 +311,9 @@ const modules = {
         nameDOM.style.color = opt.color;
       }
 
-      const targetIndex = series.colorAxis.findIndex(colorItem => colorItem.id === targetId);
+      const targetIndex = series.colorState.findIndex(colorItem => colorItem.id === targetId);
       if (targetIndex > -1) {
-        series.colorAxis[targetIndex].show = !isActive;
+        series.colorState[targetIndex].show = !isActive;
       }
 
       colorDOM.classList.toggle('inactive');
@@ -344,7 +344,7 @@ const modules = {
       const nameDOM = targetDOM.getElementsByClassName('ev-chart-legend-name')[0];
       const targetId = nameDOM.series.cId;
 
-      series.colorAxis.forEach((colorItem) => {
+      series.colorState.forEach((colorItem) => {
         colorItem.state = colorItem.id === targetId ? 'highlight' : 'downplay';
       });
 
@@ -361,7 +361,7 @@ const modules = {
      */
     this.onLegendBoxLeave = () => {
       const series = Object.values(this.seriesList)[0];
-      series.colorAxis.forEach((item) => {
+      series.colorState.forEach((item) => {
         item.state = 'normal';
       });
 
@@ -510,6 +510,7 @@ const modules = {
     }
     containerDOM.style.height = '18px';
     containerDOM.style.display = 'inline-block';
+    containerDOM.style.overflow = 'hidden';
     containerDOM.dataset.type = 'container';
 
     this.legendBoxDOM.appendChild(containerDOM);
@@ -530,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 ?? {};
@@ -544,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 = '';
@@ -554,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`;
@@ -597,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 = '';
@@ -607,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

@@ -3,6 +3,7 @@ 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;
@@ -367,9 +368,19 @@ const modules = {
     const opt = this.options.tooltip;
     const valueFormatter = typeof opt.formatter === 'function' ? opt.formatter : opt.formatter?.value;
     const titleFormatter = opt.formatter?.title;
+    const series = Object.values(this.seriesList)[0];
+
+    let isShow = false;
+    const { colorState, isGradient } = series;
+    if (isGradient) {
+      const { min, max } = series.valueOpt;
+      const ratio = convertToPercent(hitItem.o - min, max - min);
+      const { start, end } = colorState[0];
+      isShow = (start <= ratio && ratio <= end) || hitItem.o === -1;
+    } else {
+      isShow = colorState.find(({ id }) => id === hitItem.cId)?.show;
+    }
 
-    const colorAxis = Object.values(this.seriesList)[0].colorAxis;
-    const isShow = colorAxis.find(({ id }) => id === hitItem.cId)?.show;
     if (!isShow) {
       this.tooltipClear();
       return;

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

@@ -39,7 +39,6 @@
 
 .ev-chart-legend-container {
   position: relative;
-  overflow: hidden;
 }
 
 .ev-chart-legend-color {
@@ -96,6 +95,97 @@
   overflow: hidden;
 }
 
+.ev-chart-legend-line {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  background-color: #E3E3E3;
+
+  &-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.ev-chart-legend-thumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  color: #000000;
+}
+
+.ev-chart-legend-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+
+  &.dragging,
+  &:hover {
+    transform: scale(1.2);
+  }
+
+  &-btn {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: $color-white;
+    transition: transform 0.1s ease-in-out;
+    box-sizing: border-box;
+    border: 2px solid #979797;
+
+    &-color {
+      position: absolute;
+      top: 4px;
+      left: 4px;
+      width: calc(100% - 8px);
+      height: calc(100% - 8px);
+      border-radius: 50%;
+    }
+  }
+}
+
+.ev-chart-legend-label {
+  position: absolute;
+  font-size: 12px;
+  line-height: 1.4em;
+
+  &-text {
+    display: block;
+    white-space: nowrap;
+  }
+}
+
+.ev-chart-legend-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  .ev-chart-legend-overlay-item {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    border-radius: 50%;
+    border: 1px solid #FFFFFF;
+    background-color: transparent;
+  }
+
+  .ev-chart-legend-overlay-tooltip {
+    position: absolute;
+    font-size: 12px;
+    line-height: 1.4em;
+  }
+}
+
 .ev-chart-resize-bar {
   position: absolute;
   background: transparent;

package/src/components/chart/uses.js

@@ -22,6 +22,7 @@ const DEFAULT_OPTIONS = {
   },
   legend: {
     show: true,
+    type: 'icon',
     position: 'right',
     color: '#353740',
     inactive: '#aaa',
@@ -109,12 +110,13 @@ const DEFAULT_OPTIONS = {
   heatMapColor: {
     min: '#FFFFFF',
     max: '#0052FF',
-    categoryCnt: 5,
+    categoryCnt: 1,
     stroke: {
       show: false,
       color: '#FFFFFF',
       lineWidth: 1,
       opacity: 1,
+      radius: 0,
     },
     error: '#FF0000',
     decimalPoint: 0,

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

@@ -524,6 +524,7 @@ export default {
         };
         const setParentShow = (data) => {
           if (!data?.parent) {
+            setChildShow(data);
             return;
           }
           const { parent } = data;