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 | import { PinchGraphSetRead } from "@/api/apiStore.gen";
import PinchGraph from "./PinchGraph";
import { ScrollArea } from "@/ahuora-design-system/ui/scroll-area";
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="my-4 relative overflow-hidden h-[80vh]">
{/* <SliderWithLabel defaultValue={300} min={200} max={600} id={"graphHeight"} label={"Graph Height:"} onValueChange={setGraphHeight} /> */}
<ScrollArea className="h-full overflow-auto">
<div className="mt-2 mb-20 mr-4">
<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>
</ScrollArea>
</div>
);
}
|