evui 3.1.55 → 3.2.0

package/package.json

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

package/src/components/chart/Chart.vue

@@ -106,14 +106,8 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
       });
 
       const redrawChart = () => {
-        if (isInit) {
-          evChart.update({
-            updateSeries: false,
-            updateSelTip: {
-              update: false,
-              keepDomain: false,
-            },
-          });
+        if (evChart && 'resize' in evChart && isInit) {
+          evChart.resize();
         }
       };
 

package/src/components/chart/chart.core.js

@@ -90,7 +90,6 @@ class EvChart {
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
 
-    this.initScale();
     this.drawChart();
 
     if (tooltip.use) {
@@ -131,6 +130,7 @@ class EvChart {
    * @returns {undefined}
    */
   drawChart(hitInfo) {
+    this.initScale();
     this.labelRange = this.getAxesLabelRange();
     this.axesSteps = this.calculateSteps();
     this.drawAxis(hitInfo);
@@ -644,8 +644,8 @@ class EvChart {
     this.bufferCtx.restore();
     this.bufferCtx.save();
 
-    this.getChartDOMRect();
     this.initScale();
+    this.chartRect = this.getChartRect();
     this.drawChart();
   }
 
@@ -658,7 +658,6 @@ class EvChart {
   render(hitInfo) {
     this.clear();
     this.chartRect = this.getChartRect();
-    this.initScale();
     this.drawChart(hitInfo);
   }
 

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

@@ -151,7 +151,6 @@ class Bar {
       this.drawBar({
         ctx,
         positions: { x, y, w, h },
-        isTop: item.isTop,
       });
 
       if (showValue.use) {
@@ -213,7 +212,6 @@ class Bar {
     this.drawBar({
       ctx,
       positions: { x, y, w, h: this.isHorizontal ? -h : h },
-      isTop: item.data.isTop,
     });
 
     if (showValue.use) {
@@ -411,7 +409,7 @@ class Bar {
     ctx.restore();
   }
 
-  drawBar({ ctx, positions, isTop }) {
+  drawBar({ ctx, positions }) {
     const isHorizontal = this.isHorizontal;
     const isStackBar = 'stackIndex' in this;
     const isBorderRadius = this.borderRadius && this.borderRadius > 0;
@@ -423,7 +421,7 @@ class Bar {
       return;
     }
 
-    if ((!isStackBar && isBorderRadius) || (isStackBar && isBorderRadius && isTop)) {
+    if (isBorderRadius && !isStackBar) {
       try {
         this.drawRoundedRect(ctx, positions);
       } catch (e) {

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

@@ -311,7 +311,6 @@ class Line {
    * @returns {array}
    */
   findItems({ xsp, width }) {
-    console.log(this.data);
     const xep = xsp + width;
 
     return this.data.filter(seriesData => (xsp - 1 <= seriesData.xp) && (seriesData.xp <= xep + 1));

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

@@ -69,18 +69,19 @@ class Scatter {
       return item;
     }, this.data[0]);
 
-    const color = this.color;
-    const pointFillColor = this.pointFill;
     const getOpacity = (colorStr) => {
       const noneDownplayOpacity = colorStr.includes('rgba') ? Util.getOpacity(colorStr) : 1;
       return this.state === 'downplay' ? 0.1 : noneDownplayOpacity;
     };
 
-    ctx.fillStyle = Util.colorStringToRgba(pointFillColor, getOpacity(pointFillColor));
-    ctx.strokeStyle = Util.colorStringToRgba(color, getOpacity(color));
-
     this.data.forEach((curr) => {
       if (curr.xp !== null && curr.yp !== null) {
+        const color = curr.dataColor || this.color;
+        ctx.strokeStyle = Util.colorStringToRgba(color, getOpacity(color));
+
+        const pointFillColor = curr.dataColor || this.pointFill;
+        ctx.fillStyle = Util.colorStringToRgba(pointFillColor, getOpacity(pointFillColor));
+
         Canvas.drawPoint(ctx, this.pointStyle, this.pointSize, curr.xp, curr.yp);
       }
     });
@@ -102,6 +103,72 @@ class Scatter {
 
     return items;
   }
+
+  /**
+   * Draw item highlight
+   * @param {object}   item       object for drawing series data
+   * @param {object}   context    canvas context
+   * @param {boolean}  isMax      determines if this series has max value
+   *
+   * @returns {undefined}
+   */
+  itemHighlight(item, context) {
+    const gdata = item.data;
+    const ctx = context;
+
+    const x = gdata.xp;
+    const y = gdata.yp;
+
+    ctx.save();
+    if (x !== null && y !== null) {
+      const color = gdata.dataColor || this.color;
+      const pointFillColor = gdata.dataColor || this.pointFill;
+
+      ctx.strokeStyle = Util.colorStringToRgba(color, 0);
+
+      ctx.fillStyle = Util.colorStringToRgba(pointFillColor, this.highlight.maxShadowOpacity);
+      Canvas.drawPoint(ctx, this.pointStyle, this.highlight.maxShadowSize, x, y);
+
+      ctx.fillStyle = color;
+      Canvas.drawPoint(ctx, this.pointStyle, this.highlight.maxSize, x, y);
+
+      ctx.fillStyle = '#fff';
+      Canvas.drawPoint(ctx, this.pointStyle, this.highlight.defaultSize, x, y);
+    }
+
+    ctx.restore();
+  }
+
+  /**
+   * Find graph item for tooltip
+   * @param {array}  offset       mouse position
+   *
+   * @returns {object} graph item
+   */
+  findGraphData(offset) {
+    const xp = offset[0];
+    const yp = offset[1];
+    const item = { data: null, hit: false, color: this.color };
+    const pointSize = this.pointSize;
+    const gdata = this.data;
+
+    const foundItem = gdata.find((data) => {
+      const x = data.xp;
+      const y = data.yp;
+
+      return (x - pointSize <= xp)
+        && (xp <= x + pointSize)
+        && (y - pointSize <= yp)
+        && (yp <= y + pointSize);
+    });
+
+    if (foundItem) {
+      item.data = foundItem;
+      item.hit = true;
+    }
+
+    return item;
+  }
 }
 
 export default Scatter;

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

@@ -19,6 +19,16 @@ const modules = {
           } else {
             this.createPieDataSet(data, type);
           }
+        } else if (typeKey === 'scatter') {
+          type.forEach((sId) => {
+            const series = this.seriesList[sId];
+            const sData = data[sId];
+
+            if (series && sData) {
+              series.data = this.addSeriesDSforScatter(sData);
+              series.minMax = this.getSeriesMinMax(series.data);
+            }
+          });
         } else {
           type.forEach((sId) => {
             const series = this.seriesList[sId];
@@ -26,7 +36,7 @@ const modules = {
 
             if (series && sData) {
               if (series.isExistGrp && series.stackIndex) {
-                series.data = this.addSeriesStackDS(sData, label, series);
+                series.data = this.addSeriesStackDS(sData, label, series.bsIds, series.stackIndex);
               } else {
                 series.data = this.addSeriesDS(sData, label);
               }
@@ -173,12 +183,12 @@ const modules = {
    * Take data and label to create stack data for each series
    * @param {object}  data    chart series info
    * @param {object}  label   chart label
-   * @param {object}  series  series Information
+   * @param {array}   bsIds   stacked base data ID List
+   * @param {number}  sIdx    series ordered index
    *
    * @returns {array} data for each series
    */
-  addSeriesStackDS(data, label, series) {
-    const bsIds = series.bsIds; // stacked base data ID List
+  addSeriesStackDS(data, label, bsIds, sIdx = 0) {
     const isHorizontal = this.options.horizontal;
     const sdata = [];
 
@@ -201,8 +211,6 @@ const modules = {
     };
 
     data.forEach((curr, index) => {
-      const { stackIndex, show: isShowSeries } = series;
-      const isTop = true; // is top position on stack (Stacked or not, default is true)
       const baseIndex = bsIds.length - 1 < 0 ? 0 : bsIds.length - 1;
       let bdata = getBaseDataPosition(baseIndex, index); // base(previous) series data
       let odata = curr; // current series original data
@@ -216,7 +224,7 @@ const modules = {
         }
 
         const oData = odata?.value ?? odata;
-        if (stackIndex > 0) {
+        if (sIdx > 0) {
           if (oData != null) {
             gdata = bdata + oData;
           } else {
@@ -228,14 +236,7 @@ const modules = {
           gdata = oData;
         }
 
-        if (gdata && isShowSeries) {
-          for (let idx = baseIndex; idx > -1; idx--) {
-            const prevSeriesData = this.seriesList[bsIds[idx]];
-            prevSeriesData.data[index].isTop = false;
-          }
-        }
-
-        sdata.push(this.addData(gdata, ldata, odata, bdata, isTop));
+        sdata.push(this.addData(gdata, ldata, odata, bdata));
       }
     });
 
@@ -270,17 +271,33 @@ const modules = {
     return sdata;
   },
 
+  /**
+   * Take data to create data for each series
+   * @param {array}  data   data array for each series
+   * @returns {array} data info added position and etc
+   */
+  addSeriesDSforScatter(data) {
+    return data.map((item) => {
+      const ldata = item.x;
+      const gdata = {
+        value: item.y,
+        color: item?.color || null,
+      };
+
+      return this.addData(gdata, ldata, gdata);
+    });
+  },
+
   /**
    * Take data to create data object for graph
    * @param {object}  gdata    graph data (y-axis value for vertical chart)
    * @param {object}  ldata    label data (x-axis value for vertical chart)
    * @param {object}  odata    original data (without stacked value)
    * @param {object}  bdata    base data (stacked value)
-   * @param {boolean} isTop    is top position on stack (Stacked or not, default is true)
 
    * @returns {object} data for each graph point
    */
-  addData(gdata, ldata, odata = null, bdata = null, isTop = true) {
+  addData(gdata, ldata, odata = null, bdata = null) {
     let data;
     let gdataValue = null;
     let odataValue = null;
@@ -312,7 +329,6 @@ const modules = {
     data.w = null;
     data.h = null;
     data.dataColor = gdataColor ?? odataColor;
-    data.isTop = isTop;
 
     return data;
   },
@@ -494,17 +510,17 @@ const modules = {
 
         if (smm && series.show) {
           if (!isHorizontal) {
-            if (smm.minX && ((!minmax.x[axisX].min || (smm.minX < minmax.x[axisX].min)))) {
+            if (smm.minX && ((minmax.x[axisX].min === null || (smm.minX < minmax.x[axisX].min)))) {
               minmax.x[axisX].min = smm.minX;
             }
-            if (!minmax.y[axisY].min || (smm.minY < minmax.y[axisY].min)) {
+            if (minmax.y[axisY].min === null || (smm.minY < minmax.y[axisY].min)) {
               minmax.y[axisY].min = smm.minY;
             }
           } else {
-            if (!minmax.x[axisX].min || (smm.minX < minmax.x[axisX].min)) {
+            if (minmax.x[axisX].min === null || (smm.minX < minmax.x[axisX].min)) {
               minmax.x[axisX].min = smm.minX;
             }
-            if (smm.minY && (!minmax.y[axisY].min || (smm.minY < minmax.y[axisY].min))) {
+            if (smm.minY && (minmax.y[axisY].min === null || (smm.minY < minmax.y[axisY].min))) {
               minmax.y[axisY].min = smm.minY;
             }
           }

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

@@ -62,7 +62,7 @@ const modules = {
         this.drawSelectionArea(this.dragInfoBackup);
       }
 
-      if (indicator.use && type !== 'pie') {
+      if (indicator.use && type !== 'pie' && type !== 'scatter') {
         this.drawIndicator(offset, indicator.color);
       }
     };
@@ -147,6 +147,7 @@ const modules = {
       const { dragSelection, type } = this.options;
 
       if (dragSelection.use && (type === 'scatter' || type === 'line')) {
+        this.removeSelectionArea();
         this.dragStart(e, type);
       }
     };
@@ -270,8 +271,7 @@ const modules = {
       }
 
       if (!this.options.dragSelection.keepDisplay) {
-        this.dragInfoBackup = null;
-        this.overlayClear();
+        this.removeSelectionArea();
       }
 
       this.dragInfo = null;
@@ -299,6 +299,14 @@ const modules = {
     ctx.globalAlpha = 1;
   },
 
+  /** Remove drag selection area
+   *
+   */
+  removeSelectionArea() {
+    this.dragInfoBackup = null;
+    this.overlayClear();
+  },
+
   /**
    * Computing mouse position on canvas
    *

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

@@ -312,10 +312,20 @@ class Scale {
         if (this.type === 'x') {
           fromPos = Canvas.calculateX(from ?? minX, axisMin, axisMax, xArea, minX);
           toPos = Canvas.calculateX(to ?? maxX, axisMin, axisMax, xArea, minX);
+
+          if (fromPos === null || toPos === null) {
+            return;
+          }
+
           this.drawXPlotBand(fromPos, toPos, minX, maxX, minY, maxY);
         } else {
           fromPos = Canvas.calculateY(from ?? axisMin, axisMin, axisMax, yArea, maxY);
           toPos = Canvas.calculateY(to ?? axisMax, axisMin, axisMax, yArea, maxY);
+
+          if (fromPos === null || toPos === null) {
+            return;
+          }
+
           this.drawYPlotBand(fromPos, toPos, minX, maxX, minY, maxY);
         }
 
@@ -341,9 +351,19 @@ class Scale {
         let dataPos;
         if (this.type === 'x') {
           dataPos = Canvas.calculateX(value, axisMin, axisMax, xArea, minX);
+
+          if (dataPos === null) {
+            return;
+          }
+
           this.drawXPlotLine(dataPos, minX, maxX, minY, maxY);
         } else {
           dataPos = Canvas.calculateY(value, axisMin, axisMax, yArea, maxY);
+
+          if (dataPos === null) {
+            return;
+          }
+
           this.drawYPlotLine(dataPos, minX, maxX, minY, maxY);
         }
 

package/src/components/chart/uses.js

@@ -98,7 +98,13 @@ const DEFAULT_DATA = {
 export const useModel = () => {
   const { emit } = getCurrentInstance();
 
-  const getNormalizedOptions = options => defaultsDeep({}, options, DEFAULT_OPTIONS);
+  const getNormalizedOptions = (options) => {
+    if (options.type === 'scatter') {
+      DEFAULT_OPTIONS.tooltip.use = false;
+    }
+
+    return defaultsDeep({}, options, DEFAULT_OPTIONS);
+  };
   const getNormalizedData = data => defaultsDeep(data, DEFAULT_DATA);
 
   const eventListeners = {

package/src/components/grid/Grid.vue

@@ -9,11 +9,7 @@
       <template #toolbarWrapper>
         <slot
           name="toolbar"
-          :item="{
-            onRefresh: onRefresh,
-            onDelete: onDelete,
-            onSearch: onSearch,
-          }"
+          :item="{ onSearch: onSearch }"
         >
         </slot>
       </template>
@@ -97,7 +93,7 @@
               <span
                 :title="column.caption"
                 class="column-name"
-                @click.stop="onSort(column.field)"
+                @click.stop="onSort(column)"
               >
                 {{ column.caption }}
               </span>
@@ -206,9 +202,6 @@
                     :item="{
                       row,
                       column,
-                      onRowDelete: onRowDelete,
-                      onRowEdit: onRowEdit,
-                      onDetailPopup: onDetailPopup,
                     }"
                   >
                   </slot>
@@ -253,18 +246,12 @@
         @apply-filter="onApplyFilter"
         @before-close="onCloseFilterWindow"
       />
-      <ev-window
-        v-model:visible="isDetailPopWin"
-        title="DETAIL POPUP"
-      >
-        <div>{{detailPopData}}</div>
-      </ev-window>
     </div>
   </div>
 </template>
 
 <script>
-import { reactive, ref, toRefs, computed, watch, onMounted, getCurrentInstance } from 'vue';
+import { reactive, toRefs, computed, watch, onMounted } from 'vue';
 import FilterWindow from './grid.filter.window';
 import Toolbar from './grid.toolbar';
 import {
@@ -331,7 +318,6 @@ export default {
       getColumnIndex,
       setPixelUnit,
     } = commonFunctions();
-    const { ctx } = getCurrentInstance();
     const showHeader = computed(() =>
       (props.option.showHeader === undefined ? true : props.option.showHeader));
     const stripeStyle = computed(() => (props.option.style?.stripe || false));
@@ -625,51 +611,6 @@ export default {
         setStore([], false);
       }, 500);
     };
-    const onRefresh = () => {
-      console.log('On click refresh button');
-    };
-    const onDelete = () => {
-      ctx.$messagebox({
-        title: 'Delete',
-        message: 'Are you sure you want to delete checked item?',
-        iconClass: 'ev-icon-trash3',
-        onClose: (type) => {
-          if (type === 'ok') {
-            stores.originStore = stores.store.filter(item => !item[1]);
-            setStore([], false);
-          }
-        },
-      });
-    };
-    const onRowDelete = (index) => {
-      ctx.$messagebox({
-        title: 'Delete',
-        message: 'Are you sure you want to delete this item?',
-        iconClass: 'ev-icon-trash3',
-        onClose: (type) => {
-          if (type === 'ok') {
-            stores.originStore = stores.store.filter(item => item[0] !== index);
-            setStore([], false);
-          }
-        },
-      });
-      // emit
-    };
-    const onRowEdit = (row) => {
-      ctx.$messagebox({
-        title: 'Edit',
-        message: row[2],
-        iconClass: 'ev-icon-pencil',
-        showCancelBtn: false,
-      });
-      // emit
-    };
-    const isDetailPopWin = ref(false);
-    const detailPopData = ref('');
-    const onDetailPopup = (row) => {
-      isDetailPopWin.value = true;
-      detailPopData.value = row[2];
-    };
     const isFilterButton = field => filterInfo.isFiltering && field !== 'db-icon' && field !== 'user-icon';
     return {
       showHeader,
@@ -685,8 +626,6 @@ export default {
       ...toRefs(checkInfo),
       ...toRefs(sortInfo),
       ...toRefs(contextInfo),
-      isDetailPopWin,
-      detailPopData,
       isRenderer,
       getComponentName,
       getConvertValue,
@@ -713,12 +652,7 @@ export default {
       updateData,
       setContextMenu,
       onContextMenu,
-      onRefresh,
-      onDelete,
       onSearch,
-      onRowEdit,
-      onRowDelete,
-      onDetailPopup,
       isFilterButton,
     };
   },

package/src/components/grid/uses.js

@@ -475,17 +475,20 @@ export const sortEvent = (params) => {
   /**
    * sort 이벤트를 처리한다.
    *
-   * @param {string} field - 컬럼 field
+   * @param {object} column - 컬럼 정보
    */
-  const onSort = (field) => {
-    if (sortInfo.sortField !== field) {
-      order.orders = ['asc', 'desc', 'init'];
-      sortInfo.sortField = field;
-    }
-    sortInfo.sortOrder = order.dequeue();
-    order.enqueue(sortInfo.sortOrder);
+  const onSort = (column) => {
+    const sortable = column.sortable === undefined ? true : column.sortable;
+    if (sortable) {
+      if (sortInfo.sortField !== column?.field) {
+        order.orders = ['asc', 'desc', 'init'];
+        sortInfo.sortField = column?.field;
+      }
+      sortInfo.sortOrder = order.dequeue();
+      order.enqueue(sortInfo.sortOrder);
 
-    sortInfo.isSorting = true;
+      sortInfo.isSorting = true;
+    }
   };
   /**
    * 설정값에 따라 해당 컬럼 데이터에 대해 정렬한다.

package/src/components/textField/TextField.vue

@@ -61,7 +61,7 @@
           :class="{ 'on': isPasswordVisible }"
           @click="changePasswordVisible"
         >
-          <i class="ev-icon-radio-on"/>
+          <i :class="isPasswordVisible ? 'ev-icon-visibility' : 'ev-icon-visibility-off'"/>
         </span>
         <span
           v-if="type === 'search'"

package/src/components/treeGrid/TreeGrid.vue

@@ -246,6 +246,7 @@ export default {
       treeStore: [],
       viewStore: [],
       filterStore: [],
+      searchStore: computed(() => stores.treeStore.filter(item => item.isFilter)),
       treeRows: props.rows,
       showTreeStore: computed(() => stores.treeStore.filter(item => item.show)),
       orderedColumns: computed(() =>
@@ -330,20 +331,22 @@ export default {
 
     const {
       onSearch,
-    } = filterEvent({ stores, getConvertValue, calculatedColumn, updateVScroll });
+    } = filterEvent({ checkInfo, stores, getConvertValue, calculatedColumn, updateVScroll });
 
     watch(
       () => props.checked,
       (value) => {
-        const store = stores.treeStore;
+        let store = stores.treeStore;
+        if (stores.searchStore.length > 0) {
+          store = stores.searchStore;
+        }
+        const isCheck = store.every(n => n.checked === true);
         checkInfo.isHeaderChecked = false;
         checkInfo.checkedRows = value;
         for (let ix = 0; ix < store.length; ix++) {
           store[ix].checked = value.includes(store[ix]);
         }
-        if (value.length && store.length === value.length) {
-          checkInfo.isHeaderChecked = true;
-        }
+        checkInfo.isHeaderChecked = isCheck;
       },
     );
     watch(