Skip to content

Commit

Permalink
refactor: split demo chart spec
Browse files Browse the repository at this point in the history
  • Loading branch information
xiaoluoHe committed Jun 11, 2024
1 parent db3683d commit 5ea3237
Show file tree
Hide file tree
Showing 18 changed files with 1,251 additions and 1,268 deletions.
66 changes: 66 additions & 0 deletions packages/vchart-theme-demo-component/src/spec/area.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
export const areaSpec = {
type: 'area',
seriesMark: 'line',
data: {
values: [
{ type: 'Nail polish', country: 'Africa', value: 4229 },
{ type: 'Nail polish', country: 'China', value: 3054 },
{ type: 'Nail polish', country: 'USA', value: 12814 },
{ type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
{ type: 'Eyebrow pencil', country: 'China', value: 5067 },
{ type: 'Eyebrow pencil', country: 'USA', value: 13012 },
{ type: 'Rouge', country: 'Africa', value: 5221 },
{ type: 'Rouge', country: 'China', value: 7004 },
{ type: 'Rouge', country: 'USA', value: 11624 },
{ type: 'Lipstick', country: 'Africa', value: 9256 },
{ type: 'Lipstick', country: 'China', value: 9054 },
{ type: 'Lipstick', country: 'USA', value: 8814 },
{ type: 'Eyeshadows', country: 'Africa', value: 3308 },
{ type: 'Eyeshadows', country: 'China', value: 12043 },
{ type: 'Eyeshadows', country: 'USA', value: 12998 },
{ type: 'Eyeliner', country: 'Africa', value: 5432 },
{ type: 'Eyeliner', country: 'China', value: 15067 },
{ type: 'Eyeliner', country: 'USA', value: 12321 },
{ type: 'Foundation', country: 'Africa', value: 13701 },
{ type: 'Foundation', country: 'China', value: 10119 },
{ type: 'Foundation', country: 'USA', value: 10342 },
{ type: 'Lip gloss', country: 'Africa', value: 4008 },
{ type: 'Lip gloss', country: 'China', value: 12043 },
{ type: 'Lip gloss', country: 'USA', value: 22998 },
{ type: 'Mascara', country: 'Africa', value: 18712 },
{ type: 'Mascara', country: 'China', value: 10419 },
{ type: 'Mascara', country: 'USA', value: 11261 }
]
},
height: 600,
xField: ['type'],
yField: 'value',
seriesField: 'country',
legends: {
visible: true
},
line: {
style: {
curveType: 'linear'
}
},
point: {
state: {
dimension_hover: {
visible: true,
size: 12
}
}
},
crosshair: {
xField: {
line: {
type: 'line',
style: {
lineWidth: 1
}
}
}
},
stack: false
};
41 changes: 41 additions & 0 deletions packages/vchart-theme-demo-component/src/spec/bar.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
export const barSpec = {
type: 'bar',
data: {
values: [
{ type: 'Autocracies', year: '1930', value: 129 },
{ type: 'Autocracies', year: '1940', value: 133 },
{ type: 'Autocracies', year: '1950', value: 130 },
{ type: 'Autocracies', year: '1960', value: 126 },
{ type: 'Autocracies', year: '1970', value: 117 },
{ type: 'Autocracies', year: '1980', value: 114 },
{ type: 'Autocracies', year: '1990', value: 111 },
{ type: 'Autocracies', year: '2000', value: 89 },
{ type: 'Autocracies', year: '2010', value: 80 },
{ type: 'Autocracies', year: '2018', value: 80 }
]
},
height: 500,
xField: ['year', 'type'],
yField: 'value',
seriesField: 'type',
axes: [
{
orient: 'bottom',
visible: true,
domainLine: { visible: true },
tick: { visible: true }
},
{
orient: 'left',
visible: true,
domainLine: { visible: false },
tick: { visible: false }
}
],
legends: {
visible: true
},
indicator: {
visible: true
}
};
58 changes: 58 additions & 0 deletions packages/vchart-theme-demo-component/src/spec/barGroup.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
export const barGroupSpec = {
type: 'bar',
data: {
values: [
{ type: 'Autocracies', year: '1930', value: 129 },
{ type: 'Autocracies', year: '1940', value: 133 },
{ type: 'Autocracies', year: '1950', value: 130 },
{ type: 'Autocracies', year: '1960', value: 126 },
{ type: 'Autocracies', year: '1970', value: 117 },
{ type: 'Autocracies', year: '1980', value: 114 },
{ type: 'Autocracies', year: '1990', value: 111 },
{ type: 'Autocracies', year: '2000', value: 89 },
{ type: 'Autocracies', year: '2010', value: 80 },
{ type: 'Autocracies', year: '2018', value: 80 },
{ type: 'Democracies', year: '1930', value: 22 },
{ type: 'Democracies', year: '1940', value: 13 },
{ type: 'Democracies', year: '1950', value: 25 },
{ type: 'Democracies', year: '1960', value: 29 },
{ type: 'Democracies', year: '1970', value: 38 },
{ type: 'Democracies', year: '1980', value: 41 },
{ type: 'Democracies', year: '1990', value: 57 },
{ type: 'Democracies', year: '2000', value: 87 },
{ type: 'Democracies', year: '2010', value: 98 },
{ type: 'Democracies', year: '2018', value: 99 },
{ type: 'Price', year: '1930', value: 56 },
{ type: 'Price', year: '1940', value: 122 },
{ type: 'Price', year: '1950', value: 72 },
{ type: 'Price', year: '1960', value: 82 },
{ type: 'Price', year: '1970', value: 67 },
{ type: 'Price', year: '1980', value: 89 },
{ type: 'Price', year: '1990', value: 60 },
{ type: 'Price', year: '2000', value: 123 },
{ type: 'Price', year: '2010', value: 111 },
{ type: 'Price', year: '2018', value: 99 }
]
},
height: 500,
xField: ['year', 'type'],
yField: 'value',
seriesField: 'type',
axes: [
{
orient: 'bottom',
visible: true,
domainLine: { visible: true },
tick: { visible: true }
},
{
orient: 'left',
visible: true,
domainLine: { visible: false },
tick: { visible: false }
}
],
legends: {
visible: true
}
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
export const barGroupHorizontalSpec = {
type: 'bar',
data: {
values: [
{ type: 'Autocracies', year: '1930', value: 129 },
{ type: 'Autocracies', year: '1940', value: 133 },
{ type: 'Autocracies', year: '1950', value: 130 },
{ type: 'Autocracies', year: '1960', value: 126 },
{ type: 'Autocracies', year: '1970', value: 117 },
{ type: 'Autocracies', year: '1980', value: 114 },
{ type: 'Autocracies', year: '1990', value: 111 },
{ type: 'Democracies', year: '1930', value: 22 },
{ type: 'Democracies', year: '1940', value: 13 },
{ type: 'Democracies', year: '1950', value: 25 },
{ type: 'Democracies', year: '1960', value: 29 },
{ type: 'Democracies', year: '1970', value: 38 },
{ type: 'Democracies', year: '1980', value: 41 },
{ type: 'Democracies', year: '1990', value: 57 }
]
},
height: 500,
direction: 'horizontal',
xField: 'value',
yField: ['year', 'type'],
seriesField: 'type',
axes: [
{
orient: 'left',
visible: true,
domainLine: { visible: true },
tick: { visible: true }
},
{
orient: 'bottom',
visible: true,
domainLine: { visible: false },
tick: { visible: false }
}
],
legends: {
visible: true
}
};
62 changes: 62 additions & 0 deletions packages/vchart-theme-demo-component/src/spec/barStacked.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
export const barStackedSpec = {
type: 'bar',
//stack: true,
data: {
values: [
{ type: 'Autocracies', year: '1930', value: 129 },
{ type: 'Autocracies', year: '1940', value: 133 },
{ type: 'Autocracies', year: '1950', value: 130 },
{ type: 'Autocracies', year: '1960', value: 126 },
{ type: 'Autocracies', year: '1970', value: 117 },
{ type: 'Autocracies', year: '1980', value: 114 },
{ type: 'Autocracies', year: '1990', value: 111 },
{ type: 'Autocracies', year: '2000', value: 89 },
{ type: 'Autocracies', year: '2010', value: 80 },
{ type: 'Autocracies', year: '2018', value: 80 },
{ type: 'Democracies', year: '1930', value: 22 },
{ type: 'Democracies', year: '1940', value: 13 },
{ type: 'Democracies', year: '1950', value: 25 },
{ type: 'Democracies', year: '1960', value: 29 },
{ type: 'Democracies', year: '1970', value: 38 },
{ type: 'Democracies', year: '1980', value: 41 },
{ type: 'Democracies', year: '1990', value: 57 },
{ type: 'Democracies', year: '2000', value: 87 },
{ type: 'Democracies', year: '2010', value: 98 },
{ type: 'Democracies', year: '2018', value: 99 },
{ type: 'Price', year: '1930', value: 56 },
{ type: 'Price', year: '1940', value: 122 },
{ type: 'Price', year: '1950', value: 72 },
{ type: 'Price', year: '1960', value: 82 },
{ type: 'Price', year: '1970', value: 67 },
{ type: 'Price', year: '1980', value: 89 },
{ type: 'Price', year: '1990', value: 60 },
{ type: 'Price', year: '2000', value: 123 },
{ type: 'Price', year: '2010', value: 111 },
{ type: 'Price', year: '2018', value: 99 }
]
},
height: 500,
xField: 'year',
yField: 'value',
seriesField: 'type',
axes: [
{
orient: 'bottom',
visible: true,
domainLine: { visible: true },
tick: { visible: true }
},
{
orient: 'left',
visible: true,
domainLine: { visible: false },
tick: { visible: false }
}
],
legends: {
visible: true
},
indicator: {
visible: true
}
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
export const barStackedHorizontalSpec = {
type: 'bar',
//stack: true,
data: {
values: [
{ type: 'Autocracies', year: '1930', value: 129 },
{ type: 'Autocracies', year: '1940', value: 133 },
{ type: 'Autocracies', year: '1950', value: 130 },
{ type: 'Autocracies', year: '1960', value: 126 },
{ type: 'Autocracies', year: '1970', value: 117 },
{ type: 'Autocracies', year: '1980', value: 114 },
{ type: 'Autocracies', year: '1990', value: 111 },
{ type: 'Democracies', year: '1930', value: 22 },
{ type: 'Democracies', year: '1940', value: 13 },
{ type: 'Democracies', year: '1950', value: 25 },
{ type: 'Democracies', year: '1960', value: 29 },
{ type: 'Democracies', year: '1970', value: 38 },
{ type: 'Democracies', year: '1980', value: 41 },
{ type: 'Democracies', year: '1990', value: 57 },
{ type: 'Price', year: '1930', value: 56 },
{ type: 'Price', year: '1940', value: 122 },
{ type: 'Price', year: '1950', value: 72 },
{ type: 'Price', year: '1960', value: 82 },
{ type: 'Price', year: '1970', value: 67 },
{ type: 'Price', year: '1980', value: 89 },
{ type: 'Price', year: '1990', value: 60 },
{ type: 'D', year: '1930', value: 56 },
{ type: 'D', year: '1940', value: 122 },
{ type: 'D', year: '1950', value: 72 },
{ type: 'D', year: '1960', value: 82 },
{ type: 'D', year: '1970', value: 67 },
{ type: 'D', year: '1980', value: 89 },
{ type: 'D', year: '1990', value: 60 },
{ type: 'E', year: '1930', value: 56 },
{ type: 'E', year: '1940', value: 122 },
{ type: 'E', year: '1950', value: 72 },
{ type: 'E', year: '1960', value: 82 },
{ type: 'E', year: '1970', value: 67 },
{ type: 'E', year: '1980', value: 89 },
{ type: 'E', year: '1990', value: 60 }
]
},
height: 500,
direction: 'horizontal',
xField: 'value',
yField: 'year',
seriesField: 'type',
axes: [
{
orient: 'left',
visible: true,
domainLine: { visible: true },
tick: { visible: true }
},
{
orient: 'bottom',
visible: true,
domainLine: { visible: false },
tick: { visible: false }
}
],
legends: {
visible: true
},
indicator: {
visible: true
}
};
Loading

0 comments on commit 5ea3237

Please sign in to comment.