From 1647fe37af46bebf747af22d37a4bf6c8994f55b Mon Sep 17 00:00:00 2001 From: jaham Date: Mon, 10 Jun 2024 01:54:48 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20active=20user=20count=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80,=20=EC=97=AC=ED=96=89=20=EC=A4=91=EC=9D=B8=20?= =?UTF-8?q?=EC=9C=A0=EC=A0=80=20=EC=88=98=20=EC=B6=94=EC=9D=B4=EC=97=90=20?= =?UTF-8?q?=EB=B3=91=ED=95=A9=20=EB=B0=8F=20=ED=95=B4=EB=8B=B9=20=EC=B0=A8?= =?UTF-8?q?=ED=8A=B8=20=EC=9C=84=EC=B9=98=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/src/@shared/__generated__/gql.ts | 4 +- app/src/@shared/__generated__/graphql.ts | 10 +++- .../User/AliveUserCountRecords.tsx | 49 +++++++++++++------ .../homeRecordDashboardRows.ts | 4 -- .../homeStatusDashboardRows.ts | 4 ++ 5 files changed, 48 insertions(+), 23 deletions(-) diff --git a/app/src/@shared/__generated__/gql.ts b/app/src/@shared/__generated__/gql.ts index f50dc3e33..04444d7ed 100644 --- a/app/src/@shared/__generated__/gql.ts +++ b/app/src/@shared/__generated__/gql.ts @@ -40,7 +40,7 @@ const documents = { "\n query GetCurrRegisteredCountRanking($limit: Int!) {\n getHomeTeam {\n currRegisteredCountRanking(limit: $limit) {\n projectPreview {\n ...projectPreviewFields\n }\n rank\n value\n }\n }\n }\n": types.GetCurrRegisteredCountRankingDocument, "\n query GetRecentExamResult {\n getHomeTeam {\n recentExamResult {\n data {\n resultPerRank {\n rank\n rate {\n total\n fields {\n key\n value\n }\n }\n }\n beginAt\n location\n }\n }\n }\n }\n": types.GetRecentExamResultDocument, "\n query GetTeamCloseRecords($last: Int!) {\n getHomeTeam {\n teamCloseRecords(last: $last) {\n at\n value\n }\n }\n }\n": types.GetTeamCloseRecordsDocument, - "\n query GetMonthlyAliveUserCountRecordsFromEnd($last: Int!) {\n getHomeUser {\n monthlyAliveUserCountRecordsFromEnd(last: $last) {\n at\n value\n }\n }\n }\n": types.GetMonthlyAliveUserCountRecordsFromEndDocument, + "\n query GetMonthlyAliveUserCountRecordsFromEnd($last: Int!) {\n getHomeUser {\n monthlyAliveUserCountRecordsFromEnd(last: $last) {\n at\n value\n }\n monthlyActiveUserCountRecordsFromEnd(last: $last) {\n at\n value\n }\n }\n }\n": types.GetMonthlyAliveUserCountRecordsFromEndDocument, "\n query GetAverageDurationPerCircle {\n getHomeUser {\n averageDurationPerCircle {\n circle\n value\n }\n }\n }\n": types.GetAverageDurationPerCircleDocument, "\n query GetBlackholedCountPerCircle {\n getHomeUser {\n blackholedCountPerCircle {\n circle\n value\n }\n }\n }\n": types.GetBlackholedCountPerCircleDocument, "\n query GetBlackholedCountRecords($last: Int!) {\n getHomeUser {\n blackholedCountRecords(last: $last) {\n at\n value\n }\n }\n }\n": types.GetBlackholedCountRecordsDocument, @@ -221,7 +221,7 @@ export function gql(source: "\n query GetTeamCloseRecords($last: Int!) {\n g /** * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function gql(source: "\n query GetMonthlyAliveUserCountRecordsFromEnd($last: Int!) {\n getHomeUser {\n monthlyAliveUserCountRecordsFromEnd(last: $last) {\n at\n value\n }\n }\n }\n"): (typeof documents)["\n query GetMonthlyAliveUserCountRecordsFromEnd($last: Int!) {\n getHomeUser {\n monthlyAliveUserCountRecordsFromEnd(last: $last) {\n at\n value\n }\n }\n }\n"]; +export function gql(source: "\n query GetMonthlyAliveUserCountRecordsFromEnd($last: Int!) {\n getHomeUser {\n monthlyAliveUserCountRecordsFromEnd(last: $last) {\n at\n value\n }\n monthlyActiveUserCountRecordsFromEnd(last: $last) {\n at\n value\n }\n }\n }\n"): (typeof documents)["\n query GetMonthlyAliveUserCountRecordsFromEnd($last: Int!) {\n getHomeUser {\n monthlyAliveUserCountRecordsFromEnd(last: $last) {\n at\n value\n }\n monthlyActiveUserCountRecordsFromEnd(last: $last) {\n at\n value\n }\n }\n }\n"]; /** * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ diff --git a/app/src/@shared/__generated__/graphql.ts b/app/src/@shared/__generated__/graphql.ts index f8ec6cb70..8a0901092 100644 --- a/app/src/@shared/__generated__/graphql.ts +++ b/app/src/@shared/__generated__/graphql.ts @@ -269,6 +269,7 @@ export type HomeUser = { blackholedRate: Rate; correctionPointRanking: Array; memberRate: Rate; + monthlyActiveUserCountRecordsFromEnd: Array; monthlyAliveUserCountRecordsByDate: Array; monthlyAliveUserCountRecordsFromEnd: Array; monthlyAliveUserCountRecordsFromStart: Array; @@ -287,6 +288,11 @@ export type HomeUserCorrectionPointRankingArgs = { }; +export type HomeUserMonthlyActiveUserCountRecordsFromEndArgs = { + last: Scalars['Int']; +}; + + export type HomeUserMonthlyAliveUserCountRecordsByDateArgs = { firstOrLast: Scalars['Int']; timestamp: Scalars['Int']; @@ -1098,7 +1104,7 @@ export type GetMonthlyAliveUserCountRecordsFromEndQueryVariables = Exact<{ }>; -export type GetMonthlyAliveUserCountRecordsFromEndQuery = { __typename?: 'Query', getHomeUser: { __typename?: 'HomeUser', monthlyAliveUserCountRecordsFromEnd: Array<{ __typename?: 'IntRecord', at: string, value: number }> } }; +export type GetMonthlyAliveUserCountRecordsFromEndQuery = { __typename?: 'Query', getHomeUser: { __typename?: 'HomeUser', monthlyAliveUserCountRecordsFromEnd: Array<{ __typename?: 'IntRecord', at: string, value: number }>, monthlyActiveUserCountRecordsFromEnd: Array<{ __typename?: 'IntRecord', at: string, value: number }> } }; export type GetAverageDurationPerCircleQueryVariables = Exact<{ [key: string]: never; }>; @@ -1513,7 +1519,7 @@ export const GetTotalEvalCountDocument = {"kind":"Document","definitions":[{"kin export const GetCurrRegisteredCountRankingDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCurrRegisteredCountRanking"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"limit"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getHomeTeam"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currRegisteredCountRanking"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"Variable","name":{"kind":"Name","value":"limit"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectPreview"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"projectPreviewFields"}}]}},{"kind":"Field","name":{"kind":"Name","value":"rank"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"projectPreviewFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ProjectPreview"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"circle"}}]}}]} as unknown as DocumentNode; export const GetRecentExamResultDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetRecentExamResult"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getHomeTeam"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"recentExamResult"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"resultPerRank"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"rank"}},{"kind":"Field","name":{"kind":"Name","value":"rate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"beginAt"}},{"kind":"Field","name":{"kind":"Name","value":"location"}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const GetTeamCloseRecordsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetTeamCloseRecords"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"last"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getHomeTeam"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"teamCloseRecords"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"last"},"value":{"kind":"Variable","name":{"kind":"Name","value":"last"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"at"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}}]} as unknown as DocumentNode; -export const GetMonthlyAliveUserCountRecordsFromEndDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetMonthlyAliveUserCountRecordsFromEnd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"last"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getHomeUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"monthlyAliveUserCountRecordsFromEnd"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"last"},"value":{"kind":"Variable","name":{"kind":"Name","value":"last"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"at"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}}]} as unknown as DocumentNode; +export const GetMonthlyAliveUserCountRecordsFromEndDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetMonthlyAliveUserCountRecordsFromEnd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"last"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getHomeUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"monthlyAliveUserCountRecordsFromEnd"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"last"},"value":{"kind":"Variable","name":{"kind":"Name","value":"last"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"at"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"monthlyActiveUserCountRecordsFromEnd"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"last"},"value":{"kind":"Variable","name":{"kind":"Name","value":"last"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"at"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}}]} as unknown as DocumentNode; export const GetAverageDurationPerCircleDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetAverageDurationPerCircle"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getHomeUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"averageDurationPerCircle"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"circle"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}}]} as unknown as DocumentNode; export const GetBlackholedCountPerCircleDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetBlackholedCountPerCircle"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getHomeUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"blackholedCountPerCircle"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"circle"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}}]} as unknown as DocumentNode; export const GetBlackholedCountRecordsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetBlackholedCountRecords"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"last"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getHomeUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"blackholedCountRecords"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"last"},"value":{"kind":"Variable","name":{"kind":"Name","value":"last"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"at"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}}]} as unknown as DocumentNode; diff --git a/app/src/Home/dashboard-contents/User/AliveUserCountRecords.tsx b/app/src/Home/dashboard-contents/User/AliveUserCountRecords.tsx index 1a76e6092..5169d1b1b 100644 --- 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 ; } - 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 ( { } type="ApexCharts" > - + ); }; type ActiveUserCountRecordsChartProps = { - series: ApexAxisChartSeries; + seriesWithColor: Array; }; const ActiveUserCountRecordsChart = ({ - series, + seriesWithColor, }: ActiveUserCountRecordsChartProps) => { const options: ApexCharts.ApexOptions = { chart: { @@ -130,6 +142,7 @@ const ActiveUserCountRecordsChart = ({ }, min: subMonths(new Date(), 12).getTime(), }, + colors: seriesWithColor.map(({ color }) => color), yaxis: { labels: { formatter: (value) => value.toLocaleString(), @@ -137,7 +150,7 @@ const ActiveUserCountRecordsChart = ({ }, tooltip: { x: { - format: 'yyyy년 M월 d일', + format: 'yyyy년 M월', }, y: { formatter: (value) => numberWithUnitFormatter(value, '명'), @@ -166,5 +179,11 @@ const ActiveUserCountRecordsChart = ({ }, ], }; - return ; + + return ( + ({ name, data }))} + options={options} + /> + ); }; diff --git a/app/src/Home/dashboard-frames/homeRecordDashboardRows.ts b/app/src/Home/dashboard-frames/homeRecordDashboardRows.ts index 37488e813..2dfd0c6c3 100644 --- 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 index 4dabbb94c..d409a873c 100644 --- 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,