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 101 102 103 104 105 106 | 5x 5x 5x 5x 5x 5x 5x 5x 10x 5x 5x 5x 10x 5x 5x 5x 5x 5x 5x 5x 15x 78x 80x 45x 30x 5x 20x 15x 5x 5x 5x | 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,
RESULT_CHART_Y_AXIS_LABEL_DY,
RESULT_CHART_Y_AXIS_LABEL_OFFSET,
RESULT_CHART_Y_AXIS_WIDTH,
} from "../constants";
import { EconomicsChartTooltip } from "../EconomicsChartTooltip";
export function ManualBaselineComparisonChart({
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={RESULT_CHART_Y_AXIS_WIDTH}
tick={{ fontSize: "13px", style: { fontSize: "13px" } }}
tickFormatter={formatCompactAxisTick}
tickLine={false}
axisLine={false}
label={{
value: "Value",
angle: -90,
position: "insideLeft",
offset: RESULT_CHART_Y_AXIS_LABEL_OFFSET,
dy: RESULT_CHART_Y_AXIS_LABEL_DY,
}}
/>
<ChartTooltip shared={false} 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>
);
}
|