Updates to Revenue report.

src/components/common/Panel.tsx

@@ -50,6 +50,7 @@ export function Panel({
       borderRadius="3"
       backgroundColor
       position="relative"
+      overflowX="hidden"
       gap
       {...props}
       style={{ ...style, ...(isFullscreen ? fullscreenStyles : {}) }}

src/components/common/TypeIcon.tsx

@@ -14,7 +14,7 @@ export function TypeIcon({
     <Row gap="3" alignItems="center">
       <img
         src={`${process.env.basePath || ''}/images/${type}/${
-          value?.replaceAll(' ', '-').toLowerCase() || 'xx'
+          value?.replaceAll(' ', '-').toLowerCase() || 'unknown'
         }.png`}
         onError={e => {
           e.currentTarget.src = `${process.env.basePath || ''}/images/${type}/unknown.png`;

src/components/hooks/useFormat.ts

@@ -24,7 +24,7 @@ export function useFormat() {
   };
 
   const formatCountry = (value: string): string => {
-    return countryNames[value] || value;
+    return countryNames[value] || value || labels.unknown;
   };
 
   const formatRegion = (value?: string): string => {

src/components/input/CurrencySelect.tsx

@@ -0,0 +1,34 @@
+import { CURRENCIES } from '@/lib/constants';
+import { ListItem, Select } from '@umami/react-zen';
+import { useState } from 'react';
+import { useMessages } from '@/components/hooks';
+
+export function CurrencySelect({ value, onChange }) {
+  const { formatMessage, labels } = useMessages();
+  const [search, setSearch] = useState('');
+
+  return (
+    <Select
+      items={CURRENCIES}
+      label={formatMessage(labels.currency)}
+      value={value}
+      defaultValue={value}
+      onChange={onChange}
+      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>
+  );
+}

src/components/metrics/CountriesTable.tsx

@@ -17,7 +17,7 @@ export function CountriesTable({ ...props }: MetricsTableProps) {
         value={(countryNames[code] && code) || code}
         label={formatCountry(code)}
       >
-        <TypeIcon type="country" value={code?.toLowerCase()} />
+        <TypeIcon type="country" value={code} />
       </FilterLink>
     );
   };

src/components/metrics/EventsChart.tsx

@@ -56,8 +56,8 @@ export function EventsChart({ websiteId, className, focusLabel }: EventsChartPro
 
   return (
     <BarChart
-      minDate={startDate.toISOString()}
-      maxDate={endDate.toISOString()}
+      minDate={startDate}
+      maxDate={endDate}
       className={className}
       data={chartData}
       unit={unit}