@umriss-ui/charts 0.6.0 → 0.7.0

package/dist/de.d.ts

@@ -18,10 +18,28 @@ declare interface ChartsWording {
         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;

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;
@@ -217,6 +238,13 @@ export declare interface ChartProps<T> {
      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
@@ -250,10 +278,28 @@ export declare interface ChartsWording {
         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 {
@@ -383,6 +429,18 @@ 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;
@@ -833,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`. */
@@ -962,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
@@ -1049,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.js

@@ -1,13 +1,21 @@
-const t = {
+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, i) => `${e} von ${n} bis ${i}.`,
-  readout: (e, n) => [`${e}.`, ...n.map((i) => `${i.name} ${i.value}${i.x === "" ? "" : ` bei ${i.x}`}.`)].join(" "),
+  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."
+  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 {
-  t as GERMAN_CHARTS_WORDING
+  i as GERMAN_CHARTS_WORDING
 };