1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
| import { useQuery } from 'react-query'; import { useOutletContext } from 'react-router'; import { fetchCoinHistory } from '../api'; import ApexChart from 'react-apexcharts';
interface IHistorical { time_open: string; time_close: string; open: number; high: number; low: number; close: number; volume: number; market_cap: number; }
function Chart() { const coinId = useOutletContext() as string; const { isLoading, data } = useQuery<IHistorical[]>(['ohlcv', coinId], () => fetchCoinHistory(coinId)); return ( <div> {isLoading ? ( 'Loading chart...' ) : ( <ApexChart type="line" series={[ { name: 'Price', data: data?.map((price) => price.close) as number[], }, ]} options={{ theme: { mode: 'dark', }, chart: { height: 300, width: 500, toolbar: { show: false, }, background: 'transparent', }, grid: { show: false, }, stroke: { curve: 'smooth', width: 4, }, yaxis: { show: false, }, xaxis: { type: 'datetime', categories: data?.map((price) => price.time_close), labels: { style: { colors: '#9c88ff', }, }, }, fill: { type: 'gradient', gradient: { gradientToColors: ['blue'], stops: [0, 100], }, }, colors: ['red'], tooltip: { y: { formatter: (value) => `$${value.toFixed(2)}`, }, }, }} /> )} </div> ); }
export default Chart;
|