Added display of session properties.

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

@@ -0,0 +1,25 @@
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
+  gap: 60px;
+  margin-bottom: 40px;
+}
+
+.table {
+  align-self: start;
+}
+
+.link:hover {
+  cursor: pointer;
+  color: var(--primary400);
+}
+
+.title {
+  text-align: center;
+  font-weight: bold;
+  margin: 20px 0;
+}
+
+.chart {
+  min-height: 620px;
+}

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

@@ -0,0 +1,52 @@
+import { GridColumn, GridTable } from 'react-basics';
+import { useSessionDataProperties, useSessionDataValues, 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 styles from './SessionProperties.module.css';
+
+export function SessionProperties({ websiteId }: { websiteId: string }) {
+  const [propertyName, setPropertyName] = useState('');
+  const { formatMessage, labels } = useMessages();
+  const { data, isLoading, isFetched, error } = useSessionDataProperties(websiteId);
+  const { data: values } = useSessionDataValues(websiteId, propertyName);
+  const chartData =
+    propertyName && values
+      ? {
+          labels: values.map(({ value }) => value),
+          datasets: [
+            {
+              data: values.map(({ total }) => total),
+              backgroundColor: CHART_COLORS,
+              borderWidth: 0,
+            },
+          ],
+        }
+      : null;
+
+  return (
+    <LoadingPanel isLoading={isLoading} isFetched={isFetched} data={data} error={error}>
+      <div className={styles.container}>
+        <GridTable data={data} cardMode={false} className={styles.table}>
+          <GridColumn name="propertyName" label={formatMessage(labels.property)}>
+            {row => (
+              <div className={styles.link} onClick={() => setPropertyName(row.propertyName)}>
+                {row.propertyName}
+              </div>
+            )}
+          </GridColumn>
+          <GridColumn name="total" label={formatMessage(labels.count)} alignment="end" />
+        </GridTable>
+        {propertyName && (
+          <div className={styles.chart}>
+            <div className={styles.title}>{propertyName}</div>
+            <PieChart key={propertyName} type="doughnut" data={chartData} />
+          </div>
+        )}
+      </div>
+    </LoadingPanel>
+  );
+}
+
+export default SessionProperties;

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

@@ -2,10 +2,17 @@
 import WebsiteHeader from '../WebsiteHeader';
 import SessionsDataTable from './SessionsDataTable';
 import SessionsMetricsBar from './SessionsMetricsBar';
+import SessionProperties from './SessionProperties';
 import WorldMap from 'components/metrics/WorldMap';
 import { GridRow } from 'components/layout/Grid';
+import { Item, Tabs } from 'react-basics';
+import { useState } from 'react';
+import { useMessages } from 'components/hooks';
 
 export function SessionsPage({ websiteId }) {
+  const [tab, setTab] = useState('activity');
+  const { formatMessage, labels } = useMessages();
+
   return (
     <>
       <WebsiteHeader websiteId={websiteId} />
@@ -13,7 +20,12 @@ export function SessionsPage({ websiteId }) {
       <GridRow columns="one">
         <WorldMap websiteId={websiteId} style={{ width: 800, margin: '0 auto' }} />
       </GridRow>
-      <SessionsDataTable websiteId={websiteId} />
+      <Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
+        <Item key="activity">{formatMessage(labels.activity)}</Item>
+        <Item key="properties">{formatMessage(labels.properties)}</Item>
+      </Tabs>
+      {tab === 'activity' && <SessionsDataTable websiteId={websiteId} />}
+      {tab === 'properties' && <SessionProperties websiteId={websiteId} />}
     </>
   );
 }