import React from 'react';

import { ResponsiveLine } from '@nivo/line';

export default function Graph(props: any): JSX.Element {

return (
  <div className="nivo">
    <ResponsiveLine
      data={props.data}
      margin={{ top: 20, right: 120, bottom: 64, left: 70 }}
      xScale={{ type: 'point' }}
      yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: true, reverse: false }}
      axisTop={null}
      axisRight={null}
      axisBottom={{
        orient: 'bottom',
        tickSize: 5,
        tickPadding: 5,
        tickRotation: -60,
        legend: 'time',
        legendOffset: 58,
        legendPosition: 'middle'
      }}
      axisLeft={{
        orient: 'left',
        tickSize: 2,
        tickPadding: 5,
        tickRotation: 0,
        legend: 'value',
        legendOffset: -50,
        legendPosition: 'middle',
      }}
      colors={{ scheme: 'nivo' }}
      pointSize={5}
      pointColor={{ theme: 'background' }}
      pointBorderWidth={1}
      pointBorderColor={{ from: 'serieColor' }}
      pointLabel="y"
      pointLabelYOffset={-12}
      animate={props.state.timeframe === 60}
      useMesh={true}
      legends={[
        {
          anchor: 'bottom-right',
          direction: 'column',
          justify: false,
          translateX: 100,
          translateY: 0,
          itemsSpacing: 0,
          itemDirection: 'left-to-right',
          itemWidth: 80,
          itemHeight: 20,
          itemOpacity: 0.75,
          symbolSize: 10,
          symbolShape: 'circle',
          symbolBorderColor: 'rgba(0, 0, 0, .5)',
          effects: [
            {
              on: 'hover',
              style: {
                itemBackground: 'rgba(0, 0, 0, .03)',
                itemOpacity: 1
              }
            }
          ]
        }
      ]}
  />
  </div>
);

}