react-pert 1.0.0-beta.1 → 1.0.1
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.md +241 -61
- package/dist/index.d.ts +160 -18
- package/dist/index.js +582 -132
- package/dist/index.umd.cjs +11 -1
- package/dist/main.css +1 -0
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -1,17 +1,21 @@
|
|
|
1
|
-
<h1 align="center">pert
|
|
1
|
+
<h1 align="center">react-pert</h1>
|
|
2
2
|
|
|
3
3
|
## :star2: Overview
|
|
4
4
|
|
|
5
5
|
This package provides tools to calculate and visualize a PERT (Program Evaluation and Review Technique) diagram. It includes the following components and utilities:
|
|
6
6
|
|
|
7
|
-
- **`
|
|
8
|
-
- **`
|
|
9
|
-
-
|
|
7
|
+
- **`Pert`**: A component to render the PERT diagram.
|
|
8
|
+
- **`usePert`**: A custom hook to retrieve PERT results.
|
|
9
|
+
- **Chart Interaction**: Allows interaction with the diagram, enabling the selection of tasks and displaying only the path related to the selected task.
|
|
10
10
|
|
|
11
11
|
### :rocket: Progress
|
|
12
12
|
|
|
13
13
|
- :white_check_mark: **PERT Calculator**: Fully functional.
|
|
14
|
-
- :
|
|
14
|
+
- :white_check_mark: **PERT Diagram**: Fully functional.
|
|
15
|
+
|
|
16
|
+
### :computer: Demo
|
|
17
|
+
|
|
18
|
+
Check out the live demo [here](https://ucfx.github.io/react-pert/).
|
|
15
19
|
|
|
16
20
|
---
|
|
17
21
|
|
|
@@ -27,57 +31,68 @@ npm install react-pert
|
|
|
27
31
|
|
|
28
32
|
## :book: Usage
|
|
29
33
|
|
|
30
|
-
###
|
|
34
|
+
### Using `Pert` Component
|
|
35
|
+
|
|
36
|
+
```jsx
|
|
37
|
+
import { Pert, type TaskInput } from "react-pert";
|
|
38
|
+
|
|
39
|
+
const App = () => {
|
|
40
|
+
const tasks: TaskInput[] = [
|
|
41
|
+
{ key: "1", duration: 5, text: "A" },
|
|
42
|
+
{ key: "2", duration: 4, text: "B" },
|
|
43
|
+
{ key: "3", duration: 2, text: "C", dependsOn: ["1"] },
|
|
44
|
+
{ key: "4", duration: 3, text: "D", dependsOn: ["2"] },
|
|
45
|
+
//...
|
|
46
|
+
];
|
|
47
|
+
|
|
48
|
+
return <Pert tasks={tasks} />;
|
|
49
|
+
};
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Using `usePert` Hook
|
|
31
53
|
|
|
32
|
-
|
|
54
|
+
You need to wrap your application with `PertProvider` to use the `usePert` hook. Here is an example of how you can use it:
|
|
33
55
|
|
|
34
|
-
|
|
56
|
+
- **Note**: You should put the `Pert` component and `usePert` hook in the same `PertProvider` to ensure that the PERT data is available to both.
|
|
35
57
|
|
|
36
58
|
```jsx
|
|
37
|
-
import {
|
|
59
|
+
import { PertProvider, usePert, type TaskInput } from "react-pert";
|
|
38
60
|
|
|
39
61
|
const App = () => {
|
|
40
|
-
const tasks:
|
|
62
|
+
const tasks: TaskInput[] = [
|
|
41
63
|
{ key: "1", duration: 5, text: "A" },
|
|
42
64
|
{ key: "2", duration: 4, text: "B" },
|
|
43
65
|
{ key: "3", duration: 2, text: "C", dependsOn: ["1"] },
|
|
44
66
|
{ key: "4", duration: 3, text: "D", dependsOn: ["2"] },
|
|
45
|
-
|
|
67
|
+
//...
|
|
46
68
|
];
|
|
47
|
-
|
|
48
69
|
return (
|
|
49
70
|
<PertProvider>
|
|
50
|
-
<Pert tasks={tasks} />
|
|
71
|
+
<Pert tasks={tasks} />
|
|
51
72
|
<PertDetails />
|
|
52
73
|
</PertProvider>
|
|
53
74
|
);
|
|
54
75
|
};
|
|
55
76
|
```
|
|
56
77
|
|
|
57
|
-
---
|
|
58
|
-
|
|
59
|
-
### Using `usePertData` Hook
|
|
60
|
-
|
|
61
|
-
The `usePertData` hook allows you to calculate and retrieve PERT results. Here's how you can use it:
|
|
62
|
-
|
|
63
78
|
```jsx
|
|
64
|
-
import {
|
|
79
|
+
import { usePert } from "react-pert";
|
|
65
80
|
|
|
66
81
|
const PertDetails = () => {
|
|
67
|
-
const {
|
|
82
|
+
const { projectDuration, criticalPaths } = usePert();
|
|
68
83
|
|
|
69
84
|
return (
|
|
70
85
|
<div>
|
|
71
|
-
<h3>Project Duration : {
|
|
86
|
+
<h3>Project Duration : {projectDuration}</h3>
|
|
72
87
|
<h3>Critical Paths:</h3>
|
|
73
88
|
<div>
|
|
74
89
|
{criticalPaths.map((cp, index) => (
|
|
75
90
|
<div key={index}>
|
|
76
91
|
{cp.map((p, i) => (
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
{i
|
|
80
|
-
</
|
|
92
|
+
<span key={i}>
|
|
93
|
+
{p.text}
|
|
94
|
+
{i < cp.length - 1 && " → "}
|
|
95
|
+
</span>
|
|
81
96
|
))}
|
|
82
97
|
</div>
|
|
83
98
|
))}
|
|
@@ -89,13 +104,120 @@ const PertDetails = () => {
|
|
|
89
104
|
|
|
90
105
|
---
|
|
91
106
|
|
|
107
|
+
## :bulb: Examples
|
|
108
|
+
|
|
109
|
+
- ### setSelectedTask
|
|
110
|
+
|
|
111
|
+
You can use the `setSelectedTask` function to select a task in the PERT diagram. This function is available when you import `setSelectedTask` from `react-pert`.
|
|
112
|
+
|
|
113
|
+
```typescript
|
|
114
|
+
setSelectedTask: (taskKey: string | null) => void;
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
```jsx
|
|
118
|
+
import { Pert, PertProvider, setSelectedTask } from "react-pert";
|
|
119
|
+
|
|
120
|
+
const App = () => {
|
|
121
|
+
const tasks = [
|
|
122
|
+
{ key: "1", duration: 5, text: "A" },
|
|
123
|
+
//...
|
|
124
|
+
];
|
|
125
|
+
|
|
126
|
+
const handleClick = () => {
|
|
127
|
+
setSelectedTask("1");
|
|
128
|
+
};
|
|
129
|
+
const handleClear = () => {
|
|
130
|
+
setSelectedTask(null);
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
return (
|
|
134
|
+
// PertProvider is optional if you are using only setSelectedTask
|
|
135
|
+
<PertProvider>
|
|
136
|
+
<Pert tasks={tasks} />
|
|
137
|
+
<button onClick={handleClick}>Select Task 1</button>
|
|
138
|
+
<button onClick={handleClear}>Clear Selection</button>
|
|
139
|
+
</PertProvider>
|
|
140
|
+
);
|
|
141
|
+
};
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
- ### onSelect
|
|
145
|
+
|
|
146
|
+
You can use the `onSelect` prop to get the selected task when a task is selected in the PERT diagram.
|
|
147
|
+
|
|
148
|
+
```typescript
|
|
149
|
+
onSelect?: (task: Task) => void;
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
```jsx
|
|
153
|
+
import { Pert } from "react-pert";
|
|
154
|
+
|
|
155
|
+
const App = () => {
|
|
156
|
+
const tasks = [/*...*/];
|
|
157
|
+
const handleSelect = (task) => {
|
|
158
|
+
console.log("Selected Task:", task);
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
return <Pert tasks={tasks} onSelect={handleSelect} />;
|
|
162
|
+
};
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
- ### `usePert` with `PertOptions`
|
|
166
|
+
|
|
167
|
+
You can pass options to the `usePert` hook to customize the output data.
|
|
168
|
+
|
|
169
|
+
```typescript
|
|
170
|
+
const results = usePert({ bounds: true });
|
|
171
|
+
```
|
|
172
|
+
- Default: `true`
|
|
173
|
+
|
|
174
|
+
The `usePert` hook can be customized using the `bounds` option to include or exclude boundary tasks (Start and Finish) in the returned tasks.
|
|
175
|
+
|
|
176
|
+
#### Input
|
|
177
|
+
|
|
178
|
+
```jsx
|
|
179
|
+
const input: TaskInput[] = [
|
|
180
|
+
{ key: "1", duration: 5, text: "A" },
|
|
181
|
+
{ key: "2", duration: 4, text: "B", dependsOn: ["1"] },
|
|
182
|
+
{ key: "3", duration: 2, text: "C", dependsOn: ["2"] },
|
|
183
|
+
];
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
#### Output with `bounds = true`
|
|
187
|
+
|
|
188
|
+
When `bounds` is set to `true`, the Start and Finish tasks are included:
|
|
189
|
+
|
|
190
|
+
```jsx
|
|
191
|
+
const output: Task[] = [
|
|
192
|
+
{ key: "Start", text: "Start", duration: 0, dependsOn: [] },
|
|
193
|
+
{ key: "1", text: "A", duration: 5, dependsOn: ["Start"], ...rest /* other properties */ },
|
|
194
|
+
{ key: "2", text: "B", duration: 4, dependsOn: ["1"], ...rest /* other properties */ },
|
|
195
|
+
{ key: "3", text: "C", duration: 2, dependsOn: ["2"], ...rest /* other properties */ },
|
|
196
|
+
{ key: "Finish", text: "Finish", duration: 0, dependsOn: ["3"] },
|
|
197
|
+
];
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
#### Output with `bounds = false`
|
|
201
|
+
|
|
202
|
+
When `bounds` is set to `false`, the Start and Finish tasks are excluded:
|
|
203
|
+
|
|
204
|
+
```jsx
|
|
205
|
+
const output: Task[] = [
|
|
206
|
+
{ key: "1", text: "A", duration: 5, dependsOn: [], ...rest /* other properties */,},
|
|
207
|
+
{ key: "2", text: "B", duration: 4, dependsOn: ["1"], ...rest /* other properties */ },
|
|
208
|
+
{ key: "3", text: "C", duration: 2, dependsOn: ["2"], ...rest /* other properties */ },
|
|
209
|
+
];
|
|
210
|
+
```
|
|
211
|
+
|
|
92
212
|
## :books: API Reference
|
|
93
213
|
|
|
94
214
|
### `PertProps`
|
|
95
215
|
|
|
96
|
-
| Attribute
|
|
97
|
-
|
|
|
98
|
-
| `tasks`
|
|
216
|
+
| Attribute | Type | Description |
|
|
217
|
+
| ----------- | --------------------------- | --------------------------------------------------------------- |
|
|
218
|
+
| `tasks` | [`TaskInput[]`](#taskinput) | Array of tasks to be used for the calculation and PERT diagram. |
|
|
219
|
+
| `styles?` | [`PertStyles`](#pertstyles) | Optional styles configuration for the PERT chart. |
|
|
220
|
+
| `onSelect?` | `(task: `[`Task`](#task)`) => void` | Optional callback invoked when a task is selected. |
|
|
99
221
|
|
|
100
222
|
### `Pert`
|
|
101
223
|
|
|
@@ -103,22 +225,38 @@ A visual representation of the PERT diagram (currently in development).
|
|
|
103
225
|
|
|
104
226
|
---
|
|
105
227
|
|
|
106
|
-
### `
|
|
228
|
+
### `usePert`
|
|
229
|
+
|
|
230
|
+
#### Options:
|
|
231
|
+
|
|
232
|
+
### `PertOptions`
|
|
233
|
+
|
|
234
|
+
| Attribute | Type | Description |
|
|
235
|
+
| --------- | --------- | ------------------------------------------------------------------------------------------------------------------ |
|
|
236
|
+
| `bounds` | `boolean` | Determines whether the boundary tasks (Start and Finish) should be included in the returned tasks. Default: `true` |
|
|
237
|
+
|
|
238
|
+
- If `true`, the Start and Finish tasks will be included.
|
|
239
|
+
- If `false`, the Start and Finish tasks will be excluded.
|
|
240
|
+
- Default: `true`
|
|
107
241
|
|
|
108
242
|
#### Returns:
|
|
109
243
|
|
|
110
|
-
- **`PertDataType`**: Contains all PERT data including tasks, levels, links, and
|
|
244
|
+
- **`PertDataType`**: Contains all PERT data including tasks, levels, links, critical paths, and project duration.
|
|
111
245
|
|
|
112
246
|
### `PertDataType`
|
|
113
247
|
|
|
114
|
-
| Attribute
|
|
115
|
-
|
|
|
116
|
-
| `tasks`
|
|
117
|
-
| `levels`
|
|
118
|
-
| `links`
|
|
119
|
-
| `criticalPaths`
|
|
248
|
+
| Attribute | Type | Description |
|
|
249
|
+
| ----------------- | --------------------------------- | ----------------------------------------------------------- |
|
|
250
|
+
| `tasks` | [`Task[]`](#task) | Array of tasks with PERT calculation results. |
|
|
251
|
+
| `levels` | [`LevelType`](#leveltype) | Mapping of task keys to their respective levels. |
|
|
252
|
+
| `links` | [`LinkType[]`](#linktype) | Array of links representing the dependencies between tasks. |
|
|
253
|
+
| `criticalPaths` | [`CriticalPath[]`](#criticalpath) | Array of critical paths in the project. |
|
|
254
|
+
| `projectDuration` | `number` | Total duration of the project. |
|
|
255
|
+
| `error?` | `string \| null` | Current error message, if any. |
|
|
256
|
+
|
|
257
|
+
### `TaskInput`
|
|
120
258
|
|
|
121
|
-
|
|
259
|
+
Represents a task with input data for PERT calculation.
|
|
122
260
|
|
|
123
261
|
| Attribute | Type | Description |
|
|
124
262
|
| ------------ | ---------- | --------------------------------------------------------------- |
|
|
@@ -127,47 +265,89 @@ A visual representation of the PERT diagram (currently in development).
|
|
|
127
265
|
| `duration` | `number` | Duration of the task in some unit (e.g., days). |
|
|
128
266
|
| `dependsOn?` | `string[]` | Array of task keys that the current task depends on (optional). |
|
|
129
267
|
|
|
130
|
-
### `
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
|
135
|
-
|
|
|
136
|
-
| `
|
|
137
|
-
| `
|
|
138
|
-
| `
|
|
139
|
-
| `
|
|
140
|
-
| `
|
|
141
|
-
| `
|
|
142
|
-
| `
|
|
268
|
+
### `Task`
|
|
269
|
+
|
|
270
|
+
Represents a task with PERT calculation results.
|
|
271
|
+
|
|
272
|
+
| Attribute | Type | Description |
|
|
273
|
+
| ------------- | ---------- | -------------------------------------------- |
|
|
274
|
+
| `key` | `string` | Unique identifier for the task. |
|
|
275
|
+
| `text` | `string` | Description or name of the task. |
|
|
276
|
+
| `duration` | `number` | Duration of the task. |
|
|
277
|
+
| `dependsOn?` | `string[]` | Array of task keys the task depends on. |
|
|
278
|
+
| `earlyStart` | `number` | The earliest start time for the task. |
|
|
279
|
+
| `earlyFinish` | `number` | The earliest finish time for the task. |
|
|
280
|
+
| `lateStart` | `number` | The latest start time for the task. |
|
|
281
|
+
| `lateFinish` | `number` | The latest finish time for the task. |
|
|
282
|
+
| `level` | `number` | The level of the task in the PERT diagram. |
|
|
283
|
+
| `critical` | `boolean` | Indicates if the task is on a critical path. |
|
|
284
|
+
| `freeFloat` | `number` | The free float time of the task. |
|
|
285
|
+
| `totalFloat` | `number` | The total float time of the task. |
|
|
286
|
+
| `index` | `number` | Index of the task in the sequence. |
|
|
287
|
+
|
|
288
|
+
### `PertStyles`
|
|
289
|
+
|
|
290
|
+
Styles configuration for the PERT chart.
|
|
291
|
+
|
|
292
|
+
| Attribute | Type | Description |
|
|
293
|
+
| ---------------------- | ---------------------------- | -------------------------------------------------------- |
|
|
294
|
+
| `disableGrid?` | `boolean` | Whether to disable grid lines in the chart. |
|
|
295
|
+
| `taskSize?` | `number` | Size of the task node in pixels. |
|
|
296
|
+
| `fontFamily?` | `string` | Font family for the text in the task nodes. |
|
|
297
|
+
| `fontSize?` | [`FontSize`](#fontsize) | Font size for the text in the task nodes. |
|
|
298
|
+
| `textColor?` | `string` | Color of the text inside the task nodes. |
|
|
299
|
+
| `chartBackground?` | `string` | Background color of the entire chart. |
|
|
300
|
+
| `taskBackground?` | `string` | Background color of the task nodes. |
|
|
301
|
+
| `gridColor?` | `string` | Color of the grid lines in the chart. |
|
|
302
|
+
| `borderWidth?` | `number` | Width of the border for task nodes. |
|
|
303
|
+
| `selectedBorderWidth?` | `number` | Width of the border for selected task nodes. |
|
|
304
|
+
| `hoverBorderWidth?` | `number` | Width of the border when hovering over task nodes. |
|
|
305
|
+
| `borderColor?` | `string` | Color of the border for task nodes. |
|
|
306
|
+
| `selectedBorderColor?` | `string` | Color of the border for selected task nodes. |
|
|
307
|
+
| `criticalColor?` | `string` | Color for critical path elements (e.g., tasks or links). |
|
|
308
|
+
| `arrowColor?` | `string` | Color of the arrows (links) between task nodes. |
|
|
309
|
+
| `arrowWidth?` | `number` | Width of the arrows (links) between task nodes. |
|
|
310
|
+
| `gap?` | `{ x?: number; y?: number }` | Gap between task nodes in the chart. |
|
|
311
|
+
|
|
312
|
+
### `FontSize`
|
|
313
|
+
|
|
314
|
+
| Type | Description |
|
|
315
|
+
| ------------------------------------------------------------------------- | --------------------------------------------- |
|
|
316
|
+
| `"sm"`, `"md"`, `"lg"`, `"xl"`, `"2xl"`, `"3xl"`, `string & {}`, `number` | Font size options for text in the task nodes. |
|
|
143
317
|
|
|
144
318
|
### `LevelType`
|
|
145
319
|
|
|
320
|
+
Represents a mapping of task keys to their respective levels in the PERT diagram.
|
|
321
|
+
|
|
146
322
|
| Attribute | Type | Description |
|
|
147
323
|
| --------- | ---------- | ----------------------------------------- |
|
|
148
|
-
| `key` | `
|
|
324
|
+
| `key` | `number` | The level number in the PERT diagram. |
|
|
149
325
|
| `value` | `string[]` | Array of task keys at the specific level. |
|
|
150
326
|
|
|
151
327
|
### `LinkType`
|
|
152
328
|
|
|
329
|
+
Represents a link between two tasks in the PERT diagram.
|
|
330
|
+
|
|
153
331
|
| Attribute | Type | Description |
|
|
154
332
|
| ---------- | --------- | ------------------------------------------------- |
|
|
155
333
|
| `from` | `string` | The task key from which the link originates. |
|
|
156
334
|
| `to` | `string` | The task key to which the link leads. |
|
|
157
335
|
| `critical` | `boolean` | Indicates if the link is part of a critical path. |
|
|
158
336
|
|
|
159
|
-
### `
|
|
337
|
+
### `CriticalPath`
|
|
338
|
+
|
|
339
|
+
Represents a critical path in the PERT diagram.
|
|
160
340
|
|
|
161
|
-
|
|
|
162
|
-
|
|
|
163
|
-
| `
|
|
164
|
-
| `key` | `string` | The key of the task on the critical path. |
|
|
341
|
+
| | Type | Description |
|
|
342
|
+
| -------------- | -------------------------- | ------------------------------------------------------------------------- |
|
|
343
|
+
| `CriticalPath` | [`PathItem[]`](#pathitem) | An array of tasks (`PathItem`) forming the critical path. |
|
|
165
344
|
|
|
166
|
-
### `
|
|
345
|
+
### `PathItem`
|
|
167
346
|
|
|
168
|
-
|
|
|
169
|
-
|
|
|
170
|
-
| `
|
|
347
|
+
| Attribute | Type | Description |
|
|
348
|
+
| --------- | -------- | ---------------------------------- |
|
|
349
|
+
| `text` | `string` | Description or name of the task. |
|
|
350
|
+
| `key` | `string` | Task key identifier. |
|
|
171
351
|
|
|
172
352
|
---
|
|
173
353
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,23 @@
|
|
|
1
1
|
import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
|
|
4
|
-
export declare type
|
|
4
|
+
export declare type CriticalPath = PathItem[];
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
declare interface ErrorType {
|
|
7
|
+
/** Current error message, if any */
|
|
8
|
+
error: string | null;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
declare interface EventOption {
|
|
12
|
+
/**
|
|
13
|
+
* Invokes on task select.
|
|
14
|
+
*/
|
|
15
|
+
onSelect?: (task: Task) => void;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export declare type FontSize = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | (string & {}) | number;
|
|
19
|
+
|
|
20
|
+
export declare type LevelType = Map<number, string[]>;
|
|
9
21
|
|
|
10
22
|
export declare type LinkType = {
|
|
11
23
|
from: string;
|
|
@@ -13,29 +25,159 @@ export declare type LinkType = {
|
|
|
13
25
|
critical: boolean;
|
|
14
26
|
};
|
|
15
27
|
|
|
16
|
-
declare type
|
|
28
|
+
declare type PathItem = {
|
|
17
29
|
text: string;
|
|
18
30
|
key: string;
|
|
19
31
|
};
|
|
20
32
|
|
|
21
|
-
export declare
|
|
33
|
+
export declare const Pert: React.FunctionComponent<PertProps>;
|
|
22
34
|
|
|
23
|
-
export declare
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
35
|
+
export declare interface PertDataType extends ResultType, ErrorType {
|
|
36
|
+
/**
|
|
37
|
+
* Task with metrics.
|
|
38
|
+
*/
|
|
39
|
+
tasks: Task[];
|
|
40
|
+
}
|
|
29
41
|
|
|
30
|
-
export declare
|
|
31
|
-
|
|
32
|
-
|
|
42
|
+
export declare interface PertOptions {
|
|
43
|
+
/**
|
|
44
|
+
* Determines whether the boundary tasks (Start and Finish) should be included in the returned tasks.
|
|
45
|
+
* - If `true`, the Start and Finish tasks will be included.
|
|
46
|
+
* - If `false`, the Start and Finish tasks will be excluded.
|
|
47
|
+
* @type {boolean}
|
|
48
|
+
* @default true
|
|
49
|
+
*/
|
|
50
|
+
bounds?: boolean;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export declare interface PertProps extends EventOption {
|
|
54
|
+
tasks: TaskInput[];
|
|
55
|
+
styles?: PertStyles;
|
|
56
|
+
}
|
|
33
57
|
|
|
34
58
|
export declare const PertProvider: ({ children }: {
|
|
35
59
|
children: ReactNode;
|
|
36
60
|
}) => JSX_2.Element;
|
|
37
61
|
|
|
38
|
-
export declare
|
|
62
|
+
export declare interface PertStyles {
|
|
63
|
+
/**
|
|
64
|
+
* Whether to disable grid lines in the chart.
|
|
65
|
+
* @default false
|
|
66
|
+
*/
|
|
67
|
+
disableGrid?: boolean;
|
|
68
|
+
/**
|
|
69
|
+
* Size of the task node in pixels.
|
|
70
|
+
* @default 100
|
|
71
|
+
* @min 70
|
|
72
|
+
* @max 200
|
|
73
|
+
*/
|
|
74
|
+
taskSize?: number;
|
|
75
|
+
/**
|
|
76
|
+
* Font family for the text in the task nodes.
|
|
77
|
+
* @default "inherit"
|
|
78
|
+
* @example
|
|
79
|
+
* "Arial" | "Roboto" | "sans-serif"
|
|
80
|
+
*/
|
|
81
|
+
fontFamily?: string;
|
|
82
|
+
/**
|
|
83
|
+
* Font size for the text in the task nodes.
|
|
84
|
+
* @default "md"
|
|
85
|
+
* @example
|
|
86
|
+
* "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | 24 | "1.5rem"
|
|
87
|
+
*/
|
|
88
|
+
fontSize?: FontSize;
|
|
89
|
+
/**
|
|
90
|
+
* Color of the text inside the task nodes.
|
|
91
|
+
* @default "#000"
|
|
92
|
+
*/
|
|
93
|
+
textColor?: string;
|
|
94
|
+
/**
|
|
95
|
+
* Background color of the entire chart.
|
|
96
|
+
* @default "#fff"
|
|
97
|
+
*/
|
|
98
|
+
chartBackground?: string;
|
|
99
|
+
/**
|
|
100
|
+
* Background color of the task nodes.
|
|
101
|
+
* @default "#aaaeff"
|
|
102
|
+
*/
|
|
103
|
+
taskBackground?: string;
|
|
104
|
+
/**
|
|
105
|
+
* Color of the grid lines in the chart.
|
|
106
|
+
* @default "#00000030"
|
|
107
|
+
*/
|
|
108
|
+
gridColor?: string;
|
|
109
|
+
/**
|
|
110
|
+
* Width of the border for task nodes.
|
|
111
|
+
* @default 1
|
|
112
|
+
*/
|
|
113
|
+
borderWidth?: number;
|
|
114
|
+
/**
|
|
115
|
+
* Width of the border for selected task nodes.
|
|
116
|
+
* @default 3
|
|
117
|
+
*/
|
|
118
|
+
selectedBorderWidth?: number;
|
|
119
|
+
/**
|
|
120
|
+
* Width of the border when hovering over task nodes.
|
|
121
|
+
* @default 2
|
|
122
|
+
*/
|
|
123
|
+
hoverBorderWidth?: number;
|
|
124
|
+
/**
|
|
125
|
+
* Color of the border for task nodes.
|
|
126
|
+
* @default "#615f77"
|
|
127
|
+
*/
|
|
128
|
+
borderColor?: string;
|
|
129
|
+
/**
|
|
130
|
+
* Color of the border for selected task nodes.
|
|
131
|
+
* @default "#6868ff"
|
|
132
|
+
*/
|
|
133
|
+
selectedBorderColor?: string;
|
|
134
|
+
/**
|
|
135
|
+
* Color for critical path elements (e.g., tasks or links).
|
|
136
|
+
* @default "#ff9147"
|
|
137
|
+
*/
|
|
138
|
+
criticalColor?: string;
|
|
139
|
+
/**
|
|
140
|
+
* Color of the arrows (links) between task nodes.
|
|
141
|
+
* @default "#615f77"
|
|
142
|
+
*/
|
|
143
|
+
arrowColor?: string;
|
|
144
|
+
/**
|
|
145
|
+
* Width of the arrows (links) between task nodes.
|
|
146
|
+
* @default 2
|
|
147
|
+
*/
|
|
148
|
+
arrowWidth?: number;
|
|
149
|
+
/**
|
|
150
|
+
* Gap between task nodes in the chart.
|
|
151
|
+
* @default { x: TaskSize ?? 100, y: TaskSize ?? 100 }
|
|
152
|
+
*/
|
|
153
|
+
gap?: {
|
|
154
|
+
x?: number;
|
|
155
|
+
y?: number;
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
declare interface ResultType {
|
|
160
|
+
/**
|
|
161
|
+
* Levels of tasks.
|
|
162
|
+
*/
|
|
163
|
+
levels: LevelType;
|
|
164
|
+
/**
|
|
165
|
+
* Links between tasks.
|
|
166
|
+
*/
|
|
167
|
+
links: LinkType[];
|
|
168
|
+
/**
|
|
169
|
+
* Critical paths.
|
|
170
|
+
*/
|
|
171
|
+
criticalPaths: CriticalPath[];
|
|
172
|
+
/**
|
|
173
|
+
* Project Duration.
|
|
174
|
+
*/
|
|
175
|
+
projectDuration: number;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
export declare const setSelectedTask: (taskKey: string | null) => void;
|
|
179
|
+
|
|
180
|
+
export declare type Task = TaskInput & {
|
|
39
181
|
earlyStart: number;
|
|
40
182
|
earlyFinish: number;
|
|
41
183
|
lateStart: number;
|
|
@@ -47,13 +189,13 @@ export declare type TaskResultType = TaskType & {
|
|
|
47
189
|
index: number;
|
|
48
190
|
};
|
|
49
191
|
|
|
50
|
-
export declare type
|
|
192
|
+
export declare type TaskInput = {
|
|
51
193
|
key: string;
|
|
52
194
|
text: string;
|
|
53
195
|
duration: number;
|
|
54
196
|
dependsOn?: string[];
|
|
55
197
|
};
|
|
56
198
|
|
|
57
|
-
export declare const
|
|
199
|
+
export declare const usePert: (options?: PertOptions) => PertDataType;
|
|
58
200
|
|
|
59
201
|
export { }
|