New properties screens. New website nav.

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

@@ -1,51 +1,93 @@
-import { Grid, DataColumn, DataTable } from '@umami/react-zen';
+import { useMemo, useState } from 'react';
+import { Select, ListItem, Grid } from '@umami/react-zen';
 import {
+  useMessages,
   useSessionDataPropertiesQuery,
   useSessionDataValuesQuery,
-  useMessages,
 } from '@/components/hooks';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { PieChart } from '@/components/charts/PieChart';
-import { useState } from 'react';
 import { CHART_COLORS } from '@/lib/constants';
+import { ListTable } from '@/components/metrics/ListTable';
 
 export function SessionProperties({ websiteId }: { websiteId: string }) {
   const [propertyName, setPropertyName] = useState('');
   const { formatMessage, labels } = useMessages();
   const { data, isLoading, isFetching, error } = useSessionDataPropertiesQuery(websiteId);
-  const { data: values } = useSessionDataValuesQuery(websiteId, propertyName);
-  const chartData =
-    propertyName && values
-      ? {
-          labels: values.map(({ value }) => value),
-          datasets: [
-            {
-              data: values.map(({ total }) => total),
-              backgroundColor: CHART_COLORS,
-              borderWidth: 0,
-            },
-          ],
-        }
-      : null;
+
+  const properties: string[] = data?.map(e => e.propertyName);
 
   return (
-    <LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} error={error}>
-      <Grid>
-        <DataTable data={data}>
-          <DataColumn id="propertyName" label={formatMessage(labels.property)}>
-            {(row: any) => (
-              <div onClick={() => setPropertyName(row.propertyName)}>{row.propertyName}</div>
-            )}
-          </DataColumn>
-          <DataColumn id="total" label={formatMessage(labels.count)} align="end" />
-        </DataTable>
-        {propertyName && (
-          <div>
-            <div>{propertyName}</div>
-            <PieChart key={propertyName} type="doughnut" chartData={chartData} />
-          </div>
-        )}
+    <LoadingPanel
+      isLoading={isLoading}
+      isFetching={isFetching}
+      data={data}
+      error={error}
+      minHeight="300px"
+      gap="6"
+    >
+      <Grid columns="repeat(auto-fill, minmax(300px, 1fr))" gap>
+        <Select
+          label={formatMessage(labels.event)}
+          value={propertyName}
+          onChange={setPropertyName}
+          placeholder=""
+        >
+          {properties?.map(p => (
+            <ListItem key={p} id={p}>
+              {p}
+            </ListItem>
+          ))}
+        </Select>
       </Grid>
+      {propertyName && <SessionValues websiteId={websiteId} propertyName={propertyName} />}
     </LoadingPanel>
   );
 }
+
+const SessionValues = ({ websiteId, propertyName }) => {
+  const { data, isLoading, isFetching, error } = useSessionDataValuesQuery(websiteId, propertyName);
+
+  const propertySum = useMemo(() => {
+    return data?.reduce((sum, { total }) => sum + total, 0) ?? 0;
+  }, [data]);
+
+  const chartData = useMemo(() => {
+    if (!propertyName || !data) return null;
+    return {
+      labels: data.map(({ value }) => value),
+      datasets: [
+        {
+          data: data.map(({ total }) => total),
+          backgroundColor: CHART_COLORS,
+          borderWidth: 0,
+        },
+      ],
+    };
+  }, [propertyName, data]);
+
+  const tableData = useMemo(() => {
+    if (!propertyName || !data || propertySum === 0) return [];
+    return data.map(({ value, total }) => ({
+      x: value,
+      y: total,
+      z: 100 * (total / propertySum),
+    }));
+  }, [propertyName, data, propertySum]);
+
+  return (
+    <LoadingPanel
+      isLoading={isLoading}
+      isFetching={isFetching}
+      data={data}
+      error={error}
+      minHeight="300px"
+      gap="6"
+    >
+      <Grid columns="1fr 1fr" gap>
+        {data && <ListTable title={propertyName} data={tableData} />}
+        <PieChart key={propertyName} type="doughnut" chartData={chartData} />
+      </Grid>
+    </LoadingPanel>
+  );
+};