🐛 fix: versus 레벨 증가 그래프 색 변경

42Statistics · Jul 25, 2023 · d11b75d · d11b75d
1 parent 47125fa
commit d11b75d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/app/src/Profile/dashboard-contents/General/LevelRecords.tsx b/app/src/Profile/dashboard-contents/General/LevelRecords.tsx
@@ -98,7 +98,7 @@ type LevelRecordsChartProps = {
   series: ApexAxisChartSeries;
 };
 
-export const LevelRecordsChart = ({ series }: LevelRecordsChartProps) => {
+const LevelRecordsChart = ({ series }: LevelRecordsChartProps) => {
   const theme = useTheme();
 
   const options: ApexCharts.ApexOptions = {

diff --git a/app/src/Profile/dashboard-contents/Versus/LevelRecords.tsx b/app/src/Profile/dashboard-contents/Versus/LevelRecords.tsx
@@ -1,7 +1,8 @@
-import { LevelRecordsChart } from '@/Profile/dashboard-contents/General';
 import { useQuery } from '@apollo/client';
+import { useTheme } from '@emotion/react';
 import { gql } from '@shared/__generated__';
 import { userAtom } from '@shared/atoms/userAtom';
+import { LineChart } from '@shared/components/Chart';
 import { DashboardContent } from '@shared/components/DashboardContent';
 import {
   DashboardContentBadRequest,
@@ -85,3 +86,32 @@ export const LevelRecords = () => {
     </DashboardContent>
   );
 };
+
+type LevelRecordsChartProps = {
+  series: ApexAxisChartSeries;
+};
+
+const LevelRecordsChart = ({ series }: LevelRecordsChartProps) => {
+  const theme = useTheme();
+
+  const options: ApexCharts.ApexOptions = {
+    colors: [theme.colors.primary.default, theme.colors.accent.default],
+    xaxis: {
+      labels: {
+        formatter: (value) => `${value}`,
+      },
+    },
+    yaxis: {
+      labels: {
+        formatter: (value) => `lv. ${value}`,
+      },
+    },
+    tooltip: {
+      x: {
+        formatter: (value) => `${value}개월 차`,
+      },
+    },
+  };
+
+  return <LineChart series={series} options={options} />;
+};