From 8f1a15973ca728bf608c8c5724299f60549e67f9 Mon Sep 17 00:00:00 2001 From: zhouxinyu Date: Tue, 10 Dec 2024 18:27:31 +0800 Subject: [PATCH] fix: issue with unit-template animate caused by time --- ...nit-template-animate_2024-12-10-10-27.json | 10 + ...nit-template-animate_2024-12-10-10-27.json | 10 + .../src/unit-template/default.ts | 2 +- .../src/demos/templates/unit-template1.tsx | 339 ------------------ 4 files changed, 21 insertions(+), 340 deletions(-) create mode 100644 common/changes/@visactor/vstory-templates/fix-unit-template-animate_2024-12-10-10-27.json create mode 100644 common/changes/@visactor/vstory/fix-unit-template-animate_2024-12-10-10-27.json diff --git a/common/changes/@visactor/vstory-templates/fix-unit-template-animate_2024-12-10-10-27.json b/common/changes/@visactor/vstory-templates/fix-unit-template-animate_2024-12-10-10-27.json new file mode 100644 index 00000000..7f2eb26b --- /dev/null +++ b/common/changes/@visactor/vstory-templates/fix-unit-template-animate_2024-12-10-10-27.json @@ -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" +} diff --git a/common/changes/@visactor/vstory/fix-unit-template-animate_2024-12-10-10-27.json b/common/changes/@visactor/vstory/fix-unit-template-animate_2024-12-10-10-27.json new file mode 100644 index 00000000..16dd671d --- /dev/null +++ b/common/changes/@visactor/vstory/fix-unit-template-animate_2024-12-10-10-27.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vstory", + "comment": "fix: issue with unit-template animate caused by time", + "type": "none" + } + ], + "packageName": "@visactor/vstory" +} \ No newline at end of file diff --git a/packages/vstory-templates/src/unit-template/default.ts b/packages/vstory-templates/src/unit-template/default.ts index ea2b78dc..9d5387d6 100644 --- a/packages/vstory-templates/src/unit-template/default.ts +++ b/packages/vstory-templates/src/unit-template/default.ts @@ -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 = { diff --git a/packages/vstory/demo/src/demos/templates/unit-template1.tsx b/packages/vstory/demo/src/demos/templates/unit-template1.tsx index af3ddcd9..626acb64 100644 --- a/packages/vstory/demo/src/demos/templates/unit-template1.tsx +++ b/packages/vstory/demo/src/demos/templates/unit-template1.tsx @@ -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)