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}"/>
|
|
`
|
|
)
|