@thebuoyant-tsdev/mui-ts-library 3.9.1 → 3.11.0

package/README.de.md

@@ -284,6 +284,71 @@ const data: RadialTreeChartData = {
 
 ---
 
+### CirclePackingChart
+
+Hierarchische Daten als verschachtelte Kreise, proportional zum Wert skaliert. Ideal für Speicherplatz-Auswertungen, Budget-Übersichten oder jede Hierarchie, bei der relative Größe auf einen Blick zählt. `Ctrl / Cmd ⌘+Click` (oder Doppelklick) auf einen Kreis mit Kindern zoomt mit sanfter animierter Transition hinein; Klick auf den Hintergrund oder `Escape` zoomt zurück.
+
+```tsx
+import { CirclePackingChart } from '@thebuoyant-tsdev/mui-ts-library';
+import type { CirclePackingData } from '@thebuoyant-tsdev/mui-ts-library';
+
+const data: CirclePackingData = {
+  id: 'disk', name: 'Festplatte',
+  children: [
+    { id: 'photos', name: 'Fotos', value: 120 },
+    { id: 'videos', name: 'Videos', value: 340 },
+    { id: 'apps', name: 'Apps',
+      children: [
+        { id: 'xcode', name: 'Xcode', value: 48 },
+        { id: 'docker', name: 'Docker', value: 12 },
+      ]},
+  ],
+};
+
+<CirclePackingChart
+  data={data}
+  size={500}
+  onCircleClick={(info) => console.log(info.name, info.value)}
+/>
+```
+
+→ [Vollständige Dokumentation](user-manuals/CirclePackingChart.de.md)
+
+---
+
+### HorizontalTreeChart
+
+Hierarchische Daten als links-nach-rechts (oder eine der 4 Ausrichtungen) Entscheidungsbaum mit geschwungenen Links. Ideal für Entscheidungslogik, Eskalationspfade oder Org-Charts, die natürlicher von oben nach unten oder seitlich gelesen werden als radial. `Ctrl / Cmd ⌘+Click` bohrt in Teilbäume, `Ctrl / Cmd ⌘+Scroll` zoomt.
+
+```tsx
+import { HorizontalTreeChart } from '@thebuoyant-tsdev/mui-ts-library';
+import type { HorizontalTreeData } from '@thebuoyant-tsdev/mui-ts-library';
+
+const data: HorizontalTreeData = {
+  id: 'ticket', name: 'Neues Ticket',
+  children: [
+    { id: 'bug', name: 'Bug', specialValueA: 'P1 — 4h SLA',
+      children: [
+        { id: 'bug-fe', name: 'Frontend-Team' },
+        { id: 'bug-be', name: 'Backend-Team'  },
+      ]},
+    { id: 'feature', name: 'Feature-Anfrage', specialValueA: 'P3 — Backlog' },
+  ],
+};
+
+<HorizontalTreeChart
+  data={data}
+  orientation="LR"
+  width={700}
+  drillable
+  onNodeClick={(info) => console.log(info.name, info.depth)}
+/>
+```
+
+→ [Vollständige Dokumentation](user-manuals/HorizontalTreeChart.de.md)
+
+---
+
 ## TypeScript
 
 Alle Typen und Defaults werden direkt exportiert — kein separates `@types/...`-Paket nötig.
@@ -343,6 +408,20 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/). In der Praxis b
 
 ## Changelog
 
+### [3.11.0] — 2026-06-25
+
+**RadialTreeChart & HorizontalTreeChart**
+- `duration`: Rein-/Rauszoomen und Escape-Resets crossfaden jetzt statt abrupt zu wechseln (Standard 750ms, `0` deaktiviert).
+
+---
+
+### [3.10.0] — 2026-06-25
+
+**SunburstChart**
+- `duration`: Rein-/Rauszoomen animiert jetzt sanft zwischen Fokus-Ebenen (Standard 750ms, `0` deaktiviert).
+
+---
+
 ### [3.9.1] — 2026-06-25
 
 **Behoben**

package/README.md

@@ -284,6 +284,71 @@ const data: RadialTreeChartData = {
 
 ---
 
+### CirclePackingChart
+
+Hierarchical data as nested circles, sized proportionally to value. Use `CirclePackingChart` for disk usage, org budgets, or any hierarchy where relative size matters at a glance. `Ctrl / Cmd ⌘+Click` (or double-click) a circle with children to zoom in with a smooth animated transition; click the background or `Escape` to zoom back out.
+
+```tsx
+import { CirclePackingChart } from '@thebuoyant-tsdev/mui-ts-library';
+import type { CirclePackingData } from '@thebuoyant-tsdev/mui-ts-library';
+
+const data: CirclePackingData = {
+  id: 'disk', name: 'Disk',
+  children: [
+    { id: 'photos', name: 'Photos', value: 120 },
+    { id: 'videos', name: 'Videos', value: 340 },
+    { id: 'apps', name: 'Apps',
+      children: [
+        { id: 'xcode', name: 'Xcode', value: 48 },
+        { id: 'docker', name: 'Docker', value: 12 },
+      ]},
+  ],
+};
+
+<CirclePackingChart
+  data={data}
+  size={500}
+  onCircleClick={(info) => console.log(info.name, info.value)}
+/>
+```
+
+→ [Full documentation](user-manuals/CirclePackingChart.md)
+
+---
+
+### HorizontalTreeChart
+
+Hierarchical data as a left-to-right (or any of 4 orientations) decision tree with curved links. Use `HorizontalTreeChart` for decision logic, escalation paths, or org charts that read more naturally top-to-bottom or side-to-side than radially. `Ctrl / Cmd ⌘+Click` drills into subtrees, `Ctrl / Cmd ⌘+Scroll` zooms.
+
+```tsx
+import { HorizontalTreeChart } from '@thebuoyant-tsdev/mui-ts-library';
+import type { HorizontalTreeData } from '@thebuoyant-tsdev/mui-ts-library';
+
+const data: HorizontalTreeData = {
+  id: 'ticket', name: 'New Ticket',
+  children: [
+    { id: 'bug', name: 'Bug', specialValueA: 'P1 — 4h SLA',
+      children: [
+        { id: 'bug-fe', name: 'Frontend Team' },
+        { id: 'bug-be', name: 'Backend Team'  },
+      ]},
+    { id: 'feature', name: 'Feature Request', specialValueA: 'P3 — Backlog' },
+  ],
+};
+
+<HorizontalTreeChart
+  data={data}
+  orientation="LR"
+  width={700}
+  drillable
+  onNodeClick={(info) => console.log(info.name, info.depth)}
+/>
+```
+
+→ [Full documentation](user-manuals/HorizontalTreeChart.md)
+
+---
+
 ## TypeScript
 
 All types and defaults are exported directly — no separate `@types/...` package needed.
@@ -343,6 +408,20 @@ This project follows [Semantic Versioning](https://semver.org/). In practice:
 
 ## Changelog
 
+### [3.11.0] — 2026-06-25
+
+**RadialTreeChart & HorizontalTreeChart**
+- `duration`: drill in/out and Escape resets now crossfade instead of jump-cutting (default 750ms, `0` disables).
+
+---
+
+### [3.10.0] — 2026-06-25
+
+**SunburstChart**
+- `duration`: drill-in/out now animates smoothly between focus levels (default 750ms, `0` disables).
+
+---
+
 ### [3.9.1] — 2026-06-25
 
 **Fixed**

package/dist/components/horizontal-tree-chart/HorizontalTreeChart.d.ts

@@ -1,5 +1,5 @@
 import { type HorizontalTreeChartProps } from "./HorizontalTreeChart.types";
-export declare function HorizontalTreeChart({ data, orientation, width, height, levelSpacing, nodeRadius, sortBy, showLabels, labelFontSize, labelColor, showIcons, chartColors, linkStrokeOpacity, linkStrokeWidth, linkColor, zoomable, drillable, onFocusChange, showNodePopover, renderNodePopoverContent, onNodeClick, disabled, translation, }: HorizontalTreeChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function HorizontalTreeChart({ data, orientation, width, height, levelSpacing, nodeRadius, sortBy, showLabels, labelFontSize, labelColor, showIcons, chartColors, linkStrokeOpacity, linkStrokeWidth, linkColor, zoomable, drillable, onFocusChange, showNodePopover, renderNodePopoverContent, onNodeClick, duration, disabled, translation, }: HorizontalTreeChartProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace HorizontalTreeChart {
     var displayName: string;
 }