Skip to content

fix(dataZoom): data shape distribution for time axis #16978

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 17, 2025
Merged

fix(dataZoom): data shape distribution for time axis #16978

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6c51c49
Merge pull request #1 from andrearoota/feature/italian-translation
andrearoota Dec 11, 2021
98eb1f8
Merge branch 'apache:master' into master
andrearoota May 4, 2022
6babda7
fix(dataZoom): render data not equally distributed. close #16924
andrearoota May 4, 2022
88c77e7
fix(dataZoom): render data not equally distributed. close #16924
andrearoota May 4, 2022
b6a041e
fix(dataZoom): render data not equally distributed. close #16924
andrearoota May 5, 2022
026ade4
Merge branch 'master' into fix-16924
andrearoota May 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 29 additions & 20 deletions src/component/dataZoom/SliderZoomView.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@
* under the License.
*/

import {bind, each, isFunction, isString, indexOf} from 'zrender/src/core/util';
import { bind, each, isFunction, isString, indexOf } from 'zrender/src/core/util';
import * as eventTool from 'zrender/src/core/event';
import * as graphic from '../../util/graphic';
import * as throttle from '../../util/throttle';
import DataZoomView from './DataZoomView';
import {linearMap, asc, parsePercent} from '../../util/number';
import { linearMap, asc, parsePercent } from '../../util/number';
import * as layout from '../../util/layout';
import sliderMove from '../helper/sliderMove';
import GlobalModel from '../../model/Global';
Expand All @@ -41,7 +41,7 @@ import { createSymbol, symbolBuildProxies } from '../../util/symbol';
import { deprecateLog } from '../../util/log';
import { PointLike } from 'zrender/src/core/Point';
import Displayable from 'zrender/src/graphic/Displayable';
import {createTextStyle} from '../../label/labelStyle';
import { createTextStyle } from '../../label/labelStyle';
import SeriesData from '../../data/SeriesData';

const Rect = graphic.Rect;
Expand Down Expand Up @@ -227,7 +227,7 @@ class SliderZoomView extends DataZoomView {
// If some of x/y/width/height are not specified,
// auto-adapt according to target grid.
const coordRect = this._findCoordRect();
const ecSize = {width: api.getWidth(), height: api.getHeight()};
const ecSize = { width: api.getWidth(), height: api.getHeight() };
// Default align by coordinate system rect.
const positionInfo = this._orient === HORIZONTAL
? {
Expand Down Expand Up @@ -261,7 +261,7 @@ class SliderZoomView extends DataZoomView {
ecSize
);

this._location = {x: layoutRect.x, y: layoutRect.y};
this._location = { x: layoutRect.x, y: layoutRect.y };
this._size = [layoutRect.width, layoutRect.height];
this._orient === VERTICAL && this._size.reverse();
}
Expand Down Expand Up @@ -375,6 +375,7 @@ class SliderZoomView extends DataZoomView {
data !== this._shadowData || otherDim !== this._shadowDim
|| size[0] !== oldSize[0] || size[1] !== oldSize[1]
) {
const thisDataExtent = data.getDataExtent(info.thisDim);
let otherDataExtent = data.getDataExtent(otherDim);
// Nice extent.
const otherOffset = (otherDataExtent[1] - otherDataExtent[0]) * 0.3;
Expand All @@ -388,26 +389,35 @@ class SliderZoomView extends DataZoomView {
const areaPoints = [[size[0], 0], [0, 0]];
const linePoints: number[][] = [];
const step = thisShadowExtent[1] / (data.count() - 1);
let thisCoord = 0;
const normalizationConstant = size[0] / (thisDataExtent[1] - thisDataExtent[0]);
const isTimeAxis = info.thisAxis.type === 'time';
let thisCoord = -step;

// Optimize for large data shadow
const stride = Math.round(data.count() / size[0]);
let lastIsEmpty: boolean;
data.each([otherDim], function (value: ParsedValue, index) {

data.each([info.thisDim, otherDim], function (thisValue: ParsedValue, otherValue: ParsedValue, index) {
if (stride > 0 && (index % stride)) {
thisCoord += step;
if (!isTimeAxis) {
thisCoord += step;
}
return;
}

thisCoord = isTimeAxis
? (+thisValue - thisDataExtent[0]) * normalizationConstant
: thisCoord + step;

// FIXME
// Should consider axis.min/axis.max when drawing dataShadow.

// FIXME
// 应该使用统一的空判断？还是在list里进行空判断？
const isEmpty = value == null || isNaN(value as number) || value === '';
const isEmpty = otherValue == null || isNaN(otherValue as number) || otherValue === '';
// See #4235.
const otherCoord = isEmpty
? 0 : linearMap(value as number, otherDataExtent, otherShadowExtent, true);
? 0 : linearMap(otherValue as number, otherDataExtent, otherShadowExtent, true);

// Attempt to draw data shadow precisely when there are empty value.
if (isEmpty && !lastIsEmpty && index) {
Expand All @@ -422,7 +432,6 @@ class SliderZoomView extends DataZoomView {
areaPoints.push([thisCoord, otherCoord]);
linePoints.push([thisCoord, otherCoord]);

thisCoord += step;
lastIsEmpty = isEmpty;
});

Expand All @@ -440,14 +449,14 @@ class SliderZoomView extends DataZoomView {
const model = dataZoomModel.getModel(isSelectedArea ? 'selectedDataBackground' : 'dataBackground');
const group = new graphic.Group();
const polygon = new graphic.Polygon({
shape: {points: polygonPts},
shape: { points: polygonPts },
segmentIgnoreThreshold: 1,
style: model.getModel('areaStyle').getAreaStyle(),
silent: true,
z2: -20
});
const polyline = new graphic.Polyline({
shape: {points: polylinePts},
shape: { points: polylinePts },
segmentIgnoreThreshold: 1,
style: model.getModel('lineStyle').getLineStyle(),
silent: true,
Expand Down Expand Up @@ -489,8 +498,8 @@ class SliderZoomView extends DataZoomView {
}

if (showDataShadow !== true && indexOf(
SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get('type')
) < 0
SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get('type')
) < 0
) {
return;
}
Expand Down Expand Up @@ -675,8 +684,8 @@ class SliderZoomView extends DataZoomView {
});

actualMoveZone.on('mouseover', () => {
api.enterEmphasis(moveHandle);
})
api.enterEmphasis(moveHandle);
})
.on('mouseout', () => {
api.leaveEmphasis(moveHandle);
});
Expand Down Expand Up @@ -882,8 +891,8 @@ class SliderZoomView extends DataZoomView {
return isFunction(labelFormatter)
? labelFormatter(value as number, valueStr)
: isString(labelFormatter)
? labelFormatter.replace('{value}', valueStr)
: valueStr;
? labelFormatter.replace('{value}', valueStr)
: valueStr;
}

/**
Expand Down Expand Up @@ -1103,7 +1112,7 @@ class SliderZoomView extends DataZoomView {
function getOtherDim(thisDim: 'x' | 'y' | 'radius' | 'angle' | 'single' | 'z') {
// FIXME
// 这个逻辑和getOtherAxis里一致，但是写在这里是否不好
const map = {x: 'y', y: 'x', radius: 'angle', angle: 'radius'};
const map = { x: 'y', y: 'x', radius: 'angle', angle: 'radius' };
return map[thisDim as 'x' | 'y' | 'radius' | 'angle'];
}

Expand Down