#5.12 Price Chart

[one option]

• useParams
  but, Coin component가 이미 coinId를 가지고 있으므로, Chart에서 또다시 useParams를 쓸 필요는 없다. => Coin에서 Chart로 props를 보냄 =>
  물론 Chart는 coinId에 대한 interface가 없으므로 만들어주어야 한다.

Apexcharts사용 예시

<ApexChart
        type="line"
        series={[
            {
                name: "hello",
                data: [1, 2, 3, 4, 5, 6]
            },
            {
                name: "sales",
                data: [10, 20, 30, 40, 50, 60]
            }
        ]}
        options={{
            chart: {
                height: 500,
                width: 500,
            }
        }} />

typescript debug.. as number[]가 무엇이길래.....

data: data?.map(price => Number(price.close)) as number[]

차트 코드..custom

function Chart({ coinId }: ChartProps) {
    const { isLoading, data } = useQuery<IHistorical[]>(["ohlcv", coinId], () => fetchCoinHistory(coinId))
    return <div>{isLoading ? "Loading chart..." : <ApexChart
        type="line"
        series={[
            {
                name: "Price",
                data: data?.map(price => Number(price.close)) as number[]
            },

        ]}
        options={{
            theme: {
                mode: "dark"
            },
            chart: {
                height: 300,
                width: 500,
                toolbar: {
                    show: false
                }
                , background: "transparent"
            },
            grid: {
                show: false
            },
            yaxis: { show: false },
            xaxis: {
                categories: data?.map((price) => new Date(price.time_close * 1000).toISOString()),
                labels: { show: false },
                axisTicks: { show: false },
                type: "datetime",
                axisBorder: { show: false }
            },
            stroke: {
                curve: "smooth",
                width: 5,
            },
            fill: { type: "gradient", gradient: { gradientToColors: ["blue"], stops: [0, 100] } },
            colors: ["red"],
            tooltip: { y: { formatter: (value) => `$ ${value.toFixed(1)}` } }
        }} />}</div>;
}

useQuery의 3번째 훅!! => refetch interval milliseconds 단위로 가능

const { isLoading: tickersLoading, data: tickersData } = useQuery<PriceData>(coinId, () => fetchTickers(coinId), { refetchInterval: 5000 })

React-Helmet
-> 문서의 head로 가게 한다.

<Helmet>
	<title>{state?.name ? state.name : loading ? "Loading..." : infoData?.name}
    </title>
</Helmet>