- Today
- Total
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 코인
- 항해99
- Firebase
- rtk
- javascript
- 비전공자
- 차트구현
- typeorm
- Flutter
- 3주차
- 차트만들기
- 주식차트
- nextjs
- typescript
- 차트
- apollo
- graphql
- Coin
- API
- chart
- 채팅
- 코인차트
- nestjs
- error
- 에러
- 리액트
- react
- Redux
- websocket
- 주식
Act99 기술블로그
[React] 주식사이트 만들기 / React Google Chart 사용 본문
저번에 Nestjs 와 postgresql 을 이용해 주식데이터를 localhost:4000 에 띄워놨다.
https://bugerstory.tistory.com/28
React 를 이용해 브라우저상에 차트를 띄울 예정이며, 먼저 apollo와 apollo-toolings 를 설치했다.
https://github.com/apollographql/apollo-tooling
const STOCK_QUERY = gql`
query frontStockQuery {
gsStock {
index
date
check_item
code
code_name
d1_diff_rate
close
open
high
low
volume
clo5
clo10
clo20
clo40
clo60
clo80
clo100
clo120
clo5_diff_rate
clo10_diff_rate
clo20_diff_rate
clo40_diff_rate
clo60_diff_rate
clo80_diff_rate
clo100_diff_rate
clo120_diff_rate
yes_clo5
yes_clo10
yes_clo20
yes_clo40
yes_clo60
yes_clo80
yes_clo100
yes_clo120
vol5
vol10
vol20
vol40
vol60
vol80
vol100
vol120
}
}
`;
위에 내용들은 내가 가져올 데이터의 컬럼명들이다.
그 다음 apollo:codegen 을 이용하면 type 들이 다 적혀있는 깔끔한 인터페이스 코드가 나온다.
(원래 Props로 사용할 데이터를 일일히 type 형태로 만들었는데 굳이 사용할 필요가 없었다...)
먼저 만들어 볼 차트는 캔들차트이며, 여기서 필요한 데이터는 주식데이터 중 날짜, 시가, 종가, 고가, 저가 데이터였다.
useQuery 를 이용해 데이터값을 가져오고, 가져온 데이터 값들을 array 형태로 변경시켜주었다.
그 코드는 다음과 같다.
export const Stock = () => {
const { data, loading } = useQuery<frontStockQuery>(STOCK_QUERY, {
variables: {},
});
const stockOpen = data?.gsStock.map((item) => item.open);
const openArray: number[] = [];
stockOpen?.forEach((open) => openArray.push(open));
const stockClose = data?.gsStock.map((item) => item.open);
const closeArray: number[] = [];
stockClose?.forEach((close) => closeArray.push(close));
const stockVolume = data?.gsStock.map((item) => item.volume);
const volumeArray: number[] = [];
stockVolume?.forEach((volume) => volumeArray.push(volume));
const stockDate = data?.gsStock.map((item) => item.date);
const dateArray: string[] = [];
stockDate?.forEach((date) => dateArray.push(date.toString()));
const stockHigh = data?.gsStock.map((item) => item.high);
const highArray: number[] = [];
stockHigh?.forEach((high) => highArray.push(high));
const stockLow = data?.gsStock.map((item) => item.low);
const LowArray: number[] = [];
stockLow?.forEach((low) => LowArray.push(low));
return;
}
**** frontStockQuery 는 codegen을 사용한 결과물이다. 앞서 작성한 gql 태그 쿼리문이 아니다!!!
다음, 주식차트가 나올 컴퍼넌트를 작성해주었다.
내용은 다음과 같다.
import React from "react";
import { Chart } from "react-google-charts";
type Props = {
openArray: number[];
closeArray: number[];
highArray: number[];
lowArray: number[];
dateArray: string[];
};
export const ChartPage: React.FC<Props> = ({
dateArray,
openArray,
highArray,
lowArray,
closeArray,
}) => {
const totalArray: any[] = [["day", "a", "b", "c", "d"]];
console.log(lowArray);
for (let i = 0; i < dateArray.length; i++) {
totalArray.push([
dateArray[i],
highArray[i],
openArray[i],
closeArray[i],
lowArray[i],
]);
}
console.log(totalArray);
return (
<>
<div>
<Chart
width={"100%"}
height={800}
chartType="CandlestickChart"
loader={<div>Loading Chart</div>}
data={totalArray}
options={{
legend: "none",
}}
rootProps={{ "data-testid": "1" }}
/>
</div>
</>
);
};
다음 다시 페이지로 돌아와 차트 코드를 불러주었다.
return (
<div>
{!loading ? (
<ChartPage
openArray={openArray}
closeArray={closeArray}
highArray={highArray}
lowArray={LowArray}
dateArray={dateArray}
/>
) : (
<h3>Loading...</h3>
)}
)
그 결과
캔들차트가 완성되었다.
아무래도 데이터 배열이 잘못되어
(시가를 먼저 적어야하거나, 고가를 먼저 적으면 될 듯 하다.) 정확한 캔들차트는 안나왔다.
하지만 데이터를 불러와 차트만들기까지 작업했으니 주말에 수정하고 캔들차트 색상도 이쁘게 만들면 정상적인 차트가 완성될 듯 하다.
'개발팁저장소 > react' 카테고리의 다른 글
[React] 직접 주가 캔들 차트 & 거래량 바 차트 만들기4 - onWheel 을 통해 데이터값을 추가시키거나 감소시키기 (라이브러리 x) (SVG 연습용) (0) | 2021.12.01 |
---|---|
[React] 직접 주가 캔들 차트 & 거래량 바 차트 만들기3 (라이브러리 x) (SVG 연습용) (0) | 2021.11.30 |
[React] 직접 주가 캔들 차트 & 거래량 바 차트 만들기2 (라이브러리 x) (SVG 연습용) (1) | 2021.11.29 |
[React] 직접 주가 캔들 차트 & 거래량 바 차트 만들기 (라이브러리 x) (SVG 연습용) (0) | 2021.11.27 |
Yarn 이 먹히지 않을 때! yarn install | yarn remove 가 먹히지 않을 때 (0) | 2021.11.24 |