watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-14 17:45:38 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

More conversions.

Browse source
This commit is contained in:
Mike Cao 2025-03-07 12:21:20 -08:00
parent 5999bf6256
commit b4be6cb221
14 changed files with 240 additions and 262 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/(main)/reports/insights/InsightsParameters.tsx
View file

@ -1,6 +1,6 @@
import { useMessages } from '@/components/hooks';
import { useContext } from 'react';
import { Form, FormButtons, SubmitButton } from '@umami/react-zen';
import { Form, FormButtons, FormSubmitButton } from '@umami/react-zen';
import { BaseParameters } from '../[reportId]/BaseParameters';
import { ReportContext } from '../[reportId]/Report';
import { FieldParameters } from '../[reportId]/FieldParameters';
@ -25,9 +25,9 @@ export function InsightsParameters() {
{parametersSelected && <FieldParameters />}
{parametersSelected && <FilterParameters />}
<FormButtons>
<SubmitButton variant="primary" disabled={!queryEnabled} isLoading={isRunning}>
<FormSubmitButton variant="primary" isDisabled={!queryEnabled} isLoading={isRunning}>
{formatMessage(labels.runQuery)}
</SubmitButton>
</FormSubmitButton>
</FormButtons>
</Form>
);

55
src/app/(main)/reports/insights/InsightsTable.tsx
View file

@ -1,5 +1,5 @@
import { useContext, useEffect, useState } from 'react';
import { GridTable, GridColumn } from '@umami/react-zen';
import { DataTable, DataColumn } from '@umami/react-zen';
import { useFormat, useMessages } from '@/components/hooks';
import { ReportContext } from '../[reportId]/Report';
import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
@ -24,50 +24,35 @@ export function InsightsTable() {
}
return (
<GridTable data={report?.data || []}>
<DataTable data={report?.data || []}>
{fields.map(({ name, label }) => {
return (
<GridColumn key={name} name={name} label={label}>
<DataColumn key={name} id={name} label={label}>
{row => formatValue(row[name], name)}
</GridColumn>
</DataColumn>
);
})}
<GridColumn name="views" label={formatMessage(labels.views)} width="100px" alignment="end">
{row => row?.views?.toLocaleString()}
</GridColumn>
<GridColumn name="visits" label={formatMessage(labels.visits)} width="100px" alignment="end">
{row => row?.visits?.toLocaleString()}
</GridColumn>
<GridColumn
name="visitors"
label={formatMessage(labels.visitors)}
width="100px"
alignment="end"
>
{row => row?.visitors?.toLocaleString()}
</GridColumn>
<GridColumn
name="bounceRate"
label={formatMessage(labels.bounceRate)}
width="100px"
alignment="end"
>
{row => {
<DataColumn id="views" label={formatMessage(labels.views)} align="end">
{(row: any) => row?.views?.toLocaleString()}
</DataColumn>
<DataColumn id="visits" label={formatMessage(labels.visits)} align="end">
{(row: any) => row?.visits?.toLocaleString()}
</DataColumn>
<DataColumn id="visitors" label={formatMessage(labels.visitors)} align="end">
{(row: any) => row?.visitors?.toLocaleString()}
</DataColumn>
<DataColumn id="bounceRate" label={formatMessage(labels.bounceRate)} align="end">
{(row: any) => {
const n = (Math.min(row?.visits, row?.bounces) / row?.visits) * 100;
return Math.round(+n) + '%';
}}
</GridColumn>
<GridColumn
name="visitDuration"
label={formatMessage(labels.visitDuration)}
width="100px"
alignment="end"
>
{row => {
</DataColumn>
<DataColumn id="visitDuration" label={formatMessage(labels.visitDuration)} align="end">
{(row: any) => {
const n = row?.totaltime / row?.visits;
return `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`;
}}
</GridColumn>
</GridTable>
</DataColumn>
</DataTable>
);
}