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 | 103x 20x 7x 14x 7x 2x 5x 5x 10x 10x | import { useMemo } from "react";
import type { ComparisonPayload } from "@/api/apiStore.gen";
import { ChartCard } from "../results-panel/charts/ChartCard";
import { useChartCardModels } from "../results-panel/charts/chartCardModels";
import { parseChartDataset } from "../results-panel/charts/chartData";
import type {
DrillbackHandler,
ParsedChartDataset,
} from "../results-panel/model/types";
type ComparisonChartDataset = ComparisonPayload["chart_datasets"][number];
const noopDrillback: DrillbackHandler = () => undefined;
export function ComparisonCharts({
datasets,
}: {
datasets: ComparisonChartDataset[];
}) {
const parsedDatasets = useMemo(
() =>
datasets
.map(parseChartDataset)
.filter((dataset): dataset is ParsedChartDataset => dataset != null),
[datasets],
);
const chartCards = useChartCardModels(parsedDatasets);
if (parsedDatasets.length === 0) {
return null;
}
return (
<section className="space-y-3" aria-label="Comparison charts">
<h4 className="text-sm font-semibold">Comparison charts</h4>
<div className="grid gap-4 xl:grid-cols-2">
{chartCards.map((chartCard) => (
<ChartCard
key={chartCard.key}
dataset={chartCard.dataset}
onDrillback={noopDrillback}
controls={chartCard.controls}
ariaLabelPrefix="Comparison chart"
/>
))}
</div>
</section>
);
}
|