This commit is contained in:
Mike Cao 2025-08-15 10:08:41 -07:00
commit 0558563d35
11 changed files with 59 additions and 56 deletions

View file

@ -1,12 +1,10 @@
import { Grid, Column, Heading, Text } from '@umami/react-zen';
import { firstBy } from 'thenby';
import { CHART_COLORS, UTM_PARAMS } from '@/lib/constants';
import { useResultQuery } from '@/components/hooks';
import { PieChart } from '@/components/charts/PieChart';
import { ListTable } from '@/components/metrics/ListTable';
import { useMessages } from '@/components/hooks';
import { Panel } from '@/components/common/Panel';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { Panel } from '@/components/common/Panel';
import { useMessages, useResultQuery } from '@/components/hooks';
import { ListTable } from '@/components/metrics/ListTable';
import { CHART_COLORS, UTM_PARAMS } from '@/lib/constants';
import { Column, Grid, Heading, Text } from '@umami/react-zen';
export interface UTMProps {
websiteId: string;
@ -27,19 +25,19 @@ export function UTM({ websiteId, startDate, endDate }: UTMProps) {
{data && (
<Column gap>
{UTM_PARAMS.map(param => {
const items = toArray(data?.[param]);
const items = data?.[param];
const chartData = {
labels: items.map(({ name }) => name),
labels: items.map(({ utm }) => utm),
datasets: [
{
data: items.map(({ value }) => value),
data: items.map(({ views }) => views),
backgroundColor: CHART_COLORS,
borderWidth: 0,
},
],
};
const total = items.reduce((sum, { value }) => {
return +sum + +value;
const total = items.reduce((sum, { views }) => {
return +sum + +views;
}, 0);
return (
@ -51,10 +49,10 @@ export function UTM({ websiteId, startDate, endDate }: UTMProps) {
</Heading>
<ListTable
metric={formatMessage(labels.views)}
data={items.map(({ name, value }) => ({
x: name,
y: value,
z: (value / total) * 100,
data={items.map(({ utm, views }) => ({
x: utm,
y: views,
z: (views / total) * 100,
}))}
/>
</Column>
@ -70,11 +68,3 @@ export function UTM({ websiteId, startDate, endDate }: UTMProps) {
</LoadingPanel>
);
}
function toArray(data: Record<string, number> = {}) {
return Object.keys(data)
.map(key => {
return { name: key, value: data[key] };
})
.sort(firstBy('value', -1));
}

View file

@ -10,7 +10,7 @@ export function WebsiteLayout({ websiteId, children }: { websiteId: string; chil
return (
<WebsiteProvider websiteId={websiteId}>
<Grid columns="auto 1fr" width="100%" height="100%">
<Column height="100%" border="right" backgroundColor>
<Column height="100%" border="right" backgroundColor marginRight="2">
<WebsiteNav websiteId={websiteId} />
</Column>
<PageBody gap>

View file

@ -36,7 +36,7 @@ export function EventProperties({ websiteId }: { websiteId: string }) {
gap="6"
>
{data && (
<Grid columns="repeat(auto-fill, minmax(300px, 1fr))" gap>
<Grid columns="repeat(auto-fill, minmax(300px, 1fr))" marginBottom="3" gap>
<Select
label={formatMessage(labels.event)}
value={eventName}