From 49e1582c288bc5bc71f3f4e0482873b0930c1297 Mon Sep 17 00:00:00 2001 From: Francis Cao Date: Mon, 10 Nov 2025 15:36:43 -0800 Subject: [PATCH 1/4] implement generateTimeSeries for eventsChart --- src/components/metrics/EventsChart.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/metrics/EventsChart.tsx b/src/components/metrics/EventsChart.tsx index 7301faf44..246772b3e 100644 --- a/src/components/metrics/EventsChart.tsx +++ b/src/components/metrics/EventsChart.tsx @@ -1,10 +1,11 @@ -import { useMemo, useState, useEffect } from 'react'; -import { colord } from 'colord'; import { BarChart, BarChartProps } from '@/components/charts/BarChart'; +import { LoadingPanel } from '@/components/common/LoadingPanel'; import { useDateRange, useLocale, useWebsiteEventsSeriesQuery } from '@/components/hooks'; import { renderDateLabels } from '@/lib/charts'; import { CHART_COLORS } from '@/lib/constants'; -import { LoadingPanel } from '@/components/common/LoadingPanel'; +import { generateTimeSeries } from '@/lib/date'; +import { colord } from 'colord'; +import { useCallback, useEffect, useMemo, useState } from 'react'; export interface EventsChartProps extends BarChartProps { websiteId: string; @@ -15,7 +16,7 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) { const { dateRange: { startDate, endDate, unit }, } = useDateRange(); - const { locale } = useLocale(); + const { locale, dateLocale } = useLocale(); const { data, isLoading, error } = useWebsiteEventsSeriesQuery(websiteId); const [label, setLabel] = useState(focusLabel); @@ -37,7 +38,7 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) { const color = colord(CHART_COLORS[index % CHART_COLORS.length]); return { label: key, - data: map[key], + data: generateTimeSeries(map[key], startDate, endDate, unit, dateLocale), lineTension: 0, backgroundColor: color.alpha(0.6).toRgbString(), borderColor: color.alpha(0.7).toRgbString(), @@ -54,6 +55,8 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) { } }, [focusLabel]); + const renderXLabel = useCallback(renderDateLabels(unit, locale), [unit, locale]); + return ( {chartData && ( @@ -63,7 +66,7 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) { maxDate={endDate} unit={unit} stacked={true} - renderXLabel={renderDateLabels(unit, locale)} + renderXLabel={renderXLabel} height="400px" /> )} From a1d6204373b13bb4675de3aacc49a650b24318be Mon Sep 17 00:00:00 2001 From: Francis Cao Date: Mon, 10 Nov 2025 17:24:51 -0800 Subject: [PATCH 2/4] add canonicalizeTimezone conversions Co-authored-by: Om Mishra --- src/components/hooks/useDateParameters.ts | 4 ++-- src/components/hooks/useTimezone.ts | 15 +++++++++++++-- src/lib/constants.ts | 21 +++++++++++++++++++++ 3 files changed, 36 insertions(+), 4 deletions(-) diff --git a/src/components/hooks/useDateParameters.ts b/src/components/hooks/useDateParameters.ts index 359bbc1fd..16e123142 100644 --- a/src/components/hooks/useDateParameters.ts +++ b/src/components/hooks/useDateParameters.ts @@ -5,7 +5,7 @@ export function useDateParameters() { const { dateRange: { startDate, endDate, unit }, } = useDateRange(); - const { timezone, toUtc } = useTimezone(); + const { timezone, toUtc, canonicalizeTimezone } = useTimezone(); return { startAt: +toUtc(startDate), @@ -13,6 +13,6 @@ export function useDateParameters() { startDate: toUtc(startDate).toISOString(), endDate: toUtc(endDate).toISOString(), unit, - timezone, + timezone: canonicalizeTimezone(timezone), }; } diff --git a/src/components/hooks/useTimezone.ts b/src/components/hooks/useTimezone.ts index 0e1fe6cd3..3770c26bd 100644 --- a/src/components/hooks/useTimezone.ts +++ b/src/components/hooks/useTimezone.ts @@ -1,5 +1,5 @@ import { setItem } from '@/lib/storage'; -import { TIMEZONE_CONFIG } from '@/lib/constants'; +import { TIMEZONE_CONFIG, TIMEZONE_LEGACY } from '@/lib/constants'; import { formatInTimeZone, zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz'; import { useApp, setTimezone } from '@/store/app'; import { useLocale } from './useLocale'; @@ -34,5 +34,16 @@ export function useTimezone() { return utcToZonedTime(date, timezone); }; - return { timezone, saveTimezone, formatTimezoneDate, toUtc, fromUtc }; + const canonicalizeTimezone = (timezone: string): string => { + return TIMEZONE_LEGACY[timezone] ?? timezone; + }; + + return { + timezone, + saveTimezone, + formatTimezoneDate, + toUtc, + fromUtc, + canonicalizeTimezone, + }; } diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 50a25b8d8..195fe1be8 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -658,3 +658,24 @@ export const CURRENCIES = [ { id: 'OMR', name: 'Omani Rial' }, { id: 'GHS', name: 'Ghanaian Cedi' }, ]; + +export const TIMEZONE_LEGACY: Record = { + 'Asia/Batavia': 'Asia/Jakarta', + 'Asia/Calcutta': 'Asia/Kolkata', + 'Asia/Chongqing': 'Asia/Shanghai', + 'Asia/Harbin': 'Asia/Shanghai', + 'Asia/Jayapura': 'Asia/Pontianak', + 'Asia/Katmandu': 'Asia/Kathmandu', + 'Asia/Macao': 'Asia/Macau', + 'Asia/Rangoon': 'Asia/Yangon', + 'Asia/Saigon': 'Asia/Ho_Chi_Minh', + 'Europe/Kiev': 'Europe/Kyiv', + 'Europe/Zaporozhye': 'Europe/Kyiv', + 'Etc/UTC': 'UTC', + 'US/Arizona': 'America/Phoenix', + 'US/Central': 'America/Chicago', + 'US/Eastern': 'America/New_York', + 'US/Mountain': 'America/Denver', + 'US/Pacific': 'America/Los_Angeles', + 'US/Samoa': 'Pacific/Pago_Pago', +}; From 13ab84d50e7f8bfa4837ba8f7e48e97703b227dd Mon Sep 17 00:00:00 2001 From: Francis Cao Date: Mon, 10 Nov 2025 17:26:06 -0800 Subject: [PATCH 3/4] Revert "add canonicalizeTimezone conversions" This reverts commit a1d6204373b13bb4675de3aacc49a650b24318be. --- src/components/hooks/useDateParameters.ts | 4 ++-- src/components/hooks/useTimezone.ts | 15 ++------------- src/lib/constants.ts | 21 --------------------- 3 files changed, 4 insertions(+), 36 deletions(-) diff --git a/src/components/hooks/useDateParameters.ts b/src/components/hooks/useDateParameters.ts index 16e123142..359bbc1fd 100644 --- a/src/components/hooks/useDateParameters.ts +++ b/src/components/hooks/useDateParameters.ts @@ -5,7 +5,7 @@ export function useDateParameters() { const { dateRange: { startDate, endDate, unit }, } = useDateRange(); - const { timezone, toUtc, canonicalizeTimezone } = useTimezone(); + const { timezone, toUtc } = useTimezone(); return { startAt: +toUtc(startDate), @@ -13,6 +13,6 @@ export function useDateParameters() { startDate: toUtc(startDate).toISOString(), endDate: toUtc(endDate).toISOString(), unit, - timezone: canonicalizeTimezone(timezone), + timezone, }; } diff --git a/src/components/hooks/useTimezone.ts b/src/components/hooks/useTimezone.ts index 3770c26bd..0e1fe6cd3 100644 --- a/src/components/hooks/useTimezone.ts +++ b/src/components/hooks/useTimezone.ts @@ -1,5 +1,5 @@ import { setItem } from '@/lib/storage'; -import { TIMEZONE_CONFIG, TIMEZONE_LEGACY } from '@/lib/constants'; +import { TIMEZONE_CONFIG } from '@/lib/constants'; import { formatInTimeZone, zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz'; import { useApp, setTimezone } from '@/store/app'; import { useLocale } from './useLocale'; @@ -34,16 +34,5 @@ export function useTimezone() { return utcToZonedTime(date, timezone); }; - const canonicalizeTimezone = (timezone: string): string => { - return TIMEZONE_LEGACY[timezone] ?? timezone; - }; - - return { - timezone, - saveTimezone, - formatTimezoneDate, - toUtc, - fromUtc, - canonicalizeTimezone, - }; + return { timezone, saveTimezone, formatTimezoneDate, toUtc, fromUtc }; } diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 195fe1be8..50a25b8d8 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -658,24 +658,3 @@ export const CURRENCIES = [ { id: 'OMR', name: 'Omani Rial' }, { id: 'GHS', name: 'Ghanaian Cedi' }, ]; - -export const TIMEZONE_LEGACY: Record = { - 'Asia/Batavia': 'Asia/Jakarta', - 'Asia/Calcutta': 'Asia/Kolkata', - 'Asia/Chongqing': 'Asia/Shanghai', - 'Asia/Harbin': 'Asia/Shanghai', - 'Asia/Jayapura': 'Asia/Pontianak', - 'Asia/Katmandu': 'Asia/Kathmandu', - 'Asia/Macao': 'Asia/Macau', - 'Asia/Rangoon': 'Asia/Yangon', - 'Asia/Saigon': 'Asia/Ho_Chi_Minh', - 'Europe/Kiev': 'Europe/Kyiv', - 'Europe/Zaporozhye': 'Europe/Kyiv', - 'Etc/UTC': 'UTC', - 'US/Arizona': 'America/Phoenix', - 'US/Central': 'America/Chicago', - 'US/Eastern': 'America/New_York', - 'US/Mountain': 'America/Denver', - 'US/Pacific': 'America/Los_Angeles', - 'US/Samoa': 'Pacific/Pago_Pago', -}; From 839bf3898fa1f7bcc607529262788f294c273c7a Mon Sep 17 00:00:00 2001 From: Francis Cao Date: Mon, 10 Nov 2025 17:27:45 -0800 Subject: [PATCH 4/4] add canonicalizeTimezone conversions Co-authored-by: Om Mishra --- src/components/hooks/useDateParameters.ts | 4 ++-- src/components/hooks/useTimezone.ts | 15 +++++++++++++-- src/lib/constants.ts | 21 +++++++++++++++++++++ 3 files changed, 36 insertions(+), 4 deletions(-) diff --git a/src/components/hooks/useDateParameters.ts b/src/components/hooks/useDateParameters.ts index 359bbc1fd..16e123142 100644 --- a/src/components/hooks/useDateParameters.ts +++ b/src/components/hooks/useDateParameters.ts @@ -5,7 +5,7 @@ export function useDateParameters() { const { dateRange: { startDate, endDate, unit }, } = useDateRange(); - const { timezone, toUtc } = useTimezone(); + const { timezone, toUtc, canonicalizeTimezone } = useTimezone(); return { startAt: +toUtc(startDate), @@ -13,6 +13,6 @@ export function useDateParameters() { startDate: toUtc(startDate).toISOString(), endDate: toUtc(endDate).toISOString(), unit, - timezone, + timezone: canonicalizeTimezone(timezone), }; } diff --git a/src/components/hooks/useTimezone.ts b/src/components/hooks/useTimezone.ts index 0e1fe6cd3..3770c26bd 100644 --- a/src/components/hooks/useTimezone.ts +++ b/src/components/hooks/useTimezone.ts @@ -1,5 +1,5 @@ import { setItem } from '@/lib/storage'; -import { TIMEZONE_CONFIG } from '@/lib/constants'; +import { TIMEZONE_CONFIG, TIMEZONE_LEGACY } from '@/lib/constants'; import { formatInTimeZone, zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz'; import { useApp, setTimezone } from '@/store/app'; import { useLocale } from './useLocale'; @@ -34,5 +34,16 @@ export function useTimezone() { return utcToZonedTime(date, timezone); }; - return { timezone, saveTimezone, formatTimezoneDate, toUtc, fromUtc }; + const canonicalizeTimezone = (timezone: string): string => { + return TIMEZONE_LEGACY[timezone] ?? timezone; + }; + + return { + timezone, + saveTimezone, + formatTimezoneDate, + toUtc, + fromUtc, + canonicalizeTimezone, + }; } diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 50a25b8d8..195fe1be8 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -658,3 +658,24 @@ export const CURRENCIES = [ { id: 'OMR', name: 'Omani Rial' }, { id: 'GHS', name: 'Ghanaian Cedi' }, ]; + +export const TIMEZONE_LEGACY: Record = { + 'Asia/Batavia': 'Asia/Jakarta', + 'Asia/Calcutta': 'Asia/Kolkata', + 'Asia/Chongqing': 'Asia/Shanghai', + 'Asia/Harbin': 'Asia/Shanghai', + 'Asia/Jayapura': 'Asia/Pontianak', + 'Asia/Katmandu': 'Asia/Kathmandu', + 'Asia/Macao': 'Asia/Macau', + 'Asia/Rangoon': 'Asia/Yangon', + 'Asia/Saigon': 'Asia/Ho_Chi_Minh', + 'Europe/Kiev': 'Europe/Kyiv', + 'Europe/Zaporozhye': 'Europe/Kyiv', + 'Etc/UTC': 'UTC', + 'US/Arizona': 'America/Phoenix', + 'US/Central': 'America/Chicago', + 'US/Eastern': 'America/New_York', + 'US/Mountain': 'America/Denver', + 'US/Pacific': 'America/Los_Angeles', + 'US/Samoa': 'Pacific/Pago_Pago', +};