Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 76x 15x 15x 15x 15x 17x 19x 23x 20x 20x 20x 20x 20x 165x 231x 490x 63x 9x 418x 20x 23x 7x 15x 20x 44x 7x 5x 20x 29x 2x 30x 22x | import { createColumnHelper } from "@tanstack/react-table";
import { useLocalStorage } from "usehooks-ts";
import { DataTable } from "@/ahuora-design-system/ui/data-table";
import { ScrollArea, ScrollBar } from "@/ahuora-design-system/ui/scroll-area";
import { useUnitopsSimulationobjectsStreamsSummaryRetrieveQuery } from "@/api/apiStore.gen";
import { useCurrentGroupId } from "@/hooks/flowsheetObjects";
import UnitSelectionHeader from "./UnitSelectionHeader";
const columnHelper = createColumnHelper();
export default function StreamsSummary() {
const group = useCurrentGroupId();
const [unitMap, setUnitMap] = useLocalStorage("unitMapStreams", {});
const { data: simObjGroups } =
useUnitopsSimulationobjectsStreamsSummaryRetrieveQuery({
groups: JSON.stringify([group]),
unitMap: JSON.stringify(unitMap),
});
function createColumns(row, rounded = false, title = "") {
Iif (!row) return [];
const columns = [];
const units = row.units;
const data = row.data;
// first row is enough to get the column definitions
Object.keys(data[0]).forEach((key) => {
columns.push(
columnHelper.accessor(key, {
header: ({ column }) => (
<UnitSelectionHeader
name={key}
tableName={title}
units={units[key]}
unitMap={unitMap}
setUnitMap={setUnitMap}
/>
),
cell: ({ cell }) => {
Iif (key == "name")
return `${cell.row.index + 1}. ${cell.getValue()}`;
if (rounded && typeof cell.getValue() === "number") {
return cell.getValue().toFixed(3);
}
return cell.getValue() || "-";
},
}),
);
});
return columns;
}
const tableGroups = Object.entries(simObjGroups || {});
const columns = tableGroups.map(([groupName, simObjs]) => {
return Object.entries(simObjs).map(([objectType, values]) =>
createColumns(values || [], true, objectType),
);
});
return (
<ScrollArea className="flex-1 h-full w-full">
<div className="flex flex-col gap-4 p-4 w-full h-full">
{tableGroups.map(([groupName, simObjs], groupIndex) => (
<div key={groupName} className="flex flex-col gap-4">
<h2 className="strong">{groupName}</h2>
{Object.entries(simObjs).map(([objectType, values], index) => (
<div key={objectType}>
<DataTable
title={objectType}
columns={columns[groupIndex][index]}
data={values.data}
columnSelection
/>
</div>
))}
</div>
))}
</div>
<ScrollBar orientation="vertical" />
<ScrollBar orientation="horizontal" />
</ScrollArea>
);
}
|