Updated hooks. Changed url, host to path, hostname.

src/components/metrics/DatePickerForm.tsx

@@ -1,9 +1,11 @@
 import { useState } from 'react';
 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';
 
+const FILTER_DAY = 'filter-day';
+const FILTER_RANGE = 'filter-range';
+
 export function DatePickerForm({
   startDate: defaultStartDate,
   endDate: defaultEndDate,

src/components/metrics/HostnamesTable.tsx

@@ -3,17 +3,17 @@ import { FilterLink } from '@/components/common/FilterLink';
 import { useMessages } from '@/components/hooks';
 import { Flexbox } from '@umami/react-zen';
 
-export function HostsTable(props: MetricsTableProps) {
+export function HostnamesTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();
 
-  const renderLink = ({ x: host }) => {
+  const renderLink = ({ x: hostname }) => {
     return (
       <Flexbox alignItems="center">
         <FilterLink
-          id="host"
-          value={host}
-          externalUrl={`https://${host}`}
-          label={!host && formatMessage(labels.none)}
+          id="hostname"
+          value={hostname}
+          externalUrl={`https://${hostname}`}
+          label={!hostname && formatMessage(labels.none)}
         />
       </Flexbox>
     );
@@ -23,8 +23,8 @@ export function HostsTable(props: MetricsTableProps) {
     <>
       <MetricsTable
         {...props}
-        title={formatMessage(labels.hosts)}
-        type="host"
+        title={formatMessage(labels.hostname)}
+        type="hostname"
         metric={formatMessage(labels.visitors)}
         renderLabel={renderLink}
       />

src/components/metrics/MetricsTable.tsx

@@ -41,7 +41,7 @@ export function MetricsTable({
 }: MetricsTableProps) {
   const [search, setSearch] = useState('');
   const { formatValue } = useFormat();
-  const { renderUrl } = useNavigation();
+  const { updateParams } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
   const { data, isLoading, isFetching, error } = useWebsiteMetricsQuery(
@@ -99,7 +99,7 @@ export function MetricsTable({
         )}
         <Row justifyContent="center">
           {showMore && data && !error && limit && (
-            <LinkButton href={renderUrl({ view: type })} variant="quiet">
+            <LinkButton href={updateParams({ view: type })} variant="quiet">
               <Text>{formatMessage(labels.more)}</Text>
               <Icon size="sm">
                 <Arrow />

src/components/metrics/PagesTable.tsx

@@ -13,19 +13,19 @@ export interface PagesTableProps extends MetricsTableProps {
 export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
   const {
     router,
-    renderUrl,
-    query: { view = 'url' },
+    updateParams,
+    query: { view = 'path' },
   } = useNavigation();
   const { formatMessage, labels } = useMessages();
   const { domain } = useContext(WebsiteContext);
 
   const handleChange = (id: any) => {
-    router.push(renderUrl({ view: id }));
+    router.push(updateParams({ view: id }));
   };
 
   const buttons = [
     {
-      id: 'url',
+      id: 'path',
       label: formatMessage(labels.path),
     },
     {
@@ -45,7 +45,7 @@ export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
   const renderLink = ({ x }) => {
     return (
       <FilterLink
-        id={view === 'entry' || view === 'exit' ? 'url' : view}
+        id={view === 'entry' || view === 'exit' ? 'path' : view}
         value={x}
         label={!x && formatMessage(labels.none)}
         externalUrl={

src/components/metrics/QueryParametersTable.tsx

@@ -1,10 +1,12 @@
 import { useState } from 'react';
+import { Row, Text } from '@umami/react-zen';
 import { FilterButtons } from '@/components/common/FilterButtons';
 import { emptyFilter, paramFilter } from '@/lib/filters';
-import { FILTER_RAW, FILTER_COMBINED } from '@/lib/constants';
 import { MetricsTable, MetricsTableProps } from './MetricsTable';
 import { useMessages } from '@/components/hooks';
-import styles from './QueryParametersTable.module.css';
+
+const FILTER_COMBINED = 'filter-combined';
+const FILTER_RAW = 'filter-raw';
 
 const filters = {
   [FILTER_RAW]: emptyFilter,
@@ -26,6 +28,27 @@ export function QueryParametersTable({
     { id: FILTER_RAW, label: formatMessage(labels.filterRaw) },
   ];
 
+  const renderLabel = ({ x, p, v }) => {
+    return (
+      <Row alignItems="center" maxWidth="600px" gap>
+        {filter === FILTER_RAW ? (
+          <Text truncate title={x}>
+            {x}
+          </Text>
+        ) : (
+          <>
+            <Text color="primary" weight="bold">
+              {p}
+            </Text>
+            <Text truncate title={v}>
+              {v}
+            </Text>
+          </>
+        )}
+      </Row>
+    );
+  };
+
   return (
     <MetricsTable
       {...props}
@@ -33,16 +56,7 @@ export function QueryParametersTable({
       type="query"
       metric={formatMessage(labels.views)}
       dataFilter={filters[filter]}
-      renderLabel={({ x, p, v }) =>
-        filter === FILTER_RAW ? (
-          x
-        ) : (
-          <div className={styles.item}>
-            <div className={styles.param}>{p}</div>
-            <div className={styles.value}>{v}</div>
-          </div>
-        )
-      }
+      renderLabel={renderLabel}
       delay={0}
     >
       {allowFilter && <FilterButtons items={buttons} value={filter} onChange={setFilter} />}

src/components/metrics/ReferrersTable.tsx

@@ -14,13 +14,13 @@ export interface ReferrersTableProps extends MetricsTableProps {
 export function ReferrersTable({ allowFilter, ...props }: ReferrersTableProps) {
   const {
     router,
-    renderUrl,
+    updateParams,
     query: { view = 'referrer' },
   } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
   const handleSelect = (key: any) => {
-    router.push(renderUrl({ view: key }));
+    router.push(updateParams({ view: key }));
   };
 
   const buttons = [