Breakdown report.

src/app/(main)/websites/[websiteId]/reports/breakdown/Breakdown.tsx

@@ -0,0 +1,73 @@
+import { Text, DataTable, DataColumn } from '@umami/react-zen';
+import { useMessages, useResultQuery, useFormat, useFields } from '@/components/hooks';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
+import { formatShortTime } from '@/lib/format';
+
+export interface BreakdownProps {
+  websiteId: string;
+  startDate: Date;
+  endDate: Date;
+  parameters: {
+    fields: string[];
+  };
+}
+
+export function Breakdown({ websiteId, parameters, startDate, endDate }: BreakdownProps) {
+  const { formatMessage, labels } = useMessages();
+  const { formatValue } = useFormat();
+  const { fields } = useFields();
+  const { data, error, isLoading } = useResultQuery<any>(
+    'breakdown',
+    {
+      websiteId,
+      dateRange: {
+        startDate,
+        endDate,
+      },
+      parameters,
+    },
+    { enabled: !!parameters.fields.length },
+  );
+
+  return (
+    <LoadingPanel isEmpty={!data?.length} isLoading={isLoading} error={error}>
+      <DataTable data={data}>
+        {parameters?.fields.map(field => {
+          return (
+            <DataColumn key={field} id={field} label={fields.find(f => f.name === field)?.label}>
+              {row => {
+                const value = formatValue(row[field], field);
+                return (
+                  <Text truncate title={value}>
+                    {value}
+                  </Text>
+                );
+              }}
+            </DataColumn>
+          );
+        })}
+        <DataColumn id="views" label={formatMessage(labels.views)} align="end">
+          {row => row?.['views']?.toLocaleString()}
+        </DataColumn>
+        <DataColumn id="visits" label={formatMessage(labels.visits)} align="end">
+          {row => row?.['visits']?.toLocaleString()}
+        </DataColumn>
+        <DataColumn id="visitors" label={formatMessage(labels.visitors)} align="end">
+          {row => row?.['visitors']?.toLocaleString()}
+        </DataColumn>
+        <DataColumn id="bounceRate" label={formatMessage(labels.bounceRate)} align="end">
+          {row => {
+            const n = (Math.min(row?.['visits'], row?.['bounces']) / row?.['visits']) * 100;
+            return Math.round(+n) + '%';
+          }}
+        </DataColumn>
+        <DataColumn id="visitDuration" label={formatMessage(labels.visitDuration)} align="end">
+          {row => {
+            const n = (row?.['totaltime'] / row?.['visits']) * 100;
+            return `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`;
+          }}
+        </DataColumn>
+      </DataTable>
+    </LoadingPanel>
+  );
+}