@scalewing/react 1.38.0 → 1.39.0

package/dist/components/ColumnChart.js

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatBarChartValue } from '@scalewing/tokens';
+import { forwardRef, useImperativeHandle, useRef, } from 'react';
+import { cx } from '../class-names.js';
+import { columnChartModes, } from '../column-chart-bars.js';
+import { assertColumnChartInput, } from '../column-chart-input.js';
+import { columnChartLayout } from '../column-chart-layout.js';
+import { ChartTable } from './chart/ChartTable.js';
+import { useChartWidth } from './chart/use-chart-width.js';
+import { ChartCalloutList } from './column-chart/ChartCalloutList.js';
+import { ColumnChartDrawing } from './column-chart/ColumnChartDrawing.js';
+export { columnChartModes };
+const noCallouts = [];
+/**
+ * Columns for each category (a week, a month), stacked or grouped by
+ * series, with an optional line on its own right-hand scale whose zero
+ * and grid lines are level with the columns', the current period boxed
+ * and callouts pinned above their columns. It fills its container's width
+ * and is laid out for it: a narrow chart labels fewer categories and lists
+ * its callouts under the plot, never scrolling sideways. The drawing is
+ * hidden from assistive technology; a visually hidden table named by
+ * `label` carries every figure, and the callouts stay a list. Put it on
+ * the surface (a `Card`) with a `ChartLegend` above it naming each series
+ * (`bar` in its tone), the line (`line`, `accent`) and the box (`box`,
+ * `accent`). Input it cannot draw throws a `RangeError`.
+ */
+export const ColumnChart = forwardRef(function ColumnChart({ callouts = noCallouts, categories, className, formatTick, formatValue = formatBarChartValue, highlight, label, line, mode = 'stacked', series, ...rest }, ref) {
+    assertColumnChartInput({
+        label,
+        categories,
+        series,
+        mode,
+        line,
+        highlight,
+        callouts,
+    });
+    const box = useRef(null);
+    useImperativeHandle(ref, () => box.current, []);
+    const width = useChartWidth(box);
+    const lastLineValue = line?.values.at(-1);
+    const layout = columnChartLayout({
+        width,
+        categories,
+        series: series.map((s) => s.values),
+        mode,
+        line: line
+            ? {
+                values: line.values,
+                endLabel: line.endLabel === false || lastLineValue === undefined
+                    ? null
+                    : formatValue(lastLineValue),
+            }
+            : null,
+        highlight: highlight ?? null,
+        callouts,
+        formatTick: formatTick ?? formatValue,
+    });
+    return (_jsxs("div", { ref: box, className: cx('sw-chart', className), ...rest, children: [_jsx(ColumnChartDrawing, { calloutTones: callouts.map((callout) => callout.tone), layout: layout, tones: series.map((s) => s.tone) }), _jsx(ChartTable, { caption: label, columns: [
+                    ...series.map((s) => s.label),
+                    ...(line ? [line.label] : []),
+                ], rows: categories.map((category, index) => ({
+                    key: `${category}-${index}`,
+                    header: category,
+                    cells: [
+                        ...series.map((s) => formatValue(s.values[index])),
+                        ...(line ? [formatValue(line.values[index])] : []),
+                    ],
+                    current: index === highlight,
+                })) }), _jsx(ChartCalloutList, { callouts: callouts, visible: layout.compact })] }));
+});

package/dist/components/DataBar.d.ts

@@ -13,9 +13,9 @@ export type DataBarProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'a
     max: number;
     /**
      * What the bar means (default `neutral`): `success` for money in,
-     * `muted` for money out (an outflow is not an error, so there is no
-     * danger tone), `strong` for a subtotal and `accent` for a counted or
-     * recorded figure.
+     * `muted` for money out (an outflow is not an error, so it is never
+     * danger), `strong` for a subtotal, `accent` for a counted or recorded
+     * figure and `danger` for a shortage, never for cash leaving.
      */
     tone?: DataBarTone;
 };
@@ -40,9 +40,9 @@ export declare const DataBar: import("react").ForwardRefExoticComponent<Omit<HTM
     max: number;
     /**
      * What the bar means (default `neutral`): `success` for money in,
-     * `muted` for money out (an outflow is not an error, so there is no
-     * danger tone), `strong` for a subtotal and `accent` for a counted or
-     * recorded figure.
+     * `muted` for money out (an outflow is not an error, so it is never
+     * danger), `strong` for a subtotal, `accent` for a counted or recorded
+     * figure and `danger` for a shortage, never for cash leaving.
      */
     tone?: DataBarTone;
 } & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/LineChart.d.ts

@@ -0,0 +1,83 @@
+import { type HTMLAttributes } from 'react';
+import { type ChartStrokeTone } from '../css/chart-tones.js';
+import { type LineChartMarker, type LineChartPeriod, type LineChartPoint } from '../line-chart-input.js';
+import { type LineChartCurve, lineChartCurves } from '../line-chart-path.js';
+export type { LineChartCurve, LineChartMarker, LineChartPeriod, LineChartPoint, };
+export { lineChartCurves };
+export type LineChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Names the chart: the caption of the table that carries its figures. */
+    label: string;
+    /** Heads the table's value column; defaults to `label`. */
+    valueLabel?: string;
+    /** The values by date (`YYYY-MM-DD`), in date order. */
+    points: readonly LineChartPoint[];
+    /**
+     * `linear` (the default) joins each point to the next; `step` holds a
+     * value until the next date, as a balance that changes on a day does.
+     */
+    curve?: LineChartCurve;
+    /** Fills the area between the line and zero with a tint of its tone. */
+    area?: boolean;
+    /** The line's stroke tone (default `accent`). */
+    tone?: ChartStrokeTone;
+    /** Downward triangles on the line at some of its dates, with words. */
+    markers?: readonly LineChartMarker[];
+    /** Heads the table's column of marker words; required with markers. */
+    markersLabel?: string;
+    /** The dates labelled on the time axis; the first and last by default. */
+    ticks?: readonly string[];
+    /** A period to box, such as the current week. */
+    highlight?: LineChartPeriod;
+    /** Writes the last value beside the plot's end (default `true`). */
+    endLabel?: boolean;
+    /** Writes each figure in the table and the last value. */
+    formatValue?: (value: number) => string;
+    /** Writes the value axis; defaults to `formatValue`. */
+    formatTick?: (value: number) => string;
+    /** Writes a date for the time axis and the table; the date itself by default. */
+    formatDate?: (date: string) => string;
+};
+/**
+ * A value over time: a line through its points by date, straight or in
+ * steps, optionally over a tinted area, with markers on chosen dates, a
+ * boxed period and its last value beside the plot. It fills its
+ * container's width and is laid out for it, labelling fewer dates when
+ * they would meet, never scrolling sideways. The drawing is hidden from
+ * assistive technology; a visually hidden table named by `label` carries
+ * every date, value and marker. Pair it with a `ChartLegend` (`line` in its
+ * tone, `marker` in each marker's, `box` in `accent`), on the surface.
+ * Input it cannot draw throws a `RangeError`.
+ */
+export declare const LineChart: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Names the chart: the caption of the table that carries its figures. */
+    label: string;
+    /** Heads the table's value column; defaults to `label`. */
+    valueLabel?: string;
+    /** The values by date (`YYYY-MM-DD`), in date order. */
+    points: readonly LineChartPoint[];
+    /**
+     * `linear` (the default) joins each point to the next; `step` holds a
+     * value until the next date, as a balance that changes on a day does.
+     */
+    curve?: LineChartCurve;
+    /** Fills the area between the line and zero with a tint of its tone. */
+    area?: boolean;
+    /** The line's stroke tone (default `accent`). */
+    tone?: ChartStrokeTone;
+    /** Downward triangles on the line at some of its dates, with words. */
+    markers?: readonly LineChartMarker[];
+    /** Heads the table's column of marker words; required with markers. */
+    markersLabel?: string;
+    /** The dates labelled on the time axis; the first and last by default. */
+    ticks?: readonly string[];
+    /** A period to box, such as the current week. */
+    highlight?: LineChartPeriod;
+    /** Writes the last value beside the plot's end (default `true`). */
+    endLabel?: boolean;
+    /** Writes each figure in the table and the last value. */
+    formatValue?: (value: number) => string;
+    /** Writes the value axis; defaults to `formatValue`. */
+    formatTick?: (value: number) => string;
+    /** Writes a date for the time axis and the table; the date itself by default. */
+    formatDate?: (date: string) => string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/LineChart.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatBarChartValue } from '@scalewing/tokens';
+import { forwardRef, useImperativeHandle, useRef, } from 'react';
+import { cx } from '../class-names.js';
+import { assertLineChartInput, lineChartDay, } from '../line-chart-input.js';
+import { lineChartLayout } from '../line-chart-layout.js';
+import { lineChartRows } from '../line-chart-table.js';
+import { lineChartCurves } from '../line-chart-path.js';
+import { ChartTable } from './chart/ChartTable.js';
+import { useChartWidth } from './chart/use-chart-width.js';
+import { LineChartDrawing } from './line-chart/LineChartDrawing.js';
+export { lineChartCurves };
+const none = [];
+const sameDate = (date) => date;
+/**
+ * A value over time: a line through its points by date, straight or in
+ * steps, optionally over a tinted area, with markers on chosen dates, a
+ * boxed period and its last value beside the plot. It fills its
+ * container's width and is laid out for it, labelling fewer dates when
+ * they would meet, never scrolling sideways. The drawing is hidden from
+ * assistive technology; a visually hidden table named by `label` carries
+ * every date, value and marker. Pair it with a `ChartLegend` (`line` in its
+ * tone, `marker` in each marker's, `box` in `accent`), on the surface.
+ * Input it cannot draw throws a `RangeError`.
+ */
+export const LineChart = forwardRef(function LineChart({ area = false, className, curve = 'linear', endLabel = true, formatDate = sameDate, formatTick, formatValue = formatBarChartValue, highlight, label, markers = none, markersLabel, points, ticks, tone = 'accent', valueLabel, ...rest }, ref) {
+    assertLineChartInput({
+        label,
+        valueLabel,
+        points,
+        curve,
+        tone,
+        markers,
+        markersLabel,
+        ticks,
+        highlight,
+    });
+    const box = useRef(null);
+    useImperativeHandle(ref, () => box.current, []);
+    const width = useChartWidth(box);
+    const lastPoint = points.at(-1);
+    const tickDates = ticks ??
+        [...new Set([points[0]?.x, lastPoint?.x])].filter((date) => date !== undefined);
+    const layout = lineChartLayout({
+        width,
+        points: points.map((p) => ({ day: lineChartDay('x', p.x), y: p.y })),
+        curve,
+        area,
+        markers: markers.map((m) => ({
+            day: lineChartDay('x', m.x),
+            label: m.label,
+        })),
+        ticks: tickDates.map((date) => ({
+            day: lineChartDay('tick', date),
+            text: formatDate(date),
+        })),
+        highlight: highlight
+            ? {
+                from: lineChartDay('from', highlight.from),
+                to: lineChartDay('to', highlight.to),
+            }
+            : null,
+        endLabel: endLabel && lastPoint ? formatValue(lastPoint.y) : null,
+        formatTick: formatTick ?? formatValue,
+    });
+    return (_jsxs("div", { ref: box, className: cx('sw-chart', className), ...rest, children: [_jsx(LineChartDrawing, { layout: layout, markerTones: markers.map((m) => m.tone), tone: tone }), _jsx(ChartTable, { caption: label, columns: [
+                    valueLabel ?? label,
+                    ...(markers.length > 0 ? [markersLabel] : []),
+                ], rows: lineChartRows({
+                    formatDate,
+                    formatValue,
+                    highlight,
+                    markers,
+                    points,
+                }) })] }));
+});

package/dist/components/chart/ChartTable.d.ts

@@ -0,0 +1,16 @@
+import { type ChartTableRow } from '../../chart-table-rows.js';
+export type ChartTableProps = {
+    caption: string;
+    /** The columns' headers, after the rows' own header column. */
+    columns: readonly string[];
+    rows: readonly ChartTableRow[];
+};
+/**
+ * Every figure a chart draws, as a table kept for assistive technology and
+ * not drawn: it sits in a `sw-sr-only` box, because a table is never
+ * narrower than its contents and would widen the page. Its caption is the
+ * chart's name, with a header per column and per row, and the boxed
+ * period's row marked current. The drawing itself is hidden, so this is
+ * what a screen reader reads.
+ */
+export declare function ChartTable({ caption, columns, rows }: ChartTableProps): import("react").JSX.Element;

package/dist/components/chart/ChartTable.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Every figure a chart draws, as a table kept for assistive technology and
+ * not drawn: it sits in a `sw-sr-only` box, because a table is never
+ * narrower than its contents and would widen the page. Its caption is the
+ * chart's name, with a header per column and per row, and the boxed
+ * period's row marked current. The drawing itself is hidden, so this is
+ * what a screen reader reads.
+ */
+export function ChartTable({ caption, columns, rows }) {
+    return (_jsx("div", { className: "sw-sr-only", children: _jsxs("table", { children: [_jsx("caption", { children: caption }), columns.length > 0 ? (_jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", {}), columns.map((column, index) => (_jsx("th", { scope: "col", children: column }, `${column}-${index}`)))] }) })) : null, _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { "aria-current": row.current ? 'true' : undefined, children: [_jsx("th", { scope: "row", children: row.header }), row.cells.map((cell, index) => (_jsx("td", { children: cell }, index)))] }, row.key))) })] }) }));
+}

package/dist/components/chart/ChartValueAxis.d.ts

@@ -0,0 +1,14 @@
+import { type ChartPlot, type ChartTick } from '../../chart-axis.js';
+export type ChartValueAxisProps = {
+    plot: ChartPlot;
+    ticks: readonly ChartTick[];
+    /** The side its words sit on: the plot's start, or its end for a line's own scale. */
+    side: 'start' | 'end';
+    /** Draws the grid lines across the plot (the start axis does). */
+    grid?: boolean;
+};
+/**
+ * A value axis inside a chart's SVG: a grid line at each tick across the
+ * plot, the zero line set apart, and each tick's words beside the plot.
+ */
+export declare function ChartValueAxis({ grid, plot, side, ticks, }: ChartValueAxisProps): import("react").JSX.Element;

package/dist/components/chart/ChartValueAxis.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { chartGap } from '../../chart-metrics.js';
+import { cx } from '../../class-names.js';
+/**
+ * A value axis inside a chart's SVG: a grid line at each tick across the
+ * plot, the zero line set apart, and each tick's words beside the plot.
+ */
+export function ChartValueAxis({ grid = false, plot, side, ticks, }) {
+    const x = side === 'start' ? plot.left - chartGap : plot.right + chartGap;
+    return (_jsx("g", { children: ticks.map((tick) => (_jsxs("g", { children: [grid ? (_jsx("line", { className: tick.value === 0 ? 'sw-chart-zero' : 'sw-chart-grid', x1: plot.left, x2: plot.right, y1: tick.y, y2: tick.y })) : null, _jsx("text", { className: cx('sw-chart-tick', side === 'end' && 'sw-chart-tick-line'), dominantBaseline: "central", textAnchor: side === 'start' ? 'end' : 'start', x: x, y: tick.y, children: tick.label })] }, tick.value))) }));
+}

package/dist/components/chart/use-chart-width.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+/**
+ * Follows the width a chart is given, so its drawing is laid out in its
+ * own pixels: on mount, before the first paint, and whenever its box
+ * changes size. On the server it reports `chartFallbackWidth`, and a browser with
+ * no ResizeObserver measures on window resizes instead.
+ */
+export declare function useChartWidth(ref: RefObject<HTMLElement | null>): number;

package/dist/components/chart/use-chart-width.js

@@ -0,0 +1,34 @@
+'use client';
+import { useLayoutEffect, useState } from 'react';
+import { chartFallbackWidth } from '../../chart-metrics.js';
+/**
+ * Follows the width a chart is given, so its drawing is laid out in its
+ * own pixels: on mount, before the first paint, and whenever its box
+ * changes size. On the server it reports `chartFallbackWidth`, and a browser with
+ * no ResizeObserver measures on window resizes instead.
+ */
+export function useChartWidth(ref) {
+    const [width, setWidth] = useState(chartFallbackWidth);
+    // Before paint, so a phone never shows the wide layout first.
+    useLayoutEffect(() => {
+        const box = ref.current;
+        if (!box)
+            return;
+        function measure() {
+            if (!box)
+                return;
+            const next = Math.round(box.getBoundingClientRect().width);
+            if (next > 0)
+                setWidth(next);
+        }
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', measure);
+            return () => window.removeEventListener('resize', measure);
+        }
+        const observer = new ResizeObserver(measure);
+        observer.observe(box);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+}

package/dist/components/column-chart/ChartCalloutList.d.ts

@@ -0,0 +1,16 @@
+import { type CategoricalColor } from '@scalewing/tokens';
+export type ChartCalloutListProps = {
+    callouts: readonly {
+        text: string;
+        tone?: CategoricalColor;
+    }[];
+    /** Shows the list under the plot; otherwise it is kept for assistive technology only. */
+    visible: boolean;
+};
+/**
+ * A chart's callouts as a list of their words, each after a dot in its
+ * hue: shown under the plot on a compact chart, where they no longer fit
+ * above it, and otherwise kept for assistive technology (`sw-sr-only`)
+ * while the drawing pins them above their columns.
+ */
+export declare function ChartCalloutList({ callouts, visible }: ChartCalloutListProps): import("react").JSX.Element | null;

package/dist/components/column-chart/ChartCalloutList.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+/**
+ * A chart's callouts as a list of their words, each after a dot in its
+ * hue: shown under the plot on a compact chart, where they no longer fit
+ * above it, and otherwise kept for assistive technology (`sw-sr-only`)
+ * while the drawing pins them above their columns.
+ */
+export function ChartCalloutList({ callouts, visible }) {
+    if (callouts.length === 0)
+        return null;
+    return (_jsx("ul", { className: cx('sw-chart-callouts', !visible && 'sw-sr-only'), role: "list", children: callouts.map((callout, index) => (_jsxs("li", { className: cx('sw-chart-callout', callout.tone && `sw-chart-tone-${callout.tone}`), children: [_jsx("span", { "aria-hidden": "true", className: "sw-chart-callout-dot" }), callout.text] }, `${callout.text}-${index}`))) }));
+}

package/dist/components/column-chart/ColumnChartDrawing.d.ts

@@ -0,0 +1,17 @@
+import { type CategoricalColor } from '@scalewing/tokens';
+import { type ColumnChartLayout } from '../../column-chart-layout.js';
+export type ColumnChartDrawingProps = {
+    layout: ColumnChartLayout;
+    /** Each series' hue, in series order. */
+    tones: readonly CategoricalColor[];
+    /** Each callout's hue, in callout order. */
+    calloutTones: readonly (CategoricalColor | undefined)[];
+};
+/**
+ * A column chart's picture, hidden from assistive technology (the table
+ * beside it carries every figure): the grid and value axes, the boxed
+ * period, the columns, the line and its last value, the category labels
+ * and the callouts with their leaders. It is laid out in its own pixels,
+ * left to right whatever the writing direction, as a time axis reads.
+ */
+export declare function ColumnChartDrawing({ calloutTones, layout, tones, }: ColumnChartDrawingProps): import("react").JSX.Element;

package/dist/components/column-chart/ColumnChartDrawing.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { chartBoxRadius, chartColumnRadius, chartDotRadius, } from '../../chart-metrics.js';
+import { cx } from '../../class-names.js';
+import { ChartValueAxis } from '../chart/ChartValueAxis.js';
+function toneClass(tone) {
+    return tone ? `sw-chart-tone-${tone}` : undefined;
+}
+/**
+ * A column chart's picture, hidden from assistive technology (the table
+ * beside it carries every figure): the grid and value axes, the boxed
+ * period, the columns, the line and its last value, the category labels
+ * and the callouts with their leaders. It is laid out in its own pixels,
+ * left to right whatever the writing direction, as a time axis reads.
+ */
+export function ColumnChartDrawing({ calloutTones, layout, tones, }) {
+    const { plot } = layout;
+    return (_jsxs("svg", { "aria-hidden": "true", className: "sw-chart-svg", direction: "ltr", focusable: "false", height: layout.height, viewBox: `0 0 ${layout.width} ${layout.height}`, width: layout.width, children: [_jsx(ChartValueAxis, { grid: true, plot: plot, side: "start", ticks: layout.ticks }), layout.highlight ? (_jsx("rect", { className: "sw-chart-highlight sw-chart-tone-accent", height: layout.highlight.height, rx: chartBoxRadius, width: layout.highlight.width, x: layout.highlight.x, y: layout.highlight.y })) : null, layout.columns.map((column) => (_jsx("rect", { className: cx('sw-chart-column', toneClass(tones[column.series])), height: column.height, rx: Math.min(chartColumnRadius, column.width / 2, column.height / 2), width: column.width, x: column.x, y: column.y }, `${column.series}-${column.category}`))), layout.line ? (_jsxs("g", { className: "sw-chart-tone-accent", children: [_jsx("polyline", { className: "sw-chart-line", points: layout.line.points.map((p) => `${p.x},${p.y}`).join(' ') }), _jsx(ChartValueAxis, { plot: plot, side: "end", ticks: layout.lineTicks }), layout.line.end || layout.line.points.length === 1 ? (_jsx("circle", { className: "sw-chart-dot", cx: layout.line.points.at(-1).x, cy: layout.line.points.at(-1).y, r: chartDotRadius })) : null, layout.line.end ? (_jsx("text", { className: "sw-chart-end-label", dominantBaseline: "central", x: layout.line.end.x, y: layout.line.end.y, children: layout.line.end.text })) : null] })) : null, layout.categoryLabels.map((label) => (_jsx("text", { className: "sw-chart-category", textAnchor: "middle", x: label.x, y: label.y, children: label.text }, label.index))), layout.callouts.map((callout) => (_jsxs("g", { className: toneClass(calloutTones[callout.order]), children: [_jsx("line", { className: "sw-chart-leader", x1: callout.x, x2: callout.x, y1: callout.leaderStart, y2: callout.leaderEnd }), _jsx("text", { className: "sw-chart-callout-text", textAnchor: callout.anchor, x: callout.textX, y: callout.textY, children: callout.text })] }, callout.order)))] }));
+}

package/dist/components/line-chart/LineChartDrawing.d.ts

@@ -0,0 +1,17 @@
+import { type ChartStrokeTone } from '../../css/chart-tones.js';
+import { type LineChartLayout } from '../../line-chart-layout.js';
+export type LineChartDrawingProps = {
+    layout: LineChartLayout;
+    tone: ChartStrokeTone;
+    /** Each marker's tone, in marker order. */
+    markerTones: readonly ChartStrokeTone[];
+};
+/**
+ * A line chart's picture, hidden from assistive technology (the table
+ * beside it carries every figure): the grid and value axis, the boxed
+ * period, the area and line in the line's tone with a dot and words at its
+ * last value, the date labels, and each marker's triangle and words in its
+ * own tone. It is laid out in its own pixels, left to right whatever the
+ * writing direction, as a time axis reads.
+ */
+export declare function LineChartDrawing({ layout, markerTones, tone, }: LineChartDrawingProps): import("react").JSX.Element;

package/dist/components/line-chart/LineChartDrawing.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { chartBoxRadius, chartDotRadius } from '../../chart-metrics.js';
+import { svgPoints } from '../../line-chart-path.js';
+import { ChartValueAxis } from '../chart/ChartValueAxis.js';
+/**
+ * A line chart's picture, hidden from assistive technology (the table
+ * beside it carries every figure): the grid and value axis, the boxed
+ * period, the area and line in the line's tone with a dot and words at its
+ * last value, the date labels, and each marker's triangle and words in its
+ * own tone. It is laid out in its own pixels, left to right whatever the
+ * writing direction, as a time axis reads.
+ */
+export function LineChartDrawing({ layout, markerTones, tone, }) {
+    const { last, plot } = layout;
+    return (_jsxs("svg", { "aria-hidden": "true", className: "sw-chart-svg", direction: "ltr", focusable: "false", height: layout.height, viewBox: `0 0 ${layout.width} ${layout.height}`, width: layout.width, children: [_jsx(ChartValueAxis, { grid: true, plot: plot, side: "start", ticks: layout.ticks }), layout.highlight ? (_jsx("rect", { className: "sw-chart-highlight sw-chart-tone-accent", height: layout.highlight.height, rx: chartBoxRadius, width: layout.highlight.width, x: layout.highlight.x, y: layout.highlight.y })) : null, _jsxs("g", { className: `sw-chart-tone-${tone}`, children: [layout.area.length > 0 ? (_jsx("polygon", { className: "sw-chart-area", points: svgPoints(layout.area) })) : null, _jsx("polyline", { className: "sw-chart-line", points: svgPoints(layout.path) }), last && (layout.end || layout.path.length === 1) ? (_jsx("circle", { className: "sw-chart-dot", cx: last.x, cy: last.y, r: chartDotRadius })) : null, layout.end ? (_jsx("text", { className: "sw-chart-end-label", dominantBaseline: "central", x: layout.end.x, y: layout.end.y, children: layout.end.text })) : null] }), layout.markers.map((marker) => (_jsxs("g", { className: `sw-chart-tone-${markerTones[marker.order]}`, children: [_jsx("polygon", { className: "sw-chart-marker", points: marker.triangle }), marker.labelShown ? (_jsx("text", { className: "sw-chart-marker-label", textAnchor: "middle", x: marker.labelX, y: marker.labelY, children: marker.label })) : null] }, marker.order))), layout.dateLabels.map((label) => (_jsx("text", { className: "sw-chart-category", textAnchor: "middle", x: label.x, y: label.y, children: label.text }, label.day)))] }));
+}

package/dist/css/chart-marks.d.ts

@@ -0,0 +1,10 @@
+/** A line's thickness (a chart's line and a legend's line swatch), in px. */
+export declare const chartLineWidth = 2;
+/** A hairline: a grid line, a leader, the boxed period's dashed edge. */
+export declare const chartHairline = 1;
+/** The boxed period's dashes: 3 px drawn, 3 px left out. */
+export declare const chartBoxDash = "3 3";
+/** A callout's leader: finer dashes, 2 px drawn, 2 px left out. */
+export declare const chartLeaderDash = "2 2";
+/** The gap between grouped columns side by side, at most. */
+export declare const chartColumnGap = 2;

package/dist/css/chart-marks.js

@@ -0,0 +1,15 @@
+/*
+ * The sizes every chart's marks share, so a legend swatch is drawn at the
+ * size of the mark it names. They are geometry, not theme values: the
+ * colours come from `chart-tones.ts` and the type from the caption variant.
+ */
+/** A line's thickness (a chart's line and a legend's line swatch), in px. */
+export const chartLineWidth = 2;
+/** A hairline: a grid line, a leader, the boxed period's dashed edge. */
+export const chartHairline = 1;
+/** The boxed period's dashes: 3 px drawn, 3 px left out. */
+export const chartBoxDash = '3 3';
+/** A callout's leader: finer dashes, 2 px drawn, 2 px left out. */
+export const chartLeaderDash = '2 2';
+/** The gap between grouped columns side by side, at most. */
+export const chartColumnGap = chartLineWidth;

package/dist/css/chart-tones.d.ts

@@ -0,0 +1,68 @@
+import { type CategoricalColor } from '@scalewing/tokens';
+/** Where a mark's colour comes from: a semantic or a categorical colour. */
+export type ChartColorSource = {
+    semantic: 'accent' | 'success' | 'warning' | 'danger' | 'muted' | 'text';
+} | {
+    categorical: CategoricalColor;
+};
+/**
+ * A colour mixed into the surface or toward the text colour by a share of
+ * its own (1 is the colour unmixed).
+ */
+export type ChartColorMix = ChartColorSource & {
+    share: number;
+    into: 'surface' | 'text';
+};
+/**
+ * The statement tones a range bar's fill takes (see DataBar). `danger` is
+ * for a shortage, never for cash leaving: an outflow is `muted`.
+ */
+export declare const statementFillTones: readonly ["neutral", "success", "muted", "strong", "accent", "danger"];
+/**
+ * Every fill tone: the categorical colours (a chart's series), then the
+ * statement tones a range bar adds. `neutral` is in both and is one grey.
+ */
+export declare const chartFillTones: readonly ("danger" | "muted" | "accent" | "success" | CategoricalColor | "strong")[];
+export type ChartFillTone = CategoricalColor | (typeof statementFillTones)[number];
+/** The tones a line, a marker or the boxed period is drawn in. */
+export declare const chartStrokeTones: readonly ["accent", "success", "warning", "danger", "neutral"];
+export type ChartStrokeTone = (typeof chartStrokeTones)[number];
+/** Every tone a chart or a legend swatch can take. */
+export type ChartTone = ChartFillTone | ChartStrokeTone;
+export declare const chartTones: readonly ChartTone[];
+/**
+ * How much of a categorical colour a column's fill mixes into the surface:
+ * a lighter fill, so a line drawn over the columns stands apart, that
+ * keeps 1.5:1 on the surface in every palette and scheme.
+ */
+export declare const categoricalFillShare = 0.72;
+/**
+ * How much of the danger colour its fill mixes into the surface (a
+ * shortage's range bar, never cash leaving): a light red, at 1.5:1 or more
+ * on the surface in every palette and scheme, as every other fill.
+ */
+export declare const dangerFillShare = 0.4;
+/** Each fill tone's colour, mixed into the surface. */
+export declare const chartFillMixes: Record<ChartFillTone, ChartColorMix>;
+/** Each stroke tone's colour: a semantic colour, or muted for neutral. */
+export declare const chartStrokeColors: Record<ChartStrokeTone, ChartColorSource>;
+/**
+ * How much of a line's stroke the area under it takes, over transparency:
+ * a quiet tint behind the line, decorative (the line carries the values).
+ */
+export declare const chartAreaShare = 0.12;
+/** How much of a hue's colour its words keep, moved toward the text colour. */
+export declare const categoricalInkShare = 0.3;
+/** How much of a semantic colour its words keep, moved toward the text colour. */
+export declare const semanticInkShare = 0.5;
+/** The tones whose words are drawn beside a mark: a series' and a stroke's. */
+export declare const chartInkTones: readonly ["green", "blue", "orange", "purple", "teal", "rose", "accent", "success", "warning", "danger", "neutral"];
+export type ChartInkTone = (typeof chartInkTones)[number];
+/** The words beside a mark: its tone moved toward the text colour. */
+export declare const chartInkMixes: Record<ChartInkTone, ChartColorMix>;
+/** A mix as CSS: the colour alone when unmixed. */
+export declare function chartColorMix(mix: ChartColorMix): string;
+/** A fill tone's colour. */
+export declare function chartFill(tone: ChartFillTone): string;
+export declare function cssChartToneClasses(): string;
+export declare function chartToneClassCatalog(): string[];