import React from 'react';
import { Story } from '@storybook/react';

// import { ChartLineGraph } from '../src';
import ChartLineGraph from '../src/ChartLineGraph';
import { ChartLineGraphProps } from '../src/ChartLineGraph/interfaces';

export default {
  title: 'ChartLineGraph',
  component: ChartLineGraph,
  // parameters: {
  //   layout: 'fullscreen',
  //   backgrounds: {
  //     default: 'App',
  //     values: [{ name: 'App', value: '#F8F8F8' }],
  //   },
  // },
};

const Template = (args) => <ChartLineGraph {...args} />;

export const SimpleLineGraph: Story<ChartLineGraphProps> = Template.bind({});
SimpleLineGraph.args = {
  data: {
    labels: [
      '01/12',
      '02/12',
      '03/12',
      '04/12',
      '05/12',
      '06/12',
      '07/12',
      '08/12',
      '09/12',
      '10/12',
    ],
    datasets: [
      {
        label: 'My First dataset',
        data: [null, 65, null, null, 59, null, null, null, 80, null],
        backgroundColor: '#00EA84',
        borderColor: '#00EA84',
        spanGaps: true,
      },
    ],
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    elements: {
      line: {
        tension: 0.5,
        cubicInterpolationMode: 'monotone',
      },
    },
  },
};