@thebuoyant-tsdev/mui-ts-library 3.15.0 → 3.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.de.md +56 -0
- package/README.md +56 -0
- package/dist/components/gantt-chart/GanttChart.d.ts +1 -1
- package/dist/components/gantt-chart/GanttChart.js +36 -33
- package/dist/components/gantt-chart/GanttChart.store.d.ts +2 -0
- package/dist/components/gantt-chart/GanttChart.store.js +3 -0
- package/dist/components/gantt-chart/GanttChart.types.d.ts +15 -0
- package/dist/components/gantt-chart/GanttChart.types.js +3 -0
- package/dist/components/gantt-chart/GanttTaskDialog.js +170 -124
- package/dist/components/gantt-chart/GanttTaskPanel.js +131 -124
- package/dist/components/gantt-chart/GanttTimeline.d.ts +2 -1
- package/dist/components/gantt-chart/GanttTimeline.js +99 -91
- package/dist/components/gantt-chart/GanttToolbar.js +155 -131
- package/dist/components/gantt-chart/hooks/useGanttDrag.d.ts +2 -1
- package/dist/components/gantt-chart/hooks/useGanttDrag.js +35 -35
- package/dist/components/gantt-chart/util/gantt-chart.util.d.ts +5 -0
- package/dist/components/gantt-chart/util/gantt-chart.util.js +36 -30
- package/dist/index.cjs +2 -2
- package/package.json +1 -1
package/README.de.md
CHANGED
|
@@ -40,6 +40,7 @@ Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **M
|
|
|
40
40
|
| [`RadialTreeChart`](#radialtreechart) | Org-Charts und Taxonomien als radialer Baum, mit Drill-Down | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-radialtreechart--default) · [Docs](user-manuals/RadialTreeChart.de.md) |
|
|
41
41
|
| [`CirclePackingChart`](#circlepackingchart) | Verschachtelte Kreise mit animiertem Zoom — Speicher und Hierarchie auf einen Blick | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-circlepackingchart--default) · [Docs](user-manuals/CirclePackingChart.de.md) |
|
|
42
42
|
| [`HorizontalTreeChart`](#horizontaltreechart) | Entscheidungsbäume und Hierarchien in 4 Orientierungen (LR/RL/TB/BT) | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-horizontaltreechart--default) · [Docs](user-manuals/HorizontalTreeChart.de.md) |
|
|
43
|
+
| [`RadialStackedBarChart`](#radialstackedbarchart) | Mehrreihige gestapelte Balken in polarem Layout — Kategorien über Segmente vergleichen | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-radialstackedbarchart--default) · [Docs](user-manuals/RadialStackedBarChart.de.md) |
|
|
43
44
|
|
|
44
45
|
Alle Charts teilen sich Ctrl / Cmd ⌘+Scroll-Zoom und vollständige MUI-Theme-Integration (Dark Mode inklusive).
|
|
45
46
|
|
|
@@ -375,6 +376,43 @@ const data: HorizontalTreeData = {
|
|
|
375
376
|
|
|
376
377
|
---
|
|
377
378
|
|
|
379
|
+
### RadialStackedBarChart
|
|
380
|
+
|
|
381
|
+
Mehrreihiges gestapeltes Balkendiagramm in polarem Layout. Jedes Balkensegment repräsentiert einen Datenpunkt, jede Bogen-Ebene eine Datenreihe — ideal für Quartalsvergleiche, Budgetaufschlüsselungen oder mehrere Kategorien über eine Menge von Einträgen. Konzentrische Gitterringe geben visuelle Skala; eine automatisch zentrierte Legende ist integriert. `Ctrl / Cmd ⌘+Scroll` zoomt den Chart.
|
|
382
|
+
|
|
383
|
+
```tsx
|
|
384
|
+
import { RadialStackedBarChart } from '@thebuoyant-tsdev/mui-ts-library';
|
|
385
|
+
import type {
|
|
386
|
+
RadialStackedBarData,
|
|
387
|
+
RadialStackedBarSeries,
|
|
388
|
+
} from '@thebuoyant-tsdev/mui-ts-library';
|
|
389
|
+
|
|
390
|
+
const keys: RadialStackedBarSeries[] = [
|
|
391
|
+
{ key: 'q1', label: 'Q1' },
|
|
392
|
+
{ key: 'q2', label: 'Q2' },
|
|
393
|
+
{ key: 'q3', label: 'Q3' },
|
|
394
|
+
{ key: 'q4', label: 'Q4' },
|
|
395
|
+
];
|
|
396
|
+
|
|
397
|
+
const data: RadialStackedBarData[] = [
|
|
398
|
+
{ id: 'berlin', label: 'Berlin', values: { q1: 120, q2: 145, q3: 98, q4: 175 } },
|
|
399
|
+
{ id: 'hamburg', label: 'Hamburg', values: { q1: 95, q2: 110, q3: 130, q4: 88 } },
|
|
400
|
+
{ id: 'munich', label: 'Munich', values: { q1: 200, q2: 185, q3: 210, q4: 230 } },
|
|
401
|
+
];
|
|
402
|
+
|
|
403
|
+
<RadialStackedBarChart
|
|
404
|
+
data={data}
|
|
405
|
+
keys={keys}
|
|
406
|
+
size={480}
|
|
407
|
+
sortBy="value"
|
|
408
|
+
onBarClick={(info) => console.log(info.label, info.seriesKey, info.value)}
|
|
409
|
+
/>
|
|
410
|
+
```
|
|
411
|
+
|
|
412
|
+
→ [Vollständige Dokumentation](user-manuals/RadialStackedBarChart.de.md)
|
|
413
|
+
|
|
414
|
+
---
|
|
415
|
+
|
|
378
416
|
## TypeScript
|
|
379
417
|
|
|
380
418
|
Alle Typen und Defaults werden direkt exportiert — kein separates `@types/...`-Paket nötig.
|
|
@@ -413,6 +451,9 @@ import type {
|
|
|
413
451
|
|
|
414
452
|
// HorizontalTreeChart
|
|
415
453
|
HorizontalTreeData, HorizontalTreeNodeInfo, HorizontalTreeOrientation,
|
|
454
|
+
|
|
455
|
+
// RadialStackedBarChart
|
|
456
|
+
RadialStackedBarData, RadialStackedBarSeries, RadialStackedBarClickInfo,
|
|
416
457
|
} from '@thebuoyant-tsdev/mui-ts-library';
|
|
417
458
|
```
|
|
418
459
|
|
|
@@ -434,6 +475,21 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/). In der Praxis b
|
|
|
434
475
|
|
|
435
476
|
## Changelog
|
|
436
477
|
|
|
478
|
+
### [3.17.0] — 2026-07-05
|
|
479
|
+
|
|
480
|
+
**Hinzugefügt**
|
|
481
|
+
- `GanttChart`: Assignee-Filter-Dropdown in der Toolbar — `toolbarConfig={{ showAssigneeFilter: true }}` fügt ein Select hinzu, das sichtbare Tasks nach Assignee filtert. Der Filter ist vorfahren-inklusiv (Parent-Tasks bleiben sichtbar wenn Nachkommen passen). Zwei neue optionale Übersetzungsschlüssel: `filterAssigneeAll`, `filterAssigneeLabel`.
|
|
482
|
+
- `GanttChart`: `onDragStart(task, type)`-Callback — feuert sofort bei mousedown auf einem zieh-/skalierbaren Balken (vor dem ≥ 5 px-Schwellwert). `type` ist `"move"` oder `"resize"`. Gedacht für optimistisches UI, Analytics und Shadow-Elemente. Kein Debounce nötig — feuert höchstens einmal pro Geste. Siehe [Vollständiger Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) für Details.
|
|
483
|
+
|
|
484
|
+
---
|
|
485
|
+
|
|
486
|
+
### [3.16.0] — 2026-07-03
|
|
487
|
+
|
|
488
|
+
**Hinzugefügt**
|
|
489
|
+
- `GanttChart`: Fortschritts-Slider im eingebauten Hinzufügen-/Bearbeiten-Dialog — `GanttTask.progress` (0–100 %) ist jetzt ohne Maus bearbeitbar, schließt eine Accessibility-Lücke für Tastatur-Nutzer. Slider wird im Bearbeiten-Modus aus bestehenden Task-Daten vorbelegt; setzt auf 0 zurück wenn Meilenstein aktiviert wird. Neuer optionaler Übersetzungsschlüssel `dialogFieldProgress`. Siehe [Vollständiger Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) für Details.
|
|
490
|
+
|
|
491
|
+
---
|
|
492
|
+
|
|
437
493
|
### [3.15.0] — 2026-07-03
|
|
438
494
|
|
|
439
495
|
**Hinzugefügt**
|
package/README.md
CHANGED
|
@@ -40,6 +40,7 @@ A type-safe React component library built on **TypeScript** and **MUI (Material
|
|
|
40
40
|
| [`RadialTreeChart`](#radialtreechart) | Org charts and taxonomies as a radial tree, with drill-down | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-radialtreechart--default) · [Docs](user-manuals/RadialTreeChart.md) |
|
|
41
41
|
| [`CirclePackingChart`](#circlepackingchart) | Nested circles with animated zoom — storage and hierarchy at a glance | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-circlepackingchart--default) · [Docs](user-manuals/CirclePackingChart.md) |
|
|
42
42
|
| [`HorizontalTreeChart`](#horizontaltreechart) | Decision trees and hierarchies in 4 orientations (LR/RL/TB/BT) | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-horizontaltreechart--default) · [Docs](user-manuals/HorizontalTreeChart.md) |
|
|
43
|
+
| [`RadialStackedBarChart`](#radialstackedbarchart) | Multi-series stacked bars in a radial layout — compare categories across segments | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-radialstackedbarchart--default) · [Docs](user-manuals/RadialStackedBarChart.md) |
|
|
43
44
|
|
|
44
45
|
All charts share Ctrl / Cmd ⌘+Scroll zoom and full MUI theme integration (dark mode included).
|
|
45
46
|
|
|
@@ -375,6 +376,43 @@ const data: HorizontalTreeData = {
|
|
|
375
376
|
|
|
376
377
|
---
|
|
377
378
|
|
|
379
|
+
### RadialStackedBarChart
|
|
380
|
+
|
|
381
|
+
Multi-series stacked bar chart in a polar (radial) layout. Each bar segment represents one data point, each arc layer represents one series — ideal for comparing quarterly figures, budget breakdowns, or any multi-category totals across a set of items. Concentric grid rings give a visual scale; an auto-centered legend is built in. `Ctrl / Cmd ⌘+Scroll` zooms the chart.
|
|
382
|
+
|
|
383
|
+
```tsx
|
|
384
|
+
import { RadialStackedBarChart } from '@thebuoyant-tsdev/mui-ts-library';
|
|
385
|
+
import type {
|
|
386
|
+
RadialStackedBarData,
|
|
387
|
+
RadialStackedBarSeries,
|
|
388
|
+
} from '@thebuoyant-tsdev/mui-ts-library';
|
|
389
|
+
|
|
390
|
+
const keys: RadialStackedBarSeries[] = [
|
|
391
|
+
{ key: 'q1', label: 'Q1' },
|
|
392
|
+
{ key: 'q2', label: 'Q2' },
|
|
393
|
+
{ key: 'q3', label: 'Q3' },
|
|
394
|
+
{ key: 'q4', label: 'Q4' },
|
|
395
|
+
];
|
|
396
|
+
|
|
397
|
+
const data: RadialStackedBarData[] = [
|
|
398
|
+
{ id: 'berlin', label: 'Berlin', values: { q1: 120, q2: 145, q3: 98, q4: 175 } },
|
|
399
|
+
{ id: 'hamburg', label: 'Hamburg', values: { q1: 95, q2: 110, q3: 130, q4: 88 } },
|
|
400
|
+
{ id: 'munich', label: 'Munich', values: { q1: 200, q2: 185, q3: 210, q4: 230 } },
|
|
401
|
+
];
|
|
402
|
+
|
|
403
|
+
<RadialStackedBarChart
|
|
404
|
+
data={data}
|
|
405
|
+
keys={keys}
|
|
406
|
+
size={480}
|
|
407
|
+
sortBy="value"
|
|
408
|
+
onBarClick={(info) => console.log(info.label, info.seriesKey, info.value)}
|
|
409
|
+
/>
|
|
410
|
+
```
|
|
411
|
+
|
|
412
|
+
→ [Full documentation](user-manuals/RadialStackedBarChart.md)
|
|
413
|
+
|
|
414
|
+
---
|
|
415
|
+
|
|
378
416
|
## TypeScript
|
|
379
417
|
|
|
380
418
|
All types and defaults are exported directly — no separate `@types/...` package needed.
|
|
@@ -413,6 +451,9 @@ import type {
|
|
|
413
451
|
|
|
414
452
|
// HorizontalTreeChart
|
|
415
453
|
HorizontalTreeData, HorizontalTreeNodeInfo, HorizontalTreeOrientation,
|
|
454
|
+
|
|
455
|
+
// RadialStackedBarChart
|
|
456
|
+
RadialStackedBarData, RadialStackedBarSeries, RadialStackedBarClickInfo,
|
|
416
457
|
} from '@thebuoyant-tsdev/mui-ts-library';
|
|
417
458
|
```
|
|
418
459
|
|
|
@@ -434,6 +475,21 @@ This project follows [Semantic Versioning](https://semver.org/). In practice:
|
|
|
434
475
|
|
|
435
476
|
## Changelog
|
|
436
477
|
|
|
478
|
+
### [3.17.0] — 2026-07-05
|
|
479
|
+
|
|
480
|
+
**Added**
|
|
481
|
+
- `GanttChart`: assignee filter dropdown in the toolbar — `toolbarConfig={{ showAssigneeFilter: true }}` adds a Select that filters visible tasks by assignee. The filter is ancestor-inclusive (parents are kept when descendants match). Two new optional translation keys: `filterAssigneeAll`, `filterAssigneeLabel`.
|
|
482
|
+
- `GanttChart`: `onDragStart(task, type)` callback — fires immediately on mousedown on a draggable/resizable bar (before the ≥ 5 px movement threshold). `type` is `"move"` or `"resize"`. Intended for optimistic UI, analytics, and shadow elements. No debouncing needed — fires at most once per gesture. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
|
|
483
|
+
|
|
484
|
+
---
|
|
485
|
+
|
|
486
|
+
### [3.16.0] — 2026-07-03
|
|
487
|
+
|
|
488
|
+
**Added**
|
|
489
|
+
- `GanttChart`: progress slider in the built-in Add/Edit task dialog — `GanttTask.progress` (0–100 %) is now editable without a mouse, closing an accessibility gap for keyboard users. Slider pre-fills from existing task data in edit mode; resets to 0 when milestone is toggled on. New optional translation key `dialogFieldProgress`. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
|
|
490
|
+
|
|
491
|
+
---
|
|
492
|
+
|
|
437
493
|
### [3.15.0] — 2026-07-03
|
|
438
494
|
|
|
439
495
|
**Added**
|
|
@@ -4,4 +4,4 @@ export declare function useGanttChartStore<T>(selector: (state: ReturnType<Gantt
|
|
|
4
4
|
export declare function useRawGanttChartStore(): GanttChartStore;
|
|
5
5
|
export declare function useGanttTranslations(): Required<GanttTranslations>;
|
|
6
6
|
export declare function useGanttTheme(): GanttTheme;
|
|
7
|
-
export declare function GanttChart({ tasks, timeScale, initialExpandAll, showToolbar, defaultRangeStart, defaultRangeEnd, translations, enableBuiltinDialogs, toolbarConfig, zoomable, draggable, resizable, inlineEdit, progressDraggable, showCriticalPath, virtualizeRows, showAssigneeColumn, cascadeDependencies, statusColors, ganttTheme, onExportCSV, onTaskClick, onMilestoneClick, onAddTask, onEditTask, onDeleteTask, onStatusChange, onTasksChange, onTaskMoved, onTaskResized, onTaskCreated, onTaskUpdated, onTaskDeleted, height, width, minPanelWidth, maxPanelWidth, }: GanttChartProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare function GanttChart({ tasks, timeScale, initialExpandAll, showToolbar, defaultRangeStart, defaultRangeEnd, translations, enableBuiltinDialogs, toolbarConfig, zoomable, draggable, resizable, inlineEdit, progressDraggable, showCriticalPath, virtualizeRows, showAssigneeColumn, cascadeDependencies, statusColors, ganttTheme, onExportCSV, onDragStart, onTaskClick, onMilestoneClick, onAddTask, onEditTask, onDeleteTask, onStatusChange, onTasksChange, onTaskMoved, onTaskResized, onTaskCreated, onTaskUpdated, onTaskDeleted, height, width, minPanelWidth, maxPanelWidth, }: GanttChartProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -46,14 +46,15 @@ var E = [
|
|
|
46
46
|
showDateRange: !0,
|
|
47
47
|
showRangeReset: !0,
|
|
48
48
|
showResetView: !0,
|
|
49
|
-
showExportCSV: !1
|
|
49
|
+
showExportCSV: !1,
|
|
50
|
+
showAssigneeFilter: !1
|
|
50
51
|
};
|
|
51
|
-
function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEditTask: l, onDeleteTask: _, onStatusChange: v, onTasksChange: x, enableBuiltinDialogs: S = !0, onTaskCreated: C, onTaskUpdated: w, onTaskDeleted: O, showToolbar: k = !0, toolbarConfig: A, height: j, width: ee, minPanelWidth: M = 200, maxPanelWidth: N = 600, zoomable: P = !1, draggable: F = !1, resizable: I = !1, inlineEdit:
|
|
52
|
+
function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEditTask: l, onDeleteTask: _, onStatusChange: v, onTasksChange: x, enableBuiltinDialogs: S = !0, onTaskCreated: C, onTaskUpdated: w, onTaskDeleted: O, showToolbar: k = !0, toolbarConfig: A, height: j, width: ee, minPanelWidth: M = 200, maxPanelWidth: N = 600, zoomable: P = !1, draggable: F = !1, resizable: I = !1, inlineEdit: te = !1, progressDraggable: ne = !1, showCriticalPath: re = !1, virtualizeRows: L = !1, showAssigneeColumn: R = !1, onExportCSV: z, onDragStart: B, onTaskMoved: V, onTaskResized: H }) {
|
|
52
53
|
let U = T(j, 400), W = d(() => ({
|
|
53
54
|
...D,
|
|
54
55
|
...A
|
|
55
|
-
}), [A]), G = T(ee, "100%"), K = y((e) => e.setTasks), q = y((e) => e.timeScale), J = y((e) => e.setTimeScale), Y = y((e) => e.timelineRange), X = f(null), Z = f(null), Q = f(!1), [$,
|
|
56
|
-
let e =
|
|
56
|
+
}), [A]), G = T(ee, "100%"), K = y((e) => e.setTasks), q = y((e) => e.timeScale), J = y((e) => e.setTimeScale), Y = y((e) => e.timelineRange), X = f(null), Z = f(null), Q = f(!1), [$, ie] = p(320), ae = b(), oe = c(() => {
|
|
57
|
+
let e = ae.getState().tasks, t = [[
|
|
57
58
|
"id",
|
|
58
59
|
"name",
|
|
59
60
|
"status",
|
|
@@ -78,20 +79,20 @@ function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdit
|
|
|
78
79
|
(e.dependencies ?? []).join(";"),
|
|
79
80
|
e.color ?? ""
|
|
80
81
|
].join(","))].join("\n");
|
|
81
|
-
if (
|
|
82
|
+
if (z) z(t, e);
|
|
82
83
|
else {
|
|
83
84
|
let e = new Blob([t], { type: "text/csv;charset=utf-8;" }), n = URL.createObjectURL(e), r = document.createElement("a");
|
|
84
85
|
r.href = n, r.download = "gantt-tasks.csv", r.click(), URL.revokeObjectURL(n);
|
|
85
86
|
}
|
|
86
|
-
}, [
|
|
87
|
+
}, [ae, z]);
|
|
87
88
|
u(() => {
|
|
88
89
|
K(t);
|
|
89
90
|
}, [t, K]);
|
|
90
|
-
let
|
|
91
|
+
let se = () => {
|
|
91
92
|
Q.current ||= (Q.current = !0, Z.current && X.current && (Z.current.scrollTop = X.current.scrollTop), !1);
|
|
92
|
-
},
|
|
93
|
+
}, ce = () => {
|
|
93
94
|
Q.current ||= (Q.current = !0, X.current && Z.current && (X.current.scrollTop = Z.current.scrollTop), !1);
|
|
94
|
-
},
|
|
95
|
+
}, le = c(() => {
|
|
95
96
|
if (!Z.current) return;
|
|
96
97
|
let t = e(Y, q), n = Date.now(), r = t.start.getTime(), i = t.end.getTime(), a = (n - r) / (i - r) * Z.current.scrollWidth;
|
|
97
98
|
Z.current.scrollLeft = Math.max(0, a - Z.current.clientWidth / 2);
|
|
@@ -110,11 +111,11 @@ function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdit
|
|
|
110
111
|
q,
|
|
111
112
|
J
|
|
112
113
|
]);
|
|
113
|
-
let
|
|
114
|
+
let ue = c((e) => {
|
|
114
115
|
e.preventDefault();
|
|
115
116
|
let t = e.clientX, n = $, r = (e) => {
|
|
116
117
|
let r = e.clientX - t;
|
|
117
|
-
|
|
118
|
+
ie(Math.max(M, Math.min(N, n + r)));
|
|
118
119
|
}, i = () => {
|
|
119
120
|
document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", i);
|
|
120
121
|
};
|
|
@@ -136,9 +137,9 @@ function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdit
|
|
|
136
137
|
overflow: "hidden"
|
|
137
138
|
},
|
|
138
139
|
children: [k && /* @__PURE__ */ h(o, {
|
|
139
|
-
onScrollToToday:
|
|
140
|
+
onScrollToToday: le,
|
|
140
141
|
config: W,
|
|
141
|
-
onExportCSV: W.showExportCSV ?
|
|
142
|
+
onExportCSV: W.showExportCSV ? oe : void 0
|
|
142
143
|
}), /* @__PURE__ */ g(m, {
|
|
143
144
|
sx: {
|
|
144
145
|
display: "flex",
|
|
@@ -148,7 +149,7 @@ function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdit
|
|
|
148
149
|
children: [
|
|
149
150
|
/* @__PURE__ */ h(i, {
|
|
150
151
|
scrollRef: X,
|
|
151
|
-
onScroll:
|
|
152
|
+
onScroll: se,
|
|
152
153
|
panelWidth: $,
|
|
153
154
|
onTaskClick: n,
|
|
154
155
|
onAddTask: s,
|
|
@@ -160,9 +161,9 @@ function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdit
|
|
|
160
161
|
onTaskCreated: C,
|
|
161
162
|
onTaskUpdated: w,
|
|
162
163
|
onTaskDeleted: O,
|
|
163
|
-
inlineEdit:
|
|
164
|
-
virtualizeRows:
|
|
165
|
-
showAssigneeColumn:
|
|
164
|
+
inlineEdit: te,
|
|
165
|
+
virtualizeRows: L,
|
|
166
|
+
showAssigneeColumn: R
|
|
166
167
|
}),
|
|
167
168
|
/* @__PURE__ */ h(m, {
|
|
168
169
|
"data-testid": "gantt-panel-divider",
|
|
@@ -173,18 +174,19 @@ function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdit
|
|
|
173
174
|
cursor: "col-resize",
|
|
174
175
|
"&:hover": { bgcolor: "action.hover" }
|
|
175
176
|
},
|
|
176
|
-
onMouseDown:
|
|
177
|
+
onMouseDown: ue
|
|
177
178
|
}),
|
|
178
179
|
/* @__PURE__ */ h(a, {
|
|
179
180
|
scrollRef: Z,
|
|
180
|
-
onScroll:
|
|
181
|
+
onScroll: ce,
|
|
181
182
|
onTaskClick: n,
|
|
182
183
|
onMilestoneClick: r,
|
|
183
184
|
draggable: F,
|
|
184
185
|
resizable: I,
|
|
185
|
-
progressDraggable:
|
|
186
|
-
showCriticalPath:
|
|
187
|
-
virtualizeRows:
|
|
186
|
+
progressDraggable: ne,
|
|
187
|
+
showCriticalPath: re,
|
|
188
|
+
virtualizeRows: L,
|
|
189
|
+
onDragStart: B,
|
|
188
190
|
onTaskMoved: V,
|
|
189
191
|
onTaskResized: H,
|
|
190
192
|
onTasksChange: x,
|
|
@@ -194,7 +196,7 @@ function O({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdit
|
|
|
194
196
|
})]
|
|
195
197
|
});
|
|
196
198
|
}
|
|
197
|
-
function k({ tasks: e, timeScale: i = "months", initialExpandAll: a = !1, showToolbar: o = !0, defaultRangeStart: s, defaultRangeEnd: c, translations: l, enableBuiltinDialogs: u = !0, toolbarConfig: f, zoomable: m = !1, draggable: g = !1, resizable: _ = !1, inlineEdit: y = !1, progressDraggable: b = !1, showCriticalPath: S = !1, virtualizeRows: w = !1, showAssigneeColumn: T = !1, cascadeDependencies: E = !1, statusColors: D, ganttTheme: k, onExportCSV: A,
|
|
199
|
+
function k({ tasks: e, timeScale: i = "months", initialExpandAll: a = !1, showToolbar: o = !0, defaultRangeStart: s, defaultRangeEnd: c, translations: l, enableBuiltinDialogs: u = !0, toolbarConfig: f, zoomable: m = !1, draggable: g = !1, resizable: _ = !1, inlineEdit: y = !1, progressDraggable: b = !1, showCriticalPath: S = !1, virtualizeRows: w = !1, showAssigneeColumn: T = !1, cascadeDependencies: E = !1, statusColors: D, ganttTheme: k, onExportCSV: A, onDragStart: j, onTaskClick: ee, onMilestoneClick: M, onAddTask: N, onEditTask: P, onDeleteTask: F, onStatusChange: I, onTasksChange: te, onTaskMoved: ne, onTaskResized: re, onTaskCreated: L, onTaskUpdated: R, onTaskDeleted: z, height: B, width: V, minPanelWidth: H, maxPanelWidth: U }) {
|
|
198
200
|
let W = d(() => ({
|
|
199
201
|
...r,
|
|
200
202
|
...l
|
|
@@ -233,16 +235,17 @@ function k({ tasks: e, timeScale: i = "months", initialExpandAll: a = !1, showTo
|
|
|
233
235
|
virtualizeRows: w,
|
|
234
236
|
showAssigneeColumn: T,
|
|
235
237
|
onExportCSV: A,
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
238
|
+
onDragStart: j,
|
|
239
|
+
onTaskClick: ee,
|
|
240
|
+
onMilestoneClick: M,
|
|
241
|
+
onAddTask: N,
|
|
242
|
+
onEditTask: P,
|
|
243
|
+
onDeleteTask: F,
|
|
244
|
+
onStatusChange: I,
|
|
245
|
+
onTasksChange: te,
|
|
246
|
+
onTaskMoved: ne,
|
|
247
|
+
onTaskResized: re,
|
|
248
|
+
onTaskCreated: L,
|
|
246
249
|
onTaskUpdated: R,
|
|
247
250
|
onTaskDeleted: z,
|
|
248
251
|
height: B,
|
|
@@ -11,6 +11,8 @@ export type GanttChartStoreState = {
|
|
|
11
11
|
defaultTimeScale: GanttTimeScale;
|
|
12
12
|
initialExpandAll: boolean;
|
|
13
13
|
isExpandedCustomized: boolean;
|
|
14
|
+
assigneeFilter: string;
|
|
15
|
+
setAssigneeFilter: (assignee: string) => void;
|
|
14
16
|
setTasks: (tasks: GanttTask[]) => void;
|
|
15
17
|
addTask: (task: GanttTask) => void;
|
|
16
18
|
updateTask: (task: GanttTask) => void;
|
|
@@ -21,6 +21,8 @@ function l(e, r = "months", o = !1, l, u = !1) {
|
|
|
21
21
|
defaultTimeScale: r,
|
|
22
22
|
initialExpandAll: o,
|
|
23
23
|
isExpandedCustomized: !1,
|
|
24
|
+
assigneeFilter: "",
|
|
25
|
+
setAssigneeFilter: (e) => s({ assigneeFilter: e }),
|
|
24
26
|
setTasks: (e) => {
|
|
25
27
|
s((n) => ({
|
|
26
28
|
tasks: e,
|
|
@@ -106,6 +108,7 @@ function l(e, r = "months", o = !1, l, u = !1) {
|
|
|
106
108
|
timelineRange: i(e.tasks),
|
|
107
109
|
isRangeCustomized: !1,
|
|
108
110
|
isExpandedCustomized: !1,
|
|
111
|
+
assigneeFilter: "",
|
|
109
112
|
expandedIds: e.initialExpandAll ? new Set(e.tasks.map((e) => e.id)) : new Set(e.tasks.filter((e) => !e.parentId).map((e) => e.id))
|
|
110
113
|
}));
|
|
111
114
|
},
|
|
@@ -52,6 +52,12 @@ export type GanttTranslations = {
|
|
|
52
52
|
dialogDeleteConfirm: string;
|
|
53
53
|
dialogFieldDependencies: string;
|
|
54
54
|
dialogFieldDependenciesNone: string;
|
|
55
|
+
/** Label for the progress slider in the task dialog (0–100 %) @since 3.16.0 */
|
|
56
|
+
dialogFieldProgress?: string;
|
|
57
|
+
/** "All" option label in the assignee filter dropdown @since 3.17.0 */
|
|
58
|
+
filterAssigneeAll?: string;
|
|
59
|
+
/** Assignee filter Select label in the toolbar @since 3.17.0 */
|
|
60
|
+
filterAssigneeLabel?: string;
|
|
55
61
|
columnActions: string;
|
|
56
62
|
/** Header label for the Assignee column — shown when showAssigneeColumn=true @since 2.7.0 */
|
|
57
63
|
columnAssignee?: string;
|
|
@@ -87,6 +93,8 @@ export type GanttToolbarConfig = {
|
|
|
87
93
|
showResetView?: boolean;
|
|
88
94
|
/** Show CSV export button in the toolbar (default: false) */
|
|
89
95
|
showExportCSV?: boolean;
|
|
96
|
+
/** Show assignee filter dropdown in toolbar (default: false) */
|
|
97
|
+
showAssigneeFilter?: boolean;
|
|
90
98
|
};
|
|
91
99
|
export type GanttChartProps = {
|
|
92
100
|
cascadeDependencies?: boolean;
|
|
@@ -124,6 +132,13 @@ export type GanttChartProps = {
|
|
|
124
132
|
onTaskClick?: (task: GanttTask) => void;
|
|
125
133
|
onTaskCreated?: (task: GanttTask) => void;
|
|
126
134
|
onTaskDeleted?: (taskId: string) => void;
|
|
135
|
+
/**
|
|
136
|
+
* Fired once when the user presses the mouse button on a draggable bar (before any movement).
|
|
137
|
+
* Use this for optimistic UI, analytics, or showing a shadow element during drag.
|
|
138
|
+
* `type` distinguishes between a move gesture and a resize gesture.
|
|
139
|
+
* @since 3.17.0
|
|
140
|
+
*/
|
|
141
|
+
onDragStart?: (task: GanttTask, type: "move" | "resize") => void;
|
|
127
142
|
onTaskMoved?: (task: GanttTask, newStart: Date, newEnd: Date) => void;
|
|
128
143
|
onTaskResized?: (task: GanttTask, newEnd: Date) => void;
|
|
129
144
|
onTasksChange?: (tasks: GanttTask[]) => void;
|
|
@@ -32,6 +32,9 @@ var e = {
|
|
|
32
32
|
dialogDeleteConfirm: "Soll die Aufgabe \"{name}\" wirklich gelöscht werden?",
|
|
33
33
|
dialogFieldDependencies: "Vorgänger",
|
|
34
34
|
dialogFieldDependenciesNone: "— Keine —",
|
|
35
|
+
dialogFieldProgress: "Fortschritt (%)",
|
|
36
|
+
filterAssigneeAll: "Alle",
|
|
37
|
+
filterAssigneeLabel: "Assignee",
|
|
35
38
|
scrollToTodayTooltip: "Zum heutigen Tag",
|
|
36
39
|
expandAllTooltip: "Alle aufklappen",
|
|
37
40
|
collapseAllTooltip: "Alle zuklappen",
|