@besaitech/ng-design-system 0.0.64 → 0.0.66

package/README.md

@@ -203,6 +203,41 @@ Import names are the `Sl…` classes; the markup selectors are `sds-…`.
 | `SdsTopbar` | `<sds-topbar>` | `appName`, `user`, `(logout)`; `[sdsLogo]` slot |
 | `SdsSidebar` + `SdsNavGroup` + `SdsNavItem` | `<sds-sidebar>` … | Collapsible nav rail; collapse state via root-provided `SidebarStore`; items render `routerLink` or `<button>` |
 
+**Charts** (D3 does the maths, Angular renders the SVG, so they are OnPush, SSR-safe and themed by tokens)
+
+| Component | Selector | Notes |
+| --- | --- | --- |
+| `SdsLineChart` | `<sds-line-chart>` | Time / numeric / category x; multi-series, `area`, `stack` (stacked · percent), `curve`, log `yScale`, `annotations`, dashed forecast series, `endLabels`, crosshair tooltip |
+| `SdsBarChart` | `<sds-bar-chart>` | `orientation`, `stack`, negatives, `showValues`, `sort`, `barColor`, `highlight`, combo `type: 'line'` series |
+| `SdsScatterChart` | `<sds-scatter-chart>` | `x`/`y`, bubble `size`, `group`, `trendline`, log/time axes, nearest-point hover |
+| `SdsDonutChart` | `<sds-donut-chart>` | Donut · pie · `half`; tail folds into "Autres" past `maxSlices`; centre total / hovered slice |
+| `SdsHeatmap` | `<sds-heatmap>` | Two categorical dims × a measure; `scheme` sequential · diverging, `showValues` |
+| `SdsTreemap` | `<sds-treemap>` | Nested `{ name, value?, children? }`; branch colours, click-to-zoom breadcrumb |
+| `SdsSparkline` | `<sds-sparkline>` | Word-sized line · area · bar; `band`, `reference`, `showMinMax` |
+| `SdsKpi` | `<sds-kpi>` | Stat tile: value, change vs `previous` (good/bad via `upIsGood`), optional sparkline `trend` |
+
+Every chart reads plain rows through accessors (a property name or `(row, i) => value`), so API data
+plots without reshaping; has an interactive legend (colour follows the series, never its rank), a
+keyboard-navigable tooltip, a data-table twin (`tableToggle`), `loading` / empty states, and a
+`(pointClick)` output. Colours come from the colour-blind-safe `--sds-chart-1…8` slots in `base.css`
+(override any slot in your preset). Set app-wide defaults once:
+
+```ts
+providers: [provideSdsCharts({ locale: 'fr-FR' })] // or locale: () => translate.currentLang()
+```
+
+```html
+<sds-line-chart
+  heading="Admissions"
+  [data]="rows"
+  x="date"
+  [series]="[{ key: 'urgences', label: 'Urgences' }, { key: 'programmees', label: 'Programmées' }]"
+  [annotations]="[{ type: 'line', value: 150, label: 'Capacité' }]"
+/>
+```
+
+Custom tooltip body: `<ng-template sdsChartTooltip let-tip>…</ng-template>` inside any chart.
+
 ## Theme & cross-app preferences
 
 `SdsThemeService` holds the person's **mode** — `'system' | 'light' | 'dark'`, persisted to `localStorage`