99 lines
2.8 KiB
TypeScript
99 lines
2.8 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo } from "react"
|
|
import { CompactDataGrid, type CompactDataGridColumn } from "@/components/data-grids/compact-data-grid"
|
|
import { formatBytes } from "@/lib/fmt-rate"
|
|
import { cn } from "@/lib/utils"
|
|
import type { StatisticsPivotDto } from "@mmapp/contracts/statistics"
|
|
|
|
interface PivotGridRow {
|
|
id: string
|
|
label: string
|
|
total: number
|
|
[key: string]: string | number
|
|
}
|
|
|
|
export function StatisticsPivotGrid({
|
|
data,
|
|
onCellClick,
|
|
isLoading,
|
|
}: {
|
|
data: StatisticsPivotDto
|
|
onCellClick?: (rowId: string, colId: string) => void
|
|
isLoading?: boolean
|
|
}) {
|
|
const rows: PivotGridRow[] = useMemo(
|
|
() =>
|
|
data.rows.map((r) => {
|
|
const next: PivotGridRow = { id: r.id, label: r.label, total: r.total }
|
|
for (const col of data.columns) {
|
|
next[`c:${col.id}`] = r.cells[col.id] ?? 0
|
|
}
|
|
return next
|
|
}),
|
|
[data],
|
|
)
|
|
|
|
const columns: CompactDataGridColumn<PivotGridRow>[] = [
|
|
{
|
|
id: "label",
|
|
size: 140,
|
|
header: "Измерение",
|
|
accessorKey: "label",
|
|
cell: (row) => <span className="truncate font-medium">{row.label}</span>,
|
|
},
|
|
...data.columns.map((col) => ({
|
|
id: `c:${col.id}`,
|
|
size: 110,
|
|
header: col.label,
|
|
accessorKey: `c:${col.id}` as const,
|
|
cell: (row: PivotGridRow) => {
|
|
const value = Number(row[`c:${col.id}`] ?? 0)
|
|
const label = data.metric === "packets" ? value.toLocaleString("ru-RU") : formatBytes(value)
|
|
if (col.id === "__other__" || row.id === "__other__") {
|
|
return <span className="tabular-nums text-muted-foreground">{label}</span>
|
|
}
|
|
return (
|
|
<button
|
|
type="button"
|
|
aria-label={`${row.label}, ${col.label}: ${label}. Показать срез`}
|
|
className={cn(
|
|
"tabular-nums text-left hover:underline",
|
|
col.id === "__other__" || row.id === "__other__" ? "text-muted-foreground" : "",
|
|
)}
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onCellClick?.(row.id, col.id)
|
|
}}
|
|
>
|
|
{label}
|
|
</button>
|
|
)
|
|
},
|
|
})),
|
|
{
|
|
id: "total",
|
|
size: 110,
|
|
header: "Итого",
|
|
accessorKey: "total",
|
|
cell: (row) => (
|
|
<span className="tabular-nums font-medium">
|
|
{data.metric === "packets" ? row.total.toLocaleString("ru-RU") : formatBytes(row.total)}
|
|
</span>
|
|
),
|
|
},
|
|
]
|
|
|
|
return (
|
|
<CompactDataGrid
|
|
data={rows}
|
|
horizontalScroll
|
|
pinnedColumnId="label"
|
|
columns={columns}
|
|
isLoading={isLoading}
|
|
emptyTitle="Нет данных сводной"
|
|
emptyDescription="Выберите разные измерения строк и колонок."
|
|
/>
|
|
)
|
|
}
|