evui 3.3.39 → 3.3.40

package/package.json

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

package/src/components/chart/Chart.vue

@@ -1,4 +1,14 @@
 <template>
+  <div
+    v-if="zoomOptions.toolbar.show && !injectIsChartGroup"
+    ref="evChartToolbarRef"
+  >
+    <ev-chart-toolbar
+      :toolbar="zoomOptions.toolbar"
+      @on-click-toolbar="onClickToolbar"
+    />
+  </div>
+
   <div
     ref="wrapper"
     v-resize="onResize"
@@ -8,13 +18,17 @@
 </template>
 
 <script>
-import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
+  import { onMounted, onBeforeUnmount, watch, onDeactivated, inject, toRef, computed } from 'vue';
   import { cloneDeep, isEqual, debounce } from 'lodash-es';
   import EvChart from './chart.core';
-  import { useModel, useWrapper } from './uses';
+  import EvChartToolbar from './ChartToolbar';
+  import { useModel, useWrapper, useZoomModel } from './uses';
 
   export default {
     name: 'EvChart',
+    components: {
+      EvChartToolbar,
+    },
     props: {
       selectedItem: {
         type: Object,
@@ -40,6 +54,14 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         type: Number,
         default: 0,
       },
+      zoomStartIdx: {
+        type: Number,
+        default: 0,
+      },
+      zoomEndIdx: {
+        type: Number,
+        default: 0,
+      },
     },
     emits: [
       'click',
@@ -48,9 +70,15 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
       'update:selectedItem',
       'update:selectedLabel',
       'update:selectedSeries',
+      'update:zoomStartIdx',
+      'update:zoomEndIdx',
     ],
     setup(props) {
       let evChart = null;
+      const injectIsChartGroup = inject('isChartGroup', false);
+      const injectBrushSeries = inject('brushSeries', { list: [], chartIdx: null });
+      const injectGroupSelectedLabel = inject('groupSelectedLabel', null);
+      const injectBrushIdx = inject('brushIdx', { start: 0, end: 0 });
 
       const {
         eventListeners,
@@ -59,10 +87,12 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         selectSeriesInfo,
         getNormalizedData,
         getNormalizedOptions,
-      } = useModel();
+      } = useModel(injectGroupSelectedLabel);
 
       const normalizedData = getNormalizedData(props.data);
       const normalizedOptions = getNormalizedOptions(props.options);
+      const selectedLabel = computed(() => props.selectedLabel);
+      const selectedItem = computed(() => props.selectedItem);
 
       const {
         wrapper,
@@ -71,6 +101,21 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         normalizedOptions,
       );
 
+      const {
+        evChartZoomOptions,
+        evChartToolbarRef,
+
+        createEvChartZoom,
+        setOptionsForUseZoom,
+        setDataForUseZoom,
+        controlZoomIdx,
+        onClickToolbar,
+      } = useZoomModel(
+        normalizedOptions,
+        { wrapper, evChartGroupRef: null },
+        props.selectedLabel ? selectedLabel : selectedItem,
+      );
+
       const createChart = () => {
         let selected;
         if (normalizedOptions.selectLabel.use) {
@@ -86,12 +131,17 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
           eventListeners,
           selectItemInfo,
           selected,
+          injectBrushSeries,
         );
       };
 
       const drawChart = () => {
         if (evChart) {
           evChart.init();
+
+          if (!injectIsChartGroup && normalizedOptions.zoom.toolbar.show) {
+            createEvChartZoom();
+          }
         }
       };
 
@@ -106,6 +156,10 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
           updateSelTip: { update: false, keepDomain: false },
           updateLegend: isUpdateLegendType,
         });
+
+        if (!injectIsChartGroup) {
+          setOptionsForUseZoom(newOpt);
+        }
       }, { deep: true, flush: 'post' });
 
       watch(() => props.data, (chartData) => {
@@ -123,14 +177,38 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
           updateSelTip: { update: true, keepDomain: false },
           updateData: isUpdateData,
         });
+
+        if (!injectIsChartGroup && isUpdateData) {
+          setDataForUseZoom(newData);
+        }
       }, { deep: true, flush: 'post' });
 
-      watch(() => props.selectedItem, (newValue) => {
+      if (injectIsChartGroup && !injectGroupSelectedLabel?.value) {
+        watch(() => injectBrushIdx.start, (curBrushStartIdx, prevBrushStartIdx) => {
+          if (selectedLabel?.value) {
+            for (let idx = 0; idx < selectedLabel.value.dataIndex.length; idx++) {
+              if (curBrushStartIdx >= (prevBrushStartIdx ?? 0)) {
+                selectedLabel.value.dataIndex[idx] -= curBrushStartIdx - (prevBrushStartIdx ?? 0);
+              } else {
+                selectedLabel.value.dataIndex[idx] += prevBrushStartIdx - curBrushStartIdx;
+              }
+            }
+          } else if (selectedItem?.value) {
+            if (curBrushStartIdx >= (prevBrushStartIdx ?? 0)) {
+              selectedItem.value.dataIndex -= curBrushStartIdx - (prevBrushStartIdx ?? 0);
+            } else {
+              selectedItem.value.dataIndex += prevBrushStartIdx - curBrushStartIdx;
+            }
+          }
+        });
+      }
+
+      watch(() => selectedItem.value, (newValue) => {
         const chartType = props.options.type;
         evChart.selectItemByData(newValue, chartType);
       }, { deep: true, flush: 'post' });
 
-      watch(() => props.selectedLabel, (newValue) => {
+      watch(() => (injectGroupSelectedLabel?.value ?? selectedLabel.value), (newValue) => {
         if (newValue.dataIndex) {
           evChart.renderWithSelected(newValue.dataIndex);
         }
@@ -142,6 +220,12 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         }
       }, { deep: true, flush: 'post' });
 
+      if (!injectIsChartGroup) {
+        watch(() => [props.zoomStartIdx, props.zoomEndIdx], ([zoomStartIdx, zoomEndIdx]) => {
+          controlZoomIdx(zoomStartIdx, zoomEndIdx);
+        });
+      }
+
       onMounted(async () => {
         await createChart();
         await drawChart();
@@ -179,6 +263,12 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         wrapperStyle,
         onResize,
         redraw,
+
+        evChartToolbarRef,
+        injectIsChartGroup,
+        onClickToolbar,
+        normalizedOptions,
+        zoomOptions: toRef(evChartZoomOptions, 'zoom'),
       };
     },
   };

package/src/components/chart/ChartToolbar.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="ev-chart__toolbar__wrapper">
+    <div class="ev-chart__toolbar__wrapper__icon">
+      <ev-icon
+        v-for="(option, iconType) in $props.toolbar.items"
+        :key="`${iconType}-${option.icon}`"
+        :class="iconType"
+        :icon="option.icon"
+        :size="option.size"
+        :title="option.title"
+        @click="$emit('onClickToolbar', $event, iconType)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EvChartToolbar',
+  props: {
+    toolbar: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: ['onClickToolbar'],
+};
+</script>
+
+<style lang="scss" scoped>
+.ev-chart__toolbar__wrapper {
+  height: 30px;
+  text-align: right;
+  padding-right: 30px;
+
+  &__icon {
+    i {
+      pointer-events: none;
+      opacity: 0.5;
+      cursor: pointer;
+    }
+
+    i + i {
+      margin-left: 10px;
+    }
+
+    .active {
+      font-weight: bold;
+    }
+  }
+}
+</style>

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

@@ -14,28 +14,40 @@ import Pie from './plugins/plugins.pie';
 import Tip from './element/element.tip';
 
 class EvChart {
-  constructor(target, data, options, listeners, defaultSelectItemInfo, defaultSelectInfo) {
+  constructor(
+    target,
+    data,
+    options,
+    listeners,
+    defaultSelectItemInfo,
+    defaultSelectInfo,
+    brushSeries,
+  ) {
     Object.keys(Model).forEach(key => Object.assign(this, Model[key]));
-    Object.assign(this, Title);
-    Object.assign(this, Legend);
-    Object.assign(this, Interaction);
-    Object.assign(this, Tooltip);
-    Object.assign(this, Pie);
-    Object.assign(this, Tip);
+
+    if (!options.brush) {
+      Object.assign(this, Tooltip);
+      Object.assign(this, Interaction);
+      Object.assign(this, Tip);
+      Object.assign(this, Legend);
+      Object.assign(this, Pie);
+      Object.assign(this, Title);
+    }
 
     if (options.type === 'heatMap' && options.legend.type === 'gradient') {
       Object.assign(this, GradientLegend);
     }
 
+    this.brushSeries = brushSeries;
     this.target = target;
     this.data = data;
     this.options = options;
     this.listeners = listeners;
 
     this.wrapperDOM = document.createElement('div');
-    this.wrapperDOM.className = 'ev-chart-wrapper';
+    this.wrapperDOM.className = options.brush ? 'ev-chart-brush-wrapper' : 'ev-chart-wrapper';
     this.chartDOM = document.createElement('div');
-    this.chartDOM.className = 'ev-chart-container';
+    this.chartDOM.className = options.brush ? 'ev-chart-brush-container' : 'ev-chart-container';
     this.wrapperDOM.appendChild(this.chartDOM);
     this.target.appendChild(this.wrapperDOM);
 
@@ -45,19 +57,25 @@ class EvChart {
     this.bufferCanvas = document.createElement('canvas');
     this.bufferCanvas.setAttribute('style', 'display: block;');
     this.bufferCtx = this.bufferCanvas.getContext('2d');
-    this.overlayCanvas = document.createElement('canvas');
-    this.overlayCanvas.setAttribute('style', 'display: block;');
-    this.overlayCtx = this.overlayCanvas.getContext('2d');
 
     this.pixelRatio = window.devicePixelRatio || 1;
     this.oldPixelRatio = this.pixelRatio;
 
     this.chartDOM.appendChild(this.displayCanvas);
-    this.chartDOM.appendChild(this.overlayCanvas);
 
-    this.overlayCanvas.style.position = 'absolute';
-    this.overlayCanvas.style.top = '0px';
-    this.overlayCanvas.style.left = '0px';
+    if (!options.brush) {
+      this.overlayCanvas = document.createElement('canvas');
+      this.overlayCanvas.setAttribute('style', 'display: block; z-index: 2;');
+      this.overlayCanvas.setAttribute('class', 'overlay-canvas');
+      this.overlayCtx = this.overlayCanvas.getContext('2d');
+
+      this.chartDOM.appendChild(this.overlayCanvas);
+
+      this.overlayCanvas.style.position = 'absolute';
+      this.overlayCanvas.style.top = '0px';
+      this.overlayCanvas.style.left = '0px';
+    }
+
 
     this.isInitLegend = false;
     this.isInitTitle = false;
@@ -97,10 +115,12 @@ class EvChart {
 
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
-    this.initSelectedInfo();
+
+    this.initSelectedInfo?.();
 
     this.drawChart();
 
+
     if (tooltip.use) {
       this.createTooltipDOM();
 
@@ -109,7 +129,7 @@ class EvChart {
       }
     }
 
-    this.createEventFunctions();
+    this.createEventFunctions?.();
     this.isInit = true;
   }
 
@@ -151,7 +171,9 @@ class EvChart {
     this.axesSteps = this.calculateSteps();
     this.drawAxis(hitInfo);
     this.drawSeries(hitInfo);
+
     this.drawTip();
+
     if (this.bufferCanvas) {
       this.displayCtx.drawImage(this.bufferCanvas, 0, 0);
     }
@@ -164,7 +186,7 @@ class EvChart {
    * @returns {undefined}
    */
   drawSeries(hitInfo) {
-    const { maxTip, selectLabel, selectItem, selectSeries } = this.options;
+    const { maxTip, selectLabel, selectItem, selectSeries, brush, displayOverflow } = this.options;
 
     const opt = {
       ctx: this.bufferCtx,
@@ -175,6 +197,8 @@ class EvChart {
       selectLabel: { option: selectLabel, selected: this.defaultSelectInfo },
       selectSeries: { option: selectSeries, selected: this.defaultSelectInfo },
       overlayCtx: this.overlayCtx,
+      isBrush: !!brush,
+      displayOverflow,
     };
 
     let showIndex = 0;
@@ -290,11 +314,13 @@ class EvChart {
       tipLocationInfo = this.lastHitInfo;
     } else if (this.defaultSelectItemInfo) {
       tipLocationInfo = this.getItem(this.defaultSelectItemInfo, false);
+    } else if (this.defaultSelectInfo && this.options.selectLabel.use) {
+      tipLocationInfo = this.getItem(this.defaultSelectInfo, false);
     } else {
       tipLocationInfo = null;
     }
 
-    this.drawTips(tipLocationInfo);
+    this.drawTips?.(tipLocationInfo);
   }
 
   /**
@@ -437,7 +463,10 @@ class EvChart {
     }
 
     this.bufferCtx.scale(this.pixelRatio, this.pixelRatio);
-    this.overlayCtx.scale(this.pixelRatio, this.pixelRatio);
+
+    if (this.overlayCtx) {
+      this.overlayCtx.scale(this.pixelRatio, this.pixelRatio);
+    }
   }
 
   /**
@@ -518,8 +547,11 @@ class EvChart {
     this.displayCanvas.style.width = `${width}px`;
     this.bufferCanvas.width = width * this.pixelRatio;
     this.bufferCanvas.style.width = `${width}px`;
-    this.overlayCanvas.width = width * this.pixelRatio;
-    this.overlayCanvas.style.width = `${width}px`;
+
+    if (this.overlayCanvas) {
+      this.overlayCanvas.width = width * this.pixelRatio;
+      this.overlayCanvas.style.width = `${width}px`;
+    }
   }
 
   /**
@@ -537,8 +569,11 @@ class EvChart {
     this.displayCanvas.style.height = `${height}px`;
     this.bufferCanvas.height = height * this.pixelRatio;
     this.bufferCanvas.style.height = `${height}px`;
-    this.overlayCanvas.height = height * this.pixelRatio;
-    this.overlayCanvas.style.height = `${height}px`;
+
+    if (this.overlayCanvas) {
+      this.overlayCanvas.height = height * this.pixelRatio;
+      this.overlayCanvas.style.height = `${height}px`;
+    }
   }
 
   /**
@@ -707,7 +742,8 @@ class EvChart {
     this.axesY = this.createAxes('y', options.axesY);
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
-    this.initSelectedInfo();
+
+    this.initSelectedInfo?.();
 
     this.render(updateInfo?.hitInfo);
 
@@ -771,10 +807,12 @@ class EvChart {
 
   /**
    * Resize chart
+   * @param {Function} promiseRes After evChart resize completes,
+   *   callback completion status with promiseRes to draw a Brush over it.
    *
    * @returns {undefined}
    */
-  resize() {
+  resize(promiseRes) {
     this.clear();
     this.bufferCtx.restore();
     this.bufferCtx.save();
@@ -783,6 +821,10 @@ class EvChart {
     this.initScale();
     this.chartRect = this.getChartRect();
     this.drawChart();
+
+    if (promiseRes) {
+      promiseRes(true);
+    }
   }
 
   /**