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 | 8x 5x 2x 2x 2x 2x 2x 2x 8x 36x 9x 13x 8x 2x 2x 2x 9x | import { BarChart3 } from "lucide-react";
import { useState } from "react";
import type { EconomicsChartDatasetRead } from "@/api/apiStore.gen";
import type { DrillbackHandler, ParsedChartDataset } from "../model/types";
import { stringField } from "../model/valueParsing";
import { ChartCard } from "./ChartCard";
import { ComparisonMetricMenu } from "./ComparisonMetricMenu";
import { parseChartDataset } from "./chartData";
import {
CHART_MANUAL_BASELINE_COMPARISON,
DEFAULT_COMPARISON_METRIC_KEYS,
} from "./constants";
export function ChartGrid({
datasets,
onDrillback,
}: {
datasets: EconomicsChartDatasetRead[];
onDrillback: DrillbackHandler;
}) {
const [comparisonMetricKeys, setComparisonMetricKeys] = useState<string[]>(
() => Array.from(DEFAULT_COMPARISON_METRIC_KEYS),
);
const parsedDatasets = datasets
.map(parseChartDataset)
.filter((dataset): dataset is ParsedChartDataset => dataset != null);
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">
{parsedDatasets.map((dataset) => (
<ChartCard
key={dataset.chart_key}
dataset={filterComparisonDataset(dataset, comparisonMetricKeys)}
onDrillback={onDrillback}
controls={
dataset.chart_key === CHART_MANUAL_BASELINE_COMPARISON ? (
<ComparisonMetricMenu
selectedKeys={comparisonMetricKeys}
onSelectedKeysChange={setComparisonMetricKeys}
/>
) : undefined
}
/>
))}
</div>
</section>
);
}
function filterComparisonDataset(
dataset: ParsedChartDataset,
metricKeys: string[],
): ParsedChartDataset {
if (dataset.chart_key !== CHART_MANUAL_BASELINE_COMPARISON) return dataset;
const allowed =
metricKeys.length > 0
? new Set(metricKeys)
: DEFAULT_COMPARISON_METRIC_KEYS;
return {
...dataset,
series: dataset.series.map((series) => ({
...series,
points: series.points.filter((point) =>
allowed.has(stringField(point.metadata.category || point.key)),
),
})),
};
}
|