evui 3.4.29 → 3.4.30

package/package.json

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

package/src/components/chart/Chart.vue

@@ -253,7 +253,7 @@
 
       watch(() => props.realTimeScatterReset, (flag) => {
         if (flag) {
-          Object.keys(evChart.dataSet).forEach((series) => {
+          Object.keys(evChart.dataSet ?? {}).forEach((series) => {
             if (evChart.dataSet[series]) {
               evChart.dataSet[series].dataGroup = [];
             }

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

@@ -246,7 +246,7 @@ class EvChart {
       const chartTypeSet = this.seriesInfo.charts[chartType];
 
       for (let jx = 0; jx < chartTypeSet.length; jx++) {
-        const series = this.seriesList[chartTypeSet[jx]];
+        let series = this.seriesList[chartTypeSet[jx]];
 
         switch (chartType) {
           case 'line': {
@@ -327,6 +327,10 @@ class EvChart {
               }
             }
 
+            if (this.options.realTimeScatter?.use) {
+              series = this.seriesList[chartTypeSet.at(-1 - jx)];
+            }
+
             series.draw({
               legendHitInfo,
               selectInfo,

package/src/components/chart/helpers/helpers.constant.js

@@ -103,6 +103,7 @@ export const AXIS_OPTION = {
     fitWidth: false,
     fitDir: 'right',
     alignToGridLine: false,
+    padding: 0,
   },
   title: {
     use: false,

package/src/components/chart/helpers/helpers.util.js

@@ -184,12 +184,13 @@ export default {
    * Calculate text size with html
    * @param {string} text         text is needed to check size
    * @param {string} fontStyle    text font style
+   * @param {number} padding      user define text padding
    *
    * @returns {object} text size information
    */
-  calcTextSize(text, fontStyle) {
+  calcTextSize(text, fontStyle, padding = 0) {
     const calc = document.createElement('span');
-    const style = `visibility:hidden; position:absolute; top:-10000px; font: ${fontStyle};`;
+    const style = `visibility:hidden; position:absolute; top:-10000px; font: ${fontStyle}; padding: 0 ${padding}px`;
 
     calc.setAttribute('style', style);
     calc.style.font = fontStyle;

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

@@ -3,8 +3,8 @@ import debounce from '@/common/utils.debounce';
 import Canvas from '../helpers/helpers.canvas';
 import Util from '../helpers/helpers.util';
 
-const TITLE_HEIGHT = 30;
-const TEXT_HEIGHT = 14;
+const TITLE_HEIGHT = 35;
+const TEXT_HEIGHT = 20;
 const LINE_SPACING = 8;
 const COLOR_MARGIN = 16;
 const VALUE_MARGIN = 50;
@@ -77,7 +77,7 @@ const modules = {
     const [maxSeries, maxValue] = hitInfo.maxTip;
     const seriesKeys = Object.keys(items);
     const seriesLen = seriesKeys.length;
-    const boxPadding = { t: 8, b: 8, r: 20, l: 16 };
+    const boxPadding = { t: 10, b: 4, r: 20, l: 16 };
     const opt = this.options.tooltip;
 
 
@@ -169,6 +169,24 @@ const modules = {
       : `${expectedPosY}px`;
   },
 
+  /**
+   * Draw series color shape
+   * @param {object} context    tooltip canvas context
+   * @param {string} shape  // 'circle' | 'rect' (default)
+   * @param {object} centerPosition  // {x: number, y: number}
+   */
+  drawSeriesColorShape(context, shape, centerPosition) {
+    const { x, y } = centerPosition;
+
+    if (shape === 'circle') {
+      context.beginPath();
+      context.arc(x - 2, y - 4, 6, 0, 2 * Math.PI);
+      context.fill();
+    } else {
+      context.fillRect(x - 4, y - 12, 12, 12);
+    }
+  },
+
   /**
    * Draw tooltip canvas
    * @param {object} hitInfo    mousemove callback
@@ -279,10 +297,10 @@ const modules = {
       }
 
       // 1. Draw series color
-      ctx.fillRect(itemX - 4, itemY - 12, 12, 12);
-      ctx.fillStyle = opt.fontColor;
+      this.drawSeriesColorShape(ctx, opt.colorShape, { x: itemX, y: itemY });
 
       // 2. Draw series name
+      ctx.fillStyle = opt.fontColor?.label ?? opt.fontColor;
       ctx.textBaseline = 'Bottom';
       const seriesNameSpaceWidth = opt.maxWidth - Math.round(ctx.measureText(maxValue).width)
         - boxPadding.l - boxPadding.r - COLOR_MARGIN - VALUE_MARGIN;
@@ -317,6 +335,7 @@ const modules = {
       ctx.save();
 
       // 3. Draw value
+      ctx.fillStyle = opt.fontColor?.value ?? opt.fontColor;
       ctx.textAlign = 'right';
       ctx.fillText(valueText, this.tooltipDOM.offsetWidth - boxPadding.r, itemY);
       ctx.restore();
@@ -414,10 +433,10 @@ const modules = {
     }
 
     // 1. Draw value color
-    ctx.fillRect(itemX - 4, itemY - 12, 12, 12);
-    ctx.fillStyle = opt.fontColor;
+    this.drawSeriesColorShape(ctx, opt.colorShape, { x: itemX, y: itemY });
 
     // 2. Draw value y names
+    ctx.fillStyle = opt.fontColor?.label ?? opt.fontColor;
     ctx.textBaseline = 'Bottom';
     if (this.axesY.length) {
       ctx.fillText(this.axesY[hitAxis.y].getLabelFormat(hitItem.y), itemX + COLOR_MARGIN, itemY);
@@ -514,10 +533,10 @@ const modules = {
       }
 
       // 1. Draw series color
-      ctx.fillRect(itemX - 4, itemY - 12, 12, 12);
-      ctx.fillStyle = opt.fontColor;
+      this.drawSeriesColorShape(ctx, opt.colorShape, { x: itemX, y: itemY });
 
       // 2. Draw series name
+      ctx.fillStyle = opt.fontColor?.label ?? opt.fontColor;
       ctx.textBaseline = 'Bottom';
       const seriesNameSpaceWidth = opt.maxWidth - Math.round(ctx.measureText(maxValue).width)
         - boxPadding.l - boxPadding.r - COLOR_MARGIN - VALUE_MARGIN;
@@ -626,7 +645,7 @@ const modules = {
       this.tooltipDOM.style.overflowY = 'hidden';
       this.tooltipDOM.style.backgroundColor = opt.backgroundColor;
       this.tooltipDOM.style.border = `1px solid ${opt.borderColor}`;
-      this.tooltipDOM.style.color = opt.fontColor;
+      this.tooltipDOM.style.color = opt.fontColor?.title ?? opt.fontColor;
     }
   },
 
@@ -638,7 +657,7 @@ const modules = {
     this.tooltipDOM.style.overflowY = 'hidden';
     this.tooltipDOM.style.backgroundColor = tooltipOptions.backgroundColor;
     this.tooltipDOM.style.border = `1px solid ${tooltipOptions.borderColor}`;
-    this.tooltipDOM.style.color = tooltipOptions.fontColor;
+    this.tooltipDOM.style.color = tooltipOptions.fontColor?.title ?? tooltipOptions.fontColor;
 
     if (tooltipOptions.useShadow) {
       const shadowColor = `rgba(0, 0, 0, ${tooltipOptions.shadowOpacity})`;

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

@@ -105,7 +105,11 @@ class Scale {
       max: maxValue,
       minLabel,
       maxLabel,
-      size: Util.calcTextSize(maxLabel, Util.getLabelStyle(this.labelStyle)),
+      size: Util.calcTextSize(
+        maxLabel,
+        Util.getLabelStyle(this.labelStyle),
+        this.labelStyle?.padding,
+      ),
     };
   }
 

package/src/components/chart/style/chart.scss

@@ -304,7 +304,7 @@
   border-radius: 8px;
 
   .ev-chart-tooltip-header {
-    padding: 8px 16px 0 16px;
+    padding: 16px 16px 0 16px;
     overflow: hidden;
     font-size: 16px;
 

package/src/components/chart/uses.js

@@ -100,6 +100,7 @@ const DEFAULT_OPTIONS = {
     useScrollbar: false,
     textOverflow: 'wrap',
     fontFamily: 'Roboto',
+    colorShape: 'rect',
   },
   indicator: {
     use: true,

package/src/components/timePicker/TimePicker.vue

@@ -14,7 +14,7 @@
         class="ev-time-picker-wrapper"
       >
         <input
-          v-model="startTime"
+          v-model="time[0]"
           class="ev-input"
           :disabled="disabled"
           :readonly="readonly"
@@ -45,7 +45,7 @@
         class="ev-time-picker-wrapper"
       >
         <input
-          v-model="endTime"
+          v-model="time[1]"
           class="ev-input"
           :disabled="disabled"
           :readonly="readonly"
@@ -105,7 +105,7 @@
 </template>
 
 <script>
-import { ref, reactive } from 'vue';
+import { ref, reactive, computed } from 'vue';
 
 export default {
   name: 'EvTimePicker',
@@ -115,7 +115,7 @@ export default {
       default: '',
       validator: (time) => {
         const timeRegexExp = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
-        if (Array.isArray(time) && !timeRegexExp.test(time[0]) && timeRegexExp.test(time[1])) {
+        if (Array.isArray(time) && (!timeRegexExp.test(time[0]) || !timeRegexExp.test(time[1]))) {
           // range mode
           console.warn('Please check the time format in the Timepicker.');
           return false;
@@ -152,58 +152,60 @@ export default {
     change: null,
   },
   setup(props, { emit }) {
-    let startTime = ref('00:00');
-    let endTime = ref('23:59');
-    let time = ref('00:00');
+    const time = computed({
+      get: () => props.modelValue,
+      set: (value) => {
+        if (props.type === 'range') {
+          if (Array.isArray(value)) {
+            const startTime = (value[0] > value[1] ? '00:00' : value[0]);
+            const endTime = (startTime.value > value[1] ? '23:59' : value[1]);
+
+            emit('update:modelValue', [startTime, endTime]);
+          }
+        } else {
+          emit('update:modelValue', value);
+        }
+      },
+    }); // <string | string[]>
+
+    const previousValue = ref(
+      Array.isArray(time.value) ? [`${time.value[0]}`, `${time.value[1]}`] : `${time.value}`,
+    ); // <string | string[]>
+
     const isWrongType = reactive({
       single: false,
       rangeStart: false,
       rangeEnd: false,
     });
 
-    if (props.type === 'range') {
-      if (Array.isArray(props.modelValue)) {
-        startTime = ref(props.modelValue[0] > props.modelValue[1] ? '00:00' : props.modelValue[0]);
-        endTime = ref(startTime.value > props.modelValue[1] ? '23:59' : props.modelValue[1]);
-      }
-      emit('update:modelValue', [startTime.value, endTime.value]);
-    } else {
-      time = ref(props.modelValue || '00:00');
-      emit('update:modelValue', time.value);
-    }
-
-    const previousValue = reactive({
-      singleTime: time.value,
-      rangeStartTime: startTime.value,
-      rangeEndTime: endTime.value,
-    });
-
     const validTimeExp = (timeExp) => {
       const timeRegexExp = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
       return timeRegexExp.test(timeExp);
     };
 
     const setValidStartTime = () => {
-      if (!validTimeExp(startTime.value)) {
-        startTime.value = previousValue.rangeStartTime;
+      if (!Array.isArray(time.value)) return;
+      if (!validTimeExp(time.value[0])) {
+        time.value[0] = previousValue.value[0];
       }
-      if (endTime.value && (startTime.value > endTime.value)) {
-        startTime.value = endTime.value;
+      if (time.value[1] && (time.value[0] > time.value[1])) {
+        time.value[0] = time.value[1];
       }
-      previousValue.rangeStartTime = startTime.value;
+      previousValue.value[0] = time.value[0];
     };
 
     const setValidEndTime = () => {
-      if (!validTimeExp(endTime.value)) {
-        endTime.value = previousValue.rangeEndTime;
+      if (!Array.isArray(time.value)) return;
+      if (!validTimeExp(time.value[1])) {
+        time.value[1] = previousValue.value[1];
       }
-      if (startTime.value && (startTime.value > endTime.value)) {
-        endTime.value = previousValue.rangeEndTime;
-        if (startTime.value > previousValue.rangeEndTime) {
-          endTime.value = startTime.value;
+      if (time.value[0] && (time.value[0] > time.value[1])) {
+        time.value[1] = previousValue.value[1];
+        if (time.value[0] > previousValue.value[1]) {
+          time.value[1] = time.value[0];
         }
       }
-      previousValue.rangeEndTime = endTime.value;
+      previousValue.value[1] = time.value[1];
     };
 
     // startTime event for range type
@@ -218,14 +220,12 @@ export default {
     const changeStartTime = (e) => {
       setValidStartTime();
       isWrongType.rangeStart = false;
-      emit('update:modelValue', [startTime.value, endTime.value]);
-      emit('change', e, [startTime.value, endTime.value]);
+      emit('change', e, time.value);
     };
 
     const clearStartTime = () => {
-      startTime.value = '';
+      time.value[0] = '';
       isWrongType.rangeStart = true;
-      emit('update:modelValue', [startTime.value, endTime.value]);
     };
 
     // endTime event for range type
@@ -240,14 +240,12 @@ export default {
     const changeEndTime = (e) => {
       setValidEndTime();
       isWrongType.rangeEnd = false;
-      emit('update:modelValue', [startTime.value, endTime.value]);
-      emit('change', e, [startTime.value, endTime.value]);
+      emit('change', e, time.value);
     };
 
     const clearEndTime = () => {
-      endTime.value = '';
+      time.value[1] = '';
       isWrongType.rangeEnd = true;
-      emit('update:modelValue', [startTime.value, endTime.value]);
     };
 
     // event for single type
@@ -261,26 +259,22 @@ export default {
 
     const changeTime = (e) => {
       if (!validTimeExp(time.value)) {
-        time.value = previousValue.singleTime;
+        time.value = previousValue.value;
       } else {
-        previousValue.singleTime = time.value;
+        previousValue.value = time.value;
       }
 
       isWrongType.single = !validTimeExp(time.value);
 
-      emit('update:modelValue', time.value);
       emit('change', e, time.value);
     };
 
     const clearContents = () => {
       time.value = '';
       isWrongType.single = true;
-      emit('update:modelValue', time.value);
     };
 
     return {
-      startTime,
-      endTime,
       time,
       isWrongType,
       previousValue,