Skip to content

Commit

Permalink
fix: issue with unit-template animate caused by time
Browse files Browse the repository at this point in the history
  • Loading branch information
neuqzxy committed Dec 10, 2024
1 parent 06d0506 commit 8f1a159
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 340 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vstory-templates",
"comment": "fix: issue with unit-template animate caused by time",
"type": "none"
}
],
"packageName": "@visactor/vstory-templates"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vstory",
"comment": "fix: issue with unit-template animate caused by time",
"type": "none"
}
],
"packageName": "@visactor/vstory"
}
2 changes: 1 addition & 1 deletion packages/vstory-templates/src/unit-template/default.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { IUnitTemplateSpec } from './interface';

export const DEFAULT_SCENE_DURATION = 2000;
export const DEFAULT_SCENE_DURATION = 5000;
export const DEFAULT_ANIMATION_DURATION = 1000;

export const defaultConfig: Partial<IUnitTemplateSpec> = {
Expand Down
339 changes: 0 additions & 339 deletions packages/vstory/demo/src/demos/templates/unit-template1.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,345 +9,6 @@ registerVChartAction();
registerVComponentAction();
initVR();

async function loadDSL() {
const compressedData = await loadExampleData();
const data = decompressData(compressedData);
const spec = {
layout: {
width: 1550,
height: 800,
viz: {
padding: {
top: 0
}
},
title: {
style: {
fontSize: 36
},
height: 150
}
},
unit: {
gap: [0.2, 0.2],
countPerSymbol: 1,
defaultStyle: {
fill: '#222222'
}
},
data: data.filter(record => record.year === 2014),
scenes: [
{
title: [
{
text: '美国每年有超过'
},
{
text: ' 33,000 ',
fontWeight: 'bold'
},
{
text: '个人被枪杀'
}
],
nodes: [
{
style: {
fill: '#dedede'
}
}
]
},
{
title: [
{
text: '近三分之二的枪支死亡事件为 '
},
{
text: '自杀',
fontWeight: 'bold'
},
{
text: '.'
}
],
nodes: [
{
query: (datum: typeof data[0]) => datum.intent === 'Suicide',
style: {
fill: '#e3662e'
}
}
]
},
{
sceneDuration: 3000,
animationDuration: 500,
title: [
{
text: '超过85%的自杀受害者是 '
},
{
text: '男性',
fontWeight: 'bold'
},
{
text: '...'
}
],
nodes: [
{
query: (datum: typeof data[0]) => datum.intent === 'Suicide',
style: {
fill: '#f4cfbb'
},
children: [
{
query: (datum: typeof data[0]) => datum.sex === 'M',
style: {
fill: '#e3662e'
}
}
]
}
]
},
{
sceneDuration: 3000,
animationDuration: 500,
title: [
{
text: '... 超过一半的自杀者是 '
},
{
text: '45岁以上的男性',
fontWeight: 'bold'
}
],
nodes: [
{
query: (datum: typeof data[0]) => datum.intent === 'Suicide',
style: {
fill: '#f4cfbb'
},
children: [
{
query: (datum: typeof data[0]) => datum.sex === 'M' && datum.age >= 45,
style: {
fill: '#e3662e'
}
}
]
}
]
},
{
title: [
{
text: '另外三分之一的枪支死亡——每年约12000人 —— 是 '
},
{
text: '凶杀案',
fontWeight: 'bold'
},
{
text: '.'
}
],
nodes: [
{
query: (datum: typeof data[0]) => datum.intent !== 'Homicide',
style: {
fill: '#dedede'
}
},
{
query: (datum: typeof data[0]) => datum.intent === 'Homicide',
style: {
fill: '#5D76A3'
}
}
]
},
{
title: [
{
text: '超过一半的凶杀案受害者是 '
},
{
text: '年轻男性',
fontWeight: 'bold'
},
{
text: '...'
}
],
nodes: [
{
query: (datum: typeof data[0]) => datum.intent === 'Homicide',
style: {
fill: '#C6CEDF'
},
children: [
{
query: (datum: typeof data[0]) => datum.sex === 'M' && datum.age > 15 && datum.age < 34,
style: {
fill: '#5D76A3'
}
}
]
}
]
},
{
title: [
{
text: '… 其中三分之二是 '
},
{
text: '黑人',
fontWeight: 'bold'
},
{
text: '.'
}
],
nodes: [
{
query: (datum: typeof data[0]) => datum.intent === 'Homicide',
style: {
fill: '#C6CEDF'
},
children: [
{
query: (datum: typeof data[0]) => datum.sex === 'M' && datum.age > 15 && datum.age < 34,
style: {
fill: '#A6B3CC'
},
children: [
{
query: (datum: typeof data[0]) => datum.race === 'Black',
style: {
fill: '#5D76A3'
}
}
]
}
]
}
]
},
{
title: [
{
text: '女性',
fontWeight: 'bold'
},
{
text: ' 成为枪支凶杀案受害者的可能性要小得多,每年约有1700人被杀,其中许多人死于严重的 '
},
{
text: '家庭暴力',
fontWeight: 'bold'
}
],
nodes: [
{
query: (datum: typeof data[0]) => datum.intent === 'Homicide',
style: {
fill: '#C6CEDF'
},
children: [
{
query: (datum: typeof data[0]) => datum.sex === 'F',
style: {
fill: '#5D76A3'
}
}
]
}
]
},
{
title: [
{
text: '其余的枪支死亡是 '
},
{
text: '意外',
fontWeight: 'bold'
},
{
text: '或被归类为未确定。',
fontWeight: 'bold'
}
],
nodes: [
{
style: {
fill: '#dedede'
}
},
{
query: (datum: typeof data[0]) => datum.intent === 'Accidental',
style: {
fill: '#D4BC45'
}
},
{
query: (datum: typeof data[0]) => datum.intent === 'Undetermined',
style: {
fill: '#999999'
}
}
]
},
{
title: [
{
text: '所有这些死亡事件的共同点是枪支。但原因非常不同,这意味着解决方案也会有所不同。\n'
},
{
text: '—— 数据来源美国枪支死亡统计\n',
fontSize: 20,
fill: 'grey',
textAlign: 'right'
}
],
nodes: [
{
query: (datum: typeof data[0]) => datum.intent === 'Suicide',
style: {
fill: '#e3662e'
}
},
{
query: (datum: typeof data[0]) => datum.intent === 'Homicide',
style: {
fill: '#5D76A3'
}
},
{
query: (datum: typeof data[0]) => datum.intent === 'Accidental',
style: {
fill: '#D4BC45'
}
},
{
query: (datum: typeof data[0]) => datum.intent === 'Undetermined',
style: {
fill: '#999999'
}
}
]
}
]
};
const dsl = createUnitTemplate(spec);
console.log(dsl);
return dsl;
}

async function loadDemoDSL() {
const data = new Array(20000)
.fill(0)
Expand Down

0 comments on commit 8f1a159

Please sign in to comment.