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 | 76x 6x 6x 6x 6x 8x 7x 10x 6x 4x 4x 4x 4x 20x 20x 20x 4x 16x 4x 8x 3x 6x 4x 18x 3x 2x 4x 12x 1x 12x 9x | 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 { useUnitopsSimulationobjectsUnitopsSummaryRetrieveQuery } from "@/api/apiStore.gen";
import { useCurrentGroupId } from "@/hooks/flowsheetObjects";
import UnitSelectionHeader from "./UnitSelectionHeader";
const columnHelper = createColumnHelper();
export default function UnitopsSummary() {
const group = useCurrentGroupId();
const [unitMap, setUnitMap] = useLocalStorage("unitMapUnitops", {});
const { data: simObjGroups } =
useUnitopsSimulationobjectsUnitopsSummaryRetrieveQuery({
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.values(simObjs).map((row) => createColumns(row || [], true));
});
return (
<ScrollArea className="flex-1 h-full w-full">
<div className="flex flex-col gap-4 p-4">
{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>
);
}
|