/**
 * @format
 */
import React from 'react'
import {ComponentStory, ComponentMeta} from '@storybook/react'
import '../styles/fonts.css'
import {MedianChart} from '../components/ChartsComponents'

export default {
  title: 'VantagePlus/Charts/Median',
  component: MedianChart,
  decorators: [
    Story => (
      <div style={{margin: '1em'}}>
        <Story />
      </div>
    )
  ]
} as ComponentMeta<typeof MedianChart>

const PSFMedianData = [
  {
    TRANSACTION_YEAR: '2018',
    MEDIAN_TRANSACTION_PRICE: '496000',
    MAX_TRANSACTION_PRICE: '586000',
    MIN_TRANSACTION_PRICE: '386000'
  },
  {
    TRANSACTION_YEAR: '2019',
    MEDIAN_TRANSACTION_PRICE: '550000',
    MAX_TRANSACTION_PRICE: '660000',
    MIN_TRANSACTION_PRICE: '440000'
  },
  {
    TRANSACTION_YEAR: '2020',
    MEDIAN_TRANSACTION_PRICE: '580000',
    MAX_TRANSACTION_PRICE: '690000',
    MIN_TRANSACTION_PRICE: '470000'
  },
  {
    TRANSACTION_YEAR: '2021',
    MEDIAN_TRANSACTION_PRICE: '501500',
    MAX_TRANSACTION_PRICE: '621500',
    MIN_TRANSACTION_PRICE: '400500'
  },
  {
    TRANSACTION_YEAR: '2022',
    MEDIAN_TRANSACTION_PRICE: '757500',
    MAX_TRANSACTION_PRICE: '867500',
    MIN_TRANSACTION_PRICE: '647500'
  }
]
const Template: ComponentStory<typeof MedianChart> = args => (
  <MedianChart {...args} />
)

export const Median = Template.bind({})
Median.args = {
  data: PSFMedianData,
  width: 500,
  height: 400
}