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 | 103x 26x 26x 26x 26x 31x 33x 40x 29x 29x 29x 29x 29x 259x 355x 746x 87x 142x 517x 29x 40x 13x 26x 29x 78x 13x 8x 29x 52x 5x 52x 39x | 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>
);
}
|