All files / src/pages/flowsheet-page/pinch-analysis PinchGraphDashboard.tsx

0% Statements 0/10
0% Branches 0/4
0% Functions 0/3
0% Lines 0/10

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                                                                                   
import { PinchGraphSetRead } from "@/api/apiStore.gen";
import PinchGraph from "./PinchGraph";
import { Spinner } from "@/ahuora-design-system/ui/spinner";
import { useState } from "react";
import { useCurrentPinchOutputs } from "@/hooks/PinchHooks";
 
export default function PinchGraphDashboard() {
  const { outputs, isLoading, isError } = useCurrentPinchOutputs();
  const [graphHeight, _] = useState(300);
 
  Iif (isLoading) {
    return (
      <div className="flex justify-center items-center h-screen">
        <Spinner />
      </div>
    );
  }
 
  Iif (isError || !outputs) {
    return <div>Error loading options data.</div>;
  }
 
  const graphSets: PinchGraphSetRead[] = outputs[0].graph_sets!;
 
  return (
    <div className="mt-2 mb-20 mr-4 h-full">
      <div className={"grid grid-flow-row grid-cols-3 gap-8"}>
        {graphSets.map((graphSet) =>
          graphSet.graphs!.map((graph) => (
            <PinchGraph
              key={graph.id}
              graph={graph}
              name={graphSet.name}
              height={graphHeight}
            />
          )),
        )}
      </div>
    </div>
  );
}