@nexterajs/ui 0.0.1 → 0.1.0

package/types/nexterajs-ui-charts.d.ts

@@ -0,0 +1,446 @@
+import * as _angular_core from '@angular/core';
+import * as _nexterajs_ui_core from '@nexterajs/ui/core';
+import { DateTime } from 'luxon';
+import * as _nexterajs_ui_charts from '@nexterajs/ui/charts';
+
+/** A "nice" axis: a domain that starts and ends on a tick, and the ticks between. */
+interface NxeNiceScale {
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly ticks: readonly number[];
+}
+/** Rounds `value` to a 1, 2, 5 or 10 times a power of ten (Heckbert). */
+declare function niceNumber(value: number, round: boolean): number;
+/** Decimal places needed to write multiples of `step` exactly (0.25 -> 2, 5 -> 0). */
+declare function decimalsOf(step: number): number;
+/**
+ * Ticks for `[min, max]`: about `targetTicks` of them, spaced 1, 2 or 5 times a power of ten, the
+ * first at or below `min` and the last at or above `max`. A flat domain (`min === max`) opens up
+ * around the value so the line has somewhere to sit.
+ */
+declare function niceScale(min: number, max: number, targetTicks?: number): NxeNiceScale;
+/** Maps `[d0, d1]` onto `[r0, r1]`. A degenerate domain maps to the middle of the range. */
+declare function linearScale(d0: number, d1: number, r0: number, r1: number): (value: number) => number;
+/** A `#,##0.00` style pattern that shows `decimals` places, for tick labels that share a step. */
+declare function patternForDecimals(decimals: number): string;
+/** Indexes (0-based) of at most `maxLabels` evenly spaced labels out of `count`, always including the first. */
+declare function labelIndexes(count: number, maxLabels: number): number[];
+/** Index of the entry of the ascending `xs` nearest to `x`; -1 when `xs` is empty. */
+declare function nearestIndex(xs: readonly number[], x: number): number;
+
+interface NxeChartPoint {
+    readonly x: number;
+    readonly y: number;
+}
+/** Splits a series at its gaps: each run of consecutive defined points is one segment. */
+declare function segments(points: readonly (NxeChartPoint | null)[]): NxeChartPoint[][];
+/**
+ * The line through `points`, `null` entries leaving gaps (the pen lifts; it never joins across a
+ * missing value). A run of one point draws no line: it shows as a marker.
+ */
+declare function linePath(points: readonly (NxeChartPoint | null)[]): string;
+/**
+ * The filled area between `top` and `bottom` (same length; `null` in either leaves a gap in the
+ * fill too). `bottom` is a baseline y for a plain area, or the lower edge of a stacked band.
+ */
+declare function areaPath(top: readonly (NxeChartPoint | null)[], bottom: number | readonly (NxeChartPoint | null)[]): string;
+/**
+ * Cumulative stack of `rows` (one array of values per series, aligned by index). Missing and
+ * negative values count as 0 so the bands above them still sit on the stack. Returns the lower and
+ * upper edge per series.
+ */
+declare function stackValues(rows: readonly (readonly (number | null | undefined)[])[]): {
+    lower: number[];
+    upper: number[];
+}[];
+interface NxeDonutArc {
+    readonly startAngle: number;
+    readonly endAngle: number;
+    readonly path: string;
+    /** Midpoint of the arc on the ring's centre line, for a tooltip anchor. */
+    readonly centroid: NxeChartPoint;
+}
+/**
+ * Ring segments for `values` (zeros and negatives get no arc, `null` in the result). `gap` is the
+ * visible gap between neighbours in px, measured on the ring's centre line, so it reads as the 2px
+ * surface gap the mark spec asks for. A lone segment that is the whole ring is drawn as two half
+ * arcs (an SVG arc cannot start and end on the same point) with no gap.
+ */
+declare function donutArcs(values: readonly number[], cx: number, cy: number, outer: number, inner: number, gap?: number): (NxeDonutArc | null)[];
+/** A donut segment as the caller states it. */
+interface NxeDonutDatum {
+    /** Stable identity for the legend toggle; defaults to the label. */
+    readonly key?: string;
+    readonly label: string;
+    readonly value: number;
+    /** Any CSS colour or `var(--nxe-ui-...)`; defaults to the next palette slot. */
+    readonly color?: string;
+    /** `true` on the grouped remainder `groupOther` appends. */
+    readonly other?: boolean;
+}
+/**
+ * Keeps the `max - 1` largest items (in their input order) and folds the rest into one "Other"
+ * item last. Returns the live items unchanged when they fit in `max`. Non-positive values never count.
+ */
+declare function groupOther(items: readonly NxeDonutDatum[], max: number, otherLabel: string): NxeDonutDatum[];
+/**
+ * The segment under the point `(x, y)` of a donut drawn by `donutArcs`, or -1 when the point is
+ * off the ring (in the hole or outside). Gaps belong to the segment whose share they interrupt, so
+ * the pointer never flickers through the 2px surface line.
+ */
+declare function donutHit(values: readonly number[], cx: number, cy: number, outer: number, inner: number, x: number, y: number): number;
+
+/** How many categorical colours the palette has (`--nxe-ui-chart-1` to `--nxe-ui-chart-8`). */
+declare const NXE_CHART_SLOTS = 8;
+/** The colour of the grouped "Other" remainder: a neutral, never a categorical slot. */
+declare const NXE_CHART_OTHER_COLOR = "var(--nxe-ui-chart-other)";
+/**
+ * The CSS colour of palette slot `index` (0-based). Slots are assigned in order and never cycled:
+ * past the eighth there is no ninth hue, so the remainder takes the neutral `Other` colour.
+ */
+declare function nxeChartColor(index: number): string;
+/** One data series of a line or area chart. */
+interface NxeCartesianSeries {
+    /** Stable identity, kept when the legend hides the series; defaults to the name. */
+    readonly key?: string;
+    readonly name: string;
+    /** One value per category, aligned by index. `null` or `undefined` leaves a gap. */
+    readonly values: readonly (number | null | undefined)[];
+    /** Overrides the palette slot (any CSS colour or `var(--nxe-ui-...)`). */
+    readonly color?: string;
+}
+/** One entry of the legend. */
+interface NxeChartLegendItem {
+    readonly key: string;
+    readonly label: string;
+    readonly color: string;
+    readonly hidden: boolean;
+    /** Formatted value shown after the label, if any. */
+    readonly value?: string;
+}
+/** A row of the data table alternative. */
+interface NxeChartTableRow {
+    readonly header: string;
+    readonly cells: readonly string[];
+}
+
+/** An x value: a label for a category axis, or a date for a time axis. */
+type NxeChartCategory = string | number | Date | DateTime;
+/** How the x axis places its points. */
+type NxeChartXType = 'category' | 'time';
+interface LineView {
+    readonly key: string;
+    readonly name: string;
+    readonly color: string;
+    readonly line: string;
+    readonly area: string;
+    readonly markers: readonly {
+        x: number;
+        y: number;
+        index: number;
+    }[];
+}
+/**
+ * `nxe-line-chart` draws one or more series as lines over a category or time x axis.
+ *
+ * ```html
+ * <nxe-line-chart
+ *     heading="Purchases per month"
+ *     [categories]="months"
+ *     [series]="[{ name: 'Total', values: totals }]"
+ *     xType="time"
+ *     xFormat="MMM yyyy" />
+ * ```
+ *
+ * It is SVG rendered by the template from computed scales: no chart library. It follows its
+ * container's width (ResizeObserver), takes colours from the `--nxe-ui-chart-1..8` tokens in
+ * order (so light and dark both validate), writes numbers with `NXE_NUMBER_SEPARATORS` and dates
+ * with Luxon in the active locale, leaves a gap where a value is `null`, and shows:
+ *
+ * - a legend (two series or more) whose entries hide and show a series from the keyboard;
+ * - a crosshair tooltip on hover, and on focus: Tab to the plot, then Left, Right, Home, End and
+ *   Esc move through the points, and the values are announced;
+ * - `role="img"` with a text summary (range, first, last, lowest and highest per series), and the
+ *   data as a visually hidden table that the "View as table" button shows in place of the plot;
+ * - `nxe-skeleton` while `loading`, and `nxe-empty-state` when there is nothing to draw.
+ *
+ * `area` fills under each line (`nxe-area-chart` is the same with `area` on); with `stacked` the
+ * series stack and a missing value counts as 0. Categories must be in ascending order on a time
+ * axis. Values are numbers in the unit of the axis: scale them first if the unit differs.
+ */
+declare class NxeLineChartComponent {
+    private readonly host;
+    protected readonly messages: _nexterajs_ui_core.NxeMessageService;
+    private readonly formatter;
+    /** The series to draw, in palette order. Up to 8 take a palette colour; give more a `color`. */
+    readonly series: _angular_core.InputSignal<readonly NxeCartesianSeries[]>;
+    /** One entry per point along the x axis; a series' `values` line up with it by index. */
+    readonly categories: _angular_core.InputSignal<readonly NxeChartCategory[]>;
+    /** `category` spaces points evenly; `time` places them by date (Luxon parses strings, Dates and DateTimes). */
+    readonly xType: _angular_core.InputSignal<NxeChartXType>;
+    /** Luxon format of a date label, in the active locale. Default `dd-MMM-yyyy`. */
+    readonly xFormat: _angular_core.InputSignal<string>;
+    /** Number pattern for values in the tooltip, summary and table. Default `#,##0.##`. */
+    readonly valueFormat: _angular_core.InputSignal<string>;
+    /** Number pattern for the y axis; by default as many decimals as the tick step needs. */
+    readonly axisFormat: _angular_core.InputSignal<string | undefined>;
+    /** About how many y ticks. */
+    readonly yTicks: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Start the y axis at 0 when every value is positive. Areas always do. */
+    readonly includeZero: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Fill under each line. */
+    readonly area: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** With `area`: stack the series instead of overlaying them. */
+    readonly stacked: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Visible title above the chart; also the start of its accessible summary. */
+    readonly heading: _angular_core.InputSignal<string>;
+    /** Extra sentence for the accessible summary, e.g. what to take away from the chart. */
+    readonly description: _angular_core.InputSignal<string>;
+    /** Height of the plot in px. */
+    readonly height: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Fixed width in px; by default the chart fills its container. */
+    readonly width: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /** Show the skeleton instead of the plot. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The legend: by default shown for two series or more. */
+    readonly showLegend: _angular_core.InputSignal<boolean | "auto">;
+    /** Offer the "View as table" button. */
+    readonly showTableToggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Keys of the series the legend has hidden; two-way. */
+    readonly hidden: _angular_core.ModelSignal<readonly string[]>;
+    /** `nxe-area-chart` turns this on. */
+    protected readonly areaForced: boolean;
+    protected readonly uid: string;
+    private readonly measured;
+    protected readonly hoverIndex: _angular_core.WritableSignal<number | null>;
+    protected readonly keyboardIndex: _angular_core.WritableSignal<number | null>;
+    protected readonly tableShown: _angular_core.WritableSignal<boolean>;
+    constructor();
+    private readonly isTime;
+    protected readonly isArea: _angular_core.Signal<boolean>;
+    protected readonly isStacked: _angular_core.Signal<boolean>;
+    /** Number of points along x. */
+    protected readonly count: _angular_core.Signal<number>;
+    protected readonly labels: _angular_core.Signal<string[]>;
+    private readonly xs;
+    private readonly entries;
+    private readonly visible;
+    protected readonly empty: _angular_core.Signal<boolean>;
+    private readonly stack;
+    private readonly domain;
+    private readonly axisPattern;
+    protected readonly yLabels: _angular_core.Signal<string[]>;
+    protected readonly svgWidth: _angular_core.Signal<number>;
+    protected readonly svgHeight: _angular_core.Signal<number>;
+    protected readonly left: _angular_core.Signal<number>;
+    protected readonly plotRight: _angular_core.Signal<number>;
+    protected readonly plotBottom: _angular_core.Signal<number>;
+    private readonly xScale;
+    private readonly yScale;
+    /** Pixel x of each point. */
+    protected readonly xPx: _angular_core.Signal<number[]>;
+    protected readonly yGrid: _angular_core.Signal<{
+        y: number;
+        label: string;
+        zero: boolean;
+    }[]>;
+    protected readonly xTicks: _angular_core.Signal<{
+        x: number;
+        text: string;
+    }[]>;
+    protected readonly lines: _angular_core.Signal<LineView[]>;
+    /** Markers on every point while there are few enough to tell apart; otherwise only the active one. */
+    protected readonly showAllMarkers: _angular_core.Signal<boolean>;
+    protected readonly activeIndex: _angular_core.Signal<number | null>;
+    protected readonly tooltip: _angular_core.Signal<{
+        title: string;
+        rows: {
+            key: string;
+            name: string;
+            color: string;
+            value: string;
+        }[];
+        x: number;
+        index: number;
+        align: string;
+    } | null>;
+    /** What a screen reader hears when keyboard focus lands on a point. */
+    protected readonly announcement: _angular_core.Signal<string>;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerLeave(): void;
+    protected onFocus(): void;
+    protected onBlur(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected readonly legendItems: _angular_core.Signal<NxeChartLegendItem[]>;
+    protected readonly legendShown: _angular_core.Signal<boolean>;
+    protected toggleSeries(key: string): void;
+    protected readonly tableColumns: _angular_core.Signal<string[]>;
+    protected readonly tableRows: _angular_core.Signal<NxeChartTableRow[]>;
+    protected readonly summary: _angular_core.Signal<string>;
+    protected toggleTable(): void;
+    private toDate;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeLineChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeLineChartComponent, "nxe-line-chart", never, { "series": { "alias": "series"; "required": false; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "xType": { "alias": "xType"; "required": false; "isSignal": true; }; "xFormat": { "alias": "xFormat"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "yTicks": { "alias": "yTicks"; "required": false; "isSignal": true; }; "includeZero": { "alias": "includeZero"; "required": false; "isSignal": true; }; "area": { "alias": "area"; "required": false; "isSignal": true; }; "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showTableToggle": { "alias": "showTableToggle"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; }, { "hidden": "hiddenChange"; }, never, never, true, never>;
+}
+
+/**
+ * `nxe-area-chart` is `nxe-line-chart` with the area under each line filled. It takes every input of
+ * the line chart; add `stacked` to stack the series (a missing value then counts as 0).
+ *
+ * ```html
+ * <nxe-area-chart heading="Spend by month" [categories]="months" [series]="series" stacked />
+ * ```
+ */
+declare class NxeAreaChartComponent extends NxeLineChartComponent {
+    protected readonly areaForced: boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeAreaChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeAreaChartComponent, "nxe-area-chart", never, {}, {}, never, never, true, never>;
+}
+
+interface Segment {
+    readonly key: string;
+    readonly label: string;
+    readonly value: number;
+    readonly color: string;
+    readonly hidden: boolean;
+}
+/**
+ * `nxe-donut-chart` shows how a total divides into parts.
+ *
+ * ```html
+ * <nxe-donut-chart
+ *     heading="Spend by supplier"
+ *     [data]="[{ label: 'PT Maju', value: 420 }, { label: 'CV Sinar', value: 180 }]"
+ *     [maxSegments]="6" />
+ * ```
+ *
+ * Segments take the `--nxe-ui-chart-1..8` colours in order (or a `color` of their own, e.g. a status
+ * family `var(--nxe-ui-status-success-fg)`), separated by a 2px surface gap. When there are more than
+ * `maxSegments`, the smallest fold into one "Other" segment in a neutral colour. The centre shows
+ * the total of the visible segments. The legend lists each segment with its value and share and
+ * toggles it (keyboard accessible); hover or arrow-key focus on the ring shows a tooltip. It
+ * announces itself as an image with a summary, keeps a visually hidden data table (shown by "View
+ * as table"), and uses `nxe-skeleton` and `nxe-empty-state` for loading and no data.
+ *
+ * A donut is for a handful of parts of one whole: past six or so, use a bar chart.
+ */
+declare class NxeDonutChartComponent {
+    private readonly host;
+    protected readonly messages: _nexterajs_ui_core.NxeMessageService;
+    private readonly formatter;
+    /** The parts. Zero, negative and non-finite values are left out. */
+    readonly data: _angular_core.InputSignal<readonly NxeDonutDatum[]>;
+    /** Most segments shown; the rest fold into "Other". At most 9 (eight colours and Other). */
+    readonly maxSegments: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Number pattern for values. Default `#,##0.##`. */
+    readonly valueFormat: _angular_core.InputSignal<string>;
+    /** Decimal places of the percentages. */
+    readonly percentDecimals: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Visible title above the chart; also the start of its accessible summary. */
+    readonly heading: _angular_core.InputSignal<string>;
+    /** Extra sentence for the accessible summary. */
+    readonly description: _angular_core.InputSignal<string>;
+    /** Diameter of the ring in px; it shrinks to fit a narrower container. */
+    readonly size: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Text under the total in the centre. Default: the message "Total". */
+    readonly totalLabel: _angular_core.InputSignal<string | undefined>;
+    /** Show the total in the centre. */
+    readonly showTotal: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Show the legend (value and share per segment, and the toggles). */
+    readonly showLegend: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Show the skeleton instead of the ring. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Offer the "View as table" button. */
+    readonly showTableToggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Keys of the segments the legend has hidden; two-way. */
+    readonly hidden: _angular_core.ModelSignal<readonly string[]>;
+    protected readonly uid: string;
+    private readonly measured;
+    protected readonly hoverIndex: _angular_core.WritableSignal<number | null>;
+    protected readonly keyboardIndex: _angular_core.WritableSignal<number | null>;
+    protected readonly pointer: _angular_core.WritableSignal<{
+        x: number;
+        y: number;
+    } | null>;
+    protected readonly tableShown: _angular_core.WritableSignal<boolean>;
+    constructor();
+    /** Kept segments plus the "Other" remainder; colours follow position, so hiding repaints nothing. */
+    protected readonly all: _angular_core.Signal<Segment[]>;
+    protected readonly shown: _angular_core.Signal<Segment[]>;
+    protected readonly total: _angular_core.Signal<number>;
+    private readonly grandTotal;
+    protected readonly empty: _angular_core.Signal<boolean>;
+    private pct;
+    protected readonly diameter: _angular_core.Signal<number>;
+    private readonly outer;
+    private readonly inner;
+    protected readonly arcs: _angular_core.Signal<{
+        arc: _nexterajs_ui_charts.NxeDonutArc | null;
+        key: string;
+        label: string;
+        value: number;
+        color: string;
+        hidden: boolean;
+    }[]>;
+    protected readonly totalText: _angular_core.Signal<string>;
+    protected readonly totalCaption: _angular_core.Signal<string>;
+    protected readonly activeIndex: _angular_core.Signal<number | null>;
+    protected readonly tooltip: _angular_core.Signal<{
+        label: string;
+        color: string;
+        value: string;
+        share: string;
+        x: number;
+        y: number;
+    } | null>;
+    protected readonly announcement: _angular_core.Signal<string>;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerLeave(): void;
+    protected onFocus(): void;
+    protected onBlur(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected readonly legendItems: _angular_core.Signal<NxeChartLegendItem[]>;
+    protected toggleSegment(key: string): void;
+    protected readonly tableRows: _angular_core.Signal<NxeChartTableRow[]>;
+    protected readonly tableColumns: _angular_core.Signal<string[]>;
+    protected readonly summary: _angular_core.Signal<string>;
+    protected toggleTable(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeDonutChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeDonutChartComponent, "nxe-donut-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "maxSegments": { "alias": "maxSegments"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "percentDecimals": { "alias": "percentDecimals"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "totalLabel": { "alias": "totalLabel"; "required": false; "isSignal": true; }; "showTotal": { "alias": "showTotal"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "showTableToggle": { "alias": "showTableToggle"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; }, { "hidden": "hiddenChange"; }, never, never, true, never>;
+}
+
+/**
+ * The legend of a chart: a swatch and a name per series or segment. Each entry is a toggle button
+ * (`aria-pressed`, reachable and operable from the keyboard) that asks the chart to hide or show
+ * that series. Colour never carries the identity alone: the name is always written.
+ */
+declare class NxeChartLegendComponent {
+    readonly items: _angular_core.InputSignal<readonly NxeChartLegendItem[]>;
+    /** Accessible name of the list. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** `false` renders plain entries instead of toggle buttons. */
+    readonly toggleable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Emits the key of the entry the user toggled. */
+    readonly toggled: _angular_core.OutputEmitterRef<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeChartLegendComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeChartLegendComponent, "nxe-chart-legend", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; }, { "toggled": "toggled"; }, never, never, true, never>;
+}
+
+/**
+ * The data behind a chart as a real table: the alternative for a reader who cannot see the marks.
+ * It is a library-internal native table (the consuming app's own templates still avoid one). The
+ * chart keeps it visually hidden, or shows it in place of the plot under "View as table".
+ */
+declare class NxeChartDataTableComponent {
+    readonly caption: _angular_core.InputSignal<string>;
+    /** Header of the first column (the category or segment). */
+    readonly corner: _angular_core.InputSignal<string>;
+    readonly columns: _angular_core.InputSignal<readonly string[]>;
+    readonly rows: _angular_core.InputSignal<readonly NxeChartTableRow[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeChartDataTableComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeChartDataTableComponent, "nxe-chart-data-table", never, { "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "corner": { "alias": "corner"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NXE_CHART_OTHER_COLOR, NXE_CHART_SLOTS, NxeAreaChartComponent, NxeChartDataTableComponent, NxeChartLegendComponent, NxeDonutChartComponent, NxeLineChartComponent, areaPath, decimalsOf, donutArcs, donutHit, groupOther, labelIndexes, linePath, linearScale, nearestIndex, niceNumber, niceScale, nxeChartColor, patternForDecimals, segments, stackValues };
+export type { NxeCartesianSeries, NxeChartCategory, NxeChartLegendItem, NxeChartPoint, NxeChartTableRow, NxeChartXType, NxeDonutArc, NxeDonutDatum, NxeNiceScale };