import docs from "./pn-charts-card-docs.json";

export default {
  title: 'Components/Charts/Charts Card',
  parameters: {
    notes: docs,
    layout: 'fullscreen',
  },
};

const TemplateChartsCardOne = ({ ...args }) => {
  return `
  <pn-breakpoints></pn-breakpoints>

  <div style="width:100%; display:flex; flex-direction:row; gap:16px;">
     <div class="fullwidth" style="width:100%; padding:16px 0;">
        <pn-charts-card
          header="${args.header}"
          highlight="${args.highlight}"
          preamble="${args.preamble}"
          label="${args.label}"
          source="${args.source}"
          source-url="${args.sourceUrl}"
          cta-link-text="Läs rapporten"
          open-in-new-window="${args.openInNewWindow}"
          data-chart-color="blue"
        >
            <pn-chart data-chart-type="bar" slot="chart" labels='["XSmall", "Small", "Medium"]' data-sets='[{ "label": "# of packages in billions", "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [50, 100, 500] }, { "label": "# of packages in billions", "backgroundColor": ["red", "green", "pink"], "data": [70, 110, 600] }]'></pn-chart>

        </pn-charts-card>
    </div>
  </div>

  <div style="width:100%; display:flex; flex-direction:row; gap:16px;">
     <div class="onethirdwidth" style="width:33%; padding:16px 0;">
        <pn-charts-card
          header="${args.header}"
          highlight="${args.highlight}"
          preamble="${args.preamble}"
          label="${args.label}"
          source="${args.source}"
          source-url="${args.sourceUrl}"
          open-in-new-window="${args.openInNewWindow}"
          data-chart-color="blue"
        >
            <pn-chart data-chart-type="doughnut" slot="chart" labels='["XSmall", "Small", "Medium"]' data-sets='[{ "label": "# of packages in billions", "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [50, 100, 500] }]'></pn-chart>

        </pn-charts-card>
      </div>

    <div class="onethirdwidth" style="width:33%; padding:16px 0;">
    <pn-charts-card
          header="${args.header}"
          highlight="${args.highlight}"
          preamble="${args.preamble}"
          label="${args.label}"
          source="${args.source}"
          source-url="${args.sourceUrl}"
          open-in-new-window="${args.openInNewWindow}"
           data-chart-color="green"
        >
            <pn-chart data-chart-type="bar" slot="chart" labels='["Large", "XLarge", "XXLarge"]' data-sets='[{ "label": "# of packages in billions", "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [250, 100, 50] }]'></pn-chart>

      </pn-charts-card>
      </div>

    <div class="onethirdwidth" style="width:33%; padding:16px 0;">
    <pn-charts-card
          header="${args.header}"
          highlight="${args.highlight}"
          preamble="${args.preamble}"
          label="${args.label}"
          source="${args.source}"
          source-url="${args.sourceUrl}"
          open-in-new-window="${args.openInNewWindow}"
          data-chart-color="coral"
        >
          <pn-chart data-chart-type="line" slot="chart" labels='["Jan", "Feb", "Mars"]' data-sets='[{ "label": "# of packages in billions", "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [300, 600, 50] }, { "label": "c02 emission", "borderColor":"green", "fill":true, "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [20, 50, 90] }]'></pn-chart>
      </pn-charts-card>
      </div>
 </div>

    `;
};

export const ChartsCard = TemplateChartsCardOne.bind({});

ChartsCard.args = {
  header: 'The e-commerce grows in all areas',
  highlight: '10%',
  preamble: 'In Q3 we have seen a big growth in e-com.',
  label: 'Stats taken from',
  source: 'E-commerce in Europe 2021',
  sourceUrl: '/',
  openInNewWindow: false,
};
