Skip to content

Commit 8c054f3

Browse files
WoongyuChoiWoongyuChoi
committed
refactor : MixedChart Constant 처리 개선
1 parent f6c82b0 commit 8c054f3

File tree

2 files changed

+110
-111
lines changed

2 files changed

+110
-111
lines changed

‎src/chart/MixedChart.tsx‎

Lines changed: 1 addition & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,7 @@
1-
import { ChartData, ChartOptions } from "chart.js";
21
import ChartDataLabels from "chartjs-plugin-datalabels";
32
import React from "react";
43
import { Bar } from "react-chartjs-2";
5-
import { formatNumberWithCommas } from "../utils/numberUtils";
6-
7-
const data: ChartData<any> = {
8-
labels: ["202208", "202209", "202210", "202211", "202212"], // X축 값
9-
datasets: [
10-
// 아래쪽에 쌓일 데이터부터 작성
11-
{
12-
label: "비보험금융",
13-
data: [1400, 1600, 1800, 2000, 2200],
14-
backgroundColor: "rgba(251, 248, 173, 0.6)",
15-
yAxisID: "y",
16-
barThickness: 40,
17-
},
18-
{
19-
label: "운영",
20-
data: [2000, 2200, 2400, 2800, 3000],
21-
backgroundColor: "rgba(183, 152, 197, 0.6)",
22-
yAxisID: "y",
23-
barThickness: 40,
24-
},
25-
{
26-
label: "시장",
27-
data: [6000, 6200, 6400, 6800, 7000],
28-
backgroundColor: "rgba(184, 239, 239, 0.6)",
29-
yAxisID: "y",
30-
barThickness: 40,
31-
},
32-
{
33-
label: "신용",
34-
data: [22000, 20000, 22000, 18000, 15000],
35-
backgroundColor: "rgba(183, 236, 192, 0.6)",
36-
yAxisID: "y",
37-
barThickness: 40,
38-
},
39-
{
40-
label: "금리",
41-
data: [12000, 8000, 14000, 16000, 14000],
42-
backgroundColor: "rgba(251, 173, 176, 0.6)",
43-
yAxisID: "y",
44-
barThickness: 40,
45-
},
46-
{
47-
label: "보험",
48-
data: [4000, 7000, 2000, 2000, 7000],
49-
backgroundColor: "rgba(251, 209, 173, 0.6)",
50-
yAxisID: "y",
51-
barThickness: 40,
52-
},
53-
// 여기까지 위쪽에 쌓일 데이터
54-
{
55-
type: "line",
56-
label: "요구자본",
57-
data: [42885, 38325, 43429, 44083, 39375],
58-
fill: false,
59-
borderColor: "rgba(36, 71, 127, 1)",
60-
// tension: 0.8, // 곡선 효과
61-
borderWidth: 2, // 라인의 두께 설정
62-
yAxisID: "y",
63-
},
64-
],
65-
};
66-
67-
const options: ChartOptions<"bar"> = {
68-
responsive: true, // 차트가 반응형으로 동작함
69-
plugins: {
70-
title: {
71-
display: true,
72-
text: "요구자본 추이",
73-
},
74-
legend: {
75-
display: true, // 범례 표시
76-
reverse: true, // 범례는 반대로 표시
77-
},
78-
datalabels: {
79-
display: function (context) {
80-
return context.dataset.type === "line"; // 라인 차트에만 라벨 표시
81-
},
82-
color: "black", // 라벨 색상
83-
anchor: "center",
84-
align: "center",
85-
formatter: (value) => formatNumberWithCommas(value),
86-
font: {
87-
size: 10,
88-
weight: "bold",
89-
},
90-
},
91-
},
92-
scales: {
93-
x: {
94-
stacked: true, // X축에서 누적을 허용
95-
},
96-
y: {
97-
min: 0,
98-
max: 50000,
99-
type: "linear",
100-
position: "left",
101-
stacked: true, // 누적을 허용
102-
ticks: {
103-
stepSize: 30000,
104-
callback: function (value) {
105-
const numValue = value as number;
106-
return formatNumberWithCommas(numValue) + "억";
107-
},
108-
font: {
109-
size: 10,
110-
},
111-
},
112-
},
113-
},
114-
};
4+
import { data, options } from "../data/MixedChartConstant";
1155

1166
const MixedChart = ({ chartRef }: { chartRef: React.RefObject<any> }) => {
1177
return (

‎src/data/MixedChartConstant.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { ChartData, ChartOptions } from "chart.js";
2+
import { formatNumberWithCommas } from "../utils/numberUtils";
3+
4+
export const data: ChartData<any> = {
5+
labels: ["202208", "202209", "202210", "202211", "202212"], // X축 값
6+
datasets: [
7+
// 아래쪽에 쌓일 데이터부터 작성
8+
{
9+
label: "Non-Financial",
10+
data: [1400, 1600, 1800, 2000, 2200],
11+
backgroundColor: "rgba(251, 248, 173, 0.6)",
12+
yAxisID: "y",
13+
barThickness: 40,
14+
},
15+
{
16+
label: "Operations",
17+
data: [2000, 2200, 2400, 2800, 3000],
18+
backgroundColor: "rgba(183, 152, 197, 0.6)",
19+
yAxisID: "y",
20+
barThickness: 40,
21+
},
22+
{
23+
label: "Market",
24+
data: [6000, 6200, 6400, 6800, 7000],
25+
backgroundColor: "rgba(184, 239, 239, 0.6)",
26+
yAxisID: "y",
27+
barThickness: 40,
28+
},
29+
{
30+
label: "Credit",
31+
data: [22000, 20000, 22000, 18000, 15000],
32+
backgroundColor: "rgba(183, 236, 192, 0.6)",
33+
yAxisID: "y",
34+
barThickness: 40,
35+
},
36+
{
37+
label: "Interest Rate",
38+
data: [12000, 8000, 14000, 16000, 14000],
39+
backgroundColor: "rgba(251, 173, 176, 0.6)",
40+
yAxisID: "y",
41+
barThickness: 40,
42+
},
43+
{
44+
label: "Insurance",
45+
data: [4000, 7000, 2000, 2000, 7000],
46+
backgroundColor: "rgba(251, 209, 173, 0.6)",
47+
yAxisID: "y",
48+
barThickness: 40,
49+
},
50+
// 여기까지 위쪽에 쌓일 데이터
51+
{
52+
type: "line",
53+
label: "Required Capital",
54+
data: [42885, 38325, 43429, 44083, 39375],
55+
fill: false,
56+
borderColor: "rgba(36, 71, 127, 1)",
57+
// tension: 0.8, // 곡선 효과
58+
borderWidth: 2,
59+
yAxisID: "y",
60+
},
61+
],
62+
};
63+
64+
export const options: ChartOptions<"bar"> = {
65+
responsive: true, // 차트가 반응형으로 동작함
66+
plugins: {
67+
title: {
68+
display: true,
69+
text: "Required Capital Trends",
70+
},
71+
legend: {
72+
display: true, // 범례 표시
73+
reverse: true, // 범례는 반대로 표시
74+
},
75+
datalabels: {
76+
display: (context) => context.dataset.type === "line", // 라인 차트에만 라벨 표시
77+
color: "black",
78+
anchor: "center",
79+
align: "center",
80+
formatter: (value) => formatNumberWithCommas(value),
81+
font: {
82+
size: 10,
83+
weight: "bold",
84+
},
85+
},
86+
},
87+
scales: {
88+
x: {
89+
stacked: true, // X축에서 누적을 허용
90+
},
91+
y: {
92+
min: 0,
93+
max: 50000,
94+
type: "linear",
95+
position: "left",
96+
stacked: true,
97+
ticks: {
98+
stepSize: 30000,
99+
callback: function (value) {
100+
const numValue = value as number;
101+
return `${formatNumberWithCommas(numValue)}M`;
102+
},
103+
font: {
104+
size: 10,
105+
},
106+
},
107+
},
108+
},
109+
};

0 commit comments

Comments
 (0)