Chart Bar Halftone

1"use client";
2 
3import { useEffect, useId, useMemo, useState } from "react";
4import type { CSSProperties } from "react";
5 
6// ---------------------------------------------------------------------------
7// ChartBarHalftone — the dithered-chart family's bar chart. Bar fills are not
8// flat color: each bar is a plate stamped with the SAME 4x4 Bayer matrix used
9// by background-ascii-dither and ascii-engraving-contour elsewhere in this
10// suite (the family's shared ordered-dither ramp — 17 discrete ink levels,
11// 0 = empty, 16 = solid), so a bar's height is redundant with its own ink
12// density: cover one channel and the other still carries the value. Density
13// is the family's only value channel — pure var(--foreground) ink on
14// var(--background) paper, no --accent in the data itself, exactly like
15// heatmap-year-stipple's choice. --accent is reserved for keyboard focus,
16// same convention as every other component in the suite.
17//
18// Bars are SVG paths filled with `url(#pattern)`, one pattern per ink level,
19// so var(--foreground)/var(--background)/var(--border) resolve as ordinary
20// CSS custom properties on presentation attributes — no canvas, no
21// getComputedStyle, no theme MutationObserver: the browser's own cascade
22// repaints both themes correctly on toggle for free.
23// ---------------------------------------------------------------------------
24 
25export interface ChartBarHalftoneDatum {
26  label: string;
27  value: number;
28}
29 
30export interface ChartBarHalftoneProps {
31  data?: ChartBarHalftoneDatum[];
32  /** chart title, used as the figure's accessible name and table caption */
33  title?: string;
34  className?: string;
35}
36 
37// 4x4 Bayer matrix — the family's shared dither constant, raw 0..15 ints
38const BAYER = [0, 8, 2, 10, 12, 4, 14, 6, 3, 11, 1, 9, 15, 7, 13, 5];
39const LEVELS = 16; // 17 discrete steps, 0..16
40const CELL = 4; // px per dither cell, shared pattern tile is 4x4 cells
41 
42const BAR_W = 22; // <=24px per the mark spec
43const SLOT_W = 58;
44const PLOT_H = 220;
45const TOP_PAD = 34; // room for the tip label above the tallest bar
46const AXIS_H = 8;
47const LABEL_H = 22;
48const LEFT_PAD = 12;
49const RIGHT_PAD = 12;
50 
51function levelFor(norm: number): number {
52  return Math.round(Math.min(1, Math.max(0, norm)) * LEVELS);
53}
54 
55function formatValue(v: number): string {
56  const abs = Math.abs(v);
57  if (abs >= 1_000_000) return `${(v / 1_000_000).toFixed(1).replace(/\.0$/, "")}M`;
58  if (abs >= 1_000) return `${(v / 1_000).toFixed(1).replace(/\.0$/, "")}K`;
59// … truncated