evui 3.1.38 → 3.1.42

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

@@ -1,3 +1,5 @@
+import { defaultsDeep } from 'lodash-es';
+import { PLOT_BAND_OPTION, PLOT_LINE_OPTION } from '@/components/chart/helpers/helpers.constant';
 import Scale from './scale';
 import Util from '../helpers/helpers.util';
 
@@ -73,90 +75,159 @@ class StepScale extends Scale {
     const offsetCounterPoint = aPos[this.units.rectOffsetCounter(this.position)];
     const maxWidth = chartRect.chartWidth / (this.labels.length + 2);
 
-    // label font 설정
-    ctx.font = Util.getLabelStyle(this.labelStyle);
+    if (this.labelStyle?.show) {
+      // label font 설정
+      ctx.font = Util.getLabelStyle(this.labelStyle);
 
-    if (this.type === 'x') {
-      ctx.textAlign = 'center';
-      ctx.textBaseline = this.position === 'top' ? 'bottom' : 'top';
-    } else {
-      ctx.textAlign = this.position === 'left' ? 'right' : 'left';
-      ctx.textBaseline = 'middle';
-    }
+      if (this.type === 'x') {
+        ctx.textAlign = 'center';
+        ctx.textBaseline = this.position === 'top' ? 'bottom' : 'top';
+      } else {
+        ctx.textAlign = this.position === 'left' ? 'right' : 'left';
+        ctx.textBaseline = 'middle';
+      }
 
-    ctx.fillStyle = this.labelStyle.color;
-    ctx.lineWidth = 1;
-    const aliasPixel = Util.aliasPixel(ctx.lineWidth);
-
-    ctx.beginPath();
-    ctx.strokeStyle = this.axisLineColor;
-    if (this.type === 'x') {
-      ctx.moveTo(startPoint, offsetPoint + aliasPixel);
-      ctx.lineTo(endPoint, offsetPoint + aliasPixel);
-    } else {
-      ctx.moveTo(offsetPoint + aliasPixel, startPoint);
-      ctx.lineTo(offsetPoint + aliasPixel, endPoint);
-    }
-    ctx.stroke();
+      ctx.fillStyle = this.labelStyle.color;
+      ctx.lineWidth = 1;
+      const aliasPixel = Util.aliasPixel(ctx.lineWidth);
 
-    if (steps === 0) {
-      return;
-    }
+      ctx.beginPath();
+      ctx.strokeStyle = this.axisLineColor;
+      if (this.type === 'x') {
+        ctx.moveTo(startPoint, offsetPoint + aliasPixel);
+        ctx.lineTo(endPoint, offsetPoint + aliasPixel);
+      } else {
+        ctx.moveTo(offsetPoint + aliasPixel, startPoint);
+        ctx.lineTo(offsetPoint + aliasPixel, endPoint);
+      }
+      ctx.stroke();
 
-    const labelGap = (endPoint - startPoint) / labels.length;
-    let labelCenter = null;
-    let linePosition = null;
+      if (steps === 0) {
+        return;
+      }
 
-    ctx.beginPath();
-    ctx.strokeStyle = this.gridLineColor;
+      const labelGap = (endPoint - startPoint) / labels.length;
+      let labelCenter = null;
+      let linePosition = null;
 
-    let labelText;
-    let labelPoint;
+      ctx.beginPath();
+      ctx.strokeStyle = this.gridLineColor;
 
-    labels.forEach((item, index) => {
-      labelCenter = Math.round(startPoint + (labelGap * index));
-      linePosition = labelCenter + aliasPixel;
-      labelText = this.getLabelFormat(item, maxWidth);
+      let labelText;
+      let labelPoint;
 
-      if (this.type === 'x') {
-        labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
-        ctx.fillText(labelText, labelCenter + (labelGap / 2), labelPoint);
-        if (this.options?.selectItem?.showLabelTip && hitInfo?.label && !this.options?.horizontal) {
-          const selectedLabel = hitInfo.label;
-          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 + (labelGap / 2),
-              y: labelPoint + (height - 2),
-              borderRadius: 2,
-              arrowSize: 3,
-              text: labelText,
-              backgroundColor: this.options?.selectItem?.labelTipStyle?.backgroundColor,
-              textColor: this.options?.selectItem?.labelTipStyle?.textColor,
-            });
+      labels.forEach((item, index) => {
+        labelCenter = Math.round(startPoint + (labelGap * index));
+        linePosition = labelCenter + aliasPixel;
+        labelText = this.getLabelFormat(item, maxWidth);
+
+        if (this.type === 'x') {
+          labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
+          ctx.fillText(labelText, labelCenter + (labelGap / 2), labelPoint);
+
+          if (this.options?.selectItem?.showLabelTip
+            && hitInfo?.label
+            && !this.options?.horizontal
+          ) {
+            const selectedLabel = hitInfo.label;
+            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 + (labelGap / 2),
+                y: labelPoint + (height - 2),
+                borderRadius: 2,
+                arrowSize: 3,
+                text: labelText,
+                backgroundColor: this.options?.selectItem?.labelTipStyle?.backgroundColor,
+                textColor: this.options?.selectItem?.labelTipStyle?.textColor,
+              });
+            }
+          }
+
+          if (index > 0 && this.showGrid) {
+            ctx.moveTo(linePosition, offsetPoint);
+            ctx.lineTo(linePosition, offsetCounterPoint);
+          }
+        } else {
+          labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
+          ctx.fillText(labelText, labelPoint, labelCenter + (labelGap / 2));
+
+          if (index > 0 && this.showGrid) {
+            ctx.moveTo(offsetPoint, linePosition);
+            ctx.lineTo(offsetCounterPoint, linePosition);
           }
         }
+        ctx.stroke();
+      });
+
+      ctx.closePath();
+    }
+
+    // draw plot lines and plot bands
+    if (this.plotBands?.length || this.plotLines?.length) {
+      const padding = Util.aliasPixel(ctx.lineWidth) + 1;
+      const minX = aPos.x1 + padding;
+      const maxX = aPos.x2;
+      const minY = aPos.y1 + padding;
+      const maxY = aPos.y2;
+      const labelGap = (endPoint - startPoint) / (this.labelStyle.show ? labels.length : 1);
 
-        if (index > 0 && this.showGrid) {
-          ctx.moveTo(linePosition, offsetPoint);
-          ctx.lineTo(linePosition, offsetCounterPoint);
+      this.plotBands?.forEach((plotBand) => {
+        if (!plotBand.from && !plotBand.to) {
+          return;
         }
-      } else {
-        labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
-        ctx.fillText(labelText, labelPoint, labelCenter + (labelGap / 2));
 
-        if (index > 0 && this.showGrid) {
-          ctx.moveTo(offsetPoint, linePosition);
-          ctx.lineTo(offsetCounterPoint, linePosition);
+        const mergedPlotBandOpt = defaultsDeep({}, plotBand, PLOT_BAND_OPTION);
+        const { from = 0, to = labels.length, label: labelOpt } = mergedPlotBandOpt;
+        const fromPos = Math.round(startPoint + (labelGap * from));
+        const toPos = Math.round(startPoint + (labelGap * to));
+
+        this.setPlotBandStyle(mergedPlotBandOpt);
+
+        if (this.type === 'x') {
+          this.drawXPlotBand(fromPos, toPos, minX, maxX, minY, maxY);
+        } else {
+          this.drawYPlotBand(fromPos, toPos, minX, maxX, minY, maxY);
         }
-      }
-      ctx.stroke();
-    });
 
-    ctx.closePath();
+        if (labelOpt.show) {
+          const labelOptions = this.getNormalizedLabelOptions(chartRect, labelOpt);
+          const textXY = this.getPlotBandLabelPosition(fromPos, toPos, labelOptions, maxX, minY);
+          this.drawPlotLabel(labelOptions, textXY);
+        }
+
+        ctx.restore();
+      });
+
+      this.plotLines?.forEach((plotLine) => {
+        if (!plotLine.value) {
+          return;
+        }
+
+        const mergedPlotLineOpt = defaultsDeep({}, plotLine, PLOT_LINE_OPTION);
+        const { value, label: labelOpt } = mergedPlotLineOpt;
+        const dataPos = Math.round(startPoint + (labelGap * value)) + (labelGap / 2);
+
+        this.setPlotLineStyle(mergedPlotLineOpt);
+
+        if (this.type === 'x') {
+          this.drawXPlotLine(dataPos, minX, maxX, minY, maxY);
+        } else {
+          this.drawYPlotLine(dataPos, minX, maxX, minY, maxY);
+        }
+
+        if (labelOpt.show) {
+          const labelOptions = this.getNormalizedLabelOptions(chartRect, labelOpt);
+          const textXY = this.getPlotLineLabelPosition(dataPos, labelOptions, maxX, minY);
+          this.drawPlotLabel(labelOptions, textXY);
+        }
+
+        ctx.restore();
+      });
+    }
   }
 
   /**
@@ -167,6 +238,14 @@ class StepScale extends Scale {
    * @returns {string} formatted label
    */
   getLabelFormat(value, maxWidth) {
+    if (this.formatter) {
+      const formattedLabel = this.formatter(value);
+
+      if (typeof formattedLabel === 'string') {
+        return formattedLabel;
+      }
+    }
+
     return this.labelStyle.fitWidth ? this.fittingString(value, maxWidth) : value;
   }
 

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

@@ -17,6 +17,14 @@ class TimeCategoryScale extends Scale {
    * @returns {string} formatted label
    */
   getLabelFormat(value) {
+    if (this.formatter) {
+      const formattedLabel = this.formatter(value);
+
+      if (typeof formattedLabel === 'string') {
+        return formattedLabel;
+      }
+    }
+
     return dayjs(value).format(this.timeFormat);
   }
 

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

@@ -10,6 +10,14 @@ class TimeScale extends Scale {
    * @returns {string} formatted label
    */
   getLabelFormat(value) {
+    if (this.formatter) {
+      const formattedLabel = this.formatter(value);
+
+      if (typeof formattedLabel === 'string') {
+        return formattedLabel;
+      }
+    }
+
     return dayjs(value).format(this.timeFormat);
   }
 

package/src/components/chart/uses.js

@@ -81,9 +81,9 @@ const DEFAULT_OPTIONS = {
     tipTextColor: '#FFFFFF',
   },
   dragSelection: {
-    use: true,
+    use: false,
     keepDisplay: true,
-    fillColor: '#38acec',
+    fillColor: '#38ACEC',
     opacity: 0.65,
   },
 };

package/src/components/contextMenu/MenuList.vue

@@ -6,7 +6,7 @@
         :key="`${item.value}_${idx}`"
         class="ev-menu-li"
         :class="{ disabled: item.disabled }"
-        @click="[item.click && !item.disabled ? item.click() : (() => {})()
+        @click="[item.click && !item.disabled ? item.click(item) : (() => {})()
           , hideAll(item.children)]"
         @mouseenter="!item.disabled ? mouseenterLi($event, item.children) : (() => {})()"
       >

package/src/components/datePicker/DatePicker.vue

@@ -4,10 +4,10 @@
     v-clickoutside="clickOutsideDropbox"
     class="ev-date-picker"
     :class="{
-      disabled,
+      disabled : $props.disabled,
     }"
   >
-    <template v-if="mode === 'date' || mode === 'dateTime'">
+    <template v-if="$props.mode === 'date' || $props.mode === 'dateTime'">
       <span class="ev-date-picker-prefix-icon">
         <i class="ev-icon-calendar" />
       </span>
@@ -15,8 +15,8 @@
         v-model.trim="currentValue"
         type="text"
         class="ev-input"
-        :placeholder="placeholder"
-        :disabled="disabled"
+        :placeholder="$props.placeholder"
+        :disabled="$props.disabled"
         @click="clickSelectInput"
         @keydown.enter.prevent="validateValue(currentValue)"
         @change="validateValue(currentValue)"
@@ -31,23 +31,23 @@
           type="text"
           class="ev-input readonly"
           readonly
-          :placeholder="placeholder"
-          :disabled="disabled"
+          :placeholder="$props.placeholder"
+          :disabled="$props.disabled"
           @click="clickSelectInput"
         />
         <template
-          v-if="mode === 'dateMulti'
-          && (options.multiType === 'date' || !options.tagShorten)"
+          v-if="$props.mode === 'dateMulti'
+          && ($props.options.multiType === 'date' || !$props.options.tagShorten)"
         >
           <div
             v-for="(item, idx) in mv"
             :key="`${item}_${idx}`"
             class="ev-select-tag"
-            :class="{ num: options.multiType !== 'date' }"
+            :class="{ num: $props.options.multiType !== 'date' }"
           >
             <span class="ev-tag-name"> {{ item }} </span>
             <span
-              v-if="options.multiType === 'date'"
+              v-if="$props.options.multiType === 'date'"
               class="ev-tag-suffix"
               @click.stop="[removeMv(item), changeDropboxPosition()]"
             >
@@ -68,7 +68,7 @@
         </template>
       </div>
     </template>
-    <template v-if="clearable">
+    <template v-if="$props.clearable">
       <span
         v-show="isClearableIcon"
         class="ev-input-suffix"
@@ -82,17 +82,38 @@
         v-if="isDropbox"
         ref="dropbox"
         class="ev-date-picker-dropdown"
-        :class="mode"
+        :class="$props.mode"
         :style="dropboxPosition"
       >
-        <ev-calendar
-          key="fromCalendar"
-          v-model="mv"
-          :mode="mode"
-          :month-notation="monthNotation"
-          :day-of-the-week-notation="dayOfTheWeekNotation"
-          :options="options"
+        <div
+            v-if="usedShortcuts.length"
+            class="ev-date-picker-dropbox__button-layout">
+          <ev-button-group>
+            <ev-button
+               v-for="button in usedShortcuts"
+               :key="button.key"
+               :type="button.isActive ? 'primary' : 'default'"
+               @click="clickShortcut(button.key)"
+            >
+              {{ button.label }}
+            </ev-button>
+          </ev-button-group>
+        </div>
+        <div
+            v-if="usedShortcuts.length"
+            class="ev-date-picker-dropbox__divider"
         />
+        <div
+            :class="{ 'ev-date-picker-dropbox__calendar':usedShortcuts.length }">
+          <ev-calendar
+            key="fromCalendar"
+            v-model="mv"
+            :mode="$props.mode"
+            :month-notation="$props.monthNotation"
+            :day-of-the-week-notation="$props.dayOfTheWeekNotation"
+            :options="$props.options"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -100,7 +121,7 @@
 
 <script>
 import { datePickerClickoutside as clickoutside } from '@/directives/clickoutside';
-import { useModel, useDropdown } from './uses';
+import { useModel, useDropdown, useShortcuts } from './uses';
 
 export default {
   name: 'EvDatePicker',
@@ -116,7 +137,8 @@ export default {
         const dateTimeReg = new RegExp(/[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1]) (2[0-3]|[01][0-9]):[0-5][0-9]:[0-5][0-9]/);
         if (Array.isArray(value)) {
           return value.every(v => !!(!v
-            || (v.length === 10 && dateReg.exec(v))));
+              || (v.length === 10 && dateReg.exec(v)))
+              || (v.length === 19 && dateTimeReg.exec(v)));
         }
         return !!(!value
           || (value.length === 10 && dateReg.exec(value))
@@ -138,7 +160,7 @@ export default {
     mode: {
       type: String,
       default: 'date',
-      validator: value => ['date', 'dateTime', 'dateMulti', 'dateRange']
+      validator: value => ['date', 'dateTime', 'dateMulti', 'dateRange', 'dateTimeRange']
         .indexOf(value) !== -1,
     },
     monthNotation: {
@@ -160,11 +182,20 @@ export default {
         limit: 1,
         tagShorten: false,
       }),
-      validator: ({ multiType, multiDayLimit, disabledDate, tagShorten }) =>
-        (multiType ? ['weekday', 'week', 'date'].indexOf(multiType) !== -1 : true)
+      validator: ({ multiType, multiDayLimit, disabledDate, tagShorten, timeFormat }) => {
+        const timeReg = new RegExp(/(HH|2[0-3]|[01][0-9]):(mm|[0-5][0-9]):(ss|[0-5][0-9])/);
+        return (multiType ? ['weekday', 'week', 'date'].indexOf(multiType) !== -1 : true)
         && (multiDayLimit ? typeof multiDayLimit === 'number' && multiDayLimit > 0 : true)
         && (disabledDate ? typeof disabledDate === 'function' : true)
-        && (tagShorten !== undefined ? typeof tagShorten === 'boolean' : true),
+        && (tagShorten !== undefined ? typeof tagShorten === 'boolean' : true)
+        && Array.isArray(timeFormat)
+            ? timeFormat.every(v => !!(!v || timeReg.exec(v)))
+            : !!(!timeFormat || (timeReg.exec(timeFormat)));
+      },
+    },
+    shortcuts: {
+      type: Array,
+      default: () => [],
     },
   },
   emits: {
@@ -190,10 +221,20 @@ export default {
       clickSelectInput,
       clickOutsideDropbox,
       changeDropboxPosition,
-    } = useDropdown({
+    } = useDropdown();
+
+    const {
+      usedShortcuts,
+      clickShortcut,
+      setActiveShortcut,
+    } = useShortcuts({
+      mv,
       currentValue,
+      clickOutsideDropbox,
     });
 
+    setActiveShortcut();
+
     return {
       mv,
       currentValue,
@@ -211,6 +252,9 @@ export default {
       clickSelectInput,
       clickOutsideDropbox,
       changeDropboxPosition,
+
+      usedShortcuts,
+      clickShortcut,
     };
   },
 };
@@ -329,8 +373,26 @@ export default {
   }
 }
 
-.ev-date-picker-dropbox-wrapper {
-  height: 0;
-  z-index: 100;
+.ev-date-picker-dropbox {
+  &-wrapper {
+    height: 0;
+    z-index: 100;
+  }
+
+  &__button-layout {
+    margin: 5px;
+  }
+
+  &__divider {
+    width: 100%;
+    height: 2px;
+    margin: 8px 0;
+    background-color: #E5E5E5;
+  }
+
+  &__calendar {
+    height: 100%;
+    margin: 5px;
+  }
 }
 </style>