fix chart and timezone issues, pass consistent dates to DB.

Closes #3700

src/components/metrics/EventsChart.tsx

@@ -1,6 +1,11 @@
 import { BarChart, BarChartProps } from '@/components/charts/BarChart';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { useDateRange, useLocale, useWebsiteEventsSeriesQuery } from '@/components/hooks';
+import {
+  useDateRange,
+  useLocale,
+  useTimezone,
+  useWebsiteEventsSeriesQuery,
+} from '@/components/hooks';
 import { renderDateLabels } from '@/lib/charts';
 import { CHART_COLORS } from '@/lib/constants';
 import { generateTimeSeries } from '@/lib/date';
@@ -13,9 +18,10 @@ export interface EventsChartProps extends BarChartProps {
 }
 
 export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
+  const { timezone } = useTimezone();
   const {
     dateRange: { startDate, endDate, unit },
-  } = useDateRange();
+  } = useDateRange({ timezone: timezone });
   const { locale, dateLocale } = useLocale();
   const { data, isLoading, error } = useWebsiteEventsSeriesQuery(websiteId);
   const [label, setLabel] = useState<string>(focusLabel);
@@ -33,20 +39,32 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
       return obj;
     }, {});
 
-    return {
-      datasets: Object.keys(map).map((key, index) => {
-        const color = colord(CHART_COLORS[index % CHART_COLORS.length]);
-        return {
-          label: key,
-          data: generateTimeSeries(map[key], startDate, endDate, unit, dateLocale),
-          lineTension: 0,
-          backgroundColor: color.alpha(0.6).toRgbString(),
-          borderColor: color.alpha(0.7).toRgbString(),
-          borderWidth: 1,
-        };
-      }),
-      focusLabel,
-    };
+    if (!map || Object.keys(map).length === 0) {
+      return {
+        datasets: [
+          {
+            data: generateTimeSeries([], startDate, endDate, unit, dateLocale),
+            lineTension: 0,
+            borderWidth: 1,
+          },
+        ],
+      };
+    } else {
+      return {
+        datasets: Object.keys(map).map((key, index) => {
+          const color = colord(CHART_COLORS[index % CHART_COLORS.length]);
+          return {
+            label: key,
+            data: generateTimeSeries(map[key], startDate, endDate, unit, dateLocale),
+            lineTension: 0,
+            backgroundColor: color.alpha(0.6).toRgbString(),
+            borderColor: color.alpha(0.7).toRgbString(),
+            borderWidth: 1,
+          };
+        }),
+        focusLabel,
+      };
+    }
   }, [data, startDate, endDate, unit, focusLabel]);
 
   useEffect(() => {

src/components/metrics/RealtimeChart.tsx

@@ -3,6 +3,7 @@ import { startOfMinute, subMinutes, isBefore } from 'date-fns';
 import { PageviewsChart } from './PageviewsChart';
 import { DEFAULT_ANIMATION_DURATION, REALTIME_RANGE } from '@/lib/constants';
 import { RealtimeData } from '@/lib/types';
+import { useTimezone } from '@/components/hooks';
 
 export interface RealtimeChartProps {
   data: RealtimeData;
@@ -11,6 +12,7 @@ export interface RealtimeChartProps {
 }
 
 export function RealtimeChart({ data, unit, ...props }: RealtimeChartProps) {
+  const { formatSeriesTimezone, fromUtc, timezone } = useTimezone();
   const endDate = startOfMinute(new Date());
   const startDate = subMinutes(endDate, REALTIME_RANGE);
   const prevEndDate = useRef(endDate);
@@ -21,8 +23,8 @@ export function RealtimeChart({ data, unit, ...props }: RealtimeChartProps) {
     }
 
     return {
-      pageviews: data.series.views,
-      sessions: data.series.visitors,
+      pageviews: formatSeriesTimezone(data.series.views, 'x', timezone),
+      sessions: formatSeriesTimezone(data.series.visitors, 'x', timezone),
     };
   }, [data, startDate, endDate, unit]);
 
@@ -38,8 +40,8 @@ export function RealtimeChart({ data, unit, ...props }: RealtimeChartProps) {
   return (
     <PageviewsChart
       {...props}
-      minDate={startDate}
-      maxDate={endDate}
+      minDate={fromUtc(startDate)}
+      maxDate={fromUtc(endDate)}
       unit={unit}
       data={chartData}
       animationDuration={animationDuration}