feat: add params of startvalue and endvalue in brushend event

VisActor · Jan 22, 2025 · ada9997 · ada9997
1 parent 5b3ee7a
commit ada9997
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 14 deletions.
diff --git a/docs/assets/api/en/API/event.md b/docs/assets/api/en/API/event.md
@@ -380,7 +380,14 @@ The event parameters are as follows:
     /** In linked series: vgrammar elements outside the marquee */
     linkedOutOfBrushElementsMap: { [elementKey: string]: IElement };
      /** record of axis and datazoom change */
-    zoomRecord: { operateComponent: AxisComponent | DataZoom; start: number; end: number }[];
+    zoomRecord: {
+      operateComponent: AxisComponent | DataZoom;
+      start: number;
+      end: number;
+      /** since 1.13.5+ version */
+      startValue: number | string;
+      endValue: number | string;
+    }[];
   }
 }
 ```

diff --git a/docs/assets/api/zh/API/event.md b/docs/assets/api/zh/API/event.md
@@ -380,7 +380,14 @@ Brush 清除选框事件。
     /** 被链接的系列中：在选框外的 vgrammar elements */
     linkedOutOfBrushElementsMap: { [elementKey: string]: IElement };
     /** 轴/dataZoom的缩放操作记录 */
-    zoomRecord: { operateComponent: AxisComponent | DataZoom; start: number; end: number }[];
+    zoomRecord: {
+      operateComponent: AxisComponent | DataZoom;
+      start: number;
+      end: number;
+      /** 1.13.5以上版本支持 */
+      startValue: number | string;
+      endValue: number | string;
+    }[];
   }
 }
 ```

diff --git a/packages/vchart/src/component/brush/brush.ts b/packages/vchart/src/component/brush/brush.ts
@@ -65,7 +65,13 @@ export class Brush<T extends IBrushSpec = IBrushSpec> extends BaseComponent<T> i
   // 根据axis找dataZoom
   private _axisDataZoomMap: { [axisId: string]: DataZoom } = {};
   // 记录当前操作的axis或dataZoom的状态
-  private _zoomRecord: { operateComponent: AxisComponent | DataZoom; start: number; end: number }[] = [];
+  private _zoomRecord: {
+    operateComponent: AxisComponent | DataZoom;
+    start: number;
+    end: number;
+    startValue: number | string;
+    endValue: number | string;
+  }[] = [];
 
   init() {
     const inBrushMarkAttr = this._transformBrushedMarkAttr(this._spec.inBrush);
@@ -516,7 +522,9 @@ export class Brush<T extends IBrushSpec = IBrushSpec> extends BaseComponent<T> i
           this._zoomRecord.push({
             operateComponent: dataZoom,
             start: newStartPercent,
-            end: newEndPercent
+            end: newEndPercent,
+            startValue: dataZoom.statePointToData(newStartPercent),
+            endValue: dataZoom.statePointToData(newEndPercent)
           });
         } else {
           const range = axis.getScale().range();
@@ -542,7 +550,9 @@ export class Brush<T extends IBrushSpec = IBrushSpec> extends BaseComponent<T> i
           this._zoomRecord.push({
             operateComponent: axis,
             start: newStart,
-            end: newEnd
+            end: newEnd,
+            startValue: axis.getScale().invert(startPos),
+            endValue: axis.getScale().invert(endPos)
           });
         }
       });

diff --git a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
@@ -581,7 +581,7 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
     this._visible = this._spec.visible ?? true;
   }
 
-  protected _statePointToData(state: number) {
+  statePointToData(state: number) {
     const scale = this._stateScale;
     const domain = scale.domain();
 
@@ -644,8 +644,8 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
         : 0;
       end = this._spec.end ? this._spec.end : this._spec.endValue ? this.dataToStatePoint(this._spec.endValue) : 1;
     }
-    this._startValue = this._statePointToData(start);
-    this._endValue = this._statePointToData(end);
+    this._startValue = this.statePointToData(start);
+    this._endValue = this.statePointToData(end);
     this._start = start;
     this._end = end;
     this._minSpan = this._spec.minSpan ?? 0;

diff --git a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts
@@ -328,7 +328,7 @@ export class DataZoom<T extends IDataZoomSpec = IDataZoomSpec> extends DataFilte
         } else {
           isNeedPreview && this._component.setPreviewPointsX1(this._dataToPositionX2);
         }
-        this._component.setStatePointToData((state: number) => this._statePointToData(state));
+        this._component.setStatePointToData((state: number) => this.statePointToData(state));
 
         this._component.addEventListener('change', (e: any) => {
           const { start, end, tag } = e.detail;
@@ -351,8 +351,8 @@ export class DataZoom<T extends IDataZoomSpec = IDataZoomSpec> extends DataFilte
 
       this._start = start;
       this._end = end;
-      const startValue = this._statePointToData(start);
-      const endValue = this._statePointToData(end);
+      const startValue = this.statePointToData(start);
+      const endValue = this.statePointToData(end);
       const hasChange = isFunction(this._spec.updateDataAfterChange)
         ? this._spec.updateDataAfterChange(start, end, startValue, endValue)
         : this._handleStateChange(startValue, endValue, tag);

diff --git a/packages/vchart/src/component/data-zoom/scroll-bar/scroll-bar.ts b/packages/vchart/src/component/data-zoom/scroll-bar/scroll-bar.ts
@@ -136,11 +136,11 @@ export class ScrollBar<T extends IScrollBarSpec = IScrollBarSpec> extends DataFi
 
       this._start = start;
       this._end = end;
-      const startValue = this._statePointToData(start);
-      const endValue = this._statePointToData(end);
+      const startValue = this.statePointToData(start);
+      const endValue = this.statePointToData(end);
       const hasChange = isFunction(this._spec.updateDataAfterChange)
         ? this._spec.updateDataAfterChange(start, end, startValue, endValue)
-        : this._handleStateChange(this._statePointToData(start), this._statePointToData(end));
+        : this._handleStateChange(this.statePointToData(start), this.statePointToData(end));
       if (hasChange) {
         this.event.emit(ChartEvent.scrollBarChange, {
           model: this,