From 39ff4270cbe025766685f99bb41a15882b9fc26a Mon Sep 17 00:00:00 2001 From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com> Date: Fri, 18 Oct 2024 23:37:24 -0300 Subject: [PATCH 01/13] feat: time unit & chart settings styles --- src/app/(main)/profile/TimeUnitSettings.module.css | 8 ++++++++ src/components/input/WebsiteChartSettings.module.css | 3 +++ 2 files changed, 11 insertions(+) create mode 100644 src/app/(main)/profile/TimeUnitSettings.module.css create mode 100644 src/components/input/WebsiteChartSettings.module.css diff --git a/src/app/(main)/profile/TimeUnitSettings.module.css b/src/app/(main)/profile/TimeUnitSettings.module.css new file mode 100644 index 0000000000..3160164126 --- /dev/null +++ b/src/app/(main)/profile/TimeUnitSettings.module.css @@ -0,0 +1,8 @@ +.dropdown { + width: 200px; +} + +div.menu { + max-height: 300px; + width: 300px; +} diff --git a/src/components/input/WebsiteChartSettings.module.css b/src/components/input/WebsiteChartSettings.module.css new file mode 100644 index 0000000000..bd9ec1a8c4 --- /dev/null +++ b/src/components/input/WebsiteChartSettings.module.css @@ -0,0 +1,3 @@ +.dropdown span { + white-space: nowrap; +} From c03bb921d76c92f285f95dcb3cdbcec4b4aad35b Mon Sep 17 00:00:00 2001 From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com> Date: Fri, 18 Oct 2024 23:37:58 -0300 Subject: [PATCH 02/13] feat: time unit selection hook --- src/components/hooks/useTimeUnit.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/components/hooks/useTimeUnit.ts diff --git a/src/components/hooks/useTimeUnit.ts b/src/components/hooks/useTimeUnit.ts new file mode 100644 index 0000000000..e5f69cb074 --- /dev/null +++ b/src/components/hooks/useTimeUnit.ts @@ -0,0 +1,19 @@ +import { TimeUnit } from 'lib/types'; +import { useState } from 'react'; + +export function useTimeUnit(): { + currentTimeUnit: TimeUnit; + timeUnitOptions: TimeUnit[]; + saveTimeUnit: (value: TimeUnit) => void; +} { + const [timeUnit, setTimeUnit] = useState('hour'); + const timeUnitOptions = ['hour', 'day', 'week', 'month', 'year']; + + function saveTimeUnit(value: TimeUnit) { + setTimeUnit(value); + } + + return { currentTimeUnit: timeUnit, timeUnitOptions, saveTimeUnit }; +} + +export default useTimeUnit; From a041baad753077ded583fe8254be73fa348e62aa Mon Sep 17 00:00:00 2001 From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com> Date: Fri, 18 Oct 2024 23:38:26 -0300 Subject: [PATCH 03/13] feat: time unit utils --- src/components/messages.ts | 1 + src/lib/constants.ts | 2 ++ src/store/app.ts | 11 +++++++++-- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/messages.ts b/src/components/messages.ts index f711a4f6cf..12eede5947 100644 --- a/src/components/messages.ts +++ b/src/components/messages.ts @@ -70,6 +70,7 @@ export const labels = defineMessages({ confirmPassword: { id: 'label.confirm-password', defaultMessage: 'Confirm password' }, timezone: { id: 'label.timezone', defaultMessage: 'Timezone' }, defaultDateRange: { id: 'label.default-date-range', defaultMessage: 'Default date range' }, + timeUnit: { id: 'label.time-unit', defaultMessage: 'Time Unit' }, language: { id: 'label.language', defaultMessage: 'Language' }, theme: { id: 'label.theme', defaultMessage: 'Theme' }, profile: { id: 'label.profile', defaultMessage: 'Profile' }, diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 5d3a9776b5..bb6f0b010d 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -4,6 +4,7 @@ export const AUTH_TOKEN = 'umami.auth'; export const LOCALE_CONFIG = 'umami.locale'; export const TIMEZONE_CONFIG = 'umami.timezone'; export const DATE_RANGE_CONFIG = 'umami.date-range'; +export const TIME_UNIT_CONFIG = 'umami.time-range'; export const THEME_CONFIG = 'umami.theme'; export const DASHBOARD_CONFIG = 'umami.dashboard'; export const VERSION_CHECK = 'umami.version-check'; @@ -17,6 +18,7 @@ export const DEFAULT_LOCALE = process.env.defaultLocale || 'en-US'; export const DEFAULT_THEME = 'light'; export const DEFAULT_ANIMATION_DURATION = 300; export const DEFAULT_DATE_RANGE = '24hour'; +export const DEFAULT_TIME_UNIT = '1hour'; export const DEFAULT_WEBSITE_LIMIT = 10; export const DEFAULT_RESET_DATE = '2000-01-01'; export const DEFAULT_PAGE_SIZE = 10; diff --git a/src/store/app.ts b/src/store/app.ts index 4d547d4e89..54f0612928 100644 --- a/src/store/app.ts +++ b/src/store/app.ts @@ -1,15 +1,17 @@ -import { create } from 'zustand'; import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE, DEFAULT_LOCALE, DEFAULT_THEME, + DEFAULT_TIME_UNIT, LOCALE_CONFIG, THEME_CONFIG, + TIME_UNIT_CONFIG, TIMEZONE_CONFIG, } from 'lib/constants'; -import { getItem } from 'next-basics'; import { getTimezone } from 'lib/date'; +import { getItem } from 'next-basics'; +import { create } from 'zustand'; function getDefaultTheme() { return typeof window !== 'undefined' @@ -24,6 +26,7 @@ const initialState = { theme: getItem(THEME_CONFIG) || getDefaultTheme() || DEFAULT_THEME, timezone: getItem(TIMEZONE_CONFIG) || getTimezone(), dateRange: getItem(DATE_RANGE_CONFIG) || DEFAULT_DATE_RANGE, + timeUnit: getItem(TIME_UNIT_CONFIG) || DEFAULT_TIME_UNIT, shareToken: null, user: null, config: null, @@ -59,4 +62,8 @@ export function setDateRange(dateRange: string | object) { store.setState({ dateRange }); } +export function setTimeUnit(timeUnit: string | object) { + store.setState({ timeUnit }); +} + export default store; From 93913573dfebea563ed6d4dfe9f0417b27defd34 Mon Sep 17 00:00:00 2001 From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com> Date: Fri, 18 Oct 2024 23:38:58 -0300 Subject: [PATCH 04/13] feat: time unit settings form --- src/app/(main)/profile/TimeUnitSettings.tsx | 28 +++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/app/(main)/profile/TimeUnitSettings.tsx diff --git a/src/app/(main)/profile/TimeUnitSettings.tsx b/src/app/(main)/profile/TimeUnitSettings.tsx new file mode 100644 index 0000000000..5067617768 --- /dev/null +++ b/src/app/(main)/profile/TimeUnitSettings.tsx @@ -0,0 +1,28 @@ +import { useMessages } from 'components/hooks'; +import useTimeUnit from 'components/hooks/useTimeUnit'; +import { Button, Dropdown, Flexbox, Item } from 'react-basics'; +import styles from './TimeUnitSettings.module.css'; + +export function TimeUnitSettings() { + const { formatMessage, labels } = useMessages(); + const { currentTimeUnit, timeUnitOptions, saveTimeUnit } = useTimeUnit(); + + const handleReset = () => saveTimeUnit('hour'); + + return ( + + saveTimeUnit(value)} + menuProps={{ className: styles.menu }} + > + {item => {item}} + + + + ); +} + +export default TimeUnitSettings; From e3be2289df142293058324ffd8d3efb1db514722 Mon Sep 17 00:00:00 2001 From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com> Date: Fri, 18 Oct 2024 23:42:03 -0300 Subject: [PATCH 05/13] feat: chart settings modal (eg. time unit) --- .../input/WebsiteChartSettings.module.css | 21 ++++++++- src/components/input/WebsiteChartSettings.tsx | 44 +++++++++++++++++++ 2 files changed, 63 insertions(+), 2 deletions(-) create mode 100644 src/components/input/WebsiteChartSettings.tsx diff --git a/src/components/input/WebsiteChartSettings.module.css b/src/components/input/WebsiteChartSettings.module.css index bd9ec1a8c4..9c1fdbd8d3 100644 --- a/src/components/input/WebsiteChartSettings.module.css +++ b/src/components/input/WebsiteChartSettings.module.css @@ -1,3 +1,20 @@ -.dropdown span { - white-space: nowrap; +.container { + display: flex; + align-items: center; + gap: 10px; +} + +.buttons { + display: flex; +} + +.buttons button:first-child { + border-start-end-radius: 0; + border-end-end-radius: 0; + border-inline-end: 1px solid var(--base400); +} + +.buttons button:last-child { + border-start-start-radius: 0; + border-end-start-radius: 0; } diff --git a/src/components/input/WebsiteChartSettings.tsx b/src/components/input/WebsiteChartSettings.tsx new file mode 100644 index 0000000000..07aa5a92ac --- /dev/null +++ b/src/components/input/WebsiteChartSettings.tsx @@ -0,0 +1,44 @@ +import TimeUnitSettings from 'app/(main)/profile/TimeUnitSettings'; +import { useMessages } from 'components/hooks'; +import { Button, Form, FormRow, Modal } from 'react-basics'; +import styles from './WebsiteChartSettings.module.css'; + +export interface WebsiteChartSettingsProps { + isOpened?: boolean; + onClose?: () => void; + onChange?: (value: string) => void; +} + +export function WebsiteChartSettings({ onClose }: WebsiteChartSettingsProps) { + const { formatMessage, labels } = useMessages(); + + const handleSave = () => { + // Save the settings + }; + + const handleClose = () => onClose(); + + return ( + <> + +
+
+
+ + + +
+
+
+ + +
+
+ + + ); +} + +export default WebsiteChartSettings; From 138aae7c714e12ffbff889793256b7f2e499f21b Mon Sep 17 00:00:00 2001 From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com> Date: Fri, 18 Oct 2024 23:42:39 -0300 Subject: [PATCH 06/13] wip: website chart settings button --- src/components/input/WebsiteDateFilter.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/input/WebsiteDateFilter.tsx b/src/components/input/WebsiteDateFilter.tsx index 486f5de144..ca85c7444e 100644 --- a/src/components/input/WebsiteDateFilter.tsx +++ b/src/components/input/WebsiteDateFilter.tsx @@ -1,10 +1,12 @@ import { useDateRange, useLocale } from 'components/hooks'; import { isAfter } from 'date-fns'; import { getOffsetDateRange } from 'lib/date'; +import { DateRange } from 'lib/types'; +import { useState } from 'react'; import { Button, Icon, Icons } from 'react-basics'; import DateFilter from './DateFilter'; +import WebsiteChartSettings from './WebsiteChartSettings'; import styles from './WebsiteDateFilter.module.css'; -import { DateRange } from 'lib/types'; export function WebsiteDateFilter({ websiteId, @@ -16,6 +18,7 @@ export function WebsiteDateFilter({ const { dir } = useLocale(); const { dateRange, saveDateRange } = useDateRange(websiteId); const { value, startDate, endDate, offset } = dateRange; + const [showChartParams, setShowChartParams] = useState(false); const disableForward = value === 'all' || isAfter(getOffsetDateRange(dateRange, 1).startDate, new Date()); @@ -52,6 +55,18 @@ export function WebsiteDateFilter({ )} + + {showChartParams && ( + setShowChartParams(false)} + onChange={handleChange} + /> + )} ); } From 65fa09af5f4ff1d1feccfd26059b34567957dbbe Mon Sep 17 00:00:00 2001 From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com> Date: Thu, 21 Nov 2024 00:31:26 -0300 Subject: [PATCH 07/13] fix: button styles --- src/components/input/WebsiteChartSettings.module.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/input/WebsiteChartSettings.module.css b/src/components/input/WebsiteChartSettings.module.css index 9c1fdbd8d3..a5683551bd 100644 --- a/src/components/input/WebsiteChartSettings.module.css +++ b/src/components/input/WebsiteChartSettings.module.css @@ -1,11 +1,17 @@ .container { display: flex; - align-items: center; - gap: 10px; + flex-direction: column; + justify-content: space-between; + gap: 20px; + min-height: 100px; } .buttons { display: flex; + align-items: center; + justify-content: center; + gap: 10px; + margin-top: 20px; } .buttons button:first-child { From f4b68c9bac5bef553ce889de5d95103386ffaf8f Mon Sep 17 00:00:00 2001 From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com> Date: Thu, 21 Nov 2024 01:01:58 -0300 Subject: [PATCH 08/13] feat: adjust constants --- src/lib/constants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/constants.ts b/src/lib/constants.ts index bb6f0b010d..64ca37938e 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -4,7 +4,7 @@ export const AUTH_TOKEN = 'umami.auth'; export const LOCALE_CONFIG = 'umami.locale'; export const TIMEZONE_CONFIG = 'umami.timezone'; export const DATE_RANGE_CONFIG = 'umami.date-range'; -export const TIME_UNIT_CONFIG = 'umami.time-range'; +export const TIME_UNIT_CONFIG = 'umami.time-unit'; export const THEME_CONFIG = 'umami.theme'; export const DASHBOARD_CONFIG = 'umami.dashboard'; export const VERSION_CHECK = 'umami.version-check'; From b6ffe4c383c4d5c907eb5a9a56aef558f1e3be9c Mon Sep 17 00:00:00 2001 From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com> Date: Thu, 21 Nov 2024 01:02:29 -0300 Subject: [PATCH 09/13] feat: refactor timeunit hook for store persistency --- src/components/hooks/useTimeUnit.ts | 30 ++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/components/hooks/useTimeUnit.ts b/src/components/hooks/useTimeUnit.ts index e5f69cb074..dbbe21edd2 100644 --- a/src/components/hooks/useTimeUnit.ts +++ b/src/components/hooks/useTimeUnit.ts @@ -1,19 +1,31 @@ +import { DEFAULT_TIME_UNIT, TIME_UNIT_CONFIG } from 'lib/constants'; import { TimeUnit } from 'lib/types'; +import { getItem, setItem } from 'next-basics'; import { useState } from 'react'; +import useStore, { setTimeUnit } from 'store/app'; -export function useTimeUnit(): { - currentTimeUnit: TimeUnit; - timeUnitOptions: TimeUnit[]; - saveTimeUnit: (value: TimeUnit) => void; -} { - const [timeUnit, setTimeUnit] = useState('hour'); +const selector = (state: { timeUnit: string }) => state.timeUnit; + +export function useTimeUnit() { + const storeTimeUnit = useStore(selector) || getItem(TIME_UNIT_CONFIG) || DEFAULT_TIME_UNIT; + const [tempTimeUnit, setTempTimeUnit] = useState(storeTimeUnit); const timeUnitOptions = ['hour', 'day', 'week', 'month', 'year']; - function saveTimeUnit(value: TimeUnit) { - setTimeUnit(value); + function updateTimeUnit(value: TimeUnit) { + setTempTimeUnit(value); + } + + function saveTimeUnit() { + setTimeUnit(tempTimeUnit); + setItem(TIME_UNIT_CONFIG, tempTimeUnit); } - return { currentTimeUnit: timeUnit, timeUnitOptions, saveTimeUnit }; + return { + timeUnit: tempTimeUnit, + timeUnitOptions, + updateTimeUnit, + saveTimeUnit, + }; } export default useTimeUnit; From aa07fdf46007322612f739d77c0d7aff501e9bf3 Mon Sep 17 00:00:00 2001 From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com> Date: Thu, 21 Nov 2024 01:02:54 -0300 Subject: [PATCH 10/13] feat: update timeunit onChange --- src/app/(main)/profile/TimeUnitSettings.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/(main)/profile/TimeUnitSettings.tsx b/src/app/(main)/profile/TimeUnitSettings.tsx index 5067617768..c13300829d 100644 --- a/src/app/(main)/profile/TimeUnitSettings.tsx +++ b/src/app/(main)/profile/TimeUnitSettings.tsx @@ -5,17 +5,17 @@ import styles from './TimeUnitSettings.module.css'; export function TimeUnitSettings() { const { formatMessage, labels } = useMessages(); - const { currentTimeUnit, timeUnitOptions, saveTimeUnit } = useTimeUnit(); + const { timeUnit, timeUnitOptions, updateTimeUnit } = useTimeUnit(); - const handleReset = () => saveTimeUnit('hour'); + const handleReset = () => updateTimeUnit('hour'); return ( saveTimeUnit(value)} + value={timeUnit} + onChange={(value: any) => updateTimeUnit(value)} menuProps={{ className: styles.menu }} > {item => {item}} From d683df93b2faec158b1edde4f10d4cf0fbf67d9c Mon Sep 17 00:00:00 2001 From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com> Date: Thu, 21 Nov 2024 01:03:51 -0300 Subject: [PATCH 11/13] feat: persist changes --- src/components/input/WebsiteChartSettings.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/input/WebsiteChartSettings.tsx b/src/components/input/WebsiteChartSettings.tsx index 07aa5a92ac..d407d03b61 100644 --- a/src/components/input/WebsiteChartSettings.tsx +++ b/src/components/input/WebsiteChartSettings.tsx @@ -1,19 +1,22 @@ import TimeUnitSettings from 'app/(main)/profile/TimeUnitSettings'; import { useMessages } from 'components/hooks'; +import useTimeUnit from 'components/hooks/useTimeUnit'; import { Button, Form, FormRow, Modal } from 'react-basics'; import styles from './WebsiteChartSettings.module.css'; export interface WebsiteChartSettingsProps { isOpened?: boolean; - onClose?: () => void; + onClose: () => void; onChange?: (value: string) => void; } export function WebsiteChartSettings({ onClose }: WebsiteChartSettingsProps) { const { formatMessage, labels } = useMessages(); + const { saveTimeUnit } = useTimeUnit(); const handleSave = () => { - // Save the settings + saveTimeUnit(); + onClose(); }; const handleClose = () => onClose(); From 0948cb40c09833b0ac2c08147cd520939dc20c47 Mon Sep 17 00:00:00 2001 From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com> Date: Thu, 21 Nov 2024 01:04:03 -0300 Subject: [PATCH 12/13] feat: update timeunit on pageview chart --- .../(main)/websites/[websiteId]/WebsiteChart.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx index fa5ab69423..cf6446d325 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx @@ -1,7 +1,8 @@ -import { useMemo } from 'react'; -import PageviewsChart from 'components/metrics/PageviewsChart'; -import useWebsitePageviews from 'components/hooks/queries/useWebsitePageviews'; import { useDateRange } from 'components/hooks'; +import useWebsitePageviews from 'components/hooks/queries/useWebsitePageviews'; +import useTimeUnit from 'components/hooks/useTimeUnit'; +import PageviewsChart from 'components/metrics/PageviewsChart'; +import { useMemo } from 'react'; export function WebsiteChart({ websiteId, @@ -11,7 +12,8 @@ export function WebsiteChart({ compareMode?: boolean; }) { const { dateRange, dateCompare } = useDateRange(websiteId); - const { startDate, endDate, unit } = dateRange; + const { timeUnit } = useTimeUnit(); + const { startDate, endDate } = dateRange; const { data, isLoading } = useWebsitePageviews(websiteId, compareMode ? dateCompare : undefined); const { pageviews, sessions, compare } = (data || {}) as any; @@ -40,14 +42,14 @@ export function WebsiteChart({ return result; } return { pageviews: [], sessions: [] }; - }, [data, startDate, endDate, unit]); + }, [data, startDate, endDate, timeUnit]); return ( ); From d7ade2f80f3c04716a5c1b76c6be8a55acea2592 Mon Sep 17 00:00:00 2001 From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com> Date: Thu, 21 Nov 2024 01:20:35 -0300 Subject: [PATCH 13/13] wip: enforce max chart points when selecting unit --- src/app/(main)/profile/TimeUnitSettings.tsx | 7 ++-- src/components/hooks/useTimeUnit.ts | 36 ++++++++++++++----- src/components/input/WebsiteChartSettings.tsx | 8 +++-- src/components/input/WebsiteDateFilter.tsx | 1 + src/lib/constants.ts | 3 +- 5 files changed, 39 insertions(+), 16 deletions(-) diff --git a/src/app/(main)/profile/TimeUnitSettings.tsx b/src/app/(main)/profile/TimeUnitSettings.tsx index c13300829d..73ff35c3bb 100644 --- a/src/app/(main)/profile/TimeUnitSettings.tsx +++ b/src/app/(main)/profile/TimeUnitSettings.tsx @@ -1,13 +1,14 @@ -import { useMessages } from 'components/hooks'; +import { useDateRange, useMessages } from 'components/hooks'; import useTimeUnit from 'components/hooks/useTimeUnit'; import { Button, Dropdown, Flexbox, Item } from 'react-basics'; import styles from './TimeUnitSettings.module.css'; export function TimeUnitSettings() { const { formatMessage, labels } = useMessages(); - const { timeUnit, timeUnitOptions, updateTimeUnit } = useTimeUnit(); + const { dateRange } = useDateRange(); + const { timeUnit, timeUnitOptions, updateTimeUnit } = useTimeUnit(dateRange); - const handleReset = () => updateTimeUnit('hour'); + const handleReset = () => updateTimeUnit('day'); return ( diff --git a/src/components/hooks/useTimeUnit.ts b/src/components/hooks/useTimeUnit.ts index dbbe21edd2..e70902dcc8 100644 --- a/src/components/hooks/useTimeUnit.ts +++ b/src/components/hooks/useTimeUnit.ts @@ -1,28 +1,46 @@ -import { DEFAULT_TIME_UNIT, TIME_UNIT_CONFIG } from 'lib/constants'; -import { TimeUnit } from 'lib/types'; +import { DEFAULT_TIME_UNIT, MAX_CHART_POINTS, TIME_UNIT_CONFIG, UNIT_TYPES } from 'lib/constants'; +import { getDateLength } from 'lib/date'; +import { DateRange, TimeUnit } from 'lib/types'; import { getItem, setItem } from 'next-basics'; import { useState } from 'react'; import useStore, { setTimeUnit } from 'store/app'; const selector = (state: { timeUnit: string }) => state.timeUnit; -export function useTimeUnit() { +export function useTimeUnit(dateRange?: DateRange) { const storeTimeUnit = useStore(selector) || getItem(TIME_UNIT_CONFIG) || DEFAULT_TIME_UNIT; - const [tempTimeUnit, setTempTimeUnit] = useState(storeTimeUnit); - const timeUnitOptions = ['hour', 'day', 'week', 'month', 'year']; + const validTimeUnits = getValidTimeUnits(dateRange); + const [tempTimeUnit, setTempTimeUnit] = useState(() => { + return validTimeUnits.includes(storeTimeUnit) ? storeTimeUnit : validTimeUnits[0]; + }); + + function getValidTimeUnits(dateRange: DateRange) { + if (!dateRange?.startDate || !dateRange?.endDate) { + return UNIT_TYPES; + } + + return UNIT_TYPES.filter(unit => { + const points = getDateLength(dateRange.startDate, dateRange.endDate, unit); + return points <= MAX_CHART_POINTS; + }); + } function updateTimeUnit(value: TimeUnit) { - setTempTimeUnit(value); + if (validTimeUnits.includes(value)) { + setTempTimeUnit(value); + } } function saveTimeUnit() { - setTimeUnit(tempTimeUnit); - setItem(TIME_UNIT_CONFIG, tempTimeUnit); + if (validTimeUnits.includes(tempTimeUnit)) { + setTimeUnit(tempTimeUnit); + setItem(TIME_UNIT_CONFIG, tempTimeUnit); + } } return { timeUnit: tempTimeUnit, - timeUnitOptions, + timeUnitOptions: validTimeUnits, updateTimeUnit, saveTimeUnit, }; diff --git a/src/components/input/WebsiteChartSettings.tsx b/src/components/input/WebsiteChartSettings.tsx index d407d03b61..8ce117280f 100644 --- a/src/components/input/WebsiteChartSettings.tsx +++ b/src/components/input/WebsiteChartSettings.tsx @@ -1,18 +1,20 @@ import TimeUnitSettings from 'app/(main)/profile/TimeUnitSettings'; -import { useMessages } from 'components/hooks'; +import { useDateRange, useMessages } from 'components/hooks'; import useTimeUnit from 'components/hooks/useTimeUnit'; import { Button, Form, FormRow, Modal } from 'react-basics'; import styles from './WebsiteChartSettings.module.css'; export interface WebsiteChartSettingsProps { + websiteId: string; isOpened?: boolean; onClose: () => void; onChange?: (value: string) => void; } -export function WebsiteChartSettings({ onClose }: WebsiteChartSettingsProps) { +export function WebsiteChartSettings({ websiteId, onClose }: WebsiteChartSettingsProps) { const { formatMessage, labels } = useMessages(); - const { saveTimeUnit } = useTimeUnit(); + const { dateRange } = useDateRange(websiteId); + const { saveTimeUnit } = useTimeUnit(dateRange); const handleSave = () => { saveTimeUnit(); diff --git a/src/components/input/WebsiteDateFilter.tsx b/src/components/input/WebsiteDateFilter.tsx index ca85c7444e..4570d295bd 100644 --- a/src/components/input/WebsiteDateFilter.tsx +++ b/src/components/input/WebsiteDateFilter.tsx @@ -62,6 +62,7 @@ export function WebsiteDateFilter({ {showChartParams && ( setShowChartParams(false)} onChange={handleChange} diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 64ca37938e..ccedac7e7d 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -18,7 +18,7 @@ export const DEFAULT_LOCALE = process.env.defaultLocale || 'en-US'; export const DEFAULT_THEME = 'light'; export const DEFAULT_ANIMATION_DURATION = 300; export const DEFAULT_DATE_RANGE = '24hour'; -export const DEFAULT_TIME_UNIT = '1hour'; +export const DEFAULT_TIME_UNIT = 'day'; export const DEFAULT_WEBSITE_LIMIT = 10; export const DEFAULT_RESET_DATE = '2000-01-01'; export const DEFAULT_PAGE_SIZE = 10; @@ -26,6 +26,7 @@ export const DEFAULT_DATE_COMPARE = 'prev'; export const REALTIME_RANGE = 30; export const REALTIME_INTERVAL = 10000; +export const MAX_CHART_POINTS = 720; export const FILTER_COMBINED = 'filter-combined'; export const FILTER_RAW = 'filter-raw';