반응형
SMALL
1. Mui Chart 설치 및 데이터 불러오기
리액트 터미널 환경에서 아래 커맨드로 Mui Chart 설치
■ npm install @mui/x-charts
■ axios 로 데이터 비동기로 가져오기
리액트 터미널 환경에서 아래 커맨드로 axios 설치
■ npm install axios
1.1 axios 와 async await 키워드를 통하여 데이터를 비동기적으로 가져오는 get 메서드 정의
# CrimeBranchContext.ts
export async function get_average_subject_data() {
const response = await axios.get(
crime_branch_default_url + "average_subject?category=average&select_data=발생건수"
).then((response) => {
return response.data
}).catch((error) => {
console.log(error);
})
return response
}
output
{
"강력범죄 (소계)": 5665,
"지능범죄 (소계)": 128560,
"폭력범죄 (소계)": 52973,
"풍속범죄 (소계)": 5887
}
1.2 해당 데이터를 담을 recoil state 선언 및 담아주기
■ atom을 통하여 recoil state 정의
# SubjectAverageState.ts
import { atom } from "recoil";
export const subjectAverageState = atom({
key : "subject_average",
default: [],
})
■ useRecoilState 와 useMemo를 통하여 데이터 적재
useRecoilState : recoil 객체에 상태를 저장하는 훅, 사전정의한 recoil state를 인자로 넘겨준다 .
useMemo : 객체를 메모리에 저장해두고 객체가 변할 시 에만 재사용되는 훅
1.2.1 리액트 페이지 첫 랜더링 시 상태를 저장하기 위해 App.tsx ( root ) 에서 훅을 사용하여 상태를 저장
■ useState 를 사용 하 듯이 [object, setObject ] 형식으로 useRecoilState 를 사용한다.
import { useMemo } from 'react'
import './App.css'
import SideNav from './web_clinet/globals/SideNav'
import CrimeBranch from './web_clinet/render/crime_branch/CrimeBranch'
import { get_average_subject_data } from './web_clinet/contexts/CrimeBranchContext'
import { useRecoilState } from 'recoil'
import { subjectAverageState } from './web_clinet/state/crime_branch/SubjectAverageState'
export function App() {
const [avgData, setAvgData] = useRecoilState(subjectAverageState);
const [dynamicSubjectData, setDynamicSubjectData] = useRecoilState(dynamicSubjectState);
useMemo(() => {
async function async_get_average_subject_data() {
setAvgData(await get_average_subject_data())
}
async_get_average_subject_data();
}, [])
return (
<>
<SideNav />
<CrimeBranch />
</>
)
}
export default App
2. Recoil State 에 있는 데이터 Mui Chart 가 읽을 수 있게 전처리 및 Mui Chart 랜더링
2.1 전처리한 데이터를 담을 interface 선언
export interface IPieChartData {
AverageSubject : number[];
}
2.2 useRecoilValue 훅을 통하여 데이터 가져오기
- 1번 과정에서 값을 저장한 state를 useRecoilValue를 통하여 가져온다.
import { useRecoilValue } from "recoil"
import { subjectAverageState } from "../../state/crime_branch/SubjectAverageState"
const data = useRecoilValue(subjectAverageState);
2.3 사전정의한 interface 를 상속받는 변수 설정 및 값 담아주기
- mui chart 의 series 는 object 형식의 데이터를 받을 수 없기에 별도의 함수를 정의해 값을 분리해준다.
■ object data 에서 값만 추출하는 함수
export function chart_data_to_array(data: object): Array<number> {
const result_data: number[] = [];
Object.entries(data).map((value, index) => {
const int_value = Number.parseInt(value[1])
result_data.push(int_value)
})
return result_data;
}
■ object data 에서 컬럼만 추출하는 함수
export function chart_data_columns_to_array(data:object){
const result_data : string[] = [];
Object.keys(data).forEach(el => {
result_data.push(el);
})
return result_data;
}
■ 함수를 사용하여 값 분리 및 각 용도에 맞는 변수에 담아주기
const pie_data : IPieChartData = {
AverageSubject : chart_data_to_array(data)
}
const column_array = chart_data_columns_to_array(data);
2.4 Mui Pie Chart 에 값 담아주기
- 필자는 분류적재한 데이터의 인덱스 값으로 데이터를 랜더링 해줬다
import { PieChart } from "@mui/x-charts";
return (
<IPieContent>
<Typography>범죄 분류별 발생건수 (건)</Typography>
<PieChart
series={[
{
data: [
{ id: 0, value: pie_data.AverageSubject[0], label: column_array[0]},
{ id: 1, value: pie_data.AverageSubject[1], label: column_array[1]},
{ id: 2, value: pie_data.AverageSubject[2], label: column_array[2]},
{ id: 3, value: pie_data.AverageSubject[3], label: column_array[3]},
],
highlightScope: { faded: 'global', highlighted: 'item' },
faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' },
},
]}
width={400}
height={200}
/>
</IPieContent>
)
■ 총 코드
import styled from "styled-components";
import { useRecoilValue } from "recoil"
import { subjectAverageState } from "../../state/crime_branch/SubjectAverageState"
import { IPieChartData } from "../../Interfaces/IChartModel";
import { chart_data_columns_to_array, chart_data_to_array } from "../../utils/ChartDataUtil";
import { PieChart } from "@mui/x-charts";
import { Typography } from "@mui/material";
const IPieContent = styled.div`
display : flex;
align-items : center;
flex-direction : column;
width : calc(50%);
padding : 5px;
margin-bottom : 1%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius : 1rem;
transition : 0.2s;
&:hover {
background-color : white;
box-shadow: rgba(0, 0, 0, 0.24) 3px 6px 16px;
}
`
export default function AverageSubjectPieChart() {
const data = useRecoilValue(subjectAverageState);
const pie_data : IPieChartData = {
AverageSubject : chart_data_to_array(data)
}
const column_array = chart_data_columns_to_array(data);
return (
<IPieContent>
<Typography>범죄 분류별 발생건수 (건)</Typography>
<PieChart
series={[
{
data: [
{ id: 0, value: pie_data.AverageSubject[0], label: column_array[0]},
{ id: 1, value: pie_data.AverageSubject[1], label: column_array[1]},
{ id: 2, value: pie_data.AverageSubject[2], label: column_array[2]},
{ id: 3, value: pie_data.AverageSubject[3], label: column_array[3]},
],
highlightScope: { faded: 'global', highlighted: 'item' },
faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' },
},
]}
width={400}
height={200}
/>
</IPieContent>
)
}
3. 랜더링 확인
LIST
'Programming > react' 카테고리의 다른 글
[ React, Python ] FastApi Cors 설정하고 React 에서 ReCoil 사용 및 Api Call 해보기 (0) | 2024.05.26 |
---|---|
[ React, TypeScript] 리액트 프로젝트에 인터페이스 및 슬라이드 적용 (2) | 2024.04.18 |
[ React ] React 프로젝트에 MUI 설치 및 상단바 추가해보기 (0) | 2024.04.17 |
[ React ] vite를 통한 react + typescript 기본세팅 (0) | 2024.03.08 |