Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Demo: unit template demo #64

Closed
wants to merge 2 commits into from
Closed

Demo: unit template demo #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f922e4c
refactor: export unit template spec generator
xiaoluoHe Sep 9, 2024
315711f
docs: add unit demo
xiaoluoHe Sep 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 143 additions & 0 deletions docs/assets/examples/en/template/unit/basic-component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
---
category: examples
group: template
title: ranking-bar
keywords: ranking-bar
order: 2-0
cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/rankingbar-preview.gif
---

# Basic Unit Component

## Demo source

```javascript livedemo template=vstory
const spec = {
characters: [
{
type: 'Rect',
id: 'background-top',
zIndex: 2,
position: {
top: 0,
left: 0,
width: 20,
height: 20
},
options: {
graphic: {
fill: '#2D6BA0',
stroke: false
}
}
},
{
type: 'Unit',
id: 'unit-test',
zIndex: 2,
position: {
top: 0,
left: 0,
width: 1200,
height: 1000
},
options: {
graphic: {
fill: '#f1f1f0',
padding: {
top: 100,
bottom: 100,
right: 50,
left: 50
},
count: 250,
styleFunc: index => {
return index < 66 ? { symbolType: 'rect', fill: '#4e8ae0' } : { fill: '#f6c86d' };
},
gap: [0.5, 0.75],
aspect: 1,
direction: 'vertical'
}
}
}
],
acts: [
{
id: 'page1',
scenes: [
{
id: '1',
actions: [
{
characterId: 'background-top',
characterActions: [
{
action: 'appear',
startTime: 0,
payload: {
animation: {
effect: 'move',
duration: 100
}
}
}
]
},
{
characterId: 'unit-test',
characterActions: [
{
action: 'appear',
startTime: 1,
payload: {
animation: {
startIndex: 100,
style: { fill: '#6638f0' },
effect: 'style',
duration: 1000,
easing: 'linear',
stagger: {
enable: true
}
}
}
}
]
}
]
},
{
id: '2',
actions: [
{
characterId: 'unit-test',
characterActions: [
{
action: 'style',
startTime: 1000,
payload: {
animation: {
style: { fill: '#4af2a1' },
effect: 'style',
duration: 5000,
easing: 'linear',
stagger: {
enable: true
}
}
}
}
]
}
]
}
]
}
]
};
const vstory = new VStory.Story(spec, { dom: CONTAINER_ID, playerOption: { scaleX: 1, scaleY: 1 } });
vstory.canvas.getStage().defaultLayer.scale(0.4, 0.4);

vstory.play(false);
window.vstory = vstory;
```
147 changes: 26 additions & 121 deletions .../demo/src/demos/UnitViz/GunDeath/input.ts → ...amples/en/template/unit/unit-gun-death.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,123 +1,23 @@
import { ISymbolGraphicAttribute, ITextGraphicAttribute } from '@visactor/vrender-core';
import data from '../../../../data/sorted-gun-death-data.json' assert { type: 'json' };
import { merge } from '@visactor/vutils';
import { IEditorTextGraphicAttribute } from '../../../../../src/story/character';
---
category: examples
group: template
title: ranking-bar
keywords: ranking-bar
order: 2-2
cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/gun-death.png
---

export const DEFAULT_SCENE_DURATION = 5000;
export const DEFAULT_ANIMATION_DURATION = 1000;
# Unit Story Telling

export interface Input {
layout?: {
width?: number;
height?: number;
title?: {
height?: number;
backgroundColor?: string;
style?: IEditorTextGraphicAttribute;
padding?: {
left?: number;
right?: number;
top?: number;
bottom?: number;
};
};
viz?: {
backgroundColor?: string;
direction?: 'horizontal' | 'vertical';
padding?: {
left?: number;
right?: number;
top?: number;
bottom?: number;
};
};
};
unit?: {
gap?: [number, number];
aspect?: number;
defaultStyle?: ISymbolGraphicAttribute | ((index: number) => ISymbolGraphicAttribute);
};
data: Record<string, any>[];
scenes: {
title: ITextGraphicAttribute[];
sceneDuration?: number;
animationDuration?: number;
nodes: QueryNode[];
}[];
}
> This example is inspired by https://fivethirtyeight.com/features/gun-deaths/

export interface QueryNode {
query?: (datum: any) => boolean;
style?: ISymbolGraphicAttribute;
children?: QueryNode[];
}
## Demo source

export interface UnitNode {
style?: ISymbolGraphicAttribute;
count: number;
children?: UnitNode[];
}

// type DeepRequired<T> = T extends object
// ? {
// [P in keyof T]-?: DeepRequired<T[P]>;
// }
// : T;

// export type RequiredInput = DeepRequired<Input>;

export const defaultInput = {
layout: {
width: 1920,
height: 1080,
title: {
height: 250,
backgroundColor: '#ffffff',
style: {
fontSize: 40,
fontWeight: 200,
textAlign: 'center',
fill: 'black',
wordBreak: 'break-word'
},
padding: {
left: 50,
right: 50,
top: 50,
bottom: 0
}
},
viz: {
backgroundColor: '#ffffff',
direction: 'horizontal',
padding: {
left: 50,
right: 50,
top: 50,
bottom: 50
}
}
},
unit: {
gap: [0.5, 0.5],
aspect: 1,
defaultStyle: {
symbolType: 'circle',
fill: '#ffffff'
}
},
data: [],
scenes: []
};

function initialInput(input: Input): Input {
const { data, ...restInput } = input;
const res = merge({}, defaultInput, restInput);
res.data = data;
return res;
}

export const userInput: Input = {
```javascript livedemo template=vstory
const data = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/sorted-gun-death-data.json').then(
res => res.json()
);
const unitSpec = {
layout: {
width: 1550,
height: 800,
Expand All @@ -139,7 +39,7 @@ export const userInput: Input = {
fill: '#222222'
}
},
data: (data as Record<string, any>[]).filter(record => record.year === 2014),
data: data.filter(record => record.year === 2014),
scenes: [
{
title: [
Expand All @@ -151,7 +51,7 @@ export const userInput: Input = {
fontWeight: 'bold'
},
{
text: ' people are fatally shot in the U.S. each year. This is for test. This is f test. This is for test'
text: ' people are fatally shot in the U.S. each year. '
}
],
nodes: [
Expand All @@ -165,7 +65,7 @@ export const userInput: Input = {
{
title: [
{
text: 'Nearly two-third of gun deaths are'
text: 'Nearly two-third of gun deaths are '
},
{
text: 'suicides',
Expand Down Expand Up @@ -444,5 +344,10 @@ export const userInput: Input = {
}
]
};

export const input = initialInput(userInput);
// 准备一个图表
const spec = VStory.generateSpec(unitSpec);
const vstory = new VStory.Story(spec, { dom: CONTAINER_ID, playerOption: { scaleX: 1, scaleY: 1 } });
vstory.canvas.getStage().defaultLayer.scale(0.5, 0.5);
vstory.play(false);
window.vstory = vstory;
```
Loading
Loading