Merge branch 'analytics' of https://github.com/umami-software/umami into dev

Co-authored-by: Om Mishra <contact@om-mishra.com>

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),
   };
 }

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,
+  };
 }

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<string>(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 (
     <LoadingPanel isLoading={isLoading} error={error} minHeight="400px">
       {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"
         />
       )}

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<string, string> = {
+  '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',
+};