@besaitech/ng-design-system 0.0.65 → 0.0.67

package/README.md

@@ -180,6 +180,7 @@ Import names are the `Sl…` classes; the markup selectors are `sds-…`.
 | `SdsSelect` | `<sds-select>` | CVA single-select dropdown |
 | `SdsMultiSelect` | `<sds-multi-select>` | CVA multi-select with chips; `(opened)` / `(closed)` (emits the selection) |
 | `SdsDatePicker` / `SdsCalendar` | `<sds-date-picker>` / `<sds-calendar>` | CVA date field + popover calendar (`date-utils` helpers) |
+| `SdsDateRangePicker` / `SdsRangeCalendar` | `<sds-date-range-picker>` / `<sds-range-calendar>` | Range field: presets column + two-month range calendar, pending until Apply; `[(value)]` is an `SdsDateRange \| null` (`{ start, end }`, end inclusive); `(presetSelect)` emits the preset id; helpers `sdsLastDays(n)`, `sdsLastMonths(n)`, `formatDateRange()` |
 | `SdsPhoneInput` | `<sds-phone-input>` | CVA phone field with country selector (`phone-countries`) |
 | `SdsIcon` | `<sds-icon>` | Inline-SVG icon; `name`, `size`, `strokeWidth`, `filled` |
 | `SdsAvatar` | `<sds-avatar>` | Image, initials or `fallbackIcon` + status dot; `shape` (circle·rounded·square), `decorative`; broken image falls back |
@@ -203,6 +204,53 @@ 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 "Other" past `maxSlices`; centre total / hovered slice (`centerLabel=""` hides the centre readout) |
+| `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', labels: CHART_LABELS_FR })]
+// or, switching live with the app language (both functions are read inside computed()s):
+providers: [provideSdsCharts({ locale: () => lang(), labels: () => chartLabelsFor(lang()) })]
+```
+
+**Chart strings.** Every built-in string — empty state, table toggle and headers, tooltip rows, the
+spoken summaries, role descriptions, the KPI's change sentence — is an `SdsChartLabels` key with an
+English default (`SDS_CHART_LABELS_EN`). Translate them once through `provideSdsCharts({ labels })`
+(a `Partial<SdsChartLabels>`, merged over the English defaults); parameterised ones are functions
+(`sliceCount(n)`, `gridSize(rows, columns)`, `labelValue(label, value)`, `zoomedTo(path)`,
+`versus(y, x)`, `sparklineSummary({ label, first, last, min, max, count })`,
+`kpiChange({ direction, delta, period, good })`, …). Per-chart inputs (`emptyText`, `otherLabel`,
+`centerLabel`, `valueLabel`, `rootLabel`, `sizeLabel`) still win for one chart; left unset (`null`)
+they fall back to the configured labels.
+
+```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`