Skip to content
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

fix(animation): fix incorrect dataGroupId for old data items in universalTransition #17559

Merged
merged 1 commit into from
Oct 15, 2022
Merged

fix(animation): fix incorrect dataGroupId for old data items in universalTransition #17559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 36 additions & 13 deletions src/animation/universalTransition.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,16 +43,18 @@ import Displayable from 'zrender/src/graphic/Displayable';

const DATA_COUNT_THRESHOLD = 1e4;

interface GlobalStore { oldSeries: SeriesModel[], oldData: SeriesData[] };
interface GlobalStore { oldSeries: SeriesModel[], oldDataGroupIds: string[], oldData: SeriesData[] };
const getUniversalTransitionGlobalStore = makeInner<GlobalStore, ExtensionAPI>();

interface DiffItem {
dataGroupId: string
data: SeriesData
dim: DimensionLoose
divide: UniversalTransitionOption['divideShape']
dataIndex: number
}
interface TransitionSeries {
dataGroupId: string
data: SeriesData
divide: UniversalTransitionOption['divideShape']
dim?: DimensionLoose
Expand Down Expand Up @@ -83,6 +85,7 @@ function flattenDataDiffItems(list: TransitionSeries[]) {
const groupDim = getGroupIdDimension(data);
for (let dataIndex = 0; dataIndex < indices.length; dataIndex++) {
items.push({
dataGroupId: seriesInfo.dataGroupId,
data,
dim: seriesInfo.dim || groupDim,
divide: seriesInfo.divide,
Expand Down Expand Up @@ -207,7 +210,7 @@ function transitionBetween(
// Use group id as transition key by default.
// So we can achieve multiple to multiple animation like drilldown / up naturally.
// If group id not exits. Use id instead. If so, only one to one transition will be applied.
const dataGroupId = data.hostModel && (data.hostModel as SeriesModel).get('dataGroupId') as string;
const dataGroupId = diffItem.dataGroupId;

// If specified key dimension(itemGroupId by default). Use this same dimension from other data.
// PENDING: If only use key dimension of newData.
Expand Down Expand Up @@ -470,26 +473,35 @@ function findTransitionSeriesBatches(
) {
const updateBatches = createHashMap<SeriesTransitionBatch>();

const oldDataMap = createHashMap<SeriesData>();
const oldDataMap = createHashMap<{
dataGroupId: string,
data: SeriesData
}>();
// Map that only store key in array seriesKey.
// Which is used to query the old data when transition from one to multiple series.
const oldDataMapForSplit = createHashMap<{
key: string,
dataGroupId: string,
data: SeriesData
}>();

each(globalStore.oldSeries, (series, idx) => {
const oldDataGroupId = globalStore.oldDataGroupIds[idx] as string;
const oldData = globalStore.oldData[idx];
const transitionKey = getSeriesTransitionKey(series);
const transitionKeyStr = convertArraySeriesKeyToString(transitionKey);
oldDataMap.set(transitionKeyStr, oldData);
oldDataMap.set(transitionKeyStr, {
dataGroupId: oldDataGroupId,
data: oldData
});

if (isArray(transitionKey)) {
// Same key can't in different array seriesKey.
each(transitionKey, key => {
oldDataMapForSplit.set(key, {
data: oldData,
key: transitionKeyStr
key: transitionKeyStr,
dataGroupId: oldDataGroupId,
data: oldData
});
});
}
Expand All @@ -502,6 +514,7 @@ function findTransitionSeriesBatches(
}
each(params.updatedSeries, series => {
if (series.isUniversalTransitionEnabled() && series.isAnimationEnabled()) {
const newDataGroupId = series.get('dataGroupId') as string;
const newData = series.getData();
const transitionKey = getSeriesTransitionKey(series);
const transitionKeyStr = convertArraySeriesKeyToString(transitionKey);
Expand All @@ -515,16 +528,18 @@ function findTransitionSeriesBatches(
// TODO check if data is same?
updateBatches.set(transitionKeyStr, {
oldSeries: [{
divide: getDivideShapeFromData(oldData),
data: oldData
dataGroupId: oldData.dataGroupId,
divide: getDivideShapeFromData(oldData.data),
data: oldData.data
}],
newSeries: [{
dataGroupId: newDataGroupId,
divide: getDivideShapeFromData(newData),
data: newData
}]
});
}
else {
else {
// Transition from multiple series.
if (isArray(transitionKey)) {
if (__DEV__) {
Expand All @@ -533,17 +548,19 @@ function findTransitionSeriesBatches(
const oldSeries: TransitionSeries[] = [];
each(transitionKey, key => {
const oldData = oldDataMap.get(key);
if (oldData) {
if (oldData.data) {
oldSeries.push({
divide: getDivideShapeFromData(oldData),
data: oldData
dataGroupId: oldData.dataGroupId,
divide: getDivideShapeFromData(oldData.data),
data: oldData.data
});
}
});
if (oldSeries.length) {
updateBatches.set(transitionKeyStr, {
oldSeries,
newSeries: [{
dataGroupId: newDataGroupId,
data: newData,
divide: getDivideShapeFromData(newData)
}]
Expand All @@ -558,6 +575,7 @@ function findTransitionSeriesBatches(
if (!batch) {
batch = {
oldSeries: [{
dataGroupId: oldData.dataGroupId,
data: oldData.data,
divide: getDivideShapeFromData(oldData.data)
}],
Expand All @@ -566,6 +584,7 @@ function findTransitionSeriesBatches(
updateBatches.set(oldData.key, batch);
}
batch.newSeries.push({
dataGroupId: newDataGroupId,
data: newData,
divide: getDivideShapeFromData(newData)
});
Expand Down Expand Up @@ -600,6 +619,7 @@ function transitionSeriesFromOpt(
const idx = querySeries(globalStore.oldSeries, finder);
if (idx >= 0) {
from.push({
dataGroupId: globalStore.oldDataGroupIds[idx],
data: globalStore.oldData[idx],
// TODO can specify divideShape in transition.
divide: getDivideShapeFromData(globalStore.oldData[idx]),
Expand All @@ -612,6 +632,7 @@ function transitionSeriesFromOpt(
if (idx >= 0) {
const data = params.updatedSeries[idx].getData();
to.push({
dataGroupId: globalStore.oldDataGroupIds[idx],
data,
divide: getDivideShapeFromData(data),
dim: finder.dimension
Expand Down Expand Up @@ -671,15 +692,17 @@ export function installUniversalTransition(registers: EChartsExtensionInstallReg
// Save all series of current update. Not only the updated one.
const allSeries = ecModel.getSeries();
const savedSeries: SeriesModel[] = globalStore.oldSeries = [];
const savedDataGroupIds: string[] = globalStore.oldDataGroupIds = [];
const savedData: SeriesData[] = globalStore.oldData = [];
for (let i = 0; i < allSeries.length; i++) {
const data = allSeries[i].getData();
// Only save the data that can have transition.
// Avoid large data costing too much extra memory
if (data.count() < DATA_COUNT_THRESHOLD) {
savedSeries.push(allSeries[i]);
savedDataGroupIds.push(allSeries[i].get('dataGroupId') as string);
savedData.push(data);
}
}
});
}
}
2 changes: 1 addition & 1 deletion test/universalTransition2.html
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.