From ac41f560cb60f2dc15d5e65e3d9c2ffe8c109b9f Mon Sep 17 00:00:00 2001 From: zhouxinyu Date: Mon, 23 Dec 2024 22:22:04 +0800 Subject: [PATCH 1/7] feat: enhance vchart animate arrange --- .../feat-arrange_2024-12-23-14-22.json | 10 ++ .../src/character/chart/character-chart.ts | 13 ++- .../vstory-core/src/core/action-processor.ts | 4 +- .../src/interface/action-processor.ts | 2 +- .../src/processor/chart/visibility.ts | 109 ++++++++++++++---- .../processor/component/common/visibility.ts | 2 +- .../component/image/image-visibility.ts | 2 +- .../component/line/line-visibility.ts | 2 +- .../component/rect/rect-visibility.ts | 2 +- .../component/shape/shape-visibility.ts | 2 +- .../component/text/text-visibility.ts | 2 +- packages/vstory/demo/src/App.tsx | 2 +- .../src/demos/{ => arrange}/BarChart2.tsx | 35 ++++-- 13 files changed, 140 insertions(+), 47 deletions(-) create mode 100644 common/changes/@visactor/vstory-core/feat-arrange_2024-12-23-14-22.json rename packages/vstory/demo/src/demos/{ => arrange}/BarChart2.tsx (83%) diff --git a/common/changes/@visactor/vstory-core/feat-arrange_2024-12-23-14-22.json b/common/changes/@visactor/vstory-core/feat-arrange_2024-12-23-14-22.json new file mode 100644 index 00000000..3f4c396d --- /dev/null +++ b/common/changes/@visactor/vstory-core/feat-arrange_2024-12-23-14-22.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vstory-core", + "comment": "feat: enhance vchart animate arrange", + "type": "none" + } + ], + "packageName": "@visactor/vstory-core" +} \ No newline at end of file diff --git a/packages/vstory-core/src/character/chart/character-chart.ts b/packages/vstory-core/src/character/chart/character-chart.ts index 97234311..00c7d0b3 100644 --- a/packages/vstory-core/src/character/chart/character-chart.ts +++ b/packages/vstory-core/src/character/chart/character-chart.ts @@ -95,16 +95,21 @@ export class CharacterChart match: boolean = true ) { if (select[0] === '#') { - return this.selectByName(seriesList, componentsList, select, match); + return this.selectByNameOrUserId(seriesList, componentsList, select, match); } return this.selectByType(seriesList, componentsList, select, match); } - protected selectByName(seriesList: ISeries[], componentsList: IComponent[], select: string, match: boolean = true) { + protected selectByNameOrUserId( + seriesList: ISeries[], + componentsList: IComponent[], + select: string, + match: boolean = true + ) { const name = select.substring(1); return { - seriesList: seriesList.filter(item => (item.name === name) === match), - componentsList: componentsList.filter(item => (item.name === name) === match) + seriesList: seriesList.filter(item => (item.name === name || item.userId === name) === match), + componentsList: componentsList.filter(item => (item.name === name || item.userId === name) === match) }; } diff --git a/packages/vstory-core/src/core/action-processor.ts b/packages/vstory-core/src/core/action-processor.ts index d00ebeb1..5e199eea 100644 --- a/packages/vstory-core/src/core/action-processor.ts +++ b/packages/vstory-core/src/core/action-processor.ts @@ -83,8 +83,8 @@ export class ActionProcessor implements IActionProcessor { applyAppearAttrs(name: string, actionName: string, character: ICharacter, actionSpec: IActionSpec) { const processor = this.getProcessor(name, actionName); - if (processor && processor.applyAttrs) { - return processor.applyAttrs(character, actionSpec); + if (processor && processor.applyAttrsForVisibility) { + return processor.applyAttrsForVisibility(character, actionSpec); } return undefined; } diff --git a/packages/vstory-core/src/interface/action-processor.ts b/packages/vstory-core/src/interface/action-processor.ts index d11b1864..34e80886 100644 --- a/packages/vstory-core/src/interface/action-processor.ts +++ b/packages/vstory-core/src/interface/action-processor.ts @@ -8,7 +8,7 @@ export interface IActionProcessorItem { getStartTimeAndDuration: (action: IActionSpec, character?: ICharacter) => { startTime: number; duration: number }; run: (...actionParams: any) => any; - applyAttrs?: (...actionParams: any) => any; + applyAttrsForVisibility?: (...actionParams: any) => any; } export interface IActionProcessor extends IReleaseable { diff --git a/packages/vstory-player/src/processor/chart/visibility.ts b/packages/vstory-player/src/processor/chart/visibility.ts index edc38483..56fd3e9a 100644 --- a/packages/vstory-player/src/processor/chart/visibility.ts +++ b/packages/vstory-player/src/processor/chart/visibility.ts @@ -15,7 +15,7 @@ import { VChartAddActionProcessor } from './add'; import { CommonStyleActionProcessor } from '../component/common/style'; export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { - name: 'appearOrDisAppear'; + name: 'appearOrDisAppear' = 'appearOrDisAppear'; protected character: ICharacter | null; constructor() { @@ -24,6 +24,15 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { run(character: ICharacter, actionSpec: IChartVisibilityAction): void { super.preRun(character, actionSpec); + this.runOrApplyAttrs(character, actionSpec, { isRun: true }); + } + + applyAttrsForVisibility(character: ICharacter, actionSpec: IChartVisibilityAction): void { + this.runOrApplyAttrs(character, actionSpec, { isRun: false }); + } + + protected runOrApplyAttrs(character: ICharacter, actionSpec: IChartVisibilityAction, params: { isRun?: boolean }) { + const { isRun = true } = params; this.character = character; const vchart = character.graphic._vchart as IVChart; // 基于选择器做筛选 @@ -37,20 +46,20 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { const { chart, seriesList, componentsList, panel } = this.selectBySelector(payload.selector ?? '*', character); if (!runnedChart && chart) { // chart & panel - this.chartVisibility(character.graphic as any, actionSpec.action, payload); + this.chartVisibility(character.graphic as any, actionSpec.action, payload, isRun); } else if (!runnedChart && panel) { // panel - this.panelVisibility(character.graphic as any, actionSpec.action, payload); + this.panelVisibility(character.graphic as any, actionSpec.action, payload, isRun); } // 过滤seriesList const shouldRunSeriesList = seriesList.filter(item => !runnedSeriesSet.has(item)); shouldRunSeriesList.forEach(series => { - this.commonSeriesAppear(vchart, series, actionSpec.action, payload); + this.commonSeriesAppear(vchart, series, actionSpec.action, payload, isRun); }); // 过滤componentsList const shouldRunComponentsList = componentsList.filter(item => !runnedComponentsSet.has(item)); shouldRunComponentsList.forEach(component => { - this.componentAppear(vchart, component, actionSpec.action, payload); + this.componentAppear(vchart, component, actionSpec.action, payload, isRun); }); runnedChart = runnedChart || chart; seriesList.forEach(item => runnedSeriesSet.add(item)); @@ -59,13 +68,29 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { this.character = null; } - protected chartVisibility(chartGraphic: any, action: 'appear' | 'disappear', payload: IChartVisibilityPayload) { + protected chartVisibility( + chartGraphic: any, + action: 'appear' | 'disappear', + payload: IChartVisibilityPayload, + isRun: boolean + ) { + if (!isRun) { + return; + } const appearTransformFunc = transformMap.appear.chart; const defaultPayload = VChartVisibilityActionProcessor.fadePayload; this.runTransformFunc(chartGraphic as any, appearTransformFunc, action, payload, defaultPayload); } - protected panelVisibility(chartGraphic: any, action: 'appear' | 'disappear', payload: IChartVisibilityPayload) { + protected panelVisibility( + chartGraphic: any, + action: 'appear' | 'disappear', + payload: IChartVisibilityPayload, + isRun: boolean + ) { + if (!isRun) { + return; + } const appearTransformFunc = transformMap.appear.panel; const defaultPayload = VChartVisibilityActionProcessor.fadePayload; this.runTransformFunc(chartGraphic as any, appearTransformFunc, action, payload, defaultPayload); @@ -75,16 +100,17 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { vchart: IVChart, component: IComponent, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { if (component.specKey === 'label') { - this.labelComponentAppear(vchart, component, action, payload); + this.labelComponentAppear(vchart, component, action, payload, isRun); } else if (component.specKey === 'legends') { - this.legendsComponentAppear(vchart, component, action, payload); + this.legendsComponentAppear(vchart, component, action, payload, isRun); } else if (component.specKey === 'axes') { - this.axisComponentAppear(vchart, component, action, payload); + this.axisComponentAppear(vchart, component, action, payload, isRun); } else if (component.specKey === 'title') { - this.titleComponentAppear(vchart, component, action, payload); + this.titleComponentAppear(vchart, component, action, payload, isRun); } } @@ -92,13 +118,19 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { vchart: IVChart, component: IComponent, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { const vrenderComponents = component.getVRenderComponents(); const appearTransformFunc = transformMap.appear.label; const defaultPayload = VChartVisibilityActionProcessor.defaultPayload; vrenderComponents.forEach(group => { - this.runTransformFunc(group as any, appearTransformFunc, action, payload, defaultPayload); + if (isRun) { + // group.setAttribute('visibleAll', true); + this.runTransformFunc(group as any, appearTransformFunc, action, payload, defaultPayload); + } else { + group.setAttribute('visibleAll', false); + } }); } @@ -106,13 +138,19 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { vchart: IVChart, component: IComponent, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { const vrenderComponents = component.getVRenderComponents(); const appearTransformFunc = transformMap.appear.legends; const defaultPayload = VChartVisibilityActionProcessor.fadePayload; vrenderComponents.forEach(group => { - this.runTransformFunc(group as any, appearTransformFunc, action, payload, defaultPayload); + if (isRun) { + group.setAttribute('visibleAll', true); + this.runTransformFunc(group as any, appearTransformFunc, action, payload, defaultPayload); + } else { + group.setAttribute('visibleAll', false); + } }); } @@ -120,19 +158,31 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { vchart: IVChart, component: IComponent, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { const vrenderComponents = component.getVRenderComponents(); const axis = vrenderComponents[0]; if (!axis) { return; } + // debugger; + vrenderComponents.forEach(c => { + if (isRun) { + c.setAttribute('visibleAll', true); + } else { + c.setAttribute('visibleAll', false); + } + }); + if (!isRun) { + return; + } const axisGrid = vrenderComponents[1]; const axisOrient = (axis.attribute as AxisBaseAttributes)?.orient; if (axisOrient === 'angle' || axisOrient === 'radius') { - this.polarAxisAppear(axis, axisGrid, action, payload); + this.polarAxisAppear(axis, axisGrid, action, payload, isRun); } else { - this.cartesianAxisAppear(axis, axisGrid, action, payload); + this.cartesianAxisAppear(axis, axisGrid, action, payload, isRun); } } @@ -140,7 +190,8 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { axis: any, axisGrid: any, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { const axisOrient = (axis.attribute as AxisBaseAttributes)?.orient; const axisItems = (axis.attribute as AxisBaseAttributes)?.items ?? [[]]; @@ -165,7 +216,8 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { axis: any, axisGrid: any, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { const axisItems = (axis.attribute as AxisBaseAttributes)?.items ?? [[]]; const appearTransformFunc = transformMap.appear.axis; @@ -182,7 +234,8 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { vchart: IVChart, component: IComponent, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { const vrenderComponents = component.getVRenderComponents(); const appearTransformFunc = transformMap.appear.title; @@ -214,7 +267,8 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { vchart: IVChart, series: ISeries, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { const marks = series.getMarksWithoutRoot(); if (!marks.length) { @@ -223,8 +277,13 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { marks.forEach((mark, markIndex) => { const config = this.getMarkAnimateConfig(vchart, mark, markIndex, action, series, payload); const product = mark.getProduct(); - // @ts-ignore - product && product.animate && product.animate.run(config || {}); + if (isRun) { + // @ts-ignore + product?.graphicItem?.setAttribute('visibleAll', true); + product?.animate?.run(config || {}); + } else { + product?.graphicItem?.setAttribute('visibleAll', false); + } }); } diff --git a/packages/vstory-player/src/processor/component/common/visibility.ts b/packages/vstory-player/src/processor/component/common/visibility.ts index 48309920..4408aeef 100644 --- a/packages/vstory-player/src/processor/component/common/visibility.ts +++ b/packages/vstory-player/src/processor/component/common/visibility.ts @@ -44,7 +44,7 @@ export class CommonVisibilityActionProcessor extends ActionProcessorItem { }); } - applyAttrs(character: ICharacter, actionSpec: IActionSpec): void { + applyAttrsForVisibility(character: ICharacter, actionSpec: IActionSpec): void { const { animation = {}, selector } = getPayload(actionSpec); const { effect = 'default' } = animation as any; array(effect).forEach(_effect => { diff --git a/packages/vstory-player/src/processor/component/image/image-visibility.ts b/packages/vstory-player/src/processor/component/image/image-visibility.ts index 3744f5d7..97212608 100644 --- a/packages/vstory-player/src/processor/component/image/image-visibility.ts +++ b/packages/vstory-player/src/processor/component/image/image-visibility.ts @@ -7,7 +7,7 @@ import { CommonScaleToActionProcessor } from '../common/scale'; import { CommonBounceActionProcessor } from '../common/bounce'; export class ImageVisibilityActionProcessor extends CommonVisibilityActionProcessor { - name: 'appearOrDisAppear'; + name: 'appearOrDisAppear' = 'appearOrDisAppear'; } export function registerImageVisibilityAction() { diff --git a/packages/vstory-player/src/processor/component/line/line-visibility.ts b/packages/vstory-player/src/processor/component/line/line-visibility.ts index e75996c1..dae2ea93 100644 --- a/packages/vstory-player/src/processor/component/line/line-visibility.ts +++ b/packages/vstory-player/src/processor/component/line/line-visibility.ts @@ -7,7 +7,7 @@ import { CommonScaleToActionProcessor } from '../common/scale'; import { CommonBounceActionProcessor } from '../common/bounce'; import { clipRangeInstance } from '../../common/clipRange-processor'; export class LineVisibilityActionProcessor extends CommonVisibilityActionProcessor { - name: 'appearOrDisAppear'; + name: 'appearOrDisAppear' = 'appearOrDisAppear'; getEffectInstance(effect: string, appear: boolean) { switch (effect) { diff --git a/packages/vstory-player/src/processor/component/rect/rect-visibility.ts b/packages/vstory-player/src/processor/component/rect/rect-visibility.ts index 7714a492..88d6a56b 100644 --- a/packages/vstory-player/src/processor/component/rect/rect-visibility.ts +++ b/packages/vstory-player/src/processor/component/rect/rect-visibility.ts @@ -7,7 +7,7 @@ import { CommonScaleToActionProcessor } from '../common/scale'; import { CommonBounceActionProcessor } from '../common/bounce'; export class RectVisibilityActionProcessor extends CommonVisibilityActionProcessor { - name: 'appearOrDisAppear'; + name: 'appearOrDisAppear' = 'appearOrDisAppear'; } export function registerRectVisibilityAction() { diff --git a/packages/vstory-player/src/processor/component/shape/shape-visibility.ts b/packages/vstory-player/src/processor/component/shape/shape-visibility.ts index ae4c498b..b29407b0 100644 --- a/packages/vstory-player/src/processor/component/shape/shape-visibility.ts +++ b/packages/vstory-player/src/processor/component/shape/shape-visibility.ts @@ -8,7 +8,7 @@ import { CommonBounceActionProcessor } from '../common/bounce'; import { clipRangeInstance } from '../../common/clipRange-processor'; export class ShapeVisibilityActionProcessor extends CommonVisibilityActionProcessor { - name: 'appearOrDisAppear'; + name: 'appearOrDisAppear' = 'appearOrDisAppear'; getEffectInstance(effect: string, appear: boolean) { switch (effect) { diff --git a/packages/vstory-player/src/processor/component/text/text-visibility.ts b/packages/vstory-player/src/processor/component/text/text-visibility.ts index 740b5674..4db28830 100644 --- a/packages/vstory-player/src/processor/component/text/text-visibility.ts +++ b/packages/vstory-player/src/processor/component/text/text-visibility.ts @@ -47,7 +47,7 @@ export class TypeWriterVisibility extends BaseVisibility { const typewriterIn = new TypeWriterVisibility(); export class TextVisibilityActionProcessor extends CommonVisibilityActionProcessor { - name: 'appearOrDisAppear'; + name: 'appearOrDisAppear' = 'appearOrDisAppear'; constructor() { super(); } diff --git a/packages/vstory/demo/src/App.tsx b/packages/vstory/demo/src/App.tsx index 2676a073..7d865cbd 100644 --- a/packages/vstory/demo/src/App.tsx +++ b/packages/vstory/demo/src/App.tsx @@ -16,7 +16,7 @@ import { UnitInfographic } from './demos/works/unit-infographic'; import { VChartSiteDemo } from './demos/works/website/VChartSite'; import { TimelineAnimate } from './demos/component/timeline'; import { BasicUnit } from './demos/component/basic-unit'; -import { BarChart2 } from './demos/BarChart2'; +import { BarChart2 } from './demos/arrange/BarChart2'; import { UnitTemplate1 } from './demos/templates/unit-template1'; import { VScreen } from './demos/works/vscreen'; import { Lottie } from './demos/component/lottie'; diff --git a/packages/vstory/demo/src/demos/BarChart2.tsx b/packages/vstory/demo/src/demos/arrange/BarChart2.tsx similarity index 83% rename from packages/vstory/demo/src/demos/BarChart2.tsx rename to packages/vstory/demo/src/demos/arrange/BarChart2.tsx index 6316cb53..e988f7ac 100644 --- a/packages/vstory/demo/src/demos/BarChart2.tsx +++ b/packages/vstory/demo/src/demos/arrange/BarChart2.tsx @@ -1,6 +1,6 @@ import React, { createRef, useEffect } from 'react'; -import { Player, Story, initVR, registerGraphics, registerCharacters } from '../../../../vstory-core/src'; -import { registerVComponentAction, registerVChartAction } from '../../../../vstory-player/src'; +import { Player, Story, initVR, registerGraphics, registerCharacters } from '../../../../../vstory-core/src'; +import { registerVComponentAction, registerVChartAction } from '../../../../../vstory-player/src'; registerGraphics(); registerCharacters(); @@ -58,7 +58,7 @@ export const BarChart2 = () => { type: 'bar', id: 'bar', dataIndex: 0, - label: { visible: true }, + label: { visible: false }, seriesField: 'type', dataIndex: 0, xField: ['x', 'type'], @@ -68,7 +68,7 @@ export const BarChart2 = () => { type: 'line', id: 'line', dataIndex: 1, - label: { visible: true }, + label: { visible: false }, seriesField: 'type', xField: 'x', yField: 'y', @@ -76,8 +76,14 @@ export const BarChart2 = () => { } ], axes: [ - { orient: 'left', seriesIndex: [0] }, - { orient: 'right', seriesId: ['line'], grid: { visible: false } }, + { + orient: 'left', + id: 'axes-left', + domainLine: { visible: true }, + seriesId: ['line'], + grid: { visible: false } + }, + { orient: 'right', id: 'axes-right', domainLine: { visible: true }, seriesId: ['bar'], seriesIndex: [0] }, { orient: 'bottom', label: { visible: true }, type: 'band' } ], legends: { @@ -94,7 +100,7 @@ export const BarChart2 = () => { position: { top: 50, left: 50, - width: 300, + width: 500, height: 300 }, options: { @@ -125,7 +131,7 @@ export const BarChart2 = () => { action: 'appear', payload: [ { - selector: ':not(bar)', + selector: ':not(bar) :not(#axes-right)', animation: { duration: 2000, easing: 'linear' @@ -146,6 +152,19 @@ export const BarChart2 = () => { } ] }, + { + startTime: 2000, + action: 'appear', + payload: [ + { + selector: '#axes-right', + animation: { + duration: 2000, + easing: 'linear' + } + } + ] + }, { startTime: 5500, action: 'disappear', From b24e1a5c73f070138a27c77ca921348e8ea02e05 Mon Sep 17 00:00:00 2001 From: zhouxinyu Date: Mon, 23 Dec 2024 22:25:47 +0800 Subject: [PATCH 2/7] feat: update vrender vchart version --- common/config/rush/pnpm-config.json | 8 +- common/config/rush/pnpm-lock.yaml | 272 ++++++++++++------------- packages/vstory-animate/package.json | 10 +- packages/vstory-core/package.json | 10 +- packages/vstory-editor/package.json | 10 +- packages/vstory-external/package.json | 10 +- packages/vstory-player/package.json | 10 +- packages/vstory-templates/package.json | 10 +- 8 files changed, 170 insertions(+), 170 deletions(-) diff --git a/common/config/rush/pnpm-config.json b/common/config/rush/pnpm-config.json index dcaed3cd..803bb14d 100644 --- a/common/config/rush/pnpm-config.json +++ b/common/config/rush/pnpm-config.json @@ -89,10 +89,10 @@ * PNPM documentation: https://pnpm.io/package_json#pnpmoverrides */ "globalOverrides": { - // "@visactor/vrender": "0.21.2-vstory.3", - // "@visactor/vrender-core": "0.21.2-vstory.3", - // "@visactor/vrender-kits": "0.21.2-vstory.3", - // "@visactor/vrender-components": "0.21.2-vstory.3", + // "@visactor/vrender": "0.21.5-vstory.1", + // "@visactor/vrender-core": "0.21.5-vstory.1", + // "@visactor/vrender-kits": "0.21.5-vstory.1", + // "@visactor/vrender-components": "0.21.5-vstory.1", // "@visactor/vscale": "0.18.5" // "example2": "npm:@company/example2@^1.0.0" }, diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 75a2f0b5..74a52329 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -138,13 +138,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.1-vstory.3 + '@visactor/vchart': 1.13.2-vstory.1 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.1 + '@visactor/vrender-components': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': ~0.18.17 '@visactor/vstory-core': workspace:0.0.21 '@visactor/vtable': 1.10.1 @@ -163,13 +163,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.1-vstory.3 + '@visactor/vchart': 1.13.2-vstory.1 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.1 + '@visactor/vrender-components': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': 0.18.18 '@visactor/vstory-core': link:../vstory-core '@visactor/vtable': 1.10.1 @@ -213,13 +213,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.1-vstory.3 + '@visactor/vchart': 1.13.2-vstory.1 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.1 + '@visactor/vrender-components': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': ~0.18.17 '@visactor/vtable': 1.10.1 '@visactor/vutils': ~0.18.17 @@ -237,13 +237,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.1-vstory.3 + '@visactor/vchart': 1.13.2-vstory.1 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.1 + '@visactor/vrender-components': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': 0.18.18 '@visactor/vtable': 1.10.1 '@visactor/vutils': 0.18.18 @@ -286,13 +286,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.1-vstory.3 + '@visactor/vchart': 1.13.2-vstory.1 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.1 + '@visactor/vrender-components': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': ~0.18.17 '@visactor/vstory-core': workspace:0.0.21 '@visactor/vtable': 1.10.1 @@ -311,13 +311,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.1-vstory.3 + '@visactor/vchart': 1.13.2-vstory.1 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.1 + '@visactor/vrender-components': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': 0.18.18 '@visactor/vstory-core': link:../vstory-core '@visactor/vtable': 1.10.1 @@ -361,13 +361,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.1-vstory.3 + '@visactor/vchart': 1.13.2-vstory.1 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.1 + '@visactor/vrender-components': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': ~0.18.17 '@visactor/vstory-animate': workspace:0.0.21 '@visactor/vstory-core': workspace:0.0.21 @@ -388,13 +388,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.1-vstory.3 + '@visactor/vchart': 1.13.2-vstory.1 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.1 + '@visactor/vrender-components': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': 0.18.18 '@visactor/vstory-animate': link:../vstory-animate '@visactor/vstory-core': link:../vstory-core @@ -440,13 +440,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.1-vstory.3 + '@visactor/vchart': 1.13.2-vstory.1 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.1 + '@visactor/vrender-components': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': ~0.18.17 '@visactor/vstory-animate': workspace:0.0.21 '@visactor/vstory-core': workspace:0.0.21 @@ -466,13 +466,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.1-vstory.3 + '@visactor/vchart': 1.13.2-vstory.1 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.1 + '@visactor/vrender-components': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': 0.18.18 '@visactor/vstory-animate': link:../vstory-animate '@visactor/vstory-core': link:../vstory-core @@ -517,13 +517,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.1-vstory.3 + '@visactor/vchart': 1.13.2-vstory.1 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.1 + '@visactor/vrender-components': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': ~0.18.17 '@visactor/vstory-core': workspace:0.0.21 '@visactor/vtable': 1.10.1 @@ -542,13 +542,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.1-vstory.3 + '@visactor/vchart': 1.13.2-vstory.1 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.1 + '@visactor/vrender-components': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': 0.18.18 '@visactor/vstory-core': link:../vstory-core '@visactor/vtable': 1.10.1 @@ -3720,24 +3720,24 @@ packages: '@visactor/vutils': 0.18.18 dev: false - /@visactor/vchart/1.13.1-vstory.3: - resolution: {integrity: sha512-15IDx6VH1W9PHCUbQiYEZSiS5kIIP0VxgBCV65A7pGj61+QXCJBfTpjQmxthrfeUo5dQa4FAy3TY8tlw/7161g==} + /@visactor/vchart/1.13.2-vstory.1: + resolution: {integrity: sha512-pUj8oo6xye0oh1DsCnfW6juZjDlEBFPbmtyZptCiJpIDD6yWliNVObYLqQZ1k3+IB1/yxukUV4H0m6QWb9doFA==} dependencies: '@visactor/vdataset': 0.19.2 - '@visactor/vgrammar-core': 0.15.1-vstory.3 - '@visactor/vgrammar-hierarchy': 0.15.1-vstory.3 - '@visactor/vgrammar-projection': 0.15.1-vstory.3 - '@visactor/vgrammar-sankey': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 - '@visactor/vgrammar-venn': 0.15.1-vstory.3 - '@visactor/vgrammar-wordcloud': 0.15.1-vstory.3 - '@visactor/vgrammar-wordcloud-shape': 0.15.1-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vgrammar-core': 0.15.2-vstory.1 + '@visactor/vgrammar-hierarchy': 0.15.2-vstory.1 + '@visactor/vgrammar-projection': 0.15.2-vstory.1 + '@visactor/vgrammar-sankey': 0.15.2-vstory.1 + '@visactor/vgrammar-util': 0.15.2-vstory.1 + '@visactor/vgrammar-venn': 0.15.2-vstory.1 + '@visactor/vgrammar-wordcloud': 0.15.2-vstory.1 + '@visactor/vgrammar-wordcloud-shape': 0.15.2-vstory.1 + '@visactor/vrender-components': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': 0.19.2 '@visactor/vutils': 0.19.2 - '@visactor/vutils-extension': 1.13.1-vstory.3 + '@visactor/vutils-extension': 1.13.2-vstory.1 dev: false /@visactor/vdataset/0.18.18: @@ -3784,90 +3784,90 @@ packages: topojson-client: 3.1.0 dev: false - /@visactor/vgrammar-coordinate/0.15.1-vstory.3: - resolution: {integrity: sha512-VLBaOytdBLBfvXZRewWme+AYMKNOpOrri/citrf5oHhSf3/z3raMkpzYh1nNCaSu2jty9Yz1Ax9jNaIDQOTVqA==} + /@visactor/vgrammar-coordinate/0.15.2-vstory.1: + resolution: {integrity: sha512-7kmKPD+FwEgUd716OsilV8YaGttQr69WCx+Xq6zWz48v21R+SUr1yt86OkQvm3xcqptrGT7lDeHeG5kbBAOEBw==} dependencies: - '@visactor/vgrammar-util': 0.15.1-vstory.3 + '@visactor/vgrammar-util': 0.15.2-vstory.1 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-core/0.15.1-vstory.3: - resolution: {integrity: sha512-7NLbQFEbgGILg4xi1htOyQXoImkdfMcFsv47RvXeYK1YBa3+3gG3FMHi8ppS49uNpQxj3rVdTORTmG7LA1e3YQ==} + /@visactor/vgrammar-core/0.15.2-vstory.1: + resolution: {integrity: sha512-bmZdcgqJSnhlCpvbHXm602jPskm+HNB8eJRRsoybk6ImgrxB7GNlHRNfpjXEmjS69KTTICRxvfzAQyu43sL5dQ==} dependencies: '@visactor/vdataset': 0.19.2 - '@visactor/vgrammar-coordinate': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vgrammar-coordinate': 0.15.2-vstory.1 + '@visactor/vgrammar-util': 0.15.2-vstory.1 + '@visactor/vrender-components': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': 0.19.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-hierarchy/0.15.1-vstory.3: - resolution: {integrity: sha512-X59lGl3kedC4gjIOsyLaJggpkQcNmyRqTSnOmZJYsdzKYU8tHbEYE9q9fXT00+McI2K0pM7L4Fy/XuyeU1XmGQ==} + /@visactor/vgrammar-hierarchy/0.15.2-vstory.1: + resolution: {integrity: sha512-vXhgPvvg3J0948a0+IzCxiig/e+fXD15fWQvU03hniX3ST3GHN5KQ0G8/nYX5zYcfjd8CD3doQ7n6eE6LKYxYw==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vgrammar-core': 0.15.2-vstory.1 + '@visactor/vgrammar-util': 0.15.2-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-projection/0.15.1-vstory.3: - resolution: {integrity: sha512-LxJMb2Ak7Ev1w3FNI/yQzbacrmkfx8oiv2K+EaWrFgn+/IXiZRZ1g8FTR0LL4PL/1b2KoBZIDbRg/9w042MYGQ==} + /@visactor/vgrammar-projection/0.15.2-vstory.1: + resolution: {integrity: sha512-zjgbTymcqCc0DNdC5beuu3jpJPptfakfE2Z2JgyrFeqP3h/xak8rSXxuHW1HXWOeyEUnolhck+OVi/6oBEQrnQ==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 + '@visactor/vgrammar-core': 0.15.2-vstory.1 + '@visactor/vgrammar-util': 0.15.2-vstory.1 '@visactor/vutils': 0.19.2 d3-geo: 1.12.1 dev: false - /@visactor/vgrammar-sankey/0.15.1-vstory.3: - resolution: {integrity: sha512-Yfm9jK1xApxduWKE/Y1Pn1Yj64NPuOuq5gCk/dMq+xej83TH+H3nzXqpbspQoUz2+e8SHvwS62Uqf5l+I1mq7Q==} + /@visactor/vgrammar-sankey/0.15.2-vstory.1: + resolution: {integrity: sha512-5/rtpBSSFKZY4uMpTeHtqe17ydAYwo6vTmwDBcrUyPAyxm5eWHCt418n5y4xhk3PZgqE146DvoEgBWL8KSMYHw==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vgrammar-core': 0.15.2-vstory.1 + '@visactor/vgrammar-util': 0.15.2-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-util/0.15.1-vstory.3: - resolution: {integrity: sha512-fods7zFVNiGZiQeTJO1uIuZQq2QHy9ea33b44r70u3SCjGtKWRinISZqrzazeb5YHWLE0+XXU4/1MGPSqKlMmg==} + /@visactor/vgrammar-util/0.15.2-vstory.1: + resolution: {integrity: sha512-5Cszopxo/SlJWvwxb79M6sZgcMWOsAjmbahGKO6K/4cZEyOq7f9jjw4CkDlznhosuMx1LgVxW929ZeUWFPwbmw==} dependencies: - '@visactor/vrender-core': 0.21.2-vstory.3 + '@visactor/vrender-core': 0.21.5-vstory.1 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-venn/0.15.1-vstory.3: - resolution: {integrity: sha512-6oHKsFt9XWc8XHRzAojvrO6y4TwNop6tgtEhZtlhbyZ2Flv47bIUl1CUqiBFQ36XSWY6nt4Z23ufN8l38buptg==} + /@visactor/vgrammar-venn/0.15.2-vstory.1: + resolution: {integrity: sha512-Bj9o7QEMrKgGmbPAvju16HqaODizCFWbfFH8uGSgHTraFkDZPpMPbZVem/0RMFcvAgoXDuusVGc5fS7F0ZOu8g==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vgrammar-core': 0.15.2-vstory.1 + '@visactor/vgrammar-util': 0.15.2-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-wordcloud-shape/0.15.1-vstory.3: - resolution: {integrity: sha512-b8cignTZN10WxiRH3zlucZjOOzN8mYSqTJm2WCBsmVF++qIgFYYr6sSAdyNILxdC8F2hiIwUHC0SJ3+vGE344Q==} + /@visactor/vgrammar-wordcloud-shape/0.15.2-vstory.1: + resolution: {integrity: sha512-qg/U9j4wU700T5tGaUKdiUA5+90xUhAvUYcxYhhfUXGOlvpFjiFCmvpQWkaP6IBC/onTw8sRASseOaVkepAAiA==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vgrammar-core': 0.15.2-vstory.1 + '@visactor/vgrammar-util': 0.15.2-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': 0.19.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-wordcloud/0.15.1-vstory.3: - resolution: {integrity: sha512-UVd0Hh65FTC3Yhy5Btp2lF1QfY6A+ehqf7NMQmcC3nu4ORcx2YoQJAeFYE+7BmUX9XCEAfKkS6mPKWRe9cFU5g==} + /@visactor/vgrammar-wordcloud/0.15.2-vstory.1: + resolution: {integrity: sha512-uS2k/47CVjYDnzYzb9Ec7ZnHfSMp2kc5dGuK3ySZ1l1Nc5sKdDCcUneVPck1bt5GsHte7C5wS0BvplSEMe86Mw==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vgrammar-core': 0.15.2-vstory.1 + '@visactor/vgrammar-util': 0.15.2-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vutils': 0.19.2 dev: false @@ -3880,11 +3880,11 @@ packages: '@visactor/vutils': 0.18.18 dev: false - /@visactor/vrender-components/0.21.2-vstory.3: - resolution: {integrity: sha512-9tpEUsTedESg6h5XSAOFcmqxP/sMbkxIqPmWwZVJreoFxUp+qjMSuUMCSpd1Bvdc3+LiMmI5hR+JTK0jpzDCdg==} + /@visactor/vrender-components/0.21.5-vstory.1: + resolution: {integrity: sha512-V4lDp/VYW0q+veuAksMmbCpPeHTvcTituDeIDkd09yGQDn4bCdhOX5/E5NBkdOdFxUv8c1GfJFYlD8QQ8gtvNg==} dependencies: - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 '@visactor/vscale': 0.19.2 '@visactor/vutils': 0.19.2 dev: false @@ -3903,8 +3903,8 @@ packages: color-convert: 2.0.1 dev: false - /@visactor/vrender-core/0.21.2-vstory.3: - resolution: {integrity: sha512-YMR/fExUZgr6/E7e0V9OzvoJVd9A6rfQLtcoXI1QL8SfO19+lR9tRpRq20qQoRgfV5A+rxel/dPEHrvxclq49g==} + /@visactor/vrender-core/0.21.5-vstory.1: + resolution: {integrity: sha512-/P48Pm2SCssJHrCtmo8EWbAQZzKdSK+IAx3DSUg0ftriZ6xYp0eGa0UAeQtbKK/ZnMh46WoVFpVz/dLD9wST1w==} dependencies: '@visactor/vutils': 0.19.2 color-convert: 2.0.1 @@ -3929,21 +3929,21 @@ packages: roughjs: 4.5.2 dev: false - /@visactor/vrender-kits/0.21.2-vstory.3: - resolution: {integrity: sha512-mWYClwyIWOMzMLJFVNJrKrks5fr3yeNrNEF0twRyOaDtHRxKsJBSyeshum2MZJd3YA0fFiYvTEX6BscfthRhAg==} + /@visactor/vrender-kits/0.21.5-vstory.1: + resolution: {integrity: sha512-qSktr/7ZYQ9SsCkQgNFce3sfhvWxMyQ22RZfSff/OV5zZeNstQx6jmOu3N3iIAijPYLTF9CiZuRWvaqQYTRrGg==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.21.2-vstory.3 + '@visactor/vrender-core': 0.21.5-vstory.1 '@visactor/vutils': 0.19.2 lottie-web: 5.12.2 roughjs: 4.5.2 dev: false - /@visactor/vrender/0.21.2-vstory.3: - resolution: {integrity: sha512-my+sLFDzBFGojPrgvktjunNEzqfZXsQEwlx+Srn5d7CLjQbrpB46JTwOu56I1ORKGe314hrsynbfGAuWyM0lCg==} + /@visactor/vrender/0.21.5-vstory.1: + resolution: {integrity: sha512-3RG/hE4kQyb7QsNEbFrD27xa/J6YXy/gC+mVlLoBBRfwONAWMYTiQbgT329b6n6UsmGpAIoB1+XSBh0XSBms+A==} dependencies: - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-kits': 0.21.5-vstory.1 dev: false /@visactor/vscale/0.18.18: @@ -3983,8 +3983,8 @@ packages: '@visactor/vutils': 0.18.18 dev: false - /@visactor/vutils-extension/1.13.1-vstory.3: - resolution: {integrity: sha512-+sNToW0zqMyrQRsd7CDWSc4uuDXk86z8VOdI4UfsCxxCFJhuK4oBN+dkzZ8o71MIi36uLSRjnQzk0UrW3qo7xA==} + /@visactor/vutils-extension/1.13.2-vstory.1: + resolution: {integrity: sha512-uqYZoIN9fEV+vNlxAFaUimHl5IhqYLcnDTHHrcd0UPKnuzKa7cRA+yV3T+FJwGrmVjrbBlJOKmkIaexC0BVUjA==} dependencies: '@visactor/vdataset': 0.19.2 '@visactor/vutils': 0.19.2 diff --git a/packages/vstory-animate/package.json b/packages/vstory-animate/package.json index 3e3ecd70..46000013 100644 --- a/packages/vstory-animate/package.json +++ b/packages/vstory-animate/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.1-vstory.3", + "@visactor/vchart": "1.13.2-vstory.1", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.3", - "@visactor/vrender-core": "0.21.2-vstory.3", - "@visactor/vrender-kits": "0.21.2-vstory.3", - "@visactor/vrender-components": "0.21.2-vstory.3", + "@visactor/vrender": "0.21.5-vstory.1", + "@visactor/vrender-core": "0.21.5-vstory.1", + "@visactor/vrender-kits": "0.21.5-vstory.1", + "@visactor/vrender-components": "0.21.5-vstory.1", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory-core/package.json b/packages/vstory-core/package.json index ac5544e1..ab5bc844 100644 --- a/packages/vstory-core/package.json +++ b/packages/vstory-core/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.1-vstory.3", + "@visactor/vchart": "1.13.2-vstory.1", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.3", - "@visactor/vrender-core": "0.21.2-vstory.3", - "@visactor/vrender-kits": "0.21.2-vstory.3", - "@visactor/vrender-components": "0.21.2-vstory.3", + "@visactor/vrender": "0.21.5-vstory.1", + "@visactor/vrender-core": "0.21.5-vstory.1", + "@visactor/vrender-kits": "0.21.5-vstory.1", + "@visactor/vrender-components": "0.21.5-vstory.1", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory-editor/package.json b/packages/vstory-editor/package.json index 38daa120..e06160fd 100644 --- a/packages/vstory-editor/package.json +++ b/packages/vstory-editor/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.1-vstory.3", + "@visactor/vchart": "1.13.2-vstory.1", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.3", - "@visactor/vrender-core": "0.21.2-vstory.3", - "@visactor/vrender-kits": "0.21.2-vstory.3", - "@visactor/vrender-components": "0.21.2-vstory.3", + "@visactor/vrender": "0.21.5-vstory.1", + "@visactor/vrender-core": "0.21.5-vstory.1", + "@visactor/vrender-kits": "0.21.5-vstory.1", + "@visactor/vrender-components": "0.21.5-vstory.1", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory-external/package.json b/packages/vstory-external/package.json index 6b903908..3f2b386b 100644 --- a/packages/vstory-external/package.json +++ b/packages/vstory-external/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.1-vstory.3", + "@visactor/vchart": "1.13.2-vstory.1", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.3", - "@visactor/vrender-core": "0.21.2-vstory.3", - "@visactor/vrender-kits": "0.21.2-vstory.3", - "@visactor/vrender-components": "0.21.2-vstory.3", + "@visactor/vrender": "0.21.5-vstory.1", + "@visactor/vrender-core": "0.21.5-vstory.1", + "@visactor/vrender-kits": "0.21.5-vstory.1", + "@visactor/vrender-components": "0.21.5-vstory.1", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory-player/package.json b/packages/vstory-player/package.json index 7a12a2a5..44d9acb6 100644 --- a/packages/vstory-player/package.json +++ b/packages/vstory-player/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.1-vstory.3", + "@visactor/vchart": "1.13.2-vstory.1", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.3", - "@visactor/vrender-core": "0.21.2-vstory.3", - "@visactor/vrender-kits": "0.21.2-vstory.3", - "@visactor/vrender-components": "0.21.2-vstory.3", + "@visactor/vrender": "0.21.5-vstory.1", + "@visactor/vrender-core": "0.21.5-vstory.1", + "@visactor/vrender-kits": "0.21.5-vstory.1", + "@visactor/vrender-components": "0.21.5-vstory.1", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory-templates/package.json b/packages/vstory-templates/package.json index 54a3b15e..ca2762f8 100644 --- a/packages/vstory-templates/package.json +++ b/packages/vstory-templates/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.1-vstory.3", + "@visactor/vchart": "1.13.2-vstory.1", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.3", - "@visactor/vrender-core": "0.21.2-vstory.3", - "@visactor/vrender-kits": "0.21.2-vstory.3", - "@visactor/vrender-components": "0.21.2-vstory.3", + "@visactor/vrender": "0.21.5-vstory.1", + "@visactor/vrender-core": "0.21.5-vstory.1", + "@visactor/vrender-kits": "0.21.5-vstory.1", + "@visactor/vrender-components": "0.21.5-vstory.1", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", From 2fe086543c2fd962d0b9b5bceb89bd57376d0938 Mon Sep 17 00:00:00 2001 From: zhouxinyu Date: Tue, 24 Dec 2024 20:58:49 +0800 Subject: [PATCH 3/7] feat: add arrange demo, support line growPoint animate --- .../feat-arrange_2024-12-24-12-59.json | 10 + .../feat-arrange_2024-12-24-12-59.json | 10 + packages/vstory-core/src/core/canvas.ts | 13 +- .../seriesmark/transformLineVisibility.ts | 32 ++ .../src/processor/chart/visibility.ts | 2 +- packages/vstory/demo/src/App.tsx | 10 + packages/vstory/demo/src/demos/API.tsx | 1 + .../demo/src/demos/arrange/BarChart2.tsx | 8 +- .../demo/src/demos/arrange/LineChart.tsx | 369 ++++++++++++++++++ .../demo/src/demos/arrange/PieChart.tsx | 116 ++++++ .../demo/src/demos/infographic/bar-hiv.tsx | 2 + .../infographic/bar-work-in-same-industry.tsx | 2 + .../demos/infographic/big-data-wordcloud.tsx | 2 + .../demo/src/demos/infographic/cancer-usa.tsx | 2 + .../demo/src/demos/infographic/dapanji.tsx | 2 + .../src/demos/infographic/famous-travel.tsx | 2 + .../src/demos/infographic/infographic.tsx | 2 + .../demo/src/demos/infographic/insta.tsx | 2 + .../demos/infographic/marking-wordcloud.tsx | 2 + .../src/demos/infographic/project-goal.tsx | 2 + .../src/demos/infographic/ready-to-eat.tsx | 2 + .../source-of-new-contacts-area-chart.tsx | 2 + .../src/demos/works/website/VChartSite.tsx | 8 +- 23 files changed, 592 insertions(+), 11 deletions(-) create mode 100644 common/changes/@visactor/vstory-animate/feat-arrange_2024-12-24-12-59.json create mode 100644 common/changes/@visactor/vstory-core/feat-arrange_2024-12-24-12-59.json create mode 100644 packages/vstory/demo/src/demos/arrange/LineChart.tsx create mode 100644 packages/vstory/demo/src/demos/arrange/PieChart.tsx diff --git a/common/changes/@visactor/vstory-animate/feat-arrange_2024-12-24-12-59.json b/common/changes/@visactor/vstory-animate/feat-arrange_2024-12-24-12-59.json new file mode 100644 index 00000000..402e53ee --- /dev/null +++ b/common/changes/@visactor/vstory-animate/feat-arrange_2024-12-24-12-59.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vstory-animate", + "comment": "feat: add arrange demo, support line growPoint animate", + "type": "none" + } + ], + "packageName": "@visactor/vstory-animate" +} \ No newline at end of file diff --git a/common/changes/@visactor/vstory-core/feat-arrange_2024-12-24-12-59.json b/common/changes/@visactor/vstory-core/feat-arrange_2024-12-24-12-59.json new file mode 100644 index 00000000..20ed9eed --- /dev/null +++ b/common/changes/@visactor/vstory-core/feat-arrange_2024-12-24-12-59.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vstory-core", + "comment": "feat: add arrange demo, support line growPoint animate", + "type": "none" + } + ], + "packageName": "@visactor/vstory-core" +} \ No newline at end of file diff --git a/packages/vstory-core/src/core/canvas.ts b/packages/vstory-core/src/core/canvas.ts index 3b53f334..6bb59ade 100644 --- a/packages/vstory-core/src/core/canvas.ts +++ b/packages/vstory-core/src/core/canvas.ts @@ -40,6 +40,7 @@ export class StoryCanvas implements IStoryCanvas { ) { this._story = story; this._container = params.container; + this._canvas = params.canvas as any; const { canvas, @@ -127,8 +128,16 @@ export class StoryCanvas implements IStoryCanvas { if (!Number.isFinite(width) || !Number.isFinite(height)) { scaleX = scaleY = 1; } else { - const clipWidth = this._container ? this._container.clientWidth : this._canvas.width / this.getDpr(); - const clipHeight = this._container ? this._container.clientHeight : this._canvas.height / this.getDpr(); + const clipWidth = this._container + ? this._container.clientWidth + : this._canvas?.width / vglobal.devicePixelRatio; + const clipHeight = this._container + ? this._container.clientHeight + : this._canvas?.height / vglobal.devicePixelRatio; + if (!isValidNumber(clipWidth) || !isValidNumber(clipHeight)) { + scaleX = scaleY = 1; + return { scaleX, scaleY, width, height }; + } const clipAspectRatio = clipWidth / clipHeight; const contentAspectRatio = width / height; diff --git a/packages/vstory-player/src/processor/chart/transformFunc/seriesmark/transformLineVisibility.ts b/packages/vstory-player/src/processor/chart/transformFunc/seriesmark/transformLineVisibility.ts index 69e5308e..0236710b 100644 --- a/packages/vstory-player/src/processor/chart/transformFunc/seriesmark/transformLineVisibility.ts +++ b/packages/vstory-player/src/processor/chart/transformFunc/seriesmark/transformLineVisibility.ts @@ -1,6 +1,35 @@ import type VChart from '@visactor/vchart'; import { commonFade, commonGrow } from './commonTransformMarkAppear'; import type { IChartVisibilityPayload } from '../../interface'; +import type { ICharacter } from '@visactor/vstory-core'; +import { getCustomParams } from './utils'; + +export const growPoints = ( + instance: VChart, + animation: IChartVisibilityPayload['animation'], + option: { markIndex: number; disappear: boolean; character?: ICharacter } +) => { + const { duration, oneByOne, easing } = getCustomParams( + animation, + animation.delayPerTime ?? 30, + animation.enterPerTime ?? 200 + ); + const { params = {} } = animation; + const { disappear, character } = option; + if (disappear || !character) { + return commonFade(instance, animation, option); + } + + return { + type: params.direction === 'horizontal' ? 'growPointsXIn' : 'growPointsYIn', + options: { + orient: params.direction === 'horizontal' ? 'positive' : 'negative' + }, + duration, + oneByOne, + easing + }; +}; export const transformLineVisibility = ( instance: VChart, @@ -14,6 +43,9 @@ export const transformLineVisibility = ( case 'fade': { return commonFade(instance, animation, option); } + case 'growPoints': { + return growPoints(instance, animation, option); + } default: { return commonFade(instance, animation, option); } diff --git a/packages/vstory-player/src/processor/chart/visibility.ts b/packages/vstory-player/src/processor/chart/visibility.ts index 56fd3e9a..fa058a0c 100644 --- a/packages/vstory-player/src/processor/chart/visibility.ts +++ b/packages/vstory-player/src/processor/chart/visibility.ts @@ -141,7 +141,7 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { payload: IChartVisibilityPayload, isRun: boolean ) { - const vrenderComponents = component.getVRenderComponents(); + const vrenderComponents = component.getVRenderComponents().filter((item: any) => !!item); const appearTransformFunc = transformMap.appear.legends; const defaultPayload = VChartVisibilityActionProcessor.fadePayload; vrenderComponents.forEach(group => { diff --git a/packages/vstory/demo/src/App.tsx b/packages/vstory/demo/src/App.tsx index 7d865cbd..9882adea 100644 --- a/packages/vstory/demo/src/App.tsx +++ b/packages/vstory/demo/src/App.tsx @@ -48,6 +48,8 @@ import { MarketingWordcloud } from './demos/infographic/marking-wordcloud'; // VchartEditor Runtime import { RuntimeSeriesMark } from './demos/runtime/series-mark'; import { RuntimeLabelStyle } from './demos/runtime/label-style'; +import { LineChartArrange } from './demos/arrange/LineChart'; +import { PieChart } from './demos/arrange/PieChart'; type MenusType = ( | { @@ -99,6 +101,14 @@ const App = () => { name: 'BarChart1', component: BarChart1 }, + { + name: 'LineChartArrange', + component: LineChartArrange + }, + { + name: 'PieChart', + component: PieChart + }, { name: 'BarChart2', component: BarChart2 diff --git a/packages/vstory/demo/src/demos/API.tsx b/packages/vstory/demo/src/demos/API.tsx index 7b4c2fc1..26cc9a4c 100644 --- a/packages/vstory/demo/src/demos/API.tsx +++ b/packages/vstory/demo/src/demos/API.tsx @@ -14,6 +14,7 @@ export const API = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + container?.appendChild(canvas); const story = new Story(null, { canvas, width: 800, height: 500, background: 'pink' }); diff --git a/packages/vstory/demo/src/demos/arrange/BarChart2.tsx b/packages/vstory/demo/src/demos/arrange/BarChart2.tsx index e988f7ac..8011e842 100644 --- a/packages/vstory/demo/src/demos/arrange/BarChart2.tsx +++ b/packages/vstory/demo/src/demos/arrange/BarChart2.tsx @@ -140,26 +140,26 @@ export const BarChart2 = () => { ] }, { - startTime: 2000, + startTime: 3000, action: 'appear', payload: [ { selector: 'bar', animation: { - duration: 2000, + duration: 800, easing: 'linear' } } ] }, { - startTime: 2000, + startTime: 3000, action: 'appear', payload: [ { selector: '#axes-right', animation: { - duration: 2000, + duration: 800, easing: 'linear' } } diff --git a/packages/vstory/demo/src/demos/arrange/LineChart.tsx b/packages/vstory/demo/src/demos/arrange/LineChart.tsx new file mode 100644 index 00000000..78c3a7fa --- /dev/null +++ b/packages/vstory/demo/src/demos/arrange/LineChart.tsx @@ -0,0 +1,369 @@ +import React, { createRef, useEffect } from 'react'; +import { Player, Story, initVR, registerGraphics, registerCharacters } from '../../../../../vstory-core/src'; +import { registerVComponentAction, registerVChartAction } from '../../../../../vstory-player/src'; + +registerGraphics(); +registerCharacters(); +registerVChartAction(); +registerVComponentAction(); +initVR(); + +export const LineChartArrange = () => { + const id = 'LineChartArrange'; + + useEffect(() => { + const container = document.getElementById(id); + const canvas = document.createElement('canvas'); + container?.appendChild(canvas); + + const USA = [ + { + type: 'Nail polish', + country: 'USA', + value: 12814 + }, + { + type: 'Eyebrow pencil', + country: 'USA', + value: 13012 + }, + { + type: 'Rouge', + country: 'USA', + value: 11624 + }, + { + type: 'Lipstick', + country: 'USA', + value: 8814 + }, + { + type: 'Eyeshadows', + country: 'USA', + value: 12998 + }, + { + type: 'Eyeliner', + country: 'USA', + value: 12321 + }, + { + type: 'Foundation', + country: 'USA', + value: 10342 + }, + { + type: 'Lip gloss', + country: 'USA', + value: 22998 + }, + { + type: 'Mascara', + country: 'USA', + value: 11261 + } + ].map(item => ({ ...item, value: 1000 + Math.random() * 1000 })); + + const EU = [ + { + type: 'Nail polish', + country: 'EU', + value: 4376 + }, + { + type: 'Eyebrow pencil', + country: 'EU', + value: 3987 + }, + { + type: 'Rouge', + country: 'EU', + value: 3574 + }, + { + type: 'Lipstick', + country: 'EU', + value: 4376 + }, + { + type: 'Eyeshadows', + country: 'EU', + value: 4572 + }, + { + type: 'Eyeliner', + country: 'EU', + value: 3417 + }, + { + type: 'Foundation', + country: 'EU', + value: 5231 + }, + { + type: 'Lip gloss', + country: 'EU', + value: 4572 + }, + { + type: 'Mascara', + country: 'EU', + value: 6134 + } + ].map(item => ({ ...item, value: 2000 + Math.random() * 1000 })); + + const China = [ + { + type: 'Nail polish', + country: 'China', + value: 3054 + }, + { + type: 'Eyebrow pencil', + country: 'China', + value: 5067 + }, + { + type: 'Rouge', + country: 'China', + value: 7004 + }, + { + type: 'Lipstick', + country: 'China', + value: 9054 + }, + { + type: 'Eyeshadows', + country: 'China', + value: 12043 + }, + { + type: 'Eyeliner', + country: 'China', + value: 15067 + }, + { + type: 'Foundation', + country: 'China', + value: 10119 + }, + { + type: 'Lip gloss', + country: 'China', + value: 12043 + }, + { + type: 'Mascara', + country: 'China', + value: 10419 + } + ].map(item => ({ ...item, value: 3000 + Math.random() * 1000 })); + + const Africa = [ + { + type: 'Nail polish', + country: 'Africa', + value: 4229 + }, + { + type: 'Eyebrow pencil', + country: 'Africa', + value: 3932 + }, + { + type: 'Rouge', + country: 'Africa', + value: 5221 + }, + { + type: 'Lipstick', + country: 'Africa', + value: 9256 + }, + { + type: 'Eyeshadows', + country: 'Africa', + value: 3308 + }, + { + type: 'Eyeliner', + country: 'Africa', + value: 5432 + }, + { + type: 'Foundation', + country: 'Africa', + value: 13701 + }, + { + type: 'Lip gloss', + country: 'Africa', + value: 4008 + }, + { + type: 'Mascara', + country: 'Africa', + value: 18712 + } + ].map(item => ({ ...item, value: 4000 + Math.random() * 1000 })); + + const spec = { + type: 'common', + series: [USA, EU, China, Africa].map((item, i) => ({ + type: 'line', + id: 'line' + i, + data: { + id: '' + i, + values: item + }, + point: { + visible: false + }, + xField: 'type', + yField: 'value' + })), + axes: [ + { + orient: 'left', + type: 'linear' + }, + { + orient: 'bottom', + type: 'band' + } + ] + }; + + console.log(spec); + + const dsl = { + characters: [ + { + type: 'VChart', + id: 'bar-line-series', + position: { + top: 50, + left: 50, + width: 500, + height: 300 + }, + options: { + spec, + panel: { + fill: '#ffffff', + shadowColor: 'rgba(0, 0, 0, 0.05)', + shadowBlur: 10, + shadowOffsetX: 4, + shadowOffsetY: 4, + cornerRadius: 8 + } + } + } + ], + acts: [ + { + id: 'default-chapter', + scenes: [ + { + id: 'scene0', + actions: [ + { + characterId: 'bar-line-series', + characterActions: [ + { + startTime: 0, + action: 'appear', + payload: [ + { + selector: ':not(line)', + animation: { + duration: 1000, + easing: 'linear' + } + } + ] + }, + { + startTime: 0, + action: 'appear', + payload: [ + { + selector: '#line0', + animation: { + duration: 1000, + easing: 'linear' + } + } + ] + }, + { + startTime: 1000, + action: 'appear', + payload: [ + { + selector: '#line1', + animation: { + duration: 1000, + easing: 'linear', + effect: 'fade' + } + } + ] + }, + { + startTime: 2000, + action: 'appear', + payload: [ + { + selector: '#line2', + animation: { + duration: 600, + easing: 'linear', + effect: 'growPoints', + params: { + direction: 'vertical' + } + } + } + ] + }, + { + startTime: 3000, + action: 'appear', + payload: [ + { + selector: '#line3', + animation: { + duration: 600, + easing: 'linear', + effect: 'growPoints', + params: { + direction: 'horizontal' + } + } + } + ] + } + ] + } + ] + } + ] + } + ] + }; + + const story = new Story(dsl, { canvas, width: 800, height: 500, background: 'pink' }); + const player = new Player(story); + story.init(player); + console.log(story); + player.play(0); + + return () => { + story.release(); + }; + }, []); + + return
; +}; diff --git a/packages/vstory/demo/src/demos/arrange/PieChart.tsx b/packages/vstory/demo/src/demos/arrange/PieChart.tsx new file mode 100644 index 00000000..d8c643f9 --- /dev/null +++ b/packages/vstory/demo/src/demos/arrange/PieChart.tsx @@ -0,0 +1,116 @@ +import React, { createRef, useEffect } from 'react'; +import { Player, Story, initVR, registerGraphics, registerCharacters } from '../../../../../vstory-core/src'; +import { registerVComponentAction, registerVChartAction } from '../../../../../vstory-player/src'; +import { exportVideo } from '../utils'; + +registerGraphics(); +registerCharacters(); +registerVChartAction(); +registerVComponentAction(); +initVR(); + +export const PieChart = () => { + const id = 'PieChart'; + + useEffect(() => { + const container = document.getElementById(id); + const canvas = document.createElement('canvas'); + container?.appendChild(canvas); + + const spec = { + type: 'pie', + background: 'transparent', + data: [ + { + id: 'id0', + values: [ + { type: 'oxygen', value: '46.60' }, + { type: 'silicon', value: '27.72' }, + { type: 'aluminum', value: '8.13' }, + { type: 'iron', value: '5' }, + { type: 'calcium', value: '3.63' }, + { type: 'sodium', value: '2.83' }, + { type: 'potassium', value: '2.59' }, + { type: 'others', value: '3.5' } + ] + } + ], + outerRadius: 0.8, + innerRadius: 0.6, + valueField: 'value', + categoryField: 'type', + animation: false, + label: { + visible: true, + animation: false, + animationAppear: false, + style: { + fill: 'red' + } + } + }; + + const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: '0', + characterActions: [ + { + action: 'appear', + startTime: 0, + payload: { + animation: { + duration: 1000, + easing: 'cubicOut', + fade: { + opacity: 1, + easing: 'linear' + } + } + } + } + ] + } + ] + } + ] + } + ], + characters: [ + { + type: 'VChart', + id: `0`, + zIndex: 1, + position: { + top: 0, + left: 0, + width: 600, + height: 600 + }, + options: { + spec + } + } + ] + }; + + const story = new Story(dsl, { canvas, width: 600, height: 600, background: 'transparent' }); + const player = new Player(story); + story.init(player); + console.log(story); + player.play(0); + exportVideo(story); + + return () => { + story.release(); + }; + }, []); + + return
; +}; diff --git a/packages/vstory/demo/src/demos/infographic/bar-hiv.tsx b/packages/vstory/demo/src/demos/infographic/bar-hiv.tsx index d4aa89d6..97a27715 100644 --- a/packages/vstory/demo/src/demos/infographic/bar-hiv.tsx +++ b/packages/vstory/demo/src/demos/infographic/bar-hiv.tsx @@ -8,6 +8,8 @@ export const BarHIV = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const bg = (index: number, fill: string, y: number, height: number, _graphic: any = {}) => { diff --git a/packages/vstory/demo/src/demos/infographic/bar-work-in-same-industry.tsx b/packages/vstory/demo/src/demos/infographic/bar-work-in-same-industry.tsx index 31a57561..495d8da9 100644 --- a/packages/vstory/demo/src/demos/infographic/bar-work-in-same-industry.tsx +++ b/packages/vstory/demo/src/demos/infographic/bar-work-in-same-industry.tsx @@ -8,6 +8,8 @@ export const BarWorkingInSameIndustry = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx b/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx index c1d62893..247abd4d 100644 --- a/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx +++ b/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx @@ -496,6 +496,8 @@ export const BigDataWordCloud = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/infographic/cancer-usa.tsx b/packages/vstory/demo/src/demos/infographic/cancer-usa.tsx index 4f86125f..95307985 100644 --- a/packages/vstory/demo/src/demos/infographic/cancer-usa.tsx +++ b/packages/vstory/demo/src/demos/infographic/cancer-usa.tsx @@ -87,6 +87,8 @@ export const CancerUSA = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); let _story: any; diff --git a/packages/vstory/demo/src/demos/infographic/dapanji.tsx b/packages/vstory/demo/src/demos/infographic/dapanji.tsx index 0fa298ee..46d2b7b7 100644 --- a/packages/vstory/demo/src/demos/infographic/dapanji.tsx +++ b/packages/vstory/demo/src/demos/infographic/dapanji.tsx @@ -8,6 +8,8 @@ export const Dapanji = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/infographic/famous-travel.tsx b/packages/vstory/demo/src/demos/infographic/famous-travel.tsx index 9790ff16..3020062d 100644 --- a/packages/vstory/demo/src/demos/infographic/famous-travel.tsx +++ b/packages/vstory/demo/src/demos/infographic/famous-travel.tsx @@ -8,6 +8,8 @@ export const FamousTravel = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/infographic/infographic.tsx b/packages/vstory/demo/src/demos/infographic/infographic.tsx index bd4c4863..7b1221ea 100644 --- a/packages/vstory/demo/src/demos/infographic/infographic.tsx +++ b/packages/vstory/demo/src/demos/infographic/infographic.tsx @@ -8,6 +8,8 @@ export const Infographic = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/infographic/insta.tsx b/packages/vstory/demo/src/demos/infographic/insta.tsx index ada11983..6800e8e7 100644 --- a/packages/vstory/demo/src/demos/infographic/insta.tsx +++ b/packages/vstory/demo/src/demos/infographic/insta.tsx @@ -8,6 +8,8 @@ export const Insta = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const colors = ['#5C95FF', '#B9E6FF', '#FFA9A3', '#F87575', '#7E6C6C']; diff --git a/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx b/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx index 0303d633..94f0b838 100644 --- a/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx +++ b/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx @@ -8,6 +8,8 @@ export const MarketingWordcloud = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const chartPath = diff --git a/packages/vstory/demo/src/demos/infographic/project-goal.tsx b/packages/vstory/demo/src/demos/infographic/project-goal.tsx index fa3dabb7..9cb89a24 100644 --- a/packages/vstory/demo/src/demos/infographic/project-goal.tsx +++ b/packages/vstory/demo/src/demos/infographic/project-goal.tsx @@ -8,6 +8,8 @@ export const ProjectGoal = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/infographic/ready-to-eat.tsx b/packages/vstory/demo/src/demos/infographic/ready-to-eat.tsx index 75965eed..aac5a5bf 100644 --- a/packages/vstory/demo/src/demos/infographic/ready-to-eat.tsx +++ b/packages/vstory/demo/src/demos/infographic/ready-to-eat.tsx @@ -8,6 +8,8 @@ export const ReadyToEat = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx b/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx index aba0768f..cb47d27b 100644 --- a/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx +++ b/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx @@ -8,6 +8,8 @@ export const AreaChart = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/works/website/VChartSite.tsx b/packages/vstory/demo/src/demos/works/website/VChartSite.tsx index d6bb8cba..a86ef71a 100644 --- a/packages/vstory/demo/src/demos/works/website/VChartSite.tsx +++ b/packages/vstory/demo/src/demos/works/website/VChartSite.tsx @@ -44,10 +44,10 @@ export const VChartSiteDemo = () => { { id: 'default-chapter', scenes: [ - // scene1, - // scene2, - // scene3, - // scene4, + scene1, + scene2, + scene3, + scene4, scene5, scene6, scene7, From ec649b8de9ffc98d4931e7c40da1e7976134fdd6 Mon Sep 17 00:00:00 2001 From: zhouxinyu Date: Wed, 25 Dec 2024 12:02:36 +0800 Subject: [PATCH 4/7] feat: update vrender vchart version --- common/config/rush/pnpm-config.json | 8 +- common/config/rush/pnpm-lock.yaml | 272 +++++++++--------- .../examples/zh/arrange/bar-line-arrange.md | 204 +++++++++++++ .../examples/zh/arrange/line-arrange.md | 197 +++++++++++++ packages/vstory-animate/package.json | 10 +- packages/vstory-core/package.json | 10 +- packages/vstory-editor/package.json | 10 +- packages/vstory-external/package.json | 10 +- packages/vstory-player/package.json | 10 +- packages/vstory-templates/package.json | 10 +- .../demo/src/demos/arrange/LineChart.tsx | 222 ++------------ .../demo/src/demos/works/NationalMemorial.tsx | 4 +- 12 files changed, 604 insertions(+), 363 deletions(-) create mode 100644 docs/assets/examples/zh/arrange/bar-line-arrange.md create mode 100644 docs/assets/examples/zh/arrange/line-arrange.md diff --git a/common/config/rush/pnpm-config.json b/common/config/rush/pnpm-config.json index 803bb14d..e66c6629 100644 --- a/common/config/rush/pnpm-config.json +++ b/common/config/rush/pnpm-config.json @@ -89,10 +89,10 @@ * PNPM documentation: https://pnpm.io/package_json#pnpmoverrides */ "globalOverrides": { - // "@visactor/vrender": "0.21.5-vstory.1", - // "@visactor/vrender-core": "0.21.5-vstory.1", - // "@visactor/vrender-kits": "0.21.5-vstory.1", - // "@visactor/vrender-components": "0.21.5-vstory.1", + // "@visactor/vrender": "0.21.5-vstory.2", + // "@visactor/vrender-core": "0.21.5-vstory.2", + // "@visactor/vrender-kits": "0.21.5-vstory.2", + // "@visactor/vrender-components": "0.21.5-vstory.2", // "@visactor/vscale": "0.18.5" // "example2": "npm:@company/example2@^1.0.0" }, diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 74a52329..a7bd71b5 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -138,13 +138,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.2-vstory.1 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.5-vstory.1 - '@visactor/vrender-components': 0.21.5-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vstory-core': workspace:0.0.21 '@visactor/vtable': 1.10.1 @@ -163,13 +163,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.2-vstory.1 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.5-vstory.1 - '@visactor/vrender-components': 0.21.5-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': 0.18.18 '@visactor/vstory-core': link:../vstory-core '@visactor/vtable': 1.10.1 @@ -213,13 +213,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.2-vstory.1 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.5-vstory.1 - '@visactor/vrender-components': 0.21.5-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vtable': 1.10.1 '@visactor/vutils': ~0.18.17 @@ -237,13 +237,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.2-vstory.1 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.5-vstory.1 - '@visactor/vrender-components': 0.21.5-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': 0.18.18 '@visactor/vtable': 1.10.1 '@visactor/vutils': 0.18.18 @@ -286,13 +286,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.2-vstory.1 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.5-vstory.1 - '@visactor/vrender-components': 0.21.5-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vstory-core': workspace:0.0.21 '@visactor/vtable': 1.10.1 @@ -311,13 +311,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.2-vstory.1 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.5-vstory.1 - '@visactor/vrender-components': 0.21.5-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': 0.18.18 '@visactor/vstory-core': link:../vstory-core '@visactor/vtable': 1.10.1 @@ -361,13 +361,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.2-vstory.1 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.5-vstory.1 - '@visactor/vrender-components': 0.21.5-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vstory-animate': workspace:0.0.21 '@visactor/vstory-core': workspace:0.0.21 @@ -388,13 +388,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.2-vstory.1 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.5-vstory.1 - '@visactor/vrender-components': 0.21.5-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': 0.18.18 '@visactor/vstory-animate': link:../vstory-animate '@visactor/vstory-core': link:../vstory-core @@ -440,13 +440,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.2-vstory.1 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.5-vstory.1 - '@visactor/vrender-components': 0.21.5-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vstory-animate': workspace:0.0.21 '@visactor/vstory-core': workspace:0.0.21 @@ -466,13 +466,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.2-vstory.1 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.5-vstory.1 - '@visactor/vrender-components': 0.21.5-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': 0.18.18 '@visactor/vstory-animate': link:../vstory-animate '@visactor/vstory-core': link:../vstory-core @@ -517,13 +517,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.13.2-vstory.1 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.5-vstory.1 - '@visactor/vrender-components': 0.21.5-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vstory-core': workspace:0.0.21 '@visactor/vtable': 1.10.1 @@ -542,13 +542,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.2-vstory.1 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.5-vstory.1 - '@visactor/vrender-components': 0.21.5-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': 0.18.18 '@visactor/vstory-core': link:../vstory-core '@visactor/vtable': 1.10.1 @@ -3720,24 +3720,24 @@ packages: '@visactor/vutils': 0.18.18 dev: false - /@visactor/vchart/1.13.2-vstory.1: - resolution: {integrity: sha512-pUj8oo6xye0oh1DsCnfW6juZjDlEBFPbmtyZptCiJpIDD6yWliNVObYLqQZ1k3+IB1/yxukUV4H0m6QWb9doFA==} + /@visactor/vchart/1.13.2-vstory.2: + resolution: {integrity: sha512-6rpx6kSeYdQ2W5cz4BAStgVuv9bQErdMjKnmVSP7ipp3syYE53oT9r3aXSpZmqthpPXIRbCwOuT6RUhs44Q0MA==} dependencies: '@visactor/vdataset': 0.19.2 - '@visactor/vgrammar-core': 0.15.2-vstory.1 - '@visactor/vgrammar-hierarchy': 0.15.2-vstory.1 - '@visactor/vgrammar-projection': 0.15.2-vstory.1 - '@visactor/vgrammar-sankey': 0.15.2-vstory.1 - '@visactor/vgrammar-util': 0.15.2-vstory.1 - '@visactor/vgrammar-venn': 0.15.2-vstory.1 - '@visactor/vgrammar-wordcloud': 0.15.2-vstory.1 - '@visactor/vgrammar-wordcloud-shape': 0.15.2-vstory.1 - '@visactor/vrender-components': 0.21.5-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vgrammar-core': 0.15.2-vstory.2 + '@visactor/vgrammar-hierarchy': 0.15.2-vstory.2 + '@visactor/vgrammar-projection': 0.15.2-vstory.2 + '@visactor/vgrammar-sankey': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 + '@visactor/vgrammar-venn': 0.15.2-vstory.2 + '@visactor/vgrammar-wordcloud': 0.15.2-vstory.2 + '@visactor/vgrammar-wordcloud-shape': 0.15.2-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': 0.19.2 '@visactor/vutils': 0.19.2 - '@visactor/vutils-extension': 1.13.2-vstory.1 + '@visactor/vutils-extension': 1.13.2-vstory.2 dev: false /@visactor/vdataset/0.18.18: @@ -3784,90 +3784,90 @@ packages: topojson-client: 3.1.0 dev: false - /@visactor/vgrammar-coordinate/0.15.2-vstory.1: - resolution: {integrity: sha512-7kmKPD+FwEgUd716OsilV8YaGttQr69WCx+Xq6zWz48v21R+SUr1yt86OkQvm3xcqptrGT7lDeHeG5kbBAOEBw==} + /@visactor/vgrammar-coordinate/0.15.2-vstory.2: + resolution: {integrity: sha512-phVtkBEBsr5su5kIiFINXBMDl2XgcLWKEu9m3cihu32YJoiHqGlZTGqrCzgYY46bbj/MubmU06FB2xAGWxDhXg==} dependencies: - '@visactor/vgrammar-util': 0.15.2-vstory.1 + '@visactor/vgrammar-util': 0.15.2-vstory.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-core/0.15.2-vstory.1: - resolution: {integrity: sha512-bmZdcgqJSnhlCpvbHXm602jPskm+HNB8eJRRsoybk6ImgrxB7GNlHRNfpjXEmjS69KTTICRxvfzAQyu43sL5dQ==} + /@visactor/vgrammar-core/0.15.2-vstory.2: + resolution: {integrity: sha512-FYrlvdkdGrCgCIpwzULx3YcxJl1yxUQWNcSWWdbDVPf4WYUNYw7y9LvDRAVbTn20+1aFH30aEuJMxldSDmZUaw==} dependencies: '@visactor/vdataset': 0.19.2 - '@visactor/vgrammar-coordinate': 0.15.2-vstory.1 - '@visactor/vgrammar-util': 0.15.2-vstory.1 - '@visactor/vrender-components': 0.21.5-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vgrammar-coordinate': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': 0.19.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-hierarchy/0.15.2-vstory.1: - resolution: {integrity: sha512-vXhgPvvg3J0948a0+IzCxiig/e+fXD15fWQvU03hniX3ST3GHN5KQ0G8/nYX5zYcfjd8CD3doQ7n6eE6LKYxYw==} + /@visactor/vgrammar-hierarchy/0.15.2-vstory.2: + resolution: {integrity: sha512-dYsJhq5+ZbcjkH9u37qdfNlByjgDEHxqPuK1ix4ChszC66MfZonT/hPBEUn/ayRuYZkoUeI6KJ93Rp8uyaWlDw==} dependencies: - '@visactor/vgrammar-core': 0.15.2-vstory.1 - '@visactor/vgrammar-util': 0.15.2-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vgrammar-core': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-projection/0.15.2-vstory.1: - resolution: {integrity: sha512-zjgbTymcqCc0DNdC5beuu3jpJPptfakfE2Z2JgyrFeqP3h/xak8rSXxuHW1HXWOeyEUnolhck+OVi/6oBEQrnQ==} + /@visactor/vgrammar-projection/0.15.2-vstory.2: + resolution: {integrity: sha512-F8213dlFapGY8/rhGfGzHGRFrxlPuWYVGKx06rHNlJG+tD2Kf7WlVMGDbkEzFsKIDT+vpFko84HmSsjldnq04Q==} dependencies: - '@visactor/vgrammar-core': 0.15.2-vstory.1 - '@visactor/vgrammar-util': 0.15.2-vstory.1 + '@visactor/vgrammar-core': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 '@visactor/vutils': 0.19.2 d3-geo: 1.12.1 dev: false - /@visactor/vgrammar-sankey/0.15.2-vstory.1: - resolution: {integrity: sha512-5/rtpBSSFKZY4uMpTeHtqe17ydAYwo6vTmwDBcrUyPAyxm5eWHCt418n5y4xhk3PZgqE146DvoEgBWL8KSMYHw==} + /@visactor/vgrammar-sankey/0.15.2-vstory.2: + resolution: {integrity: sha512-CHd27lZuhHnKPlRMZdONH2o6/y/5e8OqPqPrKs+I9XKrCCWrIX1VU6HyGRFHKg6+YEVkm0/Qyk2CvEvNEdvDhw==} dependencies: - '@visactor/vgrammar-core': 0.15.2-vstory.1 - '@visactor/vgrammar-util': 0.15.2-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vgrammar-core': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-util/0.15.2-vstory.1: - resolution: {integrity: sha512-5Cszopxo/SlJWvwxb79M6sZgcMWOsAjmbahGKO6K/4cZEyOq7f9jjw4CkDlznhosuMx1LgVxW929ZeUWFPwbmw==} + /@visactor/vgrammar-util/0.15.2-vstory.2: + resolution: {integrity: sha512-DVgHGT2qY9ryjmDBLH5baXXkcRu1BItdvRWTHNXo2QjWHMdi2qWnSWdhsSTu68oRCCTS34hDyphuTLlgL32glA==} dependencies: - '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-venn/0.15.2-vstory.1: - resolution: {integrity: sha512-Bj9o7QEMrKgGmbPAvju16HqaODizCFWbfFH8uGSgHTraFkDZPpMPbZVem/0RMFcvAgoXDuusVGc5fS7F0ZOu8g==} + /@visactor/vgrammar-venn/0.15.2-vstory.2: + resolution: {integrity: sha512-ODSa3KzTcK9OXX9ZShDlGeGsj+wmMAVjg2aNy2rEN7WJMkajysf+fI7q5/YfboQ22H1kF4/3aWZAUqQpyYhWUA==} dependencies: - '@visactor/vgrammar-core': 0.15.2-vstory.1 - '@visactor/vgrammar-util': 0.15.2-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vgrammar-core': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-wordcloud-shape/0.15.2-vstory.1: - resolution: {integrity: sha512-qg/U9j4wU700T5tGaUKdiUA5+90xUhAvUYcxYhhfUXGOlvpFjiFCmvpQWkaP6IBC/onTw8sRASseOaVkepAAiA==} + /@visactor/vgrammar-wordcloud-shape/0.15.2-vstory.2: + resolution: {integrity: sha512-wr2G9sL9aVJuTWthS1VDmALscGoiBJTibJ/AVdZVTbSw25ZaIFUb9Ey8Df/i4BRJp7f8Aa08d1K4lRBozezxbw==} dependencies: - '@visactor/vgrammar-core': 0.15.2-vstory.1 - '@visactor/vgrammar-util': 0.15.2-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vgrammar-core': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': 0.19.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-wordcloud/0.15.2-vstory.1: - resolution: {integrity: sha512-uS2k/47CVjYDnzYzb9Ec7ZnHfSMp2kc5dGuK3ySZ1l1Nc5sKdDCcUneVPck1bt5GsHte7C5wS0BvplSEMe86Mw==} + /@visactor/vgrammar-wordcloud/0.15.2-vstory.2: + resolution: {integrity: sha512-fHLi8ziX7zHT1XBTWt0E3dg1ZVCs8oygKOwvPtYKvqk1LGS+MvrT82wkXpJxYe7YHc6D7lWlaVB5LnnTGRTykw==} dependencies: - '@visactor/vgrammar-core': 0.15.2-vstory.1 - '@visactor/vgrammar-util': 0.15.2-vstory.1 - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vgrammar-core': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vutils': 0.19.2 dev: false @@ -3880,11 +3880,11 @@ packages: '@visactor/vutils': 0.18.18 dev: false - /@visactor/vrender-components/0.21.5-vstory.1: - resolution: {integrity: sha512-V4lDp/VYW0q+veuAksMmbCpPeHTvcTituDeIDkd09yGQDn4bCdhOX5/E5NBkdOdFxUv8c1GfJFYlD8QQ8gtvNg==} + /@visactor/vrender-components/0.21.5-vstory.2: + resolution: {integrity: sha512-K//FVgG+ONqGNb/8cS7EJXfqGtqrS5D9EtKtKOZV4S2ALKcfx3WxAK3zhq11nClrSZSNG540mBcjynj5+yV8mA==} dependencies: - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': 0.19.2 '@visactor/vutils': 0.19.2 dev: false @@ -3903,8 +3903,8 @@ packages: color-convert: 2.0.1 dev: false - /@visactor/vrender-core/0.21.5-vstory.1: - resolution: {integrity: sha512-/P48Pm2SCssJHrCtmo8EWbAQZzKdSK+IAx3DSUg0ftriZ6xYp0eGa0UAeQtbKK/ZnMh46WoVFpVz/dLD9wST1w==} + /@visactor/vrender-core/0.21.5-vstory.2: + resolution: {integrity: sha512-yGnXIQ0PSKHH9yVTCFztmaqoJVlfFBNAzdwv/JyxhFZNM3sZxJaiUK4z0aCbRyrGqoqyM9ucQTR4rtS+B8o9Bg==} dependencies: '@visactor/vutils': 0.19.2 color-convert: 2.0.1 @@ -3929,21 +3929,21 @@ packages: roughjs: 4.5.2 dev: false - /@visactor/vrender-kits/0.21.5-vstory.1: - resolution: {integrity: sha512-qSktr/7ZYQ9SsCkQgNFce3sfhvWxMyQ22RZfSff/OV5zZeNstQx6jmOu3N3iIAijPYLTF9CiZuRWvaqQYTRrGg==} + /@visactor/vrender-kits/0.21.5-vstory.2: + resolution: {integrity: sha512-XCXCoZfare49zEqlReN1iaHFFc0VRErQTCkSezAmB/mQ+TFE9y5BJJWAj390n4K74yjIG7j/5403wjaK3CdLGw==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.2 '@visactor/vutils': 0.19.2 lottie-web: 5.12.2 roughjs: 4.5.2 dev: false - /@visactor/vrender/0.21.5-vstory.1: - resolution: {integrity: sha512-3RG/hE4kQyb7QsNEbFrD27xa/J6YXy/gC+mVlLoBBRfwONAWMYTiQbgT329b6n6UsmGpAIoB1+XSBh0XSBms+A==} + /@visactor/vrender/0.21.5-vstory.2: + resolution: {integrity: sha512-im3v/OjS1M6klG8mDemIyjt6JpxvX8Gkj2/aHVo/Hsrohy7v1h4AzA4GR5IxIRlYyX7rpmmIVBQFUBFXKikGOw==} dependencies: - '@visactor/vrender-core': 0.21.5-vstory.1 - '@visactor/vrender-kits': 0.21.5-vstory.1 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 dev: false /@visactor/vscale/0.18.18: @@ -3983,8 +3983,8 @@ packages: '@visactor/vutils': 0.18.18 dev: false - /@visactor/vutils-extension/1.13.2-vstory.1: - resolution: {integrity: sha512-uqYZoIN9fEV+vNlxAFaUimHl5IhqYLcnDTHHrcd0UPKnuzKa7cRA+yV3T+FJwGrmVjrbBlJOKmkIaexC0BVUjA==} + /@visactor/vutils-extension/1.13.2-vstory.2: + resolution: {integrity: sha512-V+U6DkVkQBmNqE52XoDrZE/9mc3nvxG4f+04volhCSZ/trLYl0baf+qYE/0ejXcLOuEZYu0BZk2snAfMPzhb3Q==} dependencies: '@visactor/vdataset': 0.19.2 '@visactor/vutils': 0.19.2 diff --git a/docs/assets/examples/zh/arrange/bar-line-arrange.md b/docs/assets/examples/zh/arrange/bar-line-arrange.md new file mode 100644 index 00000000..57d52078 --- /dev/null +++ b/docs/assets/examples/zh/arrange/bar-line-arrange.md @@ -0,0 +1,204 @@ +--- +category: examples +group: arrange +title: vchart-arrange +keywords: vchart-arrange +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/vchart-arrange.gif +--- + +# vchart动画编排 + +`VChart`图表组件可以参考[VChart图表元素](/vstory/demo/character/vchart)是一种通用的Character元素，可以配置任意的VChart spec。那么当配置好了一个VChart的spec之后，我们就基于VStory的动画编排能力，去控制该图表不同组件、系列、坐标轴、图例等组件的动画效果。 + +这个demo，我们将演示组合图中柱子、折线、轴之间的编排逻辑。 + +## 代码演示 + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); + +const spec = { + type: 'common', + animation: false, + seriesField: 'color', + data: [ + { + id: 'id0', + values: [ + { x: '周一', type: '早餐', y: 15 }, + { x: '周一', type: '午餐', y: 25 }, + { x: '周二', type: '早餐', y: 12 }, + { x: '周二', type: '午餐', y: 30 }, + { x: '周三', type: '早餐', y: 15 }, + { x: '周三', type: '午餐', y: 24 }, + { x: '周四', type: '早餐', y: 10 }, + { x: '周四', type: '午餐', y: 25 }, + { x: '周五', type: '早餐', y: 13 }, + { x: '周五', type: '午餐', y: 20 }, + { x: '周六', type: '早餐', y: 10 }, + { x: '周六', type: '午餐', y: 22 }, + { x: '周日', type: '早餐', y: 12 }, + { x: '周日', type: '午餐', y: 19 } + ] + }, + { + id: 'id1', + values: [ + { x: '周一', type: '饮料', y: 22 }, + { x: '周二', type: '饮料', y: 43 }, + { x: '周三', type: '饮料', y: 33 }, + { x: '周四', type: '饮料', y: 22 }, + { x: '周五', type: '饮料', y: 10 }, + { x: '周六', type: '饮料', y: 30 }, + { x: '周日', type: '饮料', y: 50 } + ] + } + ], + series: [ + { + type: 'bar', + id: 'bar', + dataIndex: 0, + label: { visible: false }, + seriesField: 'type', + dataIndex: 0, + xField: ['x', 'type'], + yField: 'y' + }, + { + type: 'line', + id: 'line', + dataIndex: 1, + label: { visible: false }, + seriesField: 'type', + xField: 'x', + yField: 'y', + stack: false + } + ], + axes: [ + { + orient: 'left', + id: 'axes-left', + domainLine: { visible: true }, + seriesId: ['line'], + grid: { visible: false } + }, + { orient: 'right', id: 'axes-right', domainLine: { visible: true }, seriesId: ['bar'], seriesIndex: [0] }, + { orient: 'bottom', label: { visible: true }, type: 'band' } + ], + legends: { + visible: true, + orient: 'bottom' + } +}; + +const dsl = { + characters: [ + { + type: 'VChart', + id: 'bar-line-series', + position: { + top: 50, + left: 50, + width: 500, + height: 300 + }, + options: { + spec, + panel: { + fill: '#ffffff', + shadowColor: 'rgba(0, 0, 0, 0.05)', + shadowBlur: 10, + shadowOffsetX: 4, + shadowOffsetY: 4, + cornerRadius: 8 + } + } + } + ], + acts: [ + { + id: 'default-chapter', + scenes: [ + { + id: 'scene0', + actions: [ + { + characterId: 'bar-line-series', + characterActions: [ + { + startTime: 0, + action: 'appear', + payload: [ + { + // 除了柱子和右轴，其他模块执行appear动画 + selector: ':not(bar) :not(#axes-right)', + animation: { + duration: 2000, + easing: 'linear' + } + } + ] + }, + { + startTime: 3000, + action: 'appear', + payload: [ + { + // 柱子执行appear动画 + selector: 'bar', + animation: { + duration: 800, + easing: 'linear' + } + } + ] + }, + { + startTime: 3000, + action: 'appear', + payload: [ + { + // 右轴执行appear动画 + selector: '#axes-right', + animation: { + duration: 800, + easing: 'linear' + } + } + ] + }, + { + startTime: 5500, + action: 'disappear', + payload: { + style: {}, + animation: { + // effect: 'fade', + duration: 1000, + easing: 'linear' + } + } + } + ] + } + ] + } + ] + } + ] +}; + +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const player = new VStory.Player(story); +story.init(player); + +player.play(1); +window.vstory = story; + +window['story'] = story; +window['vstory'] = story; +``` diff --git a/docs/assets/examples/zh/arrange/line-arrange.md b/docs/assets/examples/zh/arrange/line-arrange.md new file mode 100644 index 00000000..61ec229e --- /dev/null +++ b/docs/assets/examples/zh/arrange/line-arrange.md @@ -0,0 +1,197 @@ +--- +category: examples +group: arrange +title: vchart-arrange +keywords: vchart-arrange +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/vchart-arrange.gif +--- + +# 折线图动画编排 + +`VChart`图表组件可以参考[VChart图表元素](/vstory/demo/character/vchart)是一种通用的Character元素，可以配置任意的VChart spec。那么当配置好了一个VChart的spec之后，我们就基于VStory的动画编排能力，去控制该图表不同组件、系列、坐标轴、图例等组件的动画效果。 + +这个demo，我们将演示对多系列折线图里线段动画的编排。 + +## 代码演示 + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); + +const typeList = ['Nail polish', 'Eyebrow pencil', 'Rouge', 'Lipstick', 'Eyeshadows', 'Eyeliner', 'Foundation', 'Lip gloss', 'Mascara']; +const USA = typeList.map((item, i) => ({ + type: item, + country: 'USA', + value: 1000 + Math.random() * 1000 +})); +const EU = typeList.map((item, i) => ({ + type: item, + country: 'EU', + value: 2000 + Math.random() * 1000 +})); +const China = typeList.map((item, i) => ({ + type: item, + country: 'China', + value: 2000 + Math.random() * 1000 +})); +const Africa = typeList.map((item, i) => ({ + type: item, + country: 'Africa', + value: 3000 + Math.random() * 1000 +})); + +const spec = { + type: 'common', + series: [USA, EU, China, Africa].map((item, i) => ({ + type: 'line', + id: 'line' + i, + data: { + id: '' + i, + values: item + }, + point: { + visible: false + }, + xField: 'type', + yField: 'value' + })), + axes: [ + { + orient: 'left', + type: 'linear' + }, + { + orient: 'bottom', + type: 'band' + } + ] +}; + +const dsl = { + characters: [ + { + type: 'VChart', + id: 'bar-line-series', + position: { + top: 50, + left: 50, + width: 500, + height: 300 + }, + options: { + spec, + panel: { + fill: '#ffffff', + shadowColor: 'rgba(0, 0, 0, 0.05)', + shadowBlur: 10, + shadowOffsetX: 4, + shadowOffsetY: 4, + cornerRadius: 8 + } + } + } + ], + acts: [ + { + id: 'default-chapter', + scenes: [ + { + id: 'scene0', + actions: [ + { + characterId: 'bar-line-series', + characterActions: [ + { + startTime: 0, + action: 'appear', + payload: [ + { + selector: ':not(line)', + animation: { + duration: 1000, + easing: 'linear' + } + } + ] + }, + { + startTime: 0, + action: 'appear', + payload: [ + { + selector: '#line0', + animation: { + duration: 1000, + easing: 'linear' + } + } + ] + }, + { + startTime: 1000, + action: 'appear', + payload: [ + { + selector: '#line1', + animation: { + duration: 1000, + easing: 'linear', + effect: 'fade' + } + } + ] + }, + { + startTime: 2000, + action: 'appear', + payload: [ + { + selector: '#line2', + animation: { + duration: 600, + easing: 'linear', + effect: 'growPoints', + params: { + direction: 'vertical' + } + } + } + ] + }, + { + startTime: 3000, + action: 'appear', + payload: [ + { + selector: '#line3', + animation: { + duration: 600, + easing: 'linear', + effect: 'growPoints', + params: { + direction: 'horizontal' + } + } + } + ] + } + ] + } + ] + } + ] + } + ] +}; + +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const player = new VStory.Player(story); +story.init(player); + +player.play(1); +window.vstory = story; + +window['story'] = story; +window['vstory'] = story; +``` diff --git a/packages/vstory-animate/package.json b/packages/vstory-animate/package.json index 46000013..3230a1fb 100644 --- a/packages/vstory-animate/package.json +++ b/packages/vstory-animate/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.2-vstory.1", + "@visactor/vchart": "1.13.2-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.5-vstory.1", - "@visactor/vrender-core": "0.21.5-vstory.1", - "@visactor/vrender-kits": "0.21.5-vstory.1", - "@visactor/vrender-components": "0.21.5-vstory.1", + "@visactor/vrender": "0.21.5-vstory.2", + "@visactor/vrender-core": "0.21.5-vstory.2", + "@visactor/vrender-kits": "0.21.5-vstory.2", + "@visactor/vrender-components": "0.21.5-vstory.2", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory-core/package.json b/packages/vstory-core/package.json index ab5bc844..73903daa 100644 --- a/packages/vstory-core/package.json +++ b/packages/vstory-core/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.2-vstory.1", + "@visactor/vchart": "1.13.2-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.5-vstory.1", - "@visactor/vrender-core": "0.21.5-vstory.1", - "@visactor/vrender-kits": "0.21.5-vstory.1", - "@visactor/vrender-components": "0.21.5-vstory.1", + "@visactor/vrender": "0.21.5-vstory.2", + "@visactor/vrender-core": "0.21.5-vstory.2", + "@visactor/vrender-kits": "0.21.5-vstory.2", + "@visactor/vrender-components": "0.21.5-vstory.2", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory-editor/package.json b/packages/vstory-editor/package.json index e06160fd..682b984a 100644 --- a/packages/vstory-editor/package.json +++ b/packages/vstory-editor/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.2-vstory.1", + "@visactor/vchart": "1.13.2-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.5-vstory.1", - "@visactor/vrender-core": "0.21.5-vstory.1", - "@visactor/vrender-kits": "0.21.5-vstory.1", - "@visactor/vrender-components": "0.21.5-vstory.1", + "@visactor/vrender": "0.21.5-vstory.2", + "@visactor/vrender-core": "0.21.5-vstory.2", + "@visactor/vrender-kits": "0.21.5-vstory.2", + "@visactor/vrender-components": "0.21.5-vstory.2", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory-external/package.json b/packages/vstory-external/package.json index 3f2b386b..dea54c78 100644 --- a/packages/vstory-external/package.json +++ b/packages/vstory-external/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.2-vstory.1", + "@visactor/vchart": "1.13.2-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.5-vstory.1", - "@visactor/vrender-core": "0.21.5-vstory.1", - "@visactor/vrender-kits": "0.21.5-vstory.1", - "@visactor/vrender-components": "0.21.5-vstory.1", + "@visactor/vrender": "0.21.5-vstory.2", + "@visactor/vrender-core": "0.21.5-vstory.2", + "@visactor/vrender-kits": "0.21.5-vstory.2", + "@visactor/vrender-components": "0.21.5-vstory.2", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory-player/package.json b/packages/vstory-player/package.json index 44d9acb6..e1946b0e 100644 --- a/packages/vstory-player/package.json +++ b/packages/vstory-player/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.2-vstory.1", + "@visactor/vchart": "1.13.2-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.5-vstory.1", - "@visactor/vrender-core": "0.21.5-vstory.1", - "@visactor/vrender-kits": "0.21.5-vstory.1", - "@visactor/vrender-components": "0.21.5-vstory.1", + "@visactor/vrender": "0.21.5-vstory.2", + "@visactor/vrender-core": "0.21.5-vstory.2", + "@visactor/vrender-kits": "0.21.5-vstory.2", + "@visactor/vrender-components": "0.21.5-vstory.2", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory-templates/package.json b/packages/vstory-templates/package.json index ca2762f8..47bd6a5a 100644 --- a/packages/vstory-templates/package.json +++ b/packages/vstory-templates/package.json @@ -24,12 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.13.2-vstory.1", + "@visactor/vchart": "1.13.2-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.5-vstory.1", - "@visactor/vrender-core": "0.21.5-vstory.1", - "@visactor/vrender-kits": "0.21.5-vstory.1", - "@visactor/vrender-components": "0.21.5-vstory.1", + "@visactor/vrender": "0.21.5-vstory.2", + "@visactor/vrender-core": "0.21.5-vstory.2", + "@visactor/vrender-kits": "0.21.5-vstory.2", + "@visactor/vrender-components": "0.21.5-vstory.2", "@visactor/vutils": "~0.18.17", "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", diff --git a/packages/vstory/demo/src/demos/arrange/LineChart.tsx b/packages/vstory/demo/src/demos/arrange/LineChart.tsx index 78c3a7fa..b7a47a56 100644 --- a/packages/vstory/demo/src/demos/arrange/LineChart.tsx +++ b/packages/vstory/demo/src/demos/arrange/LineChart.tsx @@ -16,197 +16,37 @@ export const LineChartArrange = () => { const canvas = document.createElement('canvas'); container?.appendChild(canvas); - const USA = [ - { - type: 'Nail polish', - country: 'USA', - value: 12814 - }, - { - type: 'Eyebrow pencil', - country: 'USA', - value: 13012 - }, - { - type: 'Rouge', - country: 'USA', - value: 11624 - }, - { - type: 'Lipstick', - country: 'USA', - value: 8814 - }, - { - type: 'Eyeshadows', - country: 'USA', - value: 12998 - }, - { - type: 'Eyeliner', - country: 'USA', - value: 12321 - }, - { - type: 'Foundation', - country: 'USA', - value: 10342 - }, - { - type: 'Lip gloss', - country: 'USA', - value: 22998 - }, - { - type: 'Mascara', - country: 'USA', - value: 11261 - } - ].map(item => ({ ...item, value: 1000 + Math.random() * 1000 })); - - const EU = [ - { - type: 'Nail polish', - country: 'EU', - value: 4376 - }, - { - type: 'Eyebrow pencil', - country: 'EU', - value: 3987 - }, - { - type: 'Rouge', - country: 'EU', - value: 3574 - }, - { - type: 'Lipstick', - country: 'EU', - value: 4376 - }, - { - type: 'Eyeshadows', - country: 'EU', - value: 4572 - }, - { - type: 'Eyeliner', - country: 'EU', - value: 3417 - }, - { - type: 'Foundation', - country: 'EU', - value: 5231 - }, - { - type: 'Lip gloss', - country: 'EU', - value: 4572 - }, - { - type: 'Mascara', - country: 'EU', - value: 6134 - } - ].map(item => ({ ...item, value: 2000 + Math.random() * 1000 })); - - const China = [ - { - type: 'Nail polish', - country: 'China', - value: 3054 - }, - { - type: 'Eyebrow pencil', - country: 'China', - value: 5067 - }, - { - type: 'Rouge', - country: 'China', - value: 7004 - }, - { - type: 'Lipstick', - country: 'China', - value: 9054 - }, - { - type: 'Eyeshadows', - country: 'China', - value: 12043 - }, - { - type: 'Eyeliner', - country: 'China', - value: 15067 - }, - { - type: 'Foundation', - country: 'China', - value: 10119 - }, - { - type: 'Lip gloss', - country: 'China', - value: 12043 - }, - { - type: 'Mascara', - country: 'China', - value: 10419 - } - ].map(item => ({ ...item, value: 3000 + Math.random() * 1000 })); - - const Africa = [ - { - type: 'Nail polish', - country: 'Africa', - value: 4229 - }, - { - type: 'Eyebrow pencil', - country: 'Africa', - value: 3932 - }, - { - type: 'Rouge', - country: 'Africa', - value: 5221 - }, - { - type: 'Lipstick', - country: 'Africa', - value: 9256 - }, - { - type: 'Eyeshadows', - country: 'Africa', - value: 3308 - }, - { - type: 'Eyeliner', - country: 'Africa', - value: 5432 - }, - { - type: 'Foundation', - country: 'Africa', - value: 13701 - }, - { - type: 'Lip gloss', - country: 'Africa', - value: 4008 - }, - { - type: 'Mascara', - country: 'Africa', - value: 18712 - } - ].map(item => ({ ...item, value: 4000 + Math.random() * 1000 })); + const typeList = [ + 'Nail polish', + 'Eyebrow pencil', + 'Rouge', + 'Lipstick', + 'Eyeshadows', + 'Eyeliner', + 'Foundation', + 'Lip gloss', + 'Mascara' + ]; + const USA = typeList.map((item, i) => ({ + type: item, + country: 'USA', + value: 1000 + Math.random() * 1000 + })); + const EU = typeList.map((item, i) => ({ + type: item, + country: 'EU', + value: 2000 + Math.random() * 1000 + })); + const China = typeList.map((item, i) => ({ + type: item, + country: 'China', + value: 2000 + Math.random() * 1000 + })); + const Africa = typeList.map((item, i) => ({ + type: item, + country: 'Africa', + value: 3000 + Math.random() * 1000 + })); const spec = { type: 'common', diff --git a/packages/vstory/demo/src/demos/works/NationalMemorial.tsx b/packages/vstory/demo/src/demos/works/NationalMemorial.tsx index 29bdd527..e511b314 100644 --- a/packages/vstory/demo/src/demos/works/NationalMemorial.tsx +++ b/packages/vstory/demo/src/demos/works/NationalMemorial.tsx @@ -1,12 +1,12 @@ import React, { useEffect } from 'react'; import { Player, Story } from '../../../../../vstory-core/src'; -import { registerAll } from '../../../../../vstory/src'; +import { Easing, registerAll } from '../../../../../vstory/src'; import darkBg from '../../assets/nationalMemory/dark.jpeg'; import candle from '../../assets/nationalMemory/candle.png'; import monument from '../../assets/nationalMemory/monument.png'; import { merge } from '@visactor/vutils'; -import { generatorPathEasingFunc, Easing } from '@visactor/vrender'; import { exportVideo } from '../utils'; +import { generatorPathEasingFunc } from '../../../../../vstory-animate/cjs'; registerAll(); From f35acdab606830d197696f05aeef5ca4bd15d312 Mon Sep 17 00:00:00 2001 From: zhouxinyu Date: Wed, 25 Dec 2024 15:08:51 +0800 Subject: [PATCH 5/7] fix: fix issue with label visible --- .../vstory-player/src/processor/chart/visibility.ts | 12 ++++++------ .../vstory/demo/src/demos/works/NationalMemorial.tsx | 3 +-- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/vstory-player/src/processor/chart/visibility.ts b/packages/vstory-player/src/processor/chart/visibility.ts index fa058a0c..7fbf8111 100644 --- a/packages/vstory-player/src/processor/chart/visibility.ts +++ b/packages/vstory-player/src/processor/chart/visibility.ts @@ -126,10 +126,10 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { const defaultPayload = VChartVisibilityActionProcessor.defaultPayload; vrenderComponents.forEach(group => { if (isRun) { - // group.setAttribute('visibleAll', true); + (group.attribute as any).visibleAll = true; this.runTransformFunc(group as any, appearTransformFunc, action, payload, defaultPayload); } else { - group.setAttribute('visibleAll', false); + (group.attribute as any).visibleAll = false; } }); } @@ -146,10 +146,10 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { const defaultPayload = VChartVisibilityActionProcessor.fadePayload; vrenderComponents.forEach(group => { if (isRun) { - group.setAttribute('visibleAll', true); + (group.attribute as any).visibleAll = true; this.runTransformFunc(group as any, appearTransformFunc, action, payload, defaultPayload); } else { - group.setAttribute('visibleAll', false); + (group.attribute as any).visibleAll = false; } }); } @@ -169,9 +169,9 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { // debugger; vrenderComponents.forEach(c => { if (isRun) { - c.setAttribute('visibleAll', true); + (c.attribute as any).visibleAll = false; } else { - c.setAttribute('visibleAll', false); + (c.attribute as any).visibleAll = false; } }); if (!isRun) { diff --git a/packages/vstory/demo/src/demos/works/NationalMemorial.tsx b/packages/vstory/demo/src/demos/works/NationalMemorial.tsx index e511b314..8dc88e2b 100644 --- a/packages/vstory/demo/src/demos/works/NationalMemorial.tsx +++ b/packages/vstory/demo/src/demos/works/NationalMemorial.tsx @@ -1,12 +1,11 @@ import React, { useEffect } from 'react'; import { Player, Story } from '../../../../../vstory-core/src'; -import { Easing, registerAll } from '../../../../../vstory/src'; +import { Easing, generatorPathEasingFunc, registerAll } from '../../../../../vstory/src'; import darkBg from '../../assets/nationalMemory/dark.jpeg'; import candle from '../../assets/nationalMemory/candle.png'; import monument from '../../assets/nationalMemory/monument.png'; import { merge } from '@visactor/vutils'; import { exportVideo } from '../utils'; -import { generatorPathEasingFunc } from '../../../../../vstory-animate/cjs'; registerAll(); From d59dfb29ae3d0844c130d39a7eec66e17be8eaa7 Mon Sep 17 00:00:00 2001 From: zhouxinyu Date: Wed, 25 Dec 2024 15:18:58 +0800 Subject: [PATCH 6/7] fix: fix issue with visibility, add document --- .../examples/en/arrange/bar-line-arrange.md | 204 ++++++++++++++++++ .../examples/en/arrange/line-arrange.md | 197 +++++++++++++++++ docs/assets/examples/menu.json | 14 ++ .../examples/zh/arrange/line-arrange.md | 4 +- .../character/chart/runtime/label-style.ts | 3 +- .../src/processor/chart/visibility.ts | 2 +- .../demo/src/demos/arrange/LineChart.tsx | 4 +- 7 files changed, 422 insertions(+), 6 deletions(-) create mode 100644 docs/assets/examples/en/arrange/bar-line-arrange.md create mode 100644 docs/assets/examples/en/arrange/line-arrange.md diff --git a/docs/assets/examples/en/arrange/bar-line-arrange.md b/docs/assets/examples/en/arrange/bar-line-arrange.md new file mode 100644 index 00000000..97dd426e --- /dev/null +++ b/docs/assets/examples/en/arrange/bar-line-arrange.md @@ -0,0 +1,204 @@ +--- +category: examples +group: arrange +title: vchart-arrange +keywords: vchart-arrange +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/vchart-arrange.gif +--- + +# VChart Animation Arrangement + +The `VChart` chart component can refer to [VChart Chart Elements](/vstory/demo/character/vchart) and is a generic Character element that can configure any VChart spec. So, after configuring a VChart spec, we can use VStory's animation arrangement capabilities to control the animation effects of different components, series, axes, legends, and other components of the chart. + +In this demo, we will demonstrate the arrangement logic between bars, lines, and axes in a combined chart. + +## Code Demo + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); + +const spec = { + type: 'common', + animation: false, + seriesField: 'color', + data: [ + { + id: 'id0', + values: [ + { x: '周一', type: '早餐', y: 15 }, + { x: '周一', type: '午餐', y: 25 }, + { x: '周二', type: '早餐', y: 12 }, + { x: '周二', type: '午餐', y: 30 }, + { x: '周三', type: '早餐', y: 15 }, + { x: '周三', type: '午餐', y: 24 }, + { x: '周四', type: '早餐', y: 10 }, + { x: '周四', type: '午餐', y: 25 }, + { x: '周五', type: '早餐', y: 13 }, + { x: '周五', type: '午餐', y: 20 }, + { x: '周六', type: '早餐', y: 10 }, + { x: '周六', type: '午餐', y: 22 }, + { x: '周日', type: '早餐', y: 12 }, + { x: '周日', type: '午餐', y: 19 } + ] + }, + { + id: 'id1', + values: [ + { x: '周一', type: '饮料', y: 22 }, + { x: '周二', type: '饮料', y: 43 }, + { x: '周三', type: '饮料', y: 33 }, + { x: '周四', type: '饮料', y: 22 }, + { x: '周五', type: '饮料', y: 10 }, + { x: '周六', type: '饮料', y: 30 }, + { x: '周日', type: '饮料', y: 50 } + ] + } + ], + series: [ + { + type: 'bar', + id: 'bar', + dataIndex: 0, + label: { visible: false }, + seriesField: 'type', + dataIndex: 0, + xField: ['x', 'type'], + yField: 'y' + }, + { + type: 'line', + id: 'line', + dataIndex: 1, + label: { visible: false }, + seriesField: 'type', + xField: 'x', + yField: 'y', + stack: false + } + ], + axes: [ + { + orient: 'left', + id: 'axes-left', + domainLine: { visible: true }, + seriesId: ['line'], + grid: { visible: false } + }, + { orient: 'right', id: 'axes-right', domainLine: { visible: true }, seriesId: ['bar'], seriesIndex: [0] }, + { orient: 'bottom', label: { visible: true }, type: 'band' } + ], + legends: { + visible: true, + orient: 'bottom' + } +}; + +const dsl = { + characters: [ + { + type: 'VChart', + id: 'bar-line-series', + position: { + top: 50, + left: 50, + width: 500, + height: 300 + }, + options: { + spec, + panel: { + fill: '#ffffff', + shadowColor: 'rgba(0, 0, 0, 0.05)', + shadowBlur: 10, + shadowOffsetX: 4, + shadowOffsetY: 4, + cornerRadius: 8 + } + } + } + ], + acts: [ + { + id: 'default-chapter', + scenes: [ + { + id: 'scene0', + actions: [ + { + characterId: 'bar-line-series', + characterActions: [ + { + startTime: 0, + action: 'appear', + payload: [ + { + // 除了柱子和右轴，其他模块执行appear动画 + selector: ':not(bar) :not(#axes-right)', + animation: { + duration: 2000, + easing: 'linear' + } + } + ] + }, + { + startTime: 3000, + action: 'appear', + payload: [ + { + // 柱子执行appear动画 + selector: 'bar', + animation: { + duration: 800, + easing: 'linear' + } + } + ] + }, + { + startTime: 3000, + action: 'appear', + payload: [ + { + // 右轴执行appear动画 + selector: '#axes-right', + animation: { + duration: 800, + easing: 'linear' + } + } + ] + }, + { + startTime: 5500, + action: 'disappear', + payload: { + style: {}, + animation: { + // effect: 'fade', + duration: 1000, + easing: 'linear' + } + } + } + ] + } + ] + } + ] + } + ] +}; + +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const player = new VStory.Player(story); +story.init(player); + +player.play(1); +window.vstory = story; + +window['story'] = story; +window['vstory'] = story; +``` diff --git a/docs/assets/examples/en/arrange/line-arrange.md b/docs/assets/examples/en/arrange/line-arrange.md new file mode 100644 index 00000000..a29dfa0a --- /dev/null +++ b/docs/assets/examples/en/arrange/line-arrange.md @@ -0,0 +1,197 @@ +--- +category: examples +group: arrange +title: vchart-arrange +keywords: vchart-arrange +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/vchart-arrange.gif +--- + +# Line Chart Animation Arrangement + +The `VChart` chart component can refer to [VChart Chart Elements](/vstory/demo/character/vchart) for a generic Character element that can be configured with any VChart spec. Once a VChart spec is configured, we can use VStory's animation arrangement capabilities to control the animation effects of different components, series, axes, legends, and other components of the chart. + +In this demo, we will demonstrate the animation arrangement of line segments in a multi-series line chart. + +## Code Demo + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); + +const typeList = ['Nail polish', 'Eyebrow pencil', 'Rouge', 'Lipstick', 'Eyeshadows', 'Eyeliner', 'Foundation', 'Lip gloss', 'Mascara']; +const USA = typeList.map((item, i) => ({ + type: item, + country: 'USA', + value: Math.random() * 1000 +})); +const EU = typeList.map((item, i) => ({ + type: item, + country: 'EU', + value: 1000 + Math.random() * 1000 +})); +const China = typeList.map((item, i) => ({ + type: item, + country: 'China', + value: 2000 + Math.random() * 1000 +})); +const Africa = typeList.map((item, i) => ({ + type: item, + country: 'Africa', + value: 3000 + Math.random() * 1000 +})); + +const spec = { + type: 'common', + series: [USA, EU, China, Africa].map((item, i) => ({ + type: 'line', + id: 'line' + i, + data: { + id: '' + i, + values: item + }, + point: { + visible: false + }, + xField: 'type', + yField: 'value' + })), + axes: [ + { + orient: 'left', + type: 'linear' + }, + { + orient: 'bottom', + type: 'band' + } + ] +}; + +const dsl = { + characters: [ + { + type: 'VChart', + id: 'bar-line-series', + position: { + top: 50, + left: 50, + width: 500, + height: 300 + }, + options: { + spec, + panel: { + fill: '#ffffff', + shadowColor: 'rgba(0, 0, 0, 0.05)', + shadowBlur: 10, + shadowOffsetX: 4, + shadowOffsetY: 4, + cornerRadius: 8 + } + } + } + ], + acts: [ + { + id: 'default-chapter', + scenes: [ + { + id: 'scene0', + actions: [ + { + characterId: 'bar-line-series', + characterActions: [ + { + startTime: 0, + action: 'appear', + payload: [ + { + selector: ':not(line)', + animation: { + duration: 1000, + easing: 'linear' + } + } + ] + }, + { + startTime: 0, + action: 'appear', + payload: [ + { + selector: '#line0', + animation: { + duration: 1000, + easing: 'linear' + } + } + ] + }, + { + startTime: 1000, + action: 'appear', + payload: [ + { + selector: '#line1', + animation: { + duration: 1000, + easing: 'linear', + effect: 'fade' + } + } + ] + }, + { + startTime: 2000, + action: 'appear', + payload: [ + { + selector: '#line2', + animation: { + duration: 600, + easing: 'linear', + effect: 'growPoints', + params: { + direction: 'vertical' + } + } + } + ] + }, + { + startTime: 3000, + action: 'appear', + payload: [ + { + selector: '#line3', + animation: { + duration: 600, + easing: 'linear', + effect: 'growPoints', + params: { + direction: 'horizontal' + } + } + } + ] + } + ] + } + ] + } + ] + } + ] +}; + +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const player = new VStory.Player(story); +story.init(player); + +player.play(1); +window.vstory = story; + +window['story'] = story; +window['vstory'] = story; +``` diff --git a/docs/assets/examples/menu.json b/docs/assets/examples/menu.json index 41a34db6..6717d0b9 100644 --- a/docs/assets/examples/menu.json +++ b/docs/assets/examples/menu.json @@ -181,6 +181,20 @@ "zh": "VChart动画编排", "en": "VChart Animation arrangement" } + }, + { + "path": "bar-line-arrange", + "title": { + "zh": "VChart组合图动画编排", + "en": "VChart combination chart Animation arrangement" + } + }, + { + "path": "line-arrange", + "title": { + "zh": "VChart多系列动画编排", + "en": "VChart multiple series Animation arrangement" + } } ] }, diff --git a/docs/assets/examples/zh/arrange/line-arrange.md b/docs/assets/examples/zh/arrange/line-arrange.md index 61ec229e..7900141b 100644 --- a/docs/assets/examples/zh/arrange/line-arrange.md +++ b/docs/assets/examples/zh/arrange/line-arrange.md @@ -23,12 +23,12 @@ const typeList = ['Nail polish', 'Eyebrow pencil', 'Rouge', 'Lipstick', 'Eyeshad const USA = typeList.map((item, i) => ({ type: item, country: 'USA', - value: 1000 + Math.random() * 1000 + value: Math.random() * 1000 })); const EU = typeList.map((item, i) => ({ type: item, country: 'EU', - value: 2000 + Math.random() * 1000 + value: 1000 + Math.random() * 1000 })); const China = typeList.map((item, i) => ({ type: item, diff --git a/packages/vstory-core/src/character/chart/runtime/label-style.ts b/packages/vstory-core/src/character/chart/runtime/label-style.ts index c9f5ba8c..25707f7c 100644 --- a/packages/vstory-core/src/character/chart/runtime/label-style.ts +++ b/packages/vstory-core/src/character/chart/runtime/label-style.ts @@ -2,7 +2,8 @@ import { array, isValid, merge } from '@visactor/vutils'; import type { IChartCharacterRuntime } from '../interface/runtime'; import type { ICharacterChart } from '../interface/character-chart'; import type { ISeries, IVChart } from '@visactor/vchart'; -import type { ILabelInfo, Label as VChartLabelComponent } from '@visactor/vchart/esm/component/label/label'; +import type { Label as VChartLabelComponent } from '@visactor/vchart/esm/component/label/label'; +import type { ILabelInfo } from '@visactor/vchart/esm/component/label'; import { MarkStyleRuntime } from './mark-style'; import { getSeriesKeyScalesMap, isSeriesMatch, matchDatumWithScaleMap } from './utils'; import type { IGraphic } from '@visactor/vrender-core'; diff --git a/packages/vstory-player/src/processor/chart/visibility.ts b/packages/vstory-player/src/processor/chart/visibility.ts index 7fbf8111..f5f7913d 100644 --- a/packages/vstory-player/src/processor/chart/visibility.ts +++ b/packages/vstory-player/src/processor/chart/visibility.ts @@ -169,7 +169,7 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { // debugger; vrenderComponents.forEach(c => { if (isRun) { - (c.attribute as any).visibleAll = false; + (c.attribute as any).visibleAll = true; } else { (c.attribute as any).visibleAll = false; } diff --git a/packages/vstory/demo/src/demos/arrange/LineChart.tsx b/packages/vstory/demo/src/demos/arrange/LineChart.tsx index b7a47a56..f9fb5dd3 100644 --- a/packages/vstory/demo/src/demos/arrange/LineChart.tsx +++ b/packages/vstory/demo/src/demos/arrange/LineChart.tsx @@ -30,12 +30,12 @@ export const LineChartArrange = () => { const USA = typeList.map((item, i) => ({ type: item, country: 'USA', - value: 1000 + Math.random() * 1000 + value: Math.random() * 1000 })); const EU = typeList.map((item, i) => ({ type: item, country: 'EU', - value: 2000 + Math.random() * 1000 + value: 1000 + Math.random() * 1000 })); const China = typeList.map((item, i) => ({ type: item, From 919657ac88afe44e99f037dca91c56cc6136f69b Mon Sep 17 00:00:00 2001 From: zhouxinyu Date: Wed, 25 Dec 2024 16:31:05 +0800 Subject: [PATCH 7/7] feat: make demo fit container size --- docs/assets/examples/en/animate/bar-bounce.md | 2 +- docs/assets/examples/en/animate/bar-leap.md | 2 +- docs/assets/examples/en/animate/pie-leap.md | 2 +- docs/assets/examples/en/arrange/bar-line-arrange.md | 2 +- docs/assets/examples/en/arrange/line-arrange.md | 2 +- docs/assets/examples/en/arrange/vchart-arrange.md | 2 +- docs/assets/examples/en/character/balloon-bar.md | 2 +- docs/assets/examples/en/character/clipped-image.md | 2 +- docs/assets/examples/en/character/dynamic-line.md | 2 +- docs/assets/examples/en/character/poptip.md | 2 +- docs/assets/examples/en/character/ranking-bar.md | 2 +- docs/assets/examples/en/character/single-pie.md | 2 +- docs/assets/examples/en/character/story-label-item.md | 2 +- docs/assets/examples/en/character/timeline.md | 2 +- docs/assets/examples/en/character/unit.md | 2 +- docs/assets/examples/en/character/vchart.md | 2 +- docs/assets/examples/en/character/vgraphic.md | 2 +- docs/assets/examples/en/character/wave-scatter.md | 2 +- .../assets/examples/en/templates/unit-visualize-template.md | 2 +- docs/assets/examples/en/works-show/annotation-show.md | 2 +- docs/assets/examples/en/works-show/chart-join.md | 2 +- docs/assets/examples/en/works-show/national-memorial.md | 2 +- docs/assets/examples/en/works-show/unit-gun-death.md | 2 +- docs/assets/examples/en/works-show/visualize-history.md | 2 +- docs/assets/examples/zh/animate/bar-bounce.md | 2 +- docs/assets/examples/zh/animate/bar-leap.md | 2 +- docs/assets/examples/zh/animate/pie-leap.md | 2 +- docs/assets/examples/zh/arrange/bar-line-arrange.md | 2 +- docs/assets/examples/zh/arrange/line-arrange.md | 2 +- docs/assets/examples/zh/arrange/vchart-arrange.md | 2 +- docs/assets/examples/zh/character/balloon-bar.md | 2 +- docs/assets/examples/zh/character/clipped-image.md | 2 +- docs/assets/examples/zh/character/dynamic-line.md | 4 ++-- docs/assets/examples/zh/character/poptip.md | 2 +- docs/assets/examples/zh/character/ranking-bar.md | 2 +- docs/assets/examples/zh/character/single-pie.md | 2 +- docs/assets/examples/zh/character/story-label-item.md | 2 +- docs/assets/examples/zh/character/timeline.md | 2 +- docs/assets/examples/zh/character/unit.md | 2 +- docs/assets/examples/zh/character/vchart.md | 2 +- docs/assets/examples/zh/character/vgraphic.md | 2 +- docs/assets/examples/zh/character/wave-scatter.md | 2 +- .../assets/examples/zh/templates/unit-visualize-template.md | 6 +++--- docs/assets/examples/zh/works-show/annotation-show.md | 2 +- docs/assets/examples/zh/works-show/chart-join.md | 2 +- docs/assets/examples/zh/works-show/national-memorial.md | 2 +- docs/assets/examples/zh/works-show/unit-gun-death.md | 2 +- docs/assets/examples/zh/works-show/visualize-history.md | 2 +- 48 files changed, 51 insertions(+), 51 deletions(-) diff --git a/docs/assets/examples/en/animate/bar-bounce.md b/docs/assets/examples/en/animate/bar-bounce.md index c35c1ab3..99fd6b16 100644 --- a/docs/assets/examples/en/animate/bar-bounce.md +++ b/docs/assets/examples/en/animate/bar-bounce.md @@ -91,7 +91,7 @@ const dsl = { ] } -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/animate/bar-leap.md b/docs/assets/examples/en/animate/bar-leap.md index d9fd9ffa..07229b31 100644 --- a/docs/assets/examples/en/animate/bar-leap.md +++ b/docs/assets/examples/en/animate/bar-leap.md @@ -91,7 +91,7 @@ const dsl = { ] } -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/animate/pie-leap.md b/docs/assets/examples/en/animate/pie-leap.md index d3d83f08..c1531b98 100644 --- a/docs/assets/examples/en/animate/pie-leap.md +++ b/docs/assets/examples/en/animate/pie-leap.md @@ -92,7 +92,7 @@ const dsl = { ] } -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/arrange/bar-line-arrange.md b/docs/assets/examples/en/arrange/bar-line-arrange.md index 97dd426e..90a140da 100644 --- a/docs/assets/examples/en/arrange/bar-line-arrange.md +++ b/docs/assets/examples/en/arrange/bar-line-arrange.md @@ -192,7 +192,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/arrange/line-arrange.md b/docs/assets/examples/en/arrange/line-arrange.md index a29dfa0a..47a5fba6 100644 --- a/docs/assets/examples/en/arrange/line-arrange.md +++ b/docs/assets/examples/en/arrange/line-arrange.md @@ -185,7 +185,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/arrange/vchart-arrange.md b/docs/assets/examples/en/arrange/vchart-arrange.md index e2ab2835..f51500f4 100644 --- a/docs/assets/examples/en/arrange/vchart-arrange.md +++ b/docs/assets/examples/en/arrange/vchart-arrange.md @@ -300,7 +300,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/balloon-bar.md b/docs/assets/examples/en/character/balloon-bar.md index db60733c..673b5668 100644 --- a/docs/assets/examples/en/character/balloon-bar.md +++ b/docs/assets/examples/en/character/balloon-bar.md @@ -165,7 +165,7 @@ const dsl = { ], }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/clipped-image.md b/docs/assets/examples/en/character/clipped-image.md index afe9a1bb..46c6ac5a 100644 --- a/docs/assets/examples/en/character/clipped-image.md +++ b/docs/assets/examples/en/character/clipped-image.md @@ -16,7 +16,7 @@ You can achieve image clipping effects under various shapes through the backgrou ```javascript livedemo template=vstory VStory.registerAll(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 700, height: 500, scaleX: 'auto', scaleY: 'auto', background: '#18253A' }); const player = new VStory.Player(story); story.init(player); const clipPath = [ diff --git a/docs/assets/examples/en/character/dynamic-line.md b/docs/assets/examples/en/character/dynamic-line.md index 6045bf25..532d24eb 100644 --- a/docs/assets/examples/en/character/dynamic-line.md +++ b/docs/assets/examples/en/character/dynamic-line.md @@ -43,7 +43,7 @@ const data = [ { year: 'September 13, 2022', name: 'iPhone 16', price: 5999, bg: 'iphone16.png' } ].map(item => ({ ...item, bg: `https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/demo/${item.bg}` })); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/poptip.md b/docs/assets/examples/en/character/poptip.md index 103c6062..a293d847 100644 --- a/docs/assets/examples/en/character/poptip.md +++ b/docs/assets/examples/en/character/poptip.md @@ -22,7 +22,7 @@ VStory.registerAll(); VStory.registerPopTip(); VStory.registerPopTipAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 400, height: 300, scaleX: 'auto', scaleY: 'auto', background: '#18253A' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/ranking-bar.md b/docs/assets/examples/en/character/ranking-bar.md index 0b347f18..9a673bf3 100644 --- a/docs/assets/examples/en/character/ranking-bar.md +++ b/docs/assets/examples/en/character/ranking-bar.md @@ -158,7 +158,7 @@ async function loadDSL() { const dsl = await loadDSL(); -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/single-pie.md b/docs/assets/examples/en/character/single-pie.md index eb2e14e2..2b51436e 100644 --- a/docs/assets/examples/en/character/single-pie.md +++ b/docs/assets/examples/en/character/single-pie.md @@ -19,7 +19,7 @@ VStory.registerAll(); VStory.registerSinglePie(); VStory.registerSinglePieAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 500, height: 350, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/story-label-item.md b/docs/assets/examples/en/character/story-label-item.md index 82a26c9e..0dd91a40 100644 --- a/docs/assets/examples/en/character/story-label-item.md +++ b/docs/assets/examples/en/character/story-label-item.md @@ -24,7 +24,7 @@ VStory.registerAll(); VStory.registerLabelItem(); VStory.registerLabelItemAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 750, height: 450, scaleX: 'auto', scaleY: 'auto', background: '#18253A' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/timeline.md b/docs/assets/examples/en/character/timeline.md index d6476c69..2e102dd8 100644 --- a/docs/assets/examples/en/character/timeline.md +++ b/docs/assets/examples/en/character/timeline.md @@ -94,7 +94,7 @@ const dsl = { ], }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 300, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/unit.md b/docs/assets/examples/en/character/unit.md index 7936ec84..a9997b9f 100644 --- a/docs/assets/examples/en/character/unit.md +++ b/docs/assets/examples/en/character/unit.md @@ -151,7 +151,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/vchart.md b/docs/assets/examples/en/character/vchart.md index 151e3c4c..e76f01b4 100644 --- a/docs/assets/examples/en/character/vchart.md +++ b/docs/assets/examples/en/character/vchart.md @@ -162,7 +162,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/vgraphic.md b/docs/assets/examples/en/character/vgraphic.md index 68913aea..c642abd1 100644 --- a/docs/assets/examples/en/character/vgraphic.md +++ b/docs/assets/examples/en/character/vgraphic.md @@ -63,7 +63,7 @@ const characterList = [ { type:'Shape', options: shape, effect: 'clipRange' } ] -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/wave-scatter.md b/docs/assets/examples/en/character/wave-scatter.md index d047ffd2..89ecf6c5 100644 --- a/docs/assets/examples/en/character/wave-scatter.md +++ b/docs/assets/examples/en/character/wave-scatter.md @@ -86,7 +86,7 @@ const dsl = { ], }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/templates/unit-visualize-template.md b/docs/assets/examples/en/templates/unit-visualize-template.md index f57ac84e..43cfc984 100644 --- a/docs/assets/examples/en/templates/unit-visualize-template.md +++ b/docs/assets/examples/en/templates/unit-visualize-template.md @@ -152,7 +152,7 @@ const spec = { } const dsl = VStory.createUnitTemplate(spec); -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.35, scaleY: 0.35 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', width: 1920, height: 1080, scaleX: 'auto', scaleY: 'auto' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/works-show/annotation-show.md b/docs/assets/examples/en/works-show/annotation-show.md index fb2cd902..0fbb2db2 100644 --- a/docs/assets/examples/en/works-show/annotation-show.md +++ b/docs/assets/examples/en/works-show/annotation-show.md @@ -23,7 +23,7 @@ VStory.registerLabelItemAction(); VStory.registerPopTip(); VStory.registerPopTipAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000 / 2, height: 800 / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1080, height: 720, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/works-show/chart-join.md b/docs/assets/examples/en/works-show/chart-join.md index 293655db..c0b0d353 100644 --- a/docs/assets/examples/en/works-show/chart-join.md +++ b/docs/assets/examples/en/works-show/chart-join.md @@ -77,7 +77,7 @@ const getChartSpec = (i, showLeftAxis) => { }; } -const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000 / 2, height: 800 / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000, height: 800, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/works-show/national-memorial.md b/docs/assets/examples/en/works-show/national-memorial.md index 9d011bd0..18f52d11 100644 --- a/docs/assets/examples/en/works-show/national-memorial.md +++ b/docs/assets/examples/en/works-show/national-memorial.md @@ -1589,7 +1589,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: width / 2, height: height / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width, height, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/works-show/unit-gun-death.md b/docs/assets/examples/en/works-show/unit-gun-death.md index cfdefcad..3c60b9b2 100644 --- a/docs/assets/examples/en/works-show/unit-gun-death.md +++ b/docs/assets/examples/en/works-show/unit-gun-death.md @@ -356,7 +356,7 @@ const dsl = VStory.createUnitTemplate(spec); console.log(dsl); -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', width: 1550, height: 800, scaleX: 'auto', scaleY: 'auto' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/works-show/visualize-history.md b/docs/assets/examples/en/works-show/visualize-history.md index 8d780964..6290c095 100644 --- a/docs/assets/examples/en/works-show/visualize-history.md +++ b/docs/assets/examples/en/works-show/visualize-history.md @@ -13690,7 +13690,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 1280, height: 720, background: '#ebecf0', scaleX: 'auto', scaleY: 'auto' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/animate/bar-bounce.md b/docs/assets/examples/zh/animate/bar-bounce.md index eb3443e5..f57c27a6 100644 --- a/docs/assets/examples/zh/animate/bar-bounce.md +++ b/docs/assets/examples/zh/animate/bar-bounce.md @@ -91,7 +91,7 @@ const dsl = { ] } -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/animate/bar-leap.md b/docs/assets/examples/zh/animate/bar-leap.md index b57e195f..3da898c6 100644 --- a/docs/assets/examples/zh/animate/bar-leap.md +++ b/docs/assets/examples/zh/animate/bar-leap.md @@ -91,7 +91,7 @@ const dsl = { ] } -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/animate/pie-leap.md b/docs/assets/examples/zh/animate/pie-leap.md index e368ef9f..5739caf6 100644 --- a/docs/assets/examples/zh/animate/pie-leap.md +++ b/docs/assets/examples/zh/animate/pie-leap.md @@ -92,7 +92,7 @@ const dsl = { ] } -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/arrange/bar-line-arrange.md b/docs/assets/examples/zh/arrange/bar-line-arrange.md index 57d52078..b3dcea88 100644 --- a/docs/assets/examples/zh/arrange/bar-line-arrange.md +++ b/docs/assets/examples/zh/arrange/bar-line-arrange.md @@ -192,7 +192,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/arrange/line-arrange.md b/docs/assets/examples/zh/arrange/line-arrange.md index 7900141b..aa4337a5 100644 --- a/docs/assets/examples/zh/arrange/line-arrange.md +++ b/docs/assets/examples/zh/arrange/line-arrange.md @@ -185,7 +185,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/arrange/vchart-arrange.md b/docs/assets/examples/zh/arrange/vchart-arrange.md index 8e12dcb4..8ae981c1 100644 --- a/docs/assets/examples/zh/arrange/vchart-arrange.md +++ b/docs/assets/examples/zh/arrange/vchart-arrange.md @@ -300,7 +300,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/balloon-bar.md b/docs/assets/examples/zh/character/balloon-bar.md index 30a5d1a1..132af1a8 100644 --- a/docs/assets/examples/zh/character/balloon-bar.md +++ b/docs/assets/examples/zh/character/balloon-bar.md @@ -165,7 +165,7 @@ const dsl = { ], }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/clipped-image.md b/docs/assets/examples/zh/character/clipped-image.md index 8be6bb65..5811a1b5 100644 --- a/docs/assets/examples/zh/character/clipped-image.md +++ b/docs/assets/examples/zh/character/clipped-image.md @@ -17,7 +17,7 @@ cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/clipped-image. // 注册所有需要的内容 VStory.registerAll(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 700, height: 500, scaleX: 'auto', scaleY: 'auto', background: '#18253A' }); const player = new VStory.Player(story); story.init(player); const clipPath = [ diff --git a/docs/assets/examples/zh/character/dynamic-line.md b/docs/assets/examples/zh/character/dynamic-line.md index 0dc3a3af..edadf2ec 100644 --- a/docs/assets/examples/zh/character/dynamic-line.md +++ b/docs/assets/examples/zh/character/dynamic-line.md @@ -43,7 +43,7 @@ const data = [ { year: '2022年9月13日', name: 'iPhone 16', price: 5999, bg: 'iphone16.png' } ].map(item => ({ ...item, bg: `https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/demo/${item.bg}` })); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); @@ -54,7 +54,7 @@ story.addCharacter( zIndex: 1, position: { top: 50, - left: 100, + left: 50, width: 500, height: 300 }, diff --git a/docs/assets/examples/zh/character/poptip.md b/docs/assets/examples/zh/character/poptip.md index 81800d2b..08bfcfae 100644 --- a/docs/assets/examples/zh/character/poptip.md +++ b/docs/assets/examples/zh/character/poptip.md @@ -22,7 +22,7 @@ VStory.registerAll(); VStory.registerPopTip(); VStory.registerPopTipAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 400, height: 300, scaleX: 'auto', scaleY: 'auto', background: '#18253A' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/ranking-bar.md b/docs/assets/examples/zh/character/ranking-bar.md index 16bd4622..2a4e367a 100644 --- a/docs/assets/examples/zh/character/ranking-bar.md +++ b/docs/assets/examples/zh/character/ranking-bar.md @@ -158,7 +158,7 @@ async function loadDSL() { const dsl = await loadDSL(); -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/single-pie.md b/docs/assets/examples/zh/character/single-pie.md index 3e632076..a01f7f6b 100644 --- a/docs/assets/examples/zh/character/single-pie.md +++ b/docs/assets/examples/zh/character/single-pie.md @@ -20,7 +20,7 @@ VStory.registerAll(); VStory.registerSinglePie(); VStory.registerSinglePieAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 500, height: 350, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/story-label-item.md b/docs/assets/examples/zh/character/story-label-item.md index 8c4ba716..68340453 100644 --- a/docs/assets/examples/zh/character/story-label-item.md +++ b/docs/assets/examples/zh/character/story-label-item.md @@ -24,7 +24,7 @@ VStory.registerAll(); VStory.registerLabelItem(); VStory.registerLabelItemAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 750, height: 450, scaleX: 'auto', scaleY: 'auto', background: '#18253A' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/timeline.md b/docs/assets/examples/zh/character/timeline.md index d69234b5..ad31ece2 100644 --- a/docs/assets/examples/zh/character/timeline.md +++ b/docs/assets/examples/zh/character/timeline.md @@ -94,7 +94,7 @@ const dsl = { ], }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 300, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/unit.md b/docs/assets/examples/zh/character/unit.md index 2a164ada..b74e569d 100644 --- a/docs/assets/examples/zh/character/unit.md +++ b/docs/assets/examples/zh/character/unit.md @@ -151,7 +151,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/vchart.md b/docs/assets/examples/zh/character/vchart.md index beda0b7c..880675d8 100644 --- a/docs/assets/examples/zh/character/vchart.md +++ b/docs/assets/examples/zh/character/vchart.md @@ -162,7 +162,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/vgraphic.md b/docs/assets/examples/zh/character/vgraphic.md index 7605194b..16e63239 100644 --- a/docs/assets/examples/zh/character/vgraphic.md +++ b/docs/assets/examples/zh/character/vgraphic.md @@ -63,7 +63,7 @@ const characterList = [ { type:'Shape', options: shape, effect: 'clipRange' } ] -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/wave-scatter.md b/docs/assets/examples/zh/character/wave-scatter.md index 536cc968..716325f1 100644 --- a/docs/assets/examples/zh/character/wave-scatter.md +++ b/docs/assets/examples/zh/character/wave-scatter.md @@ -86,7 +86,7 @@ const dsl = { ], }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/templates/unit-visualize-template.md b/docs/assets/examples/zh/templates/unit-visualize-template.md index cda9590b..f6bf1167 100644 --- a/docs/assets/examples/zh/templates/unit-visualize-template.md +++ b/docs/assets/examples/zh/templates/unit-visualize-template.md @@ -32,8 +32,8 @@ data.sort((d1, d2) => { }); const spec = { layout: { - width: 1550, - height: 800, + width: 1920, + height: 1080, viz: { padding: { top: 0 @@ -152,7 +152,7 @@ const spec = { } const dsl = VStory.createUnitTemplate(spec); -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.35, scaleY: 0.35 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', width: 1920, height: 1080, scaleX: 'auto', scaleY: 'auto' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/works-show/annotation-show.md b/docs/assets/examples/zh/works-show/annotation-show.md index c20f985a..5981b9d7 100644 --- a/docs/assets/examples/zh/works-show/annotation-show.md +++ b/docs/assets/examples/zh/works-show/annotation-show.md @@ -23,7 +23,7 @@ VStory.registerLabelItemAction(); VStory.registerPopTip(); VStory.registerPopTipAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000 / 2, height: 800 / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1080, height: 720, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/works-show/chart-join.md b/docs/assets/examples/zh/works-show/chart-join.md index a5057bb0..067d5080 100644 --- a/docs/assets/examples/zh/works-show/chart-join.md +++ b/docs/assets/examples/zh/works-show/chart-join.md @@ -77,7 +77,7 @@ const getChartSpec = (i, showLeftAxis) => { }; } -const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000 / 2, height: 800 / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000, height: 800, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/works-show/national-memorial.md b/docs/assets/examples/zh/works-show/national-memorial.md index 5a6e0246..10a7605d 100644 --- a/docs/assets/examples/zh/works-show/national-memorial.md +++ b/docs/assets/examples/zh/works-show/national-memorial.md @@ -1589,7 +1589,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: width / 2, height: height / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width, height, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/works-show/unit-gun-death.md b/docs/assets/examples/zh/works-show/unit-gun-death.md index 57e76b34..5fcf0d2d 100644 --- a/docs/assets/examples/zh/works-show/unit-gun-death.md +++ b/docs/assets/examples/zh/works-show/unit-gun-death.md @@ -356,7 +356,7 @@ const dsl = VStory.createUnitTemplate(spec); console.log(dsl); -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', width: 1550, height: 800, scaleX: 'auto', scaleY: 'auto' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/works-show/visualize-history.md b/docs/assets/examples/zh/works-show/visualize-history.md index b6950295..026cdc6f 100644 --- a/docs/assets/examples/zh/works-show/visualize-history.md +++ b/docs/assets/examples/zh/works-show/visualize-history.md @@ -13690,7 +13690,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 1280, height: 720, background: '#ebecf0', scaleX: 'auto', scaleY: 'auto' }); const player = new VStory.Player(story); story.init(player);