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 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | 2x 2x 2x 2x 2x 2x 2x 2x 4x 2x 2x 2x 4x 2x 2x 2x 2x 2x 2x 2x 6x 21x 32x 18x 12x 2x 8x 6x 2x 2x 2x | import { Bar, BarChart, CartesianGrid, Cell, XAxis, YAxis } from "recharts";
import { ChartContainer, ChartTooltip } from "@/ahuora-design-system/ui/chart";
import type { DrillbackHandler, ParsedChartDataset } from "../model/types";
import { chartTitle, comparisonRows } from "./chartData";
import { formatCompactAxisTick } from "./chartFormatters";
import { comparisonChartConfig } from "./constants";
import { EconomicsChartTooltip } from "./EconomicsChartTooltip";
export function ComparisonChart({
dataset,
onDrillback,
}: {
dataset: ParsedChartDataset;
onDrillback: DrillbackHandler;
}) {
const rows = comparisonRows(dataset);
return (
<div className="flex h-full flex-col">
<div className="sr-only" aria-label="Comparison y-axis label">
Value
</div>
<ChartContainer
config={comparisonChartConfig}
className="min-h-0 w-full flex-1"
aria-label={`Graph ${chartTitle(dataset)}`}
>
<BarChart
data={rows}
margin={{ left: 24, right: 18, top: 18, bottom: 26 }}
>
<CartesianGrid vertical={false} strokeOpacity={0.35} />
<XAxis
dataKey="categoryLabel"
tick={{ fontSize: "13px", style: { fontSize: "13px" } }}
tickLine={false}
axisLine={false}
interval={0}
minTickGap={8}
/>
<YAxis
width={88}
tick={{ fontSize: "13px", style: { fontSize: "13px" } }}
tickFormatter={formatCompactAxisTick}
tickLine={false}
axisLine={false}
label={{
value: "Value",
angle: -90,
position: "insideLeft",
offset: -12,
}}
/>
<ChartTooltip content={<EconomicsChartTooltip />} />
{(["target", "baseline", "result"] as const).map((seriesKey) => (
<Bar
key={seriesKey}
dataKey={seriesKey}
fill={`var(--color-${seriesKey})`}
onClick={(data) =>
onDrillback(data?.sourceRows?.[seriesKey]?.sourceRowId)
}
>
{rows.map((row) => (
<Cell key={`${seriesKey}-${row.category}`} />
))}
</Bar>
))}
</BarChart>
</ChartContainer>
<ComparisonLegend />
</div>
);
}
function ComparisonLegend() {
return (
<div className="mt-3 flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-[13px] leading-5 text-muted-foreground">
{(["target", "baseline", "result"] as const).map((seriesKey) => (
<div
key={seriesKey}
className="flex items-center gap-1.5 text-[13px] leading-5"
>
<span
className="size-3 rounded-sm"
style={{
backgroundColor:
comparisonChartConfig[seriesKey].color ??
"hsl(var(--muted-foreground))",
}}
aria-hidden="true"
/>
<span className="text-[13px] leading-5">
{comparisonChartConfig[seriesKey].label}
</span>
</div>
))}
</div>
);
}
|