| // recharts axis props for the category (provider / agent / error) bar charts on | |
| // the analytics page. | |
| // | |
| // recharts' default `interval` is 'preserveEnd' (see `implicitXAxis` / | |
| // `implicitYAxis` in recharts' axisSelectors): when the labels are wider than | |
| // the space available it silently DROPS ticks, keeping the tail and thinning | |
| // out everything before it. The visible result is the #890 complaint — only a | |
| // few provider names render, the rest are only visible on hover, and the bars | |
| // no longer line up with the labels the user can actually see (a bar with no | |
| // label looks like a different provider than it is). | |
| // | |
| // The fix is to force EVERY tick (`interval={0}`) and then make the labels fit | |
| // by rotating and truncating them. Forcing the ticks on its own just trades a | |
| // dropped label for an unreadable pile of overlapping ones, so the rotation | |
| // has to be chosen from how many categories there are — hence the tiers below. | |
| // The timeline (timestamp) charts are time series and want none of this. | |
| /** `fontSize` the analytics axes render their ticks at. */ | |
| export const AXIS_FONT_SIZE = 11 | |
| /** | |
| * Average advance width of one glyph at {@link AXIS_FONT_SIZE} in the UI font. | |
| * Deliberately an estimate: this module has to size the axis before layout, so | |
| * it cannot measure. ~0.5em is a good average for lowercase Latin in a | |
| * humanist sans, and provider/agent names are lowercase-heavy. | |
| */ | |
| const CHAR_WIDTH = 5.5 | |
| /** Line box of a single-line tick label — its thickness across the rotation. */ | |
| const LINE_HEIGHT = 13 | |
| /** Gap between the plot edge and the start of the label (tick line + margin). */ | |
| const TICK_GAP = 8 | |
| /** | |
| * Plot width of the narrowest panel we lay out for: the analytics grid is | |
| * `grid-cols-1` under `lg`, so on a phone a chart gets roughly this many | |
| * pixels. Every tier below is sized so its labels still clear each other here, | |
| * which means they clear each other on every wider screen too. | |
| */ | |
| const NARROW_PLOT_WIDTH = 280 | |
| /** Longest label shown in full on a shallow tier; longer ones are elided. */ | |
| export const MAX_AXIS_LABEL = 18 | |
| /** | |
| * Longest label on the steep (-90°) tier. A vertical label spends its whole | |
| * length on the axis height, so an 18-char cap there would eat ~110px of a | |
| * 240px chart. 12 keeps the reserved strip in line with the other tiers. | |
| */ | |
| export const MAX_AXIS_LABEL_STEEP = 12 | |
| const toRadians = (degrees: number) => (Math.abs(degrees) * Math.PI) / 180 | |
| /** Horizontal room one rotated label occupies, i.e. the minimum tick spacing. */ | |
| function bandWidth(angle: number): number { | |
| return LINE_HEIGHT / Math.sin(toRadians(angle)) | |
| } | |
| /** Vertical room a `maxChars`-long label needs once rotated to `angle`. */ | |
| function axisHeight(angle: number, maxChars: number): number { | |
| return Math.ceil(maxChars * CHAR_WIDTH * Math.sin(toRadians(angle))) + TICK_GAP | |
| } | |
| /** How many categories fit at `angle` before the labels start to collide. */ | |
| function categoryCapacity(angle: number): number { | |
| return Math.floor(NARROW_PLOT_WIDTH / bandWidth(angle)) | |
| } | |
| /** | |
| * Shallowest rotation first. A shallower angle is easier to read and costs | |
| * less vertical room; a steeper one packs more categories in. We take the | |
| * first tier that can seat the data, so charts with a handful of providers | |
| * keep the gentle -30° tilt and only crowded ones pay for -45°/-90°. | |
| */ | |
| const TIERS: ReadonlyArray<{ angle: number; maxChars: number }> = [ | |
| { angle: -30, maxChars: MAX_AXIS_LABEL }, | |
| { angle: -45, maxChars: MAX_AXIS_LABEL }, | |
| { angle: -90, maxChars: MAX_AXIS_LABEL_STEEP }, | |
| ] | |
| export interface CategoryAxisProps { | |
| /** Show every category tick instead of letting recharts skip the middle ones. */ | |
| interval: 0 | |
| /** Tilt the labels so long provider names don't collide horizontally. */ | |
| angle: number | |
| /** Anchor rotated labels to their tick. */ | |
| textAnchor: 'end' | |
| /** Vertical room reserved for the (rotated) labels under the plot. */ | |
| height: number | |
| /** Truncate over-long labels so the rotated ticks stay legible. */ | |
| tickFormatter: (value: string) => string | |
| } | |
| /** Truncate `value` to `max` characters, spending the last one on an ellipsis. */ | |
| export function truncateAxisLabel(value: string, max: number = MAX_AXIS_LABEL): string { | |
| if (value.length <= max) return value | |
| return value.slice(0, max - 1) + '…' | |
| } | |
| /** | |
| * The XAxis props that make a horizontal category chart show all of its labels. | |
| * | |
| * @param categoryCount how many bars the chart is about to draw. Callers know | |
| * their own `data.length`; passing it lets the axis pick a rotation that | |
| * still fits. Omitting it assumes the roomiest (shallowest) tier. | |
| */ | |
| export function categoryAxisProps(categoryCount = 0): CategoryAxisProps { | |
| const tier = TIERS.find((t) => categoryCount <= categoryCapacity(t.angle)) ?? TIERS[TIERS.length - 1] | |
| return { | |
| interval: 0, | |
| angle: tier.angle, | |
| textAnchor: 'end', | |
| height: axisHeight(tier.angle, tier.maxChars), | |
| tickFormatter: (value: string) => truncateAxisLabel(value, tier.maxChars), | |
| } | |
| } | |
| /** Width reserved for the category axis of a `layout="vertical"` bar chart. */ | |
| export const VERTICAL_AXIS_WIDTH = 128 | |
| /** Longest label that fits inside {@link VERTICAL_AXIS_WIDTH}. */ | |
| const VERTICAL_MAX_LABEL = Math.min( | |
| MAX_AXIS_LABEL, | |
| Math.floor((VERTICAL_AXIS_WIDTH - TICK_GAP) / CHAR_WIDTH), | |
| ) | |
| export interface VerticalCategoryAxisProps { | |
| /** Show every category tick — 'preserveEnd' drops them here too. */ | |
| interval: 0 | |
| /** Horizontal room reserved for the labels beside the plot. */ | |
| width: number | |
| /** Truncate over-long labels so they stay inside {@link VERTICAL_AXIS_WIDTH}. */ | |
| tickFormatter: (value: string) => string | |
| } | |
| /** | |
| * The YAxis props for a `layout="vertical"` category chart (bars run left to | |
| * right, so the *category* axis is the Y one). Rotation doesn't help here: | |
| * labels sit side-on in their own gutter and are limited by that gutter's | |
| * width, not by the tick spacing. So this is just "show every tick, and keep | |
| * each label short enough to fit the gutter". | |
| */ | |
| export function verticalCategoryAxisProps(): VerticalCategoryAxisProps { | |
| return { | |
| interval: 0, | |
| width: VERTICAL_AXIS_WIDTH, | |
| tickFormatter: (value: string) => truncateAxisLabel(value, VERTICAL_MAX_LABEL), | |
| } | |
| } | |