evui 3.3.54 → 3.3.56

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

@@ -4,28 +4,44 @@ import Scale from './scale';
 import Util from '../helpers/helpers.util';
 
 class StepScale extends Scale {
-  constructor(type, opt, ctx, labels, options) {
-    super(type, opt, ctx, options);
+  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)
+   * @param {object} scrollbarOpt    scroll bar option
    * @param {object} chartRect    chart size information
    *
    * @returns {object} min/max value and label
    */
-  calculateScaleRange(minMax, chartRect) {
+  calculateScaleRange(minMax, scrollbarOpt, chartRect) {
     const stepMinMax = this.labelStyle.alignToGridLine
       ? minMax : Util.getStringMinMax(this.labels);
-    const maxValue = stepMinMax.max;
-    const minValue = stepMinMax.min;
-    const maxWidth = chartRect.chartWidth / (this.labels.length + 2);
+    let maxValue = stepMinMax.max;
+    let minValue = stepMinMax.min;
+
+    let minIndex = 0;
+    let maxIndex = this.labels.length - 1;
+    let labelCount = this.labels.length;
+
+    const range = scrollbarOpt?.use ? scrollbarOpt?.range : this.range;
+    if (range?.length) {
+      [minIndex, maxIndex] = range;
+      maxValue = this.labels[maxIndex];
+      minValue = this.labels[minIndex];
+      labelCount = maxIndex - minIndex + 1;
+    }
+
+    const maxWidth = chartRect.chartWidth / (labelCount + 2);
 
     return {
       min: minValue,
       max: maxValue,
+      minIndex,
+      maxIndex,
       minLabel: this.getLabelFormat(minValue, maxWidth),
       maxLabel: this.getLabelFormat(maxValue, maxWidth),
       size: Util.calcTextSize(
@@ -42,28 +58,40 @@ class StepScale extends Scale {
    * @returns {object} steps, interval, min/max graph value
    */
   calculateSteps(range) {
-    let numberOfSteps = this.labels.length;
+    const {
+      minValue,
+      maxValue,
+      minIndex,
+      maxIndex,
+      maxSteps,
+    } = range;
+
+    let numberOfSteps = (maxIndex - minIndex) + 1;
     let interval = 1;
 
+    const oriSteps = numberOfSteps;
     const isNumbersArray = this.labels.every(label => !isNaN(label));
     if (this.labelStyle.alignToGridLine && isNumbersArray) {
-      const { maxSteps } = range;
-
       if (maxSteps > 2) {
         while (numberOfSteps > maxSteps * 2) {
           interval *= 2;
           numberOfSteps = Math.round(numberOfSteps / interval);
         }
       } else {
-        interval = this.labels.length;
+        interval = oriSteps;
       }
+    } else if (numberOfSteps > maxSteps * 2) {
+      interval *= 2;
     }
 
     return {
+      oriSteps,
       steps: numberOfSteps,
       interval,
-      graphMin: range.minValue,
-      graphMax: range.maxValue,
+      graphMin: minValue,
+      graphMax: maxValue,
+      minIndex,
+      maxIndex,
     };
   }
 
@@ -87,15 +115,15 @@ class StepScale extends Scale {
       y2: chartRect.y2 - labelOffset.bottom,
     };
 
-    const oriSteps = this.labels.length;
     const steps = stepInfo.steps;
     const count = stepInfo.interval;
+    const startIndex = stepInfo.minIndex;
 
     const startPoint = aPos[this.units.rectStart];
     const endPoint = aPos[this.units.rectEnd];
     const offsetPoint = aPos[this.units.rectOffset(this.position)];
     const offsetCounterPoint = aPos[this.units.rectOffsetCounter(this.position)];
-    const maxWidth = chartRect.chartWidth / (this.labels.length + 2);
+    const maxWidth = chartRect.chartWidth / (steps + 2);
 
     this.drawAxisTitle(chartRect, labelOffset);
 
@@ -130,7 +158,7 @@ class StepScale extends Scale {
         return;
       }
 
-      const labelGap = (endPoint - startPoint) / labels.length;
+      const labelGap = (endPoint - startPoint) / steps;
       const alignToGridLine = this.labelStyle.alignToGridLine;
       let labelCenter = null;
       let linePosition = null;
@@ -142,8 +170,9 @@ class StepScale extends Scale {
       let labelPoint;
       let index;
 
-      for (index = 0; index < oriSteps; index += count) {
-        const item = this.labels[index];
+      for (index = 0; index < steps; index += count) {
+        const labelIndex = startIndex + index;
+        const item = this.labels[labelIndex];
         labelCenter = Math.round(startPoint + (labelGap * index));
         linePosition = labelCenter + aliasPixel;
         labelText = this.getLabelFormat(item, maxWidth);
@@ -165,7 +194,7 @@ class StepScale extends Scale {
           && selectLabelOpt?.useLabelOpacity
           && targetAxis === this.type
           && selectedLabelInfo?.dataIndex?.length
-          && !selectedLabelInfo?.dataIndex?.includes(index);
+          && !selectedLabelInfo?.dataIndex?.includes(labelIndex);
 
         const labelColor = this.labelStyle.color;
         let defaultOpacity = 1;

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

@@ -4,8 +4,8 @@ import Scale from './scale';
 import Util from '../helpers/helpers.util';
 
 class TimeCategoryScale extends Scale {
-  constructor(type, opt, ctx, labels, options) {
-    super(type, opt, ctx);
+  constructor(type, axisOpt, ctx, labels, options) {
+    super(type, axisOpt, ctx);
     this.labels = labels;
     this.options = options;
   }
@@ -166,7 +166,7 @@ class TimeCategoryScale extends Scale {
     }
 
     const alignToGridLine = this.labelStyle.alignToGridLine;
-    const graphGap = (endPoint - startPoint) / (labels.length || 1);
+    const graphGap = (endPoint - startPoint) / (oriSteps || 1);
     if (this.categoryMode && !alignToGridLine) {
       startPoint += Math.ceil(graphGap / 2) - 2;
     }
@@ -191,7 +191,8 @@ class TimeCategoryScale extends Scale {
         && this.options?.selectLabel?.useLabelOpacity
         && (this.options.horizontal === (this.type === 'y'))
         && selectLabelInfo?.dataIndex?.length
-        && !selectLabelInfo?.dataIndex?.includes(ix);
+        && !selectLabelInfo?.label
+          .map(t => this.getLabelFormat(Math.min(axisMax, t))).includes(labelText);
 
       const labelColor = this.labelStyle.color;
       let defaultOpacity = 1;

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

@@ -318,9 +318,89 @@
     }
   }
 
-
   .ev-chart-tooltip-body {
     overflow-x: hidden;
     overflow-y: hidden;
   }
+
+  .ev-chart-tooltip-custom {
+    overflow-x: hidden;
+    overflow-y: hidden;
+
+    &__header {
+      @extend .ev-chart-tooltip-header;
+    }
+
+    &__body {
+      padding: 8px 20px 8px 16px;
+      overflow-x: hidden;
+      overflow-y: hidden;
+
+      .row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+
+      .series-name {
+        flex: auto;
+      }
+
+      .value {
+        text-align: right;
+      }
+
+      .color-rect {
+        width: 12px;
+        height: 12px;
+        margin-right: 16px;
+      }
+
+      .color-circle {
+        border-radius: 12px;
+
+        @extend .color-rect;
+      }
+    }
+  }
+}
+
+.ev-chart-scrollbar {
+  position: absolute;
+  z-index: 3;
+
+  &-container {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-track {
+    position: absolute;
+  }
+
+  &-thumb {
+    position: absolute;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+  &-button {
+    position: absolute;
+    text-align: center;
+
+    &:hover {
+      opacity: 0.5 !important;
+    }
+  }
+
+  &-button-icon {
+    display: none;
+    margin: 0 auto;
+    font-size: 12px;
+  }
 }