@umriss-ui/charts 0.5.0 → 0.7.0

package/dist/de.d.ts

@@ -0,0 +1,47 @@
+declare interface ChartsWording {
+    /** What a screen reader calls the plot area that takes the keys
+     (`aria-roledescription`). */
+    roleDescription: string;
+    /** Shown in the plot area when no visible series has a point to show. */
+    empty: string;
+    /** The summary's visible series, by name. */
+    seriesList: (names: readonly string[]) => string;
+    /** The summary's visible stretch of the x axis, both ends formatted. */
+    visibleRange: (from: string, to: string) => string;
+    /** The summary's lowest and highest value of one series in that stretch. */
+    seriesExtent: (name: string, min: string, max: string) => string;
+    /** What is read after a key: the position, then each series with its value
+     (and its own x where it stands on another x axis), the emphasised one
+     first. */
+    readout: (x: string, rows: readonly {
+        name: string;
+        value: string;
+        x: string;
+    }[]) => string;
+    /** The last row of a stack in the tooltip and the readout: the sum of its
+     members at the point (charts-stacking K4). */
+    stackTotal: string;
+    /** A share in a normalised stack, its number already formatted (K5). */
+    percent: (value: string) => string;
+    /** The keys that walk the chart. */
+    walkHelp: string;
+    /** The keys that zoom and pan it - only where the chart can be zoomed. */
+    zoomHelp: string;
+    /** The data table's disclosure key, closed and open (charts-alternatives
+     C1). */
+    showData: string;
+    hideData: string;
+    /** The heading of the table's x column where its axis has no `label`, and
+     of a matrix' row column where its y axis has none. */
+    positionColumn: string;
+    rowColumn: string;
+    /** The table's caption: the visible stretch it lists, both ends formatted. */
+    tableCaption: (from: string, to: string) => string;
+    /** Added to the caption where the table shows the downsampled course (C2):
+     how many readings its rows stand for. */
+    downsampled: (readings: number) => string;
+}
+
+export declare const GERMAN_CHARTS_WORDING: ChartsWording;
+
+export { }

package/dist/index.d.ts

@@ -12,7 +12,8 @@ export declare function Area<T>(props: AreaProps<T>): null;
 export declare interface AreaProps<T> {
     /** Upper edge; null/undefined/NaN/±Infinity means a gap (R-2.5). */
     accessor: Accessor<T>;
-    /** Lower edge; without a value the fixed baseline 0. */
+    /** Lower edge; without a value the fixed baseline 0. In a `stack` the stack
+     below is the lower edge, and this is not read. */
     baseline?: Accessor<T>;
     /** Binding to an x axis (R-4.12). */
     xAxisId?: string;
@@ -36,6 +37,16 @@ export declare interface AreaProps<T> {
     /** A role instead of a colour value; the theme resolves it. `color` beats
      it. */
     tone?: "ok" | "warning" | "alarm";
+    /** The stack this series stands in: every Bar and Area with the same id on
+     the same x and y axis stands on the ones registered before it. A gap
+     stacks as zero; negative values stack downward from zero. The tooltip
+     names each series' own value and the stack's total. */
+    stack?: string;
+    /** On any member of a stack, every x of the stack sums to 100 %: each value
+     becomes its share, and the y axis reads in percent unless it has a
+     `tickFormat`. The total stays the readings' own sum, written in the
+     series' `format`. */
+    normalize?: boolean;
     /** Opacity of the fill, from 0 to 1; the outline stays fully opaque. */
     fillOpacity?: number;
     /** Width of the outline along the upper edge in CSS pixels; 0 leaves it
@@ -46,7 +57,7 @@ export declare interface AreaProps<T> {
     dash?: readonly number[];
 }
 
-export declare interface AreaSeriesConfig<T = unknown> extends SeriesBase<T> {
+export declare interface AreaSeriesConfig<T = unknown> extends SeriesBase<T>, Stackable {
     kind: "area";
     /** Lower edge; without a value the fixed baseline 0. */
     baseline?: Accessor<T>;
@@ -158,12 +169,22 @@ export declare interface BarProps<T> {
     /** A role instead of a colour value; the theme resolves it. `color` beats
      it. */
     tone?: "ok" | "warning" | "alarm";
+    /** The stack this series stands in: every Bar and Area with the same id on
+     the same x and y axis stands on the ones registered before it. A gap
+     stacks as zero; negative values stack downward from zero. The tooltip
+     names each series' own value and the stack's total. */
+    stack?: string;
+    /** On any member of a stack, every x of the stack sums to 100 %: each value
+     becomes its share, and the y axis reads in percent unless it has a
+     `tickFormat`. The total stays the readings' own sum, written in the
+     series' `format`. */
+    normalize?: boolean;
     /** Width as a fraction of the step; just under 1, so that neighbours do not
      touch. Several bar series share this fraction. */
     barWidth?: number;
 }
 
-export declare interface BarSeriesConfig<T = unknown> extends SeriesBase<T> {
+export declare interface BarSeriesConfig<T = unknown> extends SeriesBase<T>, Stackable {
     kind: "bar";
     /** Width as a fraction of the step; the group shares this fraction. */
     barWidth: number;
@@ -211,9 +232,19 @@ export declare interface ChartProps<T> {
     style?: CSSProperties;
     /** Shown in the middle of the plot area when no visible series has a point
      to show - no data, only gaps, or every series hidden. Axes and frame
-     stay. Without a value "No data"; any other language or wording is the
-     caller's. */
+     stay. Without a value the wording's `empty`; this prop wins over it. */
     empty?: ReactNode;
+    /** The chart's words (ADR-0031): English without a value, entries left out
+     fall back to English. German: `GERMAN_CHARTS_WORDING` from
+     `@umriss-ui/charts/wording/de`. */
+    wording?: Partial<ChartsWording>;
+    /** How series are told apart. `"color"` (the default): by their colour.
+     `"marks"`: by a dash and a marker shape as well - a line, an area and a
+     scatter -, and by a hatch - a bar, a state, a matrix cell, a limit band -,
+     chosen by the same palette place as the colour, so that a reader who does
+     not see the colours still tells them apart; the legend's chips show the
+     same. A caller's own `dash` wins over the place's. */
+    encoding?: "color" | "marks";
     /** Charts with the same id share the pointer's x position, in domain units:
      each draws its crosshair there, the tooltip stays with the chart under
      the pointer. Zoom is not shared - give every chart the same controlled
@@ -227,6 +258,50 @@ export declare interface ChartProps<T> {
     children?: ReactNode;
 }
 
+export declare interface ChartsWording {
+    /** What a screen reader calls the plot area that takes the keys
+     (`aria-roledescription`). */
+    roleDescription: string;
+    /** Shown in the plot area when no visible series has a point to show. */
+    empty: string;
+    /** The summary's visible series, by name. */
+    seriesList: (names: readonly string[]) => string;
+    /** The summary's visible stretch of the x axis, both ends formatted. */
+    visibleRange: (from: string, to: string) => string;
+    /** The summary's lowest and highest value of one series in that stretch. */
+    seriesExtent: (name: string, min: string, max: string) => string;
+    /** What is read after a key: the position, then each series with its value
+     (and its own x where it stands on another x axis), the emphasised one
+     first. */
+    readout: (x: string, rows: readonly {
+        name: string;
+        value: string;
+        x: string;
+    }[]) => string;
+    /** The last row of a stack in the tooltip and the readout: the sum of its
+     members at the point (charts-stacking K4). */
+    stackTotal: string;
+    /** A share in a normalised stack, its number already formatted (K5). */
+    percent: (value: string) => string;
+    /** The keys that walk the chart. */
+    walkHelp: string;
+    /** The keys that zoom and pan it - only where the chart can be zoomed. */
+    zoomHelp: string;
+    /** The data table's disclosure key, closed and open (charts-alternatives
+     C1). */
+    showData: string;
+    hideData: string;
+    /** The heading of the table's x column where its axis has no `label`, and
+     of a matrix' row column where its y axis has none. */
+    positionColumn: string;
+    rowColumn: string;
+    /** The table's caption: the visible stretch it lists, both ends formatted. */
+    tableCaption: (from: string, to: string) => string;
+    /** Added to the caption where the table shows the downsampled course (C2):
+     how many readings its rows stand for. */
+    downsampled: (readings: number) => string;
+}
+
 declare interface CommonProps {
     /** Axis on which the value lies. Without one, the first axis of the
      orientation. */
@@ -354,8 +429,22 @@ export declare interface ControlLimits {
  chart then draws no line instead of bursting. */
 export declare function controlLimits(values: readonly number[], origin: ControlLimitOrigin): ControlLimits;
 
+export declare function DataTable(): ReactNode;
+
+/** One table of the data table: the series of one x axis, or one matrix. Every
+ cell is text already, in the format the tooltip writes. */
+export declare interface DataTableGroup {
+    key: string;
+    caption: string;
+    columns: readonly string[];
+    /** The first cell of each row is its x - the row's heading. */
+    rows: readonly (readonly string[])[];
+}
+
 export declare const DAY: number;
 
+export declare const DEFAULT_CHARTS_WORDING: ChartsWording;
+
 /** Default gradient: a sequential set, light to dark, so that it stays readable
  as an order of lightness even without colour. It is a default, not a
  restriction - whoever has a scale of their own names it. */
@@ -802,6 +891,9 @@ export declare interface ResolvedTheme {
     font: string;
     fontMono: string;
     series: readonly string[];
+    /** The page is in forced colours: every colour above is a system colour, and
+     the chart encodes by marks whatever its `encoding`. */
+    forced: boolean;
 }
 
 /** Name of a rule, the way it is switched on and off in `violations`. */
@@ -931,6 +1023,15 @@ export declare type Side = "upper" | "lower";
  baseline has been handed down as a centre line and a control limit. */
 export declare function sigmaFromLimit(center: number, upper: number): number;
 
+/** What the two filled kinds share: a place in a stack (charts-stacking). */
+declare interface Stackable {
+    /** The stack this series stands in: series with the same id, on the same x
+     and y axis, stack in registration order (K1). */
+    stack?: string;
+    /** On any member, the whole stack sums to 100 at every x (K5). */
+    normalize?: boolean;
+}
+
 /** A band of states: each point's state holds from its x until the next
  point's. The last one holds until the latest reading of the chart - the
  last x of any visible series on the same x axis - and where the band itself
@@ -1018,6 +1119,8 @@ export declare interface TooltipPoint<T = unknown> {
     /** The point's x value on its own x axis - with several x axes it can
      differ from the hit's. */
     xValue: number;
+    /** The point's y value; in a stack its own value, not its top - in a
+     normalised stack its share in percent. */
     yValue: number;
     datum: T;
     index: number;

package/dist/wording/de.d.ts

@@ -0,0 +1,2 @@
+import { ChartsWording } from './index';
+export declare const GERMAN_CHARTS_WORDING: ChartsWording;

package/dist/wording/de.js

@@ -0,0 +1,21 @@
+const i = {
+  roleDescription: "Diagramm",
+  empty: "Keine Daten",
+  seriesList: (e) => `${e.length === 1 ? "1 Serie" : `${e.length} Serien`}: ${e.join(", ")}.`,
+  visibleRange: (e, n) => `Von ${e} bis ${n}.`,
+  seriesExtent: (e, n, t) => `${e} von ${n} bis ${t}.`,
+  readout: (e, n) => [`${e}.`, ...n.map((t) => `${t.name} ${t.value}${t.x === "" ? "" : ` bei ${t.x}`}.`)].join(" "),
+  stackTotal: "Summe",
+  percent: (e) => `${e} %`,
+  walkHelp: "Pfeil links und rechts gehen durch die Werte, Pfeil hoch und runter wechseln die Serie, Pos1 und Ende springen zum ersten und letzten Wert, Escape hebt die Markierung auf.",
+  zoomHelp: "Plus und Minus zoomen, Umschalt mit Pfeil links oder rechts verschiebt, 0 zeigt alles.",
+  showData: "Daten zeigen",
+  hideData: "Daten verbergen",
+  positionColumn: "Position",
+  rowColumn: "Zeile",
+  tableCaption: (e, n) => `Werte von ${e} bis ${n}.`,
+  downsampled: (e) => `Ausgedünnt aus ${e.toLocaleString("de-DE")} Messwerten: erster, kleinster, größter und letzter Wert je Abschnitt.`
+};
+export {
+  i as GERMAN_CHARTS_WORDING
+};