watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-17 11:05:36 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Updated Goal loading.

Browse source
This commit is contained in:
Mike Cao 2025-06-18 20:12:42 -07:00
parent f444c6373d
commit 96fcdefeed
1 changed files with 59 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

116
src/app/(main)/websites/[websiteId]/reports/goals/Goal.tsx
View file

@ -24,7 +24,7 @@ export type GoalData = { num: number; total: number };
export function Goal({ id, name, type, parameters, websiteId, startDate, endDate }: GoalProps) { export function Goal({ id, name, type, parameters, websiteId, startDate, endDate }: GoalProps) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { data, error, isLoading } = useResultQuery<GoalData>(type, { const { data, error, isLoading, isFetching } = useResultQuery<GoalData>(type, {
websiteId, websiteId,
dateRange: { dateRange: {
startDate, startDate,
@ -35,64 +35,66 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
const isPage = parameters?.type === 'page'; const isPage = parameters?.type === 'page';
return ( return (
<LoadingPanel data={data} isLoading={isLoading} error={error}> <LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} error={error}>
<Grid gap> {data && (
<Grid columns="1fr auto" gap> <Grid gap>
<Column gap> <Grid columns="1fr auto" gap>
<Row> <Column gap>
<Text size="4" weight="bold"> <Row>
{name} <Text size="4" weight="bold">
</Text> {name}
</Text>
</Row>
</Column>
<Column>
<ReportEditButton id={id} name={name} type={type}>
{({ close }) => {
return (
<Dialog
title={formatMessage(labels.goal)}
variant="modal"
style={{ minHeight: 300, minWidth: 400 }}
>
<GoalEditForm id={id} websiteId={websiteId} onClose={close} />
</Dialog>
);
}}
</ReportEditButton>
</Column>
</Grid>
<Row alignItems="center" justifyContent="space-between" gap>
<Text color="muted">
{formatMessage(isPage ? labels.viewedPage : labels.triggeredEvent)}
</Text>
<Text color="muted">{formatMessage(labels.conversionRate)}</Text>
</Row>
<Row alignItems="center" justifyContent="space-between" gap>
<Row alignItems="center" gap>
<Icon>{parameters.type === 'page' ? <File /> : <Lightning />}</Icon>
<Text>{parameters.value}</Text>
</Row> </Row>
</Column> <Row alignItems="center" gap>
<Column> <Icon>
<ReportEditButton id={id} name={name} type={type}> <User />
{({ close }) => { </Icon>
return ( <Text title={`${data?.num} / ${data?.total}`}>{`${formatLongNumber(
<Dialog data?.num,
title={formatMessage(labels.goal)} )} / ${formatLongNumber(data?.total)}`}</Text>
variant="modal" </Row>
style={{ minHeight: 300, minWidth: 400 }} </Row>
> <Row alignItems="center" gap="6">
<GoalEditForm id={id} websiteId={websiteId} onClose={close} /> <ProgressBar
</Dialog> value={data?.num || 0}
); minValue={0}
}} maxValue={data?.total || 1}
</ReportEditButton> style={{ width: '100%' }}
</Column> />
<Text weight="bold" size="7">
{data?.total ? Math.round((+data?.num / +data?.total) * 100) : '0'}%
</Text>
</Row>
</Grid> </Grid>
<Row alignItems="center" justifyContent="space-between" gap> )}
<Text color="muted">
{formatMessage(isPage ? labels.viewedPage : labels.triggeredEvent)}
</Text>
<Text color="muted">{formatMessage(labels.conversionRate)}</Text>
</Row>
<Row alignItems="center" justifyContent="space-between" gap>
<Row alignItems="center" gap>
<Icon>{parameters.type === 'page' ? <File /> : <Lightning />}</Icon>
<Text>{parameters.value}</Text>
</Row>
<Row alignItems="center" gap>
<Icon>
<User />
</Icon>
<Text title={`${data?.num} / ${data?.total}`}>{`${formatLongNumber(
data?.num,
)} / ${formatLongNumber(data?.total)}`}</Text>
</Row>
</Row>
<Row alignItems="center" gap="6">
<ProgressBar
value={data?.num || 0}
minValue={0}
maxValue={data?.total || 1}
style={{ width: '100%' }}
/>
<Text weight="bold" size="7">
{data?.total ? Math.round((+data?.num / +data?.total) * 100) : '0'}%
</Text>
</Row>
</Grid>
</LoadingPanel> </LoadingPanel>
); );
} }