Crypto tracker #5 Chart

---

Chart

• 차트 가보자고~
• Chart 를 만들기 위해 'Coin.tsx' 에 있는 coinId 값을, 'Chart.tsx' 파일로 props 통해 보내주기.

- Coin.tsx

 <Routes>
   <Route path="chart" element={<Chart coinId={coinId!} />} />

- Chart.tsx

interface ChartProps {
  coinId: string;
}

function Chart({ coinId }: ChartProps) {

• 그리고 typescript 에게 알려줄 interface 를 만들어줌
• 이제 우리는 coinId 를 가지고 있으니, API 에 request 를 보내서 가격을 가져올 수 있다.
• 원래 사용했던 Coinpaprika API 가 더이상 무료가 아니게되어,
  니코가 만든 자체 Api 로 만듦!
  (https://ohlcv-api.nomadcoders.workers.dev?coinId=btc-bitcoin)

-api.ts

export function fetchCoinHistory(coinId: string) {
  return fetch(
    `https://ohlcv-api.nomadcoders.workers.dev/?coinId=${coinId}`
  ).then(respons => respons.json());
}

• 이제 useQuery 로 fetcher 함수를 가져와 넣어주자

- Chart.tsx

import { fetchCoinHistory } from "../api";

interface IHistorical {
  time_open: string;
  time_close: number;
  open: number;
  high: number;
  low: number;
  close: string;
  volume: number;
  market_cap: number;
}

const { isLoading, data } = useQuery<IHistorical[]>(
    ["ohlcv", coinId],
    () => fetchCoinHistory(coinId),
    {
      refetchInterval: 10000,
    }
  );

ApexCharts.js

• 사용하기 위해 설치 : npm install --save react-apexcharts apexcharts
• import : import ApexChart from "react-apexcharts";
  (이미 Chart 컴포넌트를 가지고 있어서, ApexChart 로 import 함)
• 사용

return <div> {isLoading ? "Loading Chart ..." : <ApexChart />}

• <ApexChart /> 컴포넌트 안에 props 를 사용해 원하는 차트로 만들어줄 수 있다.
  • type : 차트 유형 (String) (기본값 ‘line’)
  • series : 차트에 표시하려는 데이터 (Array) (기본값 undefined)
  • width, height
    • 차트의 너비 (String || Number) ( 기본값 ‘100%’)
    • 차트의 높이 (String || Number) (기본값 auto)
  • options : 차트의 구성 옵션 (Object) ( 기본값 {})

<ApexChart
      type="line"
      series={[
        {
          name: "Price",
          data: data?.map(price => parseFloat(price.close)) ?? [],
          // → close 데이터가 string이기 때문에 parseFloat를 통해 형 변환
        },
      ]}
      options={{
        theme: { mode: isDark ? "dark" : "light" },
        chart: {
          height: 300,
          width: 500,
          toolbar: { show: false },
          background: "transparent",
        },
        grid: {
          show: false,
        },
        yaxis: {
          show: false,

• 문서를 보면서 원하는데로 만들어주면 된다!
• time_close 에 현재 날짜가 초단위로 들어오고 있어서
  변환해줬다...

      xaxis: {
        axisBorder: { show: false },
        axisTicks: { show: false },
        labels: {
          show: false,
        },
        type: "datetime",
        categories: data?.map(price =>
          new Date(price.time_close * 1000).toISOString() <<<----
        ),
      },

• 차트 디자인은 아래와 같이

      stroke: {
        curve: "smooth",
        width: 4,
      },
      fill: {
        type: "gradient",
        gradient: {
          gradientToColors: ["#0be881"],
          stops: [0, 100],
        },
      },
      colors: ["#0fbcf9"],
      tooltip: {
        y: {
          formatter: value => `$${value.toFixed(2)}`,
        },
      },

그럼 이렇게 깔끔띠한 차트가 완성 ,, ~

• 그리고 useQuery 를 5초마다 refetch 시켜주는 useQuery hook 의 3번째 argument 를 넣어주었다.

useQuery<PriceData>(
    ["tickers", "coinId"],
    () => fetchCoinTickers(coinId),
    {
      refetchInterval: 5000,  <<<----
    }
  );

• DONE!

React Helmet

• 설치

npm i react-helmet
npm i --save-dev @types/react-helmet

• 어떤것을 render 하던 그게 문서의 head 로 가는 것
• 즉, 직접 정했거나

- Coin.tsx

import { Helmet } from "react-helmet";

        <Helmet>
          {/* react-helmet 사용 */}
          <title>
            {state?.name ? state.name : loading ? "Loading..." : infoData?.name}
          </title>
        </Helmet>

• 이렇게 하면, bitcoin 페이지에 들어갔을 때
  

코인 이름이 head로 가게되는 걸 볼수 있다 :)

---

• APEX CHARTS 🚩 https://apexcharts.com / https://apexcharts.com/docs/react-charts
• React Helmet 🚩 https://www.npmjs.com/package/react-helmet