mirror of https://github.com/nuxt/nuxt.git
93 lines
2.2 KiB
JavaScript
93 lines
2.2 KiB
JavaScript
import {
|
|
nStoriesOfWithDefault,
|
|
action,
|
|
boolean,
|
|
text,
|
|
color,
|
|
array
|
|
} from './storybase.js'
|
|
|
|
import LineChart from '~/components/LineChart'
|
|
|
|
nStoriesOfWithDefault({ LineChart })
|
|
.add('with some data', () => ({
|
|
components: { LineChart },
|
|
template: `
|
|
<div>
|
|
<line-chart :data="{
|
|
labels: [1,2,3],
|
|
datasets: [
|
|
{
|
|
label: 'Sample',
|
|
backgroundColor: 'green',
|
|
data: ['1','2','3']
|
|
}
|
|
]
|
|
}" :options="{ maintainAspectRatio: false, responsive:true}"/>
|
|
</div>`
|
|
}))
|
|
.add('with knobs demo', () => {
|
|
const maintainAspectRatio = boolean('Aspect Ratio', false)
|
|
const responsive = boolean('Responsive', true)
|
|
const title = text('Title', 'Sample chart')
|
|
const myColor = color('Background Color', 'darkred')
|
|
|
|
const defaultValue = array('Values', [1, 2, 3, 6, 3, 8])
|
|
const defaultLabel = array('Labels', [
|
|
"'a'",
|
|
"'b'",
|
|
"'c'",
|
|
"'d'",
|
|
"'e'",
|
|
"'f'"
|
|
])
|
|
|
|
return {
|
|
components: { LineChart },
|
|
methods: { onResize: action('resized') },
|
|
template: `
|
|
<div style="position: relative; height:40vh; width:80vw">
|
|
<line-chart :data="{
|
|
labels: [${defaultLabel}],
|
|
datasets: [
|
|
{
|
|
label: '${title}',
|
|
backgroundColor: '${myColor}',
|
|
data: [${defaultValue}]
|
|
}
|
|
]
|
|
}" :options="{ maintainAspectRatio: ${maintainAspectRatio}, responsive:${responsive}, onResize }"/>
|
|
</div>
|
|
`
|
|
}
|
|
})
|
|
.addVT('with Vuetify', () => {
|
|
const data = { "'a'": 1, "'b'": 2, "'c'": 3 }
|
|
return `
|
|
<line-chart :data="{
|
|
labels: [${Object.keys(data)}],
|
|
datasets: [
|
|
{
|
|
label: 'list 1',
|
|
backgroundColor: '#41b883',
|
|
data: [${Object.values(data)}]
|
|
}
|
|
]
|
|
}" :options="{ maintainAspectRatio: false, responsive:true}"/>
|
|
`
|
|
})
|
|
.addVT(
|
|
'with Vuetify2',
|
|
`<line-chart :data="{
|
|
labels: [1,2,3],
|
|
datasets: [
|
|
{
|
|
label: 'list 2',
|
|
backgroundColor: '#41b883',
|
|
data: ['1','2','3']
|
|
}
|
|
]
|
|
}" :options="{ maintainAspectRatio: false, responsive:true}"/>
|
|
`
|
|
)
|