Custom date range select.

src/components/metrics/DatePickerForm.module.css

@@ -1,44 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  max-width: 100vw;
-}
-
-.calendars {
-  display: flex;
-  justify-content: center;
-}
-
-.calendars > div + div {
-  margin-inline-start: 20px;
-  padding-inline-start: 20px;
-  border-inline-start: 1px solid var(--base300);
-}
-
-.filter {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  margin-top: 20px;
-}
-
-@media only screen and (max-width: 768px) {
-  .calendars {
-    flex-direction: column;
-  }
-
-  .calendars > div + div {
-    padding: 0;
-    margin-inline-start: 0;
-    margin-top: 20px;
-    border: 0;
-  }
-}

src/components/metrics/DatePickerForm.tsx

@@ -1,10 +1,8 @@
 import { useState } from 'react';
-import { Button, Row, Calendar } from '@umami/react-zen';
+import { Button, Row, Column, Calendar, ToggleGroup, ToggleGroupItem } from '@umami/react-zen';
 import { isAfter, isBefore, isSameDay, startOfDay, endOfDay } from 'date-fns';
 import { FILTER_DAY, FILTER_RANGE } from '@/lib/constants';
 import { useMessages } from '@/components/hooks';
-import { parseDate } from '@internationalized/date';
-import styles from './DatePickerForm.module.css';
 
 export function DatePickerForm({
   startDate: defaultStartDate,
@@ -14,61 +12,61 @@ export function DatePickerForm({
   onChange,
   onClose,
 }) {
-  const [selected, setSelected] = useState(
+  const [selected, setSelected] = useState<any>([
     isSameDay(defaultStartDate, defaultEndDate) ? FILTER_DAY : FILTER_RANGE,
-  );
-  const [singleDate, setSingleDate] = useState(defaultStartDate || new Date());
+  ]);
+  const [date, setDate] = useState(defaultStartDate || new Date());
   const [startDate, setStartDate] = useState(defaultStartDate || new Date());
-  const [endDate] = useState(defaultEndDate || new Date());
+  const [endDate, setEndDate] = useState(defaultEndDate || new Date());
   const { formatMessage, labels } = useMessages();
 
-  const disabled =
-    selected === FILTER_DAY
-      ? isAfter(minDate, singleDate) && isBefore(maxDate, singleDate)
-      : isAfter(startDate, endDate);
+  const disabled = selected.includes(FILTER_DAY)
+    ? isAfter(minDate, date) && isBefore(maxDate, date)
+    : isAfter(startDate, endDate);
 
   const handleSave = () => {
-    if (selected === FILTER_DAY) {
-      onChange(`range:${startOfDay(singleDate).getTime()}:${endOfDay(singleDate).getTime()}`);
+    if (selected.includes(FILTER_DAY)) {
+      onChange(`range:${startOfDay(date).getTime()}:${endOfDay(date).getTime()}`);
     } else {
       onChange(`range:${startOfDay(startDate).getTime()}:${endOfDay(endDate).getTime()}`);
     }
   };
 
   return (
-    <div className={styles.container}>
-      <div className={styles.filter}>
-        <Row>
-          <Button key={FILTER_DAY} onPress={key => setSelected(key as any)}>
-            {formatMessage(labels.singleDay)}
-          </Button>
-          <Button key={FILTER_RANGE} onPress={key => setSelected(key as any)}>
-            {formatMessage(labels.dateRange)}
-          </Button>
-        </Row>
-      </div>
-      <div className={styles.calendars}>
-        {selected === FILTER_DAY && (
-          <Calendar
-            value={parseDate(singleDate.toISOString().split('T')[0])}
-            onChange={d => setSingleDate(d.toDate('America/Los_Angeles'))}
-          />
+    <Column gap>
+      <Row justifyContent="center">
+        <ToggleGroup disallowEmptySelection value={selected} onChange={setSelected}>
+          <ToggleGroupItem id={FILTER_DAY}>{formatMessage(labels.singleDay)}</ToggleGroupItem>
+          <ToggleGroupItem id={FILTER_RANGE}>{formatMessage(labels.dateRange)}</ToggleGroupItem>
+        </ToggleGroup>
+      </Row>
+      <Column>
+        {selected.includes(FILTER_DAY) && (
+          <Calendar value={date} minValue={minDate} maxValue={maxDate} onChange={setDate} />
         )}
-        {selected === FILTER_RANGE && (
-          <>
+        {selected.includes(FILTER_RANGE) && (
+          <Row gap>
             <Calendar
-              value={parseDate(startDate.toISOString().split('T')[0])}
-              onChange={d => setStartDate(d.toDate('America/Los_Angeles'))}
+              value={startDate}
+              minValue={minDate}
+              maxValue={endDate}
+              onChange={setStartDate}
             />
-          </>
+            <Calendar
+              value={endDate}
+              minValue={startDate}
+              maxValue={maxDate}
+              onChange={setEndDate}
+            />
+          </Row>
         )}
-      </div>
-      <div className={styles.buttons}>
+      </Column>
+      <Row justifyContent="end" gap>
+        <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
         <Button variant="primary" onPress={handleSave} isDisabled={disabled}>
           {formatMessage(labels.save)}
         </Button>
-        <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
-      </div>
-    </div>
+      </Row>
+    </Column>
   );
 }

src/components/metrics/PagesTable.tsx

@@ -19,26 +19,26 @@ export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
   const { formatMessage, labels } = useMessages();
   const { domain } = useContext(WebsiteContext);
 
-  const handleSelect = (key: any) => {
-    router.push(renderUrl({ view: key }));
+  const handleChange = (id: any) => {
+    router.push(renderUrl({ view: id }));
   };
 
   const buttons = [
     {
+      id: 'url',
       label: formatMessage(labels.path),
-      key: 'url',
     },
     {
+      id: 'entry',
       label: formatMessage(labels.entry),
-      key: 'entry',
     },
     {
+      id: 'exit',
       label: formatMessage(labels.exit),
-      key: 'exit',
     },
     {
+      id: 'title',
       label: formatMessage(labels.title),
-      key: 'title',
     },
   ];
 
@@ -66,7 +66,7 @@ export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
       dataFilter={emptyFilter}
       renderLabel={renderLink}
     >
-      {allowFilter && <FilterButtons items={buttons} selectedKey={view} onSelect={handleSelect} />}
+      {allowFilter && <FilterButtons items={buttons} value={view} onChange={handleChange} />}
     </MetricsTable>
   );
 }

src/components/metrics/QueryParametersTable.tsx

@@ -20,10 +20,10 @@ export function QueryParametersTable({
 
   const buttons = [
     {
+      id: FILTER_COMBINED,
       label: formatMessage(labels.filterCombined),
-      key: FILTER_COMBINED,
     },
-    { label: formatMessage(labels.filterRaw), key: FILTER_RAW },
+    { id: FILTER_RAW, label: formatMessage(labels.filterRaw) },
   ];
 
   return (
@@ -45,7 +45,7 @@ export function QueryParametersTable({
       }
       delay={0}
     >
-      {allowFilter && <FilterButtons items={buttons} selectedKey={filter} onSelect={setFilter} />}
+      {allowFilter && <FilterButtons items={buttons} value={filter} onChange={setFilter} />}
     </MetricsTable>
   );
 }

src/components/metrics/ReferrersTable.tsx

@@ -1,11 +1,11 @@
+import { Row } from '@umami/react-zen';
 import { FilterLink } from '@/components/common/FilterLink';
 import { Favicon } from '@/components/common/Favicon';
+import { FilterButtons } from '@/components/common/FilterButtons';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { MetricsTable, MetricsTableProps } from './MetricsTable';
-import { FilterButtons } from '@/components/common/FilterButtons';
 import thenby from 'thenby';
 import { GROUPED_DOMAINS } from '@/lib/constants';
-import { Flexbox } from '@umami/react-zen';
 
 export interface ReferrersTableProps extends MetricsTableProps {
   allowFilter?: boolean;
@@ -25,12 +25,12 @@ export function ReferrersTable({ allowFilter, ...props }: ReferrersTableProps) {
 
   const buttons = [
     {
+      id: 'referrer',
       label: formatMessage(labels.domain),
-      key: 'referrer',
     },
     {
+      id: 'grouped',
       label: formatMessage(labels.grouped),
-      key: 'grouped',
     },
   ];
 
@@ -40,10 +40,10 @@ export function ReferrersTable({ allowFilter, ...props }: ReferrersTableProps) {
         return `(${formatMessage(labels.other)})`;
       } else {
         return (
-          <Flexbox alignItems="center" gap="3">
+          <Row alignItems="center" gap="3">
             <Favicon domain={referrer} />
             {GROUPED_DOMAINS.find(({ domain }) => domain === referrer)?.name}
-          </Flexbox>
+          </Row>
         );
       }
     }
@@ -86,19 +86,15 @@ export function ReferrersTable({ allowFilter, ...props }: ReferrersTableProps) {
   };
 
   return (
-    <>
-      <MetricsTable
-        {...props}
-        title={formatMessage(labels.referrers)}
-        type="referrer"
-        metric={formatMessage(labels.visitors)}
-        dataFilter={view === 'grouped' ? groupedFilter : undefined}
-        renderLabel={renderLink}
-      >
-        {allowFilter && (
-          <FilterButtons items={buttons} selectedKey={view} onSelect={handleSelect} />
-        )}
-      </MetricsTable>
-    </>
+    <MetricsTable
+      {...props}
+      title={formatMessage(labels.referrers)}
+      type="referrer"
+      metric={formatMessage(labels.visitors)}
+      dataFilter={view === 'grouped' ? groupedFilter : undefined}
+      renderLabel={renderLink}
+    >
+      {allowFilter && <FilterButtons items={buttons} value={view} onChange={handleSelect} />}
+    </MetricsTable>
   );
 }