Updates to Revenue report.

src/app/(main)/console/TestConsole.module.css

@@ -1,33 +0,0 @@
-.container {
-  display: grid;
-  gap: 30px;
-  padding-bottom: 40px;
-}
-
-.actions {
-  border: 1px solid var(--base400);
-  border-radius: 5px;
-  padding: 0 20px 20px 20px;
-  display: grid;
-  gap: 40px;
-  grid-template-columns: repeat(3, minmax(300px, 1fr));
-  box-shadow: 0 0 0 10px var(--base100);
-}
-
-.header {
-  font-size: 16px;
-  font-weight: 700;
-  margin: 20px 0;
-}
-
-.group {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.wrapped {
-  border: 1px solid var(--blue900);
-  border-radius: 4px;
-  padding: 8px 16px;
-}

src/app/(main)/console/TestConsole.tsx

@@ -1,219 +0,0 @@
-'use client';
-import { Button } from '@umami/react-zen';
-import Link from 'next/link';
-import Script from 'next/script';
-import { WebsiteSelect } from '@/components/input/WebsiteSelect';
-import { PageBody } from '@/components/common/PageBody';
-import { SectionHeader } from '@/components/common/SectionHeader';
-import { EventsChart } from '@/components/metrics/EventsChart';
-import { WebsiteChart } from '../websites/[websiteId]/WebsiteChart';
-import { useApi, useNavigation } from '@/components/hooks';
-import styles from './TestConsole.module.css';
-
-export function TestConsole({ websiteId }: { websiteId: string }) {
-  const { get, useQuery } = useApi();
-  const { data, isLoading, error } = useQuery({
-    queryKey: ['websites:me'],
-    queryFn: () => get('/me/websites'),
-  });
-  const { router } = useNavigation();
-
-  function handleChange(value: string) {
-    router.push(`/console/${value}`);
-  }
-
-  function handleRunScript() {
-    window['umami'].track(props => ({
-      ...props,
-      url: '/page-view',
-      referrer: 'https://www.google.com',
-    }));
-    window['umami'].track('track-event-no-data');
-    window['umami'].track('track-event-with-data', {
-      test: 'test-data',
-      boolean: true,
-      booleanError: 'true',
-      time: new Date(),
-      user: `user${Math.round(Math.random() * 10)}`,
-      number: 1,
-      number2: Math.random() * 100,
-      time2: new Date().toISOString(),
-      nested: {
-        test: 'test-data',
-        number: 1,
-        object: {
-          test: 'test-data',
-        },
-      },
-      array: [1, 2, 3],
-    });
-  }
-
-  function handleRunRevenue() {
-    window['umami'].track(props => ({
-      ...props,
-      url: '/checkout-cart',
-      referrer: 'https://www.google.com',
-    }));
-    window['umami'].track('checkout-cart', {
-      revenue: parseFloat((Math.random() * 1000).toFixed(2)),
-      currency: 'USD',
-    });
-    window['umami'].track('affiliate-link', {
-      revenue: parseFloat((Math.random() * 1000).toFixed(2)),
-      currency: 'USD',
-    });
-    window['umami'].track('promotion-link', {
-      revenue: parseFloat((Math.random() * 1000).toFixed(2)),
-      currency: 'USD',
-    });
-    window['umami'].track('checkout-cart', {
-      revenue: parseFloat((Math.random() * 1000).toFixed(2)),
-      currency: 'EUR',
-    });
-    window['umami'].track('promotion-link', {
-      revenue: parseFloat((Math.random() * 1000).toFixed(2)),
-      currency: 'EUR',
-    });
-    window['umami'].track('affiliate-link', {
-      item1: {
-        productIdentity: 'ABC424',
-        revenue: parseFloat((Math.random() * 10000).toFixed(2)),
-        currency: 'JPY',
-      },
-      item2: {
-        productIdentity: 'ZYW684',
-        revenue: parseFloat((Math.random() * 10000).toFixed(2)),
-        currency: 'JPY',
-      },
-    });
-  }
-
-  function handleRunIdentify() {
-    window['umami'].identify({
-      userId: 123,
-      name: 'brian',
-      number: Math.random() * 100,
-      test: 'test-data',
-      boolean: true,
-      booleanError: 'true',
-      time: new Date(),
-      time2: new Date().toISOString(),
-      nested: {
-        test: 'test-data',
-        number: 1,
-        object: {
-          test: 'test-data',
-        },
-      },
-      array: [1, 2, 3],
-    });
-  }
-
-  if (!data) {
-    return null;
-  }
-
-  const website = data?.data.find(({ id }) => websiteId === id);
-
-  return (
-    <PageBody isLoading={isLoading} error={error}>
-      <SectionHeader title="Test console">
-        <WebsiteSelect websiteId={website?.id} onSelect={handleChange} />
-      </SectionHeader>
-      {website && (
-        <div className={styles.container}>
-          <Script
-            async
-            data-website-id={websiteId}
-            src={`${process.env.basePath || ''}/script.js`}
-            data-cache="true"
-          />
-          <div className={styles.actions}>
-            <div className={styles.group}>
-              <div className={styles.header}>Page links</div>
-              <div>
-                <Link href={`/console/${websiteId}/page/1/?q=abc`}>page one</Link>
-              </div>
-              <div>
-                <Link href={`/console/${websiteId}/page/2/?q=123 `}>page two</Link>
-              </div>
-              <div>
-                <a href="https://www.google.com" data-umami-event="external-link-direct">
-                  external link (direct)
-                </a>
-              </div>
-              <div>
-                <a
-                  href="https://www.google.com"
-                  data-umami-event="external-link-tab"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  external link (tab)
-                </a>
-              </div>
-            </div>
-            <div className={styles.group}>
-              <div className={styles.header}>Click events</div>
-              <Button id="send-event-button" data-umami-event="button-click" variant="primary">
-                Send event
-              </Button>
-              <Button
-                id="send-event-data-button"
-                data-umami-event="button-click"
-                data-umami-event-name="bob"
-                data-umami-event-id="123"
-                variant="primary"
-              >
-                Send event with data
-              </Button>
-              <Button
-                id="generate-revenue-button"
-                data-umami-event="checkout-cart"
-                data-umami-event-revenue={(Math.random() * 10000).toFixed(2).toString()}
-                data-umami-event-currency="USD"
-                variant="primary"
-              >
-                Generate revenue data
-              </Button>
-              <Button
-                id="button-with-div-button"
-                data-umami-event="button-click"
-                data-umami-event-name={'bob'}
-                data-umami-event-id="123"
-                variant="primary"
-              >
-                <div className={styles.wrapped}>Button with div</div>
-              </Button>
-              <div data-umami-event="div-click" className={styles.wrapped}>
-                DIV with attribute
-              </div>
-              <div data-umami-event="div-click-one" className={styles.wrapped}>
-                <div data-umami-event="div-click-two" className={styles.wrapped}>
-                  <div data-umami-event="div-click-three" className={styles.wrapped}>
-                    Nested DIV
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className={styles.group}>
-              <div className={styles.header}>Javascript events</div>
-              <Button id="manual-button" variant="primary" onClick={handleRunScript}>
-                Run script
-              </Button>
-              <Button id="manual-button" variant="primary" onClick={handleRunIdentify}>
-                Run identify
-              </Button>
-              <Button id="manual-button" variant="primary" onClick={handleRunRevenue}>
-                Revenue script
-              </Button>
-            </div>
-          </div>
-          <WebsiteChart websiteId={website.id} />
-          <EventsChart websiteId={website.id} />
-        </div>
-      )}
-    </PageBody>
-  );
-}

src/app/(main)/console/[websiteId]/TestConsolePage.tsx

@@ -0,0 +1,202 @@
+'use client';
+import { Button, Grid, Column, Heading } from '@umami/react-zen';
+import Link from 'next/link';
+import Script from 'next/script';
+import { PageBody } from '@/components/common/PageBody';
+import { EventsChart } from '@/components/metrics/EventsChart';
+import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
+import { useWebsiteQuery } from '@/components/hooks';
+import { PageHeader } from '@/components/common/PageHeader';
+
+export function TestConsolePage({ websiteId }: { websiteId: string }) {
+  const { data } = useWebsiteQuery(websiteId);
+
+  function handleRunScript() {
+    window['umami'].track(props => ({
+      ...props,
+      url: '/page-view',
+      referrer: 'https://www.google.com',
+    }));
+    window['umami'].track('track-event-no-data');
+    window['umami'].track('track-event-with-data', {
+      test: 'test-data',
+      boolean: true,
+      booleanError: 'true',
+      time: new Date(),
+      user: `user${Math.round(Math.random() * 10)}`,
+      number: 1,
+      number2: Math.random() * 100,
+      time2: new Date().toISOString(),
+      nested: {
+        test: 'test-data',
+        number: 1,
+        object: {
+          test: 'test-data',
+        },
+      },
+      array: [1, 2, 3],
+    });
+  }
+
+  function handleRunRevenue() {
+    window['umami'].track(props => ({
+      ...props,
+      url: '/checkout-cart',
+      referrer: 'https://www.google.com',
+    }));
+    window['umami'].track('checkout-cart', {
+      revenue: parseFloat((Math.random() * 1000).toFixed(2)),
+      currency: 'USD',
+    });
+    window['umami'].track('affiliate-link', {
+      revenue: parseFloat((Math.random() * 1000).toFixed(2)),
+      currency: 'USD',
+    });
+    window['umami'].track('promotion-link', {
+      revenue: parseFloat((Math.random() * 1000).toFixed(2)),
+      currency: 'USD',
+    });
+    window['umami'].track('checkout-cart', {
+      revenue: parseFloat((Math.random() * 1000).toFixed(2)),
+      currency: 'EUR',
+    });
+    window['umami'].track('promotion-link', {
+      revenue: parseFloat((Math.random() * 1000).toFixed(2)),
+      currency: 'EUR',
+    });
+    window['umami'].track('affiliate-link', {
+      item1: {
+        productIdentity: 'ABC424',
+        revenue: parseFloat((Math.random() * 10000).toFixed(2)),
+        currency: 'JPY',
+      },
+      item2: {
+        productIdentity: 'ZYW684',
+        revenue: parseFloat((Math.random() * 10000).toFixed(2)),
+        currency: 'JPY',
+      },
+    });
+  }
+
+  function handleRunIdentify() {
+    window['umami'].identify({
+      userId: 123,
+      name: 'brian',
+      number: Math.random() * 100,
+      test: 'test-data',
+      boolean: true,
+      booleanError: 'true',
+      time: new Date(),
+      time2: new Date().toISOString(),
+      nested: {
+        test: 'test-data',
+        number: 1,
+        object: {
+          test: 'test-data',
+        },
+      },
+      array: [1, 2, 3],
+    });
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <PageBody>
+      <PageHeader title="Test console">
+        <Column>{data.name}</Column>
+      </PageHeader>
+      <Column gap="6" paddingY="6">
+        <Script
+          async
+          data-website-id={websiteId}
+          src={`${process.env.basePath || ''}/script.js`}
+          data-cache="true"
+        />
+        <Grid columns="1fr 1fr 1fr" gap>
+          <Column gap>
+            <Heading>Page links</Heading>
+            <div>
+              <Link href={`/console/${websiteId}?page=1`}>page one</Link>
+            </div>
+            <div>
+              <Link href={`/console/${websiteId}?page=2 `}>page two</Link>
+            </div>
+            <div>
+              <a href="https://www.google.com" data-umami-event="external-link-direct">
+                external link (direct)
+              </a>
+            </div>
+            <div>
+              <a
+                href="https://www.google.com"
+                data-umami-event="external-link-tab"
+                target="_blank"
+                rel="noreferrer"
+              >
+                external link (tab)
+              </a>
+            </div>
+          </Column>
+          <Column gap>
+            <Heading>Click events</Heading>
+            <Button id="send-event-button" data-umami-event="button-click" variant="primary">
+              Send event
+            </Button>
+            <Button
+              id="send-event-data-button"
+              data-umami-event="button-click"
+              data-umami-event-name="bob"
+              data-umami-event-id="123"
+              variant="primary"
+            >
+              Send event with data
+            </Button>
+            <Button
+              id="generate-revenue-button"
+              data-umami-event="checkout-cart"
+              data-umami-event-revenue={(Math.random() * 10000).toFixed(2).toString()}
+              data-umami-event-currency="USD"
+              variant="primary"
+            >
+              Generate revenue data
+            </Button>
+            <Button
+              id="button-with-div-button"
+              data-umami-event="button-click"
+              data-umami-event-name={'bob'}
+              data-umami-event-id="123"
+              variant="primary"
+            >
+              <div>Button with div</div>
+            </Button>
+            <div data-umami-event="div-click">DIV with attribute</div>
+            <div data-umami-event="div-click-one">
+              <div data-umami-event="div-click-two">
+                <div data-umami-event="div-click-three">Nested DIV</div>
+              </div>
+            </div>
+          </Column>
+          <Column gap>
+            <Heading>Javascript events</Heading>
+            <Button id="manual-button" variant="primary" onClick={handleRunScript}>
+              Run script
+            </Button>
+            <Button id="manual-button" variant="primary" onClick={handleRunIdentify}>
+              Run identify
+            </Button>
+            <Button id="manual-button" variant="primary" onClick={handleRunRevenue}>
+              Revenue script
+            </Button>
+          </Column>
+        </Grid>
+        <Heading>Pageviews</Heading>
+        <WebsiteChart websiteId={websiteId} />
+        <Heading>Events</Heading>
+        <EventsChart websiteId={websiteId} />
+      </Column>
+    </PageBody>
+  );
+}

src/app/(main)/console/[websiteId]/page.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from 'next';
-import { TestConsole } from '../TestConsole';
+import { TestConsolePage } from './TestConsolePage';
 
 async function getEnabled() {
   return !!process.env.ENABLE_TEST_CONSOLE;
@@ -14,7 +14,7 @@ export default async function ({ params }: { params: Promise<{ websiteId: string
     return null;
   }
 
-  return <TestConsole websiteId={websiteId?.[0]} />;
+  return <TestConsolePage websiteId={websiteId} />;
 }
 
 export const metadata: Metadata = {

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

@@ -13,7 +13,7 @@ export function RealtimeCountries({ data }) {
   const renderCountryName = useCallback(
     ({ x: code }) => (
       <span className={classNames(styles.row)}>
-        <TypeIcon type="country" value={code?.toLowerCase()} />
+        <TypeIcon type="country" value={code} />
         {countryNames[code]}
       </span>
     ),

src/app/(main)/websites/[websiteId]/reports/retention/Retention.tsx

@@ -67,7 +67,9 @@ export function Retention({ websiteId, days = DAYS, startDate, endDate }: Retent
             autoFlow="column"
           >
             <Column>
-              <Text weight="bold">{formatMessage(labels.cohort)}</Text>
+              <Text weight="bold" align="center">
+                {formatMessage(labels.cohort)}
+              </Text>
             </Column>
             {days.map(n => (
               <Column key={n}>

src/app/(main)/websites/[websiteId]/reports/revenue/Revenue.tsx

@@ -1,22 +1,22 @@
 import { useState } from 'react';
-import { Grid, Select, ListItem } from '@umami/react-zen';
+import { Grid, Row, Text } from '@umami/react-zen';
 import classNames from 'classnames';
 import { colord } from 'colord';
 import { BarChart } from '@/components/charts/BarChart';
-import { PieChart } from '@/components/charts/PieChart';
 import { TypeIcon } from '@/components/common/TypeIcon';
 import { useCountryNames, useLocale, useMessages, useResultQuery } from '@/components/hooks';
 import { ListTable } from '@/components/metrics/ListTable';
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { renderDateLabels } from '@/lib/charts';
-import { CHART_COLORS, CURRENCIES } from '@/lib/constants';
+import { CHART_COLORS } from '@/lib/constants';
 import { formatLongCurrency, formatLongNumber } from '@/lib/format';
 import { useCallback, useMemo } from 'react';
 import { Panel } from '@/components/common/Panel';
 import { Column } from '@umami/react-zen';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { parseDateRange } from '@/lib/date';
+import { getMinimumUnit } from '@/lib/date';
+import { CurrencySelect } from '@/components/input/CurrencySelect';
 
 export interface RevenueProps {
   websiteId: string;
@@ -26,11 +26,10 @@ export interface RevenueProps {
 
 export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
   const [currency, setCurrency] = useState('USD');
-  const [search, setSearch] = useState('');
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
   const { countryNames } = useCountryNames(locale);
-  const { unit } = parseDateRange({ startDate, endDate }, locale);
+  const unit = getMinimumUnit(startDate, endDate);
   const { data, error, isLoading } = useResultQuery<any>('revenue', {
     websiteId,
     dateRange: {
@@ -45,10 +44,10 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
 
   const renderCountryName = useCallback(
     ({ x: code }) => (
-      <span className={classNames(locale)}>
-        <TypeIcon type="country" value={code?.toLowerCase()} />
-        {countryNames[code]}
-      </span>
+      <Row className={classNames(locale)} gap>
+        <TypeIcon type="country" value={code} />
+        <Text>{countryNames[code] || formatMessage(labels.unknown)}</Text>
+      </Row>
     ),
     [countryNames, locale],
   );
@@ -79,24 +78,9 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
         };
       }),
     };
-  }, [data]);
+  }, [data, startDate, endDate, unit]);
 
-  const countryData = useMemo(() => {
-    if (!data) return [];
-
-    const labels = data.country.map(({ name }) => name);
-    const datasets = [
-      {
-        data: data.country.map(({ value }) => value),
-        backgroundColor: CHART_COLORS,
-        borderWidth: 0,
-      },
-    ];
-
-    return { labels, datasets };
-  }, [data]);
-
-  const metricData = useMemo(() => {
+  const metrics = useMemo(() => {
     if (!data) return [];
 
     const { sum, count, unique_count } = data.total;
@@ -128,69 +112,41 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
   return (
     <Column gap>
       <Grid columns="280px" gap>
-        <Select
-          items={CURRENCIES}
-          label={formatMessage(labels.currency)}
-          value={currency}
-          defaultValue={currency}
-          onChange={setCurrency}
-          listProps={{ style: { maxHeight: '300px' } }}
-          onSearch={setSearch}
-          allowSearch
-        >
-          {CURRENCIES.map(({ id, name }) => {
-            if (search && !`${id}${name}`.toLowerCase().includes(search)) {
-              return null;
-            }
-
-            return (
-              <ListItem key={id} id={id}>
-                {id} &mdash; {name}
-              </ListItem>
-            );
-          }).filter(n => n)}
-        </Select>
+        <CurrencySelect value={currency} onChange={setCurrency} />
       </Grid>
-
       <LoadingPanel isEmpty={isEmpty} isLoading={isLoading} error={error}>
         <Column gap>
-          <MetricsBar isFetched={!!data}>
-            {metricData?.map(({ label, value, formatValue }) => {
+          <MetricsBar isFetched={!!data} isLoading={isLoading}>
+            {metrics?.map(({ label, value, formatValue }) => {
               return (
                 <MetricCard key={label} value={value} label={label} formatValue={formatValue} />
               );
             })}
           </MetricsBar>
-          {data && (
-            <>
-              <Panel>
-                <BarChart
-                  minDate={startDate}
-                  maxDate={endDate}
-                  data={chartData}
-                  unit={unit}
-                  stacked={true}
-                  currency={currency}
-                  renderXLabel={renderDateLabels(unit, locale)}
-                  isLoading={isLoading}
-                />
-              </Panel>
-              <Panel>
-                <Grid columns="1fr 1fr">
-                  <ListTable
-                    metric={formatMessage(labels.country)}
-                    data={data?.country.map(({ name, value }) => ({
-                      x: name,
-                      y: Number(value),
-                      z: (value / data?.total.sum) * 100,
-                    }))}
-                    renderLabel={renderCountryName}
-                  />
-                  <PieChart type="doughnut" data={countryData} />
-                </Grid>
-              </Panel>
-            </>
-          )}
+          <Panel>
+            <BarChart
+              data={chartData}
+              minDate={startDate}
+              maxDate={endDate}
+              unit={unit}
+              stacked={true}
+              currency={currency}
+              isLoading={isLoading}
+              renderXLabel={renderDateLabels(unit, locale)}
+            />
+          </Panel>
+          <Panel>
+            <ListTable
+              title={formatMessage(labels.country)}
+              data={data?.country.map(({ name, value }: { name: string; value: number }) => ({
+                x: name,
+                y: value,
+                z: (value / data?.total.sum) * 100,
+              }))}
+              currency={currency}
+              renderLabel={renderCountryName}
+            />
+          </Panel>
         </Column>
       </LoadingPanel>
     </Column>

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

@@ -1,9 +1,8 @@
+import { Row, Grid, Text } from '@umami/react-zen';
 import { format, startOfDay, addHours } from 'date-fns';
 import { useLocale, useMessages, useWebsiteSessionsWeeklyQuery } from '@/components/hooks';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { getDayOfWeekAsDate } from '@/lib/date';
-import styles from './SessionsWeekly.module.css';
-import classNames from 'classnames';
 import { Focusable, Tooltip, TooltipTrigger } from '@umami/react-zen';
 
 export function SessionsWeekly({ websiteId }: { websiteId: string }) {
@@ -38,9 +37,9 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
 
   return (
     <LoadingPanel {...(props as any)} data={data}>
-      <div key={data} className={styles.week}>
-        <div className={styles.day}>
-          <div className={styles.header}>&nbsp;</div>
+      <Grid columns="repeat(8, 1fr)" gap>
+        <Grid rows="repeat(25, 20px)" gap="1">
+          <Row>&nbsp;</Row>
           {Array(24)
             .fill(null)
             .map((_, i) => {
@@ -48,46 +47,55 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
                 .replace(/\D00 ?/, '')
                 .toLowerCase();
               return (
-                <div key={i} className={styles.hour}>
-                  {label}
-                </div>
+                <Row key={i} justifyContent="flex-end">
+                  <Text color="muted" weight="bold">
+                    {label}
+                  </Text>
+                </Row>
               );
             })}
-        </div>
+        </Grid>
         {data &&
           daysOfWeek.map((index: number) => {
             const day = data[index];
             return (
-              <div key={index} className={styles.day}>
-                <div className={styles.header}>
-                  {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
-                </div>
-                {day?.map((hour: number, j) => {
-                  const pct = hour / max;
+              <Grid
+                rows="repeat(25, 20px)"
+                justifyContent="center"
+                alignItems="center"
+                key={index}
+                gap="1"
+              >
+                <Row>
+                  <Text weight="bold" align="center">
+                    {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
+                  </Text>
+                </Row>
+                {day?.map((count: number, j) => {
+                  const pct = count / max;
                   return (
-                    <div key={j} className={classNames(styles.cell)}>
-                      {hour > 0 && (
-                        <TooltipTrigger delay={0}>
-                          <Focusable>
-                            <div>
-                              <div
-                                className={styles.block}
-                                style={{ opacity: pct, transform: `scale(${pct})` }}
-                              />
-                            </div>
-                          </Focusable>
-                          <Tooltip placement="right">{`${formatMessage(
-                            labels.visitors,
-                          )}: ${hour}`}</Tooltip>
-                        </TooltipTrigger>
-                      )}
-                    </div>
+                    <TooltipTrigger key={j} delay={0} isDisabled={count <= 0}>
+                      <Focusable>
+                        <Row backgroundColor="2" width="20px" height="20px" borderRadius="full">
+                          <Row
+                            backgroundColor="primary"
+                            width="20px"
+                            height="20px"
+                            borderRadius="full"
+                            style={{ opacity: pct, transform: `scale(${pct})` }}
+                          />
+                        </Row>
+                      </Focusable>
+                      <Tooltip placement="right">{`${formatMessage(
+                        labels.visitors,
+                      )}: ${count}`}</Tooltip>
+                    </TooltipTrigger>
                   );
                 })}
-              </div>
+              </Grid>
             );
           })}
-      </div>
+      </Grid>
     </LoadingPanel>
   );
 }

src/app/api/reports/revenue/route.ts

@@ -13,8 +13,8 @@ export async function POST(request: Request) {
 
   const {
     websiteId,
-    currency,
     dateRange: { startDate, endDate, unit },
+    parameters: { currency },
   } = body;
 
   if (!(await canViewWebsite(auth, websiteId))) {