LineChart

import React from 'react';

import { Chart } from '@react-magma/charts';

const data = [
  {
    name: 'Team 1',
    data: [
      { x: 1, y: 39, label: 'Team 1, January, $39k' },
      { x: 2, y: 28, label: 'Team 1, February, $28k' },
      { x: 3, y: 35, label: 'Team 1, March, $35k' },
      { x: 4, y: 44, label: 'Team 1, April, $44k' },
      { x: 5, y: 21, label: 'Team 1, May, $21k' },
    ],
  },
  {
    name: 'Team 2',
    data: [
      { x: 1, y: 27, label: 'Team 2, January, $27k' },
      { x: 2, y: 33, label: 'Team 2, February, $33k' },
      { x: 3, y: 39, label: 'Team 2, March, $39k' },
      { x: 4, y: 28, label: 'Team 2, April, $28k' },
      { x: 5, y: 19, label: 'Team 2, May, $19k' },
    ],
  },
  {
    name: 'Team 3',
    data: [
      { x: 1, y: 32, label: 'Team 3, January, $32k' },
      { x: 2, y: 41, label: 'Team 3, February, $41k' },
      { x: 3, y: 45, label: 'Team 3, March, $45k' },
      { x: 4, y: 56, label: 'Team 3, April, $56k' },
      { x: 5, y: 48, label: 'Team 3, May, $48k' },
    ],
  },
  {
    name: 'Team 4',
    data: [
      { x: 1, y: 48, label: 'Team 4, January, $48k' },
      { x: 2, y: 66, label: 'Team 4, February, $66k' },
      { x: 3, y: 52, label: 'Team 4, March, $52k' },
      { x: 4, y: 36, label: 'Team 4, April, $36k' },
      { x: 5, y: 10, label: 'Team 4, May, $10k' },
    ],
  },
];

const componentProps = {
  xAxis: {
    label: '2019 Annual Sales Figures',
    tickFormat: ['Jan', 'Feb', 'March', 'April', 'May'],
  },
  yAxis: {
    domain: [10, 80],
    label: 'Conversion Rate',
    tickFormat: t => `$${t}k`,
    tickValues: [10, 20, 30, 40, 50, 60, 70, 80],
  },
};

export function Example() {
  return (
    <Chart
      componentProps={componentProps}
      data={data}
      description="description - Lorem ipsum dolor sitamet, consectetur adipiscing elit."
      title="Annual sales figures for 2019"
      type="line"
    />
  );
}