Skip to content

Commit

Permalink
feat: support vchart model pick
Browse files Browse the repository at this point in the history
  • Loading branch information
@xuefei1313
xuefei1313 committed Aug 28, 2024
1 parent 3ec08c8 commit c6a3852
Show file tree
Hide file tree
Showing 9 changed files with 159 additions and 293 deletions.
1 change: 0 additions & 1 deletion packages/vstory/demo/src/demos/Playground.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { Story } from '../../../src/story/story';
import { Edit } from '../../../src/edit/edit';
import '../../../src/story/index';
import { cloneDeep } from '@visactor/vutils';
import { CommonEditComponent } from '../../../src/edit/edit-component/common';
import { BoxSelection } from '../../../src/edit/edit-component/box-selection';
import { TextSelection } from '../../../src/edit/edit-component/text-selection';
import { RichTextSelection } from '../../../src/edit/edit-component/richtext-selection';
Expand Down
334 changes: 95 additions & 239 deletions packages/vstory/demo/src/demos/VChartGraphic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,263 +3,115 @@ import { IStorySpec } from '../../../src/story/interface';
import { Story } from '../../../src/story/story';
import '../../../src/story/index';
import { Edit } from '../../../src/edit/edit';
import { CommonEditComponent } from '../../../src/edit/edit-component/common';
import { BoxSelection } from '../../../src/edit/edit-component/box-selection';
import { TextSelection } from '../../../src/edit/edit-component/text-selection';
import { RichTextSelection } from '../../../src/edit/edit-component/richtext-selection';

Edit.registerEditComponent('common', CommonEditComponent);
Edit.registerEditComponent('text', TextSelection);
Edit.registerEditComponent('richtext', RichTextSelection);
Edit.registerEditComponent('box-selection', BoxSelection);

const goldenMedals = {
2000: [
{ country: 'USA', value: 37 },
{ country: 'Russia', value: 32 },
{ country: 'China', value: 28 },
{ country: 'Australia', value: 16 },
{ country: 'Germany', value: 13 },
{ country: 'France', value: 13 },
{ country: 'Italy', value: 13 },
{ country: 'Netherlands', value: 12 },
{ country: 'Cuba', value: 11 },
{ country: 'U.K.', value: 11 }
],
2004: [
{ country: 'USA', value: 36 },
{ country: 'China', value: 32 },
{ country: 'Russia', value: 28 },
{ country: 'Australia', value: 17 },
{ country: 'Japan', value: 16 },
{ country: 'Germany', value: 13 },
{ country: 'France', value: 11 },
{ country: 'Italy', value: 10 },
{ country: 'South Korea', value: 9 },
{ country: 'U.K.', value: 9 }
],
2008: [
{ country: 'China', value: 48 },
{ country: 'USA', value: 36 },
{ country: 'Russia', value: 24 },
{ country: 'U.K.', value: 19 },
{ country: 'Germany', value: 16 },
{ country: 'Australia', value: 14 },
{ country: 'South Korea', value: 13 },
{ country: 'Japan', value: 9 },
{ country: 'Italy', value: 8 },
{ country: 'France', value: 7 }
],
2012: [
{ country: 'USA', value: 46 },
{ country: 'China', value: 39 },
{ country: 'U.K.', value: 29 },
{ country: 'Russia', value: 19 },
{ country: 'South Korea', value: 13 },
{ country: 'Germany', value: 11 },
{ country: 'France', value: 11 },
{ country: 'Australia', value: 8 },
{ country: 'Italy', value: 8 },
{ country: 'Hungary', value: 8 }
],
2016: [
{ country: 'USA', value: 46 },
{ country: 'U.K.', value: 27 },
{ country: 'China', value: 26 },
{ country: 'Russia', value: 19 },
{ country: 'Germany', value: 17 },
{ country: 'Japan', value: 12 },
{ country: 'France', value: 10 },
{ country: 'South Korea', value: 9 },
{ country: 'Italy', value: 8 },
{ country: 'Australia', value: 8 }
],
2020: [
{ country: 'USA', value: 39 },
{ country: 'China', value: 38 },
{ country: 'Japan', value: 27 },
{ country: 'U.K.', value: 22 },
{ country: 'Russian Olympic Committee', value: 20 },
{ country: 'Australia', value: 17 },
{ country: 'Netherlands', value: 10 },
{ country: 'France', value: 10 },
{ country: 'Germany', value: 10 },
{ country: 'Italy', value: 10 }
]
};

const colors = {
China: '#d62728',
USA: '#1664FF',
Russia: '#B2CFFF',
'U.K.': '#1AC6FF',
Australia: '#94EFFF',
Japan: '#FF8A00',
Cuba: '#FFCE7A',
Germany: '#3CC780',
France: '#B9EDCD',
Italy: '#7442D4',
'South Korea': '#DDC5FA',
'Russian Olympic Committee': '#B2CFFF',
Netherlands: '#FFC400',
Hungary: '#FAE878'
};

const dataSpecs = Object.keys(goldenMedals).map(year => {
return {
data: [
{
id: 'id',
values: goldenMedals[year]
.sort((a, b) => b.value - a.value)
.map(v => {
return { ...v, fill: colors[v.country] };
})
},
{
id: 'year',
values: [{ year }]
}
]
};
});
const duration = 1000;
const exchangeDuration = 600;

const spec = {
type: 'bar',
padding: {
top: 12,
right: 100,
bottom: 12
},
data: dataSpecs[0].data,
data: [
{
id: 'barData',
values: [
{
name: 'Apple',
value: 214480
},
{
name: 'Google',
value: 155506
},
{
name: 'Amazon',
value: 100764
},
{
name: 'Microsoft',
value: 92715
},
{
name: 'Coca-Cola',
value: 66341
},
{
name: 'Samsung',
value: 59890
},
{
name: 'Toyota',
value: 53404
},
{
name: 'Mercedes-Benz',
value: 48601
},
{
name: 'Facebook',
value: 45168
},
{
name: "McDonald's",
value: 43417
},
{
name: 'Intel',
value: 43293
},
{
name: 'IBM',
value: 42972
},
{
name: 'BMW',
value: 41006
},
{
name: 'Disney',
value: 39874
},
{
name: 'Cisco',
value: 34575
},
{
name: 'GE',
value: 32757
},
{
name: 'Nike',
value: 30120
},
{
name: 'Louis Vuitton',
value: 28152
},
{
name: 'Oracle',
value: 26133
},
{
name: 'Honda',
value: 23682
}
]
}
],
direction: 'horizontal',
yField: 'country',
xField: 'value',
seriesField: 'country',
bar: {
style: {
fill: datum => datum.fill
}
},
yField: 'name',
axes: [
{
animation: true,
orient: 'bottom',
type: 'linear',
visible: true,
max: 50,
grid: {
visible: true
}
},
{
animation: true,
id: 'axis-left',
orient: 'left',
width: 130,
tick: { visible: false },
label: { visible: true },
type: 'band'
visible: false
}
],
title: {
label: {
visible: true,
text: 'Top 10 Olympic Gold Medals by Country Since 2000'
},
animationUpdate: {
bar: [
{
type: 'update',
options: { excludeChannels: ['y'] },
easing: 'linear',
duration
},
{
channel: ['y'],
easing: 'circInOut',
duration: exchangeDuration
}
],
axis: {
duration: exchangeDuration,
easing: 'circInOut'
}
},
animationEnter: {
bar: [
{
type: 'moveIn',
duration: exchangeDuration,
easing: 'circInOut',
options: {
direction: 'y',
orient: 'negative'
}
}
]
},
animationExit: {
bar: [
{
type: 'fadeOut',
duration: exchangeDuration
}
]
},
customMark: [
{
type: 'text',
dataId: 'year',
style: {
textBaseline: 'bottom',
fontSize: 200,
textAlign: 'right',
fontFamily: 'PingFang SC',
fontWeight: 600,
text: datum => datum.year,
x: (datum, ctx) => {
return ctx.vchart.getChart().getCanvasRect()?.width - 50;
},
y: (datum, ctx) => {
return ctx.vchart.getChart().getCanvasRect()?.height - 50;
},
fill: 'grey',
fillOpacity: 0.5
}
}
],
player: {
type: 'continuous',
orient: 'bottom',
auto: true,
loop: true,
dx: 80,
position: 'middle',
interval: duration,
specs: dataSpecs,
slider: {
railStyle: {
height: 6
}
},
controller: {
backward: {
style: {
size: 12
}
},
forward: {
style: {
size: 12
}
},
start: {
order: 1,
position: 'end'
}
}
animation: false
}
};

Expand Down Expand Up @@ -334,6 +186,8 @@ export const VChartGraphic = () => {
payload: {
style: {},
animation: {
effect: 'move',
move: { pos: 'top' },
duration: 1000,
easing: 'linear'
} as any
Expand All @@ -351,6 +205,8 @@ export const VChartGraphic = () => {
payload: {
style: {},
animation: {
effect: 'fade',
move: { pos: 'top' },
duration: 1000,
easing: 'linear'
} as any
Expand Down
1 change: 0 additions & 1 deletion packages/vstory/demo/src/demos/lv/bar1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { Story } from '../../../../src/story/story';
import { Edit } from '../../../../src/edit/edit';
import '../../../../src/story/index';
import { cloneDeep } from '@visactor/vutils';
import { CommonEditComponent } from '../../../../src/edit/edit-component/common';
import { BoxSelection } from '../../../../src/edit/edit-component/box-selection';
import { TextSelection } from '../../../../src/edit/edit-component/text-selection';
import { RichTextSelection } from '../../../../src/edit/edit-component/richtext-selection';
Expand Down
Loading

0 comments on commit c6a3852

Please sign in to comment.