Skip to content

Commit 51a1583

Browse files
WoongyuChoiWoongyuChoi
authored
Merge pull request #7 from WoongyuChoi/dev
Dev
2 parents 5d60581 + f746afd commit 51a1583

File tree

6 files changed

+80
-31
lines changed

6 files changed

+80
-31
lines changed

‎src/chart/AreaChart.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect } from "react";
1+
import React, { useEffect, useState } from "react";
22
import { Line } from "react-chartjs-2";
33
import { data as initialData, options } from "../data/AreaChartConstant";
44
import useDynamicData from "../hook/useDynamicData";
@@ -12,7 +12,7 @@ const getBorderColor = (isDarkMode: boolean) =>
1212

1313
const AreaChart = ({ chartRef }: { chartRef: React.RefObject<any> }) => {
1414
const isDarkMode = useThemeStore((state) => state.isDarkMode);
15-
const { data, containerRef } = useDynamicData(
15+
const { data: dynamicData, containerRef } = useDynamicData(
1616
initialData,
1717
(prevData) => {
1818
return {
@@ -29,12 +29,20 @@ const AreaChart = ({ chartRef }: { chartRef: React.RefObject<any> }) => {
2929
},
3030
"AreaChart"
3131
);
32+
const [data, setData] = useState(dynamicData);
3233

3334
useEffect(() => {
34-
data.datasets = data.datasets.map((dataset: { data: any[] }) => ({
35-
...dataset,
36-
backgroundColor: getBackgroundColor(isDarkMode),
37-
borderColor: getBorderColor(isDarkMode),
35+
setData(dynamicData);
36+
}, [dynamicData]);
37+
38+
useEffect(() => {
39+
setData((prevData: any) => ({
40+
...prevData,
41+
datasets: prevData.datasets.map((dataset: { data: any[] }) => ({
42+
...dataset,
43+
backgroundColor: getBackgroundColor(isDarkMode),
44+
borderColor: getBorderColor(isDarkMode),
45+
})),
3846
}));
3947
}, [isDarkMode]);
4048

‎src/chart/BarChartComparison.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect } from "react";
1+
import { useEffect, useState } from "react";
22
import { Bar } from "react-chartjs-2";
33
import {
44
data as initialData,
@@ -20,7 +20,7 @@ const BarChartComparison = ({
2020
chartRef: React.RefObject<any>;
2121
}) => {
2222
const isDarkMode = useThemeStore((state) => state.isDarkMode);
23-
const { data, containerRef } = useDynamicData(
23+
const { data: dynamicData, containerRef } = useDynamicData(
2424
initialData,
2525
(prevData) => ({
2626
...prevData,
@@ -36,14 +36,22 @@ const BarChartComparison = ({
3636
}),
3737
"BarChartComparison"
3838
);
39+
const [data, setData] = useState(dynamicData);
3940

4041
useEffect(() => {
41-
data.datasets = data.datasets.map(
42-
(dataset: { data: any[] }, index: number) => ({
43-
...dataset,
44-
backgroundColor: getBackgroundColor(isDarkMode, index),
45-
})
46-
);
42+
setData(dynamicData);
43+
}, [dynamicData]);
44+
45+
useEffect(() => {
46+
setData((prevData: any) => ({
47+
...prevData,
48+
datasets: prevData.datasets.map(
49+
(dataset: { data: any[] }, index: number) => ({
50+
...dataset,
51+
backgroundColor: getBackgroundColor(isDarkMode, index),
52+
})
53+
),
54+
}));
4755
}, [isDarkMode]);
4856

4957
return (

‎src/chart/BarChartNegative.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect } from "react";
1+
import { useEffect, useState } from "react";
22
import { Bar } from "react-chartjs-2";
33
import { data as initialData, options } from "../data/BarChartNegativeConstant";
44
import useDynamicData from "../hook/useDynamicData";
@@ -34,7 +34,7 @@ const getBackgroundColor = (isDarkMode: boolean) => {
3434

3535
const BarChartNegative = ({ chartRef }: { chartRef: React.RefObject<any> }) => {
3636
const isDarkMode = useThemeStore((state) => state.isDarkMode);
37-
const { data, containerRef } = useDynamicData(
37+
const { data: dynamicData, containerRef } = useDynamicData(
3838
initialData,
3939
(prevData) => ({
4040
...prevData,
@@ -49,10 +49,19 @@ const BarChartNegative = ({ chartRef }: { chartRef: React.RefObject<any> }) => {
4949
"BarChartNegative"
5050
);
5151

52+
const [data, setData] = useState(dynamicData);
53+
54+
useEffect(() => {
55+
setData(dynamicData);
56+
}, [dynamicData]);
57+
5258
useEffect(() => {
53-
data.datasets = data.datasets.map((dataset: { data: any[] }) => ({
54-
...dataset,
55-
backgroundColor: getBackgroundColor(isDarkMode),
59+
setData((prevData: any) => ({
60+
...prevData,
61+
datasets: prevData.datasets.map((dataset: { data: any[] }) => ({
62+
...dataset,
63+
backgroundColor: getBackgroundColor(isDarkMode),
64+
})),
5665
}));
5766
}, [isDarkMode]);
5867

‎src/chart/MixedChart.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import ChartDataLabels from "chartjs-plugin-datalabels";
2-
import React, { useEffect } from "react";
2+
import React, { useEffect, useState } from "react";
33
import { Bar } from "react-chartjs-2";
44
import { data as initialData, options } from "../data/MixedChartConstant";
55
import useDynamicData from "../hook/useDynamicData";
@@ -29,7 +29,7 @@ const getBackgroundColor = (isDarkMode: boolean, index: number) => {
2929

3030
const MixedChart = ({ chartRef }: { chartRef: React.RefObject<any> }) => {
3131
const isDarkMode = useThemeStore((state) => state.isDarkMode);
32-
const { data, containerRef } = useDynamicData(
32+
const { data: dynamicData, containerRef } = useDynamicData(
3333
initialData,
3434
(prevData) => {
3535
let totalData = Array(prevData.labels.length).fill(0); // 각 index 합계를 위한 배열 초기화
@@ -71,11 +71,21 @@ const MixedChart = ({ chartRef }: { chartRef: React.RefObject<any> }) => {
7171
},
7272
"MixedChart"
7373
);
74+
const [data, setData] = useState(dynamicData);
7475

7576
useEffect(() => {
76-
data.datasets = data.datasets.map((dataset: any, index: number) => ({
77-
...dataset,
78-
backgroundColor: getBackgroundColor(isDarkMode, index),
77+
setData(dynamicData);
78+
}, [dynamicData]);
79+
80+
useEffect(() => {
81+
setData((prevData: any) => ({
82+
...prevData,
83+
datasets: prevData.datasets.map(
84+
(dataset: { data: any[] }, index: number) => ({
85+
...dataset,
86+
backgroundColor: getBackgroundColor(isDarkMode, index),
87+
})
88+
),
7989
}));
8090
}, [isDarkMode]);
8191

‎src/chart/WaterfallChart.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import ChartDataLabels from "chartjs-plugin-datalabels";
2-
import React, { useEffect } from "react";
2+
import React, { useEffect, useState } from "react";
33
import { Bar } from "react-chartjs-2";
44
import { data as initialData, options } from "../data/WaterfallChartConstant";
55
import useDynamicData from "../hook/useDynamicData";
@@ -23,7 +23,7 @@ const getBackgroundColor = (
2323
};
2424
const WaterfallChart = ({ chartRef }: { chartRef: React.RefObject<any> }) => {
2525
const isDarkMode = useThemeStore((state) => state.isDarkMode);
26-
const { data, containerRef } = useDynamicData(
26+
const { data: dynamicData, containerRef } = useDynamicData(
2727
initialData,
2828
(prevData) => {
2929
let cumulativeValue = 0;
@@ -86,12 +86,26 @@ const WaterfallChart = ({ chartRef }: { chartRef: React.RefObject<any> }) => {
8686
},
8787
"WaterfallChart"
8888
);
89+
const [data, setData] = useState(dynamicData);
8990

9091
useEffect(() => {
91-
data.datasets = data.datasets.map((dataset: { data: any[] }) => ({
92-
...dataset,
93-
backgroundColor: dataset.data.map((value: number[], index: number) =>
94-
getBackgroundColor(isDarkMode, value, index === dataset.data.length - 1)
92+
setData(dynamicData);
93+
}, [dynamicData]);
94+
95+
useEffect(() => {
96+
setData((prevData: any) => ({
97+
...prevData,
98+
datasets: prevData.datasets.map(
99+
(dataset: { data: any[] }, index: number) => ({
100+
...dataset,
101+
backgroundColor: dataset.data.map((value: number[], index: number) =>
102+
getBackgroundColor(
103+
isDarkMode,
104+
value,
105+
index === dataset.data.length - 1
106+
)
107+
),
108+
})
95109
),
96110
}));
97111
}, [isDarkMode]);

‎src/layout/ThemeLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const ThemeLayout = () => {
1515
<button
1616
onClick={toggleTheme}
1717
style={{
18-
fontSize: "1.5rem",
18+
fontSize: `clamp(0.5rem, 1.5rem, 1.5vw)`,
1919
cursor: "pointer",
2020
padding: "0.5rem 1rem",
2121
border: "none",

0 commit comments

Comments
 (0)