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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 76x 61x 61x 61x 87x 71x 61x 61x 13x 74x 23x 23x 56x 130x 84x 107x | import {
CartesianGrid,
Label,
Line,
LineChart,
Scatter,
ScatterChart,
XAxis,
YAxis,
ZAxis,
} from "recharts";
import {
ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from "@/ahuora-design-system/ui/chart";
import { ScrollArea } from "@/ahuora-design-system/ui/scroll-area";
import {
ScenarioRead,
useCoreDataRowOutputGraphListQuery,
} from "@/api/apiStore.gen";
import { useCurrentObjectId } from "@/hooks/flowsheetObjects";
const chartConfig = {
desktop: {
label: "Desktop",
color: "hsl(var(--chart-1))",
},
} satisfies ChartConfig;
export default function ScenarioGraphView({
scenario,
}: {
scenario: ScenarioRead;
}) {
const selectedObjectId = useCurrentObjectId();
const { data: list } = useCoreDataRowOutputGraphListQuery(
{ scenario: scenario.id, simulationObject: selectedObjectId },
{ skip: !selectedObjectId },
);
const isDynamics = scenario.enable_dynamics;
const xAxisLabel = isDynamics ? "Time step" : "Row";
return (
<ScrollArea className="h-full">
{!selectedObjectId && (
<p className="p-4">Select a unit operation to view its results.</p>
)}
<div className="grid grid-cols-2 gap-4 p-4">
{list?.map((solution) => (
<div
key={solution[0].key}
className="border p-4 rounded-md flex flex-col gap-4"
>
<p>{solution[0].key}</p>
<ChartContainer config={chartConfig} className="w-full h-[200px]">
{isDynamics ? (
<LineChart data={solution} margin={{ bottom: 15 }}>
<CartesianGrid vertical={false} />
<XAxis dataKey="index">
<Label
value={xAxisLabel}
offset={-15}
position="insideBottom"
/>
</XAxis>
<YAxis
type="number"
domain={[
(dataMin) => Math.floor(dataMin),
(dataMax) => Math.ceil(dataMax),
]}
hide={false}
/>
<Line
dataKey="value"
type="dot"
stroke="var(--color-desktop)"
strokeWidth={2}
dot={false}
/>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent hideLabel />}
/>
</LineChart>
) : (
<ScatterChart data={solution} margin={{ bottom: 15 }}>
<CartesianGrid vertical={false} />
<XAxis dataKey="index">
<Label
value={xAxisLabel}
offset={-15}
position="insideBottom"
/>
</XAxis>
<YAxis
type="number"
domain={["dataMin", "dataMax"]}
hide={true}
/>
<ZAxis range={[30, 31]} />
<Scatter dataKey="value" fill="var(--color-desktop)" />
<ChartTooltip
cursor={false}
content={<ChartTooltipContent hideLabel />}
/>
</ScatterChart>
)}
</ChartContainer>
</div>
))}
</div>
</ScrollArea>
);
}
|