refactor : BarChart1 Constant 처리 개선

Author: WoongyuChoi

src/chart/BarChartComparison.tsx

@@ -1,61 +1,5 @@
-import { ChartOptions } from "chart.js";
 import { Bar } from "react-chartjs-2";
-import { formatNumberWithCommas } from "../utils/numberUtils";
-
-const data = {
-  labels: ["202208", "202209", "202210", "202211", "202212"],
-  datasets: [
-    {
-      label: "가용자본",
-      data: [
-        5000000000000, 8200000000000, 5400000000000, 9600000000000,
-        5800000000000,
-      ],
-      backgroundColor: "rgba(184, 239, 239, 0.5)",
-      // borderColor: "rgba(75, 192, 192, 1)",
-      borderWidth: 1,
-    },
-    {
-      label: "요구자본",
-      data: [
-        4000000000000, 5500000000000, 4100000000000, 6700000000000,
-        14600000000000,
-      ],
-      backgroundColor: "rgba(183, 152, 197, 0.5)",
-      // borderColor: "rgba(255, 99, 132, 1)",
-      borderWidth: 1,
-    },
-  ],
-};
-
-const options: ChartOptions<"bar"> = {
-  plugins: {
-    legend: {
-      position: "top",
-    },
-    title: {
-      display: true,
-      text: "RBC비율 추이",
-    },
-  },
-  scales: {
-    y: {
-      beginAtZero: true,
-      min: 0,
-      max: 15000000000000,
-      ticks: {
-        stepSize: 5000000000000,
-        callback: function (value) {
-          const numValue = value as number;
-          return formatNumberWithCommas(numValue / 100000000) + "억";
-        },
-        font: {
-          size: 12,
-        },
-      },
-    },
-  },
-};
+import { data, options } from "../data/BarChartComparisonConstant";
 
 const BarChartComparison = ({
   chartRef,

src/data/BarChartComparisonConstant.tsx

@@ -0,0 +1,53 @@
+import { ChartOptions } from "chart.js";
+import { formatNumberWithCommas } from "../utils/numberUtils";
+
+export const data = {
+  labels: ["2023 Q1", "2023 Q2", "2023 Q3", "2023 Q4", "2024 Q1"],
+  datasets: [
+    {
+      label: "Available Capital",
+      data: [5000000, 6000000, 7000000, 8000000, 9000000],
+      backgroundColor: "rgba(184, 239, 239, 0.5)",
+      // borderColor: "rgba(54, 162, 235, 1)",
+      borderWidth: 1,
+    },
+    {
+      label: "Required Capital",
+      data: [4500000, 5500000, 6500000, 7500000, 8500000],
+      backgroundColor: "rgba(183, 152, 197, 0.5)",
+      // borderColor: "rgba(255, 99, 132, 1)",
+      borderWidth: 1,
+    },
+  ],
+};
+
+export const options: ChartOptions<"bar"> = {
+  responsive: true,
+  plugins: {
+    legend: {
+      display: true,
+      position: "top",
+    },
+    title: {
+      display: true,
+      text: "Capital Comparison Over Quarters",
+    },
+  },
+  scales: {
+    y: {
+      beginAtZero: true,
+      min: 0,
+      max: 15000000,
+      ticks: {
+        stepSize: 5000000,
+        callback: function (value) {
+          const numValue = value as number;
+          return `${formatNumberWithCommas(numValue / 1000000)}M`;
+        },
+        font: {
+          size: 12,
+        },
+      },
+    },
+  },
+};