@timelinekit/core 1.0.8 → 1.0.9
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 +28 -14
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -64,18 +64,24 @@ npm install @timelinekit/react @timelinekit/core
|
|
|
64
64
|
```tsx
|
|
65
65
|
import { useRef, useEffect } from 'react';
|
|
66
66
|
import { GanttChart, GanttChartRef } from '@timelinekit/react';
|
|
67
|
-
import { Task, TaskLink } from '@timelinekit/core';
|
|
68
67
|
import '@timelinekit/core/styles';
|
|
69
68
|
|
|
69
|
+
const data = {
|
|
70
|
+
tasks: [
|
|
71
|
+
{ id: '1', name: 'Design', startTime: '2027-01-05', endTime: '2027-01-09', type: 'task', progress: 100 },
|
|
72
|
+
{ id: '2', name: 'Development', startTime: '2027-01-12', endTime: '2027-01-23', type: 'task' },
|
|
73
|
+
],
|
|
74
|
+
links: [
|
|
75
|
+
{ id: 'l1', from: '1', to: '2', type: 'finishToStart' },
|
|
76
|
+
],
|
|
77
|
+
};
|
|
78
|
+
|
|
70
79
|
function App() {
|
|
71
80
|
const ref = useRef<GanttChartRef>(null);
|
|
72
81
|
|
|
73
82
|
useEffect(() => {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
const taskB = gantt.list.addTask(new Task({ id: '2', name: 'Development', startTime: '2027-01-12', endTime: '2027-01-23' }));
|
|
77
|
-
gantt.list.addLink(new TaskLink({ id: 'l1', from: taskA, to: taskB, type: 'finishToStart' }));
|
|
78
|
-
gantt.zoomToFit();
|
|
83
|
+
ref.current!.load(JSON.stringify(data));
|
|
84
|
+
ref.current!.zoomToFit();
|
|
79
85
|
}, []);
|
|
80
86
|
|
|
81
87
|
return <GanttChart ref={ref} style={{ height: '600px' }} />;
|
|
@@ -89,20 +95,28 @@ npm install @timelinekit/angular @timelinekit/core
|
|
|
89
95
|
```
|
|
90
96
|
|
|
91
97
|
```typescript
|
|
92
|
-
import {
|
|
93
|
-
import {
|
|
98
|
+
import { Component, ViewChild, AfterViewInit } from '@angular/core';
|
|
99
|
+
import { GanttChart } from '@timelinekit/angular';
|
|
100
|
+
|
|
101
|
+
const data = {
|
|
102
|
+
tasks: [
|
|
103
|
+
{ id: '1', name: 'Design', startTime: '2027-01-05', endTime: '2027-01-09', type: 'task', progress: 100 },
|
|
104
|
+
{ id: '2', name: 'Development', startTime: '2027-01-12', endTime: '2027-01-23', type: 'task' },
|
|
105
|
+
],
|
|
106
|
+
links: [
|
|
107
|
+
{ id: 'l1', from: '1', to: '2', type: 'finishToStart' },
|
|
108
|
+
],
|
|
109
|
+
};
|
|
94
110
|
|
|
95
111
|
@Component({
|
|
96
|
-
imports: [
|
|
97
|
-
template: `<
|
|
112
|
+
imports: [GanttChart],
|
|
113
|
+
template: `<gk-gantt-chart #gantt style="height: 600px" />`,
|
|
98
114
|
})
|
|
99
115
|
export class AppComponent implements AfterViewInit {
|
|
100
|
-
@ViewChild('gantt') gantt!:
|
|
116
|
+
@ViewChild('gantt') gantt!: GanttChart;
|
|
101
117
|
|
|
102
118
|
ngAfterViewInit() {
|
|
103
|
-
|
|
104
|
-
const taskB = this.gantt.list.addTask(new Task({ id: '2', name: 'Development', startTime: '2027-01-12', endTime: '2027-01-23' }));
|
|
105
|
-
this.gantt.list.addLink(new TaskLink({ id: 'l1', from: taskA, to: taskB, type: 'finishToStart' }));
|
|
119
|
+
this.gantt.load(JSON.stringify(data));
|
|
106
120
|
this.gantt.zoomToFit();
|
|
107
121
|
}
|
|
108
122
|
}
|