yukit-web 0.5.1 → 0.6.0

package/fesm2022/yukit-web-chart.mjs

@@ -0,0 +1,650 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import * as i0 from '@angular/core';
+import { signal, inject, DestroyRef, afterNextRender, viewChild, input, booleanAttribute, computed, linkedSignal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { HlmSkeleton } from 'yukit-web/helm/skeleton';
+import { hlm } from 'yukit-web/helm/utils';
+import { area, curveMonotoneX, curveMonotoneY, stack, stackOffsetNone, stackOffsetDiverging, line, pie, arc } from 'd3-shape';
+import { scaleBand, scalePoint, scaleLinear } from 'd3-scale';
+
+/** Every chart token, in palette order. */
+const YUW_CHART_COLORS = [
+    'chart-1',
+    'chart-2',
+    'chart-3',
+    'chart-4',
+    'chart-5',
+    'chart-6',
+    'chart-7',
+    'chart-8',
+];
+/** Color token of the series at `index`, cycling through the palette: builds a config for a dynamic set of series. */
+function yuwChartColorAt(index) {
+    const count = YUW_CHART_COLORS.length;
+    return YUW_CHART_COLORS[((index % count) + count) % count];
+}
+
+/** Average advance of a glyph at the `text-xs` size axis labels use, to reserve room without measuring text. */
+const CHART_CHAR_WIDTH = 7;
+function cssColor(color) {
+    return `var(--${color})`;
+}
+function seriesOf(config) {
+    return Object.entries(config).map(([key, series]) => ({ key, label: series.label, color: cssColor(series.color) }));
+}
+/** A finite number, or `null` for anything else: a missing value is a gap, never a zero. */
+function valueOf(row, key) {
+    const value = row[key];
+    return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+function textWidth(labels) {
+    return labels.reduce((widest, label) => Math.max(widest, label.length), 0) * CHART_CHAR_WIDTH;
+}
+function rectPath(x, y, width, height, radius = 0) {
+    const r = Math.max(0, Math.min(radius, width / 2, height / 2));
+    return (`M${x + r},${y}h${width - 2 * r}a${r},${r} 0 0 1 ${r},${r}v${height - 2 * r}` +
+        `a${r},${r} 0 0 1 ${-r},${r}h${2 * r - width}a${r},${r} 0 0 1 ${-r},${-r}` +
+        `v${2 * r - height}a${r},${r} 0 0 1 ${r},${-r}Z`);
+}
+function emptyScene(table) {
+    return { cursorPaint: 'band', empty: true, grid: [], hits: [], marks: [], origin: { x: 0, y: 0 }, table, ticks: [] };
+}
+
+const LABEL_GAP = 8;
+const AXIS_ROOM = 24;
+const LINE_HEIGHT = 16;
+const MAX_VALUE_TICKS = 5;
+function tickCount(length, room) {
+    return Math.max(2, Math.min(MAX_VALUE_TICKS, Math.floor(length / room)));
+}
+const VERTICAL = {
+    curve: curveMonotoneX,
+    anchor: (plot, category) => ({ x: category, y: (plot.top + plot.bottom) / 2 }),
+    area: (spans) => area()
+        .x((span) => span.category)
+        .y0((span) => span.base)
+        .y1((span) => span.top)
+        .curve(curveMonotoneX)(spans) ?? '',
+    band: (plot, start, end) => rectPath(start, plot.top, end - start, plot.bottom - plot.top),
+    bar: (category, size, base, top, radius) => rectPath(category, Math.min(base, top), size, Math.abs(base - top), radius),
+    categoryLabelChars: () => Number.POSITIVE_INFINITY,
+    categoryLabelRoom: (categoryLabelWidth) => categoryLabelWidth + LABEL_GAP,
+    categoryRange: (plot) => [plot.left, plot.right],
+    categoryTick: (plot, category, label) => ({ anchor: 'middle', label, x: category, y: plot.bottom + AXIS_ROOM - 6 }),
+    cursor: (plot, category) => `M${category},${plot.top}V${plot.bottom}`,
+    grid: (plot, value) => `M${plot.left},${value}H${plot.right}`,
+    margins: (_width, valueLabelWidth) => ({
+        top: LABEL_GAP,
+        right: LABEL_GAP,
+        bottom: AXIS_ROOM,
+        left: valueLabelWidth + LABEL_GAP,
+    }),
+    point: (category, value) => [category, value],
+    valueRange: (plot) => [plot.bottom, plot.top],
+    valueTick: (plot, value, label) => ({ anchor: 'end', label, x: plot.left - LABEL_GAP, y: value }),
+    valueTickCount: (plot) => tickCount(plot.bottom - plot.top, 2 * LINE_HEIGHT),
+};
+const HORIZONTAL = {
+    curve: curveMonotoneY,
+    anchor: (plot, category) => ({ x: plot.right, y: category }),
+    area: (spans) => area()
+        .y((span) => span.category)
+        .x0((span) => span.base)
+        .x1((span) => span.top)
+        .curve(curveMonotoneY)(spans) ?? '',
+    band: (plot, start, end) => rectPath(plot.left, start, plot.right - plot.left, end - start),
+    bar: (category, size, base, top, radius) => rectPath(Math.min(base, top), category, Math.abs(base - top), size, radius),
+    categoryLabelChars: (margins) => Math.max(1, Math.floor((margins.left - LABEL_GAP) / CHART_CHAR_WIDTH)),
+    categoryLabelRoom: () => LINE_HEIGHT,
+    categoryRange: (plot) => [plot.top, plot.bottom],
+    categoryTick: (plot, category, label) => ({ anchor: 'end', label, x: plot.left - LABEL_GAP, y: category }),
+    cursor: (plot, category) => `M${plot.left},${category}H${plot.right}`,
+    grid: (plot, value) => `M${value},${plot.top}V${plot.bottom}`,
+    margins: (width, valueLabelWidth, categoryLabelWidth) => ({
+        top: LABEL_GAP,
+        right: Math.max(LABEL_GAP, valueLabelWidth / 2),
+        bottom: AXIS_ROOM,
+        left: Math.min(categoryLabelWidth, width * 0.4) + LABEL_GAP,
+    }),
+    point: (category, value) => [value, category],
+    valueRange: (plot) => [plot.left, plot.right],
+    valueTick: (plot, value, label) => ({ anchor: 'middle', label, x: value, y: plot.bottom + AXIS_ROOM - 6 }),
+    valueTickCount: (plot, valueLabelWidth) => tickCount(plot.right - plot.left, valueLabelWidth + 2 * LABEL_GAP),
+};
+
+function extentWithZero(values) {
+    const ends = values.flat().flatMap((value) => (value ? [value.base, value.top] : []));
+    const min = Math.min(0, ...ends);
+    const max = Math.max(0, ...ends);
+    return [min, max === min ? min + 1 : max];
+}
+/** Every series starts from zero. */
+const sideBySide = (rows, keys) => {
+    const columns = keys.map((key) => rows.map((row) => {
+        const value = valueOf(row, key);
+        return value === null ? null : { base: 0, top: value, value };
+    }));
+    return { domain: extentWithZero(columns), byKey: new Map(keys.map((key, index) => [key, columns[index]])) };
+};
+/** Each series starts where the previous one ended, following `offset`. */
+function stackedBy(offset) {
+    return (rows, keys) => {
+        const layers = stack()
+            .keys(keys)
+            .value((row, key) => valueOf(row, key) ?? 0)
+            .offset(offset)(rows);
+        const columns = layers.map((layer) => layer.map(([base, top], index) => ({ base, top, value: valueOf(rows[index], layer.key) })));
+        return { domain: extentWithZero(columns), byKey: new Map(keys.map((key, index) => [key, columns[index]])) };
+    };
+}
+/** A continuous stack, so an area keeps its height where a series holds nothing. */
+const stacked = stackedBy(stackOffsetNone);
+/** Positive values stack upwards and negative ones downwards from zero, as bars need. */
+const stackedDiverging = stackedBy(stackOffsetDiverging);
+
+const VALUE_TICKS = 5;
+const BAR_RADIUS = 4;
+/** What highlights the active category: its whole band behind bars, a rule across lines and areas. */
+const CURSORS = {
+    band: (orientation, plot, start, end) => orientation.band(plot, start, end),
+    line: (orientation, plot, _start, _end, center) => orientation.cursor(plot, center),
+};
+/** Categories as bands, so bars have a width. */
+const bands = (count, range) => {
+    const scale = scaleBand().domain(indices(count)).range(range).paddingInner(0.2).paddingOuter(0.1);
+    const starts = indices(count).map((index) => scale(index) ?? 0);
+    return { starts, size: scale.bandwidth(), centers: starts.map((start) => start + scale.bandwidth() / 2) };
+};
+/** Categories as points spanning the whole axis, so lines reach both edges. */
+const points = (count, range) => {
+    const scale = scalePoint().domain(indices(count)).range(range);
+    const centers = indices(count).map((index) => scale(index) ?? 0);
+    return { starts: centers, size: 0, centers };
+};
+/** Bars of every series side by side inside the category band. */
+const groupedBars = {
+    cursor: 'band',
+    points: false,
+    marks: ({ categories, orientation, scale, series, values }) => {
+        const inner = scaleBand()
+            .domain(series.map((item) => item.key))
+            .range([0, categories.size])
+            .padding(0.1);
+        return series.flatMap((item) => barsOf(values, item).map(({ index, value }) => ({
+            color: item.color,
+            d: orientation.bar(categories.starts[index] + (inner(item.key) ?? 0), inner.bandwidth(), scale(value.base), scale(value.top), BAR_RADIUS),
+            hit: index,
+            key: item.key,
+            paint: 'fill',
+        })));
+    },
+};
+/** One bar per category, each series a segment of it. */
+const stackedBars = {
+    cursor: 'band',
+    points: false,
+    marks: ({ categories, orientation, scale, series, values }) => series.flatMap((item) => barsOf(values, item).map(({ index, value }) => ({
+        color: item.color,
+        d: orientation.bar(categories.starts[index], categories.size, scale(value.base), scale(value.top), 0),
+        hit: index,
+        key: item.key,
+        paint: 'fill',
+    }))),
+};
+const lines = {
+    cursor: 'line',
+    points: true,
+    marks: (frame) => frame.series.map((item) => strokeOf(frame, item)),
+};
+/** A translucent band under each series, outlined by its line. */
+const areas = {
+    cursor: 'line',
+    points: true,
+    marks: (frame) => frame.series.flatMap((item) => [
+        {
+            color: item.color,
+            d: frame.orientation.area(spansOf(frame, item)),
+            hit: null,
+            key: item.key,
+            paint: 'area',
+        },
+        strokeOf(frame, item),
+    ]),
+};
+/** A bar, line or area chart: the categories along one axis, the values along the other. */
+function cartesianLayout(options) {
+    return (input) => {
+        const series = seriesOf(input.config);
+        const table = tableOf$1(input, series);
+        if (input.data.length === 0 || series.length === 0) {
+            return emptyScene(table);
+        }
+        return sceneOf(options, input, series, table);
+    };
+}
+function sceneOf(options, input, series, table) {
+    const { orientation } = options;
+    const values = options.values(input.data, series.map((item) => item.key));
+    const value = scaleLinear().domain(values.domain).nice();
+    const labelWidth = textWidth(value.ticks(VALUE_TICKS).map((tick) => input.valueFormat(tick)));
+    const titles = input.data.map((row) => titleOf(input, row));
+    const margins = orientation.margins(input.width, labelWidth, textWidth(titles));
+    const plot = {
+        top: margins.top,
+        left: margins.left,
+        right: Math.max(margins.left + 1, input.width - margins.right),
+        bottom: Math.max(margins.top + 1, input.height - margins.bottom),
+    };
+    const tickCount = orientation.valueTickCount(plot, labelWidth);
+    const candidates = value.ticks(tickCount);
+    const tickValues = candidates.filter((_tick, index) => index % Math.ceil(candidates.length / tickCount) === 0);
+    const valueLabels = tickValues.map((tick) => input.valueFormat(tick));
+    const scale = value.range(orientation.valueRange(plot));
+    const range = orientation.categoryRange(plot);
+    const categories = options.categories(input.data.length, range);
+    const frame = { categories, orientation, scale, series, values };
+    const boundaries = boundariesOf(categories.centers, range);
+    return {
+        cursorPaint: options.marks.cursor,
+        empty: false,
+        grid: tickValues.map((tick) => orientation.grid(plot, scale(tick))),
+        hits: categories.centers.map((center, index) => ({
+            anchor: orientation.anchor(plot, center),
+            cursor: CURSORS[options.marks.cursor](orientation, plot, boundaries[index], boundaries[index + 1], center),
+            d: orientation.band(plot, boundaries[index], boundaries[index + 1]),
+            points: options.marks.points ? pointsOf(frame, index) : [],
+            tooltip: tooltipOf(input, series, values, index, titles[index]),
+        })),
+        marks: options.marks.marks(frame),
+        origin: { x: 0, y: 0 },
+        table,
+        ticks: [
+            ...tickValues.map((tick, index) => orientation.valueTick(plot, scale(tick), valueLabels[index])),
+            ...categoryTicksOf(orientation, plot, margins, categories.centers, range, titles),
+        ],
+    };
+}
+function categoryTicksOf(orientation, plot, margins, centers, range, titles) {
+    const step = Math.abs(range[1] - range[0]) / Math.max(1, centers.length);
+    const every = Math.max(1, Math.ceil(orientation.categoryLabelRoom(textWidth(titles)) / Math.max(step, 1)));
+    const chars = orientation.categoryLabelChars(margins);
+    return centers
+        .map((center, index) => orientation.categoryTick(plot, center, truncate(titles[index], chars)))
+        .filter((_tick, index) => index % every === 0);
+}
+function pointsOf({ categories, orientation, scale, series, values }, index) {
+    return series.flatMap((item) => {
+        const value = values.byKey.get(item.key)?.[index];
+        if (!value || value.value === null) {
+            return [];
+        }
+        const [cx, cy] = orientation.point(categories.centers[index], scale(value.top));
+        return [{ color: item.color, cx, cy, key: item.key }];
+    });
+}
+function strokeOf({ categories, orientation, scale, values }, item) {
+    const coordinates = (values.byKey.get(item.key) ?? []).map((value, index) => value ? orientation.point(categories.centers[index], scale(value.top)) : null);
+    const path = line()
+        .defined((point) => point !== null)
+        .x((point) => point?.[0] ?? 0)
+        .y((point) => point?.[1] ?? 0)
+        .curve(orientation.curve);
+    return { color: item.color, d: path(coordinates) ?? '', hit: null, key: item.key, paint: 'stroke' };
+}
+function spansOf({ categories, scale, values }, item) {
+    return (values.byKey.get(item.key) ?? []).flatMap((value, index) => value ? [{ base: scale(value.base), category: categories.centers[index], top: scale(value.top) }] : []);
+}
+function barsOf(values, item) {
+    return (values.byKey.get(item.key) ?? []).flatMap((value, index) => value && value.value !== null && value.base !== value.top ? [{ index, value }] : []);
+}
+function tooltipOf(input, series, values, index, title) {
+    return {
+        title: input.categoryKey === undefined ? null : title,
+        items: series.flatMap((item) => {
+            const value = values.byKey.get(item.key)?.[index]?.value ?? null;
+            return value === null
+                ? []
+                : [{ color: item.color, key: item.key, label: item.label, value: input.valueFormat(value) }];
+        }),
+    };
+}
+function tableOf$1(input, series) {
+    return {
+        corner: input.categoryLabel ?? '',
+        head: series.map((item) => item.label),
+        rows: input.data.map((row) => ({
+            header: titleOf(input, row),
+            cells: series.map((item) => {
+                const value = valueOf(row, item.key);
+                return value === null ? '' : input.valueFormat(value);
+            }),
+        })),
+    };
+}
+function titleOf(input, row) {
+    return input.categoryKey === undefined ? '' : input.categoryFormat(row[input.categoryKey]);
+}
+/** Edges between consecutive categories, so every pixel of the axis activates the nearest one. */
+function boundariesOf(centers, range) {
+    const middles = centers.slice(1).map((center, index) => (centers[index] + center) / 2);
+    return [range[0], ...middles, range[1]];
+}
+function truncate(label, chars) {
+    return label.length > chars ? `${label.slice(0, Math.max(1, chars - 1))}…` : label;
+}
+function indices(count) {
+    return Array.from({ length: count }, (_, index) => index);
+}
+
+const EDGE = 4;
+/** One slice per series, sized by its value summed across every row. */
+function pieLayout(options) {
+    return (input) => {
+        const slices = slicesOf(input);
+        const table = tableOf(input, slices);
+        const shown = slices.filter((slice) => slice.total > 0);
+        if (shown.length === 0) {
+            return emptyScene(table);
+        }
+        const radius = Math.max(1, Math.min(input.width, input.height) / 2 - EDGE);
+        const centerX = input.width / 2;
+        const centerY = input.height / 2;
+        const arcs = pie()
+            .sort(null)
+            .value((slice) => slice.total)(shown);
+        const shape = arc()
+            .innerRadius(radius * options.hole)
+            .outerRadius(radius)
+            .padAngle(options.hole > 0 ? 0.01 : 0)
+            .cornerRadius(options.hole > 0 ? 3 : 0);
+        const paths = arcs.map((datum) => shape(datum) ?? '');
+        return {
+            cursorPaint: 'band',
+            empty: false,
+            grid: [],
+            origin: { x: centerX, y: centerY },
+            hits: arcs.map((datum, index) => {
+                const [x, y] = shape.centroid(datum);
+                return {
+                    anchor: { x: centerX + x, y: centerY + y },
+                    cursor: null,
+                    d: paths[index],
+                    points: [],
+                    tooltip: {
+                        title: null,
+                        items: [
+                            {
+                                color: datum.data.color,
+                                key: datum.data.key,
+                                label: datum.data.label,
+                                value: input.valueFormat(datum.data.total),
+                            },
+                        ],
+                    },
+                };
+            }),
+            marks: arcs.map((datum, index) => ({
+                color: datum.data.color,
+                d: paths[index],
+                hit: index,
+                key: datum.data.key,
+                paint: 'fill',
+            })),
+            table,
+            ticks: [],
+        };
+    };
+}
+function slicesOf(input) {
+    return seriesOf(input.config).map((series) => ({
+        ...series,
+        total: input.data.reduce((sum, row) => sum + Math.max(0, valueOf(row, series.key) ?? 0), 0),
+    }));
+}
+function tableOf(input, slices) {
+    return {
+        corner: null,
+        head: slices.map((slice) => slice.label),
+        rows: input.data.length === 0 ? [] : [{ header: null, cells: slices.map((slice) => input.valueFormat(slice.total)) }],
+    };
+}
+
+/** The layout drawing each chart kind. A new kind is one entry here, built from the same parts. */
+const YUW_CHART_LAYOUTS = {
+    area: cartesianLayout({ categories: points, marks: areas, orientation: VERTICAL, values: sideBySide }),
+    'area-stacked': cartesianLayout({ categories: points, marks: areas, orientation: VERTICAL, values: stacked }),
+    bar: cartesianLayout({ categories: bands, marks: groupedBars, orientation: VERTICAL, values: sideBySide }),
+    'bar-horizontal': cartesianLayout({
+        categories: bands,
+        marks: groupedBars,
+        orientation: HORIZONTAL,
+        values: sideBySide,
+    }),
+    'bar-horizontal-stacked': cartesianLayout({
+        categories: bands,
+        marks: stackedBars,
+        orientation: HORIZONTAL,
+        values: stackedDiverging,
+    }),
+    'bar-stacked': cartesianLayout({
+        categories: bands,
+        marks: stackedBars,
+        orientation: VERTICAL,
+        values: stackedDiverging,
+    }),
+    donut: pieLayout({ hole: 0.6 }),
+    line: cartesianLayout({ categories: points, marks: lines, orientation: VERTICAL, values: sideBySide }),
+    pie: pieLayout({ hole: 0 }),
+};
+
+const UNMEASURED = { height: 0, width: 0 };
+/**
+ * Tracks the content box of `element` as a signal. Stays at zero on the server and wherever `ResizeObserver` is
+ * missing, so nothing is drawn until there is a real box to draw into. Must be called in an injection context.
+ */
+function injectChartSize(element) {
+    const size = signal(UNMEASURED, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), equal: (a, b) => a.width === b.width && a.height === b.height });
+    const destroyRef = inject(DestroyRef);
+    afterNextRender(() => {
+        const target = element()?.nativeElement;
+        if (!target || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(([entry]) => size.set({ width: Math.floor(entry.contentRect.width), height: Math.floor(entry.contentRect.height) }));
+        observer.observe(target);
+        destroyRef.onDestroy(() => observer.disconnect());
+    });
+    return size.asReadonly();
+}
+
+/** Classes of each kind of mark; the color arrives separately, as a `var(--chart-n)` style. */
+const MARK_CLASS = {
+    area: 'opacity-30',
+    fill: 'stroke-background stroke-1 motion-safe:transition-opacity motion-safe:duration-150',
+    stroke: 'fill-none stroke-2',
+};
+/** Which style property carries the color of each kind of mark. */
+const MARK_COLOR_PROPERTY = {
+    area: 'fill',
+    fill: 'fill',
+    stroke: 'stroke',
+};
+const MARK_DIMMED_CLASS = 'opacity-40';
+const CURSOR_CLASS = {
+    band: 'fill-muted',
+    line: 'fill-none stroke-border stroke-1',
+};
+/** Which side of its anchor the tooltip opens to, so it stays inside the plot. */
+const TOOLTIP_SIDE_CLASS = {
+    left: '-translate-x-[calc(100%+0.75rem)]',
+    right: 'translate-x-3',
+};
+/** What each key does to the active position, given it and how many there are; `null` hides the tooltip. */
+const KEY_MOVES = {
+    ArrowDown: (active, count) => Math.min(active + 1, count - 1),
+    ArrowLeft: (active) => Math.max(active - 1, 0),
+    ArrowRight: (active, count) => Math.min(active + 1, count - 1),
+    ArrowUp: (active) => Math.max(active - 1, 0),
+    End: (_active, count) => count - 1,
+    Escape: () => null,
+    Home: () => 0,
+};
+
+/**
+ * Chart drawn as SVG from a series `config` and `data` rows, with a tooltip and a legend that read the same config.
+ *
+ * Every series is a key of `config` naming the row field that holds its values, plus its label (already translated)
+ * and a `chart-n` color token, so light and dark mode recolor through the theme with no redraw. `kind` picks the
+ * drawing: bars (grouped, stacked, horizontal), lines, areas, or a pie / donut with one slice per series summed across
+ * the rows. The chart fills its root element and redraws when it resizes; size it with `class` (default `h-72`).
+ *
+ * The pointer and the keyboard (focus the plot, then the arrow keys, Home, End and Escape) move a tooltip across the
+ * categories or slices, announced politely to screen readers. The same numbers are always available to assistive
+ * technology as a visually hidden table, which also renders on the server, where the plot is not drawn.
+ *
+ * The library hardcodes no locale: `valueFormat` and `categoryFormat` turn values and categories into text.
+ *
+ * Inputs:
+ * - `ariaLabel`: Required accessible name of the chart, e.g. its title. The app supplies and translates it.
+ * - `categoryFormat`: Turns the value under `categoryKey` into its label. Cartesian kinds only. Default is `String`.
+ * - `categoryKey`: Row field holding each category, e.g. the period. Cartesian kinds only. Default is `undefined`.
+ * - `categoryLabel`: Header of the category column in the accessible table, e.g. "Month". Cartesian kinds only.
+ *   Default is `undefined`.
+ * - `config`: Required series, keyed by the row field holding their values (`YuwChartConfigDto`). Its order is the
+ *   drawing, stacking, legend and tooltip order.
+ * - `data`: Required rows (`YuwChartRowDto[]`). A non-numeric value is a gap, never a zero.
+ * - `description`: Accessible description, e.g. the period the chart covers. Default is `undefined`.
+ * - `emptyText`: Required message shown when there is nothing to draw. The app supplies and translates it.
+ * - `kind`: The drawing (`YuwChartKindDto`). Default is `'bar'`.
+ * - `legend`: Shows the legend under the plot. Default is `true`.
+ * - `loading`: Shows a skeleton instead of the plot and marks the chart busy. Default is `false`.
+ * - `valueFormat`: Turns a value into the text of axes, tooltips and the accessible table, e.g. a localized currency.
+ *   Default is `String`.
+ * - `class`: Extra classes merged last onto the root element; set its height here.
+ *
+ * Usage:
+ * ```html
+ * <yuw-chart
+ *   kind="bar-stacked"
+ *   ariaLabel="Purchases per month"
+ *   emptyText="No purchases in this period"
+ *   categoryKey="month"
+ *   categoryLabel="Month"
+ *   [config]="config"
+ *   [data]="rows"
+ *   [valueFormat]="formatEuros"
+ *   class="h-80"
+ * />
+ * ```
+ */
+class YuwChartComponent {
+    constructor() {
+        this._id = inject(_IdGenerator).getId('yuw-chart-');
+        this._plot = viewChild('plot', ...(ngDevMode ? [{ debugName: "_plot" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.categoryFormat = input(String, ...(ngDevMode ? [{ debugName: "categoryFormat" }] : /* istanbul ignore next */ []));
+        this.categoryKey = input(...(ngDevMode ? [undefined, { debugName: "categoryKey" }] : /* istanbul ignore next */ []));
+        this.categoryLabel = input(...(ngDevMode ? [undefined, { debugName: "categoryLabel" }] : /* istanbul ignore next */ []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+        this.emptyText = input.required(...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+        this.kind = input('bar', ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+        this.legend = input(true, { ...(ngDevMode ? { debugName: "legend" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this.valueFormat = input(String, ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+        this.descriptionId = `${this._id}-description`;
+        this.size = injectChartSize(this._plot);
+        this.scene = computed(() => YUW_CHART_LAYOUTS[this.kind()]({
+            categoryFormat: this.categoryFormat(),
+            categoryKey: this.categoryKey(),
+            categoryLabel: this.categoryLabel(),
+            config: this.config(),
+            data: this.data(),
+            height: this.size().height,
+            valueFormat: this.valueFormat(),
+            width: this.size().width,
+        }), ...(ngDevMode ? [{ debugName: "scene" }] : /* istanbul ignore next */ []));
+        this.active = linkedSignal({ ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), source: this.scene, computation: () => null });
+        this.activeHit = computed(() => {
+            const active = this.active();
+            return active === null ? null : (this.scene().hits[active] ?? null);
+        }, ...(ngDevMode ? [{ debugName: "activeHit" }] : /* istanbul ignore next */ []));
+        this.activePoints = computed(() => this.activeHit()?.points ?? [], ...(ngDevMode ? [{ debugName: "activePoints" }] : /* istanbul ignore next */ []));
+        this.announcement = computed(() => {
+            const tooltip = this.activeHit()?.tooltip;
+            if (!tooltip) {
+                return '';
+            }
+            return [tooltip.title, ...tooltip.items.map((item) => `${item.label}: ${item.value}`)]
+                .filter((part) => !!part)
+                .join(', ');
+        }, ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        this.cursorClass = computed(() => CURSOR_CLASS[this.scene().cursorPaint], ...(ngDevMode ? [{ debugName: "cursorClass" }] : /* istanbul ignore next */ []));
+        this.describedBy = computed(() => (this.description() ? this.descriptionId : null), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+        this.drawable = computed(() => this.size().width > 0 && this.size().height > 0, ...(ngDevMode ? [{ debugName: "drawable" }] : /* istanbul ignore next */ []));
+        this.interactive = computed(() => !this.loading() && this.scene().hits.length > 0, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+        this.legendItems = computed(() => Object.entries(this.config()).map(([key, series]) => ({ key, label: series.label, color: cssColor(series.color) })), ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
+        this.marks = computed(() => {
+            const active = this.active();
+            return this.scene().marks.map((mark) => ({
+                d: mark.d,
+                key: mark.key,
+                class: hlm(MARK_CLASS[mark.paint], active !== null && mark.hit !== null && mark.hit !== active && MARK_DIMMED_CLASS),
+                style: { [MARK_COLOR_PROPERTY[mark.paint]]: mark.color },
+            }));
+        }, ...(ngDevMode ? [{ debugName: "marks" }] : /* istanbul ignore next */ []));
+        this.origin = computed(() => `translate(${this.scene().origin.x},${this.scene().origin.y})`, ...(ngDevMode ? [{ debugName: "origin" }] : /* istanbul ignore next */ []));
+        this.rootClass = computed(() => hlm('flex h-72 w-full flex-col gap-3', this.userClass()), ...(ngDevMode ? [{ debugName: "rootClass" }] : /* istanbul ignore next */ []));
+        this.showLegend = computed(() => this.legend() && !this.loading() && !this.scene().empty, ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
+        this.tooltip = computed(() => {
+            const hit = this.activeHit();
+            if (!hit || hit.tooltip.items.length === 0) {
+                return null;
+            }
+            return {
+                ...hit.tooltip,
+                left: hit.anchor.x,
+                top: hit.anchor.y,
+                class: TOOLTIP_SIDE_CLASS[hit.anchor.x > this.size().width / 2 ? 'left' : 'right'],
+            };
+        }, ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+        this.viewBox = computed(() => `0 0 ${this.size().width} ${this.size().height}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    }
+    activate(index) {
+        this.active.set(index);
+    }
+    clear() {
+        this.active.set(null);
+    }
+    onFocus(event) {
+        const target = event.target;
+        if (this.active() === null && target.matches(':focus-visible')) {
+            this.active.set(0);
+        }
+    }
+    onKeydown(event) {
+        const move = KEY_MOVES[event.key];
+        const count = this.scene().hits.length;
+        if (!move || count === 0) {
+            return;
+        }
+        event.preventDefault();
+        this.active.set(move(this.active() ?? -1, count));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwChartComponent, isStandalone: true, selector: "yuw-chart", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, categoryFormat: { classPropertyName: "categoryFormat", publicName: "categoryFormat", isSignal: true, isRequired: false, transformFunction: null }, categoryKey: { classPropertyName: "categoryKey", publicName: "categoryKey", isSignal: true, isRequired: false, transformFunction: null }, categoryLabel: { classPropertyName: "categoryLabel", publicName: "categoryLabel", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: true, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, viewQueries: [{ propertyName: "_plot", first: true, predicate: ["plot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div role=\"figure\" [class]=\"rootClass()\" [attr.aria-label]=\"ariaLabel()\" [attr.aria-busy]=\"loading() || null\">\n  @if (description(); as text) {\n    <p class=\"sr-only\" [id]=\"descriptionId\">{{ text }}</p>\n  }\n\n  <!-- Plot -->\n  <div\n    #plot\n    role=\"group\"\n    class=\"relative min-h-0 flex-1 rounded-md outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.tabindex]=\"interactive() ? 0 : null\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"clear()\"\n    (keydown)=\"onKeydown($event)\"\n    (pointerleave)=\"clear()\"\n  >\n    @if (loading()) {\n      <div hlmSkeleton class=\"size-full\" aria-hidden=\"true\"></div>\n    } @else if (scene().empty) {\n      <div class=\"flex size-full items-center justify-center text-center text-sm text-muted-foreground\">\n        {{ emptyText() }}\n      </div>\n    } @else if (drawable()) {\n      <svg\n        aria-hidden=\"true\"\n        class=\"absolute inset-0 overflow-visible\"\n        [attr.width]=\"size().width\"\n        [attr.height]=\"size().height\"\n        [attr.viewBox]=\"viewBox()\"\n      >\n        @for (line of scene().grid; track $index) {\n          <path class=\"fill-none stroke-border [stroke-dasharray:3_3]\" [attr.d]=\"line\" />\n        }\n\n        @if (activeHit()?.cursor; as cursor) {\n          <path [class]=\"cursorClass()\" [attr.d]=\"cursor\" />\n        }\n\n        <g [attr.transform]=\"origin()\">\n          @for (mark of marks(); track $index) {\n            <path [class]=\"mark.class\" [style]=\"mark.style\" [attr.d]=\"mark.d\" />\n          }\n        </g>\n\n        @for (point of activePoints(); track point.key) {\n          <circle\n            r=\"4\"\n            class=\"stroke-background stroke-2\"\n            [style.fill]=\"point.color\"\n            [attr.cx]=\"point.cx\"\n            [attr.cy]=\"point.cy\"\n          />\n        }\n\n        @for (tick of scene().ticks; track $index) {\n          <text\n            dominant-baseline=\"middle\"\n            class=\"fill-muted-foreground text-xs\"\n            [attr.x]=\"tick.x\"\n            [attr.y]=\"tick.y\"\n            [attr.text-anchor]=\"tick.anchor\"\n          >\n            {{ tick.label }}\n          </text>\n        }\n\n        <g [attr.transform]=\"origin()\">\n          @for (hit of scene().hits; track $index) {\n            <path class=\"fill-transparent\" [attr.d]=\"hit.d\" (pointerenter)=\"activate($index)\" />\n          }\n        </g>\n      </svg>\n\n      @if (tooltip(); as tip) {\n        <div\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute z-10 grid min-w-32 -translate-y-1/2 gap-1.5 rounded-md border bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-md motion-safe:transition-[left,top] motion-safe:duration-150\"\n          [class]=\"tip.class\"\n          [style.left.px]=\"tip.left\"\n          [style.top.px]=\"tip.top\"\n        >\n          @if (tip.title) {\n            <span class=\"font-medium\">{{ tip.title }}</span>\n          }\n          @for (item of tip.items; track item.key) {\n            <span class=\"flex items-center gap-2\">\n              <span class=\"size-2.5 shrink-0 rounded-[2px]\" [style.background]=\"item.color\"></span>\n              <span class=\"text-muted-foreground\">{{ item.label }}</span>\n              <span class=\"ml-auto font-mono font-medium tabular-nums\">{{ item.value }}</span>\n            </span>\n          }\n        </div>\n      }\n    }\n\n    <div role=\"status\" class=\"sr-only\">{{ announcement() }}</div>\n  </div>\n\n  <!-- Legend -->\n  @if (showLegend()) {\n    <ul class=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-muted-foreground\">\n      @for (item of legendItems(); track item.key) {\n        <li class=\"flex items-center gap-1.5\">\n          <span aria-hidden=\"true\" class=\"size-2.5 shrink-0 rounded-[2px]\" [style.background]=\"item.color\"></span>\n          {{ item.label }}\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Accessible data -->\n  <table class=\"sr-only\">\n    <caption>\n      {{ ariaLabel() }}\n    </caption>\n    <thead>\n      <tr>\n        @if (scene().table.corner !== null) {\n          <th scope=\"col\">{{ scene().table.corner }}</th>\n        }\n        @for (head of scene().table.head; track $index) {\n          <th scope=\"col\">{{ head }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of scene().table.rows; track $index) {\n        <tr>\n          @if (row.header !== null) {\n            <th scope=\"row\">{{ row.header }}</th>\n          }\n          @for (cell of row.cells; track $index) {\n            <td>{{ cell }}</td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: HlmSkeleton, selector: "[hlmSkeleton],hlm-skeleton" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-chart', imports: [HlmSkeleton], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"figure\" [class]=\"rootClass()\" [attr.aria-label]=\"ariaLabel()\" [attr.aria-busy]=\"loading() || null\">\n  @if (description(); as text) {\n    <p class=\"sr-only\" [id]=\"descriptionId\">{{ text }}</p>\n  }\n\n  <!-- Plot -->\n  <div\n    #plot\n    role=\"group\"\n    class=\"relative min-h-0 flex-1 rounded-md outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.tabindex]=\"interactive() ? 0 : null\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"clear()\"\n    (keydown)=\"onKeydown($event)\"\n    (pointerleave)=\"clear()\"\n  >\n    @if (loading()) {\n      <div hlmSkeleton class=\"size-full\" aria-hidden=\"true\"></div>\n    } @else if (scene().empty) {\n      <div class=\"flex size-full items-center justify-center text-center text-sm text-muted-foreground\">\n        {{ emptyText() }}\n      </div>\n    } @else if (drawable()) {\n      <svg\n        aria-hidden=\"true\"\n        class=\"absolute inset-0 overflow-visible\"\n        [attr.width]=\"size().width\"\n        [attr.height]=\"size().height\"\n        [attr.viewBox]=\"viewBox()\"\n      >\n        @for (line of scene().grid; track $index) {\n          <path class=\"fill-none stroke-border [stroke-dasharray:3_3]\" [attr.d]=\"line\" />\n        }\n\n        @if (activeHit()?.cursor; as cursor) {\n          <path [class]=\"cursorClass()\" [attr.d]=\"cursor\" />\n        }\n\n        <g [attr.transform]=\"origin()\">\n          @for (mark of marks(); track $index) {\n            <path [class]=\"mark.class\" [style]=\"mark.style\" [attr.d]=\"mark.d\" />\n          }\n        </g>\n\n        @for (point of activePoints(); track point.key) {\n          <circle\n            r=\"4\"\n            class=\"stroke-background stroke-2\"\n            [style.fill]=\"point.color\"\n            [attr.cx]=\"point.cx\"\n            [attr.cy]=\"point.cy\"\n          />\n        }\n\n        @for (tick of scene().ticks; track $index) {\n          <text\n            dominant-baseline=\"middle\"\n            class=\"fill-muted-foreground text-xs\"\n            [attr.x]=\"tick.x\"\n            [attr.y]=\"tick.y\"\n            [attr.text-anchor]=\"tick.anchor\"\n          >\n            {{ tick.label }}\n          </text>\n        }\n\n        <g [attr.transform]=\"origin()\">\n          @for (hit of scene().hits; track $index) {\n            <path class=\"fill-transparent\" [attr.d]=\"hit.d\" (pointerenter)=\"activate($index)\" />\n          }\n        </g>\n      </svg>\n\n      @if (tooltip(); as tip) {\n        <div\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute z-10 grid min-w-32 -translate-y-1/2 gap-1.5 rounded-md border bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-md motion-safe:transition-[left,top] motion-safe:duration-150\"\n          [class]=\"tip.class\"\n          [style.left.px]=\"tip.left\"\n          [style.top.px]=\"tip.top\"\n        >\n          @if (tip.title) {\n            <span class=\"font-medium\">{{ tip.title }}</span>\n          }\n          @for (item of tip.items; track item.key) {\n            <span class=\"flex items-center gap-2\">\n              <span class=\"size-2.5 shrink-0 rounded-[2px]\" [style.background]=\"item.color\"></span>\n              <span class=\"text-muted-foreground\">{{ item.label }}</span>\n              <span class=\"ml-auto font-mono font-medium tabular-nums\">{{ item.value }}</span>\n            </span>\n          }\n        </div>\n      }\n    }\n\n    <div role=\"status\" class=\"sr-only\">{{ announcement() }}</div>\n  </div>\n\n  <!-- Legend -->\n  @if (showLegend()) {\n    <ul class=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-muted-foreground\">\n      @for (item of legendItems(); track item.key) {\n        <li class=\"flex items-center gap-1.5\">\n          <span aria-hidden=\"true\" class=\"size-2.5 shrink-0 rounded-[2px]\" [style.background]=\"item.color\"></span>\n          {{ item.label }}\n        </li>\n      }\n    </ul>\n  }\n\n  <!-- Accessible data -->\n  <table class=\"sr-only\">\n    <caption>\n      {{ ariaLabel() }}\n    </caption>\n    <thead>\n      <tr>\n        @if (scene().table.corner !== null) {\n          <th scope=\"col\">{{ scene().table.corner }}</th>\n        }\n        @for (head of scene().table.head; track $index) {\n          <th scope=\"col\">{{ head }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of scene().table.rows; track $index) {\n        <tr>\n          @if (row.header !== null) {\n            <th scope=\"row\">{{ row.header }}</th>\n          }\n          @for (cell of row.cells; track $index) {\n            <td>{{ cell }}</td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n" }]
+        }], propDecorators: { _plot: [{ type: i0.ViewChild, args: ['plot', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], categoryFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryFormat", required: false }] }], categoryKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryKey", required: false }] }], categoryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryLabel", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: true }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { YUW_CHART_COLORS, YuwChartComponent, yuwChartColorAt };
+//# sourceMappingURL=yukit-web-chart.mjs.map