diff --git a/src/components/hooks/useDateParameters.ts b/src/components/hooks/useDateParameters.ts index 359bbc1f..16e12314 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 0e1fe6cd..3770c26b 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/components/metrics/EventsChart.tsx b/src/components/metrics/EventsChart.tsx index 7301faf4..246772b3 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" /> )} diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 50a25b8d..195fe1be 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', +};