Website compare fix. Updated date functions.

src/components/charts/BarChart.tsx

@@ -5,7 +5,7 @@ import { Chart, ChartProps } from '@/components/charts/Chart';
 import { useLocale } from '@/components/hooks';
 import { renderNumberLabels } from '@/lib/charts';
 import { getThemeColors } from '@/lib/colors';
-import { formatDate, formatDateByUnit } from '@/lib/date';
+import { formatDate, DATE_FORMATS } from '@/lib/date';
 import { formatLongCurrency, formatLongNumber } from '@/lib/format';
 
 const dateFormats = {
@@ -37,7 +37,7 @@ export function BarChart({
   renderXLabel,
   renderYLabel,
   unit,
-  XAxisType = 'time',
+  XAxisType = 'timeseries',
   YAxisType = 'linear',
   stacked = false,
   minDate,
@@ -57,8 +57,8 @@ export function BarChart({
         x: {
           type: XAxisType,
           stacked: true,
-          min: formatDateByUnit(minDate, unit),
-          max: formatDateByUnit(maxDate, unit),
+          min: formatDate(minDate, DATE_FORMATS[unit], locale),
+          max: formatDate(maxDate, DATE_FORMATS[unit], locale),
           offset: true,
           time: {
             unit,

src/components/hooks/queries/useWebsitePageviewsQuery.ts

@@ -8,15 +8,15 @@ export interface WebsitePageviewsData {
 }
 
 export function useWebsitePageviewsQuery(
-  { websiteId, compareMode }: { websiteId: string; compareMode?: string },
+  { websiteId, compare }: { websiteId: string; compare?: string },
   options?: ReactQueryOptions<WebsitePageviewsData>,
 ) {
   const { get, useQuery } = useApi();
   const filterParams = useFilterParams(websiteId);
 
   return useQuery<WebsitePageviewsData>({
-    queryKey: ['websites:pageviews', { websiteId, compareMode, ...filterParams }],
-    queryFn: () => get(`/websites/${websiteId}/pageviews`, { compareMode, ...filterParams }),
+    queryKey: ['websites:pageviews', { websiteId, compare, ...filterParams }],
+    queryFn: () => get(`/websites/${websiteId}/pageviews`, { compare, ...filterParams }),
     enabled: !!websiteId,
     ...options,
   });

src/components/metrics/MetricsTable.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useMemo, useState } from 'react';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
 import { Icon, Text, SearchField, Row, Column } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
@@ -11,7 +11,6 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
 export interface MetricsTableProps extends ListTableProps {
   websiteId: string;
   type?: string;
-  className?: string;
   dataFilter?: (data: any) => any;
   limit?: number;
   delay?: number;
@@ -20,13 +19,14 @@ export interface MetricsTableProps extends ListTableProps {
   searchFormattedValues?: boolean;
   showMore?: boolean;
   params?: { [key: string]: any };
+  onDataLoad?: (data: any) => any;
+  className?: string;
   children?: ReactNode;
 }
 
 export function MetricsTable({
   websiteId,
   type,
-  className,
   dataFilter,
   limit,
   delay = null,
@@ -34,6 +34,8 @@ export function MetricsTable({
   searchFormattedValues = false,
   showMore = true,
   params,
+  onDataLoad,
+  className,
   children,
   ...props
 }: MetricsTableProps) {
@@ -79,9 +81,15 @@ export function MetricsTable({
     return [];
   }, [data, dataFilter, search, limit, formatValue, type]);
 
+  useEffect(() => {
+    if (data) {
+      onDataLoad?.(data);
+    }
+  }, [data]);
+
   return (
     <Column gap="3" justifyContent="space-between">
-      <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
+      <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error} gap>
         <Row alignItems="center" justifyContent="space-between">
           {allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
           {children}

src/components/metrics/PageviewsChart.tsx

@@ -4,7 +4,7 @@ import { BarChart, BarChartProps } from '@/components/charts/BarChart';
 import { useLocale, useMessages } from '@/components/hooks';
 import { renderDateLabels } from '@/lib/charts';
 import { getThemeColors } from '@/lib/colors';
-import { formatDateByUnit } from '@/lib/date';
+import { generateTimeSeries } from '@/lib/date';
 
 export interface PageviewsChartProps extends BarChartProps {
   data: {
@@ -18,7 +18,7 @@ export interface PageviewsChartProps extends BarChartProps {
   unit: string;
 }
 
-export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
+export function PageviewsChart({ data, unit, minDate, maxDate, ...props }: PageviewsChartProps) {
   const { formatMessage, labels } = useMessages();
   const { theme } = useTheme();
   const { locale, dateLocale } = useLocale();
@@ -32,7 +32,7 @@ export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
       datasets: [
         {
           label: formatMessage(labels.visitors),
-          data: convertDataset(data.sessions, unit, dateLocale),
+          data: generateTimeSeries(data.sessions, minDate, maxDate, unit, dateLocale),
           borderWidth: 1,
           barPercentage: 0.9,
           categoryPercentage: 0.9,
@@ -41,7 +41,7 @@ export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
         },
         {
           label: formatMessage(labels.views),
-          data: convertDataset(data.pageviews, unit, dateLocale),
+          data: generateTimeSeries(data.pageviews, minDate, maxDate, unit, dateLocale),
           barPercentage: 0.9,
           categoryPercentage: 0.9,
           borderWidth: 1,
@@ -53,7 +53,13 @@ export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
               {
                 type: 'line',
                 label: `${formatMessage(labels.views)} (${formatMessage(labels.previous)})`,
-                data: data.compare.pageviews,
+                data: generateTimeSeries(
+                  data.compare.pageviews,
+                  minDate,
+                  maxDate,
+                  unit,
+                  dateLocale,
+                ),
                 borderWidth: 2,
                 backgroundColor: '#8601B0',
                 borderColor: '#8601B0',
@@ -62,7 +68,7 @@ export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
               {
                 type: 'line',
                 label: `${formatMessage(labels.visitors)} (${formatMessage(labels.previous)})`,
-                data: data.compare.sessions,
+                data: generateTimeSeries(data.compare.sessions, minDate, maxDate, unit, dateLocale),
                 borderWidth: 2,
                 backgroundColor: '#f15bb5',
                 borderColor: '#f15bb5',
@@ -81,12 +87,10 @@ export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
       {...props}
       chartData={chartData}
       unit={unit}
+      minDate={minDate}
+      maxDate={maxDate}
       renderXLabel={renderXLabel}
       height="400px"
     />
   );
 }
-
-function convertDataset(data: { x: string; y: number }[], unit: string, locale?: any) {
-  return data.map(d => ({ ...d, d: d.x, x: formatDateByUnit(d.x, unit, locale) }));
-}