Renamed query hooks. Fixed conversion bugs.

src/components/metrics/EventsChart.tsx

@@ -1,6 +1,6 @@
 import { colord } from 'colord';
 import { BarChart } from '@/components/charts/BarChart';
-import { useDateRange, useLocale, useWebsiteEventsSeries } from '@/components/hooks';
+import { useDateRange, useLocale, useWebsiteEventsSeriesQuery } from '@/components/hooks';
 import { renderDateLabels } from '@/lib/charts';
 import { CHART_COLORS } from '@/lib/constants';
 import { useMemo } from 'react';
@@ -15,7 +15,7 @@ export function EventsChart({ websiteId, className }: EventsChartProps) {
     dateRange: { startDate, endDate, unit, value },
   } = useDateRange(websiteId);
   const { locale } = useLocale();
-  const { data, isLoading } = useWebsiteEventsSeries(websiteId);
+  const { data, isLoading } = useWebsiteEventsSeriesQuery(websiteId);
 
   const chartData = useMemo(() => {
     if (!data) return [];

src/components/metrics/MetricsBar.tsx

@@ -22,7 +22,7 @@ export function MetricsBar({ children, isLoading, isFetched, error }: MetricsBar
         !error &&
         isFetched &&
         cloneChildren(children, child => {
-          return { format: child.props['format'] || formatFunc };
+          return { format: child?.props['format'] || formatFunc };
         })}
     </Row>
   );

src/components/metrics/MetricsTable.tsx

@@ -1,14 +1,14 @@
 import { ReactNode, useMemo, useState } from 'react';
-import { Loading, Icon, Text, SearchField } from '@umami/react-zen';
-import classNames from 'classnames';
+import { Loading, Icon, Text, SearchField, Row } from '@umami/react-zen';
 import { ErrorMessage } from '@/components/common/ErrorMessage';
 import { LinkButton } from '@/components/common/LinkButton';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
 import { percentFilter } from '@/lib/filters';
-import { useNavigation, useWebsiteMetrics, useMessages, useFormat } from '@/components/hooks';
+import { useNavigation, useWebsiteMetricsQuery, useMessages, useFormat } from '@/components/hooks';
 import { Icons } from '@/components/icons';
 import { ListTable, ListTableProps } from './ListTable';
 import styles from './MetricsTable.module.css';
+import { Panel } from '@/components/layout/Panel';
 
 export interface MetricsTableProps extends ListTableProps {
   websiteId: string;
@@ -46,7 +46,7 @@ export function MetricsTable({
   const { renderUrl } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
-  const { data, isLoading, isFetched, error } = useWebsiteMetrics(
+  const { data, isLoading, isFetched, error } = useWebsiteMetricsQuery(
     websiteId,
     { type, limit, search: searchFormattedValues ? undefined : search, ...params },
     {
@@ -85,15 +85,7 @@ export function MetricsTable({
   }, [data, dataFilter, search, limit, formatValue, type]);
 
   return (
-    <div
-      className={classNames(styles.container, className)}
-      style={{
-        background: 'var(--background-color)',
-        border: '1px solid var(--border-color)',
-        borderRadius: 'var(--border-radius)',
-        padding: '16px',
-      }}
-    >
+    <Panel>
       {error && <ErrorMessage />}
       <div className={styles.actions}>
         {allowSearch && (
@@ -111,7 +103,7 @@ export function MetricsTable({
         <ListTable {...(props as ListTableProps)} data={filteredData} className={className} />
       )}
       {!data && isLoading && !isFetched && <Loading icon="dots" />}
-      <div className={styles.footer}>
+      <Row justifyContent="center">
         {showMore && data && !error && limit && (
           <LinkButton href={renderUrl({ view: type })} variant="quiet">
             <Text>{formatMessage(labels.more)}</Text>
@@ -120,7 +112,7 @@ export function MetricsTable({
             </Icon>
           </LinkButton>
         )}
-      </div>
-    </div>
+      </Row>
+    </Panel>
   );
 }

src/components/metrics/WorldMap.tsx

@@ -3,7 +3,7 @@ import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simp
 import classNames from 'classnames';
 import { colord } from 'colord';
 import { ISO_COUNTRIES, MAP_FILE } from '@/lib/constants';
-import { useDateRange, useTheme, useWebsiteMetrics } from '@/components/hooks';
+import { useDateRange, useTheme, useWebsiteMetricsQuery } from '@/components/hooks';
 import { useCountryNames } from '@/components/hooks';
 import { useLocale } from '@/components/hooks';
 import { useMessages } from '@/components/hooks';
@@ -32,7 +32,7 @@ export function WorldMap({
   const {
     dateRange: { startDate, endDate },
   } = useDateRange(websiteId);
-  const { data: mapData } = useWebsiteMetrics(websiteId, {
+  const { data: mapData } = useWebsiteMetricsQuery(websiteId, {
     type: 'country',
     startAt: +startDate,
     endAt: +endDate,