/* eslint-disable no-magic-numbers */
import React from 'react';
import { SuperChart } from '@superset-ui/core';
import PivotTableChartPlugin from '@superset-ui/legacy-plugin-chart-pivot-table';
import 'bootstrap/dist/css/bootstrap.min.css';

new PivotTableChartPlugin().configure({ key: 'pivot-table' }).register();

export default {
  title: 'Legacy Chart Plugins|legacy-plugin-chart-pivot-table',
};

const datasource = {
  columnFormats: {},
  verboseMap: {
    sum__num: 'sum__num',
  },
};

export const basic = () => (
  <SuperChart
    chartType="pivot-table"
    width={400}
    height={400}
    datasource={datasource}
    queriesData={[
      {
        data: {
          columns: [
            ['sum__num', 'other'],
            ['sum__num', 'All'],
          ],
          html:
            '<table border="1" class="dataframe dataframe table table-striped table-bordered table-condensed table-hover">\n  <thead>\n    <tr>\n      <th></th>\n      <th colspan="2" halign="left">sum__num</th>\n    </tr>\n    <tr>\n      <th>state</th>\n      <th>other</th>\n      <th>All</th>\n    </tr>\n    <tr>\n      <th>name</th>\n      <th></th>\n      <th></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>Christopher</th>\n      <td>803607</td>\n      <td>803607</td>\n    </tr>\n    <tr>\n      <th>David</th>\n      <td>673992</td>\n      <td>673992</td>\n    </tr>\n    <tr>\n      <th>James</th>\n      <td>749686</td>\n      <td>749686</td>\n    </tr>\n    <tr>\n      <th>Jennifer</th>\n      <td>587540</td>\n      <td>587540</td>\n    </tr>\n    <tr>\n      <th>John</th>\n      <td>638450</td>\n      <td>638450</td>\n    </tr>\n    <tr>\n      <th>Joshua</th>\n      <td>548044</td>\n      <td>548044</td>\n    </tr>\n    <tr>\n      <th>Matthew</th>\n      <td>608212</td>\n      <td>608212</td>\n    </tr>\n    <tr>\n      <th>Michael</th>\n      <td>1047996</td>\n      <td>1047996</td>\n    </tr>\n    <tr>\n      <th>Robert</th>\n      <td>575592</td>\n      <td>575592</td>\n    </tr>\n    <tr>\n      <th>William</th>\n      <td>574464</td>\n      <td>574464</td>\n    </tr>\n    <tr>\n      <th>All</th>\n      <td>6807583</td>\n      <td>6807583</td>\n    </tr>\n  </tbody>\n</table>',
        },
      },
    ]}
    formData={{
      groupby: ['name'],
      numberFormat: '.3s',
    }}
  />
);

export const withNull = () => (
  <SuperChart
    chartType="pivot-table"
    width={400}
    height={400}
    datasource={datasource}
    queriesData={[
      {
        data: {
          columns: [
            ['sum__num', 'other'],
            ['sum__num', 'All'],
          ],
          html:
            '<table border="1" class="dataframe dataframe table table-striped table-bordered table-condensed table-hover">\n  <thead>\n    <tr>\n      <th></th>\n      <th colspan="2" halign="left">sum__num</th>\n    </tr>\n    <tr>\n      <th>state</th>\n      <th>other</th>\n      <th>All</th>\n    </tr>\n    <tr>\n      <th>name</th>\n      <th></th>\n      <th></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>Christopher</th>\n      <td>null</td>\n      <td>803607</td>\n    </tr>\n    <tr>\n      <th>David</th>\n      <td>null</td>\n      <td>673992</td>\n    </tr>\n    <tr>\n      <th>James</th>\n      <td>749686</td>\n      <td>null</td>\n    </tr>\n    <tr>\n      <th>Jennifer</th>\n      <td>587540</td>\n      <td>null</td>\n    </tr>\n    <tr>\n      <th>John</th>\n      <td>638450</td>\n      <td>638450</td>\n    </tr>\n    <tr>\n      <th>Joshua</th>\n      <td>null</td>\n      <td>548044</td>\n    </tr>\n    <tr>\n      <th>Matthew</th>\n      <td>608212</td>\n      <td>608212</td>\n    </tr>\n    <tr>\n      <th>Michael</th>\n      <td>1047996</td>\n      <td>1047996</td>\n    </tr>\n    <tr>\n      <th>Robert</th>\n      <td>575592</td>\n      <td>575592</td>\n    </tr>\n    <tr>\n      <th>William</th>\n      <td>574464</td>\n      <td>574464</td>\n    </tr>\n    <tr>\n      <th>All</th>\n      <td>6807583</td>\n      <td>6807583</td>\n    </tr>\n  </tbody>\n</table>',
        },
      },
    ]}
    formData={{
      groupby: ['name'],
      numberFormat: '.3s',
    }}
  />
);