@thebuoyant-tsdev/mui-ts-library 2.1.0 → 2.2.0

package/README.de.md

@@ -17,6 +17,7 @@ Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **M
 | [`RichTextEditor`](#richtexteditor) | WYSIWYG-Editor (TipTap v3) mit Toolbar, Link-Dialog, Textfarbe, Hervorhebung, Wörter-Zähler, Vollbild-Modus, Markdown-Einfügen, Tabellen-Bearbeitung, Bild-Embed und Emoji-Picker | [Vollständiges Manual →](user-manuals/RichTextEditor.de.md) |
 | [`SqlEditor`](#sqleditor) | SQL-Code-Editor (CodeMirror 6) mit Syntax-Highlighting, Multi-Dialekt, Autocomplete, Linting und `Cmd+Enter`-Ausführen-Shortcut | [Vollständiges Manual →](user-manuals/SqlEditor.de.md) |
 | [`JsonEditor`](#jsoneditor) | JSON-Code-Editor (CodeMirror 6) mit Echtzeit-Validierung, Format- und Komprimieren-Schaltfläche sowie optionaler Minimap | [Vollständiges Manual →](user-manuals/JsonEditor.de.md) |
+| [`SunburstChart`](#sunburstchart) | D3 v7 hierarchisches Chart — konzentrische Ringe, Ctrl+Click-Zoom, Donut-Modus, eigene Farben, MUI-Theme-Integration. Erste der D3-Chart-Familie. | [Vollständiges Manual →](user-manuals/SunburstChart.de.md) |
 
 ---
 
@@ -171,6 +172,36 @@ import { JsonEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
 ---
 
+### SunburstChart
+
+```tsx
+import { SunburstChart } from '@thebuoyant-tsdev/mui-ts-library';
+import type { SunburstChartData } from '@thebuoyant-tsdev/mui-ts-library';
+
+const data: SunburstChartData = {
+  id: 'root', name: 'Budget',
+  children: [
+    { id: 'eng',  name: 'Engineering', children: [
+      { id: 'fe', name: 'Frontend', value: 480 },
+      { id: 'be', name: 'Backend',  value: 620 },
+    ]},
+    { id: 'sales', name: 'Vertrieb', value: 890 },
+  ],
+};
+
+<SunburstChart
+  data={data}
+  size={500}
+  onSegmentClick={(info) => console.log(info.path, info.value)}
+/>
+```
+
+**Zoom:** `Ctrl+Click` → Drill-down · `Ctrl+Doppelklick` → Zoom out · `Escape` → Reset
+
+→ [Vollständige Dokumentation](user-manuals/SunburstChart.de.md)
+
+---
+
 ## TypeScript
 
 Alle Typen und Defaults werden direkt exportiert — kein separates `@types/...`-Paket nötig.

package/README.md

@@ -17,6 +17,7 @@ A type-safe React component library built on **TypeScript** and **MUI (Material
 | [`RichTextEditor`](#richtexteditor) | WYSIWYG editor (TipTap v3) with toolbar, link dialog, text color, highlight, word count, fullscreen mode, Markdown paste, table editing, image embed, and emoji picker | [Full Manual →](user-manuals/RichTextEditor.md) |
 | [`SqlEditor`](#sqleditor) | SQL code editor (CodeMirror 6) with syntax highlighting, multi-dialect, autocomplete, linting, and `Cmd+Enter` execute shortcut | [Full Manual →](user-manuals/SqlEditor.md) |
 | [`JsonEditor`](#jsoneditor) | JSON code editor (CodeMirror 6) with real-time validation, Format, Compact buttons, and optional minimap | [Full Manual →](user-manuals/JsonEditor.md) |
+| [`SunburstChart`](#sunburstchart) | D3 v7 hierarchical chart — concentric rings, Ctrl+Click zoom, donut mode, custom colors, MUI theme integration. First of the D3 Charts family. | [Full Manual →](user-manuals/SunburstChart.md) |
 
 ---
 
@@ -171,6 +172,36 @@ import { JsonEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
 ---
 
+### SunburstChart
+
+```tsx
+import { SunburstChart } from '@thebuoyant-tsdev/mui-ts-library';
+import type { SunburstChartData } from '@thebuoyant-tsdev/mui-ts-library';
+
+const data: SunburstChartData = {
+  id: 'root', name: 'Budget',
+  children: [
+    { id: 'eng',  name: 'Engineering', children: [
+      { id: 'fe', name: 'Frontend', value: 480 },
+      { id: 'be', name: 'Backend',  value: 620 },
+    ]},
+    { id: 'sales', name: 'Sales', value: 890 },
+  ],
+};
+
+<SunburstChart
+  data={data}
+  size={500}
+  onSegmentClick={(info) => console.log(info.path, info.value)}
+/>
+```
+
+**Zoom:** `Ctrl+Click` → drill down · `Ctrl+Double-click` → zoom out · `Escape` → reset
+
+→ [Full documentation](user-manuals/SunburstChart.md)
+
+---
+
 ## TypeScript
 
 All types and defaults are exported directly — no separate `@types/...` package needed.

package/dist/components/sunburst-chart/SunburstChart.d.ts

@@ -0,0 +1,5 @@
+import { type SunburstChartProps } from "./SunburstChart.types";
+export declare function SunburstChart({ data, size, showSegmentLabels, innerRadius, sortBy, chartColors, showRootLabel, onSegmentClick, onZoomChange, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, disabled, }: SunburstChartProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SunburstChart {
+    var displayName: string;
+}

package/dist/components/sunburst-chart/SunburstChart.types.d.ts

@@ -0,0 +1,65 @@
+export type SunburstSortBy = 'value' | 'name';
+export type SunburstChartData = {
+    id: string;
+    name: string;
+    value?: number;
+    children?: SunburstChartData[];
+};
+export type SunburstSegmentInfo = {
+    /** Node ID — direct access, same as `data.id` */
+    id: string;
+    name: string;
+    /** D3 aggregate value — sum of all descendant leaf values */
+    value: number | null;
+    /** Percentage of root total — `(value / root.value) * 100` */
+    percentage: number;
+    depth: number;
+    /** Breadcrumb path from root — array of node names */
+    path: string[];
+    /** Breadcrumb path from root — array of node IDs (for backend linking) */
+    pathIds: string[];
+    childrenCount: number;
+    /** Original data node as passed to the chart */
+    data: SunburstChartData;
+};
+export type SunburstZoomInfo = {
+    /** The node that is now the focus center */
+    focusNode: SunburstSegmentInfo;
+    /** True when zoom has been reset to root */
+    isRoot: boolean;
+};
+export type SunburstChartTranslation = {
+    /** Shown when data has no children and no value */
+    noData: string;
+};
+export declare const DEFAULT_SUNBURST_CHART_TRANSLATION: SunburstChartTranslation;
+export type SunburstChartProps = {
+    /** Hierarchical data tree — root node with optional nested children */
+    data: SunburstChartData;
+    /** Width and height of the SVG in pixels (default: 500) */
+    size?: number;
+    /** Show name labels on segments (default: true) */
+    showSegmentLabels?: boolean;
+    /** Inner hole radius in px — 0 = solid sunburst, > 0 = donut style (default: 0) */
+    innerRadius?: number;
+    /** Sort segments by value (largest first) or by name (default: 'value') */
+    sortBy?: SunburstSortBy;
+    /** Custom color palette for top-level segments — falls back to MUI theme palette */
+    chartColors?: string[];
+    /** Show the root node name in the center (default: true) */
+    showRootLabel?: boolean;
+    /** Fired on single-click on any segment */
+    onSegmentClick?: (info: SunburstSegmentInfo, event: React.MouseEvent<SVGPathElement | SVGCircleElement>) => void;
+    /** Fired when zoom focus changes (Ctrl+Click in/out, Escape reset) */
+    onZoomChange?: (zoom: SunburstZoomInfo) => void;
+    /** Decimal places for value display in tooltips (default: 0) */
+    valueDecimalCount?: number;
+    /** Decimal separator for values (default: '.') */
+    valueDecimalSeparator?: string;
+    /** Thousands separator for values (default: ',') */
+    valueThousandsSeparator?: string;
+    /** Disables all interactions (default: false) */
+    disabled?: boolean;
+    /** Override any translation string */
+    translation?: Partial<SunburstChartTranslation>;
+};