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: issue with unit-template animate caused by time #141

Merged
merged 1 commit into from
Dec 10, 2024
Merged

fix: issue with unit-template animate caused by time #141

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
10 changes: 10 additions & 0 deletions common/changes/@visactor/vstory-templates/fix-unit-template-animate_2024-12-10-10-27.json
View file
Open in desktop
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"
}
10 changes: 10 additions & 0 deletions common/changes/@visactor/vstory/fix-unit-template-animate_2024-12-10-10-27.json
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Loading