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 | 30x 7x 12x 7x 7x 5x 26x 17x 12x | import { BarChart3 } from "lucide-react";
import type { EconomicsChartDatasetRead } from "@/api/apiStore.gen";
import type { DrillbackHandler, ParsedChartDataset } from "../model/types";
import { ChartCard } from "./ChartCard";
import { useChartCardModels } from "./chartCardModels";
import { parseChartDataset } from "./chartData";
export function ChartGrid({
datasets,
onDrillback,
}: {
datasets: EconomicsChartDatasetRead[];
onDrillback: DrillbackHandler;
}) {
const parsedDatasets = datasets
.map(parseChartDataset)
.filter((dataset): dataset is ParsedChartDataset => dataset != null);
const chartCards = useChartCardModels(parsedDatasets);
if (parsedDatasets.length === 0) {
return (
<section
className="rounded-md border bg-background p-3 text-sm text-muted-foreground"
aria-label="Economics chart datasets"
>
No charts are available for this calculation.
</section>
);
}
return (
<section className="space-y-4" aria-label="Economics chart datasets">
<div className="flex items-center gap-2">
<BarChart3 className="size-4 text-primary" />
<h4 className="text-sm font-semibold">Charts</h4>
</div>
<div className="grid gap-4 xl:grid-cols-2">
{chartCards.map((chartCard) => (
<ChartCard
key={chartCard.key}
dataset={chartCard.dataset}
onDrillback={onDrillback}
controls={chartCard.controls}
/>
))}
</div>
</section>
);
}
|