@area8975/ui 0.2.2-dev.49 → 0.2.2-dev.50

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

@@ -0,0 +1,747 @@
+import { ChartInk, ChartSeriesStyle } from "@area8975/ui/chart-palette";
+import * as i0 from "@angular/core";
+import { Signal, WritableSignal } from "@angular/core";
+import ApexCharts$1 from "apexcharts";
+/** One entry in a legend, the colour ties it to its marks. */
+export interface ChartLegendItem {
+  name: string;
+  colour: string;
+  /** Shows the key as a dashed line, for series told apart by line style. */
+  dashed?: boolean;
+  /** Text to show instead of `name`. `name` still ties the item to its series. */
+  label?: string;
+}
+/** Anything a legend can be linked to with `for`, every chart is one. */
+export interface ChartLegendSource {
+  readonly legendItems: Signal<ChartLegendItem[]>;
+  readonly legendNote: Signal<string>;
+  /** Series switched off from the legend. */
+  readonly hiddenSeries: WritableSignal<string[]>;
+  /** The series the legend is pointing at, the others fade while it's set. */
+  readonly emphasis: WritableSignal<string | null>;
+}
+/** Where a chart draws its own legend, `none` when one is linked elsewhere. */
+export type ChartLegendPosition = 'auto' | 'none';
+export type ChartOptions = ApexCharts$1.ApexOptions;
+/** One named set of values, one per category. */
+export interface ChartSeries {
+  name: string;
+  data: (number | null)[];
+  /** Overrides the palette slot, keep it for when a series must match something else. */
+  colour?: string;
+  /** Draws the line dashed, e.g. to set projected figures apart from actual ones. Bars ignore it. */
+  dashed?: boolean;
+}
+/** `fill` takes the host's height, which has to come from layout. */
+export type ChartHeight = number | 'fill';
+/** Turns a raw value into what the axis, tooltip and table show, e.g. money. */
+export type ChartValueFormatter = (value: number) => string;
+/** Inputs, privacy handling and legend wiring every chart shares, whatever it draws. */
+declare abstract class UiChartBase implements ChartLegendSource {
+  protected readonly uiFormat: import("@area8975/ui/format").UiFormat;
+  private readonly privacy;
+  protected readonly dark: import("@angular/core").WritableSignal<boolean>;
+  protected readonly ink: Signal<import("@area8975/ui/chart-palette").ChartInk>;
+  /** Says what the chart shows, e.g. "Spending by month". */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly height: import("@angular/core").InputSignal<ChartHeight>;
+  /** Used on the value axis, the tooltip and the table, e.g. to show money. */
+  readonly valueFormatter: import("@angular/core").InputSignal<ChartValueFormatter>;
+  /** Masks the values in privacy mode. Defaults to whether `valueFormatter` came from `injectMoneyFormatter`. */
+  readonly sensitive: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+  /** Heading for the category column in the data table. */
+  readonly categoryLabel: import("@angular/core").InputSignal<string>;
+  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly emptyText: import("@angular/core").InputSignal<string>;
+  /** Shows the data table under the chart instead of only to screen readers. */
+  readonly showTable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Raw ApexCharts options merged over the defaults, for anything not covered here. */
+  readonly options: import("@angular/core").InputSignal<ApexCharts.ApexOptions | null>;
+  /** `none` leaves the legend out, for when a `ui-chart-legend` is linked with `for`. */
+  readonly legend: import("@angular/core").InputSignal<ChartLegendPosition>;
+  /** Series switched off in the legend. */
+  readonly hiddenSeries: import("@angular/core").WritableSignal<string[]>;
+  /** The series the legend is pointing at, the others fade while it's set. */
+  readonly emphasis: import("@angular/core").WritableSignal<string | null>;
+  abstract readonly legendItems: Signal<ChartLegendItem[]>;
+  abstract readonly legendNote: Signal<string>;
+  protected abstract readonly isEmpty: Signal<boolean>;
+  private readonly money;
+  protected readonly privacyMode: Signal<"visible" | "discreet" | "hidden">;
+  protected readonly masked: Signal<boolean>;
+  protected readonly concealed: Signal<boolean>;
+  protected readonly displayFormatter: Signal<ChartValueFormatter>;
+  protected readonly apexHeight: Signal<number | "100%">;
+  protected formatValue(value: number | null | undefined): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiChartBase, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiChartBase, never, never, {
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": true;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "valueFormatter": {
+      "alias": "valueFormatter";
+      "required": false;
+      "isSignal": true;
+    };
+    "sensitive": {
+      "alias": "sensitive";
+      "required": false;
+      "isSignal": true;
+    };
+    "categoryLabel": {
+      "alias": "categoryLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyText": {
+      "alias": "emptyText";
+      "required": false;
+      "isSignal": true;
+    };
+    "showTable": {
+      "alias": "showTable";
+      "required": false;
+      "isSignal": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": false;
+      "isSignal": true;
+    };
+    "legend": {
+      "alias": "legend";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** Inputs every chart with categories along one axis and values up the other shares. */
+declare abstract class UiAxisChartBase extends UiChartBase {
+  readonly series: import("@angular/core").InputSignal<ChartSeries[]>;
+  readonly categories: import("@angular/core").InputSignal<string[]>;
+  /**
+   * Only these series get palette colours, the rest go grey so the few that
+   * matter stand out. The way to show more series than there are colours.
+   */
+  readonly highlight: import("@angular/core").InputSignal<string[] | null>;
+  readonly highlightKeepsColours: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Charts that draw lines can tell series apart by dashes too, bars can't. */
+  protected readonly supportsDashes: boolean;
+  protected readonly isEmpty: import("@angular/core").Signal<boolean>;
+  protected readonly isMuted: import("@angular/core").Signal<boolean[]>;
+  private readonly colourOrder;
+  protected readonly styles: import("@angular/core").Signal<ChartSeriesStyle[]>;
+  protected readonly colours: import("@angular/core").Signal<string[]>;
+  protected readonly dashed: import("@angular/core").Signal<boolean[]>;
+  /** Grey context series stay out of the legend, the note says how many there are. */
+  readonly legendItems: import("@angular/core").Signal<ChartLegendItem[]>;
+  readonly legendNote: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAxisChartBase, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAxisChartBase, never, never, {
+    "series": {
+      "alias": "series";
+      "required": true;
+      "isSignal": true;
+    };
+    "categories": {
+      "alias": "categories";
+      "required": true;
+      "isSignal": true;
+    };
+    "highlight": {
+      "alias": "highlight";
+      "required": false;
+      "isSignal": true;
+    };
+    "highlightKeepsColours": {
+      "alias": "highlightKeepsColours";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * Bars or columns for comparing amounts across categories. Several series
+ * sit side by side, or on top of each other with `stacked`.
+ */
+export declare class UiBarChartComponent extends UiAxisChartBase {
+  readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
+  readonly stacked: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Picks out one category, e.g. the month a page is showing, and fades the rest. */
+  readonly highlightCategory: import("@angular/core").InputSignal<string | null>;
+  protected readonly chartOptions: import("@angular/core").Signal<ApexCharts.ApexOptions>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiBarChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiBarChartComponent, "ui-bar-chart", never, {
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "stacked": {
+      "alias": "stacked";
+      "required": false;
+      "isSignal": true;
+    };
+    "highlightCategory": {
+      "alias": "highlightCategory";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** vertical draws columns rising from the bottom, horizontal draws bars from the left. */
+export declare const BarChartOrientations: readonly ["vertical", "horizontal"];
+/** @see {@link BarChartOrientations} */
+export type BarChartOrientation = typeof BarChartOrientations[number];
+/**
+ * Draws raw ApexCharts options. The typed charts (bar, line and so on) are
+ * built on this, reach for it directly only when they can't do what you need.
+ */
+export declare class UiChartComponent {
+  readonly options: import("@angular/core").InputSignal<ApexCharts$1.ApexOptions>;
+  /** What the chart shows, e.g. "Spending by month". Screen readers get this instead of the SVG. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Series names to keep off the plot, e.g. switched off in the legend. */
+  readonly hiddenSeries: import("@angular/core").InputSignal<string[]>;
+  /** Fades every other series so this one stands out, e.g. while its legend item is hovered. */
+  readonly emphasis: import("@angular/core").InputSignal<string | null>;
+  private readonly canvas;
+  private readonly chart;
+  private destroyed;
+  private drawnNames;
+  private readonly host;
+  private resizeObserver;
+  constructor();
+  private withOwnParentResizing;
+  private redrawWhenResized;
+  private isDrawnAtHostSize;
+  private applyHidden;
+  private applyEmphasis;
+  private seriesNames;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiChartComponent, "ui-chart", never, {
+    "options": {
+      "alias": "options";
+      "required": true;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": true;
+      "isSignal": true;
+    };
+    "hiddenSeries": {
+      "alias": "hiddenSeries";
+      "required": false;
+      "isSignal": true;
+    };
+    "emphasis": {
+      "alias": "emphasis";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** The loading, empty and data table states around a chart, shared by every chart type. */
+export declare class UiChartFrameComponent {
+  /** ApexCharts options to draw, or null for a chart that draws itself as projected content. */
+  readonly options: import("@angular/core").InputSignal<ApexCharts.ApexOptions | null>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly categories: import("@angular/core").InputSignal<string[]>;
+  readonly series: import("@angular/core").InputSignal<ChartSeries[]>;
+  readonly legendItems: import("@angular/core").InputSignal<ChartLegendItem[]>;
+  readonly legendNote: import("@angular/core").InputSignal<string>;
+  readonly hiddenSeries: import("@angular/core").ModelSignal<string[]>;
+  readonly valueFormatter: import("@angular/core").InputSignal<ChartValueFormatter>;
+  readonly categoryLabel: import("@angular/core").InputSignal<string>;
+  readonly height: import("@angular/core").InputSignal<ChartHeight>;
+  readonly emptyText: import("@angular/core").InputSignal<string>;
+  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly empty: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly showTable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly masked: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly showLegend: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** The series the legend is pointing at, the others fade while it's set. */
+  readonly emphasis: import("@angular/core").ModelSignal<string | null>;
+  protected readonly fill: import("@angular/core").Signal<boolean>;
+  protected readonly fixedHeight: import("@angular/core").Signal<number | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiChartFrameComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiChartFrameComponent, "ui-chart-frame", never, {
+    "options": {
+      "alias": "options";
+      "required": true;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": true;
+      "isSignal": true;
+    };
+    "categories": {
+      "alias": "categories";
+      "required": true;
+      "isSignal": true;
+    };
+    "series": {
+      "alias": "series";
+      "required": true;
+      "isSignal": true;
+    };
+    "legendItems": {
+      "alias": "legendItems";
+      "required": true;
+      "isSignal": true;
+    };
+    "legendNote": {
+      "alias": "legendNote";
+      "required": false;
+      "isSignal": true;
+    };
+    "hiddenSeries": {
+      "alias": "hiddenSeries";
+      "required": false;
+      "isSignal": true;
+    };
+    "valueFormatter": {
+      "alias": "valueFormatter";
+      "required": true;
+      "isSignal": true;
+    };
+    "categoryLabel": {
+      "alias": "categoryLabel";
+      "required": true;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": true;
+      "isSignal": true;
+    };
+    "emptyText": {
+      "alias": "emptyText";
+      "required": true;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "empty": {
+      "alias": "empty";
+      "required": false;
+      "isSignal": true;
+    };
+    "showTable": {
+      "alias": "showTable";
+      "required": false;
+      "isSignal": true;
+    };
+    "masked": {
+      "alias": "masked";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLegend": {
+      "alias": "showLegend";
+      "required": false;
+      "isSignal": true;
+    };
+    "emphasis": {
+      "alias": "emphasis";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "hiddenSeries": "hiddenSeriesChange";
+    "emphasis": "emphasisChange";
+  }, never, ["*"], true, never>;
+}
+/**
+ * The numbers behind a chart as a table. Hidden visually by default so screen
+ * readers still get the data, `visible` shows it for everyone.
+ */
+export declare class UiChartTableComponent {
+  readonly caption: import("@angular/core").InputSignal<string>;
+  readonly categories: import("@angular/core").InputSignal<string[]>;
+  readonly series: import("@angular/core").InputSignal<ChartSeries[]>;
+  readonly valueFormatter: import("@angular/core").InputSignal<ChartValueFormatter>;
+  readonly categoryLabel: import("@angular/core").InputSignal<string>;
+  readonly visible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Values are masks, screen readers hear "amount hidden" instead. */
+  readonly masked: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected isValue(value: number | null | undefined): value is number;
+  protected format(value: number | null | undefined): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiChartTableComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiChartTableComponent, "ui-chart-table", never, {
+    "caption": {
+      "alias": "caption";
+      "required": true;
+      "isSignal": true;
+    };
+    "categories": {
+      "alias": "categories";
+      "required": true;
+      "isSignal": true;
+    };
+    "series": {
+      "alias": "series";
+      "required": true;
+      "isSignal": true;
+    };
+    "valueFormatter": {
+      "alias": "valueFormatter";
+      "required": true;
+      "isSignal": true;
+    };
+    "categoryLabel": {
+      "alias": "categoryLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "visible": {
+      "alias": "visible";
+      "required": false;
+      "isSignal": true;
+    };
+    "masked": {
+      "alias": "masked";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * A row of colour keys naming what each colour means. Link it to a chart
+ * with `for`, or pass `items` to use it next to anything coloured by series.
+ */
+export declare class UiChartLegendComponent {
+  readonly items: import("@angular/core").InputSignal<ChartLegendItem[]>;
+  /** Small text after the items, e.g. how many series aren't listed. */
+  readonly note: import("@angular/core").InputSignal<string>;
+  /** A chart to take items from and hide or fade series on, set its `legend` to `none`. */
+  readonly for: import("@angular/core").InputSignal<ChartLegendSource | null>;
+  /** Adjusts the linked chart's items, e.g. to relabel them. Keep each `name`. */
+  readonly itemsWith: import("@angular/core").InputSignal<((items: ChartLegendItem[]) => ChartLegendItem[]) | null>;
+  /** Names of items switched off, bound two-way when `toggleable`. */
+  readonly hidden: import("@angular/core").ModelSignal<string[]>;
+  /** Lets each item be clicked to hide or show its series. */
+  readonly toggleable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** The item being hovered or focused, null when it leaves. Charts fade the other series. */
+  readonly focusChange: import("@angular/core").OutputEmitterRef<string | null>;
+  private readonly hovered;
+  private readonly focused;
+  private readonly pointedAt;
+  protected readonly shownItems: import("@angular/core").Signal<ChartLegendItem[]>;
+  protected readonly shownNote: import("@angular/core").Signal<string>;
+  private readonly hiddenNames;
+  protected readonly visibleCount: import("@angular/core").Signal<number>;
+  constructor();
+  protected hover(name: string | null): void;
+  protected focus(name: string | null, event?: FocusEvent): void;
+  protected isHidden(item: ChartLegendItem): boolean;
+  protected isLocked(item: ChartLegendItem): boolean;
+  protected toggle(item: ChartLegendItem): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiChartLegendComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiChartLegendComponent, "ui-chart-legend", never, {
+    "items": {
+      "alias": "items";
+      "required": false;
+      "isSignal": true;
+    };
+    "note": {
+      "alias": "note";
+      "required": false;
+      "isSignal": true;
+    };
+    "for": {
+      "alias": "for";
+      "required": false;
+      "isSignal": true;
+    };
+    "itemsWith": {
+      "alias": "itemsWith";
+      "required": false;
+      "isSignal": true;
+    };
+    "hidden": {
+      "alias": "hidden";
+      "required": false;
+      "isSignal": true;
+    };
+    "toggleable": {
+      "alias": "toggleable";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "hidden": "hiddenChange";
+    "focusChange": "focusChange";
+  }, never, never, true, never>;
+}
+/**
+ * Lines for showing how values change over something ordered, usually time.
+ * Hovering anywhere shows every series at that point.
+ */
+export declare class UiLineChartComponent extends UiAxisChartBase {
+  protected readonly supportsDashes = true;
+  readonly curve: import("@angular/core").InputSignal<"straight" | "smooth" | "stepline">;
+  /** Draws a dot on every point, not just the hovered one. Handy with few points. */
+  readonly showPoints: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shades this category and everything after it as a forecast. */
+  readonly projectedFrom: import("@angular/core").InputSignal<string | null>;
+  readonly projectedLabel: import("@angular/core").InputSignal<string>;
+  private readonly projectedAnnotations;
+  protected readonly chartOptions: import("@angular/core").Signal<ApexCharts.ApexOptions>;
+  private tooltipOrder;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiLineChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiLineChartComponent, "ui-line-chart", never, {
+    "curve": {
+      "alias": "curve";
+      "required": false;
+      "isSignal": true;
+    };
+    "showPoints": {
+      "alias": "showPoints";
+      "required": false;
+      "isSignal": true;
+    };
+    "projectedFrom": {
+      "alias": "projectedFrom";
+      "required": false;
+      "isSignal": true;
+    };
+    "projectedLabel": {
+      "alias": "projectedLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** How points are joined, straight segments, a smooth curve, or steps. */
+export declare const LineChartCurves: readonly ["straight", "smooth", "stepline"];
+/** @see {@link LineChartCurves} */
+export type LineChartCurve = typeof LineChartCurves[number];
+/**
+ * Slices for showing how a whole splits into parts. Each category is a
+ * slice, only the first series is drawn. Best kept to a handful of slices,
+ * fold the small ones into "Other".
+ */
+export declare class UiPieChartComponent extends UiAxisChartBase {
+  readonly variant: import("@angular/core").InputSignal<"pie" | "donut">;
+  private readonly percentFormatter;
+  /** Shown above the total in the middle of a donut. */
+  readonly totalLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * A colour per slice, lined up with `categories`, e.g. each category's own
+   * colour. A slice without one takes its palette slot. Muted slices stay grey.
+   */
+  readonly sliceColours: import("@angular/core").InputSignal<(string | null | undefined)[]>;
+  protected readonly values: import("@angular/core").Signal<(number | null)[]>;
+  protected readonly isEmpty: import("@angular/core").Signal<boolean>;
+  protected readonly isMuted: import("@angular/core").Signal<boolean[]>;
+  protected readonly styles: import("@angular/core").Signal<ChartSeriesStyle[]>;
+  readonly legendItems: import("@angular/core").Signal<{
+    colour: string;
+    dashed: boolean;
+    name: string;
+  }[]>;
+  private readonly slices;
+  protected readonly chartOptions: import("@angular/core").Signal<ApexCharts.ApexOptions>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiPieChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiPieChartComponent, "ui-pie-chart", never, {
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "totalLabel": {
+      "alias": "totalLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "sliceColours": {
+      "alias": "sliceColours";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** pie fills the whole circle, donut leaves a hole with the total in it. */
+export declare const PieChartVariants: readonly ["pie", "donut"];
+/** @see {@link PieChartVariants} */
+export type PieChartVariant = typeof PieChartVariants[number];
+/** One block inside a group, sized by its value. */
+export interface TreemapItem {
+  name: string;
+  value: number;
+}
+/** A set of items drawn together in one colour, e.g. a category and who it went to. */
+export interface TreemapGroup {
+  name: string;
+  items: TreemapItem[];
+  /** Overrides the palette slot, keep it for when a group must match something else. */
+  colour?: string;
+}
+/** What `itemSelect` emits when a block is clicked. */
+export interface TreemapSelection {
+  group: string;
+  item: string;
+}
+declare const TREEMAP_GROUP_GAP = 8;
+declare const TREEMAP_BLOCK_GAP = 3;
+declare const TREEMAP_HEADER_HEIGHT = 24;
+interface TreemapRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+/** One block as it's drawn, with the colours worked out. */
+interface TreemapBlock {
+  group: string;
+  item: string;
+  value: number;
+  fill: string;
+  labelInk: string;
+}
+/** A group as it's drawn: only its items with something to show. */
+interface DrawnTreemapGroup {
+  name: string;
+  colour: string;
+  total: number;
+  blocks: TreemapBlock[];
+}
+/** How much of its label a block has room for. */
+type TreemapLabel = 'none' | 'name' | 'full';
+interface PlacedTreemapBlock extends TreemapBlock {
+  rect: TreemapRect;
+  label: TreemapLabel;
+}
+interface PlacedTreemapGroup extends DrawnTreemapGroup {
+  rect: TreemapRect;
+  hasHeader: boolean;
+  placedBlocks: PlacedTreemapBlock[];
+}
+/** A group's own colour, or its palette slot, then grey once the palette runs out. */
+declare function treemapGroupColours(groups: TreemapGroup[], dark: boolean): string[];
+/**
+ * The groups worth drawing: hidden ones and items of zero or less are left out,
+ * then any group left with nothing.
+ */
+declare function drawnTreemapGroups(groups: TreemapGroup[], colours: string[], hidden: string[], shades: boolean, ink: ChartInk): DrawnTreemapGroup[];
+/** Every block as one row of the data table, named "<group> – <item>". */
+declare function treemapTableRows(groups: TreemapGroup[]): {
+  categories: string[];
+  values: number[];
+};
+/**
+ * Places each group in `bounds`, a header strip along its top when there's
+ * room, and its blocks under that. Positions are relative to `bounds`, and
+ * each block's are relative to its group.
+ */
+declare function placeTreemapGroups(groups: DrawnTreemapGroup[], bounds: TreemapRect): PlacedTreemapGroup[];
+/**
+ * Splits `bounds` into one rectangle per value, each sized by its share and
+ * kept as close to square as the others allow (the squarified treemap of
+ * Bruls, Huizing and van Wijk). Rectangles come back in the order of
+ * `values`, with `gap` between neighbours but none at the edges.
+ */
+declare function squarify(values: number[], bounds: TreemapRect, gap?: number): TreemapRect[];
+interface PointedBlock {
+  group: PlacedTreemapGroup;
+  block: PlacedTreemapBlock;
+  x: number;
+  y: number;
+}
+/**
+ * Nested blocks sized by value, for showing how a whole splits into groups
+ * and each group into items, e.g. spending by category and who it went to.
+ * Past eight groups the palette runs out and the rest go grey, so give each
+ * group a `colour` when there can be more.
+ */
+export declare class UiTreemapChartComponent extends UiChartBase {
+  readonly groups: import("@angular/core").InputSignal<TreemapGroup[]>;
+  readonly height: import("@angular/core").InputSignal<ChartHeight>;
+  /** Shades each group's items from its colour, biggest strongest, so they stay told apart. */
+  readonly shades: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Makes each block a button that emits `itemSelect`. */
+  readonly selectable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Heading for the value column in the data table. */
+  readonly valueLabel: import("@angular/core").InputSignal<string>;
+  readonly itemSelect: import("@angular/core").OutputEmitterRef<TreemapSelection>;
+  private readonly canvas;
+  private readonly size;
+  protected readonly pointed: import("@angular/core").WritableSignal<PointedBlock | null>;
+  /** Set once the first layout is drawn, so blocks glide to new places after that but don't grow in from nothing. */
+  protected readonly settled: import("@angular/core").WritableSignal<boolean>;
+  private readonly percentFormatter;
+  protected readonly fill: import("@angular/core").Signal<boolean>;
+  protected readonly fixedHeight: import("@angular/core").Signal<number | null>;
+  private readonly colours;
+  private readonly drawnGroups;
+  protected readonly placedGroups: import("@angular/core").Signal<PlacedTreemapGroup[]>;
+  private readonly total;
+  private readonly tableRows;
+  protected readonly categories: import("@angular/core").Signal<string[]>;
+  protected readonly series: import("@angular/core").Signal<ChartSeries[]>;
+  protected readonly isEmpty: import("@angular/core").Signal<boolean>;
+  readonly legendItems: import("@angular/core").Signal<ChartLegendItem[]>;
+  readonly legendNote: import("@angular/core").Signal<string>;
+  private readonly emphasised;
+  protected readonly tooltipFooter: import("@angular/core").Signal<string>;
+  protected readonly tooltipPosition: import("@angular/core").Signal<{
+    left: number | null;
+    right: number | null;
+    top: number;
+  } | null>;
+  constructor();
+  protected isFaded(group: PlacedTreemapGroup): boolean;
+  protected point(event: PointerEvent, group: PlacedTreemapGroup, block: PlacedTreemapBlock): void;
+  protected focus(group: PlacedTreemapGroup, block: PlacedTreemapBlock): void;
+  protected select(block: PlacedTreemapBlock): void;
+  protected accessibleName(block: PlacedTreemapBlock): string;
+  private percent;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiTreemapChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiTreemapChartComponent, "ui-treemap-chart", never, {
+    "groups": {
+      "alias": "groups";
+      "required": true;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "shades": {
+      "alias": "shades";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectable": {
+      "alias": "selectable";
+      "required": false;
+      "isSignal": true;
+    };
+    "valueLabel": {
+      "alias": "valueLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "itemSelect": "itemSelect";
+  }, never, never, true, never>;
+}