import React from 'react';

import { Chart, LineSeries, ScaleType, Position, Settings, Axis } from '../src';
import { SeededDataGenerator } from '../src/mocks/utils';

export class Playground extends React.Component<{}, { isSunburstShown: boolean }> {
  render() {
    const dg = new SeededDataGenerator();
    const data = dg.generateGroupedSeries(10, 2).map((item) => ({
      ...item,
      y1: item.y + 100,
    }));

    return (
      <>
        <div className="chart">
          <Chart>
            <Settings showLegend />
            <Axis id="y1" groupId="g1" position={Position.Left} title={'y1'} />
            <Axis id="y2" groupId="g2" position={Position.Left} title={'y2'} />
            <Axis id="x" position={Position.Bottom} title={'x'} />
            <LineSeries
              id={'aaa'}
              xScaleType={ScaleType.Linear}
              xAccessor={'x'}
              yAccessors={['y', 'y1']}
              splitSeriesAccessors={['g']}
              data={data}
            />
          </Chart>
        </div>
      </>
    );
  }
}