ar-timeline-view 1.0.0 → 1.0.2
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 +88 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,32 +1,107 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ar-timeline-view
|
|
2
2
|
|
|
3
|
-
A timeline view for
|
|
3
|
+
A timeline view for web planning applications. Framework-free TypeScript with no runtime dependencies.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
|
|
6
6
|
|
|
7
7
|
- Several timelines stacked in one view, each with its own date range, on an hour, day, week, month or year scale.
|
|
8
8
|
- Relative timelines that each fill the width, or absolute ones on a common time axis.
|
|
9
9
|
- Arrows on tasks that continue past a timeline's range.
|
|
10
10
|
- Date markers (such as "Today") across one, several or all timelines.
|
|
11
11
|
- Tasks drawn as bars and milestones as symbols, on the bar or as callouts above and below it.
|
|
12
|
+
- Selection of tasks and timelines, with click and selection events.
|
|
12
13
|
- Drag and drop between lines, areas and timelines.
|
|
13
|
-
- Export as SVG (`
|
|
14
|
+
- Export as SVG (`toSVG()`).
|
|
14
15
|
- Optional REST backend for saving moves, with optimistic updates and rollback.
|
|
15
16
|
|
|
17
|
+
**Documentation:** [getting started](https://magodra.github.io/ar-timeline-view/docs/getting-started.html) · [user guide](https://magodra.github.io/ar-timeline-view/docs/user-guide.html) · [developer guide](https://magodra.github.io/ar-timeline-view/docs/developer-guide.html) · [REST API](https://magodra.github.io/ar-timeline-view/docs/api/openapi.yaml)
|
|
18
|
+
|
|
19
|
+
## Install
|
|
20
|
+
|
|
16
21
|
```sh
|
|
17
|
-
npm install
|
|
18
|
-
|
|
19
|
-
|
|
22
|
+
npm install ar-timeline-view
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Use it as a module
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
import { TimelineView } from "ar-timeline-view";
|
|
29
|
+
import "ar-timeline-view/timelineview.css";
|
|
30
|
+
|
|
31
|
+
const view = new TimelineView(document.getElementById("timeline_here"));
|
|
32
|
+
view.parse({
|
|
33
|
+
view: { name: "Example", scale: "week" },
|
|
34
|
+
tasks: [
|
|
35
|
+
{ id: 1, text: "Task #1", start_date: "2026-04-01", duration: "2d" },
|
|
36
|
+
{ id: 2, text: "Milestone #1", start_date: "2026-04-10" }
|
|
37
|
+
],
|
|
38
|
+
timelines: [
|
|
39
|
+
{ id: 1, name: "Project", start_date: "2026-03-01", finish_date: "2026-05-01", entries: [
|
|
40
|
+
{ task: 1, line: 1 },
|
|
41
|
+
{ task: 2, callout_offset: { x: 30, y: 16 } }
|
|
42
|
+
]}
|
|
43
|
+
]
|
|
44
|
+
});
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
TypeScript types are included.
|
|
48
|
+
|
|
49
|
+
## Use it from a script tag
|
|
50
|
+
|
|
51
|
+
The UMD build sets a global `timeline` object with a default instance:
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/ar-timeline-view@1/dist/timelineview.js"></script>
|
|
55
|
+
<link href="https://cdn.jsdelivr.net/npm/ar-timeline-view@1/dist/timelineview.css" rel="stylesheet">
|
|
56
|
+
|
|
57
|
+
<div id="timeline_here" style="width: 1000px;"></div>
|
|
58
|
+
<script>
|
|
59
|
+
timeline.init("timeline_here");
|
|
60
|
+
timeline.parse(data); // same data as above
|
|
61
|
+
</script>
|
|
20
62
|
```
|
|
21
63
|
|
|
22
|
-
|
|
64
|
+
Either example renders this:
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
With `view.absolute: true`, timelines with different date ranges share one time axis:
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
## Save changes
|
|
73
|
+
|
|
74
|
+
The component doesn't store data itself. Listen for moves and save them:
|
|
75
|
+
|
|
76
|
+
```js
|
|
77
|
+
timeline.on("entry_moved", ({ timeline_id, task_id, patch }) => {
|
|
78
|
+
save(timeline_id, task_id, patch); // patch holds only the changed fields
|
|
79
|
+
});
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
Or point it at a backend that implements the [REST API](https://magodra.github.io/ar-timeline-view/docs/api/openapi.yaml):
|
|
83
|
+
|
|
84
|
+
```js
|
|
85
|
+
timeline.init("timeline_here", { api_url: "https://example.com/api" });
|
|
86
|
+
timeline.load("my-view-id");
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Package contents
|
|
90
|
+
|
|
91
|
+
| File | Use |
|
|
92
|
+
|------|-----|
|
|
93
|
+
| `dist/timelineview.mjs` | ES module (`import`) |
|
|
94
|
+
| `dist/timelineview.js` | UMD build, global `timeline` |
|
|
95
|
+
| `dist/timelineview.css` | Styles, themable through `--tlv-*` custom properties |
|
|
96
|
+
| `dist/types/` | TypeScript declarations |
|
|
23
97
|
|
|
24
|
-
|
|
98
|
+
Works in current evergreen browsers (Chrome, Edge, Firefox, Safari).
|
|
25
99
|
|
|
26
|
-
|
|
100
|
+
## Links
|
|
27
101
|
|
|
28
|
-
|
|
102
|
+
- Documentation: <https://magodra.github.io/ar-timeline-view/>
|
|
103
|
+
- Source and issues: <https://github.com/Magodra/ar-timeline-view>
|
|
29
104
|
|
|
30
|
-
|
|
105
|
+
## License
|
|
31
106
|
|
|
32
|
-
|
|
107
|
+
MIT
|