lly/umami
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix formatting and css for session property screen

Browse Source
This commit is contained in:
Francis Cao
2026-05-04 10:54:58 -07:00
parent 3136660588
commit 5fc02b6aef
2 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(main)/websites/[websiteId]/session-data/SessionPropertyChart.tsx
+13 -3
View File
@@ -74,7 +74,7 @@ export function SessionPropertyChart({
<Empty />
)}
</Column>
<Column minHeight="400px">
<Column>
<Grid columns="1fr" gap padding="2" alignItems="start">
<Column gap padding="2">
{activeTable.length === 0 ? (
@@ -97,7 +97,12 @@ export function SessionPropertyChart({
<Column overflow="auto" minHeight="0">
<Column style={{ minWidth: '700px' }}>
<DataTable data={activeTable}>
<DataColumn id="label" label={propertyName} width="minmax(220px, 2fr)" align="start">
<DataColumn
id="label"
label={propertyName}
width="minmax(220px, 2fr)"
align="start"
>
{row => (
<Row overflow="hidden">
<Text truncate style={{ maxWidth: '320px' }}>
@@ -118,7 +123,12 @@ export function SessionPropertyChart({
<DataColumn id="events" label={t(labels.events)} align="end" width="90px">
{row => formatLongNumber(row.events)}
</DataColumn>
<DataColumn id="duration" label={t(labels.duration)} align="end" width="120px">
<DataColumn
id="duration"
label={t(labels.duration)}
align="end"
width="120px"
>
{row =>
formatShortTime(Math.abs(~~Number(row.totaltime)), ['h', 'm', 's'], ' ')
}
src/components/property-data/PropertyNumericChart.tsx
+4 -13
View File
@@ -48,15 +48,6 @@ export function PropertyNumericChart({
const avgRows = useMemo(() => (avgQuery.data as { t: string; y: number }[] | undefined) ?? [], [avgQuery.data]);
const stats = statsQuery.data;
const formatMetricValue = useCallback(
(n: number) =>
Number(n).toLocaleString(locale, {
maximumFractionDigits: 2,
minimumFractionDigits: Number.isInteger(Number(n)) ? 0 : 2,
}),
[locale],
);
const chartData: any = useMemo(() => {
if (!sumQuery.data && !avgQuery.data) return;
@@ -109,10 +100,10 @@ export function PropertyNumericChart({
>
<MetricsBar padding="2">
<MetricCard label={t(labels.total)} value={stats?.total ?? 0} formatValue={formatLongNumber} />
<MetricCard label={t(labels.average)} value={stats?.average ?? 0} formatValue={formatMetricValue} />
<MetricCard label="Median" value={stats?.median ?? 0} formatValue={formatMetricValue} />
<MetricCard label={t(labels.max)} value={stats?.max ?? 0} formatValue={formatMetricValue} />
<MetricCard label={t(labels.min)} value={stats?.min ?? 0} formatValue={formatMetricValue} />
<MetricCard label={t(labels.average)} value={stats?.average ?? 0} formatValue={formatLongNumber} />
<MetricCard label="Median" value={stats?.median ?? 0} formatValue={formatLongNumber} />
<MetricCard label={t(labels.max)} value={stats?.max ?? 0} formatValue={formatLongNumber} />
<MetricCard label={t(labels.min)} value={stats?.min ?? 0} formatValue={formatLongNumber} />
</MetricsBar>
</LoadingPanel>
<LoadingPanel