[React] ApexChart๐Ÿ“Š ์‚ฌ์šฉํ•˜๊ธฐ

soyeonยท2022๋…„ 2์›” 1์ผ
9

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
7/31
post-thumbnail


(์ตœ๊ทผ์— ๋งŒ๋“  ์ฝ”์ธ๊ฑฐ๋ž˜์†Œ ํด๋ก ์ฝ”๋”ฉ)

๐Ÿ‘ป๊ทผํ™ฉ

์ตœ๊ทผ ๋ฆฌ์•กํŠธ(+ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ) ๊ณต๋ถ€๋ฅผ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.
์—ฌํƒœ๊นŒ์ง€ HTML, SCSS, JS ์ด๋ ‡๊ฒŒ 3๊ฐœ๋กœ ๋ถ„๋ฆฌํ•ด์„œ ๋งˆํฌ์—…โ†’์Šคํƒ€์ผโ†’์Šคํฌ๋ฆฝํŠธ ์ˆœ์œผ๋กœ ์ž‘์—…ํ–ˆ์—ˆ๋Š”๋ฐ
์ด์ œ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•œ ํŒŒ์ผ ์•ˆ์— ๋งˆํฌ์—…๋ถ€ํ„ฐ ์Šคํƒ€์ผ, ์Šคํฌ๋ฆฝํŠธ๊นŒ์ง€ ๋‹ค ์ž‘์„ฑํ•˜๋‹ˆ.. ํŽธํ•œ ๋“ฏ ํ•˜๋ฉด์„œ ๋ถˆํŽธํ•˜๋„ค์š”ใ…Žใ…Ž
์•”ํŠผ ๋ฆฌ์•กํŠธ ํด๋ก ์ฝ”๋”ฉ์„ ํ•˜๋‹ค๊ฐ€ APEXCHART๋ผ๋Š” ๋ฉ‹์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์•Œ๊ฒŒ ๋˜์–ด์„œ ์ •๋ฆฌ ๊ฒธ ๋ธ”๋กœ๊ทธ์— ๊ณต์œ ํ•ด๋ด…๋‹ˆ๋‹ค.

๐Ÿ‘ปAPEXCHART ์†Œ๊ฐœ

์‚ฌ์ดํŠธ ๋ฐ”๋กœ๊ฐ€๊ธฐ : https://apexcharts.com/

APEXCHART๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์‹œ๊ฐํ™” ํ•ด์ฃผ๋Š” ์ฐจํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.
์„  ๊ทธ๋ž˜ํ”„, ๊ฑฐํ’ˆํ˜•, ํƒ€์ž„๋ผ์ธ, ํžˆํŠธ๋งต๊นŒ์ง€ ๋‹ค์–‘ํ•œ ์Šคํƒ€์ผ๋“ค์ด ์žˆ๊ณ , ๋ฐ˜์‘ํ˜•์— ์ปค์Šคํ…€ ๊ธฐ๋Šฅ๊นŒ์ง€ ๊ตฌํ˜„๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
MIT ๋ผ์ด์„ผ์Šค๋ฅผ ๋ฐ›์€ ์˜คํ”ˆ ์†Œ์Šค๋ผ์„œ ์ƒ์šฉ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ๋„ ๋ฌด๋ฃŒ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค~๐Ÿ˜
์ €๊ฐ™์€ ์ดˆ๋ณด๋“ค๋„ ์‰ฝ๊ฒŒ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ์–ด์š”๐Ÿ˜„


(๋ฐ๋ชจ ํŽ˜์ด์ง€์— ๋“ค์–ด๊ฐ€๋ฉด ์ด๊ฒƒ๋ณด๋‹ค ํ›จ์”ฌ ๋งŽ์€ ์Šคํƒ€์ผ๋“ค์„ ๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.)

์ฐธ๊ณ ๋กœ ์ด ํฌ์ŠคํŠธ์—์„œ๋Š” candlestick(์ฃผ์‹ ์ฐจํŠธst) ์Šคํƒ€์ผ์„ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค^^

๐Ÿ‘ป์„ค์น˜

npm ์„ค์น˜ ใ„ฑใ„ฑ

npm install apexcharts --save

ํŒŒ์ผ์— ์ž„ํฌํŠธ ํ•ด์ฃผ์„ธ์š”

import ApexChart from 'apexcharts'
return (
	<div>
  		<ApexChart />
	</div>
)

๊ทธ๋ƒฅ ์ปดํฌ๋„ŒํŠธ์ฒ˜๋Ÿผ ์“ฐ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ฐธ ์‰ฝ์ฃ ?

๐Ÿ‘ป์‚ฌ์šฉ๋ฐฉ๋ฒ•

APEXCHART๋Š” ์นœ์ ˆํ•˜๊ฒŒ๋„ ์—ฌ๋Ÿฌ ์˜ˆ์ œ ์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฐ๋ชจ ํŽ˜์ด์ง€์— ๋“ค์–ด๊ฐ€๋ฉด ์—ฌ๋Ÿฌ ์œ ํ˜•์˜ ์ฐจํŠธ๋“ค์ด ๋‚˜์˜ค๋Š”๋ฐ ๊ฑฐ๊ธฐ์„œ ๋ง˜์— ๋“œ๋Š” ๊ฑฐ ๊ณจ๋ผ์„œ ์ฐธ๊ณ ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๋ฐ์ดํ„ฐ ์ง‘์–ด๋„ฃ๊ธฐ

์ฐจํŠธ๋ฅผ ๋งŒ๋“ค๋ ค๋ฉด ๋ฐ์ดํ„ฐ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
์ €๋Š” CoinPaprika API๋ฅผ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ์š”.
fetch()์™€ React Query๋ฅผ ์ด์šฉํ•ด ์ตœ๊ทผ 2์ฃผ๊ฐ„์˜ ์ฝ”์ธ์˜ ๊ฐ€๊ฒฉ ์ •๋ณด ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์„œ data์— ์ €์žฅํ–ˆ์Šต๋‹ˆ๋‹ค.

์ œ๊ฐ€ ๊ฐ–๊ณ ์˜จ ์ฝ”์ธ ๋ฐ์ดํ„ฐ์˜ ๋ชจ์Šต(ํƒ€์ž…)์ž…๋‹ˆ๋‹ค. ์ฃผ์•Œ๋ชป์ด๋ผ์„œ ๊ฐ ํ•ญ๋ชฉ์ด ์ •ํ™•ํžˆ ๋ฌด์—‡์„ ๋œปํ•˜๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ๋„ค์š”.
์•”ํŠผ ๋Œ€์ถฉ ์ด๋ ‡๊ฒŒ ์ƒ๊ฒจ๋จน์—ˆ์Šต๋‹ˆ๋‹ค.

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


(๋น„ํŠธ์ฝ”์ธ์˜ ๊ฐ€๊ฒฉ ๋ฐ์ดํ„ฐ)

์ด์ œ ์—ฌ๊ธฐ์„œ ๋ฌธ์ œ๋Š” _์–ด๋–ป๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€๊ณตํ•ด์„œ ๋„ฃ์„๊นŒ.. ์ธ๋ฐ
๊ณต์‹ ๋ฌธ์„œ์˜ candlestick ํŽ˜์ด์ง€๋ฅผ ๋ณด๋ฉด ๋ฐ์ดํ„ฐ ํ˜•์‹์ด ์„ค๋ช…๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

candlestick ์œ ํ˜•์—์„œ ํ•„์š”ํ•œ ์ •๋ณด๋Š” Timestamp(์‹œ๊ฐ„)๊ณผ open, high, low, close ๊ฐ€๊ฒฉ์ž…๋‹ˆ๋‹ค.
CoinPaprika API์—์„œ ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ์™€ ๋”ฑ ๋–จ์–ด์ ธ๋งž๋„ค์š”ใ…Žใ…Ž

์ €๋Š” ์—ฌ๊ธฐ์„œ Single Array ๋ฐฉ์‹์„ ํƒํ–ˆ์Šต๋‹ˆ๋‹ค.
map() ๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•˜์—ฌ data ์•ˆ์— ํ•„์š”ํ•œ ํ•ญ๋ชฉ๋งŒ ๊ณจ๋ผ์„œ array ์•ˆ์— ๋„ฃ์–ด์ค€ ํ›„ return ํ•ด์คฌ์Šต๋‹ˆ๋‹ค.

      <ApexChart
          type="candlestick"
          series={[
            {
              data: data?.map((price) => {
                return [
                  Date.parse(price.time_close),
                  price.open,
                  price.high,
                  price.low,
                  price.close,
                ];
              }),
              .
              .
              .

์‹œ๊ฐ„ ๊ด€๋ จ ๋ฐ์ดํ„ฐ๊ฐ€ yyyy-mm-ddThh:mm:ssZ ํ˜•์‹์˜ ๋ฌธ์ž์—ด์ด๋ผ์„œ Date.parse()๋ฅผ ์ด์šฉํ•ด ํƒ€์ž„์Šคํƒฌํ”„๋กœ ์ „ํ™˜ํ•ด์คฌ์Šต๋‹ˆ๋‹ค.

โœจMDN Date.parse() https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

์ฐจํŠธ ์ปค์Šคํ…€ ํ•˜๊ธฐ

https://apexcharts.com/docs/options/# ํŽ˜์ด์ง€๋ฅผ ๋ณด๊ณ  ์›ํ•˜๋Š” ๋ถ€๋ถ„์„ ์ฐพ์•„์„œ ์ปค์Šคํ…€ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.
x์ถ•, y์ถ•, ์ƒ‰๊น”, ํˆด๋ฐ” ๊ฐ์ถ”๊ธฐ, ํ…Œ๋งˆ ์„ค์ • ๋“ฑ ์„ธ์„ธํ•œ ๋ถ€๋ถ„๊นŒ์ง€ ์ปค์Šคํ…€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ œ๊ฐ€ ๋งŒ๋“  ๋ฒ„์ ผ์€ ์ด๋ ‡์Šต๋‹ˆ๋‹น ์ฐธ๊ณ ๋งŒ ํ•ด์ฃผ์„ธ์š”ใ…Ž

<ApexChart
          type="candlestick"
          series={[
            {
              data: 
                data?.map((price) => {
                  return [
                    Date.parse(price.time_close),
                    price.open,
                    price.high,
                    price.low,
                    price.close,
                  ];
                }),
            },
          ]}
          options={{
            theme: {
              mode: "dark",
            },
            chart: {
              type: "candlestick",
              height: 350,
              width: 500,
              toolbar: {
                show:false,
              },
              background: "transparent",
            },
            stroke: {
              curve: "smooth",
              width: 2,
            },
            yaxis: {
              show: false,
            },
            xaxis: {
              type: "datetime",
              categories: data?.map((price) => price.time_close),
              labels: {
                style: {
                  colors: '#9c88ff'
                }
              }
            },
            plotOptions: {
              candlestick: {
                colors: {
                  upward: '#3C90EB',
                  downward: '#DF7D46'
                }
              }
            }
          }}
        />

๐Ÿ‘ป๋งˆ์น˜๋ฉฐ

๊ณต์‹ ๋ฌธ์„œ์™€ ๋ฐ๋ชจ๊ฐ€ ๋„ˆ๋ฌด ์ž˜ ๋˜์–ด์žˆ์–ด์„œ ์„ค๋ช…ํ•  ๊ฒŒ ์—†๋„ค์š”..ใ…Žใ…Ž
์ตœ๊ทผ์— ํผ๋ธ”๋ฆฌ์…” ๋ฉด์ ‘๋„ ๋‹ค๋…€์™”๋Š”๋ฐ ์งˆ๋ฌธ์„ ๋งŽ์ด ๋ฐ›์ง€ ๋ชปํ•ด์„œ ๋‚˜์ค‘์— ๋‹ค๋ฅธ ํšŒ์‚ฌ ๋ฉด์ ‘ ์งˆ๋ฌธ๊ณผ ๊ฐ™์ด ์ •๋ฆฌํ•ด์„œ ์˜ฌ๋ฆด ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.
์ฝ์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค~๐Ÿ˜†

profile
๊ณต๋ถ€์ค‘

1๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2023๋…„ 1์›” 6์ผ

์•ˆ๋…•ํ•˜์„ธ์š”! ๋ธ”๋กœ๊ทธ์— ๋…ธ๋งˆ๋“œ ์ฝ”๋”์—์„œ ๊ฐ€๋ฅด์ณ์ฃผ์‹ ๊ฑธ ์ž˜ ์ •๋ฆฌ ํ•ด์ฃผ์…”์„œ ๋•๋ถ„์— ํžŒํŠธ๋ฅผ ๋งŽ์ด ์–ป๊ณ ๊ฐ€์š”! :-) ์ด ๊ฒŒ์‹œํŒ ๊ธ€ ๋Œ€๋ถ€๋ถ„์ด ๋…ธ๋งˆ๋“œ ์ฝ”๋” ์ˆ˜์—… ๋‚ด์šฉ ํŒ”๋กœ์šฐ ํ•˜์‹œ๋ฉด์„œ ๊ตฌํ˜„ํ•œ ํ”„๋กœ์ ํŠธ์ธ ๊ฒƒ ๊ฐ™์€๋ฐ, ๋ญ”๊ฐ€ ๋‚ด์šฉ์— ๋‹ˆ์ฝ” ์„ ์ƒ๋‹˜์ด ์ œ๊ณตํ•ด์ฃผ์‹  ์ •๋ณด์— ๋Œ€ํ•œ ํฌ๋ ˆ๋”ง์ด ์—†๋Š” ๊ฒƒ ๊ฐ™์•„ ์•„์‰ฝ๋„ค์š”.

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ