@visactor/vchart-types 0.10.0-alpha.2 → 0.11.6-alpha.1

package/types/component/base/base-component.d.ts

@@ -1,4 +1,4 @@
-import type { IGraphic, IGroup } from '@visactor/vrender-core';
+import { type IGraphic, type IGroup } from '@visactor/vrender-core';
 import type { IRegion } from '../../region/interface';
 import type { IComponent, IComponentOption } from '../interface';
 import type { IComponentPluginService, IComponentPlugin } from '../../plugin/components/interface';
@@ -42,6 +42,7 @@ export declare class BaseComponent<T extends IComponentSpec = IComponentSpec> ex
     clear(): void;
     compile(): void;
     compileMarks(group?: string | IGroupMark): void;
+    reAppendComponents(): void;
     protected _delegateEvent: (component: IGraphic, event: any, type: string, item?: any, datum?: Datum) => void;
     getBoundsInRect(rect: ILayoutRect, fullRect: ILayoutRect): IBoundsLike;
 }

package/types/component/base/util.d.ts

@@ -1,3 +1,8 @@
 import type { ITheme } from '../../theme';
+import { type IOrientType } from '../../typings';
+import type { ComponentThemeWithDirection } from '../interface';
 import { ComponentTypeEnum } from '../interface/type';
 export declare function getComponentThemeFromGlobalTheme(type: ComponentTypeEnum, chartTheme: ITheme, componentSpec: any, chartSpec: any): any;
+export declare const getComponentThemeWithDirection: <T>(componentSpec: {
+    orient?: IOrientType;
+}, originalTheme: ComponentThemeWithDirection<T>) => T;

package/types/component/brush/brush.d.ts

@@ -40,7 +40,10 @@ export declare class Brush<T extends IBrushSpec = IBrushSpec> extends BaseCompon
     private _needInitOutState;
     private _cacheInteractiveRangeAttrs;
     private _needDisablePickable;
-    private _relatedDataZooms;
+    private _releatedAxes;
+    private _regionAxisMap;
+    private _axisDataZoomMap;
+    private _zoomRecord;
     init(): void;
     static getSpecInfo(chartSpec: any): Maybe<IModelSpecInfo[]>;
     created(): void;
@@ -61,10 +64,12 @@ export declare class Brush<T extends IBrushSpec = IBrushSpec> extends BaseCompon
     private _reconfigItem;
     private _reconfigLinkedItem;
     private _isBrushContainItem;
-    private _setDataZoomState;
+    private _stateClamp;
+    private _setAxisAndDataZoom;
     protected _bindRegions(): void;
     protected _bindLinkedSeries(): void;
-    private _bindDataZoom;
+    private _initRegionAxisMap;
+    private _initAxisDataZoomMap;
     private _initNeedOperatedItem;
     protected _initMarkBrushState(componentIndex: number, stateName: string): void;
     protected initEvent(): void;

package/types/component/brush/interface.d.ts

@@ -10,9 +10,10 @@ interface IBrushDataBindSpec {
     seriesId?: string | string[];
     brushLinkSeriesIndex?: number | number[];
     brushLinkSeriesId?: string | string[];
-    dataZoomId?: string | string[];
-    dataZoomIndex?: number | number[];
-    dataZoomRangeExpand?: number;
+    zoomAfterBrush?: boolean;
+    axisId?: string | string[];
+    axisIndex?: number | number[];
+    axisRangeExpand?: number;
 }
 export interface IBrushTheme {
     style?: Partial<IPolygonMarkSpec>;

package/types/component/crosshair/base.d.ts

@@ -2,7 +2,7 @@ import type { Dict, IBoundsLike } from '@visactor/vutils';
 import type { IModelLayoutOption, IModelRenderOption } from '../../model/interface';
 import type { IRegion } from '../../region/interface';
 import { BaseComponent } from '../base/base-component';
-import type { IPadding, StringOrNumber } from '../../typings';
+import type { IPadding, StringOrNumber, TooltipActiveType, TooltipData } from '../../typings';
 import type { IComponentOption } from '../interface';
 import type { ICrossHair, CrossHairTrigger, ICartesianCrosshairSpec, IPolarCrosshairSpec, ICrosshairCategoryFieldSpec } from './interface';
 import type { IAxis } from '../axis/interface';
@@ -22,6 +22,7 @@ export interface IHair {
     label?: {
         visible: boolean;
         formatMethod?: (text: StringOrNumber | string[], position: string) => string | string[];
+        formatter?: string | string[];
         textStyle?: Dict<any>;
         minWidth?: number;
         maxWidth?: number;
@@ -30,6 +31,9 @@ export interface IHair {
         zIndex?: number;
     };
 }
+export interface IHairRadius extends IHair {
+    smooth?: boolean;
+}
 export declare abstract class BaseCrossHair<T extends ICartesianCrosshairSpec | IPolarCrosshairSpec> extends BaseComponent<T> implements ICrossHair {
     static specKey: string;
     specKey: string;
@@ -47,7 +51,7 @@ export declare abstract class BaseCrossHair<T extends ICartesianCrosshairSpec |
     private _limitBounds;
     constructor(spec: T, options: IComponentOption);
     protected abstract _showDefaultCrosshairBySpec(): void;
-    protected abstract _layoutCrosshair(x: number, y: number): void;
+    protected abstract _layoutCrosshair(x: number, y: number, tooltipData?: TooltipData, activeType?: TooltipActiveType): void;
     protected abstract _parseFieldInfo(): void;
     abstract hide(): void;
     protected _getLimitBounds(): IBoundsLike;
@@ -65,20 +69,25 @@ export declare abstract class BaseCrossHair<T extends ICartesianCrosshairSpec |
     private _registerEvent;
     private _eventOff;
     updateLayoutAttribute(): void;
+    protected calculateTriggerPoint(params: any): {
+        x: number;
+        y: number;
+    };
     private _handleIn;
     private _handleClickInEvent;
     private _handleHoverInEvent;
     private _handleOutEvent;
     private _getTriggerEvent;
+    private _registerTooltipEvent;
+    private _handleTooltipShow;
+    private _handleTooltipHideOrRelease;
     protected _getAxisInfoByField<T = IAxis>(field: 'x' | 'y' | 'category' | 'value'): IAxisInfo<T>;
     changeRegions(regions: IRegion[]): void;
     onLayoutEnd(ctx: IModelLayoutOption): void;
     onRender(ctx: IModelRenderOption): void;
     protected _releaseEvent(): void;
-    protected _firstSeries<T>(): T | null;
     protected _parseCrosshairSpec(): void;
     protected _parseField(field: ICrosshairCategoryFieldSpec, fieldName: string): any;
     protected _filterAxisByPoint<T>(axisMap: IAxisInfo<T>, relativeX: number, relativeY: number): IAxisInfo<T>;
-    protected clearEvent(): void;
-    clear(): void;
+    protected clearOutEvent(): void;
 }

package/types/component/crosshair/cartesian.d.ts

@@ -2,11 +2,10 @@ import type { Maybe } from '@visactor/vutils';
 import type { IComponentOption } from '../interface';
 import { ComponentTypeEnum } from '../interface/type';
 import type { ICartesianCrosshairSpec } from './interface';
-import type { IBound } from './base';
 import { BaseCrossHair } from './base';
 import type { IGraphic } from '@visactor/vrender-core';
 import type { IAxis } from '../axis/interface';
-import type { StringOrNumber } from '../../typings';
+import type { StringOrNumber, TooltipActiveType, TooltipData } from '../../typings';
 import type { IModelSpecInfo } from '../../model/interface';
 export declare class CartesianCrossHair<T extends ICartesianCrosshairSpec = ICartesianCrosshairSpec> extends BaseCrossHair<T> {
     static specKey: string;
@@ -32,18 +31,13 @@ export declare class CartesianCrossHair<T extends ICartesianCrosshairSpec = ICar
     private _findAllAxisContains;
     private _getValueAt;
     clearAxisValue(): void;
-    setAxisValue(v: StringOrNumber, axis: IAxis): void;
+    setAxisValue(value: StringOrNumber, axis: IAxis): void;
     private _getAllAxisValues;
-    protected _layoutCrosshair(relativeX: number, relativeY: number): void;
+    protected _layoutCrosshair(relativeX: number, relativeY: number, tooltipData?: TooltipData, activeType?: TooltipActiveType): void;
     hide(): void;
-    _setRegionArea(outRegion: IBound, currentValue: Map<number, {
-        v: StringOrNumber;
-        axis: IAxis;
-    }>): void;
     layoutByValue(tag?: number): void;
     private _layoutVertical;
     private _layoutHorizontal;
-    private _getRectSize;
     protected _parseFieldInfo(): void;
     private _updateCrosshair;
     private _updateCrosshairLabel;

package/types/component/crosshair/interface/cartesian.d.ts

@@ -0,0 +1,33 @@
+import type { StringOrNumber } from '../../../typings';
+import type { IAxis } from '../../axis';
+export interface ICrosshairLabelInfo {
+    visible: boolean;
+    text: StringOrNumber;
+    dx: number;
+    dy: number;
+    defaultFormatter?: (value: StringOrNumber) => StringOrNumber;
+}
+export interface ICrosshairInfoX {
+    height: number;
+    leftPos: number;
+    rightPos: number;
+    topPos: number;
+    x: number;
+    bottom: ICrosshairLabelInfo;
+    top: ICrosshairLabelInfo;
+    visible: boolean;
+    _isCache?: boolean;
+    axis: IAxis;
+}
+export interface ICrosshairInfoY {
+    width: number;
+    leftPos: number;
+    topPos: number;
+    bottomPos: number;
+    y: number;
+    left: ICrosshairLabelInfo;
+    right: ICrosshairLabelInfo;
+    visible: boolean;
+    _isCache?: boolean;
+    axis: IAxis;
+}

package/types/component/crosshair/interface/common.d.ts

@@ -0,0 +1,7 @@
+import type { StringOrNumber } from '../../../typings';
+import type { IAxis } from '../../axis';
+export type AxisCurrentValueMap = Map<number, {
+    value: StringOrNumber;
+    axis: IAxis;
+    [key: string]: any;
+}>;

package/types/component/crosshair/interface/index.d.ts

@@ -1,2 +1,5 @@
 export * from './spec';
 export * from './theme';
+export * from './cartesian';
+export * from './polar';
+export * from './common';

package/types/component/crosshair/interface/polar.d.ts

@@ -0,0 +1,25 @@
+import type { IPoint, StringOrNumber } from '../../../typings';
+import type { IPolarAxis } from '../../axis';
+export interface IPolarCrosshairInfo {
+    x: number;
+    y: number;
+    center: IPoint;
+    radius: number;
+    distance: number;
+    startAngle: number;
+    endAngle: number;
+    innerRadius: number;
+    visible: boolean;
+    sides: number;
+    angle: number;
+    point: IPoint;
+    _isCache?: boolean;
+    label?: IPolarCrosshairLabelInfo;
+    axis?: IPolarAxis;
+}
+export interface IPolarCrosshairLabelInfo {
+    visible: boolean;
+    text: StringOrNumber;
+    offset: number;
+    defaultFormatter?: (value: StringOrNumber) => StringOrNumber;
+}

package/types/component/crosshair/interface/spec.d.ts

@@ -1,3 +1,4 @@
+import type { ITooltipActiveTypeAsKeys } from '../../tooltip/interface/common';
 import type { IPadding, StringOrNumber, ILineMarkSpec, IRectMarkSpec, ITextMarkSpec } from '../../../typings';
 import type { IAxis } from '../../axis/interface';
 import type { IComponentSpec } from '../../base/interface';
@@ -10,6 +11,7 @@ export interface ICrossHair extends IComponent {
 }
 export type CrossHairTrigger = 'click' | 'hover' | ['click', 'hover'];
 export interface ICommonCrosshairSpec extends IComponentSpec {
+    followTooltip?: boolean | Partial<ITooltipActiveTypeAsKeys<boolean, boolean, boolean>>;
     trigger?: CrossHairTrigger;
     triggerOff?: CrossHairTrigger | 'none' | number;
     lockAfterClick?: boolean;
@@ -56,6 +58,7 @@ export interface ICrosshairRectSpec {
 export interface ICrosshairLabelSpec {
     visible?: boolean;
     formatMethod?: (text: StringOrNumber | string[]) => string | string[];
+    formatter?: string | string[];
     style?: Partial<ITextMarkSpec>;
     labelBackground?: ICrosshairLabelBackgroundSpec;
 }

package/types/component/crosshair/polar.d.ts

@@ -1,6 +1,7 @@
 import type { IComponentOption } from '../interface';
 import { ComponentTypeEnum } from '../interface/type';
 import type { IPolarCrosshairSpec } from './interface';
+import type { TooltipActiveType, TooltipData } from '../../typings';
 import { BaseCrossHair } from './base';
 import type { Maybe } from '@visactor/vutils';
 import type { IGraphic } from '@visactor/vrender-core';
@@ -28,10 +29,10 @@ export declare class PolarCrossHair<T extends IPolarCrosshairSpec = IPolarCrossh
     private _findAllAxisContains;
     private _getAllAxisValues;
     private _getValueByAxis;
-    protected _layoutCrosshair(relativeX: number, relativeY: number): void;
+    protected _layoutCrosshair(relativeX: number, relativeY: number, tooltipData?: TooltipData, activeType?: TooltipActiveType): void;
     layoutByValue(tag?: number): void;
-    private _layoutVertical;
-    private _layoutHorizontal;
+    private _layoutAngle;
+    private _layoutRadius;
     protected _parseFieldInfo(): void;
     private _updateCrosshairLabel;
     protected _getNeedClearVRenderComponents(): IGraphic[];

package/types/component/crosshair/utils/cartesian.d.ts

@@ -0,0 +1,34 @@
+import type { ICartesianSeries } from '../../../series';
+import type { ILayoutPoint } from '../../../typings';
+import type { IHair } from '../base';
+import type { AxisCurrentValueMap, ICrosshairInfoX, ICrosshairInfoY } from '../interface';
+export declare const layoutByValue: (tag: number, series: ICartesianSeries, layoutStartPoint: ILayoutPoint, currValueX: AxisCurrentValueMap, currValueY: AxisCurrentValueMap, xHair: IHair, yHair: IHair, enableRemain?: boolean, cacheXCrossHairInfo?: ICrosshairInfoX, cacheYCrossHairInfo?: ICrosshairInfoY) => {
+    x: ICrosshairInfoX;
+    y: ICrosshairInfoY;
+    offsetWidth: number;
+    offsetHeight: number;
+    bandWidth: number;
+    bandHeight: number;
+};
+export declare const layoutVerticalCrosshair: (xHair: IHair, crosshairInfo: ICrosshairInfoX, bandWidth: number, offsetWidth: number) => {
+    visible: boolean;
+    start: {
+        x: number;
+        y: number;
+    };
+    end: {
+        x: number;
+        y: number;
+    };
+};
+export declare const layoutHorizontalCrosshair: (yHair: IHair, crosshairInfo: ICrosshairInfoY, bandHeight: number, offsetHeight: number) => {
+    visible: boolean;
+    start: {
+        x: number;
+        y: number;
+    };
+    end: {
+        x: number;
+        y: number;
+    };
+};

package/types/component/crosshair/utils/common.d.ts

@@ -0,0 +1,9 @@
+import type { Tag } from '@visactor/vrender-components';
+import type { IBoundsLike } from '@visactor/vutils';
+import type { Datum } from '../../../typings';
+import type { ICrosshairTheme } from '../interface';
+import type { ITheme } from '../../../theme';
+export declare function limitTagInBounds(shape: Tag, bounds: IBoundsLike): void;
+export declare function getDatumByValue(data: Datum[], value: number, startField: string, endField?: string): Datum | null;
+export declare const getCartesianCrosshairTheme: (chartTheme: ITheme, chartSpec: any) => ICrosshairTheme;
+export declare const getPolarCrosshairTheme: (chartTheme: ITheme, chartSpec: any) => ICrosshairTheme;

package/types/component/crosshair/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './common';

package/types/component/crosshair/utils/polar.d.ts

@@ -0,0 +1,37 @@
+import type { IPolarSeries } from '../../../series';
+import type { IHair, IHairRadius } from '../base';
+import type { AxisCurrentValueMap, IPolarCrosshairInfo } from '../interface';
+export declare const layoutByValue: (series: IPolarSeries, currValueAngle: AxisCurrentValueMap, currValueRadius: AxisCurrentValueMap, angleHair: IHair, radiusHair: IHair, enableRemain?: boolean, cacheAngleCrossHairInfo?: IPolarCrosshairInfo, cacheRadiusCrossHairInfo?: IPolarCrosshairInfo) => {
+    angle: IPolarCrosshairInfo;
+    radius: IPolarCrosshairInfo;
+};
+export declare const layoutAngleCrosshair: (angleHair: IHair, crosshairInfo: IPolarCrosshairInfo) => {
+    center: import("../../../typings").IPoint;
+    innerRadius: number;
+    radius: number;
+    startAngle: number;
+    endAngle: number;
+    start?: undefined;
+    end?: undefined;
+} | {
+    start: {
+        x: number;
+        y: number;
+    };
+    end: {
+        x: number;
+        y: number;
+    };
+    center?: undefined;
+    innerRadius?: undefined;
+    radius?: undefined;
+    startAngle?: undefined;
+    endAngle?: undefined;
+};
+export declare const layoutRadiusCrosshair: (radiusHair: IHairRadius, crosshairInfo: IPolarCrosshairInfo) => {
+    center: import("../../../typings").IPoint;
+    startAngle: number;
+    endAngle: number;
+    radius: number;
+    sides: number;
+};

package/types/component/custom-mark/custom-mark.d.ts

@@ -2,11 +2,11 @@ import { BaseComponent } from '../base/base-component';
 import { ComponentTypeEnum } from '../interface/type';
 import type { IRegion } from '../../region/interface';
 import type { IModelRenderOption, IModelSpecInfo } from '../../model/interface';
-import type { EnableMarkType, ICustomMarkGroupSpec, ICustomMarkSpec } from '../../typings';
-import type { MarkTypeEnum } from '../../mark/interface';
+import type { EnableMarkType, ICustomMarkGroupSpec, ICustomMarkSpec, ILayoutRect } from '../../typings';
 import type { Maybe } from '@visactor/vutils';
 import type { IGraphic } from '@visactor/vrender-core';
-export declare class CustomMark<T = any> extends BaseComponent<any> {
+import type { IModelMarkAttributeContext } from '../../compile/mark/interface';
+export declare class CustomMark extends BaseComponent<ICustomMarkSpec<EnableMarkType>> {
     static type: ComponentTypeEnum;
     type: ComponentTypeEnum;
     static specKey: string;
@@ -14,13 +14,16 @@ export declare class CustomMark<T = any> extends BaseComponent<any> {
     layoutType: 'none';
     layoutZIndex: number;
     layoutLevel: number;
-    protected _spec: (ICustomMarkSpec<Exclude<EnableMarkType, MarkTypeEnum.group>> | ICustomMarkGroupSpec)[];
+    protected _spec: ICustomMarkSpec<Exclude<EnableMarkType, 'group'>> | ICustomMarkGroupSpec;
     static getSpecInfo(chartSpec: any): Maybe<IModelSpecInfo[]>;
     created(): void;
+    protected _markAttributeContext: IModelMarkAttributeContext;
+    getMarkAttributeContext(): IModelMarkAttributeContext;
+    protected _buildMarkAttributeContext(): void;
     protected initMarks(): void;
     private _createExtensionMark;
     initEvent(): void;
-    _compareSpec(spec: T, prevSpec: T): {
+    _compareSpec(spec: ICustomMarkSpec<EnableMarkType>, prevSpec: ICustomMarkSpec<EnableMarkType>): {
         change: boolean;
         reMake: boolean;
         reRender: boolean;
@@ -30,6 +33,14 @@ export declare class CustomMark<T = any> extends BaseComponent<any> {
     changeRegions(regions: IRegion[]): void;
     protected _getNeedClearVRenderComponents(): IGraphic[];
     onRender(ctx: IModelRenderOption): void;
+    afterCompile(): void;
     private _getMarkAttributeContext;
+    private _getLayoutRect;
+    getBoundsInRect(rect: ILayoutRect): {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+    };
 }
 export declare const registerCustomMark: () => void;

package/types/component/data-zoom/data-filter-base-component.d.ts

@@ -1,11 +1,11 @@
 import { BaseComponent } from '../base/base-component';
 import type { IEffect, IModelInitOption } from '../../model/interface';
-import type { IComponent, IComponentOption } from '../interface';
+import { type IComponent, type IComponentOption } from '../interface';
 import type { AdaptiveSpec, ILayoutRect, ILayoutType, IOrientType, IRect, StringOrNumber } from '../../typings';
 import type { IBaseScale } from '@visactor/vscale';
 import type { ICartesianBandAxisSpec } from '../axis/cartesian';
 import type { IBoundsLike } from '@visactor/vutils';
-import { IFilterMode } from './constant';
+import type { IFilterMode } from './interface';
 import type { IDataFilterComponent, IDataFilterComponentSpec, IRoamDragSpec, IRoamScrollSpec, IRoamZoomSpec } from './interface';
 import type { BaseEventParams } from '../../event/interface';
 import type { AbstractComponent } from '@visactor/vrender-components';
@@ -19,6 +19,7 @@ export declare abstract class DataFilterBaseComponent<T extends IDataFilterCompo
     protected _fixedBandSize?: number;
     protected _cacheRect?: ILayoutRect;
     protected _cacheVisibility?: boolean;
+    protected _dataUpdating: boolean;
     protected _stateScale: IBaseScale;
     protected _relatedAxisComponent: IComponent;
     protected _originalStateFields: Record<number, string | number>;
@@ -33,6 +34,7 @@ export declare abstract class DataFilterBaseComponent<T extends IDataFilterCompo
     protected _end: number;
     protected _minSpan: number;
     protected _maxSpan: number;
+    protected _spanCache: number;
     protected _shouldChange: boolean;
     protected _field: string | undefined;
     protected _stateField: string;
@@ -44,9 +46,6 @@ export declare abstract class DataFilterBaseComponent<T extends IDataFilterCompo
     protected _zoomAttr: IRoamZoomSpec;
     protected _dragAttr: IRoamDragSpec;
     protected _scrollAttr: IRoamScrollSpec;
-    get orient(): IOrientType;
-    get isHorizontal(): boolean;
-    get stateScale(): IBaseScale;
     get relatedAxisComponent(): IComponent;
     setStartAndEnd(start: number | string, end: number | string, rangeMode?: ['percent' | 'value', 'percent' | 'value']): void;
     enableInteraction(): void;
@@ -59,14 +58,13 @@ export declare abstract class DataFilterBaseComponent<T extends IDataFilterCompo
         x: number;
         y: number;
     }): void;
-    protected abstract _getComponentAttrs(): any;
     protected abstract _createOrUpdateComponent(): void;
     protected abstract _computeWidth(): number;
     protected abstract _computeHeight(): number;
     protected abstract _handleDataCollectionChange(): void;
     protected _handleChange(start: number, end: number, updateComponent?: boolean): void;
     protected _isReverse(): boolean;
-    protected _updateRangeFactor(tag?: string, label?: string): void;
+    protected _updateRangeFactor(tag?: 'startHandler' | 'endHandler'): void;
     effect: IEffect;
     protected _visible: boolean;
     get visible(): boolean;
@@ -81,7 +79,7 @@ export declare abstract class DataFilterBaseComponent<T extends IDataFilterCompo
     protected _initData(): void;
     setAttrFromSpec(): void;
     protected _statePointToData(state: number): any;
-    protected _dataToStatePoint(data: number | string): number;
+    dataToStatePoint(data: number | string): number;
     protected _modeCheck(statePoint: 'start' | 'end', mode: string): any;
     protected _setStateFromSpec(): void;
     private _parseFieldOfSeries;
@@ -112,7 +110,7 @@ export declare abstract class DataFilterBaseComponent<T extends IDataFilterCompo
         scrollY: number;
     }, e: BaseEventParams['event']) => boolean;
     protected _handleChartDrag: (delta: [number, number], e: BaseEventParams['event']) => void;
-    protected _handleChartMove: (value: number, rate: number) => void;
+    protected _handleChartMove: (value: number, rate: number) => boolean;
     protected _initCommonEvent(): void;
     updateLayoutAttribute(): void;
     onLayoutStart(layoutRect: IRect, viewRect: ILayoutRect, ctx: any): void;

package/types/component/data-zoom/data-zoom/data-zoom.d.ts

@@ -26,6 +26,7 @@ export declare class DataZoom<T extends IDataZoomSpec = IDataZoomSpec> extends D
     protected _middleHandlerSize: number;
     protected _startHandlerSize: number;
     protected _endHandlerSize: number;
+    protected _isReverseCache: boolean;
     static getSpecInfo(chartSpec: any): Maybe<IModelSpecInfo[]>;
     constructor(spec: T, options: IComponentOption);
     created(): void;
@@ -46,7 +47,7 @@ export declare class DataZoom<T extends IDataZoomSpec = IDataZoomSpec> extends D
     protected _createOrUpdateComponent(): void;
     protected _handleChange(start: number, end: number, updateComponent?: boolean, tag?: string): void;
     protected _handleDataCollectionChange(): void;
-    protected _getComponentAttrs(): {
+    protected _getComponentAttrs(isNeedPreview: boolean): {
         backgroundStyle: IRectGraphicAttribute;
         startHandlerStyle: ISymbolGraphicAttribute;
         middleHandlerStyle: {
@@ -73,6 +74,8 @@ export declare class DataZoom<T extends IDataZoomSpec = IDataZoomSpec> extends D
         };
         disableTriggerEvent: boolean;
     };
+    protected _getHandlerTextFormatMethod(spec: IDataZoomSpec['startText']): (text: any) => any;
     protected _getNeedClearVRenderComponents(): IGraphic[];
+    clear(): void;
 }
 export declare const registerDataZoom: () => void;

package/types/component/data-zoom/data-zoom/interface.d.ts

@@ -1,8 +1,8 @@
 import type { IMarkSpec } from '../../../typings/spec';
 import type { IAreaMarkSpec, ILineMarkSpec, IRectMarkSpec, ISymbolMarkSpec, ITextMarkSpec } from '../../../typings/visual';
 import type { IComponentSpec } from '../../base/interface';
-import type { IComponent } from '../../interface';
-import type { IFilterMode } from '../constant';
+import type { ComponentThemeWithDirection, IComponent } from '../../interface';
+import type { IFilterMode } from '../interface';
 import type { IDataFilterComponent, IDataFilterComponentSpec } from '../interface';
 export type IDataZoom = IComponent & IDataFilterComponent;
 export interface IDataZoomStyle {
@@ -37,22 +37,23 @@ export interface IDataZoomStyle {
     };
 }
 export interface IDataZoomSpec extends IDataZoomStyle, IDataFilterComponentSpec {
+    showBackgroundChart?: boolean;
     filterMode?: IFilterMode;
     valueField?: string;
     startText?: {
         padding?: number;
         style?: IMarkSpec<ITextMarkSpec>;
         formatMethod?: (text: string | number) => string | string[];
+        formatter?: string | string[];
     };
     endText?: {
         padding?: number;
         style?: IMarkSpec<ITextMarkSpec>;
         formatMethod?: (text: string | number) => string | string[];
+        formatter?: string | string[];
     };
     brushSelect?: boolean;
     ignoreBandSize?: boolean;
-    customDomain?: any[];
-    updateDataAfterChange?: (start: number, end: number, startValue: any, endValue: any) => void;
     tolerance?: number;
 }
 export type IDataZoomCommonTheme = IComponentSpec & IDataZoomStyle & {
@@ -61,7 +62,4 @@ export type IDataZoomCommonTheme = IComponentSpec & IDataZoomStyle & {
     height?: IDataZoomSpec['height'];
     brushSelect?: boolean;
 };
-export type IDataZoomTheme = IDataZoomCommonTheme & {
-    horizontal?: Omit<IDataZoomCommonTheme, 'orient'>;
-    vertical?: Omit<IDataZoomCommonTheme, 'orient'>;
-};
+export type IDataZoomTheme = ComponentThemeWithDirection<IDataZoomCommonTheme>;

package/types/component/data-zoom/index.d.ts

@@ -1,2 +1,3 @@
 export * from './data-zoom';
 export * from './scroll-bar';
+export * from './interface';

package/types/component/data-zoom/interface.d.ts

@@ -30,6 +30,8 @@ export interface IDataFilterComponentSpec extends Omit<IComponentSpec, 'width' |
     roamDrag?: IRoamDragSpec | boolean;
     roamScroll?: IRoamScrollSpec | boolean;
     realTime?: boolean;
+    customDomain?: any[];
+    updateDataAfterChange?: (start: number, end: number, startValue: any, endValue: any) => void;
 }
 export interface IRoamDragSpec extends IRoamSpec {
     reverse?: boolean;
@@ -57,3 +59,4 @@ export interface IDataFilterComponent extends IComponent {
         y: number;
     }) => void;
 }
+export type IFilterMode = 'filter' | 'axis';

package/types/component/data-zoom/scroll-bar/interface.d.ts

@@ -1,7 +1,8 @@
 import type { ILayoutItemSpec } from '../../../layout/interface';
 import type { IPadding } from '../../../typings';
 import type { IRectMarkSpec } from '../../../typings/visual';
-import type { IFilterMode } from '../constant';
+import type { ComponentThemeWithDirection } from '../../interface';
+import type { IFilterMode } from '../interface';
 import type { IDataFilterComponentSpec } from '../interface';
 export interface IScrollBarStyle {
     rail?: Omit<IRectMarkSpec, 'width' | 'height'>;
@@ -21,7 +22,4 @@ export type IScrollBarCommonTheme = ILayoutItemSpec & IScrollBarStyle & {
     round?: IScrollBarSpec['round'];
     innerPadding?: IScrollBarSpec['innerPadding'];
 };
-export type IScrollBarTheme = IScrollBarCommonTheme & {
-    horizontal?: Omit<IScrollBarCommonTheme, 'orient'>;
-    vertical?: Omit<IScrollBarCommonTheme, 'orient'>;
-};
+export type IScrollBarTheme = ComponentThemeWithDirection<IScrollBarCommonTheme>;

package/types/component/data-zoom/util.d.ts

@@ -1,6 +1,3 @@
-import type { IOrientType } from '../../typings';
-import type { ComponentTypeEnum } from '../interface';
-import type { ITheme } from '../../theme';
 export interface IDataFilterWithNewDomainOption {
     getNewDomain: () => any[];
     isContinuous: () => boolean;
@@ -20,4 +17,3 @@ export interface IDataFilterComputeDomainOption {
     };
 }
 export declare const dataFilterComputeDomain: (data: Array<any>, op: IDataFilterComputeDomainOption) => any[];
-export declare const getDataFilterTheme: (orient: IOrientType, type: ComponentTypeEnum, chartTheme: ITheme) => any;