From 8d509e7a45e0ee4f4a66e851c1c43b4bcf9cd70e Mon Sep 17 00:00:00 2001 From: skie1997 Date: Wed, 2 Jul 2025 15:36:55 +0800 Subject: [PATCH 01/45] refactor: add event filter for datazoom and sort interactive flow --- .../data-zoom/data-filter-base-component.ts | 716 ++++++------------ .../component/data-zoom/data-filter-event.ts | 220 ++++++ .../data-zoom/data-zoom/data-zoom.ts | 311 ++++---- .../data-zoom/scroll-bar/scroll-bar.ts | 104 ++- .../vchart/src/component/data-zoom/util.ts | 72 +- 5 files changed, 738 insertions(+), 685 deletions(-) create mode 100644 packages/vchart/src/component/data-zoom/data-filter-event.ts 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 index 83a7e0aece..ad98db98ae 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -1,63 +1,61 @@ import type { ICartesianSeries, IPolarSeries, ISeries } from '../../series/interface'; -// eslint-disable-next-line no-duplicate-imports import { eachSeries } from '../../util/model'; -// eslint-disable-next-line no-duplicate-imports import { BaseComponent } from '../base/base-component'; import type { IEffect, IModelInitOption } from '../../model/interface'; import { ComponentTypeEnum, type IComponent, type IComponentOption } from '../interface'; -import { dataFilterComputeDomain, dataFilterWithNewDomain, lockStatisticsFilter } from './util'; -import type { AdaptiveSpec, ILayoutRect, ILayoutType, IOrientType, IRect, StringOrNumber } from '../../typings'; +import { + dataFilterComputeDomain, + dataFilterWithNewDomain, + dataToStatePoint, + getAxisBandSize, + isReverse, + lockStatisticsFilter, + modeCheck, + parseDomainFromState, + statePointToData +} from './util'; +import type { + AdaptiveSpec, + ILayoutPoint, + ILayoutRect, + ILayoutType, + IOrientType, + IRect, + StringOrNumber +} from '../../typings'; import { registerDataSetInstanceParser, registerDataSetInstanceTransform } from '../../data/register'; -import { BandScale, isContinuous, isDiscrete } from '@visactor/vscale'; -// eslint-disable-next-line no-duplicate-imports -import type { IBandLikeScale, IBaseScale } from '@visactor/vscale'; -// eslint-disable-next-line no-duplicate-imports +import { BandScale, isContinuous, isDiscrete, type IBandLikeScale, type IBaseScale } from '@visactor/vscale'; import { Direction } from '../../typings/space'; import type { CartesianAxis, ICartesianBandAxisSpec } from '../axis/cartesian'; import { getDirectionByOrient, getOrient } from '../axis/cartesian/util/common'; -import type { IBoundsLike } from '@visactor/vutils'; -// eslint-disable-next-line no-duplicate-imports import { mixin, - clamp, isNil, - merge, isEqual, isValid, array, minInArray, maxInArray, - abs, last, - throttle + type IBoundsLike } from '@visactor/vutils'; -// eslint-disable-next-line no-duplicate-imports -import type { IFilterMode } from './interface'; -import type { - IDataFilterComponent, - IDataFilterComponentSpec, - IRoamDragSpec, - IRoamScrollSpec, - IRoamZoomSpec -} from './interface'; +import type { IDataFilterComponent, IDataFilterComponentSpec, IFilterMode } from './interface'; import { dataViewParser, DataView } from '@visactor/vdataset'; import { CompilableData } from '../../compile/data/compilable-data'; -import type { BaseEventParams } from '../../event/interface'; -import type { IZoomable } from '../../interaction/zoom/zoomable'; -// eslint-disable-next-line no-duplicate-imports import { Zoomable } from '../../interaction/zoom/zoomable'; -import type { AbstractComponent, DataZoom } from '@visactor/vrender-components'; -import type { IDelayType } from '../../typings/event'; +import type { AbstractComponent } from '@visactor/vrender-components'; import { TransformLevel } from '../../data/initialize'; import type { IDataZoomSpec } from './data-zoom/interface'; import type { IGraphic, IGroup } from '@visactor/vrender-core'; import { AttributeLevel } from '../../constant/attribute'; import type { IGroupMark } from '../../mark/interface/mark'; +import { DataFilterEvent } from './data-filter-event'; export abstract class DataFilterBaseComponent extends BaseComponent> implements IDataFilterComponent { + protected _dataFilterEvent: DataFilterEvent; layoutType: ILayoutType | 'none' = 'none'; protected _component: AbstractComponent; @@ -65,20 +63,17 @@ export abstract class DataFilterBaseComponent void; - // 是否为自动模式 protected _auto?: boolean; protected _fixedBandSize?: number; protected _cacheRect?: ILayoutRect; + protected _cacheLayoutStartPoint?: ILayoutPoint; protected _cacheVisibility?: boolean = undefined; protected _dataUpdating: boolean = false; // 数据 protected _stateScale: IBaseScale; - - protected _relatedAxisComponent!: IComponent; - protected _originalStateFields: Record; + protected _hasInitStateScale: boolean = false; // 与系列的关联关系 // 优先级：id > index @@ -88,6 +83,8 @@ export abstract class DataFilterBaseComponent; // 起点数据 protected _startValue!: number | string; @@ -116,27 +113,11 @@ export abstract class DataFilterBaseComponent; - if (!axis) { - return false; - } - const axisScale = axis.getScale() as IBandLikeScale; - return axisScale.range()[0] > axisScale.range()[1] && (!axis.getInverse() || this._isHorizontal); - } - protected _updateRangeFactor(tag?: 'startHandler' | 'endHandler') { // 轴的range有时是相反的 // 比如相同的region范围, 有的场景range为[0, 500], 有的场景range为[500, 0] @@ -216,7 +187,7 @@ export abstract class DataFilterBaseComponent; const axisScale = axis.getScale() as IBandLikeScale; - const reverse = this._isReverse(); + const reverse = isReverse(axis); const newRangeFactor: [number, number] = reverse ? [1 - this._end, 1 - this._start] : [this._start, this._end]; if (reverse) { @@ -255,6 +226,14 @@ export abstract class DataFilterBaseComponent { + this._startValue = startValue; + this._endValue = endValue; + this._newDomain = parseDomainFromState(this._startValue, this._endValue, this._stateScale); + this.effect.onZoomChange?.(tag); + return true; + }; + effect: IEffect = { onZoomChange: (tag?: 'startHandler' | 'endHandler') => { const axis = this._relatedAxisComponent as CartesianAxis; @@ -262,7 +241,7 @@ export abstract class DataFilterBaseComponent { + return { + start: this._start, + end: this._end + }; + }, + () => this._regions, + (() => this._option).bind(this), + () => this.event + ); } - /** - * the hook after this component is created - */ + /*** start: component lifecycle ***/ created() { super.created(); - // related axis this._setAxisFromSpec(); - // related regions this._setRegionsFromSpec(); this._initEvent(); - // data for background this._initData(); - // init the state scale - this._initStateScale(); - // set state: _start, _end, _startValue, _endValue, _newDomain from spec - this._setStateFromSpec(); } initLayout(): void { @@ -336,6 +322,83 @@ export abstract class DataFilterBaseComponent, prevSpec: AdaptiveSpec) { + const result = super._compareSpec(spec, prevSpec); + if (!result.reMake && !isEqual(prevSpec, spec)) { + result.reRender = true; + result.reMake = true; + } + + return result; + } + + reInit(spec?: AdaptiveSpec) { + super.reInit(spec); + + this._marks.forEach(g => { + (g).getMarks().forEach(m => { + this.initMarkStyleWithSpec(m, (this._spec as any)[m.name]); + }); + }); + } + + onLayoutStart(layoutRect: IRect, viewRect: ILayoutRect): void { + super.onLayoutStart(layoutRect, viewRect); + const isShown = this._autoUpdate(layoutRect); + this._autoVisible(isShown); + this._dataUpdating = false; + } + + updateLayoutAttribute(): void { + // create or update component + if (this._visible) { + this._createOrUpdateComponent(); + } + super.updateLayoutAttribute(); + } + + onLayoutEnd(): void { + // 布局结束后, start和end会发生变化, 因此需要再次更新visible + const isShown = !(this._start === 0 && this._end === 1); + this._autoVisible(isShown); + super.onLayoutEnd(); + } + + /** + * bounds预计算 + * @param rect + * @returns + */ + getBoundsInRect(rect: ILayoutRect): IBoundsLike { + const result: IBoundsLike = { x1: this.getLayoutStartPoint().x, y1: this.getLayoutStartPoint().y, x2: 0, y2: 0 }; + + if (this._isHorizontal) { + result.y2 = result.y1 + this._height; + result.x2 = result.x1 + rect.width; + } else { + result.x2 = result.x1 + this._width; + result.y2 = result.y1 + rect.height; + } + return result; + } + /*** end: component lifecycle **/ + + /*** start: set attributes & bind related axis and region ***/ + setAttrFromSpec() { + super.setAttrFromSpec(); + // interaction相关 + this._dataFilterEvent.setEventAttrFromSpec(); + // style相关 + this._field = this._spec.field; + this._width = this._computeWidth(); + this._height = this._computeHeight(); + this._visible = this._spec.visible ?? true; + } protected _setAxisFromSpec() { if (isValid(this._spec.axisId)) { this._relatedAxisComponent = this._option.getComponentByUserId(this._spec.axisId); @@ -403,43 +466,13 @@ export abstract class DataFilterBaseComponent d[this._stateField]); - - if (isContinuous) { - const domainNum = domain.map((n: any) => n * 1); - return domain.length ? [minInArray(domainNum), maxInArray(domainNum)] : [-Infinity, Infinity]; - } - - return domain; - } - - protected _initEvent() { - this._initCommonEvent(); - } + /*** end: set attributes & bind related axis and region ***/ + /*** start: data change and reset view ***/ protected _initData() { const dataCollection: any[] = []; const stateFields: string[] = []; const valueFields: string[] = []; - let isCategoryState: boolean; if (this._relatedAxisComponent) { const originalStateFields = {}; @@ -471,9 +504,11 @@ export abstract class DataFilterBaseComponent { + s.getViewDataStatistics().transform( + { + type: 'lockStatisticsFilter', + options: { + originalFields: () => { + return s.getViewDataStatistics().getFields(); + }, + getNewDomain: () => this._newDomain, + field: () => { + return this._field ?? this._parseFieldOfSeries(s); + }, + isContinuous: () => isContinuous(this._stateScale.type) + }, + level: 1 + }, + false + ); - if (this._spec.roamScroll === true || this._spec.roamScroll) { - this._scrollAttr = merge({}, this._scrollAttr, this._spec.roamScroll); - } else { - this._scrollAttr.enable = false; + s.addViewDataFilter({ + type: 'dataFilterWithNewDomain', + options: { + getNewDomain: () => this._newDomain, + field: () => { + return this._field ?? this._parseFieldOfSeries(s); + }, + isContinuous: () => isContinuous(this._stateScale.type) + }, + level: TransformLevel.dataZoomFilter + }); + }, + { + userId: this._seriesUserId, + specIndex: this._seriesIndex + } + ); } - - // style相关 - this._field = this._spec.field; - this._width = this._computeWidth(); - this._height = this._computeHeight(); - this._visible = this._spec.visible ?? true; } - - statePointToData(state: number) { - const scale = this._stateScale; - const domain = scale.domain(); - - // continuous scale: 本来可以用scale invert，但scale invert在大数据场景下性能不太好，所以这里自行计算 - if (isContinuous(scale.type)) { - if (this._isReverse()) { - return domain[0] + (last(domain) - domain[0]) * (1 - state); - } - return domain[0] + (last(domain) - domain[0]) * state; - } - - // discete scale: 根据bandSize计算不准确, bandSize不是最新的, 导致index计算错误, 所以仍然使用invert - let range = scale.range(); - if (this._isReverse()) { - range = range.slice().reverse(); + onDataUpdate(): void { + const domain = this._computeDomainOfStateScale(isContinuous(this._stateScale.type)); + this._stateScale.domain(domain, false); + this._handleChange(this._start, this._end, true); + // auto 模式下需要重新布局 + if (this._spec.auto && !isEqual(this._domainCache, domain)) { + this._domainCache = domain; + this._dataUpdating = true; + this.getChart()?.setLayoutTag(true, null, false); } - const posInRange: number = range[0] + (last(range) - range[0]) * state; - // const bandSize = (scale as BandScale).bandwidth(); - // const domainIndex = Math.min(Math.max(0, Math.floor(posInRange / bandSize)), domain.length - 1); - // return domain[domainIndex]; - return scale.invert(posInRange); } - - dataToStatePoint(data: number | string) { - const scale = this._stateScale; - const pos = scale.scale(data); - let range = scale.range(); - - if (!this._isHorizontal && isContinuous(scale.type)) { - range = range.slice().reverse(); - } - - return (pos - range[0]) / (last(range) - range[0]); + private _parseFieldOfSeries(s: ISeries) { + return this._originalStateFields?.[s.id]; } + /*** end: data change and reset view ***/ - protected _modeCheck(statePoint: 'start' | 'end', mode: string): any { - if (statePoint === 'start') { - return (mode === 'percent' && isValid(this._spec.start)) || (mode === 'value' && isValid(this._spec.startValue)); - } - return (mode === 'percent' && isValid(this._spec.end)) || (mode === 'value' && isValid(this._spec.endValue)); - } + /*** start: scale of filter ***/ protected _setStateFromSpec() { this._auto = !!this._spec.auto; @@ -637,20 +660,31 @@ export abstract class DataFilterBaseComponent; + this._startValue = statePointToData(start, this._stateScale, isReverse(axis)); + this._endValue = statePointToData(end, this._stateScale, isReverse(axis)); this._start = start; this._end = end; this._minSpan = this._spec.minSpan ?? 0; @@ -667,15 +701,10 @@ export abstract class DataFilterBaseComponent { - s.getViewDataStatistics().transform( - { - type: 'lockStatisticsFilter', - options: { - originalFields: () => { - return s.getViewDataStatistics().getFields(); - }, - getNewDomain: () => this._newDomain, - field: () => { - return this._field ?? this._parseFieldOfSeries(s); - }, - isContinuous: () => isContinuous(this._stateScale.type) - }, - level: 1 - }, - false - ); - - s.addViewDataFilter({ - type: 'dataFilterWithNewDomain', - options: { - getNewDomain: () => this._newDomain, - field: () => { - return this._field ?? this._parseFieldOfSeries(s); - }, - isContinuous: () => isContinuous(this._stateScale.type) - }, - level: TransformLevel.dataZoomFilter - }); - }, - { - userId: this._seriesUserId, - specIndex: this._seriesIndex - } - ); - } - } - - /** - * updateSpec - */ - _compareSpec(spec: AdaptiveSpec, prevSpec: AdaptiveSpec) { - const result = super._compareSpec(spec, prevSpec); - if (!result.reMake && !isEqual(prevSpec, spec)) { - result.reRender = true; - result.reMake = true; - } - - return result; - } - - reInit(spec?: AdaptiveSpec) { - super.reInit(spec); - - this._marks.forEach(g => { - (g).getMarks().forEach(m => { - this.initMarkStyleWithSpec(m, (this._spec as any)[m.name]); - }); - }); - } - - protected _parseDomainFromState(startValue: number | string, endValue: number | string) { - if (isContinuous(this._stateScale.type)) { - return [Math.min(endValue as number, startValue as number), Math.max(endValue as number, startValue as number)]; - } - const allDomain = this._stateScale.domain(); - const startIndex = allDomain.indexOf(startValue); - const endIndex = allDomain.indexOf(endValue); - return allDomain.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1); - } - - protected _handleStateChange = (startValue: number, endValue: number, tag?: string) => { - this._startValue = startValue; - this._endValue = endValue; - - this._newDomain = this._parseDomainFromState(this._startValue, this._endValue); - - this.effect.onZoomChange?.(tag); - return true; - }; - - protected _handleChartZoom = ( - params: { zoomDelta: number; zoomX?: number; zoomY?: number }, - e?: BaseEventParams['event'] - ) => { - if (!this._activeRoam || (this._zoomAttr.filter && !this._zoomAttr.filter(params, e))) { - return; - } - - const { zoomDelta, zoomX, zoomY } = params; - const { x, y } = this._regions[0].getLayoutStartPoint(); - const { width, height } = this._regions[0].getLayoutRect(); - - const delta = Math.abs(this._start - this._end); - const zoomRate = (this._spec.roamZoom as IRoamZoomSpec)?.rate ?? 1; - // zoomDelta > 1表示放大, zoomDelta < 1表示缩小 - if (delta >= 1 && zoomDelta < 1) { - return; - } - if (delta <= 0.01 && zoomDelta > 1) { - return; - } - const focusLoc = this._isHorizontal ? zoomX : zoomY; - const totalValue = delta * (zoomDelta - 1) * zoomRate; - let startValue = totalValue / 2; - let endValue = totalValue / 2; - if (focusLoc) { - const startLoc = this._isHorizontal ? x : y; - const endLoc = this._isHorizontal ? width : height; - startValue = (Math.abs(startLoc - focusLoc) / Math.abs(endLoc - startLoc)) * totalValue; - endValue = (Math.abs(endLoc - focusLoc) / Math.abs(endLoc - startLoc)) * totalValue; - } - const start = clamp(this._start + startValue, 0, 1); - const end = clamp(this._end - endValue, 0, 1); - - this._handleChange(Math.min(start, end), Math.max(start, end), true); - }; - - protected _handleChartScroll = (params: { scrollX: number; scrollY: number }, e: BaseEventParams['event']) => { - if (!this._activeRoam || (this._scrollAttr.filter && !this._scrollAttr.filter(params, e))) { - return false; - } - const { scrollX, scrollY } = params; - let value = this._isHorizontal ? scrollX : scrollY; - // 判断这次是否应该要滚动，最少 - const active = this._isHorizontal ? abs(scrollX / scrollY) >= 0.5 : abs(scrollY / scrollX) >= 0.5; - if (!this._scrollAttr.reverse) { - value = -value; - } - - if (active) { - this._handleChartMove(value, this._scrollAttr.rate ?? 1); - } - - // 判断是否滚动到最顶部或最底部 - // 如果滚动到最顶部或最底部，则不应该stopBubble - const hasChange = this._start !== 0 && this._end !== 1; - - return active && hasChange; - }; - - protected _handleChartDrag = (delta: [number, number], e: BaseEventParams['event']) => { - if (!this._activeRoam || (this._dragAttr.filter && !this._dragAttr.filter(delta, e))) { - return; - } - if ((this._spec.roamDrag as IRoamDragSpec)?.autoVisible) { - this.show(); - } - const [dx, dy] = delta; - let value = this._isHorizontal ? dx : dy; - if (this._dragAttr.reverse) { - value = -value; - } - this._handleChartMove(value, this._dragAttr.rate ?? 1); - }; - - protected _handleChartMove = (value: number, rate: number) => { - const totalValue = this._isHorizontal ? this.getLayoutRect().width : this.getLayoutRect().height; - if (Math.abs(value) >= 1e-6) { - if (value > 0 && this._end < 1) { - const moveDelta = Math.min(1 - this._end, value / totalValue) * rate; - this._handleChange(this._start + moveDelta, this._end + moveDelta, true); - } else if (value < 0 && this._start > 0) { - const moveDelta = Math.max(-this._start, value / totalValue) * rate; - this._handleChange(this._start + moveDelta, this._end + moveDelta, true); - } - } - return false; - }; - - protected _initCommonEvent() { - const delayType: IDelayType = this._spec?.delayType ?? 'throttle'; - const delayTime = isValid(this._spec?.delayType) ? (this._spec?.delayTime ?? 30) : 0; - const realTime = this._spec?.realTime ?? true; - const option = { delayType, delayTime, realTime, allowComponentZoom: true }; - if (this._zoomAttr.enable) { - (this as unknown as IZoomable).initZoomEventOfRegions(this._regions, null, this._handleChartZoom, option); - } - if (this._scrollAttr.enable) { - (this as unknown as IZoomable).initScrollEventOfRegions(this._regions, null, this._handleChartScroll, option); - } - if (this._dragAttr.enable) { - (this as unknown as IZoomable).initDragEventOfRegions(this._regions, null, this._handleChartDrag, option); + protected _computeDomainOfStateScale(isContinuous?: boolean) { + if ((this._spec as IDataZoomSpec).customDomain) { + return (this._spec as IDataZoomSpec).customDomain; } - if ((this._spec.roamDrag as IRoamDragSpec)?.autoVisible) { - const dragEnd = 'panend'; - this._throttledHide = throttle(() => this.hide(), 300); - this.event.on(dragEnd, () => { - this._throttledHide(); - }); + const domain = this._data.getLatestData().map((d: any) => d[this._stateField]); + if (isContinuous) { + const domainNum = domain.map((n: any) => n * 1); + return domain.length ? [minInArray(domainNum), maxInArray(domainNum)] : [-Infinity, Infinity]; } - } - updateLayoutAttribute(): void { - // create or update component - if (this._visible) { - this._createOrUpdateComponent(); - } - super.updateLayoutAttribute(); + return domain; } + /*** end: scale of filter ***/ + /*** start: auto model process ***/ protected _autoVisible(isShown: boolean) { if (!this._auto) { return; @@ -940,39 +762,6 @@ export abstract class DataFilterBaseComponent; const axisSpec = axis?.getSpec() as ICartesianBandAxisSpec | undefined; const axisScale = axis?.getScale() as IBandLikeScale; - const bandSizeResult = this._getAxisBandSize(axisSpec); + const bandSizeResult = getAxisBandSize(axisSpec); if ( !this._dataUpdating && @@ -1047,14 +826,11 @@ export abstract class DataFilterBaseComponent void; + + protected getLayoutRect: () => ILayoutRect; + protected getState: () => { start: number; end: number }; + protected getRegions: () => IRegion[]; + protected getOption: () => IComponentOption; + protected getEvent: () => IEvent; + protected _isHorizontal: boolean; + protected _regions: IRegion[]; + + protected _activeRoam: boolean = true; + protected _zoomAttr: IRoamZoomSpec = { + enable: true, + rate: 1, + focus: true + }; + protected _dragAttr: IRoamDragSpec = { + enable: true, + rate: 1, + reverse: true + }; + protected _scrollAttr: IRoamScrollSpec = { + enable: true, + rate: 1, + reverse: true + }; + + enableInteraction() { + this._activeRoam = true; + } + disableInteraction() { + this._activeRoam = false; + } + zoomIn(location?: { x: number; y: number }) { + this.handleChartZoom({ + zoomDelta: 1.2, // 经验值 + zoomX: location?.x, + zoomY: location?.y + }); + } + + zoomOut(location?: { x: number; y: number }) { + this.handleChartZoom({ + zoomDelta: 0.8, // 经验值 + zoomX: location?.x, + zoomY: location?.y + }); + } + + constructor( + type: 'dataZoom' | 'scrollBar', + spec: IDataZoomSpec, + handleChange: (start: number, end: number, updateComponent?: boolean) => void, + getLayoutRect: () => ILayoutRect, + getState: () => { start: number; end: number }, + getRegions: () => IRegion[], + getOption: () => IComponentOption, + getEvent: () => IEvent + ) { + this._type = type; + this._spec = spec; + this._handleChange = handleChange; + this.getLayoutRect = getLayoutRect; + this.getState = getState; + this.getRegions = getRegions; + this._regions = getRegions(); + this.getOption = getOption; + this._option = getOption(); + this.getEvent = getEvent; + + this._isHorizontal = getDirectionByOrient(getOrient(spec as any)) === Direction.horizontal; + } + + setEventAttrFromSpec() { + if (this._spec.roamZoom === true || this._spec.roamZoom) { + this._zoomAttr = merge({}, this._zoomAttr, this._spec.roamZoom); + } else { + this._zoomAttr.enable = false; + } + + if (this._spec.roamDrag === true || this._spec.roamDrag) { + this._dragAttr = merge({}, this._dragAttr, this._spec.roamDrag); + } else { + this._dragAttr.enable = false; + } + + if (this._spec.roamScroll === true || this._spec.roamScroll) { + this._scrollAttr = merge({}, this._scrollAttr, this._spec.roamScroll); + } else { + this._scrollAttr.enable = false; + } + + if (isBoolean((this._spec as any).roam)) { + this._zoomAttr.enable = this._type === 'scrollBar' ? false : (this._spec as any).roam; + this._dragAttr.enable = (this._spec as any).roam; + this._scrollAttr.enable = (this._spec as any).roam; + } + + if (this._zoomAttr.enable || this._dragAttr.enable || this._scrollAttr.enable) { + (this as unknown as IZoomable).initZoomable(this.getEvent(), this._option.mode); + } + } + + initZoomEvent = () => { + const delayType: IDelayType = this._spec?.delayType ?? 'throttle'; + const delayTime = isValid(this._spec?.delayType) ? (this._spec?.delayTime ?? 30) : 0; + const realTime = this._spec?.realTime ?? true; + const option = { delayType, delayTime, realTime, allowComponentZoom: true }; + if (this._zoomAttr.enable) { + (this as unknown as IZoomable).initZoomEventOfRegions(this.getRegions(), null, this.handleChartZoom, option); + } + if (this._scrollAttr.enable) { + (this as unknown as IZoomable).initScrollEventOfRegions(this.getRegions(), null, this.handleChartScroll, option); + } + if (this._dragAttr.enable) { + (this as unknown as IZoomable).initDragEventOfRegions(this.getRegions(), null, this.handleChartDrag, option); + } + }; + + /// add event listener + handleChartZoom = (params: { zoomDelta: number; zoomX?: number; zoomY?: number }, e?: BaseEventParams['event']) => { + if (!this._activeRoam || (this._zoomAttr.filter && !this._zoomAttr.filter(params, e))) { + return; + } + + const { zoomDelta, zoomX, zoomY } = params; + const { x, y } = this.getRegions()[0].getLayoutStartPoint(); + const { width, height } = this.getRegions()[0].getLayoutRect(); + + const delta = Math.abs(this.getState().start - this.getState().end); + const zoomRate = (this._spec.roamZoom as IRoamZoomSpec)?.rate ?? 1; + // zoomDelta > 1表示放大, zoomDelta < 1表示缩小 + if (delta >= 1 && zoomDelta < 1) { + return; + } + if (delta <= 0.01 && zoomDelta > 1) { + return; + } + const focusLoc = this._isHorizontal ? zoomX : zoomY; + const totalValue = delta * (zoomDelta - 1) * zoomRate; + let startValue = totalValue / 2; + let endValue = totalValue / 2; + if (focusLoc) { + const startLoc = this._isHorizontal ? x : y; + const endLoc = this._isHorizontal ? width : height; + startValue = (Math.abs(startLoc - focusLoc) / Math.abs(endLoc - startLoc)) * totalValue; + endValue = (Math.abs(endLoc - focusLoc) / Math.abs(endLoc - startLoc)) * totalValue; + } + const start = clamp(this.getState().start + startValue, 0, 1); + const end = clamp(this.getState().end - endValue, 0, 1); + + this._handleChange(Math.min(start, end), Math.max(start, end), true); + }; + + handleChartScroll = (params: { scrollX: number; scrollY: number }, e: BaseEventParams['event']) => { + if (!this._activeRoam || (this._scrollAttr.filter && !this._scrollAttr.filter(params, e))) { + return false; + } + const { scrollX, scrollY } = params; + let value = this._isHorizontal ? scrollX : scrollY; + // 判断这次是否应该要滚动，最少 + const active = this._isHorizontal ? abs(scrollX / scrollY) >= 0.5 : abs(scrollY / scrollX) >= 0.5; + if (!this._scrollAttr.reverse) { + value = -value; + } + + if (active) { + this.handleChartMove(value, this._scrollAttr.rate ?? 1); + } + + // 判断是否滚动到最顶部或最底部 + // 如果滚动到最顶部或最底部，则不应该stopBubble + const hasChange = this.getState().start !== 0 && this.getState().end !== 1; + + return active && hasChange; + }; + + handleChartDrag = (delta: [number, number], e: BaseEventParams['event']) => { + if (!this._activeRoam || (this._dragAttr.filter && !this._dragAttr.filter(delta, e))) { + return; + } + const [dx, dy] = delta; + let value = this._isHorizontal ? dx : dy; + if (this._dragAttr.reverse) { + value = -value; + } + this.handleChartMove(value, this._dragAttr.rate ?? 1); + }; + + handleChartMove = (value: number, rate: number) => { + const totalValue = this._isHorizontal ? this.getLayoutRect().width : this.getLayoutRect().height; + if (Math.abs(value) >= 1e-6) { + if (value > 0 && this.getState().end < 1) { + const moveDelta = Math.min(1 - this.getState().end, value / totalValue) * rate; + this._handleChange(this.getState().start + moveDelta, this.getState().end + moveDelta, true); + } else if (value < 0 && this.getState().start > 0) { + const moveDelta = Math.max(-this.getState().start, value / totalValue) * rate; + this._handleChange(this.getState().start + moveDelta, this.getState().end + moveDelta, true); + } + } + return false; + }; +} + +mixin(DataFilterEvent, Zoomable); 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 index 6dda3d667e..c1e77ff94c 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -1,39 +1,21 @@ -// eslint-disable-next-line no-duplicate-imports -import { - isBoolean, - isFunction, - isNil, - isNumber, - isValid, - last, - maxInArray, - minInArray, - uniqArray -} from '@visactor/vutils'; +import { isFunction, isNil, isNumber, isValid, last, maxInArray, minInArray, uniqArray } from '@visactor/vutils'; import { mergeSpec } from '@visactor/vutils-extension'; -import type { IComponentOption } from '../../interface'; -// eslint-disable-next-line no-duplicate-imports -import { ComponentTypeEnum } from '../../interface/type'; +import { ComponentTypeEnum, type IComponentOption } from '../../interface'; import { DataFilterBaseComponent } from '../data-filter-base-component'; -// eslint-disable-next-line no-duplicate-imports -import type { DataZoomAttributes } from '@visactor/vrender-components'; -// eslint-disable-next-line no-duplicate-imports -import { DataZoom as DataZoomComponent } from '@visactor/vrender-components'; +import { DataZoom as DataZoomComponent, type DataZoomAttributes } from '@visactor/vrender-components'; import { transformToGraphic } from '../../../util/style'; import type { IRectGraphicAttribute, INode, ISymbolGraphicAttribute, IGroup, IGraphic } from '@visactor/vrender-core'; -import type { Datum, ILayoutType } from '../../../typings'; -import type { ILinearScale, IBaseScale } from '@visactor/vscale'; -// eslint-disable-next-line no-duplicate-imports -import { LinearScale, isContinuous, isDiscrete } from '@visactor/vscale'; +import type { Datum, ILayoutRect, ILayoutType } from '../../../typings'; +import { LinearScale, isContinuous, isDiscrete, type ILinearScale, type IBaseScale } from '@visactor/vscale'; import { LayoutLevel, LayoutZIndex } from '../../../constant/layout'; import { ChartEvent } from '../../../constant/event'; import type { IDataZoomSpec } from './interface'; import { Factory } from '../../../core/factory'; -import type { IZoomable } from '../../../interaction/zoom'; import type { CartesianAxis } from '../../axis/cartesian'; import { DataZoomSpecTransformer } from './data-zoom-transformer'; import { getFormatFunction } from '../../util'; import { dataZoom } from '../../../theme/builtin/common/component/data-zoom'; +import { isReverse, statePointToData } from '../util'; export class DataZoom extends DataFilterBaseComponent { static type = ComponentTypeEnum.dataZoom; @@ -64,6 +46,8 @@ export class DataZoom extends DataFilte protected _isReverseCache: boolean = false; + protected _cacheRect?: ILayoutRect; + constructor(spec: T, options: IComponentOption) { super(spec, options); @@ -71,23 +55,99 @@ export class DataZoom extends DataFilte this._filterMode = spec.filterMode ?? 'filter'; } + /*** start: init event and event dispatch ***/ + protected _handleChange(start: number, end: number, updateComponent?: boolean, tag?: string) { + super._handleChange(start, end, updateComponent); + + if (this._shouldChange) { + if (updateComponent && this._component) { + this._component.setStartAndEnd(start, end); + } else { + const axis = this._relatedAxisComponent as CartesianAxis; + + this._start = start; + this._end = end; + const startValue = statePointToData(start, this._stateScale, isReverse(axis)); + const endValue = statePointToData(end, this._stateScale, isReverse(axis)); + const hasChange = isFunction(this._spec.updateDataAfterChange) + ? this._spec.updateDataAfterChange(start, end, startValue, endValue) + : this._handleStateChange(startValue, endValue, tag); + if (hasChange) { + this.event.emit(ChartEvent.dataZoomChange, { + model: this, + value: { + filterData: this._filterMode !== 'axis', + start, + end, + startValue: this._startValue, + endValue: this._endValue, + newDomain: this._newDomain + } + }); + } + } + } + } + + protected _handleDataCollectionChange() { + const data = this._data.getDataView(); + data.reRunAllTransform(); + + const domain = this._computeDomainOfValueScale(); + + if (domain) { + if (!this._valueScale) { + this._valueScale = new LinearScale(); + } + this._valueScale.domain(domain); + if (this._component) { + this._createOrUpdateComponent(true); + } + } + } + /*** end: init event and event dispatch ***/ + + /*** start: component lifecycle ***/ created() { super.created(); this._initValueScale(); } - setAttrFromSpec() { - super.setAttrFromSpec(); + updateLayoutAttribute(): void { + if (this._cacheVisibility !== false) { + super.updateLayoutAttribute(); + } + } - if (isBoolean((this._spec as any).roam)) { - this._zoomAttr.enable = (this._spec as any).roam; - this._dragAttr.enable = (this._spec as any).roam; - this._scrollAttr.enable = (this._spec as any).roam; + onLayoutEnd(): void { + super.onLayoutEnd(); + const axis = this._relatedAxisComponent as CartesianAxis; + // 初始时reverse判断并不准确，导致start和end颠倒, 保险起见在layoutend之后触发该逻辑 + // FIXME: 牺牲了一定性能，有待优化 + if (isReverse(axis) && !this._isReverseCache) { + this._isReverseCache = isReverse(axis); + this.effect.onZoomChange(); } + } + + clear(): void { + if (this._component) { + const container = this.getContainer(); + this._component.removeAllChild(); + if (container) { + container.removeChild(this._component as unknown as INode); + } - if (this._zoomAttr.enable || this._dragAttr.enable || this._scrollAttr.enable) { - (this as unknown as IZoomable).initZoomable(this.event, this._option.mode); + this._component = null; } + super.clear(); + } + + /*** end: component lifecycle ***/ + + /*** start: set attributes & bind related axis and region ***/ + setAttrFromSpec() { + super.setAttrFromSpec(); // size相关 this._backgroundSize = this._spec.background?.size ?? 30; @@ -109,22 +169,12 @@ export class DataZoom extends DataFilte const endHandlerVisble = this._spec.endHandler.style.visible ?? true; this._startHandlerSize = startHandlerVisble ? this._spec.startHandler.style.size : 0; this._endHandlerSize = endHandlerVisble ? this._spec.endHandler.style.size : 0; + this._width = this._computeWidth(); + this._height = this._computeHeight(); } + /*** end: set attributes & bind related axis and region ***/ - /** LifeCycle API**/ - onLayoutEnd(): void { - this._updateScaleRange(); - // 初始时reverse判断并不准确，导致start和end颠倒, 保险起见在layoutend之后触发该逻辑 - // FIXME: 牺牲了一定性能，有待优化 - if (this._isReverse() && !this._isReverseCache) { - this._isReverseCache = this._isReverse(); - this.effect.onZoomChange(); - } - if (this._cacheVisibility !== false) { - super.onLayoutEnd(); - } - } - + /*** start: scale of background chart ***/ protected _initValueScale() { const domain = this._computeDomainOfValueScale(); @@ -174,18 +224,6 @@ export class DataZoom extends DataFilte this._valueScale.range([0, compWidth - this._middleHandlerSize]); } } - if (this._component && this._cacheVisibility !== false) { - this._component.setAttributes({ - size: { - width: compWidth, - height: compHeight - }, - position: { - x: this.getLayoutStartPoint().x, - y: this.getLayoutStartPoint().y - } - }); - } } protected _computeDomainOfValueScale() { @@ -195,47 +233,6 @@ export class DataZoom extends DataFilte return domain.length ? [minInArray(domainNum), maxInArray(domainNum)] : null; } - protected _computeMiddleHandlerSize(): number { - let size = 0; - if (this._spec?.middleHandler?.visible) { - const middleHandlerIconSize = this._spec.middleHandler.icon.style.size ?? 8; - const middleHandlerBackSize = this._spec.middleHandler.background.size ?? 40; - size += Math.max(middleHandlerIconSize as number, middleHandlerBackSize); - } - return size; - } - - protected _computeWidth(): number { - if (this._visible === false) { - return 0; - } - - if (isNumber(this._spec.width)) { - return this._spec.width; - } - - if (this._isHorizontal) { - return this.getLayoutRect().width; - } - - return this._backgroundSize + this._middleHandlerSize; - } - - protected _computeHeight(): number { - if (this._visible === false) { - return 0; - } - - if (isNumber(this._spec.height)) { - return this._spec.height; - } - - if (this._isHorizontal) { - return this._backgroundSize + this._middleHandlerSize; - } - return this.getLayoutRect().height; - } - protected _isScaleValid(scale: IBaseScale | ILinearScale) { if (!scale || !scale.domain()) { return false; @@ -281,7 +278,58 @@ export class DataZoom extends DataFilte const min = yScale.domain()[0]; return yScale.scale(min) + this.getLayoutStartPoint().y + offsetTop + offsetHandler; }; + /*** end: scale of background chart ***/ + /** start: component layout attr ***/ + protected _computeMiddleHandlerSize(): number { + let size = 0; + if (this._spec?.middleHandler?.visible) { + const middleHandlerIconSize = this._spec.middleHandler.icon.style.size ?? 8; + const middleHandlerBackSize = this._spec.middleHandler.background.size ?? 40; + size += Math.max(middleHandlerIconSize as number, middleHandlerBackSize); + } + return size; + } + + protected _computeWidth(): number { + if (this._visible === false) { + return 0; + } + + if (isNumber(this._spec.width)) { + return this._spec.width; + } + + if (this._isHorizontal) { + return this.getLayoutRect().width; + } + + return ( + Math.max(this._startHandlerSize || 0, this._endHandlerSize || 0, this._backgroundSize || 0) + + this._middleHandlerSize + ); + } + + protected _computeHeight(): number { + if (this._visible === false) { + return 0; + } + + if (isNumber(this._spec.height)) { + return this._spec.height; + } + + if (this._isHorizontal) { + return ( + Math.max(this._startHandlerSize || 0, this._endHandlerSize || 0, this._backgroundSize || 0) + + this._middleHandlerSize + ); + } + return this.getLayoutRect().height; + } + /** end: component layout attr ***/ + + /** start: datazoom component attr ***/ private _getAttrs(isNeedPreview: boolean) { const spec = this._spec ?? ({} as T); return { @@ -303,7 +351,7 @@ export class DataZoom extends DataFilte minSpan: this._minSpan, maxSpan: this._maxSpan, delayType: spec.delayType, - delayTime: isValid(spec.delayType) ? spec.delayTime ?? 30 : 0, + delayTime: isValid(spec.delayType) ? (spec.delayTime ?? 30) : 0, realTime: spec.realTime ?? true, previewData: isNeedPreview && this._data.getLatestData(), previewPointsX: isNeedPreview && this._dataToPositionX, @@ -313,7 +361,7 @@ export class DataZoom extends DataFilte } as DataZoomAttributes; } - protected _createOrUpdateComponent() { + protected _createOrUpdateComponent(changeData?: boolean) { if (this._visible) { const xScale = this._isHorizontal ? this._stateScale : this._valueScale; const yScale = this._isHorizontal ? this._valueScale : this._stateScale; @@ -334,7 +382,7 @@ export class DataZoom extends DataFilte } this._component.setStatePointToData((state: number) => this.statePointToData(state)); - this._component.addEventListener('change', (e: any) => { + this._component.addEventListener('dataZoomChange', (e: any) => { const { start, end, tag } = e.detail; this._handleChange(start, end, undefined, tag); }); @@ -345,51 +393,6 @@ export class DataZoom extends DataFilte } } - protected _handleChange(start: number, end: number, updateComponent?: boolean, tag?: string) { - super._handleChange(start, end, updateComponent); - - if (this._shouldChange) { - if (updateComponent && this._component) { - this._component.setStartAndEnd(start, end); - } - - this._start = start; - this._end = 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); - if (hasChange) { - this.event.emit(ChartEvent.dataZoomChange, { - model: this, - value: { - filterData: this._filterMode !== 'axis', - start, - end, - startValue: this._startValue, - endValue: this._endValue, - newDomain: this._newDomain - } - }); - } - } - } - - protected _handleDataCollectionChange() { - const data = this._data.getDataView(); - data.reRunAllTransform(); - this._component?.setPreviewData(data.latestData); - - if (this._valueScale) { - const domain = this._computeDomainOfValueScale(); - - if (domain) { - this._valueScale.domain(domain); - } - } - } - protected _getComponentAttrs(isNeedPreview: boolean) { const { middleHandler = {}, @@ -461,23 +464,11 @@ export class DataZoom extends DataFilte const { formatFunc } = getFormatFunction(formatMethod, formatter); return formatFunc ? (text: any) => formatFunc(text, { label: text }, formatter) : undefined; } + /** end: datazoom component attr ***/ protected _getNeedClearVRenderComponents(): IGraphic[] { return [this._component] as unknown as IGroup[]; } - - clear(): void { - if (this._component) { - const container = this.getContainer(); - this._component.removeAllChild(); - if (container) { - container.removeChild(this._component as unknown as INode); - } - - this._component = null; - } - super.clear(); - } } export const registerDataZoom = () => { 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 index 7f460d7538..21d28774f8 100644 --- a/packages/vchart/src/component/data-zoom/scroll-bar/scroll-bar.ts +++ b/packages/vchart/src/component/data-zoom/scroll-bar/scroll-bar.ts @@ -1,4 +1,4 @@ -import { isBoolean, isEmpty, isFunction, isNil, isNumber, isValid } from '@visactor/vutils'; +import { isEmpty, isFunction, isNil, isNumber, isValid } from '@visactor/vutils'; import type { IComponentOption } from '../../interface'; // eslint-disable-next-line no-duplicate-imports import { ComponentTypeEnum } from '../../interface/type'; @@ -13,10 +13,10 @@ import { ChartEvent } from '../../../constant/event'; import { SCROLL_BAR_DEFAULT_SIZE } from '../../../constant/scroll-bar'; import type { IScrollBarSpec } from './interface'; import { Factory } from '../../../core/factory'; -import type { IZoomable } from '../../../interaction/zoom'; import type { ILayoutType } from '../../../typings/layout'; import { isClose } from '../../../util'; import { scrollBar } from '../../../theme/builtin/common/component/scroll-bar'; +import { statePointToData } from '../util'; // import { SCROLLBAR_EVENT, SCROLLBAR_END_EVENT } from '@visactor/vrender-components/es/constant'; // 由vrender透出, 接入新版本后需修改 @@ -38,7 +38,7 @@ export class ScrollBar extends DataFi layoutLevel: number = LayoutLevel.DataZoom; layoutType: ILayoutType = 'region-relative'; - // datazoom组件 + // scrollbar组件 protected _component!: ScrollBarComponent; constructor(spec: T, options: IComponentOption) { @@ -46,26 +46,57 @@ export class ScrollBar extends DataFi this._filterMode = spec.filterMode ?? 'axis'; } - setAttrFromSpec() { - super.setAttrFromSpec(); - // roam兼容逻辑 - if (isBoolean((this._spec as any).roam)) { - this._zoomAttr.enable = false; // 对于之前的逻辑而言，只要配置了roam，zoom始终不打开 - this._dragAttr.enable = (this._spec as any).roam; - this._scrollAttr.enable = (this._spec as any).roam; + /*** start: init event and event dispatch ***/ + protected _handleChange(start: number, end: number, updateComponent?: boolean) { + super._handleChange(start, end, updateComponent); + // filter out scroll event with same scroll value + const isSameScrollValue = isClose(this._start, start) && isClose(this._end, end); + // realTime为false时，start和end始终没有变化过, 但是需要触发change事件 + if (this._shouldChange && (!isSameScrollValue || this._spec.realTime === false)) { + if (updateComponent && this._component) { + this._component.setAttribute('range', [start, end]); + } + + this._start = start; + this._end = end; + const startValue = statePointToData(start, this._stateScale, false); + const endValue = statePointToData(end, this._stateScale, false); + const hasChange = isFunction(this._spec.updateDataAfterChange) + ? this._spec.updateDataAfterChange(start, end, startValue, endValue) + : this._handleStateChange(startValue, endValue); + if (hasChange) { + this.event.emit(ChartEvent.scrollBarChange, { + model: this, + value: { + filterData: this._filterMode !== 'axis', + start: this._start, + end: this._end, + startValue: this._startValue, + endValue: this._endValue, + newDomain: this._newDomain + } + }); + } } - if (this._zoomAttr.enable || this._dragAttr.enable || this._scrollAttr.enable) { - (this as unknown as IZoomable).initZoomable(this.event, this._option.mode); + } + + protected _handleDataCollectionChange() { + if (this._spec.auto) { + const data = this._data.getDataView(); + data.reRunAllTransform(); } } + /*** end: init event and event dispatch ***/ - /** LifeCycle API**/ + /*** start: component lifecycle ***/ onLayoutEnd(): void { this._updateScaleRange(); this.effect.onZoomChange?.(); super.onLayoutEnd(); } + /*** end: component lifecycle ***/ + /*** start: scale ***/ protected _updateScaleRange() { if (this._component) { this._component.setAttributes({ @@ -76,7 +107,9 @@ export class ScrollBar extends DataFi }); } } + /*** end: scale ***/ + /** start: component layout attr ***/ protected _computeWidth(): number { if (isNumber(this._spec.width)) { return this._spec.width; @@ -101,7 +134,9 @@ export class ScrollBar extends DataFi return SCROLL_BAR_DEFAULT_SIZE; } + /** end: component layout attr ***/ + /** start: scrollbar component attr ***/ private _getAttrs() { return { zIndex: this.layoutZIndex, @@ -112,7 +147,7 @@ export class ScrollBar extends DataFi range: [this._start, this._end], direction: this._isHorizontal ? 'horizontal' : 'vertical', delayType: this._spec?.delayType, - delayTime: isValid(this._spec?.delayType) ? this._spec?.delayTime ?? 30 : 0, + delayTime: isValid(this._spec?.delayType) ? (this._spec?.delayTime ?? 30) : 0, realTime: this._spec?.realTime ?? true, ...this._getComponentAttrs() } as ScrollBarAttributes; @@ -138,46 +173,6 @@ export class ScrollBar extends DataFi } } - protected _handleChange(start: number, end: number, updateComponent?: boolean) { - super._handleChange(start, end, updateComponent); - // filter out scroll event with same scroll value - const isSameScrollValue = isClose(this._start, start) && isClose(this._end, end); - // realTime为false时，start和end始终没有变化过, 但是需要触发change事件 - if (this._shouldChange && (!isSameScrollValue || this._spec.realTime === false)) { - if (updateComponent && this._component) { - this._component.setAttribute('range', [start, end]); - } - - this._start = start; - this._end = 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)); - if (hasChange) { - this.event.emit(ChartEvent.scrollBarChange, { - model: this, - value: { - filterData: this._filterMode !== 'axis', - start: this._start, - end: this._end, - startValue: this._startValue, - endValue: this._endValue, - newDomain: this._newDomain - } - }); - } - } - } - - protected _handleDataCollectionChange() { - if (this._spec.auto) { - const data = this._data.getDataView(); - data.reRunAllTransform(); - } - } - protected _getComponentAttrs() { const { rail, slider, innerPadding } = this._spec; const attrs: Partial = {}; @@ -195,6 +190,7 @@ export class ScrollBar extends DataFi attrs.disableTriggerEvent = this._option.disableTriggerEvent; return attrs; } + /** end: scrollbar component attr ***/ protected _getNeedClearVRenderComponents(): IGraphic[] { return [this._component] as unknown as IGroup[]; diff --git a/packages/vchart/src/component/data-zoom/util.ts b/packages/vchart/src/component/data-zoom/util.ts index 81d16cf54c..8277198c4d 100644 --- a/packages/vchart/src/component/data-zoom/util.ts +++ b/packages/vchart/src/component/data-zoom/util.ts @@ -1,6 +1,9 @@ -import { isArray, last } from '@visactor/vutils'; +import { isArray, isValid, last } from '@visactor/vutils'; import { array, isNil } from '../../util'; import type { DataView } from '@visactor/vdataset'; +import type { IBandLikeScale, IBaseScale } from '@visactor/vscale'; +import { isContinuous } from '@visactor/vscale'; +import type { CartesianAxis, ICartesianBandAxisSpec } from '../axis/cartesian'; export interface IDataFilterWithNewDomainOption { getNewDomain: () => any[]; @@ -161,3 +164,70 @@ export const dataFilterComputeDomain = (data: Array, op: IDataFilterCompute return resultData; }; + +export const statePointToData = (state: number, scale: IBaseScale, reverse: boolean) => { + const domain = scale.domain(); + + // continuous scale: 本来可以用scale invert，但scale invert在大数据场景下性能不太好，所以这里自行计算 + if (isContinuous(scale.type)) { + if (reverse) { + return domain[0] + (last(domain) - domain[0]) * (1 - state); + } + return domain[0] + (last(domain) - domain[0]) * state; + } + + // discete scale: 根据bandSize计算不准确, bandSize不是最新的, 导致index计算错误, 所以仍然使用invert + let range = scale.range(); + if (reverse) { + range = range.slice().reverse(); + } + const posInRange: number = range[0] + (last(range) - range[0]) * state; + return scale.invert(posInRange); +}; + +export const dataToStatePoint = (data: number | string, scale: IBaseScale, isHorizontal: boolean) => { + const pos = scale.scale(data); + let range = scale.range(); + + if (!isHorizontal && isContinuous(scale.type)) { + range = range.slice().reverse(); + } + + return (pos - range[0]) / (last(range) - range[0]); +}; + +export const isReverse = (axisComponent: CartesianAxis) => { + const axis = axisComponent; + if (!axis) { + return false; + } + const axisScale = axis.getScale() as IBandLikeScale; + return axisScale.range()[0] > axisScale.range()[1] && (!axis.getInverse() || this._isHorizontal); +}; + +export const getAxisBandSize = (axisSpec?: ICartesianBandAxisSpec) => { + const bandSize = axisSpec?.bandSize; + const maxBandSize = axisSpec?.maxBandSize; + const minBandSize = axisSpec?.minBandSize; + if (bandSize || minBandSize || maxBandSize) { + return { bandSize, maxBandSize, minBandSize }; + } + return undefined; +}; + +export const modeCheck = (statePoint: 'start' | 'end', mode: string, spec: any): any => { + if (statePoint === 'start') { + return (mode === 'percent' && isValid(spec.start)) || (mode === 'value' && isValid(spec.startValue)); + } + return (mode === 'percent' && isValid(spec.end)) || (mode === 'value' && isValid(spec.endValue)); +}; + +export const parseDomainFromState = (startValue: number | string, endValue: number | string, scale: IBaseScale) => { + if (isContinuous(scale.type)) { + return [Math.min(endValue as number, startValue as number), Math.max(endValue as number, startValue as number)]; + } + const allDomain = scale.domain(); + const startIndex = allDomain.indexOf(startValue); + const endIndex = allDomain.indexOf(endValue); + return allDomain.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1); +}; From 13e3e588e9a6504d0c3880f62e2d6d1a3b244435 Mon Sep 17 00:00:00 2001 From: skie1997 Date: Wed, 2 Jul 2025 15:38:57 +0800 Subject: [PATCH 02/45] feat: bind the same orient axis. feat #3373 --- .../src/component/data-zoom/data-filter-base-component.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 index ad98db98ae..c6338ac878 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -407,10 +407,12 @@ export abstract class DataFilterBaseComponent (cm as any)._orient === this._orient); + const sameOrientAxis = axes.find( + (cm: any) => getDirectionByOrient((cm as any)._orient) === getDirectionByOrient(this._orient) + ); if (sameOrientAxis) { this._relatedAxisComponent = sameOrientAxis; From ea105d5f45577ff549f58944fce2ed1723187ccf Mon Sep 17 00:00:00 2001 From: skie1997 Date: Wed, 2 Jul 2025 15:41:32 +0800 Subject: [PATCH 03/45] refactor: add event filter for datazoom and sort interactive flow --- .../vchart/src/component/data-zoom/data-zoom/data-zoom.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 index c1e77ff94c..e666b9c2aa 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -380,7 +380,10 @@ export class DataZoom extends DataFilte } else { isNeedPreview && this._component.setPreviewPointsX1(this._dataToPositionX2); } - this._component.setStatePointToData((state: number) => this.statePointToData(state)); + const axis = this._relatedAxisComponent as CartesianAxis; + this._component.setStatePointToData((state: number) => + statePointToData(state, this._stateScale, isReverse(axis)) + ); this._component.addEventListener('dataZoomChange', (e: any) => { const { start, end, tag } = e.detail; From 80e23f7a8129011744013bbcee64deb40779ae9f Mon Sep 17 00:00:00 2001 From: skie1997 Date: Wed, 2 Jul 2025 15:46:45 +0800 Subject: [PATCH 04/45] refactor: add event filter for datazoom and sort interactive flow --- .../component/data-zoom/data-filter-base-component.ts | 6 +++--- .../src/component/data-zoom/data-zoom/data-zoom.ts | 10 +++++----- packages/vchart/src/component/data-zoom/util.ts | 4 ++-- 3 files changed, 10 insertions(+), 10 deletions(-) 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 index c6338ac878..6c2f0c323f 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -187,7 +187,7 @@ export abstract class DataFilterBaseComponent; const axisScale = axis.getScale() as IBandLikeScale; - const reverse = isReverse(axis); + const reverse = isReverse(axis, this._isHorizontal); const newRangeFactor: [number, number] = reverse ? [1 - this._end, 1 - this._start] : [this._start, this._end]; if (reverse) { @@ -685,8 +685,8 @@ export abstract class DataFilterBaseComponent; - this._startValue = statePointToData(start, this._stateScale, isReverse(axis)); - this._endValue = statePointToData(end, this._stateScale, isReverse(axis)); + this._startValue = statePointToData(start, this._stateScale, isReverse(axis, this._isHorizontal)); + this._endValue = statePointToData(end, this._stateScale, isReverse(axis, this._isHorizontal)); 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 index e666b9c2aa..2593290579 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -67,8 +67,8 @@ export class DataZoom extends DataFilte this._start = start; this._end = end; - const startValue = statePointToData(start, this._stateScale, isReverse(axis)); - const endValue = statePointToData(end, this._stateScale, isReverse(axis)); + const startValue = statePointToData(start, this._stateScale, isReverse(axis, this._isHorizontal)); + const endValue = statePointToData(end, this._stateScale, isReverse(axis, this._isHorizontal)); const hasChange = isFunction(this._spec.updateDataAfterChange) ? this._spec.updateDataAfterChange(start, end, startValue, endValue) : this._handleStateChange(startValue, endValue, tag); @@ -124,8 +124,8 @@ export class DataZoom extends DataFilte const axis = this._relatedAxisComponent as CartesianAxis; // 初始时reverse判断并不准确，导致start和end颠倒, 保险起见在layoutend之后触发该逻辑 // FIXME: 牺牲了一定性能，有待优化 - if (isReverse(axis) && !this._isReverseCache) { - this._isReverseCache = isReverse(axis); + if (isReverse(axis, this._isHorizontal) && !this._isReverseCache) { + this._isReverseCache = isReverse(axis, this._isHorizontal); this.effect.onZoomChange(); } } @@ -382,7 +382,7 @@ export class DataZoom extends DataFilte } const axis = this._relatedAxisComponent as CartesianAxis; this._component.setStatePointToData((state: number) => - statePointToData(state, this._stateScale, isReverse(axis)) + statePointToData(state, this._stateScale, isReverse(axis, this._isHorizontal)) ); this._component.addEventListener('dataZoomChange', (e: any) => { diff --git a/packages/vchart/src/component/data-zoom/util.ts b/packages/vchart/src/component/data-zoom/util.ts index 8277198c4d..ea02c6ddeb 100644 --- a/packages/vchart/src/component/data-zoom/util.ts +++ b/packages/vchart/src/component/data-zoom/util.ts @@ -196,13 +196,13 @@ export const dataToStatePoint = (data: number | string, scale: IBaseScale, isHor return (pos - range[0]) / (last(range) - range[0]); }; -export const isReverse = (axisComponent: CartesianAxis) => { +export const isReverse = (axisComponent: CartesianAxis, isHorizontal: boolean) => { const axis = axisComponent; if (!axis) { return false; } const axisScale = axis.getScale() as IBandLikeScale; - return axisScale.range()[0] > axisScale.range()[1] && (!axis.getInverse() || this._isHorizontal); + return axisScale.range()[0] > axisScale.range()[1] && (!axis.getInverse() || isHorizontal); }; export const getAxisBandSize = (axisSpec?: ICartesianBandAxisSpec) => { From a18b815638062aac0ca2c2ae25228822a9ca4e72 Mon Sep 17 00:00:00 2001 From: skie1997 Date: Wed, 2 Jul 2025 16:02:55 +0800 Subject: [PATCH 05/45] fix: bar always display when set bar minHeight. fix#3284 --- ...r-datazoom-enhance-and-bugfix_2025-07-02-08-02.json | 10 ++++++++++ packages/vchart/src/series/bar/bar.ts | 4 +++- packages/vchart/src/series/util/stack.ts | 4 +++- 3 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-02.json diff --git a/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-02.json b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-02.json new file mode 100644 index 0000000000..27706ef1dd --- /dev/null +++ b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-02.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "fix: bar always display when set bar minHeight. fix#3284", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file diff --git a/packages/vchart/src/series/bar/bar.ts b/packages/vchart/src/series/bar/bar.ts index 9869043b11..4f97250e82 100644 --- a/packages/vchart/src/series/bar/bar.ts +++ b/packages/vchart/src/series/bar/bar.ts @@ -334,7 +334,9 @@ export class BarSeries extends Cartes const y = valueInScaleRange(this[endMethod](datum), seriesScale, useWholeRange); let height = Math.abs(y1 - y); - if (height < barMinHeight) { + if (height <= 0) { + height = 0; + } else if (height < barMinHeight) { height = barMinHeight; } diff --git a/packages/vchart/src/series/util/stack.ts b/packages/vchart/src/series/util/stack.ts index dfd6c326c9..461e3697de 100644 --- a/packages/vchart/src/series/util/stack.ts +++ b/packages/vchart/src/series/util/stack.ts @@ -83,7 +83,9 @@ function computeOneDatumY( } let height = Math.abs(y1 - y); - if (height < barMinHeight) { + if (height <= 0) { + height = 0; + } else if (height < barMinHeight) { height = barMinHeight; } From d4976634189740da4571298d0e19f0bebeee6aee Mon Sep 17 00:00:00 2001 From: skie1997 Date: Wed, 2 Jul 2025 16:48:56 +0800 Subject: [PATCH 06/45] fix: dot series display bug. fix #3282 --- ...oom-enhance-and-bugfix_2025-07-02-08-48.json | 10 ++++++++++ packages/vchart/src/series/dot/dot.ts | 17 ++++++++--------- 2 files changed, 18 insertions(+), 9 deletions(-) create mode 100644 common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-48.json diff --git a/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-48.json b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-48.json new file mode 100644 index 0000000000..b155e3e09f --- /dev/null +++ b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-48.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "fix: dot series display bug. fix #3282", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file diff --git a/packages/vchart/src/series/dot/dot.ts b/packages/vchart/src/series/dot/dot.ts index bd106bd014..fe8603a998 100644 --- a/packages/vchart/src/series/dot/dot.ts +++ b/packages/vchart/src/series/dot/dot.ts @@ -37,7 +37,6 @@ export class DotSeries extends Cartes private _xDimensionStatisticsDomain: any[]; - // csj-Q: 是否需要把这些属性写成接口？ protected _seriesGroupField?: string; getSeriesGroupField() { return this._seriesField; @@ -192,11 +191,11 @@ export class DotSeries extends Cartes this.setMarkStyle( clipMark, { - x: -this._spec.leftAppendPadding, + x: -(this._spec.leftAppendPadding ?? 0), y: 0, // 本应使用this.getLayoutRect().width, 但这该返回值为0。考虑到横向不需要裁剪，故先采用一个较大值 width: 10000, - height: this._spec.clipHeight + height: () => this._spec.clipHeight ?? this._region.getLayoutRect().height }, 'normal', AttributeLevel.Series @@ -390,8 +389,8 @@ export class DotSeries extends Cartes return this._seriesGroupField ? this.getViewDataStatistics()?.latestData[this._seriesGroupField].values : this._seriesField - ? this.getViewDataStatistics()?.latestData[this._seriesField].values - : []; + ? this.getViewDataStatistics()?.latestData[this._seriesField].values + : []; } /** @@ -413,10 +412,10 @@ export class DotSeries extends Cartes const colorDomain = this._dotTypeField ? this.getViewDataStatistics()?.latestData[this._dotTypeField].values : this._seriesGroupField - ? this.getViewDataStatistics()?.latestData[this._seriesGroupField].values - : this._seriesField - ? this.getViewDataStatistics()?.latestData[this._seriesField].values - : []; + ? this.getViewDataStatistics()?.latestData[this._seriesGroupField].values + : this._seriesField + ? this.getViewDataStatistics()?.latestData[this._seriesField].values + : []; const colorRange = this._getDataScheme(); return new ColorOrdinalScale().domain(colorDomain).range(colorRange); } From f1083f2c960b95dad3f77581dd8b9180021e96bf Mon Sep 17 00:00:00 2001 From: skie1997 Date: Wed, 2 Jul 2025 16:58:58 +0800 Subject: [PATCH 07/45] fix: brush range not correct. fix #3091 --- ...m-enhance-and-bugfix_2025-07-02-08-58.json | 10 +++++++ packages/vchart/src/component/brush/brush.ts | 28 ++++++++++++------- 2 files changed, 28 insertions(+), 10 deletions(-) create mode 100644 common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-58.json diff --git a/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-58.json b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-58.json new file mode 100644 index 0000000000..1e3e9acb24 --- /dev/null +++ b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-58.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "fix: brush range not correct. fix #3091", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file diff --git a/packages/vchart/src/component/brush/brush.ts b/packages/vchart/src/component/brush/brush.ts index 21a77390e7..5ee7fa599b 100644 --- a/packages/vchart/src/component/brush/brush.ts +++ b/packages/vchart/src/component/brush/brush.ts @@ -7,7 +7,7 @@ import { ComponentTypeEnum } from '../interface/type'; import { Brush as BrushComponent, IOperateType as BrushEvent } from '@visactor/vrender-components'; import type { IBounds, IPointLike, Maybe } from '@visactor/vutils'; // eslint-disable-next-line no-duplicate-imports -import { array, polygonIntersectPolygon, isValid, last, cloneDeep } from '@visactor/vutils'; +import { array, polygonIntersectPolygon, isValid, last } from '@visactor/vutils'; import type { IModelRenderOption, IModelSpecInfo } from '../../model/interface'; import type { IRegion } from '../../region/interface'; import type { IGraphic, IGroup, INode, IPolygon } from '@visactor/vrender-core'; @@ -22,6 +22,8 @@ import type { DataZoom } from '../data-zoom'; import type { AxisComponent } from '../axis/base-axis'; import { getSpecInfo } from '../util'; import { brush } from '../../theme/builtin/common/component/brush'; +import { isReverse, statePointToData } from '../data-zoom/util'; +import type { CartesianAxis } from '../axis/cartesian'; const IN_BRUSH_STATE = 'inBrush'; const OUT_BRUSH_STATE = 'outOfBrush'; @@ -669,18 +671,16 @@ export class Brush extends BaseComponent i const axisRangeExpand = this._spec.axisRangeExpand ?? 0; const { x1, x2, y1, y2 } = operateMaskBounds; const regionStartAttr = isHorizontal ? 'x' : 'y'; + const regionSizeAttr = isHorizontal ? 'width' : 'height'; const boundsStart = isHorizontal ? x1 : y1; const boundsEnd = isHorizontal ? x2 : y2; if (this._axisDataZoomMap[axis.id]) { const dataZoom = this._axisDataZoomMap[axis.id]; - const releatedAxis = dataZoom.relatedAxisComponent as AxisComponent; - const startValue = releatedAxis - .getScale() - .invert(boundsStart - region.getLayoutStartPoint()[regionStartAttr]); - const endValue = releatedAxis.getScale().invert(boundsEnd - region.getLayoutStartPoint()[regionStartAttr]); - const startPercent = dataZoom.dataToStatePoint(startValue); - const endPercent = dataZoom.dataToStatePoint(endValue); + const startPercent = + (boundsStart - region.getLayoutStartPoint()[regionStartAttr]) / region.getLayoutRect()[regionSizeAttr]; + const endPercent = + (boundsEnd - region.getLayoutStartPoint()[regionStartAttr]) / region.getLayoutRect()[regionSizeAttr]; const newStartPercent = this._stateClamp(startPercent - axisRangeExpand); const newEndPercent = this._stateClamp(endPercent + axisRangeExpand); dataZoom.setStartAndEnd(Math.min(newStartPercent, newEndPercent), Math.max(newStartPercent, newEndPercent), [ @@ -692,8 +692,16 @@ export class Brush extends BaseComponent i operateComponent: dataZoom, start: newStartPercent, end: newEndPercent, - startValue: dataZoom.statePointToData(newStartPercent), - endValue: dataZoom.statePointToData(newEndPercent) + startValue: statePointToData( + newStartPercent, + dataZoom.stateScale, + isReverse(dataZoom.relatedAxisComponent as CartesianAxis, dataZoom.isHorizontal) + ), + endValue: statePointToData( + newEndPercent, + dataZoom.stateScale, + isReverse(dataZoom.relatedAxisComponent as CartesianAxis, dataZoom.isHorizontal) + ) }); } else { const range = axis.getScale().range(); From de422b75e6ebb57d401dd8996ecd5969c327e118 Mon Sep 17 00:00:00 2001 From: skie1997 Date: Wed, 2 Jul 2025 17:14:41 +0800 Subject: [PATCH 08/45] fix: brush range not correct. fix #3091 --- .../data-zoom/data-filter-base-component.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) 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 index 6c2f0c323f..8ce3129add 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -62,6 +62,9 @@ export abstract class DataFilterBaseComponent; // 起点数据 @@ -113,10 +122,6 @@ export abstract class DataFilterBaseComponent Date: Wed, 2 Jul 2025 17:23:46 +0800 Subject: [PATCH 09/45] fix: datazoom layout when set scale. fix #2574 & #2535 --- ...m-enhance-and-bugfix_2025-07-02-09-23.json | 10 +++++ .../data-zoom/data-zoom/data-zoom.ts | 43 +++++++++++++++---- 2 files changed, 44 insertions(+), 9 deletions(-) create mode 100644 common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-09-23.json diff --git a/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-09-23.json b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-09-23.json new file mode 100644 index 0000000000..06b288d39d --- /dev/null +++ b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-09-23.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "fix: datazoom layout when set scale. fix #2574 & #2535", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file 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 index 2593290579..733611e107 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -1,4 +1,14 @@ -import { isFunction, isNil, isNumber, isValid, last, maxInArray, minInArray, uniqArray } from '@visactor/vutils'; +import { + isFunction, + isNil, + isNumber, + isValid, + last, + maxInArray, + minInArray, + uniqArray, + type IBoundsLike +} from '@visactor/vutils'; import { mergeSpec } from '@visactor/vutils-extension'; import { ComponentTypeEnum, type IComponentOption } from '../../interface'; import { DataFilterBaseComponent } from '../data-filter-base-component'; @@ -143,6 +153,27 @@ export class DataZoom extends DataFilte super.clear(); } + getBoundsInRect(rect: ILayoutRect): IBoundsLike { + const result: IBoundsLike = { x1: this.getLayoutStartPoint().x, y1: this.getLayoutStartPoint().y, x2: 0, y2: 0 }; + const startHandlerScaleXSize = this._startHandlerSize * (this._spec.startHandler.style.scaleX ?? 1); + const startHandlerScaleYSize = this._startHandlerSize * (this._spec.startHandler.style.scaleY ?? 1); + const endHandlerScaleXSize = this._endHandlerSize * (this._spec.endHandler.style.scaleX ?? 1); + const endHandlerScaleYSize = this._endHandlerSize * (this._spec.endHandler.style.scaleY ?? 1); + const extendWidth = this._isHorizontal + ? (startHandlerScaleXSize - this._startHandlerSize) / 2 + (endHandlerScaleXSize - this._endHandlerSize) / 2 + : (Math.max(startHandlerScaleXSize, endHandlerScaleXSize) - this._width) / 2; + const extendHeight = this._isHorizontal + ? (Math.max(startHandlerScaleYSize, endHandlerScaleYSize) - this._height) / 2 + : (startHandlerScaleYSize - this._startHandlerSize) / 2 + (endHandlerScaleYSize - this._endHandlerSize) / 2; + if (this._isHorizontal) { + result.y2 = result.y1 + this._height + extendHeight; + result.x2 = result.x1 + rect.width + extendWidth; + } else { + result.x2 = result.x1 + this._width + extendWidth; + result.y2 = result.y1 + rect.height + extendHeight; + } + return result; + } /*** end: component lifecycle ***/ /*** start: set attributes & bind related axis and region ***/ @@ -152,18 +183,12 @@ export class DataZoom extends DataFilte // size相关 this._backgroundSize = this._spec.background?.size ?? 30; this._middleHandlerSize = this._computeMiddleHandlerSize(); - this._width = this._computeWidth(); - this._height = this._computeHeight(); // startHandler和endHandler size如果没有配置，则默认跟随background宽 or 高 if (isNil(this._spec?.startHandler?.style?.size)) { - this._spec.startHandler.style.size = this._isHorizontal - ? this._height - this._middleHandlerSize - : this._width - this._middleHandlerSize; + this._spec.startHandler.style.size = this._backgroundSize; } if (isNil(this._spec?.endHandler?.style?.size)) { - this._spec.endHandler.style.size = this._isHorizontal - ? this._height - this._middleHandlerSize - : this._width - this._middleHandlerSize; + this._spec.endHandler.style.size = this._backgroundSize; } const startHandlerVisble = this._spec.startHandler.style.visible ?? true; const endHandlerVisble = this._spec.endHandler.style.visible ?? true; From 921d01285465a60feb9348f1f9a8331ff1514703 Mon Sep 17 00:00:00 2001 From: skie1997 Date: Wed, 2 Jul 2025 19:29:44 +0800 Subject: [PATCH 10/45] fix: domain will follow axis. fix #2770 --- ...m-enhance-and-bugfix_2025-07-02-11-29.json | 10 ++++++ .../data-zoom/data-filter-base-component.ts | 33 ++++++++++--------- .../vchart/src/component/data-zoom/util.ts | 1 - 3 files changed, 28 insertions(+), 16 deletions(-) create mode 100644 common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-11-29.json diff --git a/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-11-29.json b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-11-29.json new file mode 100644 index 0000000000..1677b98292 --- /dev/null +++ b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-11-29.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "fix: domain will follow axis. fix #2770", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file 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 index 8ce3129add..36d67de864 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -254,6 +254,7 @@ export abstract class DataFilterBaseComponent).getScale(); - const isContinuousScale = isContinuous(scale.type); - const domain = this._computeDomainOfStateScale(isContinuousScale); - - this._stateScale = scale.clone(); - if (isContinuousScale) { - const domainNum = domain.map((n: any) => n * 1); - this._stateScale - .domain(domain.length ? [minInArray(domainNum), maxInArray(domainNum)] : [0, 1], true) - .range(defaultRange); - } else { - this._stateScale.domain(domain, true).range(defaultRange); - } + this._stateScale = scale.clone().range(defaultRange); } else { this._stateScale = new BandScale(); this._stateScale.domain(this._computeDomainOfStateScale(), true).range(defaultRange); diff --git a/packages/vchart/src/component/data-zoom/util.ts b/packages/vchart/src/component/data-zoom/util.ts index ea02c6ddeb..2dc91bd095 100644 --- a/packages/vchart/src/component/data-zoom/util.ts +++ b/packages/vchart/src/component/data-zoom/util.ts @@ -4,7 +4,6 @@ import type { DataView } from '@visactor/vdataset'; import type { IBandLikeScale, IBaseScale } from '@visactor/vscale'; import { isContinuous } from '@visactor/vscale'; import type { CartesianAxis, ICartesianBandAxisSpec } from '../axis/cartesian'; - export interface IDataFilterWithNewDomainOption { getNewDomain: () => any[]; isContinuous: () => boolean; From d71ea04e1aa8ed6b31f50df38245112a439100d0 Mon Sep 17 00:00:00 2001 From: skie1997 Date: Wed, 2 Jul 2025 19:34:14 +0800 Subject: [PATCH 11/45] fix: update perview when update data. fix #3331 --- ...m-enhance-and-bugfix_2025-07-02-11-34.json | 10 +++++++++ .../data-zoom/data-zoom/data-zoom.ts | 21 +++++++++++++++---- 2 files changed, 27 insertions(+), 4 deletions(-) create mode 100644 common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-11-34.json diff --git a/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-11-34.json b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-11-34.json new file mode 100644 index 0000000000..0ebfbb9923 --- /dev/null +++ b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-11-34.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "fix: update perview when update data. fix #3331", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file 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 index 733611e107..2a1803fa41 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -394,18 +394,33 @@ export class DataZoom extends DataFilte this._isScaleValid(xScale) && this._isScaleValid(yScale) && this._spec.showBackgroundChart !== false; const attrs = this._getAttrs(isNeedPreview); + const axis = this._relatedAxisComponent as CartesianAxis; + if (this._component) { - this._component.setAttributes(attrs); + // this._component.setAttributes(attrs); + if (changeData) { + this._component.setPreviewData(this._data.getDataView().latestData); + if (isNeedPreview) { + if (this._isHorizontal) { + this._component.setPreviewPointsY1(this._dataToPositionY2); + } else { + this._component.setPreviewPointsX1(this._dataToPositionX2); + } + this._component.setStatePointToData((state: number) => + statePointToData(state, this._stateScale, isReverse(axis, this._isHorizontal)) + ); + } + } } else { const container = this.getContainer(); this._component = new DataZoomComponent(attrs); + this._component.setPreviewData(this._data.getDataView().latestData); if (this._isHorizontal) { isNeedPreview && this._component.setPreviewPointsY1(this._dataToPositionY2); } else { isNeedPreview && this._component.setPreviewPointsX1(this._dataToPositionX2); } - const axis = this._relatedAxisComponent as CartesianAxis; this._component.setStatePointToData((state: number) => statePointToData(state, this._stateScale, isReverse(axis, this._isHorizontal)) ); @@ -415,8 +430,6 @@ export class DataZoom extends DataFilte this._handleChange(start, end, undefined, tag); }); container.add(this._component as unknown as INode); - - this._updateScaleRange(); } } } From cc68dbfc1cd3a48be44586bb35ebd15583528a83 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Fri, 25 Jul 2025 15:59:55 +0800 Subject: [PATCH 12/45] feat: add the scaleRawDomainUpdate event for data filter component --- .../vchart/src/component/axis/base-axis.ts | 8 ++++- .../component/axis/mixin/band-axis-mixin.ts | 8 +++++ .../component/axis/mixin/linear-axis-mixin.ts | 21 ++++++++++++- .../data-zoom/data-filter-base-component.ts | 30 +++++++++++-------- packages/vchart/src/constant/event.ts | 1 + packages/vchart/src/mark/base/base-mark.ts | 2 +- 6 files changed, 55 insertions(+), 15 deletions(-) diff --git a/packages/vchart/src/component/axis/base-axis.ts b/packages/vchart/src/component/axis/base-axis.ts index bed91919bb..7f08677ef2 100644 --- a/packages/vchart/src/component/axis/base-axis.ts +++ b/packages/vchart/src/component/axis/base-axis.ts @@ -266,7 +266,13 @@ export abstract class AxisComponent { - data.push(s.getRawDataStatisticsByField(f, false) as { min: number; max: number; values: any[] }); + data.push( + s.getRawDataStatisticsByField(f, !!isContinuous(this._scale.type)) as { + min: number; + max: number; + values: any[]; + } + ); }); } else if (viewData && viewData.latestData && viewData.latestData.length) { const seriesData = s.getViewDataStatistics?.(); diff --git a/packages/vchart/src/component/axis/mixin/band-axis-mixin.ts b/packages/vchart/src/component/axis/mixin/band-axis-mixin.ts index 1cfc12b636..636098e74a 100644 --- a/packages/vchart/src/component/axis/mixin/band-axis-mixin.ts +++ b/packages/vchart/src/component/axis/mixin/band-axis-mixin.ts @@ -99,6 +99,10 @@ export class BandAxisMixin { } protected _rawDomainIndex: { [key: string | number | symbol]: number }[] = []; + protected _rawDomain: StringOrNumber[][] = []; + getRawDomain() { + return this._rawDomain; + } dataToPosition(values: any[], cfg: IAxisLocationCfg = {}): number { if (values.length === 0 || this._scales.length === 0) { @@ -255,6 +259,7 @@ export class BandAxisMixin { protected _updateRawDomain() { // 默认值设置了无效？ this._rawDomainIndex = []; + this._rawDomain = []; const userDomain = this._spec.domain; for (let i = 0; i < this._scales.length; i++) { @@ -265,12 +270,15 @@ export class BandAxisMixin { const data = this.collectData(i, true); const domain = this.computeBandDomain(data); this._rawDomainIndex[i] = {}; + this._rawDomain[i] = domain; domain.forEach((d, _i) => (this._rawDomainIndex[i][d] = _i)); } } + this.event.emit(ChartEvent.scaleRawDomainUpdate, { model: this as unknown as IModel }); } protected _clearRawDomain() { this._rawDomainIndex = []; + this._rawDomain = []; } } diff --git a/packages/vchart/src/component/axis/mixin/linear-axis-mixin.ts b/packages/vchart/src/component/axis/mixin/linear-axis-mixin.ts index 777c37c019..a73a417db3 100644 --- a/packages/vchart/src/component/axis/mixin/linear-axis-mixin.ts +++ b/packages/vchart/src/component/axis/mixin/linear-axis-mixin.ts @@ -10,6 +10,7 @@ import type { IOrientType } from '../../../typings/space'; import type { IComponentOption } from '../../interface/common'; import type { StringOrNumber } from '../../../typings'; import { breakData } from './util/break-data'; +import type { IModel } from '../../../model/interface'; export const e10 = Math.sqrt(50); export const e5 = Math.sqrt(10); @@ -37,7 +38,7 @@ export interface LinearAxisMixin { _tick: ITick | undefined; isSeriesDataEnable: any; computeDomain: any; - collectData: (depth?: number) => { min: number; max: number; values: any[] }[]; + collectData: (depth?: number, rawData?: boolean) => { min: number; max: number; values: any[] }[]; /** * 这个变量在其他break相关组件和扩展中都有使用 */ @@ -55,6 +56,10 @@ export interface LinearAxisMixin { export class LinearAxisMixin { protected _extend: { [key: string]: number } = {}; + protected _rawDomain: StringOrNumber[] = []; + getRawDomain() { + return this._rawDomain; + } niceLabelFormatter: (value: StringOrNumber) => StringOrNumber = null; @@ -367,6 +372,9 @@ export class LinearAxisMixin { if (!this.isSeriesDataEnable()) { return; } + if (!this._rawDomain?.length && this._scale) { + this._updateRawDomain(); + } const data = this.collectData(); const domain: number[] = this.computeLinearDomain(data) as number[]; this.updateScaleDomainByModel(domain); @@ -415,4 +423,15 @@ export class LinearAxisMixin { return value; }; } + + protected _updateRawDomain() { + const data = this.collectData(0, true); + const domain: number[] = this.computeLinearDomain(data) as number[]; + this._rawDomain = domain; + this.event.emit(ChartEvent.scaleRawDomainUpdate, { model: this as unknown as IModel }); + } + + protected _clearRawDomain() { + this._rawDomain = []; + } } 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 index 36d67de864..4fa24dbd0e 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -50,6 +50,7 @@ import type { IGraphic, IGroup } from '@visactor/vrender-core'; import { AttributeLevel } from '../../constant/attribute'; import type { IGroupMark } from '../../mark/interface/mark'; import { DataFilterEvent } from './data-filter-event'; +import { ChartEvent } from '../../constant/event'; export abstract class DataFilterBaseComponent extends BaseComponent> @@ -167,6 +168,11 @@ export abstract class DataFilterBaseComponent { + // eslint-disable-next-line no-console + console.log('scaleRawDomainUpdate', (model as unknown as { getRawDomain: () => any }).getRawDomain()); + }); } protected _handleChange(start: number, end: number, updateComponent?: boolean) { const zoomLock = this._spec?.zoomLock ?? false; @@ -506,14 +512,14 @@ export abstract class DataFilterBaseComponent; this._startValue = statePointToData(start, this._stateScale, isReverse(axis, this._isHorizontal)); diff --git a/packages/vchart/src/constant/event.ts b/packages/vchart/src/constant/event.ts index 2b670956e2..3ff0436e97 100644 --- a/packages/vchart/src/constant/event.ts +++ b/packages/vchart/src/constant/event.ts @@ -145,6 +145,7 @@ export enum ChartEvent { /** series end */ // scale scaleDomainUpdate = 'scaleDomainUpdate', + scaleRawDomainUpdate = 'scaleRawDomainUpdate', scaleUpdate = 'scaleUpdate', // datazoom dataZoomChange = 'dataZoomChange', diff --git a/packages/vchart/src/mark/base/base-mark.ts b/packages/vchart/src/mark/base/base-mark.ts index 726957c844..339deb35bf 100644 --- a/packages/vchart/src/mark/base/base-mark.ts +++ b/packages/vchart/src/mark/base/base-mark.ts @@ -1571,7 +1571,7 @@ export class BaseMark extends GrammarItem implements IMar // g = this._createGraphic(finalAttrs) as IMarkGraphic; // 如果有动画，设置一下最终attribute if (hasAnimation) { - g.setFinalAttributes(finalAttrs); + g.setFinalAttribute?.(finalAttrs); } g.context = mockGraphic.context; g.context.diffAttrs = finalAttrs; From f20a7ae6dbb8fcc5bf4f0eca5383b4f8497cdfdc Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Thu, 6 Nov 2025 15:51:32 +0800 Subject: [PATCH 13/45] feat: add animation false in unit test --- .../__tests__/unit/chart/treemap.test.ts | 6 +- .../__tests__/unit/chart/word-cloud.test.ts | 6 +- .../cartesian/axis/axis-sync-break.test.ts | 6 +- .../cartesian/axis/inner-offset.test.ts | 3 +- .../__tests__/unit/core/update-spec.test.ts | 57 ++++++++++++------- .../__tests__/unit/core/vchart-event.test.ts | 3 +- .../vchart/__tests__/unit/core/vchart.test.ts | 12 ++-- .../__tests__/unit/function/formatter.test.ts | 3 +- .../unit/function/register-function.test.ts | 6 +- .../vchart/__tests__/unit/theme/line.test.ts | 9 ++- 10 files changed, 74 insertions(+), 37 deletions(-) diff --git a/packages/vchart/__tests__/unit/chart/treemap.test.ts b/packages/vchart/__tests__/unit/chart/treemap.test.ts index 5ea06804ba..f28c8b3a62 100644 --- a/packages/vchart/__tests__/unit/chart/treemap.test.ts +++ b/packages/vchart/__tests__/unit/chart/treemap.test.ts @@ -96,7 +96,8 @@ describe('treemap chart test', () => { test('treemap compiler', async () => { const cs = new VChart(spec, { mode: 'desktop-browser', - renderCanvas: canvasDom + renderCanvas: canvasDom, + animation: false }); await cs.renderAsync(); const series: TreemapSeries = cs.getChart().getAllSeries()[0] as TreemapSeries; @@ -128,7 +129,8 @@ describe('treemap chart test', () => { }, { mode: 'desktop-browser', - renderCanvas: canvasDom + renderCanvas: canvasDom, + animation: false } ); await vchart.renderAsync(); diff --git a/packages/vchart/__tests__/unit/chart/word-cloud.test.ts b/packages/vchart/__tests__/unit/chart/word-cloud.test.ts index ab1916f1af..4c418ea465 100644 --- a/packages/vchart/__tests__/unit/chart/word-cloud.test.ts +++ b/packages/vchart/__tests__/unit/chart/word-cloud.test.ts @@ -108,7 +108,8 @@ describe('wordCloud chart test', () => { test('wordCloud compiler', async () => { const cs = new VChart(spec, { mode: 'desktop-browser', - renderCanvas: canvasDom + renderCanvas: canvasDom, + animation: false }); await cs.renderAsync(); const series: WordCloudSeries = cs.getChart().getAllSeries()[0] as WordCloudSeries; @@ -178,7 +179,8 @@ describe('wordCloud chart test', () => { }, { mode: 'desktop-browser', - renderCanvas: canvasDom + renderCanvas: canvasDom, + animation: false } ); await cs.renderAsync(); diff --git a/packages/vchart/__tests__/unit/component/cartesian/axis/axis-sync-break.test.ts b/packages/vchart/__tests__/unit/component/cartesian/axis/axis-sync-break.test.ts index f0935e5042..8193d67c99 100644 --- a/packages/vchart/__tests__/unit/component/cartesian/axis/axis-sync-break.test.ts +++ b/packages/vchart/__tests__/unit/component/cartesian/axis/axis-sync-break.test.ts @@ -1496,7 +1496,8 @@ describe('VChart', () => { }; vchart = new VChart(spec, { renderCanvas: canvasDom, - autoFit: true + autoFit: true, + animation: false }); vchart.renderSync(); @@ -2993,7 +2994,8 @@ describe('VChart', () => { }; vchart = new VChart(spec, { renderCanvas: canvasDom, - autoFit: true + autoFit: true, + animation: false }); vchart.renderSync(); diff --git a/packages/vchart/__tests__/unit/component/cartesian/axis/inner-offset.test.ts b/packages/vchart/__tests__/unit/component/cartesian/axis/inner-offset.test.ts index 6eaf779be7..7c5b89bd71 100644 --- a/packages/vchart/__tests__/unit/component/cartesian/axis/inner-offset.test.ts +++ b/packages/vchart/__tests__/unit/component/cartesian/axis/inner-offset.test.ts @@ -141,7 +141,8 @@ describe('VChart', () => { }; vchart = new VChart(spec, { renderCanvas: canvasDom, - autoFit: true + autoFit: true, + animation: false }); await vchart.renderAsync(); diff --git a/packages/vchart/__tests__/unit/core/update-spec.test.ts b/packages/vchart/__tests__/unit/core/update-spec.test.ts index 3d84b9853d..4886fba5ab 100644 --- a/packages/vchart/__tests__/unit/core/update-spec.test.ts +++ b/packages/vchart/__tests__/unit/core/update-spec.test.ts @@ -66,7 +66,8 @@ describe('vchart updateSpec test', () => { markLine: [] } as any; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); }); @@ -991,7 +992,8 @@ describe('vchart updateSpec of same spec', () => { hash: '3136c561bad4328a39917f23d8606675' } as unknown as IBarChartSpec; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec(spec, false); @@ -1045,7 +1047,8 @@ describe('vchart updateSpec of same spec', () => { ] }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec(spec, false); @@ -1094,7 +1097,8 @@ describe('vchart updateSpec of same spec', () => { ] }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec(spec, false); @@ -1186,7 +1190,8 @@ describe('vchart updateSpec of same spec', () => { }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec(spec, false); @@ -1261,7 +1266,8 @@ describe('vchart updateSpec of different about label', () => { ] }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec( @@ -1326,7 +1332,8 @@ describe('vchart updateSpec of different about label', () => { ] }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec( @@ -1395,7 +1402,8 @@ describe('vchart updateSpec of different about label', () => { ] }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec( @@ -1473,7 +1481,8 @@ describe('vchart updateSpec of different about label', () => { ] }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec( @@ -1559,7 +1568,8 @@ describe('vchart updateSpec of different about label', () => { } }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec( @@ -1634,7 +1644,8 @@ describe('vchart updateSpec of different about label', () => { } }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec( @@ -1739,7 +1750,8 @@ describe('vchart updateSpec should not throw error', () => { ] }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec( @@ -1856,7 +1868,8 @@ describe('vchart updateSpec of totalLabel', () => { } }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec( @@ -1978,7 +1991,8 @@ describe('vchart updateSpec of width, height', () => { } }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec( @@ -2085,7 +2099,8 @@ describe('vchart updateSpec of different axes', () => { }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec( @@ -2165,7 +2180,8 @@ describe('vchart updateSpec of different title', () => { seriesField: 'from' }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec( @@ -2221,7 +2237,8 @@ describe('vchart updateSpec of different title', () => { seriesField: 'from' }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec( @@ -2315,7 +2332,8 @@ describe('vchart updateSpec of different indicator', () => { } }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec( @@ -2389,7 +2407,8 @@ describe('vchart updateSpec of different indicator', () => { } }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); const updateRes = (vchart as any)._updateSpec( diff --git a/packages/vchart/__tests__/unit/core/vchart-event.test.ts b/packages/vchart/__tests__/unit/core/vchart-event.test.ts index ddc16aca2e..993e3c13d8 100644 --- a/packages/vchart/__tests__/unit/core/vchart-event.test.ts +++ b/packages/vchart/__tests__/unit/core/vchart-event.test.ts @@ -96,7 +96,8 @@ describe('vchart event test', () => { } }; vchart = new VChart(spec, { - dom + dom, + animation: false }); vchart.renderSync(); }); diff --git a/packages/vchart/__tests__/unit/core/vchart.test.ts b/packages/vchart/__tests__/unit/core/vchart.test.ts index d51e0fba7f..7f0f2b05c7 100644 --- a/packages/vchart/__tests__/unit/core/vchart.test.ts +++ b/packages/vchart/__tests__/unit/core/vchart.test.ts @@ -163,7 +163,8 @@ describe('VChart', () => { vchart = new VChart(spec, { renderCanvas: canvasDom, background: 'yellow', - autoFit: true + autoFit: true, + animation: false }); expect((vchart as any)._currentSize).toEqual({ @@ -221,7 +222,8 @@ describe('VChart', () => { ]; vchart = new VChart(spec, { renderCanvas: canvasDom, - background: 'yellow' + background: 'yellow', + animation: false }); vchart.updateData('areaData', data); vchart.renderSync(); @@ -271,7 +273,8 @@ describe('VChart', () => { ]; vchart = new VChart(spec, { renderCanvas: canvasDom, - background: 'yellow' + background: 'yellow', + animation: false }); vchart.renderSync(); @@ -686,7 +689,8 @@ describe('VChart', () => { ] }; vchart = new VChart(spec as any, { - dom + dom, + animation: false }); vchart.renderSync(); }); diff --git a/packages/vchart/__tests__/unit/function/formatter.test.ts b/packages/vchart/__tests__/unit/function/formatter.test.ts index 392c0d27da..cffea02d17 100644 --- a/packages/vchart/__tests__/unit/function/formatter.test.ts +++ b/packages/vchart/__tests__/unit/function/formatter.test.ts @@ -48,7 +48,8 @@ describe('formatter calc function test', () => { const chart = new VChart(spec as unknown as IBarChartSpec, { renderCanvas: canvasDom, - onError: () => {} + onError: () => {}, + animation: false }); chart.renderSync(); diff --git a/packages/vchart/__tests__/unit/function/register-function.test.ts b/packages/vchart/__tests__/unit/function/register-function.test.ts index 6071239723..b22cec7078 100644 --- a/packages/vchart/__tests__/unit/function/register-function.test.ts +++ b/packages/vchart/__tests__/unit/function/register-function.test.ts @@ -143,7 +143,8 @@ describe('register function test', () => { chart = new VChart(spec as unknown as IBarChartSpec, { renderCanvas: canvasDom, - onError: () => {} + onError: () => {}, + animation: false }); chart.renderSync(); @@ -167,7 +168,8 @@ describe('register function test', () => { test('instance function register', () => { chart2 = new VChart(spec2 as unknown as IBarChartSpec, { renderCanvas: canvasDom, - onError: () => {} + onError: () => {}, + animation: false }); // 实例注册函数 diff --git a/packages/vchart/__tests__/unit/theme/line.test.ts b/packages/vchart/__tests__/unit/theme/line.test.ts index 1b18d1b3d4..6bb3bb0a88 100644 --- a/packages/vchart/__tests__/unit/theme/line.test.ts +++ b/packages/vchart/__tests__/unit/theme/line.test.ts @@ -54,7 +54,8 @@ describe('theme switch test', () => { { renderCanvas: canvasDom, background: 'yellow', - autoFit: true + autoFit: true, + animation: false } ); @@ -130,7 +131,8 @@ describe('theme switch test', () => { { renderCanvas: canvasDom, background: 'yellow', - autoFit: true + autoFit: true, + animation: false } ); @@ -172,7 +174,8 @@ describe('theme switch test', () => { { renderCanvas: canvasDom, background: 'yellow', - autoFit: true + autoFit: true, + animation: false } ); From 6c5a5a47b0f3e063c493b5cdfd679edd9a363dfc Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Mon, 10 Nov 2025 14:44:27 +0800 Subject: [PATCH 14/45] fix: fix the animation bug of datazoom --- packages/vchart/src/mark/base/base-mark.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vchart/src/mark/base/base-mark.ts b/packages/vchart/src/mark/base/base-mark.ts index 339deb35bf..38efb1a8d8 100644 --- a/packages/vchart/src/mark/base/base-mark.ts +++ b/packages/vchart/src/mark/base/base-mark.ts @@ -1571,7 +1571,7 @@ export class BaseMark extends GrammarItem implements IMar // g = this._createGraphic(finalAttrs) as IMarkGraphic; // 如果有动画，设置一下最终attribute if (hasAnimation) { - g.setFinalAttribute?.(finalAttrs); + g.setFinalAttributes?.(finalAttrs); } g.context = mockGraphic.context; g.context.diffAttrs = finalAttrs; From 1f608bedf661a99a6c1af82fee6e64df95a9b19f Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Mon, 10 Nov 2025 17:49:47 +0800 Subject: [PATCH 15/45] fix: fix issue of datazoom --- .../data-zoom/data-filter-base-component.ts | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) 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 index 4fa24dbd0e..856ef264dc 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -169,7 +169,7 @@ export abstract class DataFilterBaseComponent { + this._relatedAxisComponent?.event.on(ChartEvent.scaleRawDomainUpdate, ({ model }) => { // eslint-disable-next-line no-console console.log('scaleRawDomainUpdate', (model as unknown as { getRawDomain: () => any }).getRawDomain()); }); @@ -327,6 +327,8 @@ export abstract class DataFilterBaseComponent; - this._startValue = statePointToData(start, this._stateScale, isReverse(axis, this._isHorizontal)); - this._endValue = statePointToData(end, this._stateScale, isReverse(axis, this._isHorizontal)); this._start = start; this._end = end; + } + protected _setStateFromAxis() { + const axis = this._relatedAxisComponent as CartesianAxis; + if (!axis) { + return; + } + + this._startValue = statePointToData(this._start, this._stateScale, isReverse(axis, this._isHorizontal)); + this._endValue = statePointToData(this._end, this._stateScale, isReverse(axis, this._isHorizontal)); this._minSpan = this._spec.minSpan ?? 0; this._maxSpan = this._spec.maxSpan ?? 1; if (isContinuous(this._stateScale.type) && this._stateScale.domain()[0] !== last(this._stateScale.domain())) { From 7e450c2795eb56d29941a3b062520f5991a6c8de Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Mon, 10 Nov 2025 20:23:26 +0800 Subject: [PATCH 16/45] fix: fix issue of datazoom --- packages/vchart/src/component/axis/interface/common.ts | 2 ++ .../src/component/data-zoom/data-filter-base-component.ts | 3 +++ 2 files changed, 5 insertions(+) diff --git a/packages/vchart/src/component/axis/interface/common.ts b/packages/vchart/src/component/axis/interface/common.ts index a8bb214039..91cdf13fae 100644 --- a/packages/vchart/src/component/axis/interface/common.ts +++ b/packages/vchart/src/component/axis/interface/common.ts @@ -20,6 +20,8 @@ export interface IAxis extends IComponent { visible: boolean; // 标记轴的方向，左到右，右到左，上到下，下到上 directionStr?: 'l2r' | 'r2l' | 't2b' | 'b2t'; + // 更新轴的 scaleRange + updateScaleRange?: () => void; } export interface IAxisItem { 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 index 856ef264dc..94b62e6d75 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -27,6 +27,7 @@ import { registerDataSetInstanceParser, registerDataSetInstanceTransform } from import { BandScale, isContinuous, isDiscrete, type IBandLikeScale, type IBaseScale } from '@visactor/vscale'; import { Direction } from '../../typings/space'; import type { CartesianAxis, ICartesianBandAxisSpec } from '../axis/cartesian'; +import type { IAxis } from '../axis'; import { getDirectionByOrient, getOrient } from '../axis/cartesian/util/common'; import { mixin, @@ -395,6 +396,8 @@ export abstract class DataFilterBaseComponent Date: Thu, 13 Nov 2025 20:32:02 +0800 Subject: [PATCH 17/45] fix: fix issue of datazoom --- .../src/component/data-zoom/data-zoom/data-zoom.ts | 9 ++++++--- packages/vchart/src/component/data-zoom/util.ts | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) 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 index 2a1803fa41..80f73926fe 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -75,10 +75,13 @@ export class DataZoom extends DataFilte } else { const axis = this._relatedAxisComponent as CartesianAxis; - this._start = start; - this._end = end; const startValue = statePointToData(start, this._stateScale, isReverse(axis, this._isHorizontal)); const endValue = statePointToData(end, this._stateScale, isReverse(axis, this._isHorizontal)); + if (!isValid(startValue) || !isValid(endValue)) { + return; + } + this._start = start; + this._end = end; const hasChange = isFunction(this._spec.updateDataAfterChange) ? this._spec.updateDataAfterChange(start, end, startValue, endValue) : this._handleStateChange(startValue, endValue, tag); @@ -376,7 +379,7 @@ export class DataZoom extends DataFilte minSpan: this._minSpan, maxSpan: this._maxSpan, delayType: spec.delayType, - delayTime: isValid(spec.delayType) ? (spec.delayTime ?? 30) : 0, + delayTime: isValid(spec.delayType) ? spec.delayTime ?? 30 : 0, realTime: spec.realTime ?? true, previewData: isNeedPreview && this._data.getLatestData(), previewPointsX: isNeedPreview && this._dataToPositionX, diff --git a/packages/vchart/src/component/data-zoom/util.ts b/packages/vchart/src/component/data-zoom/util.ts index 2dc91bd095..bc575707be 100644 --- a/packages/vchart/src/component/data-zoom/util.ts +++ b/packages/vchart/src/component/data-zoom/util.ts @@ -192,7 +192,7 @@ export const dataToStatePoint = (data: number | string, scale: IBaseScale, isHor range = range.slice().reverse(); } - return (pos - range[0]) / (last(range) - range[0]); + return Math.max(0, Math.min(1, (pos - range[0]) / (last(range) - range[0]))); }; export const isReverse = (axisComponent: CartesianAxis, isHorizontal: boolean) => { From e4672298d813eb04be755535eced969fd7965d5c Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Fri, 14 Nov 2025 11:54:40 +0800 Subject: [PATCH 18/45] fix: fix issue of datazoom about barMinHeight --- packages/vchart/src/series/bar/bar.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/vchart/src/series/bar/bar.ts b/packages/vchart/src/series/bar/bar.ts index 4f97250e82..c29a3f0846 100644 --- a/packages/vchart/src/series/bar/bar.ts +++ b/packages/vchart/src/series/bar/bar.ts @@ -14,7 +14,7 @@ import { } from '../../constant/data'; import { AttributeLevel } from '../../constant/attribute'; import type { Datum, DirectionType } from '../../typings'; -import { valueInScaleRange } from '../../util/scale'; +import { isValueInScaleDomain, valueInScaleRange } from '../../util/scale'; import { getRegionStackGroup } from '../../util/data'; import { getActualNumValue } from '../../util/space'; import { registerBarAnimation } from './animation'; @@ -332,9 +332,8 @@ export class BarSeries extends Cartes const barMinHeight = this._spec.barMinHeight; const y1 = valueInScaleRange(this[startMethod](datum), seriesScale, useWholeRange); const y = valueInScaleRange(this[endMethod](datum), seriesScale, useWholeRange); - let height = Math.abs(y1 - y); - if (height <= 0) { + if (height <= 0 && !isValueInScaleDomain(datum[this.getStackValueField()], seriesScale)) { height = 0; } else if (height < barMinHeight) { height = barMinHeight; From 1af75714f6a8104edcfb2a027f2095a58af50c7d Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Fri, 14 Nov 2025 14:07:06 +0800 Subject: [PATCH 19/45] fix: fix issue of datazoom about barMinHeight --- packages/vchart/src/component/axis/base-axis.ts | 2 +- packages/vchart/src/component/axis/cartesian/axis.ts | 2 +- packages/vchart/src/component/axis/cartesian/band-axis.ts | 2 +- packages/vchart/src/component/axis/polar/axis.ts | 2 +- packages/vchart/src/component/axis/polar/band-axis.ts | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/vchart/src/component/axis/base-axis.ts b/packages/vchart/src/component/axis/base-axis.ts index 7f08677ef2..a36a64e595 100644 --- a/packages/vchart/src/component/axis/base-axis.ts +++ b/packages/vchart/src/component/axis/base-axis.ts @@ -115,7 +115,7 @@ export abstract class AxisComponent ex return this.computeBandDomain(data); } - protected updateScaleRange() { + updateScaleRange() { const isChanged = super.updateScaleRange(); this.updateGroupScaleRange(); From 7c258e2ffc25be4c829d73285bc6a0501e340802 Mon Sep 17 00:00:00 2001 From: skie1997 Date: Fri, 14 Nov 2025 15:30:26 +0800 Subject: [PATCH 20/45] fix: handler auto size bug --- .../component/data-zoom/data-zoom/data-zoom.ts | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) 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 index 80f73926fe..1e1c82e0ff 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -183,20 +183,24 @@ export class DataZoom extends DataFilte setAttrFromSpec() { super.setAttrFromSpec(); + // 用户配置, 如:80 -> 给各个部分赋予默认值 back 80, handler 80 -> 根据实际值computeSize -> 作为组件属性输入 -> 组件根据实际高度给背景分配默认高度 + // 用户不配置 -> 各部分给默认定值 -> ...(同上) + const componentSize = this._isHorizontal ? Number(this._spec.height) : Number(this._spec.width); + // size相关 this._backgroundSize = this._spec.background?.size ?? 30; this._middleHandlerSize = this._computeMiddleHandlerSize(); // startHandler和endHandler size如果没有配置，则默认跟随background宽 or 高 if (isNil(this._spec?.startHandler?.style?.size)) { - this._spec.startHandler.style.size = this._backgroundSize; + this._spec.startHandler.style.size = isNaN(componentSize) ? 30 : componentSize - this._middleHandlerSize; } if (isNil(this._spec?.endHandler?.style?.size)) { - this._spec.endHandler.style.size = this._backgroundSize; + this._spec.endHandler.style.size = isNaN(componentSize) ? 30 : componentSize - this._middleHandlerSize; } - const startHandlerVisble = this._spec.startHandler.style.visible ?? true; - const endHandlerVisble = this._spec.endHandler.style.visible ?? true; - this._startHandlerSize = startHandlerVisble ? this._spec.startHandler.style.size : 0; - this._endHandlerSize = endHandlerVisble ? this._spec.endHandler.style.size : 0; + const startHandlerVisible = this._spec.startHandler.style.visible ?? true; + const endHandlerVisible = this._spec.endHandler.style.visible ?? true; + this._startHandlerSize = startHandlerVisible ? this._spec.startHandler.style.size : 0; + this._endHandlerSize = endHandlerVisible ? this._spec.endHandler.style.size : 0; this._width = this._computeWidth(); this._height = this._computeHeight(); } @@ -379,7 +383,7 @@ export class DataZoom extends DataFilte minSpan: this._minSpan, maxSpan: this._maxSpan, delayType: spec.delayType, - delayTime: isValid(spec.delayType) ? spec.delayTime ?? 30 : 0, + delayTime: isValid(spec.delayType) ? (spec.delayTime ?? 30) : 0, realTime: spec.realTime ?? true, previewData: isNeedPreview && this._data.getLatestData(), previewPointsX: isNeedPreview && this._dataToPositionX, From 2ac4bc131b3ff96b80a8b8e64896b9e8938f1cde Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Fri, 14 Nov 2025 15:56:31 +0800 Subject: [PATCH 21/45] fix: fix issue of datazoom --- .../data-zoom/data-filter-base-component.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) 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 index 94b62e6d75..0b8235d093 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -506,7 +506,7 @@ export abstract class DataFilterBaseComponent; - if (!axis) { - return; - } - this._startValue = statePointToData(this._start, this._stateScale, isReverse(axis, this._isHorizontal)); this._endValue = statePointToData(this._end, this._stateScale, isReverse(axis, this._isHorizontal)); this._minSpan = this._spec.minSpan ?? 0; @@ -739,7 +740,9 @@ export abstract class DataFilterBaseComponent Date: Fri, 14 Nov 2025 16:21:39 +0800 Subject: [PATCH 22/45] fix: fix issue of datazoom --- .../src/component/data-zoom/data-filter-base-component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index 0b8235d093..2e8f3881eb 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -719,8 +719,8 @@ export abstract class DataFilterBaseComponent Date: Fri, 14 Nov 2025 16:28:25 +0800 Subject: [PATCH 23/45] fix: handler auto size bug --- .../vchart/src/component/data-zoom/data-zoom/data-zoom.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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 index 1e1c82e0ff..9328b33837 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -192,10 +192,14 @@ export class DataZoom extends DataFilte this._middleHandlerSize = this._computeMiddleHandlerSize(); // startHandler和endHandler size如果没有配置，则默认跟随background宽 or 高 if (isNil(this._spec?.startHandler?.style?.size)) { - this._spec.startHandler.style.size = isNaN(componentSize) ? 30 : componentSize - this._middleHandlerSize; + this._spec.startHandler.style.size = isNaN(componentSize) + ? this._backgroundSize + : componentSize - this._middleHandlerSize; } if (isNil(this._spec?.endHandler?.style?.size)) { - this._spec.endHandler.style.size = isNaN(componentSize) ? 30 : componentSize - this._middleHandlerSize; + this._spec.endHandler.style.size = isNaN(componentSize) + ? this._backgroundSize + : componentSize - this._middleHandlerSize; } const startHandlerVisible = this._spec.startHandler.style.visible ?? true; const endHandlerVisible = this._spec.endHandler.style.visible ?? true; From 1b43b9505a132453bdd56678c48daaef1e1dd881 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Fri, 14 Nov 2025 17:09:47 +0800 Subject: [PATCH 24/45] fix: fix issue of datazoom --- .../vchart/src/component/data-zoom/data-zoom/data-zoom.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index 9328b33837..4c9a387025 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -387,7 +387,7 @@ export class DataZoom extends DataFilte minSpan: this._minSpan, maxSpan: this._maxSpan, delayType: spec.delayType, - delayTime: isValid(spec.delayType) ? (spec.delayTime ?? 30) : 0, + delayTime: isValid(spec.delayType) ? spec.delayTime ?? 30 : 0, realTime: spec.realTime ?? true, previewData: isNeedPreview && this._data.getLatestData(), previewPointsX: isNeedPreview && this._dataToPositionX, @@ -408,7 +408,7 @@ export class DataZoom extends DataFilte const axis = this._relatedAxisComponent as CartesianAxis; if (this._component) { - // this._component.setAttributes(attrs); + this._component.setAttributes(attrs); if (changeData) { this._component.setPreviewData(this._data.getDataView().latestData); if (isNeedPreview) { From 97f7f459a2f9adc4101a99fe4f03e1ce63cc58c7 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Fri, 14 Nov 2025 18:06:23 +0800 Subject: [PATCH 25/45] fix: fix issue of datazoom --- .../component/data-zoom/data-zoom/data-zoom.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) 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 index 4c9a387025..114277d54d 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -397,6 +397,19 @@ export class DataZoom extends DataFilte } as DataZoomAttributes; } + private _getLayoutAttrs() { + return { + position: { + x: this.getLayoutStartPoint().x, + y: this.getLayoutStartPoint().y + }, + size: { + width: this._computeWidth(), + height: this._computeHeight() + } + }; + } + protected _createOrUpdateComponent(changeData?: boolean) { if (this._visible) { const xScale = this._isHorizontal ? this._stateScale : this._valueScale; @@ -408,7 +421,7 @@ export class DataZoom extends DataFilte const axis = this._relatedAxisComponent as CartesianAxis; if (this._component) { - this._component.setAttributes(attrs); + this._component.setAttributes(this._getLayoutAttrs()); if (changeData) { this._component.setPreviewData(this._data.getDataView().latestData); if (isNeedPreview) { From 2ab20bc1e664c7498606e7d7cb454a457ba7c9b9 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Sun, 16 Nov 2025 12:08:51 +0800 Subject: [PATCH 26/45] fix: fix issue of datazoom --- .../src/component/data-zoom/data-zoom/data-zoom.ts | 11 ++++++++++- packages/vchart/src/series/util/stack.ts | 4 ++-- 2 files changed, 12 insertions(+), 3 deletions(-) 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 index 114277d54d..b0fa31f4a5 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -421,7 +421,16 @@ export class DataZoom extends DataFilte const axis = this._relatedAxisComponent as CartesianAxis; if (this._component) { - this._component.setAttributes(this._getLayoutAttrs()); + const newLayoutAttrs = this._getLayoutAttrs(); + const currentLayoutAttrs = this._component.attribute; + if ( + newLayoutAttrs.position.x !== currentLayoutAttrs.position.x || + newLayoutAttrs.position.y !== currentLayoutAttrs.position.y || + newLayoutAttrs.size.width !== currentLayoutAttrs.size.width || + newLayoutAttrs.size.height !== currentLayoutAttrs.size.height + ) { + this._component.setAttributes(newLayoutAttrs); + } if (changeData) { this._component.setPreviewData(this._data.getDataView().latestData); if (isNeedPreview) { diff --git a/packages/vchart/src/series/util/stack.ts b/packages/vchart/src/series/util/stack.ts index 461e3697de..653ee73084 100644 --- a/packages/vchart/src/series/util/stack.ts +++ b/packages/vchart/src/series/util/stack.ts @@ -1,6 +1,6 @@ import type { IBaseScale } from '@visactor/vscale'; import type { IStackCacheNode } from '../../util/data'; -import { valueInScaleRange } from '../../util/scale'; +import { isValueInScaleDomain, valueInScaleRange } from '../../util/scale'; import type { ISeries } from '../interface/series'; export function stackWithMinHeight( @@ -83,7 +83,7 @@ function computeOneDatumY( } let height = Math.abs(y1 - y); - if (height <= 0) { + if (height <= 0 && !isValueInScaleDomain(obj[s.getStackValueField()], seriesScale)) { height = 0; } else if (height < barMinHeight) { height = barMinHeight; From 379a61d2849febf2c2288afe32992d1c43423866 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Sun, 16 Nov 2025 17:11:15 +0800 Subject: [PATCH 27/45] fix: fix issue of datazoom --- .../data-zoom/data-zoom/data-zoom.ts | 19 +++++++------------ .../vchart/src/component/data-zoom/util.ts | 5 ++++- 2 files changed, 11 insertions(+), 13 deletions(-) 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 index b0fa31f4a5..c8d4251ce4 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -162,10 +162,14 @@ export class DataZoom extends DataFilte const startHandlerScaleYSize = this._startHandlerSize * (this._spec.startHandler.style.scaleY ?? 1); const endHandlerScaleXSize = this._endHandlerSize * (this._spec.endHandler.style.scaleX ?? 1); const endHandlerScaleYSize = this._endHandlerSize * (this._spec.endHandler.style.scaleY ?? 1); - const extendWidth = this._isHorizontal + const extendWidth = !this._visible + ? 0 + : this._isHorizontal ? (startHandlerScaleXSize - this._startHandlerSize) / 2 + (endHandlerScaleXSize - this._endHandlerSize) / 2 : (Math.max(startHandlerScaleXSize, endHandlerScaleXSize) - this._width) / 2; - const extendHeight = this._isHorizontal + const extendHeight = !this._visible + ? 0 + : this._isHorizontal ? (Math.max(startHandlerScaleYSize, endHandlerScaleYSize) - this._height) / 2 : (startHandlerScaleYSize - this._startHandlerSize) / 2 + (endHandlerScaleYSize - this._endHandlerSize) / 2; if (this._isHorizontal) { @@ -421,16 +425,7 @@ export class DataZoom extends DataFilte const axis = this._relatedAxisComponent as CartesianAxis; if (this._component) { - const newLayoutAttrs = this._getLayoutAttrs(); - const currentLayoutAttrs = this._component.attribute; - if ( - newLayoutAttrs.position.x !== currentLayoutAttrs.position.x || - newLayoutAttrs.position.y !== currentLayoutAttrs.position.y || - newLayoutAttrs.size.width !== currentLayoutAttrs.size.width || - newLayoutAttrs.size.height !== currentLayoutAttrs.size.height - ) { - this._component.setAttributes(newLayoutAttrs); - } + this._component.setAttributes(attrs); if (changeData) { this._component.setPreviewData(this._data.getDataView().latestData); if (isNeedPreview) { diff --git a/packages/vchart/src/component/data-zoom/util.ts b/packages/vchart/src/component/data-zoom/util.ts index bc575707be..63c7ab7545 100644 --- a/packages/vchart/src/component/data-zoom/util.ts +++ b/packages/vchart/src/component/data-zoom/util.ts @@ -108,6 +108,7 @@ export const dataFilterComputeDomain = (data: Array, op: IDataFilterCompute const { stateFields, valueFields, dataCollection, isCategoryState } = op.input; const { stateField, valueField } = op.output; const resultObj: any = {}; + const resultKeys: any[] = []; const resultData: any[] = []; const stateValues: any[] = []; let hasLockDomain = false; @@ -124,6 +125,7 @@ export const dataFilterComputeDomain = (data: Array, op: IDataFilterCompute if (isNil(resultObj[d])) { stateValues.push(d); resultObj[d] = 0; + resultKeys.push(d); } }); } @@ -134,6 +136,7 @@ export const dataFilterComputeDomain = (data: Array, op: IDataFilterCompute if (isNil(resultObj[d[state]])) { stateValues.push(d[state]); resultObj[d[state]] = 0; + resultKeys.push(d[state]); } if (!isNil(valueFields[i])) { // 传进来的d[yFields[i]]可能是stringnumber @@ -149,7 +152,7 @@ export const dataFilterComputeDomain = (data: Array, op: IDataFilterCompute ? stateValues : isCategoryState === false ? stateValues.sort((a, b) => a - b) - : Object.keys(resultObj); + : resultKeys; sortedStateValues.forEach(state => { const res = { [stateField]: state }; From 994d0aeea498b1d0b8824142726bb75b6b88acd6 Mon Sep 17 00:00:00 2001 From: skie1997 Date: Mon, 17 Nov 2025 14:37:05 +0800 Subject: [PATCH 28/45] fix: fix auto visible bug --- .../data-zoom/data-filter-base-component.ts | 33 +++++++------------ .../data-zoom/data-zoom/data-zoom.ts | 18 +++++++++- .../data-zoom/scroll-bar/scroll-bar.ts | 13 ++++++++ 3 files changed, 42 insertions(+), 22 deletions(-) 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 index 2e8f3881eb..8b370ef2c0 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -386,15 +386,6 @@ export abstract class DataFilterBaseComponent extends DataFilte } onLayoutEnd(): void { - super.onLayoutEnd(); + // 1. 初始化stateScale + if (this._visible) { + if (!this._hasInitStateScale) { + this._initStateScale(); + this._setStateFromAxis(); + } + } + + // 2. 范围矫正 const axis = this._relatedAxisComponent as CartesianAxis; // 初始时reverse判断并不准确，导致start和end颠倒, 保险起见在layoutend之后触发该逻辑 // FIXME: 牺牲了一定性能，有待优化 @@ -141,6 +149,14 @@ export class DataZoom extends DataFilte this._isReverseCache = isReverse(axis, this._isHorizontal); this.effect.onZoomChange(); } + + // 3. 可见性处理 + // 布局结束后, start和end会发生变化, 因此需要再次更新visible + const isShown = !(this._start === 0 && this._end === 1); + this._autoVisible(isShown); + + // 4. 触发上层layoutEnd事件, 更新轴 + super.onLayoutEnd(); } clear(): void { 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 index 21d28774f8..e504cef31e 100644 --- a/packages/vchart/src/component/data-zoom/scroll-bar/scroll-bar.ts +++ b/packages/vchart/src/component/data-zoom/scroll-bar/scroll-bar.ts @@ -90,8 +90,21 @@ export class ScrollBar extends DataFi /*** start: component lifecycle ***/ onLayoutEnd(): void { + // 1. 初始化stateScale + if (this._visible) { + if (!this._hasInitStateScale) { + this._initStateScale(); + this._setStateFromAxis(); + } + } + // 2. 范围矫正 this._updateScaleRange(); this.effect.onZoomChange?.(); + // 3. 可见性处理 + // 布局结束后, start和end会发生变化, 因此需要再次更新visible + const isShown = !(this._start === 0 && this._end === 1); + this._autoVisible(isShown); + // 4. 触发上层layoutEnd事件, 更新轴 super.onLayoutEnd(); } /*** end: component lifecycle ***/ From febf0eb827230549f8622d712a97d262609accd3 Mon Sep 17 00:00:00 2001 From: skie1997 Date: Mon, 17 Nov 2025 17:34:32 +0800 Subject: [PATCH 29/45] fix: max stack bug of change --- .../src/component/data-zoom/data-filter-base-component.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) 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 index 8b370ef2c0..17a208f1f8 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -44,7 +44,7 @@ import type { IDataFilterComponent, IDataFilterComponentSpec, IFilterMode } from import { dataViewParser, DataView } from '@visactor/vdataset'; import { CompilableData } from '../../compile/data/compilable-data'; import { Zoomable } from '../../interaction/zoom/zoomable'; -import type { AbstractComponent } from '@visactor/vrender-components'; +import type { AbstractComponent, DataZoom } from '@visactor/vrender-components'; import { TransformLevel } from '../../data/initialize'; import type { IDataZoomSpec } from './data-zoom/interface'; import type { IGraphic, IGroup } from '@visactor/vrender-core'; @@ -261,8 +261,7 @@ export abstract class DataFilterBaseComponent Date: Mon, 17 Nov 2025 18:03:25 +0800 Subject: [PATCH 30/45] fix: fix issue of datazoom --- .../data-zoom/data-filter-base-component.ts | 12 ++++- .../data-zoom/data-zoom/data-zoom.ts | 44 +++++++++++++++++-- 2 files changed, 50 insertions(+), 6 deletions(-) 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 index 2e8f3881eb..2f270e9306 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -24,6 +24,7 @@ import type { StringOrNumber } from '../../typings'; import { registerDataSetInstanceParser, registerDataSetInstanceTransform } from '../../data/register'; +import type { IContinuousScale } from '@visactor/vscale'; import { BandScale, isContinuous, isDiscrete, type IBandLikeScale, type IBaseScale } from '@visactor/vscale'; import { Direction } from '../../typings/space'; import type { CartesianAxis, ICartesianBandAxisSpec } from '../axis/cartesian'; @@ -751,8 +752,15 @@ export abstract class DataFilterBaseComponent).getScale(); - this._stateScale = scale.clone().range(defaultRange); + const scale = (this._relatedAxisComponent as CartesianAxis).getScale().clone() as + | IContinuousScale + | IBandLikeScale; + // 需要清除rangeFactor 缓存，否则会导致计算错误 + this._stateScale = scale; + (scale as IBandLikeScale).maxBandwidth?.('auto', true); + (scale as IBandLikeScale).minBandwidth?.('auto', true); + (scale as IBandLikeScale).bandwidth?.('auto', true); + scale.rangeFactor(defaultRange as [number, number], true).range(defaultRange, true); } else { this._stateScale = new BandScale(); this._stateScale.domain(this._computeDomainOfStateScale(), true).range(defaultRange); 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 index c8d4251ce4..581f2f3e71 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -26,6 +26,7 @@ import { DataZoomSpecTransformer } from './data-zoom-transformer'; import { getFormatFunction } from '../../util'; import { dataZoom } from '../../../theme/builtin/common/component/data-zoom'; import { isReverse, statePointToData } from '../util'; +import { LayoutModel } from '../../../model/layout-model'; export class DataZoom extends DataFilterBaseComponent { static type = ComponentTypeEnum.dataZoom; @@ -58,6 +59,8 @@ export class DataZoom extends DataFilte protected _cacheRect?: ILayoutRect; + protected _previewStateScale: IBaseScale; + constructor(spec: T, options: IComponentOption) { super(spec, options); @@ -287,8 +290,20 @@ export class DataZoom extends DataFilte return true; } + protected _getXScale() { + const bindScale = (this._relatedAxisComponent as CartesianAxis).getScale(); + if (bindScale.type === this.stateScale.type && this._isHorizontal) { + return this.stateScale; + } + return this._isHorizontal ? this._stateScale : this._valueScale; + } + + protected _getYScale() { + return this._isHorizontal ? this._valueScale : this._stateScale; + } + protected _dataToPositionX = (datum: Datum): number => { - const offsetLeft = this._orient === 'left' ? this._middleHandlerSize : 0; + const offsetLeft = !this._isHorizontal ? this._middleHandlerSize : 0; const offsetHandler = this._isHorizontal ? this._startHandlerSize / 2 : 0; const xScale = this._isHorizontal ? this._stateScale : this._valueScale; const xField = this._isHorizontal ? this._stateField : this._valueField; @@ -296,7 +311,7 @@ export class DataZoom extends DataFilte }; protected _dataToPositionX2 = (datum: Datum): number => { - const offsetLeft = this._orient === 'left' ? this._middleHandlerSize : 0; + const offsetLeft = !this._isHorizontal ? this._middleHandlerSize : 0; const offsetHandler = this._isHorizontal ? this._startHandlerSize / 2 : 0; const xScale = this._isHorizontal ? this._stateScale : this._valueScale; const min = xScale.domain()[0]; @@ -306,7 +321,7 @@ export class DataZoom extends DataFilte protected _dataToPositionY = (datum: Datum): number => { const offsetTop = this._isHorizontal ? this._middleHandlerSize : 0; const offsetHandler = this._isHorizontal ? 0 : this._startHandlerSize / 2; - const yScale = this._isHorizontal ? this._valueScale : this._stateScale; + const yScale = this._isHorizontal ? this._valueScale : this._getPreviewStateScale(); const yField = this._isHorizontal ? this._valueField : this._stateField; return yScale.scale(datum[yField]) + this.getLayoutStartPoint().y + offsetTop + offsetHandler; }; @@ -314,7 +329,7 @@ export class DataZoom extends DataFilte protected _dataToPositionY2 = (datum: Datum): number => { const offsetTop = this._isHorizontal ? this._middleHandlerSize : 0; const offsetHandler = this._isHorizontal ? 0 : this._startHandlerSize / 2; - const yScale = this._isHorizontal ? this._valueScale : this._stateScale; + const yScale = this._isHorizontal ? this._valueScale : this._getPreviewStateScale(); const min = yScale.domain()[0]; return yScale.scale(min) + this.getLayoutStartPoint().y + offsetTop + offsetHandler; }; @@ -538,6 +553,27 @@ export class DataZoom extends DataFilte protected _getNeedClearVRenderComponents(): IGraphic[] { return [this._component] as unknown as IGroup[]; } + + onDataUpdate() { + super.onDataUpdate(); + // 预览scale + if (this._previewStateScale !== this._stateScale) { + this._previewStateScale = null; + } + } + + protected _getPreviewStateScale() { + if (!this._previewStateScale) { + // 当轴inverse时，需要反转预览scale + if (isReverse(this._relatedAxisComponent as CartesianAxis, this._isHorizontal)) { + this._previewStateScale = this._stateScale.clone(); + this._previewStateScale.range(this._stateScale.range().reverse()); + } else { + this._previewStateScale = this._stateScale; + } + } + return this._previewStateScale; + } } export const registerDataZoom = () => { From 45756ed2611eea4dae5e2379cb7fa05c52548813 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Mon, 17 Nov 2025 19:04:24 +0800 Subject: [PATCH 31/45] feat: upgrade vrender to fix datazoom --- common/config/rush/pnpm-lock.yaml | 121 ++++++++++-------- docs/package.json | 4 +- packages/openinula-vchart/package.json | 4 +- packages/react-vchart/package.json | 4 +- packages/vchart-extension/package.json | 8 +- packages/vchart/package.json | 8 +- .../data-zoom/data-zoom/data-zoom.ts | 1 + tools/story-player/package.json | 6 +- 8 files changed, 85 insertions(+), 71 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 68aa342ed7..771ed79089 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -22,8 +22,8 @@ importers: '@visactor/vchart-extension': workspace:2.0.7 '@visactor/vchart-theme': ~1.6.6 '@visactor/vmind': 1.2.4-alpha.5 - '@visactor/vrender': ~1.0.24 - '@visactor/vrender-kits': ~1.0.24 + '@visactor/vrender': ~1.0.26-alpha.2 + '@visactor/vrender-kits': ~1.0.26-alpha.2 '@visactor/vtable': 1.19.0-alpha.0 '@visactor/vtable-calendar': 1.19.0-alpha.0 '@visactor/vtable-editors': 1.19.0-alpha.0 @@ -59,8 +59,8 @@ importers: '@visactor/vchart-extension': link:../packages/vchart-extension '@visactor/vchart-theme': 1.6.9 '@visactor/vmind': 1.2.4-alpha.5 - '@visactor/vrender': 1.0.24 - '@visactor/vrender-kits': 1.0.24 + '@visactor/vrender': 1.0.26-alpha.2 + '@visactor/vrender-kits': 1.0.26-alpha.2 '@visactor/vtable': 1.19.0-alpha.0 '@visactor/vtable-calendar': 1.19.0-alpha.0 '@visactor/vtable-editors': 1.19.0-alpha.0 @@ -144,8 +144,8 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react-is': ^17.0.3 '@visactor/vchart': workspace:2.0.7 - '@visactor/vrender-core': ~1.0.24 - '@visactor/vrender-kits': ~1.0.24 + '@visactor/vrender-core': ~1.0.26-alpha.2 + '@visactor/vrender-kits': ~1.0.26-alpha.2 '@visactor/vutils': ~1.0.12 '@vitejs/plugin-react': 3.1.0 eslint: ~8.18.0 @@ -164,8 +164,8 @@ importers: vite: 3.2.6 dependencies: '@visactor/vchart': link:../vchart - '@visactor/vrender-core': 1.0.24 - '@visactor/vrender-kits': 1.0.24 + '@visactor/vrender-core': 1.0.26-alpha.2 + '@visactor/vrender-kits': 1.0.26-alpha.2 '@visactor/vutils': 1.0.12 react-is: 18.3.1 devDependencies: @@ -208,8 +208,8 @@ importers: '@types/react-is': ^17.0.3 '@visactor/vchart': workspace:2.0.7 '@visactor/vchart-extension': workspace:2.0.7 - '@visactor/vrender-core': ~1.0.24 - '@visactor/vrender-kits': ~1.0.24 + '@visactor/vrender-core': ~1.0.26-alpha.2 + '@visactor/vrender-kits': ~1.0.26-alpha.2 '@visactor/vutils': ~1.0.12 '@vitejs/plugin-react': 3.1.0 eslint: ~8.18.0 @@ -230,8 +230,8 @@ importers: dependencies: '@visactor/vchart': link:../vchart '@visactor/vchart-extension': link:../vchart-extension - '@visactor/vrender-core': 1.0.24 - '@visactor/vrender-kits': 1.0.24 + '@visactor/vrender-core': 1.0.26-alpha.2 + '@visactor/vrender-kits': 1.0.26-alpha.2 '@visactor/vutils': 1.0.12 react-is: 18.3.1 devDependencies: @@ -371,10 +371,10 @@ importers: '@types/offscreencanvas': 2019.6.4 '@visactor/vdataset': ~1.0.12 '@visactor/vlayouts': ~1.0.12 - '@visactor/vrender-animate': ~1.0.24 - '@visactor/vrender-components': ~1.0.24 - '@visactor/vrender-core': ~1.0.24 - '@visactor/vrender-kits': ~1.0.24 + '@visactor/vrender-animate': ~1.0.26-alpha.2 + '@visactor/vrender-components': ~1.0.26-alpha.2 + '@visactor/vrender-core': ~1.0.26-alpha.2 + '@visactor/vrender-kits': ~1.0.26-alpha.2 '@visactor/vscale': ~1.0.12 '@visactor/vutils': ~1.0.12 '@visactor/vutils-extension': workspace:2.0.7 @@ -413,10 +413,10 @@ importers: dependencies: '@visactor/vdataset': 1.0.12 '@visactor/vlayouts': 1.0.12 - '@visactor/vrender-animate': 1.0.24 - '@visactor/vrender-components': 1.0.24 - '@visactor/vrender-core': 1.0.24 - '@visactor/vrender-kits': 1.0.24 + '@visactor/vrender-animate': 1.0.26-alpha.2 + '@visactor/vrender-components': 1.0.26-alpha.2 + '@visactor/vrender-core': 1.0.26-alpha.2 + '@visactor/vrender-kits': 1.0.26-alpha.2 '@visactor/vscale': 1.0.12 '@visactor/vutils': 1.0.12 '@visactor/vutils-extension': link:../vutils-extension @@ -478,10 +478,10 @@ importers: '@visactor/vchart': workspace:2.0.7 '@visactor/vdataset': ~1.0.12 '@visactor/vlayouts': ~1.0.12 - '@visactor/vrender-animate': ~1.0.24 - '@visactor/vrender-components': ~1.0.24 - '@visactor/vrender-core': ~1.0.24 - '@visactor/vrender-kits': ~1.0.24 + '@visactor/vrender-animate': ~1.0.26-alpha.2 + '@visactor/vrender-components': ~1.0.26-alpha.2 + '@visactor/vrender-core': ~1.0.26-alpha.2 + '@visactor/vrender-kits': ~1.0.26-alpha.2 '@visactor/vutils': ~1.0.12 '@vitejs/plugin-react': 3.1.0 canvas: 2.11.2 @@ -503,10 +503,10 @@ importers: '@visactor/vchart': link:../vchart '@visactor/vdataset': 1.0.12 '@visactor/vlayouts': 1.0.12 - '@visactor/vrender-animate': 1.0.24 - '@visactor/vrender-components': 1.0.24 - '@visactor/vrender-core': 1.0.24 - '@visactor/vrender-kits': 1.0.24 + '@visactor/vrender-animate': 1.0.26-alpha.2 + '@visactor/vrender-components': 1.0.26-alpha.2 + '@visactor/vrender-core': 1.0.26-alpha.2 + '@visactor/vrender-kits': 1.0.26-alpha.2 '@visactor/vutils': 1.0.12 devDependencies: '@internal/bundler': link:../../tools/bundler @@ -878,9 +878,9 @@ importers: '@typescript-eslint/eslint-plugin': 5.30.0 '@typescript-eslint/parser': 5.30.0 '@visactor/vchart': workspace:2.0.7 - '@visactor/vrender': ~1.0.24 - '@visactor/vrender-core': ~1.0.24 - '@visactor/vrender-kits': ~1.0.24 + '@visactor/vrender': ~1.0.26-alpha.2 + '@visactor/vrender-core': ~1.0.26-alpha.2 + '@visactor/vrender-kits': ~1.0.26-alpha.2 '@visactor/vutils': ~1.0.12 cross-env: ^7.0.3 eslint: ~8.18.0 @@ -893,9 +893,9 @@ importers: vite: 3.2.6 dependencies: '@visactor/vchart': link:../../packages/vchart - '@visactor/vrender': 1.0.24 - '@visactor/vrender-core': 1.0.24 - '@visactor/vrender-kits': 1.0.24 + '@visactor/vrender': 1.0.26-alpha.2 + '@visactor/vrender-core': 1.0.26-alpha.2 + '@visactor/vrender-kits': 1.0.26-alpha.2 '@visactor/vutils': 1.0.12 devDependencies: '@internal/bundler': link:../bundler @@ -4884,10 +4884,10 @@ packages: '@visactor/vutils': 1.0.4 dev: false - /@visactor/vrender-animate/1.0.24: - resolution: {integrity: sha512-XGTzM0r9bObs6MQ9u0IJ29Oxr1h9eKW6QzSppMnhXtQhiPGFzppp6SiRosI+Gjq0FAR/vmHTeu2C6tWZPDwrcg==} + /@visactor/vrender-animate/1.0.26-alpha.2: + resolution: {integrity: sha512-VD9e3oz/VFJi72V059LCibp1Ipywk8HmsSS9AmJuic8fKH4pYrCKKmFq5LqWq71O07lzkmuloWwby1z9EXuEiw==} dependencies: - '@visactor/vrender-core': 1.0.24 + '@visactor/vrender-core': 1.0.26-alpha.2 '@visactor/vutils': 1.0.12 dev: false @@ -4901,12 +4901,12 @@ packages: '@visactor/vutils': 1.0.4 dev: false - /@visactor/vrender-components/1.0.24: - resolution: {integrity: sha512-GwtRWUuaVw7HJM/GTA3XY/6kjyHzCi10yE4tUSuvrytF2yLdOO+yG920B1nV+rBZGpKgyTpdJmszngQ1RZN4BQ==} + /@visactor/vrender-components/1.0.26-alpha.2: + resolution: {integrity: sha512-1AUlemFEniirpCHV4rHpKV278m9zqosQ0/+VBpauWlunBQQVU8E9NtGrIF6flDBNpAedJQH7B6v2/WbpYFwMLA==} dependencies: - '@visactor/vrender-animate': 1.0.24 - '@visactor/vrender-core': 1.0.24 - '@visactor/vrender-kits': 1.0.24 + '@visactor/vrender-animate': 1.0.26-alpha.2 + '@visactor/vrender-core': 1.0.26-alpha.2 + '@visactor/vrender-kits': 1.0.26-alpha.2 '@visactor/vscale': 1.0.12 '@visactor/vutils': 1.0.12 dev: false @@ -4918,8 +4918,8 @@ packages: color-convert: 2.0.1 dev: false - /@visactor/vrender-core/1.0.24: - resolution: {integrity: sha512-npcXOil6cyP2pLXk1L9XwVyHDGw7eNnjUEtpwUBn34pyI+d1IWJ8hi19IaBSsl3uzc/qfu9MPXiiHGGoTLzH0A==} + /@visactor/vrender-core/1.0.26-alpha.2: + resolution: {integrity: sha512-Wph4Jrsn2fsYEuyJHDKQxfTWtoTQkUPsOoIYottOWbIbNbLQdLYtx+hass0s8tGA64m0BQXwyxOiQC6QwPao9A==} dependencies: '@visactor/vutils': 1.0.12 color-convert: 2.0.1 @@ -4936,24 +4936,24 @@ packages: roughjs: 4.5.2 dev: false - /@visactor/vrender-kits/1.0.24: - resolution: {integrity: sha512-4gaZtCxHXPx4njJq417UfiPp9WbtUsPOJ+NyenhqLghdQXcqI8t1GfrXg2QiGcmqSSn8XDsHsQL6poZR1+wdVw==} + /@visactor/vrender-kits/1.0.26-alpha.2: + resolution: {integrity: sha512-X62bfy2pvqZNa4SGSmg9WJTVo0h1/cg/UOdozy9tJ5MX084akLku5V9/9TwJku0uaCx8O11chfTjcWF72KLR6g==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 1.0.24 + '@visactor/vrender-core': 1.0.26-alpha.2 '@visactor/vutils': 1.0.12 gifuct-js: 2.1.2 lottie-web: 5.13.0 - roughjs: 4.5.2 + roughjs: 4.6.6 dev: false - /@visactor/vrender/1.0.24: - resolution: {integrity: sha512-RkTdX6H5Z67KxgsAIBX+m9P6BYe+kIEgR44dOZhE3JB2w8RG1m3gzjX5GScaRJAn0M+lv/lirf8aIsqjtbW9gw==} + /@visactor/vrender/1.0.26-alpha.2: + resolution: {integrity: sha512-9T9fChghLAOi/sIWNWBCO6xe7z1nBKiVQYD/Ja36OhB+uMdLBxY/BLMg2s6AV0j198QvhqdJBUpM5+Zz4G0H3w==} dependencies: - '@visactor/vrender-animate': 1.0.24 - '@visactor/vrender-components': 1.0.24 - '@visactor/vrender-core': 1.0.24 - '@visactor/vrender-kits': 1.0.24 + '@visactor/vrender-animate': 1.0.26-alpha.2 + '@visactor/vrender-components': 1.0.26-alpha.2 + '@visactor/vrender-core': 1.0.26-alpha.2 + '@visactor/vrender-kits': 1.0.26-alpha.2 dev: false /@visactor/vscale/0.18.18: @@ -12335,6 +12335,10 @@ packages: duplexer: 0.1.2 dev: true + /hachure-fill/0.5.2: + resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==} + dev: false + /handle-thing/2.0.1: resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==} dev: true @@ -19661,6 +19665,15 @@ packages: points-on-path: 0.2.1 dev: false + /roughjs/4.6.6: + resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==} + dependencies: + hachure-fill: 0.5.2 + path-data-parser: 0.1.0 + points-on-curve: 0.2.0 + points-on-path: 0.2.1 + dev: false + /rsvp/4.8.5: resolution: {integrity: sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==} engines: {node: 6.* || >= 7.*} diff --git a/docs/package.json b/docs/package.json index 3068972807..005b4eb14e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,8 +19,8 @@ "@visactor/vchart-theme": "~1.6.6", "@visactor/vmind": "1.2.4-alpha.5", "@visactor/vutils": "~1.0.12", - "@visactor/vrender": "~1.0.24", - "@visactor/vrender-kits": "~1.0.24", + "@visactor/vrender": "~1.0.26-alpha.2", + "@visactor/vrender-kits": "~1.0.26-alpha.2", "@visactor/vtable": "1.19.0-alpha.0", "@visactor/vtable-editors": "1.19.0-alpha.0", "@visactor/vtable-gantt": "1.19.0-alpha.0", diff --git a/packages/openinula-vchart/package.json b/packages/openinula-vchart/package.json index ed05eaa5ed..2d7eda73a4 100644 --- a/packages/openinula-vchart/package.json +++ b/packages/openinula-vchart/package.json @@ -30,8 +30,8 @@ "dependencies": { "@visactor/vchart": "workspace:2.0.7", "@visactor/vutils": "~1.0.12", - "@visactor/vrender-core": "~1.0.24", - "@visactor/vrender-kits": "~1.0.24", + "@visactor/vrender-core": "~1.0.26-alpha.2", + "@visactor/vrender-kits": "~1.0.26-alpha.2", "react-is": "^18.2.0" }, "devDependencies": { diff --git a/packages/react-vchart/package.json b/packages/react-vchart/package.json index b6a4ff7c6d..5ed55f1edb 100644 --- a/packages/react-vchart/package.json +++ b/packages/react-vchart/package.json @@ -31,8 +31,8 @@ "@visactor/vchart": "workspace:2.0.7", "@visactor/vchart-extension": "workspace:2.0.7", "@visactor/vutils": "~1.0.12", - "@visactor/vrender-core": "~1.0.24", - "@visactor/vrender-kits": "~1.0.24", + "@visactor/vrender-core": "~1.0.26-alpha.2", + "@visactor/vrender-kits": "~1.0.26-alpha.2", "react-is": "^18.2.0" }, "devDependencies": { diff --git a/packages/vchart-extension/package.json b/packages/vchart-extension/package.json index 3e741eb1da..0637ffdaef 100644 --- a/packages/vchart-extension/package.json +++ b/packages/vchart-extension/package.json @@ -21,10 +21,10 @@ "start": "ts-node __tests__/runtime/browser/scripts/initVite.ts && vite serve __tests__/runtime/browser" }, "dependencies": { - "@visactor/vrender-core": "~1.0.24", - "@visactor/vrender-kits": "~1.0.24", - "@visactor/vrender-components": "~1.0.24", - "@visactor/vrender-animate": "~1.0.24", + "@visactor/vrender-core": "~1.0.26-alpha.2", + "@visactor/vrender-kits": "~1.0.26-alpha.2", + "@visactor/vrender-components": "~1.0.26-alpha.2", + "@visactor/vrender-animate": "~1.0.26-alpha.2", "@visactor/vchart": "workspace:2.0.7", "@visactor/vutils": "~1.0.12", "@visactor/vdataset": "~1.0.12", diff --git a/packages/vchart/package.json b/packages/vchart/package.json index 19ef4e7ae9..f5f813a874 100644 --- a/packages/vchart/package.json +++ b/packages/vchart/package.json @@ -122,10 +122,10 @@ "@visactor/vdataset": "~1.0.12", "@visactor/vscale": "~1.0.12", "@visactor/vlayouts": "~1.0.12", - "@visactor/vrender-core": "~1.0.24", - "@visactor/vrender-kits": "~1.0.24", - "@visactor/vrender-components": "~1.0.24", - "@visactor/vrender-animate": "~1.0.24", + "@visactor/vrender-core": "~1.0.26-alpha.2", + "@visactor/vrender-kits": "~1.0.26-alpha.2", + "@visactor/vrender-components": "~1.0.26-alpha.2", + "@visactor/vrender-animate": "~1.0.26-alpha.2", "@visactor/vutils-extension": "workspace:2.0.7" }, "publishConfig": { 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 index 581f2f3e71..4a6e052521 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -412,6 +412,7 @@ export class DataZoom extends DataFilte previewPointsX: isNeedPreview && this._dataToPositionX, previewPointsY: isNeedPreview && this._dataToPositionY, tolerance: this._spec.tolerance, + isReverse: isReverse(this._relatedAxisComponent as CartesianAxis, this._isHorizontal), ...(this._getComponentAttrs(isNeedPreview) as any) } as DataZoomAttributes; } diff --git a/tools/story-player/package.json b/tools/story-player/package.json index 8c6dbc7619..61f6b987d2 100644 --- a/tools/story-player/package.json +++ b/tools/story-player/package.json @@ -56,10 +56,10 @@ "vite": "3.2.6" }, "dependencies": { - "@visactor/vrender-core": "~1.0.24", - "@visactor/vrender-kits": "~1.0.24", + "@visactor/vrender-core": "~1.0.26-alpha.2", + "@visactor/vrender-kits": "~1.0.26-alpha.2", "@visactor/vchart": "workspace:2.0.7", - "@visactor/vrender": "~1.0.24", + "@visactor/vrender": "~1.0.26-alpha.2", "@visactor/vutils": "~1.0.12" } } \ No newline at end of file From 93473432501e7ced2a7bbe975efa305caebe3652 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Mon, 17 Nov 2025 20:12:12 +0800 Subject: [PATCH 32/45] fix: fix issue of datazoom --- .../data-zoom/data-filter-base-component.ts | 9 +++++++- .../vchart/src/component/data-zoom/util.ts | 21 +++++++++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) 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 index 2f270e9306..c3eeaafdd7 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -11,6 +11,7 @@ import { isReverse, lockStatisticsFilter, modeCheck, + parseDomainFromStateAndValue, parseDomainFromState, statePointToData } from './util'; @@ -378,7 +379,13 @@ export abstract class DataFilterBaseComponent { + if (isContinuous(scale.type)) { + const domain = scale.domain(); + const min = domain[0]; + const total = last(domain) - min; + const resultStart = isValid(start) ? min + total * start : +startValue; + const resultEnd = isValid(end) ? min + total * end : +endValue; + return [Math.min(resultEnd, resultStart), Math.max(resultEnd, resultStart)]; + } + const allDomain = scale.domain(); + const startIndex = isValid(start) ? Math.floor(allDomain.length * start) : allDomain.indexOf(startValue); + const endIndex = isValid(end) ? Math.floor(allDomain.length * end) : allDomain.indexOf(endValue); + return allDomain.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1); +}; From 9dc7583a49ecb2b9ee5b64e1c38f52ac22882144 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Mon, 17 Nov 2025 21:19:41 +0800 Subject: [PATCH 33/45] fix: fix issue of datazoom --- .../component/data-zoom/data-filter-base-component.ts | 2 +- packages/vchart/src/component/data-zoom/util.ts | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) 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 index c3eeaafdd7..47d3a4eb50 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -767,7 +767,7 @@ export abstract class DataFilterBaseComponent Date: Mon, 17 Nov 2025 21:56:05 +0800 Subject: [PATCH 34/45] fix: fix issue of datazoom --- .../data-zoom/data-filter-base-component.ts | 38 +++++++++++++------ .../data-zoom/data-zoom/data-zoom.ts | 4 +- .../data-zoom/scroll-bar/scroll-bar.ts | 17 +++++++-- 3 files changed, 43 insertions(+), 16 deletions(-) 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 index 47d3a4eb50..1e13a9fca4 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -46,7 +46,7 @@ import type { IDataFilterComponent, IDataFilterComponentSpec, IFilterMode } from import { dataViewParser, DataView } from '@visactor/vdataset'; import { CompilableData } from '../../compile/data/compilable-data'; import { Zoomable } from '../../interaction/zoom/zoomable'; -import type { AbstractComponent } from '@visactor/vrender-components'; +import type { AbstractComponent, DataZoom as DataZoomComponent } from '@visactor/vrender-components'; import { TransformLevel } from '../../data/initialize'; import type { IDataZoomSpec } from './data-zoom/interface'; import type { IGraphic, IGroup } from '@visactor/vrender-core'; @@ -264,7 +264,7 @@ export abstract class DataFilterBaseComponent extends DataFilte } } - onLayoutEnd(): void { - super.onLayoutEnd(); + protected _beforeLayoutEnd() { + super._beforeLayoutEnd(); const axis = this._relatedAxisComponent as CartesianAxis; // 初始时reverse判断并不准确，导致start和end颠倒, 保险起见在layoutend之后触发该逻辑 // FIXME: 牺牲了一定性能，有待优化 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 index 21d28774f8..921d7378f6 100644 --- a/packages/vchart/src/component/data-zoom/scroll-bar/scroll-bar.ts +++ b/packages/vchart/src/component/data-zoom/scroll-bar/scroll-bar.ts @@ -89,15 +89,25 @@ export class ScrollBar extends DataFi /*** end: init event and event dispatch ***/ /*** start: component lifecycle ***/ - onLayoutEnd(): void { - this._updateScaleRange(); + + protected _beforeLayoutEnd() { + super._beforeLayoutEnd(); this.effect.onZoomChange?.(); + } + + onLayoutEnd(): void { + // 保证自己的宽高正确 + this._updateComponentBounds(); super.onLayoutEnd(); } /*** end: component lifecycle ***/ /*** start: scale ***/ protected _updateScaleRange() { + // do nothing + } + + protected _updateComponentBounds() { if (this._component) { this._component.setAttributes({ x: this.getLayoutStartPoint().x, @@ -107,6 +117,7 @@ export class ScrollBar extends DataFi }); } } + /*** end: scale ***/ /** start: component layout attr ***/ @@ -147,7 +158,7 @@ export class ScrollBar extends DataFi range: [this._start, this._end], direction: this._isHorizontal ? 'horizontal' : 'vertical', delayType: this._spec?.delayType, - delayTime: isValid(this._spec?.delayType) ? (this._spec?.delayTime ?? 30) : 0, + delayTime: isValid(this._spec?.delayType) ? this._spec?.delayTime ?? 30 : 0, realTime: this._spec?.realTime ?? true, ...this._getComponentAttrs() } as ScrollBarAttributes; From ed5336eb1ca0fd7bfb7bcbcccf981d15760b95f6 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Tue, 18 Nov 2025 10:27:01 +0800 Subject: [PATCH 35/45] fix: fix issue of datazoom --- .../data-zoom/data-zoom/data-zoom.ts | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) 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 index 6a78ff4ae2..8d01213bc1 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -116,6 +116,7 @@ export class DataZoom extends DataFilte this._valueScale = new LinearScale(); } this._valueScale.domain(domain); + this._updateValueScaleRange(); if (this._component) { this._createOrUpdateComponent(true); } @@ -229,8 +230,13 @@ export class DataZoom extends DataFilte } protected _updateScaleRange() { + this._updateStateScaleRange(); + this._updateValueScaleRange(); + } + + protected _updateStateScaleRange() { const handlerSize = this._startHandlerSize + this._endHandlerSize; - if (!this._stateScale || !this._valueScale) { + if (!this._stateScale) { return; } @@ -253,14 +259,25 @@ export class DataZoom extends DataFilte ? [this._startHandlerSize / 2, compWidth - handlerSize + this._startHandlerSize / 2] : defaultRange; this._stateScale.range(stateScaleRange); - this._valueScale.range([compHeight - this._middleHandlerSize, 0]); } else { stateScaleRange = this._visible ? [this._startHandlerSize / 2, compHeight - handlerSize + this._startHandlerSize / 2] : defaultRange; this._stateScale.range(stateScaleRange); + } + } + protected _updateValueScaleRange() { + if (!this._valueScale) { + return; + } + const compWidth = this._computeWidth(); + const compHeight = this._computeHeight(); + + if (this._isHorizontal) { + this._valueScale.range([compHeight - this._middleHandlerSize, 0]); + } else { if (this.layoutOrient === 'left') { this._valueScale.range([compWidth - this._middleHandlerSize, 0]); } else { From 44618cdf54378b8dfbf88399c78f7f076aa26aa7 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Tue, 18 Nov 2025 11:30:28 +0800 Subject: [PATCH 36/45] fix: fix issue of datazoom --- .../data-zoom/data-filter-base-component.ts | 40 ++++++++++++++++--- .../vchart/src/component/data-zoom/util.ts | 12 ++++-- 2 files changed, 44 insertions(+), 8 deletions(-) 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 index 1e13a9fca4..12f3adfdeb 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -26,7 +26,14 @@ import type { } from '../../typings'; import { registerDataSetInstanceParser, registerDataSetInstanceTransform } from '../../data/register'; import type { IContinuousScale } from '@visactor/vscale'; -import { BandScale, isContinuous, isDiscrete, type IBandLikeScale, type IBaseScale } from '@visactor/vscale'; +import { + BandScale, + isContinuous, + isDiscrete, + LinearScale, + type IBandLikeScale, + type IBaseScale +} from '@visactor/vscale'; import { Direction } from '../../typings/space'; import type { CartesianAxis, ICartesianBandAxisSpec } from '../axis/cartesian'; import type { IAxis } from '../axis'; @@ -40,7 +47,8 @@ import { minInArray, maxInArray, last, - type IBoundsLike + type IBoundsLike, + isValidNumber } from '@visactor/vutils'; import type { IDataFilterComponent, IDataFilterComponentSpec, IFilterMode } from './interface'; import { dataViewParser, DataView } from '@visactor/vdataset'; @@ -407,6 +415,8 @@ export abstract class DataFilterBaseComponent { dataCollection.push(s.getRawData()); + seriesCollection.push(s); stateFields.push(this._field); if (this._valueField) { @@ -631,6 +643,7 @@ export abstract class DataFilterBaseComponent { + const stats = s.getRawDataStatisticsByField(this._field); + if (!isValidNumber(stats?.min) || !isValidNumber(stats?.max)) { + fieldLinear = false; + } + }, + { + userId: this._seriesUserId, + specIndex: this._seriesIndex + } + ); + } + + this._stateScale = fieldLinear ? new LinearScale() : new BandScale(); + this._stateScale.domain(this._computeDomainOfStateScale(fieldLinear), true).range(defaultRange); } } diff --git a/packages/vchart/src/component/data-zoom/util.ts b/packages/vchart/src/component/data-zoom/util.ts index b762bebf57..6ceac27821 100644 --- a/packages/vchart/src/component/data-zoom/util.ts +++ b/packages/vchart/src/component/data-zoom/util.ts @@ -96,6 +96,7 @@ export interface IDataFilterComputeDomainOption { stateFields: string[]; valueFields: string[]; isCategoryState?: boolean; + seriesCollection: any[]; method: 'sum'; // todo: 也许可以提供多种数据统计方法 @chensiji }; output: { @@ -105,18 +106,23 @@ export interface IDataFilterComputeDomainOption { } export const dataFilterComputeDomain = (data: Array, op: IDataFilterComputeDomainOption) => { - const { stateFields, valueFields, dataCollection, isCategoryState } = op.input; + const { stateFields, valueFields, dataCollection, isCategoryState, seriesCollection } = op.input; const { stateField, valueField } = op.output; const resultObj: any = {}; const resultKeys: any[] = []; const resultData: any[] = []; const stateValues: any[] = []; let hasLockDomain = false; - + let isAllLinearValue = false; dataCollection.forEach((dv: DataView, i) => { if (isNil(stateFields[i])) { return; } + const series = seriesCollection[i]; + const statistics = series.getRawDataStatisticsByField(stateFields[i]); + if (isValid(statistics?.max) && isValid(statistics?.min)) { + isAllLinearValue = true; + } // 按照用户指定的domain进行排序(这里不通过getRawDataStatistics来取是因为时机不对，此时getRawDataStatistics还没有正确结果) const stateFieldInfo = dv.getFields()?.[stateFields[i]]; if (stateFieldInfo && stateFieldInfo.lockStatisticsByDomain) { @@ -150,7 +156,7 @@ export const dataFilterComputeDomain = (data: Array, op: IDataFilterCompute const sortedStateValues = hasLockDomain ? stateValues - : isCategoryState === false + : isCategoryState === false || isAllLinearValue ? stateValues.sort((a, b) => a - b) : resultKeys; From 353d3c6c0d0e62f4319b4521b2cd72b1a02bf028 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Tue, 18 Nov 2025 11:35:19 +0800 Subject: [PATCH 37/45] fix: fix issue of datazoom --- packages/vchart/src/component/data-zoom/util.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/vchart/src/component/data-zoom/util.ts b/packages/vchart/src/component/data-zoom/util.ts index 6ceac27821..92438100a8 100644 --- a/packages/vchart/src/component/data-zoom/util.ts +++ b/packages/vchart/src/component/data-zoom/util.ts @@ -119,9 +119,11 @@ export const dataFilterComputeDomain = (data: Array, op: IDataFilterCompute return; } const series = seriesCollection[i]; - const statistics = series.getRawDataStatisticsByField(stateFields[i]); - if (isValid(statistics?.max) && isValid(statistics?.min)) { - isAllLinearValue = true; + if (series) { + const statistics = series.getRawDataStatisticsByField(stateFields[i]); + if (isValid(statistics?.max) && isValid(statistics?.min)) { + isAllLinearValue = true; + } } // 按照用户指定的domain进行排序(这里不通过getRawDataStatistics来取是因为时机不对，此时getRawDataStatistics还没有正确结果) const stateFieldInfo = dv.getFields()?.[stateFields[i]]; From c93f5df9d4bc9a61622d79d0d79cbd6962928520 Mon Sep 17 00:00:00 2001 From: skie1997 Date: Tue, 18 Nov 2025 14:31:32 +0800 Subject: [PATCH 38/45] chore: add change log --- ...r-datazoom-enhance-and-bugfix_2025-07-02-08-48.json | 2 +- ...r-datazoom-enhance-and-bugfix_2025-07-02-09-23.json | 2 +- ...r-datazoom-enhance-and-bugfix_2025-11-18-03-49.json | 10 ++++++++++ ...r-datazoom-enhance-and-bugfix_2025-11-18-03-50.json | 10 ++++++++++ 4 files changed, 22 insertions(+), 2 deletions(-) create mode 100644 common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-11-18-03-49.json create mode 100644 common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-11-18-03-50.json diff --git a/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-48.json b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-48.json index b155e3e09f..0587f30230 100644 --- a/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-48.json +++ b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-08-48.json @@ -2,7 +2,7 @@ "changes": [ { "packageName": "@visactor/vchart", - "comment": "fix: dot series display bug. fix #3282", + "comment": "fix: dot series display bug. fix #3283", "type": "none" } ], diff --git a/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-09-23.json b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-09-23.json index 06b288d39d..92fe17c16f 100644 --- a/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-09-23.json +++ b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-07-02-09-23.json @@ -2,7 +2,7 @@ "changes": [ { "packageName": "@visactor/vchart", - "comment": "fix: datazoom layout when set scale. fix #2574 & #2535", + "comment": "fix: datazoom layout when set scale. fix #2574 & #2424", "type": "none" } ], diff --git a/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-11-18-03-49.json b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-11-18-03-49.json new file mode 100644 index 0000000000..13d6b8e258 --- /dev/null +++ b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-11-18-03-49.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "fix: bind right axis when swtich orient. fix#3373", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file diff --git a/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-11-18-03-50.json b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-11-18-03-50.json new file mode 100644 index 0000000000..ff3dc8978c --- /dev/null +++ b/common/changes/@visactor/vchart/refactor-datazoom-enhance-and-bugfix_2025-11-18-03-50.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "performance: enhance datazoom and scrollbar performance. close#2525 & #2781", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file From dbf218b7e5752959038fdd1e1491b0558f933b72 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Tue, 18 Nov 2025 16:13:28 +0800 Subject: [PATCH 39/45] fix: fix issue of datazoom --- .../src/component/data-zoom/data-zoom/data-zoom.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) 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 index 8d01213bc1..2e21be6351 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -258,14 +258,17 @@ export class DataZoom extends DataFilte stateScaleRange = this._visible ? [this._startHandlerSize / 2, compWidth - handlerSize + this._startHandlerSize / 2] : defaultRange; - this._stateScale.range(stateScaleRange); } else { stateScaleRange = this._visible ? [this._startHandlerSize / 2, compHeight - handlerSize + this._startHandlerSize / 2] : defaultRange; - - this._stateScale.range(stateScaleRange); } + this._stateScale.range(stateScaleRange); + this._previewStateScale?.range( + isReverse(this._relatedAxisComponent as CartesianAxis, this._isHorizontal) + ? stateScaleRange.reverse() + : stateScaleRange + ); } protected _updateValueScaleRange() { From 6049e8344995a10123278c8d5e498243066ee6c3 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Tue, 18 Nov 2025 16:39:55 +0800 Subject: [PATCH 40/45] fix: fix issue of datazoom --- .../data-zoom/data-filter-base-component.ts | 33 ++++++++----------- 1 file changed, 14 insertions(+), 19 deletions(-) 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 index 12f3adfdeb..5f8275355c 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -380,30 +380,25 @@ export abstract class DataFilterBaseComponent Date: Tue, 18 Nov 2025 16:59:51 +0800 Subject: [PATCH 41/45] fix: fix issue of datazoom --- .../src/component/data-zoom/data-filter-base-component.ts | 4 ++++ 1 file changed, 4 insertions(+) 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 index 5f8275355c..c7c4692c89 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -350,6 +350,10 @@ export abstract class DataFilterBaseComponent, prevSpec: AdaptiveSpec) { From c3d7b9ee398becd7591303ab14420f5e083cd9dc Mon Sep 17 00:00:00 2001 From: skie1997 Date: Tue, 18 Nov 2025 17:04:51 +0800 Subject: [PATCH 42/45] fix: scrollbar visible layout bug --- .../data-zoom/data-filter-base-component.ts | 26 +++++++++---------- .../data-zoom/scroll-bar/scroll-bar.ts | 8 +++++- 2 files changed, 20 insertions(+), 14 deletions(-) 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 index c7c4692c89..92ead75276 100644 --- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts +++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts @@ -384,7 +384,7 @@ export abstract class DataFilterBaseComponent extends DataFi /** start: component layout attr ***/ protected _computeWidth(): number { + if (this._visible === false) { + return 0; + } if (isNumber(this._spec.width)) { return this._spec.width; } @@ -134,6 +137,9 @@ export class ScrollBar extends DataFi } protected _computeHeight(): number { + if (this._visible === false) { + return 0; + } if (isNumber(this._spec.height)) { return this._spec.height; } @@ -158,7 +164,7 @@ export class ScrollBar extends DataFi range: [this._start, this._end], direction: this._isHorizontal ? 'horizontal' : 'vertical', delayType: this._spec?.delayType, - delayTime: isValid(this._spec?.delayType) ? this._spec?.delayTime ?? 30 : 0, + delayTime: isValid(this._spec?.delayType) ? (this._spec?.delayTime ?? 30) : 0, realTime: this._spec?.realTime ?? true, ...this._getComponentAttrs() } as ScrollBarAttributes; From 995c3daf3b8ca48d8aa10bc04f78d61283cc9ad4 Mon Sep 17 00:00:00 2001 From: skie1997 Date: Tue, 18 Nov 2025 17:54:28 +0800 Subject: [PATCH 43/45] fix: init range when set auto --- .../src/component/data-zoom/data-zoom/data-zoom.ts | 13 +++++++------ .../component/data-zoom/scroll-bar/scroll-bar.ts | 5 ++++- 2 files changed, 11 insertions(+), 7 deletions(-) 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 index 2e21be6351..74be85dae7 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts @@ -141,7 +141,8 @@ export class DataZoom extends DataFilte const axis = this._relatedAxisComponent as CartesianAxis; // 初始时reverse判断并不准确，导致start和end颠倒, 保险起见在layoutend之后触发该逻辑 // FIXME: 牺牲了一定性能，有待优化 - if (isReverse(axis, this._isHorizontal) && !this._isReverseCache) { + if ((isReverse(axis, this._isHorizontal) && !this._isReverseCache) || this._auto) { + // auto则代表需要根据bandsize同步更新范围 this._isReverseCache = isReverse(axis, this._isHorizontal); this.effect.onZoomChange(); } @@ -169,13 +170,13 @@ export class DataZoom extends DataFilte const extendWidth = !this._visible ? 0 : this._isHorizontal - ? (startHandlerScaleXSize - this._startHandlerSize) / 2 + (endHandlerScaleXSize - this._endHandlerSize) / 2 - : (Math.max(startHandlerScaleXSize, endHandlerScaleXSize) - this._width) / 2; + ? (startHandlerScaleXSize - this._startHandlerSize) / 2 + (endHandlerScaleXSize - this._endHandlerSize) / 2 + : (Math.max(startHandlerScaleXSize, endHandlerScaleXSize) - this._width) / 2; const extendHeight = !this._visible ? 0 : this._isHorizontal - ? (Math.max(startHandlerScaleYSize, endHandlerScaleYSize) - this._height) / 2 - : (startHandlerScaleYSize - this._startHandlerSize) / 2 + (endHandlerScaleYSize - this._endHandlerSize) / 2; + ? (Math.max(startHandlerScaleYSize, endHandlerScaleYSize) - this._height) / 2 + : (startHandlerScaleYSize - this._startHandlerSize) / 2 + (endHandlerScaleYSize - this._endHandlerSize) / 2; if (this._isHorizontal) { result.y2 = result.y1 + this._height + extendHeight; result.x2 = result.x1 + rect.width + extendWidth; @@ -426,7 +427,7 @@ export class DataZoom extends DataFilte minSpan: this._minSpan, maxSpan: this._maxSpan, delayType: spec.delayType, - delayTime: isValid(spec.delayType) ? spec.delayTime ?? 30 : 0, + delayTime: isValid(spec.delayType) ? (spec.delayTime ?? 30) : 0, realTime: spec.realTime ?? true, previewData: isNeedPreview && this._data.getLatestData(), previewPointsX: isNeedPreview && this._dataToPositionX, 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 index f918273b4e..3b46b63006 100644 --- a/packages/vchart/src/component/data-zoom/scroll-bar/scroll-bar.ts +++ b/packages/vchart/src/component/data-zoom/scroll-bar/scroll-bar.ts @@ -92,7 +92,10 @@ export class ScrollBar extends DataFi protected _beforeLayoutEnd() { super._beforeLayoutEnd(); - this.effect.onZoomChange?.(); + // auto则代表需要根据bandsize同步更新范围 + if (this._auto) { + this.effect.onZoomChange?.(); + } } onLayoutEnd(): void { From cf3dfa7cc83aed849880628cd4fe0c02053a291f Mon Sep 17 00:00:00 2001 From: skie1997 Date: Tue, 18 Nov 2025 18:47:16 +0800 Subject: [PATCH 44/45] fix: init range when set auto --- .../vchart/src/component/data-zoom/scroll-bar/scroll-bar.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) 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 index 3b46b63006..f918273b4e 100644 --- a/packages/vchart/src/component/data-zoom/scroll-bar/scroll-bar.ts +++ b/packages/vchart/src/component/data-zoom/scroll-bar/scroll-bar.ts @@ -92,10 +92,7 @@ export class ScrollBar extends DataFi protected _beforeLayoutEnd() { super._beforeLayoutEnd(); - // auto则代表需要根据bandsize同步更新范围 - if (this._auto) { - this.effect.onZoomChange?.(); - } + this.effect.onZoomChange?.(); } onLayoutEnd(): void { From 6a4680e82943f794411380828c04d57d34ebf6a9 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Tue, 18 Nov 2025 19:06:42 +0800 Subject: [PATCH 45/45] feat: upgrade vrender to fix datazoom --- common/config/rush/pnpm-lock.yaml | 106 ++++++++++++------------- docs/package.json | 4 +- packages/openinula-vchart/package.json | 4 +- packages/react-vchart/package.json | 4 +- packages/vchart-extension/package.json | 8 +- packages/vchart/package.json | 8 +- tools/story-player/package.json | 6 +- 7 files changed, 70 insertions(+), 70 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 771ed79089..bee462a2b3 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -22,8 +22,8 @@ importers: '@visactor/vchart-extension': workspace:2.0.7 '@visactor/vchart-theme': ~1.6.6 '@visactor/vmind': 1.2.4-alpha.5 - '@visactor/vrender': ~1.0.26-alpha.2 - '@visactor/vrender-kits': ~1.0.26-alpha.2 + '@visactor/vrender': ~1.0.26 + '@visactor/vrender-kits': ~1.0.26 '@visactor/vtable': 1.19.0-alpha.0 '@visactor/vtable-calendar': 1.19.0-alpha.0 '@visactor/vtable-editors': 1.19.0-alpha.0 @@ -59,8 +59,8 @@ importers: '@visactor/vchart-extension': link:../packages/vchart-extension '@visactor/vchart-theme': 1.6.9 '@visactor/vmind': 1.2.4-alpha.5 - '@visactor/vrender': 1.0.26-alpha.2 - '@visactor/vrender-kits': 1.0.26-alpha.2 + '@visactor/vrender': 1.0.26 + '@visactor/vrender-kits': 1.0.26 '@visactor/vtable': 1.19.0-alpha.0 '@visactor/vtable-calendar': 1.19.0-alpha.0 '@visactor/vtable-editors': 1.19.0-alpha.0 @@ -144,8 +144,8 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react-is': ^17.0.3 '@visactor/vchart': workspace:2.0.7 - '@visactor/vrender-core': ~1.0.26-alpha.2 - '@visactor/vrender-kits': ~1.0.26-alpha.2 + '@visactor/vrender-core': ~1.0.26 + '@visactor/vrender-kits': ~1.0.26 '@visactor/vutils': ~1.0.12 '@vitejs/plugin-react': 3.1.0 eslint: ~8.18.0 @@ -164,8 +164,8 @@ importers: vite: 3.2.6 dependencies: '@visactor/vchart': link:../vchart - '@visactor/vrender-core': 1.0.26-alpha.2 - '@visactor/vrender-kits': 1.0.26-alpha.2 + '@visactor/vrender-core': 1.0.26 + '@visactor/vrender-kits': 1.0.26 '@visactor/vutils': 1.0.12 react-is: 18.3.1 devDependencies: @@ -208,8 +208,8 @@ importers: '@types/react-is': ^17.0.3 '@visactor/vchart': workspace:2.0.7 '@visactor/vchart-extension': workspace:2.0.7 - '@visactor/vrender-core': ~1.0.26-alpha.2 - '@visactor/vrender-kits': ~1.0.26-alpha.2 + '@visactor/vrender-core': ~1.0.26 + '@visactor/vrender-kits': ~1.0.26 '@visactor/vutils': ~1.0.12 '@vitejs/plugin-react': 3.1.0 eslint: ~8.18.0 @@ -230,8 +230,8 @@ importers: dependencies: '@visactor/vchart': link:../vchart '@visactor/vchart-extension': link:../vchart-extension - '@visactor/vrender-core': 1.0.26-alpha.2 - '@visactor/vrender-kits': 1.0.26-alpha.2 + '@visactor/vrender-core': 1.0.26 + '@visactor/vrender-kits': 1.0.26 '@visactor/vutils': 1.0.12 react-is: 18.3.1 devDependencies: @@ -371,10 +371,10 @@ importers: '@types/offscreencanvas': 2019.6.4 '@visactor/vdataset': ~1.0.12 '@visactor/vlayouts': ~1.0.12 - '@visactor/vrender-animate': ~1.0.26-alpha.2 - '@visactor/vrender-components': ~1.0.26-alpha.2 - '@visactor/vrender-core': ~1.0.26-alpha.2 - '@visactor/vrender-kits': ~1.0.26-alpha.2 + '@visactor/vrender-animate': ~1.0.26 + '@visactor/vrender-components': ~1.0.26 + '@visactor/vrender-core': ~1.0.26 + '@visactor/vrender-kits': ~1.0.26 '@visactor/vscale': ~1.0.12 '@visactor/vutils': ~1.0.12 '@visactor/vutils-extension': workspace:2.0.7 @@ -413,10 +413,10 @@ importers: dependencies: '@visactor/vdataset': 1.0.12 '@visactor/vlayouts': 1.0.12 - '@visactor/vrender-animate': 1.0.26-alpha.2 - '@visactor/vrender-components': 1.0.26-alpha.2 - '@visactor/vrender-core': 1.0.26-alpha.2 - '@visactor/vrender-kits': 1.0.26-alpha.2 + '@visactor/vrender-animate': 1.0.26 + '@visactor/vrender-components': 1.0.26 + '@visactor/vrender-core': 1.0.26 + '@visactor/vrender-kits': 1.0.26 '@visactor/vscale': 1.0.12 '@visactor/vutils': 1.0.12 '@visactor/vutils-extension': link:../vutils-extension @@ -478,10 +478,10 @@ importers: '@visactor/vchart': workspace:2.0.7 '@visactor/vdataset': ~1.0.12 '@visactor/vlayouts': ~1.0.12 - '@visactor/vrender-animate': ~1.0.26-alpha.2 - '@visactor/vrender-components': ~1.0.26-alpha.2 - '@visactor/vrender-core': ~1.0.26-alpha.2 - '@visactor/vrender-kits': ~1.0.26-alpha.2 + '@visactor/vrender-animate': ~1.0.26 + '@visactor/vrender-components': ~1.0.26 + '@visactor/vrender-core': ~1.0.26 + '@visactor/vrender-kits': ~1.0.26 '@visactor/vutils': ~1.0.12 '@vitejs/plugin-react': 3.1.0 canvas: 2.11.2 @@ -503,10 +503,10 @@ importers: '@visactor/vchart': link:../vchart '@visactor/vdataset': 1.0.12 '@visactor/vlayouts': 1.0.12 - '@visactor/vrender-animate': 1.0.26-alpha.2 - '@visactor/vrender-components': 1.0.26-alpha.2 - '@visactor/vrender-core': 1.0.26-alpha.2 - '@visactor/vrender-kits': 1.0.26-alpha.2 + '@visactor/vrender-animate': 1.0.26 + '@visactor/vrender-components': 1.0.26 + '@visactor/vrender-core': 1.0.26 + '@visactor/vrender-kits': 1.0.26 '@visactor/vutils': 1.0.12 devDependencies: '@internal/bundler': link:../../tools/bundler @@ -878,9 +878,9 @@ importers: '@typescript-eslint/eslint-plugin': 5.30.0 '@typescript-eslint/parser': 5.30.0 '@visactor/vchart': workspace:2.0.7 - '@visactor/vrender': ~1.0.26-alpha.2 - '@visactor/vrender-core': ~1.0.26-alpha.2 - '@visactor/vrender-kits': ~1.0.26-alpha.2 + '@visactor/vrender': ~1.0.26 + '@visactor/vrender-core': ~1.0.26 + '@visactor/vrender-kits': ~1.0.26 '@visactor/vutils': ~1.0.12 cross-env: ^7.0.3 eslint: ~8.18.0 @@ -893,9 +893,9 @@ importers: vite: 3.2.6 dependencies: '@visactor/vchart': link:../../packages/vchart - '@visactor/vrender': 1.0.26-alpha.2 - '@visactor/vrender-core': 1.0.26-alpha.2 - '@visactor/vrender-kits': 1.0.26-alpha.2 + '@visactor/vrender': 1.0.26 + '@visactor/vrender-core': 1.0.26 + '@visactor/vrender-kits': 1.0.26 '@visactor/vutils': 1.0.12 devDependencies: '@internal/bundler': link:../bundler @@ -4884,10 +4884,10 @@ packages: '@visactor/vutils': 1.0.4 dev: false - /@visactor/vrender-animate/1.0.26-alpha.2: - resolution: {integrity: sha512-VD9e3oz/VFJi72V059LCibp1Ipywk8HmsSS9AmJuic8fKH4pYrCKKmFq5LqWq71O07lzkmuloWwby1z9EXuEiw==} + /@visactor/vrender-animate/1.0.26: + resolution: {integrity: sha512-e0AZnc18tGJwElQ2yKqSNTLSHgcM1ML0HR3oK3p2uzzrBRMCWaYvcC1lRdbWyaVicbAAEFMtpI6sbvbtpiXe3A==} dependencies: - '@visactor/vrender-core': 1.0.26-alpha.2 + '@visactor/vrender-core': 1.0.26 '@visactor/vutils': 1.0.12 dev: false @@ -4901,12 +4901,12 @@ packages: '@visactor/vutils': 1.0.4 dev: false - /@visactor/vrender-components/1.0.26-alpha.2: - resolution: {integrity: sha512-1AUlemFEniirpCHV4rHpKV278m9zqosQ0/+VBpauWlunBQQVU8E9NtGrIF6flDBNpAedJQH7B6v2/WbpYFwMLA==} + /@visactor/vrender-components/1.0.26: + resolution: {integrity: sha512-IRY3oke+vOLTZVu6M0dxiQ9QEH+Bb+3KA3MwiRWKfBBmtx/RkOUcSNBAXAqw4R/Hue3wM5YyxyWe0Jfdhag5MQ==} dependencies: - '@visactor/vrender-animate': 1.0.26-alpha.2 - '@visactor/vrender-core': 1.0.26-alpha.2 - '@visactor/vrender-kits': 1.0.26-alpha.2 + '@visactor/vrender-animate': 1.0.26 + '@visactor/vrender-core': 1.0.26 + '@visactor/vrender-kits': 1.0.26 '@visactor/vscale': 1.0.12 '@visactor/vutils': 1.0.12 dev: false @@ -4918,8 +4918,8 @@ packages: color-convert: 2.0.1 dev: false - /@visactor/vrender-core/1.0.26-alpha.2: - resolution: {integrity: sha512-Wph4Jrsn2fsYEuyJHDKQxfTWtoTQkUPsOoIYottOWbIbNbLQdLYtx+hass0s8tGA64m0BQXwyxOiQC6QwPao9A==} + /@visactor/vrender-core/1.0.26: + resolution: {integrity: sha512-0acvC8J1ARoWPJvojOLjxUbpnJnQW0FNZ1in2w6yHad5pX+p9GCh8B7HCRVrucw2kM0vPRKzsWURHxLfWsug9w==} dependencies: '@visactor/vutils': 1.0.12 color-convert: 2.0.1 @@ -4936,24 +4936,24 @@ packages: roughjs: 4.5.2 dev: false - /@visactor/vrender-kits/1.0.26-alpha.2: - resolution: {integrity: sha512-X62bfy2pvqZNa4SGSmg9WJTVo0h1/cg/UOdozy9tJ5MX084akLku5V9/9TwJku0uaCx8O11chfTjcWF72KLR6g==} + /@visactor/vrender-kits/1.0.26: + resolution: {integrity: sha512-fnv7USvSOD9bJlPGMoQmTmgI+Rf5xegx1W0Sw+QTKAiQVQoXyGJTbpCY8Epfy1iwPO+7O2OdT7Xu3G6Pj5sY1Q==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 1.0.26-alpha.2 + '@visactor/vrender-core': 1.0.26 '@visactor/vutils': 1.0.12 gifuct-js: 2.1.2 lottie-web: 5.13.0 roughjs: 4.6.6 dev: false - /@visactor/vrender/1.0.26-alpha.2: - resolution: {integrity: sha512-9T9fChghLAOi/sIWNWBCO6xe7z1nBKiVQYD/Ja36OhB+uMdLBxY/BLMg2s6AV0j198QvhqdJBUpM5+Zz4G0H3w==} + /@visactor/vrender/1.0.26: + resolution: {integrity: sha512-sPxogYn/OLnMLJZJPI87w40drL5TotOWEkEd1vSD0kFKNSWSEs82QS4HUpUkZinPIHcC4BLtFf5mZonsB3k7lg==} dependencies: - '@visactor/vrender-animate': 1.0.26-alpha.2 - '@visactor/vrender-components': 1.0.26-alpha.2 - '@visactor/vrender-core': 1.0.26-alpha.2 - '@visactor/vrender-kits': 1.0.26-alpha.2 + '@visactor/vrender-animate': 1.0.26 + '@visactor/vrender-components': 1.0.26 + '@visactor/vrender-core': 1.0.26 + '@visactor/vrender-kits': 1.0.26 dev: false /@visactor/vscale/0.18.18: diff --git a/docs/package.json b/docs/package.json index 005b4eb14e..fb76b837db 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,8 +19,8 @@ "@visactor/vchart-theme": "~1.6.6", "@visactor/vmind": "1.2.4-alpha.5", "@visactor/vutils": "~1.0.12", - "@visactor/vrender": "~1.0.26-alpha.2", - "@visactor/vrender-kits": "~1.0.26-alpha.2", + "@visactor/vrender": "~1.0.26", + "@visactor/vrender-kits": "~1.0.26", "@visactor/vtable": "1.19.0-alpha.0", "@visactor/vtable-editors": "1.19.0-alpha.0", "@visactor/vtable-gantt": "1.19.0-alpha.0", diff --git a/packages/openinula-vchart/package.json b/packages/openinula-vchart/package.json index 2d7eda73a4..b321efd75a 100644 --- a/packages/openinula-vchart/package.json +++ b/packages/openinula-vchart/package.json @@ -30,8 +30,8 @@ "dependencies": { "@visactor/vchart": "workspace:2.0.7", "@visactor/vutils": "~1.0.12", - "@visactor/vrender-core": "~1.0.26-alpha.2", - "@visactor/vrender-kits": "~1.0.26-alpha.2", + "@visactor/vrender-core": "~1.0.26", + "@visactor/vrender-kits": "~1.0.26", "react-is": "^18.2.0" }, "devDependencies": { diff --git a/packages/react-vchart/package.json b/packages/react-vchart/package.json index 5ed55f1edb..c5fdcd0a30 100644 --- a/packages/react-vchart/package.json +++ b/packages/react-vchart/package.json @@ -31,8 +31,8 @@ "@visactor/vchart": "workspace:2.0.7", "@visactor/vchart-extension": "workspace:2.0.7", "@visactor/vutils": "~1.0.12", - "@visactor/vrender-core": "~1.0.26-alpha.2", - "@visactor/vrender-kits": "~1.0.26-alpha.2", + "@visactor/vrender-core": "~1.0.26", + "@visactor/vrender-kits": "~1.0.26", "react-is": "^18.2.0" }, "devDependencies": { diff --git a/packages/vchart-extension/package.json b/packages/vchart-extension/package.json index 0637ffdaef..2a42065594 100644 --- a/packages/vchart-extension/package.json +++ b/packages/vchart-extension/package.json @@ -21,10 +21,10 @@ "start": "ts-node __tests__/runtime/browser/scripts/initVite.ts && vite serve __tests__/runtime/browser" }, "dependencies": { - "@visactor/vrender-core": "~1.0.26-alpha.2", - "@visactor/vrender-kits": "~1.0.26-alpha.2", - "@visactor/vrender-components": "~1.0.26-alpha.2", - "@visactor/vrender-animate": "~1.0.26-alpha.2", + "@visactor/vrender-core": "~1.0.26", + "@visactor/vrender-kits": "~1.0.26", + "@visactor/vrender-components": "~1.0.26", + "@visactor/vrender-animate": "~1.0.26", "@visactor/vchart": "workspace:2.0.7", "@visactor/vutils": "~1.0.12", "@visactor/vdataset": "~1.0.12", diff --git a/packages/vchart/package.json b/packages/vchart/package.json index f5f813a874..90377e4a65 100644 --- a/packages/vchart/package.json +++ b/packages/vchart/package.json @@ -122,10 +122,10 @@ "@visactor/vdataset": "~1.0.12", "@visactor/vscale": "~1.0.12", "@visactor/vlayouts": "~1.0.12", - "@visactor/vrender-core": "~1.0.26-alpha.2", - "@visactor/vrender-kits": "~1.0.26-alpha.2", - "@visactor/vrender-components": "~1.0.26-alpha.2", - "@visactor/vrender-animate": "~1.0.26-alpha.2", + "@visactor/vrender-core": "~1.0.26", + "@visactor/vrender-kits": "~1.0.26", + "@visactor/vrender-components": "~1.0.26", + "@visactor/vrender-animate": "~1.0.26", "@visactor/vutils-extension": "workspace:2.0.7" }, "publishConfig": { diff --git a/tools/story-player/package.json b/tools/story-player/package.json index 61f6b987d2..e2e7407cce 100644 --- a/tools/story-player/package.json +++ b/tools/story-player/package.json @@ -56,10 +56,10 @@ "vite": "3.2.6" }, "dependencies": { - "@visactor/vrender-core": "~1.0.26-alpha.2", - "@visactor/vrender-kits": "~1.0.26-alpha.2", + "@visactor/vrender-core": "~1.0.26", + "@visactor/vrender-kits": "~1.0.26", "@visactor/vchart": "workspace:2.0.7", - "@visactor/vrender": "~1.0.26-alpha.2", + "@visactor/vrender": "~1.0.26", "@visactor/vutils": "~1.0.12" } } \ No newline at end of file