Skip to content

Commit

Permalink
docs: add marketing-wordclouds demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rui-Sun
Rui-Sun committed Dec 17, 2024
1 parent 941ec9d commit 940fa7d
Show file tree
Hide file tree
Showing 3 changed files with 377 additions and 4 deletions.
5 changes: 5 additions & 0 deletions packages/vstory/demo/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import { BarWorkingInSameIndustry } from './demos/infographic/bar-work-in-same-i
import { ProjectGoal } from './demos/infographic/project-goal';
import { BigDataWordCloud } from './demos/infographic/big-data-wordcloud';
import { AreaChart } from './demos/infographic/source-of-new-contacts-area-chart';
import { MarketingWordcloud } from './demos/infographic/marking-wordcloud';

type MenusType = (
| {
Expand Down Expand Up @@ -254,6 +255,10 @@ const App = () => {
{
name: 'Source of New Contacts Area Chart',
component: AreaChart
},
{
name: 'Marketing WordCloud',
component: MarketingWordcloud
}
]
},
Expand Down
368 changes: 368 additions & 0 deletions packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,368 @@
import React, { createRef, useEffect } from 'react';
import { Player, Story } from '../../../../../vstory-core/src';
import { registerAll } from '../../../../../vstory/src';

registerAll();
export const MarketingWordcloud = () => {
const id = 'MarketingWordcloud';
useEffect(() => {
const container = document.getElementById(id);
const canvas = document.createElement('canvas');
container?.appendChild(canvas);

const chartPath =
'M948.6 627c1.2-2 2.6-4 3.8-5.8 8-12.4 15.2-25.4 21.4-39 6.2-13.6 11.4-27.4 15.6-41.8 4.2-14.4 7.4-28.8 9.6-43.6 2.2-14.8 3.2-29.6 3.2-44.6 0.6-172.6-140.2-312.6-314.2-312.6-151.8 0-278.4 106.8-308.2 248.8-4.4 21-6.8 42.4-6.8 64 0 172.8 135.4 316.6 309.4 316.6 27.6 0 65-8.6 85.4-14.4 20.4-5.8 40.8-13.4 46-15.6 5.2-2 13.4-4.2 20-2.2l130 39c1.2 0.4 2.4 0.4 3.6 0 1.2-0.4 2.2-0.8 3-1.8 0.8-0.8 1.4-2 1.8-3.2 0.4-1.2 0.4-2.4 0-3.6L942.6 650c-2-8.8-2.4-10.4 6-23zM721 806c-13 2.2-26 3.4-39 3.6-71.2 0-138.6-19.4-193.2-56-17.4-11-33.8-23.8-48.8-38.2-15-14.4-28.6-30.2-40.4-47.4-43.8-60-67.8-136.4-67.8-216.4 0-5.4 0.2-10.6 0.4-16 0-0.8 0-1.6-0.2-2.2-0.2-0.8-0.4-1.4-0.8-2.2-0.4-0.6-0.8-1.2-1.4-1.8l-1.8-1.2c-0.6-0.2-1.4-0.4-2.2-0.6-0.8 0-1.4 0-2.2 0.2-0.8 0.2-1.4 0.4-2 0.8-0.6 0.4-1.2 0.8-1.8 1.4-2.4 2.8-5 5.6-7.4 8.6-2.4 3-4.6 5.8-7 9-2.2 3-4.4 6-6.6 9.2-2.2 3.2-4.2 6.2-6.2 9.4s-4 6.4-5.8 9.8c-1.8 3.2-3.6 6.6-5.4 10-1.8 3.4-3.4 6.8-5 10.2-1.6 3.4-3.2 7-4.6 10.4-1.4 3.6-2.8 7-4.2 10.6-1.4 3.6-2.6 7.2-3.8 10.8-1.2 3.6-2.2 7.2-3.4 11-1 3.6-2 7.4-2.8 11-0.8 3.8-1.6 7.4-2.4 11.2-0.8 3.8-1.4 7.6-2 11.2-0.6 3.8-1 7.6-1.6 11.4-0.4 3.8-0.8 7.6-1 11.4l-0.6 11.4c-0.2 3.8-0.2 7.6-0.2 11.4 0 3.8 0.2 7.6 0.4 11.4 0.2 3.8 0.4 7.6 0.8 11.4l1.2 11.4c0.4 3.8 1 7.6 1.6 11.4 0.6 3.8 1.4 7.6 2.2 11.2 0.8 3.8 1.6 7.4 2.6 11.2 1 3.6 2 7.4 3 11 1 3.6 2.2 7.2 3.4 10.8 1.2 3.6 2.6 7.2 4 10.8 1.4 3.6 2.8 7 4.4 10.6 1.6 3.4 3 7 4.8 10.4 1.6 3.4 3.4 6.8 5.2 10.2 1.8 3.4 3.6 6.6 5.6 10l6 9.6c4.2 6.6 6.6 11.6 5.8 15L277.2 910c0 0.2 0 0.6-0.2 0.8v1c0 0.4 0 0.6 0.2 0.8 0 0.2 0.2 0.6 0.2 0.8 0 0.2 0.2 0.6 0.4 0.8 0.2 0.2 0.2 0.6 0.4 0.8 0.2 0.2 0.4 0.4 0.6 0.8l0.6 0.6 0.6 0.6c0.2 0.2 0.4 0.4 0.8 0.4 0.2 0.2 0.6 0.2 0.8 0.4 0.2 0 0.6 0.2 0.8 0.2 0.2 0 0.6 0 0.8 0.2h0.8c0.2 0 0.6 0 0.8-0.2 0.2 0 0.6-0.2 0.8-0.2l114.2-42.2c3.4-1.4 7.2-2.2 10.8-2 3.8 0 7.4 0.8 10.8 2.4 34.2 14 72 22.4 109.8 22.4 9 0 18-0.4 27-1.2 9-0.8 17.8-2.2 26.6-3.8 8.8-1.8 17.6-3.8 26.2-6.4 8.6-2.6 17.2-5.6 25.6-9a274.252 274.252 0 0 0 48-25.2c7.6-5 15-10.4 22-16 7.2-5.8 14-11.8 20.4-18.2 0.6-0.6 1-1.2 1.4-1.8 0.4-0.8 0.6-1.4 0.8-2.2 0.2-0.8 0.2-1.6 0-2.4-0.2-0.8-0.4-1.6-0.6-2.2-0.4-0.8-0.8-1.4-1.4-2-0.6-0.6-1.2-1-1.8-1.4-0.6-0.4-1.4-0.6-2.2-0.8-0.8 0.2-1.4 0.2-2.2 0.2z';

const dsl = {
acts: [
{
id: 'defaultAct',
scenes: [
{
id: 'defaultScene',
actions: [
{
characterId: [
'background-1',
'background-2',
'title',
'chart',
'list-1-icon',
'list-1-text',
'list-2-icon',
'list-2-text',
'list-3-icon',
'list-3-text',
'list-4-icon',
'list-4-text'
],
characterActions: [
{
action: 'appear'
}
]
}
]
}
]
}
],
characters: [
{
id: 'background-1',
type: 'Rect',
zIndex: 0,
position: {
x: -150,
y: 610,
width: 400,
height: 400,

angle: Math.PI / 4 - 0.2
},
options: {
graphic: {
fill: 'rgb(242,242,242)'
}
}
},
{
id: 'background-2',
type: 'Rect',
zIndex: 0,
position: {
x: -150,
y: 600,
width: 300,
height: 300,
angle: Math.PI / 4
},
options: {
graphic: {
fill: 'rgb(217,217,217)'
}
}
},
{
id: 'title',
type: 'Text',
zIndex: 0,
position: {
x: 420,
y: 50,
width: 600,
height: 200
},
options: {
graphic: {
text: 'Marketing Wordcloud',
textAlign: 'left',
fontSize: 40,
fontWeight: 'bold',
fill: '#000'
}
}
},
{
id: 'chart',
type: 'VChart',
zIndex: 0,
position: {
x: 120,
y: 140,
width: 600,
height: 450
},
options: {
spec: {
type: 'wordCloud',
maskShape:
'<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1084"><path d="M39.68 467.382857C39.68 248.502857 251.117714 71.04 512 71.04c260.845714 0 472.32 177.444571 472.32 396.306286 0 218.898286-211.474286 396.361143-472.32 396.361143-28.324571 0-56.009143-2.102857-82.962286-6.089143l-0.164571-0.036572c-63.798857-15.213714-90.806857 55.734857-236.196572 92.525715-29.860571 7.570286-33.462857 0.036571-10.587428-24.228572 41.398857-43.812571 81.298286-115.236571 39.826286-145.773714-1.28-0.731429-17.261714-11.776-23.350858-16.237714-97.462857-72.594286-158.884571-178.596571-158.884571-296.521143z" p-id="1085"></path></svg>',
nameField: 'name',
valueField: 'value',
seriesField: 'name',
seriesStyle: [
{
name: 'MARKETING',
word: {
style: {
fill: 'rgb(51,133,105)'
}
}
}
],
colorList: ['#000'],
wordCloudShapeConfig: {
fillingColorList: ['#000']
},
data: [
{
name: 'data',
values: [
{ name: 'MARKETING', value: 1000 },
{ name: 'SALES', value: 500 },
{ name: 'INTERNET', value: 500 },
{ name: 'ACCOUNT', value: 500 },
{ name: 'DEVELOP', value: 200 },
{ name: 'ORGANIZATION', value: 200 },
{ name: 'CUSTOMERS', value: 200 },
{ name: 'BUDGET', value: 200 },
{ name: 'RESEARCH', value: 100 },
{ name: 'SOCIAL', value: 10 },
{ name: 'AGGRESSIVE', value: 10 },
{ name: 'PLANNING', value: 10 },
{ name: 'MEDIA', value: 10 },
{ name: 'TARGET', value: 10 },
{ name: 'ADVANCE', value: 10 },
{ name: 'INNOVATE', value: 10 },
{ name: 'IDEA', value: 10 },
{ name: 'TEAM', value: 10 },
{ name: 'PROMOTION', value: 10 },
{ name: 'ACCOMPLISHMENT', value: 10 },
{ name: 'BELIEF', value: 10 },
{ name: 'NEWS', value: 10 },
{ name: 'SUCCESS', value: 10 },
{ name: 'GROWING', value: 10 },
{ name: 'SEGMENT', value: 10 },
{ name: 'DIVISION', value: 10 },
{ name: 'STRATEGY', value: 10 },
{ name: 'REFRESH', value: 10 },
{ name: 'DESIGN', value: 10 },
{ name: 'CONTEST', value: 10 },
{ name: 'ARCHITECTURE', value: 10 },
{ name: 'CREATIVE', value: 10 },
{ name: 'COMPANY', value: 10 },
{ name: 'INQUIRY', value: 10 },
{ name: 'DESTINATION', value: 10 },
{ name: 'MATCH', value: 10 },
{ name: 'ADMIT', value: 10 },
{ name: 'AMOUNT', value: 10 },
{ name: 'FORWARD', value: 10 },
{ name: 'ACCEPT', value: 10 },
{ name: 'COOL', value: 10 },
{ name: 'VIRAL', value: 10 },
{ name: 'MASS', value: 10 },
{ name: 'CONSTRUCTION', value: 10 },
{ name: 'INNOVATION', value: 10 }
]
}
],
color: {
type: 'ordinal',
// domain: ['a', 'b'],
// range: ['#000', '#000'],
specified: {
MARKETING: 'green',
d: 'red'
}
}
}
}
},
{
id: 'list-1-icon',
type: 'Shape',
zIndex: 0,
position: {
x: 700,
y: 155,
width: 30,
height: 30
},
options: {
graphic: {
symbolType: chartPath,
fill: '#ddd'
}
}
},
{
id: 'list-1-text',
type: 'Text',
zIndex: 0,
position: {
x: 780,
y: 163,
width: 450,
height: 200
},
options: {
graphic: {
text: 'MARKETING strategies require continuous INNOVATION and CREATIVE approaches to effectively engage CUSTOMERS.',
textAlign: 'left',
fontSize: 18,
fontWeight: 'bold',
fill: '#aaa',
wordBreak: 'break-word'
}
}
},
{
id: 'list-2-icon',
type: 'Shape',
zIndex: 0,
position: {
x: 700,
y: 255,
width: 30,
height: 30
},
options: {
graphic: {
symbolType: chartPath,
fill: '#ddd'
}
}
},
{
id: 'list-2-text',
type: 'Text',
zIndex: 0,
position: {
x: 780,
y: 260,
width: 450,
height: 200
},
options: {
graphic: {
text: 'Successful SALES not only depend on the BUDGET but also on thorough RESEARCH and market INQUIRY.',
textAlign: 'left',
fontSize: 18,
fontWeight: 'bold',
fill: '#aaa',
wordBreak: 'break-word'
}
}
},
{
id: 'list-3-icon',
type: 'Shape',
zIndex: 0,
position: {
x: 700,
y: 355,
width: 30,
height: 30
},
options: {
graphic: {
symbolType: chartPath,
fill: '#ddd'
}
}
},
{
id: 'list-3-text',
type: 'Text',
zIndex: 0,
position: {
x: 780,
y: 360,
width: 450,
height: 200
},
options: {
graphic: {
text: 'In the INTERNET age, SOCIAL media plays a crucial role in PROMOTION and reaching the TARGET audience.',
textAlign: 'left',
fontSize: 18,
fontWeight: 'bold',
fill: '#aaa',
wordBreak: 'break-word'
}
}
},
{
id: 'list-4-icon',
type: 'Shape',
zIndex: 0,
position: {
x: 700,
y: 455,
width: 30,
height: 30
},
options: {
graphic: {
symbolType: chartPath,
fill: '#ddd'
}
}
},
{
id: 'list-4-text',
type: 'Text',
zIndex: 0,
position: {
x: 780,
y: 460,
width: 450,
height: 200
},
options: {
graphic: {
text: 'A strong ORGANIZATION focuses on PLANNING and DEVELOP to achieve SUCCESS and ACCOMPLISHMENT in their goals.',
textAlign: 'left',
fontSize: 18,
fontWeight: 'bold',
fill: '#aaa',
wordBreak: 'break-word'
}
}
}
]
};

const story = new Story(dsl, { canvas, width: 1280, height: 720, background: '#FFF' });
const player = new Player(story);
story.init(player);
player.play(-1);

return () => {
story.release();
};
}, []);

return <div style={{ width: '100%', height: '100%' }} id={id}></div>;
};
Loading

0 comments on commit 940fa7d

Please sign in to comment.