sprintify-ui 0.11.18 → 0.11.19
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/package.json +1 -1
- package/src/components/BaseGantt.mdx +76 -41
package/package.json
CHANGED
|
@@ -1,20 +1,53 @@
|
|
|
1
1
|
import { Canvas, Meta, Primary, Controls, Story } from '@storybook/addon-docs/blocks';
|
|
2
|
-
|
|
2
|
+
|
|
3
3
|
import * as BaseGanttStories from './BaseGantt.stories';
|
|
4
|
-
|
|
4
|
+
|
|
5
5
|
<Meta of={BaseGanttStories} />
|
|
6
|
-
|
|
6
|
+
|
|
7
7
|
# BaseGantt
|
|
8
8
|
|
|
9
9
|
## Introduction
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
|
|
11
|
+
A Gantt chart component for visualizing tasks and events over a timeline. Supports hierarchical rows with nested items, relationship arrows between items, a resizable sidebar, a "now" line, and fully customizable rendering via slots.
|
|
12
12
|
|
|
13
13
|
<Primary />
|
|
14
14
|
|
|
15
|
-
##
|
|
15
|
+
## Relationships
|
|
16
|
+
|
|
17
|
+
Use the `relationships` prop to draw arrows between items. Each relationship connects a source item to a target item by their IDs.
|
|
18
|
+
|
|
19
|
+
<Canvas of={BaseGanttStories.Relationships} />
|
|
20
|
+
|
|
21
|
+
## Slots
|
|
22
|
+
|
|
23
|
+
| Slot | Props | Description |
|
|
24
|
+
|---------------|------------------------------------|--------------------------------------------------------------|
|
|
25
|
+
| row | `{ row: GanttRowFormatted }` | Custom rendering for a row bar on the chart |
|
|
26
|
+
| item | `{ item: GanttItemFormatted }` | Custom rendering for an item bar on the chart |
|
|
27
|
+
| sidebarRow | `{ row: GanttRowFormatted }` | Custom rendering for a row entry in the sidebar |
|
|
28
|
+
| sidebarItem | `{ item: GanttItemFormatted }` | Custom rendering for an item entry in the sidebar |
|
|
29
|
+
|
|
30
|
+
<Canvas of={BaseGanttStories.SlotItem} />
|
|
31
|
+
<Canvas of={BaseGanttStories.SlotSidebarSlots} />
|
|
32
|
+
|
|
33
|
+
## Events
|
|
34
|
+
|
|
35
|
+
| Event | Payload | Description |
|
|
36
|
+
|--------------|------------------------|--------------------------------------|
|
|
37
|
+
| row:click | `GanttRowFormatted` | Emitted when a row bar is clicked |
|
|
38
|
+
| item:click | `GanttItemFormatted` | Emitted when an item bar is clicked |
|
|
39
|
+
|
|
40
|
+
## Props
|
|
41
|
+
|
|
42
|
+
<Controls />
|
|
16
43
|
|
|
17
|
-
|
|
44
|
+
## Types
|
|
45
|
+
|
|
46
|
+
### Input types
|
|
47
|
+
|
|
48
|
+
These types are used when passing data to the component.
|
|
49
|
+
|
|
50
|
+
#### GanttRow
|
|
18
51
|
|
|
19
52
|
| Prop | Type | Description |
|
|
20
53
|
|-----------|-----------------------------|--------------------------------------------------|
|
|
@@ -22,58 +55,60 @@ This is the BaseGantt component used to display Gantt charts. It allows you to v
|
|
|
22
55
|
| name | string | Name of the row |
|
|
23
56
|
| meta | Object? | Optional metadata for the row |
|
|
24
57
|
| items | GanttItem[] | Array of items (tasks/events) in the row |
|
|
25
|
-
| height | number? | Optional custom height for the row. If not provided,
|
|
58
|
+
| height | number? | Optional custom height for the row. If not provided, `rowHeight` prop will be used. |
|
|
26
59
|
|
|
27
|
-
|
|
60
|
+
#### GanttItem
|
|
28
61
|
|
|
29
62
|
| Prop | Type | Description |
|
|
30
63
|
|-----------|-----------------------------|--------------------------------------------------|
|
|
31
64
|
| id | number \| string | Unique identifier for the item |
|
|
32
65
|
| start | string | Start date/time (ISO string) |
|
|
33
66
|
| end | string | End date/time (ISO string) |
|
|
34
|
-
| height | number? | Optional custom height for the item. If not provided,
|
|
67
|
+
| height | number? | Optional custom height for the item. If not provided, `rowHeight` prop will be used. |
|
|
35
68
|
| name | string | Name of the item |
|
|
36
69
|
| meta | Object? | Optional metadata for the item |
|
|
37
70
|
| color | string | Color used to display the item |
|
|
38
71
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
Once the rows have been formatted for rendering, the GanttRowFormatted type is used.
|
|
72
|
+
#### GanttRelationship
|
|
42
73
|
|
|
43
74
|
| Prop | Type | Description |
|
|
44
75
|
|-----------|-----------------------------|--------------------------------------------------|
|
|
45
|
-
|
|
|
46
|
-
|
|
|
47
|
-
| items | GanttItemFormatted[] | Array of formatted items (tasks/events) in the row |
|
|
48
|
-
| height | number | The rendered height of the row |
|
|
49
|
-
| barHeight | number | The height of the bars in the row |
|
|
50
|
-
| width | number | The width of the bar in pixels |
|
|
51
|
-
| start | DateTime | The DateTime start of the bar |
|
|
52
|
-
| end | DateTime | The DateTime end of the bar |
|
|
53
|
-
| x | number | The x position of the bar in pixels |
|
|
54
|
-
| y | number | The y position of the bar in pixels |
|
|
55
|
-
| meta | Object? | Optional metadata for the row |
|
|
76
|
+
| fromId | number \| string | ID of the source item (where the arrow starts) |
|
|
77
|
+
| toId | number \| string | ID of the target item (where the arrow ends) |
|
|
56
78
|
|
|
57
|
-
###
|
|
79
|
+
### Formatted types
|
|
58
80
|
|
|
59
|
-
|
|
81
|
+
These types are provided to slot consumers and event handlers after the component has processed the input data for rendering.
|
|
82
|
+
|
|
83
|
+
#### GanttRowFormatted
|
|
60
84
|
|
|
61
85
|
| Prop | Type | Description |
|
|
62
86
|
|-----------|-----------------------------|--------------------------------------------------|
|
|
63
|
-
| id | number \| string | Unique identifier for the
|
|
64
|
-
| name
|
|
65
|
-
|
|
|
66
|
-
| height
|
|
67
|
-
| barHeight | number
|
|
68
|
-
| width
|
|
69
|
-
| start | DateTime
|
|
70
|
-
| end | DateTime
|
|
71
|
-
| x
|
|
72
|
-
| y
|
|
73
|
-
|
|
|
74
|
-
| meta | Object? | Optional metadata for the item |
|
|
87
|
+
| id | number \| string | Unique identifier for the row |
|
|
88
|
+
| name | string | Name of the row |
|
|
89
|
+
| items | GanttItemFormatted[] | Array of formatted items in the row |
|
|
90
|
+
| height | number | The rendered height of the row |
|
|
91
|
+
| barHeight | number | The height of the bars in the row |
|
|
92
|
+
| width | number | The width of the bar in pixels |
|
|
93
|
+
| start | DateTime | The DateTime start of the bar |
|
|
94
|
+
| end | DateTime | The DateTime end of the bar |
|
|
95
|
+
| x | number | The x position of the bar in pixels |
|
|
96
|
+
| y | number | The y position of the bar in pixels |
|
|
97
|
+
| meta | Object? | Optional metadata for the row |
|
|
75
98
|
|
|
99
|
+
#### GanttItemFormatted
|
|
76
100
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
101
|
+
| Prop | Type | Description |
|
|
102
|
+
|--------------|--------------------------|--------------------------------------------------|
|
|
103
|
+
| id | number \| string | Unique identifier for the item |
|
|
104
|
+
| name | string | Name of the item |
|
|
105
|
+
| color | string | The color of the item |
|
|
106
|
+
| height | number | The rendered height of the item |
|
|
107
|
+
| barHeight | number | The height of the bar in the item |
|
|
108
|
+
| width | number | The width of the item in pixels |
|
|
109
|
+
| start | DateTime | The DateTime start of the item |
|
|
110
|
+
| end | DateTime | The DateTime end of the item |
|
|
111
|
+
| x | number | The x position of the item in pixels |
|
|
112
|
+
| y | number | The y position of the item in pixels |
|
|
113
|
+
| milliseconds | number | The duration of the item in milliseconds |
|
|
114
|
+
| meta | Object? | Optional metadata for the item |
|