@skdx/angular-charts 0.33.0 → 0.34.1

package/README.md

@@ -1,7 +1,7 @@
 # @skdx/angular-charts
 
-Eighteen SVG charts for angular. Plain SVG colored by `@skdx/tokens`; load
-`@skdx/tokens/css` once so the colors resolve.
+Forty SVG charts for Angular. Plain SVG colored by `@skdx/tokens`; load `@skdx/tokens/css` once
+so the colors resolve.
 
 ```sh
 pnpm add @skdx/angular-charts @skdx/tokens
@@ -12,46 +12,109 @@ import { SkdxBarChartComponent } from '@skdx/angular-charts/bar';
 
 @Component({
   imports: [SkdxBarChartComponent],
-  template: `<skdx-bar-chart [series]="series" [categories]="['Q1', 'Q2', 'Q3']"></skdx-bar-chart>`,
+  template: `
+    <skdx-bar-chart
+      [series]="series"
+      [categories]="['Jan', 'Feb', 'Mar']"
+      [format]="{ style: 'currency', currency: 'USD', digits: 0 }"
+    ></skdx-bar-chart>
+  `,
 })
-export class Sales {
-  series = [{ name: 'Sales', data: [3, 5, 2] }];
+export class Revenue {
+  series = [{ name: 'MRR', data: [118_000, 124_500, 131_200] }];
 }
 ```
 
-Every chart takes `width`, `height` and `label` (the accessible name). Bar, line, area and radar
-take `series` (`{ name, data, color? }[]`) and `categories`; bar also takes `stacked`. Pie and
-funnel take `data` (`{ name, value, color? }[]`); pie also takes `innerRadius` (0 to 0.95) for a
-donut. Scatter takes `series` of `[x, y]` pairs. Sparkline takes `data` (`number[]`). Heatmap takes
-`rows`, `columns` and `data` (`number[][]`).
-
-Sankey takes `links` (`{ source, target, value }[]`). Treemap takes `data` like pie. Candlestick
-takes `data` as `{ label, open, high, low, close }[]`. Waterfall takes signed `data` deltas and an
-optional `total` label. Gantt takes `tasks` (`{ name, start, end }[]`) and an optional tick
-`format`. Boxplot takes `series` of raw samples. Sunburst takes `data` as a tree of
-`{ name, value?, children? }`. Chord takes `names` and a flow `matrix`. Map takes `features`
-(`{ name, value, geometry }[]` with GeoJSON Polygon or MultiPolygon geometry) and an optional
-`color`.
-Each mark carries a native `<title>` tooltip and a `data-skdx-part` attribute for styling.
-
-Every chart is also a secondary entry point (`@skdx/angular-charts/bar`, `/line`, … `/map`), so
-an app bundles only what it imports.
-
-## Options
-
-Every chart takes `legend` (a swatch row above the plot, off by default) and `tooltip` (a hover
-tooltip for the mark under the pointer, on by default; the native `<title>` stays regardless).
-Charts scale down with their container while keeping their aspect ratio.
-
-| Chart                 | Option                       | Effect                                                           |
-| --------------------- | ---------------------------- | ---------------------------------------------------------------- |
-| line, area, sparkline | `curve: 'monotone'`          | Smooth cubic segments that never overshoot the data              |
-| pie                   | `labels`                     | Name and share written on each slice                             |
-| radar                 | `normalize`                  | Each series scaled to its own maximum; rings read as percentages |
-| heatmap               | `diverging`, `negativeColor` | Split around zero, opacity by distance from zero                 |
-| waterfall             | `total`                      | Label for a closing bar showing the running total                |
-| gantt                 | `format`                     | Formats the time ticks, e.g. a timestamp as a date               |
-| candlestick           | `scale: 'log'`               | Logarithmic price axis with ticks at powers of ten               |
-| treemap               | nested `children`            | Branches outlined, children tiled inside                         |
-| sankey                | (always)                     | Links that would close a cycle are dropped                       |
-| map                   | `projection: 'mercator'`     | Mercator instead of equirectangular                              |
+Every chart takes `width`, `height`, `label` (the accessible name), `description`, `decorative`,
+`legend`, `tooltip`, `format`, `palette`, `hiddenSeries`, `loading`, `error` and `emptyMessage`.
+Bar, line and area take `series` (`{ name, data, type?, axis?, curve?, dash?, markers?, stack? }[]`,
+or `{ type: 'range', name, low, high }`) and `categories` (strings, numbers or dates). Pie, funnel
+and radial take `data` (`{ name, value, color? }[]`). Scatter takes `series` of `[x, y]` pairs or
+`[x, y, size]` triples. Sparkline takes `data` (`(number | null)[]`). Heatmap takes `rows`, `columns`
+and `data` (`(number | null)[][]`), or `calendar` (`{ date, value }[]`). Radar takes `series` and
+`categories`.
+
+Sankey takes `links` (`{ source, target, value }[]`). Treemap and sunburst take `data` as a tree of
+`{ name, value?, children? }`. Candlestick takes `data` as `{ label, open, high, low, close, volume? }[]`.
+Waterfall takes signed `data` deltas and an optional `total` label. Gantt takes `tasks`
+(`{ name, start, end, group? }[]`). Boxplot takes `series` of raw samples. Chord takes `names` and a
+flow `matrix`. Map takes `features` (`{ name, value, geometry }[]` with GeoJSON Polygon or
+MultiPolygon geometry). `null` and `NaN` values are gaps; an empty chart renders "No data available".
+
+Gauge takes one `value` with `min`/`max`, `bands` and a `target`. Bullet takes `data`
+(`{ name, value, target?, ranges? }[]`). Histogram takes `data` as a raw sample and bins it.
+Bubble takes `series` of `{ x, y, z, label? }`. Combo takes the cartesian `series` with a required
+`type` per series. Range takes `series` of `{ name, low, high }` and a `variant`. Network takes
+`nodes` (`{ id, label?, value?, group? }[]`) and `edges` (`{ source, target, value? }[]`). Timeline
+takes `events` (`{ date, label, description?, group? }[]`). One reference page per chart is in
+[docs/charts](../../docs/charts/README.md).
+
+Every chart also takes `animate` (fade in and transition on change; `true` is 300 ms, a number sets
+the duration, off under `prefers-reduced-motion` and above 1500 shapes) and `responsive` (lay out
+at the container's width so text keeps its size). Cartesian charts take `xAxis.type: 'time' |
+'linear'` to place numeric or date categories proportionally.
+
+Every mark carries a native `<title>` tooltip and a `data-skdx-part` attribute for styling. The
+full option reference, the mixed-series (bar + line + range) cartesian model, references, zoom,
+brush, crosshair, histogram, formatting and the accessibility contract are documented once in the
+[repository README](../../README.md); the decisions behind them in [CHARTS.md](../../CHARTS.md).
+
+## Interaction
+
+Every chart is keyboard accessible: it takes focus, arrow keys step through the marks with a focus
+ring and tooltip, Home/End jump, Escape clears and Enter/Space clicks. Clicking a legend entry hides
+its series while colors stay stable. Bar, line, area and candlestick charts also zoom (wheel around
+the pointer, drag to pan, double-click to reset), brush (a range strip under the plot) and snap a
+shared tooltip to the nearest category (`crosshair`). Two fingers pinch-zoom on touch screens.
+
+| Capability          | Angular spelling                                        |
+| ------------------- | ------------------------------------------------------- |
+| item click          | `(itemClick)="onItem($event)"`                          |
+| legend toggles      | uncontrolled by default, or `[(hiddenSeries)]="hidden"` |
+| zoom                | `[zoomable]="true"`; `[(zoom)]="zoom"` for control      |
+| brush and crosshair | `[brush]="true"`, `[crosshair]="true"`                  |
+| motion and sizing   | `[animate]="true"`, `[responsive]="true"`               |
+
+## Example: an observability panel
+
+```ts
+import { Component, signal } from '@angular/core';
+
+import type { ChartItem, Zoom } from '@skdx/angular-charts';
+import { SkdxLineChartComponent } from '@skdx/angular-charts/line';
+
+@Component({
+  imports: [SkdxLineChartComponent],
+  template: `
+    <skdx-line-chart
+      label="p95 latency, last 24 hours"
+      [categories]="timestamps"
+      [xAxis]="{ format: { style: 'time' } }"
+      [format]="{ style: 'integer', unit: ' ms' }"
+      [series]="series"
+      [rightAxis]="{ format: { style: 'percent' }, max: 0.05 }"
+      [references]="[{ y: 300, label: 'SLA', variant: 'warning' }]"
+      [crosshair]="true"
+      [zoomable]="true"
+      [brush]="true"
+      [legend]="true"
+      [(zoom)]="zoom"
+      [(hiddenSeries)]="hidden"
+      (itemClick)="onItem($event)"
+    ></skdx-line-chart>
+  `,
+})
+export class LatencyPanel {
+  timestamps = timestamps;
+  series = [
+    { name: 'p95', data: points.p95 },
+    { name: 'p50', data: points.p50, dash: '4 3' },
+    { name: 'Error rate', type: 'bar' as const, data: points.errors, axis: 'right' as const },
+  ];
+  zoom = signal<Zoom | undefined>(undefined);
+  hidden = signal<string[] | undefined>(undefined);
+  onItem(item: ChartItem) {
+    console.log(item.series, item.category, item.value);
+  }
+}
+```

package/fesm2022/skdx-angular-charts-area.mjs

@@ -7,7 +7,7 @@ import { SkdxChartBase, layoutAreaChart, SkdxChartRootComponent } from '@skdx/an
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-/** A line chart with each series filled down to the zero baseline. */
+/** Filled, optionally stacked, areas down to zero; series may also be bars, lines or ranges. */
 class SkdxAreaChartComponent extends SkdxChartBase {
     constructor() {
         super(...arguments);
@@ -18,10 +18,27 @@ class SkdxAreaChartComponent extends SkdxChartBase {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: SkdxAreaChartComponent, isStandalone: true, selector: "skdx-area-chart", usesInheritance: true, ngImport: i0, template: `
     <skdx-chart-root
       [layout]="layout()"
+      [options]="options()"
       kind="area"
       [label]="label() ?? 'Area chart'"
+      [zoomable]="zoomable()"
+      [selectionMode]="selectionMode()"
+      [editable]="editable()"
+      [syncId]="syncId()"
+      [crosshair]="syncedCrosshair()"
+      [responsive]="!!responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (dataIssue)="dataIssue.emit($event)"
+      (taskChange)="taskChange.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (viewChange)="view.set($event)"
+      (selectedChange)="selected.set($event)"
+      (highlightedChange)="highlighted.set($event)"
+      (syncChange)="sync($event)"
+      (measured)="measuredWidth.set($event)"
     ></skdx-chart-root>
-  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "kind", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "options", "kind", "label", "zoomable", "selectionMode", "editable", "syncId", "crosshair", "responsive"], outputs: ["itemClick", "hiddenSeriesChange", "zoomChange", "viewChange", "selectedChange", "highlightedChange", "dataIssue", "taskChange", "syncChange", "measured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxAreaChartComponent, decorators: [{
             type: Component,
@@ -33,8 +50,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     template: `
     <skdx-chart-root
       [layout]="layout()"
+      [options]="options()"
       kind="area"
       [label]="label() ?? 'Area chart'"
+      [zoomable]="zoomable()"
+      [selectionMode]="selectionMode()"
+      [editable]="editable()"
+      [syncId]="syncId()"
+      [crosshair]="syncedCrosshair()"
+      [responsive]="!!responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (dataIssue)="dataIssue.emit($event)"
+      (taskChange)="taskChange.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (viewChange)="view.set($event)"
+      (selectedChange)="selected.set($event)"
+      (highlightedChange)="highlighted.set($event)"
+      (syncChange)="sync($event)"
+      (measured)="measuredWidth.set($event)"
     ></skdx-chart-root>
   `,
                 }]

package/fesm2022/skdx-angular-charts-area.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skdx-angular-charts-area.mjs","sources":["../../src/area/index.ts","../../src/area/skdx-angular-charts-area.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\n\nimport {\n  layoutAreaChart,\n  SkdxChartBase,\n  SkdxChartRootComponent,\n} from '@skdx/angular-charts/internal';\n\n/** A line chart with each series filled down to the zero baseline. */\n@Component({\n  selector: 'skdx-area-chart',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SkdxChartRootComponent],\n  template: `\n    <skdx-chart-root\n      [layout]=\"layout()\"\n      kind=\"area\"\n      [label]=\"label() ?? 'Area chart'\"\n    ></skdx-chart-root>\n  `,\n})\nexport class SkdxAreaChartComponent extends SkdxChartBase {\n  protected readonly layout = computed(() => layoutAreaChart(this.input()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAUH;AAcM,MAAO,sBAAuB,SAAQ,aAAa,CAAA;AAbzD,IAAA,WAAA,GAAA;;AAcqB,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;mFAAC;AAC1E,IAAA;8GAFY,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EARvB;;;;;;AAMT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAPS,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FASrB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAblC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,QAAQ,EAAE;;;;;;AAMT,EAAA,CAAA;AACF,iBAAA;;;AC3BD;;AAEG;;"}
+{"version":3,"file":"skdx-angular-charts-area.mjs","sources":["../../src/area/index.ts","../../src/area/skdx-angular-charts-area.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\n\nimport {\n  layoutAreaChart,\n  SkdxChartBase,\n  SkdxChartRootComponent,\n} from '@skdx/angular-charts/internal';\n\n/** Filled, optionally stacked, areas down to zero; series may also be bars, lines or ranges. */\n@Component({\n  selector: 'skdx-area-chart',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SkdxChartRootComponent],\n  template: `\n    <skdx-chart-root\n      [layout]=\"layout()\"\n      [options]=\"options()\"\n      kind=\"area\"\n      [label]=\"label() ?? 'Area chart'\"\n      [zoomable]=\"zoomable()\"\n      [selectionMode]=\"selectionMode()\"\n      [editable]=\"editable()\"\n      [syncId]=\"syncId()\"\n      [crosshair]=\"syncedCrosshair()\"\n      [responsive]=\"!!responsive()\"\n      (itemClick)=\"itemClick.emit($event)\"\n      (dataIssue)=\"dataIssue.emit($event)\"\n      (taskChange)=\"taskChange.emit($event)\"\n      (hiddenSeriesChange)=\"toggle($event)\"\n      (zoomChange)=\"zoom.set($event)\"\n      (viewChange)=\"view.set($event)\"\n      (selectedChange)=\"selected.set($event)\"\n      (highlightedChange)=\"highlighted.set($event)\"\n      (syncChange)=\"sync($event)\"\n      (measured)=\"measuredWidth.set($event)\"\n    ></skdx-chart-root>\n  `,\n})\nexport class SkdxAreaChartComponent extends SkdxChartBase {\n  protected readonly layout = computed(() => layoutAreaChart(this.input()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAUH;AA+BM,MAAO,sBAAuB,SAAQ,aAAa,CAAA;AA9BzD,IAAA,WAAA,GAAA;;AA+BqB,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;mFAAC;AAC1E,IAAA;8GAFY,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAzBvB;;;;;;;;;;;;;;;;;;;;;;;AAuBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAxBS,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,eAAA,EAAA,UAAA,EAAA,QAAA,EAAA,WAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,WAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,YAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FA0BrB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBA9BlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;AAuBT,EAAA,CAAA;AACF,iBAAA;;;AC5CD;;AAEG;;"}

package/fesm2022/skdx-angular-charts-bar.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { SkdxChartBase, layoutBarChart, SkdxChartRootComponent } from '@skdx/angular-charts/internal';
 
 /*
@@ -7,30 +7,38 @@ import { SkdxChartBase, layoutBarChart, SkdxChartRootComponent } from '@skdx/ang
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-/**
- * Grouped or stacked vertical bars, one per value.
- *
- * ```html
- * <skdx-bar-chart [series]="[{ name: 'Sales', data: [3, 5, 2] }]" [categories]="['Q1', 'Q2', 'Q3']"></skdx-bar-chart>
- * ```
- */
+/** Grouped, stacked, horizontal or histogram bars; series may also be lines, areas or ranges. */
 class SkdxBarChartComponent extends SkdxChartBase {
     constructor() {
         super(...arguments);
-        /** Stack series on top of each other instead of grouping them side by side. */
-        this.stacked = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
-        this.layout = computed(() => layoutBarChart({ ...this.input(), stacked: this.stacked() }), /* @ts-ignore */
+        this.layout = computed(() => layoutBarChart(this.input()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxBarChartComponent, isStandalone: true, selector: "skdx-bar-chart", inputs: { stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: SkdxBarChartComponent, isStandalone: true, selector: "skdx-bar-chart", usesInheritance: true, ngImport: i0, template: `
     <skdx-chart-root
       [layout]="layout()"
+      [options]="options()"
       kind="bar"
       [label]="label() ?? 'Bar chart'"
+      [zoomable]="zoomable()"
+      [selectionMode]="selectionMode()"
+      [editable]="editable()"
+      [syncId]="syncId()"
+      [crosshair]="syncedCrosshair()"
+      [responsive]="!!responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (dataIssue)="dataIssue.emit($event)"
+      (taskChange)="taskChange.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (viewChange)="view.set($event)"
+      (selectedChange)="selected.set($event)"
+      (highlightedChange)="highlighted.set($event)"
+      (syncChange)="sync($event)"
+      (measured)="measuredWidth.set($event)"
     ></skdx-chart-root>
-  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "kind", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "options", "kind", "label", "zoomable", "selectionMode", "editable", "syncId", "crosshair", "responsive"], outputs: ["itemClick", "hiddenSeriesChange", "zoomChange", "viewChange", "selectedChange", "highlightedChange", "dataIssue", "taskChange", "syncChange", "measured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBarChartComponent, decorators: [{
             type: Component,
@@ -42,12 +50,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     template: `
     <skdx-chart-root
       [layout]="layout()"
+      [options]="options()"
       kind="bar"
       [label]="label() ?? 'Bar chart'"
+      [zoomable]="zoomable()"
+      [selectionMode]="selectionMode()"
+      [editable]="editable()"
+      [syncId]="syncId()"
+      [crosshair]="syncedCrosshair()"
+      [responsive]="!!responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (dataIssue)="dataIssue.emit($event)"
+      (taskChange)="taskChange.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (viewChange)="view.set($event)"
+      (selectedChange)="selected.set($event)"
+      (highlightedChange)="highlighted.set($event)"
+      (syncChange)="sync($event)"
+      (measured)="measuredWidth.set($event)"
     ></skdx-chart-root>
   `,
                 }]
-        }], propDecorators: { stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }] } });
+        }] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/skdx-angular-charts-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skdx-angular-charts-bar.mjs","sources":["../../src/bar/index.ts","../../src/bar/skdx-angular-charts-bar.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nimport {\n  layoutBarChart,\n  SkdxChartBase,\n  SkdxChartRootComponent,\n} from '@skdx/angular-charts/internal';\n\n/**\n * Grouped or stacked vertical bars, one per value.\n *\n * ```html\n * <skdx-bar-chart [series]=\"[{ name: 'Sales', data: [3, 5, 2] }]\" [categories]=\"['Q1', 'Q2', 'Q3']\"></skdx-bar-chart>\n * ```\n */\n@Component({\n  selector: 'skdx-bar-chart',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SkdxChartRootComponent],\n  template: `\n    <skdx-chart-root\n      [layout]=\"layout()\"\n      kind=\"bar\"\n      [label]=\"label() ?? 'Bar chart'\"\n    ></skdx-chart-root>\n  `,\n})\nexport class SkdxBarChartComponent extends SkdxChartBase {\n  /** Stack series on top of each other instead of grouping them side by side. */\n  readonly stacked = input(false);\n\n  protected readonly layout = computed(() =>\n    layoutBarChart({ ...this.input(), stacked: this.stacked() }),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAUH;;;;;;AAMG;AAcG,MAAO,qBAAsB,SAAQ,aAAa,CAAA;AAbxD,IAAA,WAAA,GAAA;;;QAeW,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,KAAK;oFAAC;QAEZ,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MACnC,cAAc,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;mFAC7D;AACF,IAAA;8GAPY,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EARtB;;;;;;AAMT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAPS,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FASrB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAbjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,QAAQ,EAAE;;;;;;AAMT,EAAA,CAAA;AACF,iBAAA;;;ACjCD;;AAEG;;"}
+{"version":3,"file":"skdx-angular-charts-bar.mjs","sources":["../../src/bar/index.ts","../../src/bar/skdx-angular-charts-bar.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\n\nimport {\n  layoutBarChart,\n  SkdxChartBase,\n  SkdxChartRootComponent,\n} from '@skdx/angular-charts/internal';\n\n/** Grouped, stacked, horizontal or histogram bars; series may also be lines, areas or ranges. */\n@Component({\n  selector: 'skdx-bar-chart',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SkdxChartRootComponent],\n  template: `\n    <skdx-chart-root\n      [layout]=\"layout()\"\n      [options]=\"options()\"\n      kind=\"bar\"\n      [label]=\"label() ?? 'Bar chart'\"\n      [zoomable]=\"zoomable()\"\n      [selectionMode]=\"selectionMode()\"\n      [editable]=\"editable()\"\n      [syncId]=\"syncId()\"\n      [crosshair]=\"syncedCrosshair()\"\n      [responsive]=\"!!responsive()\"\n      (itemClick)=\"itemClick.emit($event)\"\n      (dataIssue)=\"dataIssue.emit($event)\"\n      (taskChange)=\"taskChange.emit($event)\"\n      (hiddenSeriesChange)=\"toggle($event)\"\n      (zoomChange)=\"zoom.set($event)\"\n      (viewChange)=\"view.set($event)\"\n      (selectedChange)=\"selected.set($event)\"\n      (highlightedChange)=\"highlighted.set($event)\"\n      (syncChange)=\"sync($event)\"\n      (measured)=\"measuredWidth.set($event)\"\n    ></skdx-chart-root>\n  `,\n})\nexport class SkdxBarChartComponent extends SkdxChartBase {\n  protected readonly layout = computed(() => layoutBarChart(this.input()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAUH;AA+BM,MAAO,qBAAsB,SAAQ,aAAa,CAAA;AA9BxD,IAAA,WAAA,GAAA;;AA+BqB,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;mFAAC;AACzE,IAAA;8GAFY,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAzBtB;;;;;;;;;;;;;;;;;;;;;;;AAuBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAxBS,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,eAAA,EAAA,UAAA,EAAA,QAAA,EAAA,WAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,WAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,YAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FA0BrB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBA9BjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;AAuBT,EAAA,CAAA;AACF,iBAAA;;;AC5CD;;AAEG;;"}

package/fesm2022/skdx-angular-charts-boxplot.mjs

@@ -7,23 +7,74 @@ import { SkdxSizedBase, layoutBoxplot, SkdxChartRootComponent } from '@skdx/angu
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-/** Quartile boxes with Tukey whiskers and outliers, one per series. */
+/** One Tukey box per series over its raw samples. */
 class SkdxBoxplotComponent extends SkdxSizedBase {
     constructor() {
         super(...arguments);
+        /** Raw samples, or precomputed summaries. */
         this.series = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
-        this.l = computed(() => layoutBoxplot({ ...this.sized(), series: this.series() }), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "l" }] : /* istanbul ignore next */ []));
+        this.orientation = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "orientation" }] : /* istanbul ignore next */ []));
+        /** How quartiles are taken from a sample. */
+        this.quartileMethod = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "quartileMethod" }] : /* istanbul ignore next */ []));
+        /** Whisker reach as a multiple of the IQR. */
+        this.whisker = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "whisker" }] : /* istanbul ignore next */ []));
+        /** Mark the mean with a diamond. */
+        this.mean = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mean" }] : /* istanbul ignore next */ []));
+        /** Draw every observation, jittered. */
+        this.points = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []));
+        /** Notch the box around the median. */
+        this.notched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "notched" }] : /* istanbul ignore next */ []));
+        /** Groups: one box per series inside each category. */
+        this.categories = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "categories" }] : /* istanbul ignore next */ []));
+        this.yAxis = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "yAxis" }] : /* istanbul ignore next */ []));
+        this.layout = computed(() => layoutBoxplot({
+            ...this.sized(),
+            series: this.series(),
+            orientation: this.orientation(),
+            quartileMethod: this.quartileMethod(),
+            whisker: this.whisker(),
+            mean: this.mean(),
+            points: this.points(),
+            notched: this.notched(),
+            categories: this.categories(),
+            yAxis: this.yAxis(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBoxplotComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxBoxplotComponent, isStandalone: true, selector: "skdx-boxplot", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxBoxplotComponent, isStandalone: true, selector: "skdx-boxplot", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, quartileMethod: { classPropertyName: "quartileMethod", publicName: "quartileMethod", isSignal: true, isRequired: false, transformFunction: null }, whisker: { classPropertyName: "whisker", publicName: "whisker", isSignal: true, isRequired: false, transformFunction: null }, mean: { classPropertyName: "mean", publicName: "mean", isSignal: true, isRequired: false, transformFunction: null }, points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: false, transformFunction: null }, notched: { classPropertyName: "notched", publicName: "notched", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, yAxis: { classPropertyName: "yAxis", publicName: "yAxis", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
     <skdx-chart-root
-      [layout]="l()"
+      [layout]="layout()"
+      [options]="options()"
       kind="boxplot"
       [label]="label() ?? 'Box plot'"
+      [zoomable]="zoomable()"
+      [selectionMode]="selectionMode()"
+      [editable]="editable()"
+      [syncId]="syncId()"
+      [crosshair]="syncedCrosshair()"
+      [responsive]="!!responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (dataIssue)="dataIssue.emit($event)"
+      (taskChange)="taskChange.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (viewChange)="view.set($event)"
+      (selectedChange)="selected.set($event)"
+      (highlightedChange)="highlighted.set($event)"
+      (syncChange)="sync($event)"
+      (measured)="measuredWidth.set($event)"
     ></skdx-chart-root>
-  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "kind", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "options", "kind", "label", "zoomable", "selectionMode", "editable", "syncId", "crosshair", "responsive"], outputs: ["itemClick", "hiddenSeriesChange", "zoomChange", "viewChange", "selectedChange", "highlightedChange", "dataIssue", "taskChange", "syncChange", "measured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBoxplotComponent, decorators: [{
             type: Component,
@@ -34,13 +85,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     imports: [SkdxChartRootComponent],
                     template: `
     <skdx-chart-root
-      [layout]="l()"
+      [layout]="layout()"
+      [options]="options()"
       kind="boxplot"
       [label]="label() ?? 'Box plot'"
+      [zoomable]="zoomable()"
+      [selectionMode]="selectionMode()"
+      [editable]="editable()"
+      [syncId]="syncId()"
+      [crosshair]="syncedCrosshair()"
+      [responsive]="!!responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (dataIssue)="dataIssue.emit($event)"
+      (taskChange)="taskChange.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (viewChange)="view.set($event)"
+      (selectedChange)="selected.set($event)"
+      (highlightedChange)="highlighted.set($event)"
+      (syncChange)="sync($event)"
+      (measured)="measuredWidth.set($event)"
     ></skdx-chart-root>
   `,
                 }]
-        }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }] } });
+        }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], quartileMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "quartileMethod", required: false }] }], whisker: [{ type: i0.Input, args: [{ isSignal: true, alias: "whisker", required: false }] }], mean: [{ type: i0.Input, args: [{ isSignal: true, alias: "mean", required: false }] }], points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: false }] }], notched: [{ type: i0.Input, args: [{ isSignal: true, alias: "notched", required: false }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], yAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxis", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/skdx-angular-charts-boxplot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skdx-angular-charts-boxplot.mjs","sources":["../../src/boxplot/index.ts","../../src/boxplot/skdx-angular-charts-boxplot.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nimport {\n  layoutBoxplot,\n  type Series,\n  SkdxChartRootComponent,\n  SkdxSizedBase,\n} from '@skdx/angular-charts/internal';\n\n/** Quartile boxes with Tukey whiskers and outliers, one per series. */\n@Component({\n  selector: 'skdx-boxplot',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SkdxChartRootComponent],\n  template: `\n    <skdx-chart-root\n      [layout]=\"l()\"\n      kind=\"boxplot\"\n      [label]=\"label() ?? 'Box plot'\"\n    ></skdx-chart-root>\n  `,\n})\nexport class SkdxBoxplotComponent extends SkdxSizedBase {\n  readonly series = input.required<Series[]>();\n\n  protected readonly l = computed(() => layoutBoxplot({ ...this.sized(), series: this.series() }));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAWH;AAcM,MAAO,oBAAqB,SAAQ,aAAa,CAAA;AAbvD,IAAA,WAAA,GAAA;;QAcW,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,QAAQ;mFAAY;QAEzB,IAAA,CAAA,CAAC,GAAG,QAAQ,CAAC,MAAM,aAAa,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;8EAAC;AACjG,IAAA;8GAJY,oBAAoB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EARrB;;;;;;AAMT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAPS,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FASrB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAbhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,QAAQ,EAAE;;;;;;AAMT,EAAA,CAAA;AACF,iBAAA;;;AC5BD;;AAEG;;"}
+{"version":3,"file":"skdx-angular-charts-boxplot.mjs","sources":["../../src/boxplot/index.ts","../../src/boxplot/skdx-angular-charts-boxplot.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nimport {\n  layoutBoxplot,\n  SkdxChartRootComponent,\n  SkdxSizedBase,\n  type AxisOptions,\n  type BoxplotSeries,\n} from '@skdx/angular-charts/internal';\n\n/** One Tukey box per series over its raw samples. */\n@Component({\n  selector: 'skdx-boxplot',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SkdxChartRootComponent],\n  template: `\n    <skdx-chart-root\n      [layout]=\"layout()\"\n      [options]=\"options()\"\n      kind=\"boxplot\"\n      [label]=\"label() ?? 'Box plot'\"\n      [zoomable]=\"zoomable()\"\n      [selectionMode]=\"selectionMode()\"\n      [editable]=\"editable()\"\n      [syncId]=\"syncId()\"\n      [crosshair]=\"syncedCrosshair()\"\n      [responsive]=\"!!responsive()\"\n      (itemClick)=\"itemClick.emit($event)\"\n      (dataIssue)=\"dataIssue.emit($event)\"\n      (taskChange)=\"taskChange.emit($event)\"\n      (hiddenSeriesChange)=\"toggle($event)\"\n      (zoomChange)=\"zoom.set($event)\"\n      (viewChange)=\"view.set($event)\"\n      (selectedChange)=\"selected.set($event)\"\n      (highlightedChange)=\"highlighted.set($event)\"\n      (syncChange)=\"sync($event)\"\n      (measured)=\"measuredWidth.set($event)\"\n    ></skdx-chart-root>\n  `,\n})\nexport class SkdxBoxplotComponent extends SkdxSizedBase {\n  /** Raw samples, or precomputed summaries. */\n  readonly series = input.required<BoxplotSeries[]>();\n  readonly orientation = input<'vertical' | 'horizontal'>();\n  /** How quartiles are taken from a sample. */\n  readonly quartileMethod = input<'linear' | 'exclusive' | 'tukey'>();\n  /** Whisker reach as a multiple of the IQR. */\n  readonly whisker = input<number>();\n  /** Mark the mean with a diamond. */\n  readonly mean = input(false);\n  /** Draw every observation, jittered. */\n  readonly points = input(false);\n  /** Notch the box around the median. */\n  readonly notched = input(false);\n  /** Groups: one box per series inside each category. */\n  readonly categories = input<string[]>();\n  readonly yAxis = input<AxisOptions>();\n\n  protected readonly layout = computed(() =>\n    layoutBoxplot({\n      ...this.sized(),\n      series: this.series(),\n      orientation: this.orientation(),\n      quartileMethod: this.quartileMethod(),\n      whisker: this.whisker(),\n      mean: this.mean(),\n      points: this.points(),\n      notched: this.notched(),\n      categories: this.categories(),\n      yAxis: this.yAxis(),\n    }),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/skdx-angular-charts-bubble.mjs

@@ -0,0 +1,119 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { SkdxSizedBase, layoutBubbleChart, SkdxChartRootComponent } from '@skdx/angular-charts/internal';
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+/** Three quantities per mark: x, y and a magnitude the bubble's area follows. */
+class SkdxBubbleChartComponent extends SkdxSizedBase {
+    constructor() {
+        super(...arguments);
+        this.series = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+        /** Smallest and largest bubble radius in pixels. */
+        this.sizeRange = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "sizeRange" }] : /* istanbul ignore next */ []));
+        /** Write each bubble's label on it. */
+        this.labels = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+        this.xAxis = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "xAxis" }] : /* istanbul ignore next */ []));
+        this.yAxis = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "yAxis" }] : /* istanbul ignore next */ []));
+        /** How the magnitude is named and written. */
+        this.zAxis = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "zAxis" }] : /* istanbul ignore next */ []));
+        this.references = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "references" }] : /* istanbul ignore next */ []));
+        this.annotations = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "annotations" }] : /* istanbul ignore next */ []));
+        /** Colors bubbles by their `value` (or `z`). */
+        this.colorScale = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "colorScale" }] : /* istanbul ignore next */ []));
+        /** Draw the color scale under the plot. */
+        this.colorLegend = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colorLegend" }] : /* istanbul ignore next */ []));
+        this.layout = computed(() => layoutBubbleChart({
+            ...this.sized(),
+            series: this.series(),
+            sizeRange: this.sizeRange(),
+            labels: this.labels(),
+            xAxis: this.xAxis(),
+            yAxis: this.yAxis(),
+            zAxis: this.zAxis(),
+            references: this.references(),
+            annotations: this.annotations(),
+            colorScale: this.colorScale(),
+            colorLegend: this.colorLegend(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBubbleChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxBubbleChartComponent, isStandalone: true, selector: "skdx-bubble-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, sizeRange: { classPropertyName: "sizeRange", publicName: "sizeRange", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, xAxis: { classPropertyName: "xAxis", publicName: "xAxis", isSignal: true, isRequired: false, transformFunction: null }, yAxis: { classPropertyName: "yAxis", publicName: "yAxis", isSignal: true, isRequired: false, transformFunction: null }, zAxis: { classPropertyName: "zAxis", publicName: "zAxis", isSignal: true, isRequired: false, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: false, transformFunction: null }, annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, colorScale: { classPropertyName: "colorScale", publicName: "colorScale", isSignal: true, isRequired: false, transformFunction: null }, colorLegend: { classPropertyName: "colorLegend", publicName: "colorLegend", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <skdx-chart-root
+      [layout]="layout()"
+      [options]="options()"
+      kind="bubble"
+      [label]="label() ?? 'Bubble chart'"
+      [zoomable]="zoomable()"
+      [selectionMode]="selectionMode()"
+      [editable]="editable()"
+      [syncId]="syncId()"
+      [crosshair]="syncedCrosshair()"
+      [responsive]="!!responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (dataIssue)="dataIssue.emit($event)"
+      (taskChange)="taskChange.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (viewChange)="view.set($event)"
+      (selectedChange)="selected.set($event)"
+      (highlightedChange)="highlighted.set($event)"
+      (syncChange)="sync($event)"
+      (measured)="measuredWidth.set($event)"
+    ></skdx-chart-root>
+  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "options", "kind", "label", "zoomable", "selectionMode", "editable", "syncId", "crosshair", "responsive"], outputs: ["itemClick", "hiddenSeriesChange", "zoomChange", "viewChange", "selectedChange", "highlightedChange", "dataIssue", "taskChange", "syncChange", "measured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBubbleChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'skdx-bubble-chart',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SkdxChartRootComponent],
+                    template: `
+    <skdx-chart-root
+      [layout]="layout()"
+      [options]="options()"
+      kind="bubble"
+      [label]="label() ?? 'Bubble chart'"
+      [zoomable]="zoomable()"
+      [selectionMode]="selectionMode()"
+      [editable]="editable()"
+      [syncId]="syncId()"
+      [crosshair]="syncedCrosshair()"
+      [responsive]="!!responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (dataIssue)="dataIssue.emit($event)"
+      (taskChange)="taskChange.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (viewChange)="view.set($event)"
+      (selectedChange)="selected.set($event)"
+      (highlightedChange)="highlighted.set($event)"
+      (syncChange)="sync($event)"
+      (measured)="measuredWidth.set($event)"
+    ></skdx-chart-root>
+  `,
+                }]
+        }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], sizeRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeRange", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], xAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxis", required: false }] }], yAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxis", required: false }] }], zAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAxis", required: false }] }], references: [{ type: i0.Input, args: [{ isSignal: true, alias: "references", required: false }] }], annotations: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotations", required: false }] }], colorScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorScale", required: false }] }], colorLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorLegend", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkdxBubbleChartComponent };
+//# sourceMappingURL=skdx-angular-charts-bubble.mjs.map