Skip to content

Commit

Permalink
fix: incorrect dataGroupId for old data items in universalTransition (#…
Browse files Browse the repository at this point in the history 
…17559)
  • Loading branch information
@tyn1998
tyn1998 authored Oct 15, 2022
1 parent c61494f commit 069b692
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 14 deletions.
49 changes: 36 additions & 13 deletions src/animation/universalTransition.ts
View file
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

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

0 comments on commit 069b692

Please sign in to comment.