@mozaic-ds/chart
Version:
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
347 lines (341 loc) • 8.03 kB
text/typescript
// RadarChart.stories.ts
import type { Meta, StoryObj } from '@storybook/vue3';
import RadarChart from './RadarChart.vue';
const meta = {
title: 'Charts/Radar',
component: RadarChart
} satisfies Meta<typeof RadarChart>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default = {
args: {
height: '400px',
labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
datasets: [
{
label: 'currentYear',
areaData: [
{
value: 88.524115665,
position: 60.98,
unit: 'D',
label: null,
rate: null,
color: 'red',
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: -3.5998021,
position: 46.4,
unit: '%',
label: null,
rate: null,
color: 'green',
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: 3.1604936,
position: 53.16,
unit: '%',
label: null,
rate: null,
color: 'green',
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: 7.787256,
position: 57.79,
unit: '%',
label: null,
rate: null,
color: 'green',
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: 62.2866732,
position: 79.76,
unit: '%',
label: null,
rate: null,
color: 'red',
trendValue: null,
trendUnit: null,
tooltips: null
}
]
},
{
label: 'previousYear',
areaData: [
{
value: 78.752887008,
position: 67.5,
unit: 'D',
label: null,
rate: null,
color: null,
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: -22.7389942,
position: 27.26,
unit: '%',
label: null,
rate: null,
color: null,
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: -4.9793614,
position: 45.02,
unit: '%',
label: null,
rate: null,
color: null,
trendValue: null,
trendUnit: null,
tooltips: null
}
]
}
]
}
} satisfies Story;
export const MultipleData = {
args: {
height: '400px',
labels: [
'Label 1',
'Label 2',
'Label 3',
'Label 4',
'Label 5',
'Label 6',
'Label 7',
'Label 8',
'Label 9'
],
datasets: [
{
label: 'currentYear',
areaData: [
{
value: 88.524115665,
position: 60.98,
unit: 'D',
label: null,
rate: null,
color: 'red',
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: -3.5998021,
position: 46.4,
unit: '%',
label: null,
rate: null,
color: 'green',
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: 3.1604936,
position: 53.16,
unit: '%',
label: null,
rate: null,
color: 'green',
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: 7.787256,
position: 57.79,
unit: '%',
label: null,
rate: null,
color: 'green',
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: 62.2866732,
position: 79.76,
unit: '%',
label: null,
rate: null,
color: 'red',
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: 3.8,
position: 76,
unit: '*',
label: null,
rate: null,
color: 'red',
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: 86.8082515,
position: 89.45,
unit: '%',
label: null,
rate: null,
color: 'green',
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: 94.8386888,
position: 79.35,
unit: '%',
label: null,
rate: null,
color: 'red',
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: 72.2144111,
position: 54.81,
unit: '%',
label: null,
rate: null,
color: 'red',
trendValue: null,
trendUnit: null,
tooltips: null
}
]
},
{
label: 'previousYear',
areaData: [
{
value: 78.752887008,
position: 67.5,
unit: 'D',
label: null,
rate: null,
color: null,
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: -22.7389942,
position: 27.26,
unit: '%',
label: null,
rate: null,
color: null,
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: -4.9793614,
position: 45.02,
unit: '%',
label: null,
rate: null,
color: null,
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: -22.8576595,
position: 27.14,
unit: '%',
label: null,
rate: null,
color: null,
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: 65.1835015,
position: 83.07,
unit: '%',
label: null,
rate: null,
color: null,
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: 4.181034483,
position: 83.62,
unit: '*',
label: null,
rate: null,
color: null,
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: 86.8082515,
position: 89.45,
unit: '%',
label: null,
rate: null,
color: null,
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: 98.120897,
position: 92.48,
unit: '%',
label: null,
rate: null,
color: null,
trendValue: null,
trendUnit: null,
tooltips: null
},
{
value: 97.2715978,
position: 94.54,
unit: '%',
label: null,
rate: null,
color: null,
trendValue: null,
trendUnit: null,
tooltips: null
}
]
}
]
}
} satisfies Story;