|
1 | 1 | # vue2vis |
2 | 2 |
|
3 | | -> Vue2 component that helps with <ahref="http://visjs.org/">Visjs</a> interaction |
| 3 | +> This monorepo hosts Vue2 component wrapper for the [visjs](https://github.com/visjs) libraries |
4 | 4 | |
5 | 5 | <p align="center"> |
6 | 6 | <a href="https://travis-ci.org/alexcode/vue2vis"> |
|
24 | 24 | </a> |
25 | 25 | </p> |
26 | 26 |
|
27 | | -### Installation |
28 | | -``` |
29 | | -npm install --save vue2vis |
30 | | -``` |
31 | | - |
32 | | -or |
33 | | - |
34 | | -``` |
35 | | -yarn add vue2vis |
36 | | -``` |
37 | | - |
38 | 27 | ## Usage |
39 | 28 |
|
40 | | -Declare the component |
41 | | -``` javascript |
42 | | -Vue.component('timeline', vue2vis.Timeline); |
43 | | -``` |
44 | | - |
45 | | -Add the component in the template. |
46 | | - |
47 | | -```html |
48 | | -<body> |
49 | | - <div id="app"> |
50 | | - <timeline ref="timeline" |
51 | | - :items="items" |
52 | | - :groups="groups" |
53 | | - :options="options"> |
54 | | - </timeline> |
55 | | - </div> |
56 | | -</body> |
57 | | -``` |
58 | | - |
59 | | -Add groups, items and options in your observed data or computed. |
60 | | -``` javascript |
61 | | -new Vue({ |
62 | | - el: '#app', |
63 | | - data() { |
64 | | - return { |
65 | | - groups: [{ |
66 | | - id: 0, |
67 | | - content: 'Group 1' |
68 | | - }], |
69 | | - items: [{ |
70 | | - id: 0, |
71 | | - group: 0, |
72 | | - start: new Date(), |
73 | | - content: 'Item 1' |
74 | | - }], |
75 | | - options: { |
76 | | - editable: true, |
77 | | - } |
78 | | - } |
79 | | - }, |
80 | | -}); |
81 | | -``` |
82 | | - |
83 | | -Add Visjs CSS |
84 | | -``` css |
85 | | -@import "vue2vis/dist/vue2vis.css"; |
86 | | -``` |
87 | | - |
88 | | -Here is a basic working demo with item generation: |
89 | | -[JS Fiddle Basic Demo](https://jsfiddle.net/alexkodo/ejdut8fm/) |
90 | | - |
91 | | -You can also create items or group labels as Vue Components: |
92 | | -[JS Fiddle Item Vue Component Demo](https://jsfiddle.net/alexkodo/n978c58d/) |
93 | | - |
94 | | -## Events |
95 | | - |
96 | | -### Component Events |
97 | | -By default all Vis events are emitted by your component. You can subscribe to a subset by passing an array in the prop `events` [Visjs event](http://visjs.org/docs/timeline/#Events). |
98 | | - |
99 | | -```html |
100 | | -<body> |
101 | | - <div id="app"> |
102 | | - <timeline ref="timeline" |
103 | | - :items="items" |
104 | | - :groups="groups" |
105 | | - :options="options" |
106 | | - :events="['drop', 'changed']" |
107 | | - @drop="myDropCallback" |
108 | | - @changed="myChangedCallback"> |
109 | | - </timeline> |
110 | | - </div> |
111 | | -</body> |
112 | | -``` |
| 29 | +Please visit individual packages for installation and usage |
113 | 30 |
|
114 | | -### Data Events |
115 | | - |
116 | | -When you pass an Array of data object, it is converted internally as a DataSet. |
117 | | -An event with the DataSet object will be fired at mounted. It's name will be prepend with the prop name (Ex: `items-mounted`, `groups-mounted`). You could use it to interact with the DataSet. |
118 | | - |
119 | | -All the [Visjs DataSet event](http://visjs.org/docs/data/dataset.html#Events) will be prepened the same fashion (`items-add`, `items-remove`, `items-update`). For example, pushing a new object to the `items` prop will fire a `items-add` event with the following payload: |
120 | | -```javascript |
121 | | -{ |
122 | | - event: 'add', |
123 | | - properties: { |
124 | | - items: [7], |
125 | | - }, |
126 | | - senderId: null, |
127 | | -} |
128 | | -``` |
129 | | - |
130 | | -#### Advanced |
131 | | - |
132 | | -You can also manage your own data bindings by passing your own DataSet or DataView instead of an Array. |
133 | | - |
134 | | -``` javascript |
135 | | -import { DataSet } from 'vue2vis'; |
136 | | - |
137 | | -new Vue({ |
138 | | - el: '#app', |
139 | | - data() { |
140 | | - return { |
141 | | - groups: new DataSet([{ |
142 | | - id: 0, |
143 | | - content: 'Group 1' |
144 | | - }]), |
145 | | - items: new DataSet([{ |
146 | | - id: 0, |
147 | | - group: 0, |
148 | | - start: new Date(), |
149 | | - content: 'Item 1' |
150 | | - }]), |
151 | | - options: { |
152 | | - editable: true, |
153 | | - } |
154 | | - } |
155 | | - }, |
156 | | -}); |
157 | | -``` |
158 | | - |
159 | | -## Visjs documentation |
160 | | - |
161 | | -Full reference of Item and Group formats, options properties and events: [Timeline](http://visjs.org/docs/timeline), [Network](http://visjs.org/docs/network), [Graph2d](http://visjs.org/docs/graph2d), [DataSet](http://visjs.org/docs/dataset), [DataView](http://visjs.org/docs/dataview) |
| 31 | +- [Timeline](/packages/timeline/README.md) |
| 32 | +- [Graph2d](/packages/graph2d/README.md) |
| 33 | +- [Network](/packages/network/README.md) |
162 | 34 |
|
163 | 35 | ## List of currently implemented modules |
164 | 36 |
|
165 | | -- [x] Timeline |
166 | | -- [x] Graph2d |
167 | | -- [ ] Graph3d |
168 | | -- [x] Network |
| 37 | +- [x] Timeline |
| 38 | +- [x] Graph2d |
| 39 | +- [ ] Graph3d |
| 40 | +- [x] Network |
169 | 41 |
|
170 | 42 | ## Change log |
171 | 43 |
|
172 | 44 | Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently. |
173 | 45 |
|
174 | | -## Testing |
175 | | - |
176 | | -``` bash |
177 | | -$ npm run test |
178 | | -``` |
179 | | - |
180 | 46 | ## Contributing |
| 47 | + |
181 | 48 | Please see [CONTRIBUTING](CONTRIBUTING.md) and [CONDUCT](CONDUCT.md) for details. |
182 | 49 |
|
183 | 50 | ### Build Setup |
184 | 51 |
|
185 | | -```bash |
| 52 | +```bash |
186 | 53 | # Once you have cloned this repo, install dependencies |
187 | | -$ npm install |
| 54 | +yarn install |
| 55 | +yarn lerna bootstrap |
188 | 56 |
|
189 | 57 | # build for development and production with minification |
190 | | -$ npm run build |
| 58 | +yarn prepare |
| 59 | + |
| 60 | +``` |
| 61 | + |
| 62 | +## Testing |
191 | 63 |
|
| 64 | +```bash |
| 65 | +yarn test:unit |
192 | 66 | ``` |
193 | 67 |
|
194 | 68 | ### Run demo locally |
195 | | -``` bash |
| 69 | + |
| 70 | +```bash |
196 | 71 | # Run demo at localhost:8080 |
197 | | -$ npm link |
198 | | -$ cd examples |
199 | | -$ npm install |
200 | | -$ npm link vue2vis |
201 | | -# serve with hot reload at localhost:8080 |
202 | | -$ npm run dev |
| 72 | +yarn serve:graph2d |
| 73 | +``` |
| 74 | + |
| 75 | +or |
| 76 | + |
| 77 | +```bash |
| 78 | +yarn serve:network |
203 | 79 | ``` |
| 80 | + |
| 81 | +or |
| 82 | + |
| 83 | +```bash |
| 84 | +yarn serve:timeline |
| 85 | +``` |
| 86 | + |
204 | 87 | Go to <http://localhost:8080/> to see running examples |
205 | 88 |
|
206 | | -NOTE: If you make changes to the library you should run 'npm run build' again in the root folder. |
| 89 | +NOTE: If you make changes to the library you should run `yarn prepare` again in the root folder. |
207 | 90 | The dev server should detect modification and reload the demo |
208 | 91 |
|
209 | 92 | ## Security |
|
0 commit comments