src/app/(main)/websites/[websiteId]/WebsiteChart.tsx

@@ -21,28 +21,30 @@ export function WebsiteChart({
   const { pageviews, sessions, compare } = (data || {}) as any;
 
   const chartData = useMemo(() => {
-    if (!data) {
+    if (data) {
-      return { pageviews: [], sessions: [] };
+      const result = {
-    }
+        pageviews,
+        sessions,
+      };
 
-    return {
+      if (compare) {
-      pageviews,
+        result.compare = {
-      sessions,
+          pageviews: result.pageviews.map(({ x }, i) => ({
-      ...(compare && {
-        compare: {
-          pageviews: pageviews.map(({ x }, i) => ({
             x,
             y: compare.pageviews[i]?.y,
             d: compare.pageviews[i]?.x,
           })),
-          sessions: sessions.map(({ x }, i) => ({
+          sessions: result.sessions.map(({ x }, i) => ({
             x,
             y: compare.sessions[i]?.y,
             d: compare.sessions[i]?.x,
           })),
-        },
+        };
-      }),
+      }
-    };
+
+      return result;
+    }
+    return { pageviews: [], sessions: [] };
   }, [data, startDate, endDate, unit]);
 
   return (

src/app/(main)/websites/[websiteId]/WebsiteMenu.tsx

@@ -10,7 +10,7 @@ import {
 } from '@umami/react-zen';
 import { Fragment } from 'react';
 import { useMessages, useNavigation } from '@/components/hooks';
-import { Edit, MoreHorizontal, Share } from '@/components/icons';
+import { Edit, More, Share } from '@/components/icons';
 
 export function WebsiteMenu({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
@@ -33,7 +33,7 @@ export function WebsiteMenu({ websiteId }: { websiteId: string }) {
     <MenuTrigger>
       <Button variant="quiet">
         <Icon>
-          <MoreHorizontal />
+          <More />
         </Icon>
       </Button>
       <Popover placement="bottom">

src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx

@@ -7,18 +7,14 @@ import { formatLongNumber, formatShortTime } from '@/lib/format';
 
 export function WebsiteMetricsBar({
   websiteId,
-  compareMode,
 }: {
   websiteId: string;
   showChange?: boolean;
   compareMode?: boolean;
 }) {
-  const { isAllTime, dateCompare } = useDateRange();
+  const { isAllTime } = useDateRange();
   const { formatMessage, labels, getErrorMessage } = useMessages();
-  const { data, isLoading, isFetching, error } = useWebsiteStatsQuery({
+  const { data, isLoading, isFetching, error } = useWebsiteStatsQuery(websiteId);
-    websiteId,
-    compare: compareMode ? dateCompare?.compare : undefined,
-  });
 
   const { pageviews, visitors, visits, bounces, totaltime, comparison } = data || {};
 

src/app/(main)/websites/[websiteId]/WebsiteNav.tsx

@@ -29,7 +29,6 @@ export function WebsiteNav({
       event: undefined,
       compare: undefined,
       view: undefined,
-      unit: undefined,
     });
 
   const items = [

src/app/(main)/websites/[websiteId]/WebsitePage.tsx

@@ -1,8 +1,7 @@
 'use client';
-import { Column, Row } from '@umami/react-zen';
+import { Column } from '@umami/react-zen';
 import { ExpandedViewModal } from '@/app/(main)/websites/[websiteId]/ExpandedViewModal';
 import { Panel } from '@/components/common/Panel';
-import { UnitFilter } from '@/components/input/UnitFilter';
 import { WebsiteChart } from './WebsiteChart';
 import { WebsiteControls } from './WebsiteControls';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
@@ -14,9 +13,6 @@ export function WebsitePage({ websiteId }: { websiteId: string }) {
       <WebsiteControls websiteId={websiteId} />
       <WebsiteMetricsBar websiteId={websiteId} showChange={true} />
       <Panel minHeight="520px">
-        <Row justifyContent="end">
-          <UnitFilter />
-        </Row>
         <WebsiteChart websiteId={websiteId} />
       </Panel>
       <WebsitePanels websiteId={websiteId} />

src/app/(main)/websites/[websiteId]/compare/ComparePage.tsx

@@ -10,7 +10,7 @@ export function ComparePage({ websiteId }: { websiteId: string }) {
   return (
     <Column gap>
       <WebsiteControls websiteId={websiteId} allowCompare={true} />
-      <WebsiteMetricsBar websiteId={websiteId} compareMode={true} showChange={true} />
+      <WebsiteMetricsBar websiteId={websiteId} showChange={true} />
       <Panel minHeight="520px">
         <WebsiteChart websiteId={websiteId} compareMode={true} />
       </Panel>

src/app/api/websites/[websiteId]/stats/route.ts

@@ -31,11 +31,9 @@ export async function GET(
 
   const data = await getWebsiteStats(websiteId, filters);
 
-  const { startDate, endDate } = getCompareDate(
+  const compare = filters.compare ?? 'prev';
-    filters.compare ?? 'prev',
+
-    filters.startDate,
+  const { startDate, endDate } = getCompareDate(compare, filters.startDate, filters.endDate);
-    filters.endDate,
-  );
 
   const comparison = await getWebsiteStats(websiteId, {
     ...filters,

src/components/hooks/queries/useWebsiteExpandedMetricsQuery.ts

@@ -19,7 +19,7 @@ export function useWebsiteExpandedMetricsQuery(
   options?: ReactQueryOptions<WebsiteExpandedMetricsData>,
 ) {
   const { get, useQuery } = useApi();
-  const { startAt, endAt } = useDateParameters();
+  const { startAt, endAt, unit, timezone } = useDateParameters();
   const filters = useFilterParameters();
 
   return useQuery<WebsiteExpandedMetricsData>({
@@ -29,6 +29,8 @@ export function useWebsiteExpandedMetricsQuery(
         websiteId,
         startAt,
         endAt,
+        unit,
+        timezone,
         ...filters,
         ...params,
       },
@@ -37,6 +39,8 @@ export function useWebsiteExpandedMetricsQuery(
       get(`/websites/${websiteId}/metrics/expanded`, {
         startAt,
         endAt,
+        unit,
+        timezone,
         ...filters,
         ...params,
       }),

src/components/hooks/queries/useWebsiteMetricsQuery.ts

@@ -15,7 +15,7 @@ export function useWebsiteMetricsQuery(
   options?: ReactQueryOptions<WebsiteMetricsData>,
 ) {
   const { get, useQuery } = useApi();
-  const { startAt, endAt } = useDateParameters();
+  const { startAt, endAt, unit, timezone } = useDateParameters();
   const filters = useFilterParameters();
 
   return useQuery<WebsiteMetricsData>({
@@ -25,6 +25,8 @@ export function useWebsiteMetricsQuery(
         websiteId,
         startAt,
         endAt,
+        unit,
+        timezone,
         ...filters,
         ...params,
       },
@@ -33,6 +35,8 @@ export function useWebsiteMetricsQuery(
       get(`/websites/${websiteId}/metrics`, {
         startAt,
         endAt,
+        unit,
+        timezone,
         ...filters,
         ...params,
       }),

src/components/hooks/queries/useWebsiteStatsQuery.ts

@@ -1,5 +1,6 @@
 import type { UseQueryOptions } from '@tanstack/react-query';
 import { useDateParameters } from '@/components/hooks/useDateParameters';
+import { useDateRange } from '@/components/hooks/useDateRange';
 import { useApi } from '../useApi';
 import { useFilterParameters } from '../useFilterParameters';
 
@@ -19,16 +20,21 @@ export interface WebsiteStatsData {
 }
 
 export function useWebsiteStatsQuery(
-  { websiteId, compare }: { websiteId: string; compare?: string },
+  websiteId: string,
   options?: UseQueryOptions<WebsiteStatsData, Error, WebsiteStatsData>,
 ) {
   const { get, useQuery } = useApi();
-  const { startAt, endAt } = useDateParameters();
+  const { startAt, endAt, unit, timezone } = useDateParameters();
+  const { compare } = useDateRange();
   const filters = useFilterParameters();
 
   return useQuery<WebsiteStatsData>({
-    queryKey: ['websites:stats', { websiteId, compare, startAt, endAt, ...filters }],
+    queryKey: [
-    queryFn: () => get(`/websites/${websiteId}/stats`, { compare, startAt, endAt, ...filters }),
+      'websites:stats',
+      { websiteId, startAt, endAt, unit, timezone, compare, ...filters },
+    ],
+    queryFn: () =>
+      get(`/websites/${websiteId}/stats`, { startAt, endAt, unit, timezone, compare, ...filters }),
     enabled: !!websiteId,
     ...options,
   });

src/components/hooks/queries/useWeeklyTrafficQuery.ts

@@ -12,12 +12,13 @@ export function useWeeklyTrafficQuery(websiteId: string, params?: Record<string,
   return useQuery({
     queryKey: [
       'sessions',
-      { websiteId, modified, startAt, endAt, timezone, ...params, ...filters },
+      { websiteId, modified, startAt, endAt, unit, timezone, ...params, ...filters },
     ],
     queryFn: () => {
       return get(`/websites/${websiteId}/sessions/weekly`, {
         startAt,
         endAt,
+        unit,
         timezone,
         ...params,
         ...filters,

src/components/hooks/useDateRange.ts

@@ -7,13 +7,13 @@ import { getItem } from '@/lib/storage';
 
 export function useDateRange(options: { ignoreOffset?: boolean; timezone?: string } = {}) {
   const {
-    query: { date = '', unit = '', offset = 0, compare = 'prev' },
+    query: { date = '', offset = 0, compare = 'prev' },
   } = useNavigation();
   const { locale } = useLocale();
+
   const dateRange = useMemo(() => {
     const dateRangeObject = parseDateRange(
       date || getItem(DATE_RANGE_CONFIG) || DEFAULT_DATE_RANGE_VALUE,
-      unit,
       locale,
       options.timezone,
     );
@@ -21,13 +21,12 @@ export function useDateRange(options: { ignoreOffset?: boolean; timezone?: strin
     return !options.ignoreOffset && offset
       ? getOffsetDateRange(dateRangeObject, +offset)
       : dateRangeObject;
-  }, [date, unit, offset, options]);
+  }, [date, offset, options]);
 
   const dateCompare = getCompareDate(compare, dateRange.startDate, dateRange.endDate);
 
   return {
     date,
-    unit,
     offset,
     compare,
     isAllTime: date.endsWith(`:all`),

src/components/input/UnitFilter.tsx

@@ -1,71 +0,0 @@
-import { ListItem, Row, Select } from '@umami/react-zen';
-import { useMessages, useNavigation } from '@/components/hooks';
-import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE_VALUE } from '@/lib/constants';
-import { getItem } from '@/lib/storage';
-
-export function UnitFilter() {
-  const { formatMessage, labels } = useMessages();
-  const { router, query, updateParams } = useNavigation();
-
-  const DATE_RANGE_UNIT_CONFIG = {
-    '0week': {
-      defaultUnit: 'day',
-      availableUnits: ['day', 'hour'],
-    },
-    '7day': {
-      defaultUnit: 'day',
-      availableUnits: ['day', 'hour'],
-    },
-    '0month': {
-      defaultUnit: 'day',
-      availableUnits: ['day', 'hour'],
-    },
-    '30day': {
-      defaultUnit: 'day',
-      availableUnits: ['day', 'hour'],
-    },
-    '90day': {
-      defaultUnit: 'day',
-      availableUnits: ['day', 'month'],
-    },
-    '6month': {
-      defaultUnit: 'month',
-      availableUnits: ['month', 'day'],
-    },
-  };
-
-  const unitConfig =
-    DATE_RANGE_UNIT_CONFIG[query.date || getItem(DATE_RANGE_CONFIG) || DEFAULT_DATE_RANGE_VALUE];
-
-  if (!unitConfig) {
-    return null;
-  }
-
-  const handleChange = (value: string) => {
-    router.push(updateParams({ unit: value }));
-  };
-
-  const options = unitConfig.availableUnits.map(unit => ({
-    id: unit,
-    label: formatMessage(labels[unit]),
-  }));
-
-  const selectedUnit = query.unit ?? unitConfig.defaultUnit;
-
-  return (
-    <Row>
-      <Select
-        value={selectedUnit}
-        onChange={handleChange}
-        popoverProps={{ placement: 'bottom right' }}
-        style={{ width: 100 }}
-      >
-        {options.map(({ id, label }) => (
-          <ListItem key={id} id={id}>
-            {label}
-          </ListItem>
-        ))}
-      </Select>
-    </Row>
-  );
-}

src/components/input/WebsiteDateFilter.tsx

@@ -41,7 +41,7 @@ export function WebsiteDateFilter({
         }),
       );
     } else {
-      router.push(updateParams({ date, offset: undefined, unit: undefined }));
+      router.push(updateParams({ date, offset: undefined }));
     }
   };
 

src/components/messages.ts

@@ -245,10 +245,7 @@ export const labels = defineMessages({
   tag: { id: 'label.tag', defaultMessage: 'Tag' },
   segment: { id: 'label.segment', defaultMessage: 'Segment' },
   cohort: { id: 'label.cohort', defaultMessage: 'Cohort' },
-  minute: { id: 'label.minute', defaultMessage: 'Minute' },
-  hour: { id: 'label.hour', defaultMessage: 'Hour' },
   day: { id: 'label.day', defaultMessage: 'Day' },
-  month: { id: 'label.month', defaultMessage: 'Month' },
   date: { id: 'label.date', defaultMessage: 'Date' },
   pageOf: { id: 'label.page-of', defaultMessage: 'Page {current} of {total}' },
   create: { id: 'label.create', defaultMessage: 'Create' },

src/components/metrics/MetricCard.tsx

@@ -25,7 +25,7 @@ export const MetricCard = ({
   showChange = false,
 }: MetricCardProps) => {
   const diff = value - change;
-  const pct = diff !== 0 ? ((value - diff) / diff) * 100 : value !== 0 ? 100 : 0;
+  const pct = ((value - diff) / diff) * 100;
   const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
   const changeProps = useSpring({ x: Number(pct) || 0, from: { x: 0 } });
 

src/lib/date.ts

@@ -9,7 +9,6 @@ import {
   differenceInCalendarMonths,
   differenceInCalendarWeeks,
   differenceInCalendarYears,
-  differenceInDays,
   differenceInHours,
   differenceInMinutes,
   endOfDay,
@@ -137,12 +136,7 @@ export function parseDateValue(value: string) {
   return { num: +num, unit };
 }
 
-export function parseDateRange(
+export function parseDateRange(value: string, locale = 'en-US', timezone?: string): DateRange {
-  value: string,
-  unitValue?: string,
-  locale = 'en-US',
-  timezone?: string,
-): DateRange {
   if (typeof value !== 'string') {
     return null;
   }
@@ -152,7 +146,7 @@ export function parseDateRange(
 
     const startDate = new Date(+startTime);
     const endDate = new Date(+endTime);
-    const unit = getMinimumUnit(startDate, endDate, true);
+    const unit = getMinimumUnit(startDate, endDate);
 
     return {
       startDate,
@@ -175,14 +169,14 @@ export function parseDateRange(
         endDate: endOfHour(now),
         offset: 0,
         num: num || 1,
-        unit: unitValue || unit,
+        unit,
         value,
       };
     case 'day':
       return {
         startDate: num ? subDays(startOfDay(now), num) : startOfDay(now),
         endDate: endOfDay(now),
-        unit: unitValue ? unitValue : num ? 'day' : 'hour',
+        unit: num ? 'day' : 'hour',
         offset: 0,
         num: num || 1,
         value,
@@ -193,7 +187,7 @@ export function parseDateRange(
           ? subWeeks(startOfWeek(now, { locale: dateLocale }), num)
           : startOfWeek(now, { locale: dateLocale }),
         endDate: endOfWeek(now, { locale: dateLocale }),
-        unit: unitValue || 'day',
+        unit: 'day',
         offset: 0,
         num: num || 1,
         value,
@@ -202,7 +196,7 @@ export function parseDateRange(
       return {
         startDate: num ? subMonths(startOfMonth(now), num) : startOfMonth(now),
         endDate: endOfMonth(now),
-        unit: unitValue ? unitValue : num ? 'month' : 'day',
+        unit: num ? 'month' : 'day',
         offset: 0,
         num: num || 1,
         value,
@@ -211,7 +205,7 @@ export function parseDateRange(
       return {
         startDate: num ? subYears(startOfYear(now), num) : startOfYear(now),
         endDate: endOfYear(now),
-        unit: unitValue || 'month',
+        unit: 'month',
         offset: 0,
         num: num || 1,
         value,
@@ -279,20 +273,12 @@ export function getAllowedUnits(startDate: Date, endDate: Date) {
   return index >= 0 ? units.splice(index) : [];
 }
 
-export function getMinimumUnit(
+export function getMinimumUnit(startDate: number | Date, endDate: number | Date) {
-  startDate: number | Date,
-  endDate: number | Date,
-  isDateRange: boolean = false,
-) {
   if (differenceInMinutes(endDate, startDate) <= 60) {
     return 'minute';
-  } else if (
+  } else if (differenceInHours(endDate, startDate) <= 48) {
-    isDateRange
-      ? differenceInHours(endDate, startDate) <= 48
-      : differenceInDays(endDate, startDate) <= 30
-  ) {
     return 'hour';
-  } else if (differenceInCalendarMonths(endDate, startDate) <= 7) {
+  } else if (differenceInCalendarMonths(endDate, startDate) <= 6) {
     return 'day';
   } else if (differenceInCalendarMonths(endDate, startDate) <= 24) {
     return 'month';