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