feat: active user count 추가, 여행 중인 유저 수 추이에 병합 및 해당 차트 위치 이동

42Statistics · Jun 9, 2024 · 1647fe3 · 1647fe3
1 parent 18a8f5b
commit 1647fe3
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 23 deletions.
diff --git a/app/src/@shared/__generated__/gql.ts b/app/src/@shared/__generated__/gql.ts
diff --git a/app/src/@shared/__generated__/graphql.ts b/app/src/@shared/__generated__/graphql.ts
diff --git a/app/src/Home/dashboard-contents/User/AliveUserCountRecords.tsx b/app/src/Home/dashboard-contents/User/AliveUserCountRecords.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from '@apollo/client';
 import { subMonths } from 'date-fns';
+import { useTheme } from '@emotion/react';
 
 import { gql } from '@shared/__generated__';
 import { AreaChart } from '@shared/components/Chart';
@@ -25,11 +26,16 @@ const GET_MONTHLY_ALIVE_USER_COUNT_RECORDS_FROM_END = gql(/* GraphQL */ `
         at
         value
       }
+      monthlyActiveUserCountRecordsFromEnd(last: $last) {
+        at
+        value
+      }
     }
   }
 `);
 
 export const AliveUserCountRecords = () => {
+  const theme = useTheme();
   const title = '여행 중인 유저 수 추이';
 
   const device = useDeviceType();
@@ -55,19 +61,25 @@ export const AliveUserCountRecords = () => {
     return <DashboardContentNotFound title={title} />;
   }
 
-  const { monthlyAliveUserCountRecordsFromEnd } = data.getHomeUser;
-  const seriesData = monthlyAliveUserCountRecordsFromEnd.map(
-    ({ at, value }) => ({
-      x: new Date(at),
-      y: value,
-    }),
-  );
-  const series: ApexAxisChartSeries = [
+  const seriesWithColor = [
     {
       name: '인원수',
-      data: seriesData,
+      color: theme.colors.chart.accent.default,
+      rawData: data.getHomeUser.monthlyAliveUserCountRecordsFromEnd,
     },
-  ];
+    {
+      name: '활동중',
+      color: theme.colors.chart.primary.default,
+      rawData: data.getHomeUser.monthlyActiveUserCountRecordsFromEnd,
+    },
+  ].map(({ name, color, rawData }) => ({
+    name,
+    color,
+    data: rawData.map(({ at, value }) => ({
+      x: new Date(at),
+      y: value,
+    })),
+  }));
 
   return (
     <DashboardContent
@@ -77,17 +89,17 @@ export const AliveUserCountRecords = () => {
       }
       type="ApexCharts"
     >
-      <ActiveUserCountRecordsChart series={series} />
+      <ActiveUserCountRecordsChart seriesWithColor={seriesWithColor} />
     </DashboardContent>
   );
 };
 
 type ActiveUserCountRecordsChartProps = {
-  series: ApexAxisChartSeries;
+  seriesWithColor: Array<ApexAxisChartSeries[0] & { color: string }>;
 };
 
 const ActiveUserCountRecordsChart = ({
-  series,
+  seriesWithColor,
 }: ActiveUserCountRecordsChartProps) => {
   const options: ApexCharts.ApexOptions = {
     chart: {
@@ -130,14 +142,15 @@ const ActiveUserCountRecordsChart = ({
       },
       min: subMonths(new Date(), 12).getTime(),
     },
+    colors: seriesWithColor.map(({ color }) => color),
     yaxis: {
       labels: {
         formatter: (value) => value.toLocaleString(),
       },
     },
     tooltip: {
       x: {
-        format: 'yyyy년 M월 d일',
+        format: 'yyyy년 M월',
       },
       y: {
         formatter: (value) => numberWithUnitFormatter(value, '명'),
@@ -166,5 +179,11 @@ const ActiveUserCountRecordsChart = ({
       },
     ],
   };
-  return <AreaChart series={series} options={options} />;
+
+  return (
+    <AreaChart
+      series={seriesWithColor.map(({ name, data }) => ({ name, data }))}
+      options={options}
+    />
+  );
 };
diff --git a/app/src/Home/dashboard-frames/homeRecordDashboardRows.ts b/app/src/Home/dashboard-frames/homeRecordDashboardRows.ts
@@ -16,10 +16,6 @@ export const homeRecordDashboardRows: DashboardRowType[] = [
         rowSpan: 1,
         elementId: 6,
       },
-      {
-        rowSpan: 2,
-        elementId: 7,
-      },
       {
         rowSpan: 2,
         elementId: 14,

diff --git a/app/src/Home/dashboard-frames/homeStatusDashboardRows.ts b/app/src/Home/dashboard-frames/homeStatusDashboardRows.ts
@@ -4,6 +4,10 @@ export const homeStatusDashboardRows: DashboardRowType[] = [
   {
     colSpan: 1,
     items: [
+      {
+        rowSpan: 2,
+        elementId: 7,
+      },
       {
         rowSpan: 2,
         elementId: 0,