From 64a6ba0fdf4800ecddddc64107c169fc0979487a Mon Sep 17 00:00:00 2001 From: Yongjun Park Date: Thu, 7 Dec 2023 03:34:46 +0900 Subject: [PATCH] fix: disable toolbar in touch device --- .../Chart/hooks/useDefaultOptions.ts | 19 ++++++++++++++ .../Coalition/ScoreRecordsPerCoalition.tsx | 25 ++++++++++++++++++- .../Eval/EvalCountRecords.tsx | 23 ++++++++++++++++- .../Team/TeamCloseRecords.tsx | 23 ++++++++++++++++- .../User/BlackholedCountRecords.tsx | 23 ++++++++++++++++- .../dashboard-contents/Eval/CountRecords.tsx | 25 ++++++++++++++++++- .../LogtimeAndProject/LogtimeRecords.tsx | 25 ++++++++++++++++++- 7 files changed, 157 insertions(+), 6 deletions(-) diff --git a/app/src/@shared/components/Chart/hooks/useDefaultOptions.ts b/app/src/@shared/components/Chart/hooks/useDefaultOptions.ts index 2f0e9840..75aa9bf5 100644 --- a/app/src/@shared/components/Chart/hooks/useDefaultOptions.ts +++ b/app/src/@shared/components/Chart/hooks/useDefaultOptions.ts @@ -2,6 +2,7 @@ import { useAtomValue } from 'jotai'; import { merge } from 'lodash-es'; import { Palette, paletteAtom } from '@shared/atoms/paletteAtom'; +import { BREAKPOINT } from '@shared/constants/responsive'; export const useDefaultOptions = () => { const palette = useAtomValue(paletteAtom); @@ -37,6 +38,9 @@ const defaultOptions: ApexCharts.ApexOptions = { }, autoSelected: 'pan', }, + zoom: { + enabled: true, + }, fontFamily: "'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif", }, @@ -54,6 +58,21 @@ const defaultOptions: ApexCharts.ApexOptions = { }, }, }, + responsive: [ + { + breakpoint: BREAKPOINT.TABLET, + options: { + chart: { + toolbar: { + show: false, + }, + zoom: { + enabled: false, + }, + }, + }, + }, + ], }; export const defaultLightOptions = defaultOptions; diff --git a/app/src/Home/dashboard-contents/Coalition/ScoreRecordsPerCoalition.tsx b/app/src/Home/dashboard-contents/Coalition/ScoreRecordsPerCoalition.tsx index f66d165a..b74eb64e 100644 --- a/app/src/Home/dashboard-contents/Coalition/ScoreRecordsPerCoalition.tsx +++ b/app/src/Home/dashboard-contents/Coalition/ScoreRecordsPerCoalition.tsx @@ -13,9 +13,11 @@ import { CALENDAR_MONTHS_FROM_FT_BEGIN_AT, MILLISECONDS, } from '@shared/constants/date'; +import { BREAKPOINT } from '@shared/constants/responsive'; import { kiloFormatter } from '@shared/utils/formatters/kiloFormatter'; import { numberWithUnitFormatter } from '@shared/utils/formatters/numberWithUnitFormatter'; import { injectEmptyMonth } from '@shared/utils/injectEmptyMonth'; +import { useDeviceType } from '@shared/utils/react-responsive/useDeviceType'; const GET_SCORE_RECORDS_PER_COALITION = gql(/* GraphQL */ ` query GetScoreRecordsPerCoalition($last: Int!) { @@ -35,7 +37,10 @@ const GET_SCORE_RECORDS_PER_COALITION = gql(/* GraphQL */ ` export const ScoreRecordsPerCoalition = () => { const title = '코알리숑 스코어 변동 추이'; - const last = CALENDAR_MONTHS_FROM_FT_BEGIN_AT + 1; + + const device = useDeviceType(); + const isDesktop = device === 'desktop'; + const last = isDesktop ? CALENDAR_MONTHS_FROM_FT_BEGIN_AT + 1 : 8; const { loading, error, data } = useQuery(GET_SCORE_RECORDS_PER_COALITION, { variables: { @@ -143,6 +148,8 @@ const ScoreRecordsPerCoalitionChart = ({ formatter: (value) => kiloFormatter(value, 0), }, tickAmount: 4, + min, + max, }, tooltip: { x: { @@ -155,6 +162,22 @@ const ScoreRecordsPerCoalitionChart = ({ forecastDataPoints: { count: 1, }, + responsive: [ + { + breakpoint: BREAKPOINT.TABLET, + options: { + chart: { + event: { + beforeZoom: undefined, + beforeResetZoom: undefined, + }, + }, + xaxis: { + min: undefined, + }, + }, + }, + ], }; return ; diff --git a/app/src/Home/dashboard-contents/Eval/EvalCountRecords.tsx b/app/src/Home/dashboard-contents/Eval/EvalCountRecords.tsx index 57cae249..1a66701e 100644 --- a/app/src/Home/dashboard-contents/Eval/EvalCountRecords.tsx +++ b/app/src/Home/dashboard-contents/Eval/EvalCountRecords.tsx @@ -10,8 +10,10 @@ import { DashboardContentNotFound, } from '@shared/components/DashboardContentView/Error'; import { MILLISECONDS } from '@shared/constants/date'; +import { BREAKPOINT } from '@shared/constants/responsive'; import { numberWithUnitFormatter } from '@shared/utils/formatters/numberWithUnitFormatter'; import { injectEmptyDay } from '@shared/utils/injectEmptyDay'; +import { useDeviceType } from '@shared/utils/react-responsive/useDeviceType'; const GET_EVAL_COUNT_RECORDS = gql(/* GraphQL */ ` query GetEvalCountRecords($last: Int!) { @@ -26,7 +28,10 @@ const GET_EVAL_COUNT_RECORDS = gql(/* GraphQL */ ` export const EvalCountRecords = () => { const title = '일간 평가 횟수 추이'; - const last = 365; + + const device = useDeviceType(); + const isDesktop = device === 'desktop'; + const last = isDesktop ? 365 : 30; const { loading, error, data } = useQuery(GET_EVAL_COUNT_RECORDS, { variables: { @@ -122,6 +127,22 @@ const EvalCountRecordsChart = ({ series }: EvalCountRecordsChartProps) => { forecastDataPoints: { count: 1, }, + responsive: [ + { + breakpoint: BREAKPOINT.TABLET, + options: { + chart: { + event: { + beforeZoom: undefined, + beforeResetZoom: undefined, + }, + }, + xaxis: { + min: undefined, + }, + }, + }, + ], }; return ; }; diff --git a/app/src/Home/dashboard-contents/Team/TeamCloseRecords.tsx b/app/src/Home/dashboard-contents/Team/TeamCloseRecords.tsx index 18bf2712..1a8d33a5 100644 --- a/app/src/Home/dashboard-contents/Team/TeamCloseRecords.tsx +++ b/app/src/Home/dashboard-contents/Team/TeamCloseRecords.tsx @@ -10,8 +10,10 @@ import { DashboardContentNotFound, } from '@shared/components/DashboardContentView/Error'; import { MILLISECONDS } from '@shared/constants/date'; +import { BREAKPOINT } from '@shared/constants/responsive'; import { numberWithUnitFormatter } from '@shared/utils/formatters/numberWithUnitFormatter'; import { injectEmptyDay } from '@shared/utils/injectEmptyDay'; +import { useDeviceType } from '@shared/utils/react-responsive/useDeviceType'; const GET_TEAM_CLOSE_RECORDS = gql(/* GraphQL */ ` query GetTeamCloseRecords($last: Int!) { @@ -26,7 +28,10 @@ const GET_TEAM_CLOSE_RECORDS = gql(/* GraphQL */ ` export const TeamCloseRecords = () => { const title = '일간 팀 제출 횟수 추이'; - const last = 365; + + const device = useDeviceType(); + const isDesktop = device === 'desktop'; + const last = isDesktop ? 365 : 30; const { loading, error, data } = useQuery(GET_TEAM_CLOSE_RECORDS, { variables: { @@ -122,6 +127,22 @@ const EvalCountRecordsChart = ({ series }: EvalCountRecordsChartProps) => { forecastDataPoints: { count: 1, }, + responsive: [ + { + breakpoint: BREAKPOINT.TABLET, + options: { + chart: { + event: { + beforeZoom: undefined, + beforeResetZoom: undefined, + }, + }, + xaxis: { + min: undefined, + }, + }, + }, + ], }; return ; }; diff --git a/app/src/Home/dashboard-contents/User/BlackholedCountRecords.tsx b/app/src/Home/dashboard-contents/User/BlackholedCountRecords.tsx index fa89c353..2de112ea 100644 --- a/app/src/Home/dashboard-contents/User/BlackholedCountRecords.tsx +++ b/app/src/Home/dashboard-contents/User/BlackholedCountRecords.tsx @@ -13,8 +13,10 @@ import { CALENDAR_MONTHS_FROM_FT_BEGIN_AT, MILLISECONDS, } from '@shared/constants/date'; +import { BREAKPOINT } from '@shared/constants/responsive'; import { numberWithUnitFormatter } from '@shared/utils/formatters/numberWithUnitFormatter'; import { injectEmptyMonth } from '@shared/utils/injectEmptyMonth'; +import { useDeviceType } from '@shared/utils/react-responsive/useDeviceType'; const GET_BLACKHOLED_COUNT_RECORDS = gql(/* GraphQL */ ` query GetBlackholedCountRecords($last: Int!) { @@ -29,7 +31,10 @@ const GET_BLACKHOLED_COUNT_RECORDS = gql(/* GraphQL */ ` export const BlackholedCountRecords = () => { const title = '월간 블랙홀 인원 추이'; - const last = CALENDAR_MONTHS_FROM_FT_BEGIN_AT + 1; + + const device = useDeviceType(); + const isDesktop = device === 'desktop'; + const last = isDesktop ? CALENDAR_MONTHS_FROM_FT_BEGIN_AT + 1 : 12; const { loading, error, data } = useQuery(GET_BLACKHOLED_COUNT_RECORDS, { variables: { @@ -129,6 +134,22 @@ const BlackholedCountRecordsChart = ({ forecastDataPoints: { count: 1, }, + responsive: [ + { + breakpoint: BREAKPOINT.TABLET, + options: { + chart: { + event: { + beforeZoom: undefined, + beforeResetZoom: undefined, + }, + }, + xaxis: { + min: undefined, + }, + }, + }, + ], }; return ; }; diff --git a/app/src/Profile/dashboard-contents/Eval/CountRecords.tsx b/app/src/Profile/dashboard-contents/Eval/CountRecords.tsx index c6f6de47..bb32c662 100644 --- a/app/src/Profile/dashboard-contents/Eval/CountRecords.tsx +++ b/app/src/Profile/dashboard-contents/Eval/CountRecords.tsx @@ -13,8 +13,10 @@ import { DashboardContentNotFound, } from '@shared/components/DashboardContentView/Error'; import { MILLISECONDS } from '@shared/constants/date'; +import { BREAKPOINT } from '@shared/constants/responsive'; import { numberWithUnitFormatter } from '@shared/utils/formatters/numberWithUnitFormatter'; import { injectEmptyMonth } from '@shared/utils/injectEmptyMonth'; +import { useDeviceType } from '@shared/utils/react-responsive/useDeviceType'; const GET_COUNT_RECORDS_BY_LOGIN = gql(/* GraphQL */ ` query GetCountRecordsByLogin($login: String!, $last: Int!) { @@ -30,7 +32,12 @@ const GET_COUNT_RECORDS_BY_LOGIN = gql(/* GraphQL */ ` export const CountRecords = () => { const { login } = useContext(UserProfileContext); const beginAt = useContext(BeginAtContext); - const last = differenceInCalendarMonths(new Date(), beginAt) + 1; + + const device = useDeviceType(); + const isDesktop = device === 'desktop'; + const last = isDesktop + ? differenceInCalendarMonths(new Date(), beginAt) + 1 + : Math.min(differenceInCalendarMonths(new Date(), beginAt) + 1, 12); const title = '월간 평가 횟수 추이'; const { loading, error, data } = useQuery(GET_COUNT_RECORDS_BY_LOGIN, { @@ -135,6 +142,22 @@ const CountRecordsChart = ({ series }: CountRecordsChartProps) => { forecastDataPoints: { count: 1, }, + responsive: [ + { + breakpoint: BREAKPOINT.TABLET, + options: { + chart: { + event: { + beforeZoom: undefined, + beforeResetZoom: undefined, + }, + }, + xaxis: { + min: undefined, + }, + }, + }, + ], }; return ; }; diff --git a/app/src/Profile/dashboard-contents/LogtimeAndProject/LogtimeRecords.tsx b/app/src/Profile/dashboard-contents/LogtimeAndProject/LogtimeRecords.tsx index 8d4c2eed..cfc58b80 100644 --- a/app/src/Profile/dashboard-contents/LogtimeAndProject/LogtimeRecords.tsx +++ b/app/src/Profile/dashboard-contents/LogtimeAndProject/LogtimeRecords.tsx @@ -13,8 +13,10 @@ import { DashboardContentNotFound, } from '@shared/components/DashboardContentView/Error'; import { MILLISECONDS } from '@shared/constants/date'; +import { BREAKPOINT } from '@shared/constants/responsive'; import { numberWithUnitFormatter } from '@shared/utils/formatters/numberWithUnitFormatter'; import { injectEmptyMonth } from '@shared/utils/injectEmptyMonth'; +import { useDeviceType } from '@shared/utils/react-responsive/useDeviceType'; const GET_LOGTIME_RECORDS_BY_LOGIN = gql(/* GraphQL */ ` query GetLogtimeRecords($login: String!, $last: Int!) { @@ -30,7 +32,12 @@ const GET_LOGTIME_RECORDS_BY_LOGIN = gql(/* GraphQL */ ` export const LogtimeRecords = () => { const { login } = useContext(UserProfileContext); const beginAt = useContext(BeginAtContext); - const last = differenceInCalendarMonths(new Date(), beginAt) + 1; + + const device = useDeviceType(); + const isDesktop = device === 'desktop'; + const last = isDesktop + ? differenceInCalendarMonths(new Date(), beginAt) + 1 + : Math.min(differenceInCalendarMonths(new Date(), beginAt) + 1, 12); const title = '월간 접속 시간 추이'; const { loading, error, data } = useQuery(GET_LOGTIME_RECORDS_BY_LOGIN, { @@ -144,6 +151,22 @@ const LogtimeRecordsChart = ({ series }: LogtimeRecordsChartProps) => { forecastDataPoints: { count: 1, }, + responsive: [ + { + breakpoint: BREAKPOINT.TABLET, + options: { + chart: { + event: { + beforeZoom: undefined, + beforeResetZoom: undefined, + }, + }, + xaxis: { + min: undefined, + }, + }, + }, + ], }; return ; };