evui 3.4.3 → 3.4.6

package/package.json

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

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

@@ -379,12 +379,12 @@ class EvChart {
     return axes.map((axis) => {
       switch (axis.type) {
         case 'linear':
-          return new LinearScale(dir, axis, ctx, options);
+          return new LinearScale(dir, axis, ctx, labels, options);
         case 'time':
           if (axis.categoryMode) {
             return new TimeCategoryScale(dir, axis, ctx, labels, options);
           }
-          return new TimeScale(dir, axis, ctx, options);
+          return new TimeScale(dir, axis, ctx, labels, options);
         case 'log':
           return new LogarithmicScale(dir, axis, ctx);
         case 'step':

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

@@ -10,7 +10,7 @@ import {
 import Util from '../helpers/helpers.util';
 
 class Scale {
-  constructor(type, axisOpt, ctx, options) {
+  constructor(type, axisOpt, ctx, labels, options) {
     const merged = defaultsDeep({}, axisOpt, AXIS_OPTION);
     Object.keys(merged).forEach((key) => {
       this[key] = merged[key];
@@ -19,6 +19,7 @@ class Scale {
     this.type = type;
     this.ctx = ctx;
     this.units = AXIS_UNITS[this.type];
+    this.labels = labels;
     this.options = options;
 
     if (!this.position) {
@@ -275,10 +276,22 @@ class Scale {
     }
 
     if (this.labelStyle?.show) {
-      const labelGap = (endPoint - startPoint) / steps;
+      const distance = endPoint - startPoint;
+      const labelGap = distance / steps;
       const ticks = [];
+      const size = stepInfo.interval;
       let labelCenter = null;
       let linePosition = null;
+      let offsetStartPoint = startPoint;
+      let axisMinForLabel = axisMin;
+
+      if (this.type === 'x' && options?.axesX[0].flow && this.labels.length !== steps + 1) {
+        const axisMinByMinutes = Math.floor(axisMin / size) * size;
+        if (axisMinByMinutes !== +axisMin) {
+          axisMinForLabel = axisMinByMinutes + size;
+          offsetStartPoint += (distance / (axisMax - axisMin)) * (axisMinForLabel - axisMin);
+        }
+      }
 
       ctx.strokeStyle = this.gridLineColor;
       ctx.lineWidth = 1;
@@ -286,82 +299,85 @@ class Scale {
 
       let labelText;
       for (let ix = 0; ix <= steps; ix++) {
-        ctx.beginPath();
-        ticks[ix] = axisMin + (ix * stepValue);
+        labelCenter = Math.round(offsetStartPoint + (labelGap * ix));
 
-        labelCenter = Math.round(startPoint + (labelGap * ix));
-        linePosition = labelCenter + aliasPixel;
-        labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
+        if (labelCenter <= endPoint || this.type !== 'x' || !options?.axesX[0].flow || this.labels.length === steps + 1) {
+          ctx.beginPath();
+          ticks[ix] = axisMinForLabel + (ix * stepValue);
 
-        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);
+          linePosition = labelCenter + aliasPixel;
+          labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
 
-        const labelColor = this.labelStyle.color;
-        let defaultOpacity = 1;
+          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);
 
-        if (Util.getColorStringType(labelColor) === 'RGBA') {
-          defaultOpacity = Util.getOpacity(labelColor);
-        }
+          const labelColor = this.labelStyle.color;
+          let defaultOpacity = 1;
 
-        ctx.fillStyle = Util.colorStringToRgba(labelColor, isBlurredLabel ? 0.1 : defaultOpacity);
+          if (Util.getColorStringType(labelColor) === 'RGBA') {
+            defaultOpacity = Util.getOpacity(labelColor);
+          }
 
-        let labelPoint;
+          ctx.fillStyle = Util.colorStringToRgba(labelColor, isBlurredLabel ? 0.1 : defaultOpacity);
 
-        if (this.type === 'x') {
-          labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
-          if (options?.brush?.showLabel || !options?.brush) {
-            ctx.fillText(labelText, labelCenter, labelPoint);
-          }
+          let labelPoint;
 
-          if (!isBlurredLabel
-            && options?.selectItem?.showLabelTip
-            && hitInfo?.label
-            && !this.options?.horizontal) {
-            const selectedLabel = this.getLabelFormat(
-              Math.min(axisMax, hitInfo.label + (0 * stepValue)),
-            );
-            if (selectedLabel === labelText) {
-              const height = Math.round(ctx.measureText(this.labelStyle?.fontSize).width);
-              Util.showLabelTip({
-                ctx: this.ctx,
-                width: Math.round(ctx.measureText(selectedLabel).width) + 10,
-                height,
-                x: labelCenter,
-                y: labelPoint + (height - 2),
-                borderRadius: 2,
-                arrowSize: 3,
-                text: labelText,
-                backgroundColor: options?.selectItem?.labelTipStyle?.backgroundColor,
-                textColor: options?.selectItem?.labelTipStyle?.textColor,
-              });
+          if (this.type === 'x') {
+            labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
+            if (options?.brush?.showLabel || !options?.brush) {
+              ctx.fillText(labelText, labelCenter, labelPoint);
             }
-          }
-          if (ix !== 0 && this.showGrid) {
-            ctx.moveTo(linePosition, offsetPoint);
-            ctx.lineTo(linePosition, offsetCounterPoint);
-          }
-        } else {
-          labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
-          if (options?.brush?.showLabel || !options?.brush) {
-            ctx.fillText(labelText, labelPoint, labelCenter);
-          }
 
-          if (ix === steps) {
-            linePosition -= 1;
-          }
+            if (!isBlurredLabel
+              && options?.selectItem?.showLabelTip
+              && hitInfo?.label
+              && !this.options?.horizontal) {
+              const selectedLabel = this.getLabelFormat(
+                Math.min(axisMax, hitInfo.label + (0 * stepValue)),
+              );
+              if (selectedLabel === labelText) {
+                const height = Math.round(ctx.measureText(this.labelStyle?.fontSize).width);
+                Util.showLabelTip({
+                  ctx: this.ctx,
+                  width: Math.round(ctx.measureText(selectedLabel).width) + 10,
+                  height,
+                  x: labelCenter,
+                  y: labelPoint + (height - 2),
+                  borderRadius: 2,
+                  arrowSize: 3,
+                  text: labelText,
+                  backgroundColor: options?.selectItem?.labelTipStyle?.backgroundColor,
+                  textColor: options?.selectItem?.labelTipStyle?.textColor,
+                });
+              }
+            }
+            if ((ix !== 0 || options?.axesX[0].flow) && this.showGrid) {
+              ctx.moveTo(linePosition, offsetPoint);
+              ctx.lineTo(linePosition, offsetCounterPoint);
+            }
+          } else {
+            labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
+            if (options?.brush?.showLabel || !options?.brush) {
+              ctx.fillText(labelText, labelPoint, labelCenter);
+            }
 
-          if (ix !== 0 && this.showGrid) {
-            ctx.moveTo(offsetPoint, linePosition);
-            ctx.lineTo(offsetCounterPoint, linePosition);
+            if (ix === steps) {
+              linePosition -= 1;
+            }
+
+            if (ix !== 0 && this.showGrid) {
+              ctx.moveTo(offsetPoint, linePosition);
+              ctx.lineTo(offsetCounterPoint, linePosition);
+            }
           }
-        }
 
-        ctx.stroke();
-        ctx.closePath();
+          ctx.stroke();
+          ctx.closePath();
+        }
       }
     }
 

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

@@ -5,11 +5,6 @@ import Util from '../helpers/helpers.util';
 import { truthyNumber } from '../../../common/utils';
 
 class StepScale extends Scale {
-  constructor(type, axisOpt, ctx, labels, options) {
-    super(type, axisOpt, ctx, options);
-    this.labels = labels;
-  }
-
   /**
    * Calculate min/max value, label and size information for step scale
    * @param {object} minMax       min/max information (unused on step scale)

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

@@ -4,12 +4,6 @@ import Scale from './scale';
 import Util from '../helpers/helpers.util';
 
 class TimeCategoryScale extends Scale {
-  constructor(type, axisOpt, ctx, labels, options) {
-    super(type, axisOpt, ctx);
-    this.labels = labels;
-    this.options = options;
-  }
-
   /**
    * Transforming label by designated format
    * @param {number} value       label value

package/src/components/checkbox/Checkbox.vue

@@ -16,7 +16,10 @@
       :readonly="readonly"
       @change="changeMv"
     />
-    <span class="ev-checkbox-label" :title="label">
+    <span
+      ref="checkboxLabel"
+      class="ev-checkbox-label"
+    >
       <template v-if="$slots.default">
         <slot />
       </template>
@@ -28,7 +31,7 @@
 </template>
 
 <script>
-import { ref, computed, watch, nextTick, inject } from 'vue';
+import { ref, computed, watch, nextTick, inject, onMounted } from 'vue';
 
 export default {
   name: 'EvCheckbox',
@@ -41,6 +44,10 @@ export default {
       type: [String, Number, Boolean, Symbol],
       default: null,
     },
+    tooltipTitle: {
+      type: String,
+      default: '',
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -60,6 +67,20 @@ export default {
     change: null,
   },
   setup(props, { emit }) {
+    /**
+     * checkbox label Ref
+     */
+    const checkboxLabel = ref();
+
+    /**
+     * checkbox label의 title(마우스 호버 시 보이는 내용)사용 되는
+     * tooltipTitle props의 값이 있을 시 태그에 title 속성 추가
+     */
+    onMounted(() => {
+      if (checkboxLabel.value && props.tooltipTitle) {
+        checkboxLabel.value.title = props.tooltipTitle;
+      }
+    });
     /**
      * checkbox Ref
      */
@@ -121,6 +142,7 @@ export default {
 
     return {
       mv,
+      checkboxLabel,
       checkbox,
       checked,
       changeMv,

package/src/components/contextMenu/uses.js

@@ -35,6 +35,9 @@ export const usePosition = () => {
     top: null,
     left: null,
     right: null,
+    pageY: null,
+    pageX: null,
+    clientX: null,
   });
 
   /**
@@ -52,6 +55,9 @@ export const usePosition = () => {
       const docHeight = document.documentElement.clientHeight;
       const docWidth = document.documentElement.clientWidth;
       const RIGHT_BUFFER_PX = 20;
+      menuStyle.pageX = e.pageX;
+      menuStyle.pageY = e.pageY;
+      menuStyle.clientX = e.clientX;
       if (docHeight < e.clientY + menuListHeight) {
         // dropTop
         menuStyle.top = `${e.pageY - menuListHeight}px`;