1 | var moment = require('../module/moment');
|
2 | var util = require('vis-util');
|
3 | var { DataSet } = require('vis-data');
|
4 | var { DataView } = require('vis-data');
|
5 | var Range = require('./Range');
|
6 | var Core = require('./Core');
|
7 | var TimeAxis = require('./component/TimeAxis');
|
8 | var CurrentTime = require('./component/CurrentTime');
|
9 | var CustomTime = require('./component/CustomTime');
|
10 | var LineGraph = require('./component/LineGraph');
|
11 |
|
12 | var Validator = require('../shared/Validator').Validator;
|
13 | var printStyle = require('../shared/Validator').printStyle;
|
14 | var allOptions = require('./optionsGraph2d').allOptions;
|
15 | var configureOptions = require('./optionsGraph2d').configureOptions;
|
16 |
|
17 | var Configurator = require('../shared/Configurator').default;
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 | function Graph2d (container, items, groups, options) {
|
29 |
|
30 | if (!(Array.isArray(groups) || groups instanceof DataSet || groups instanceof DataView) && groups instanceof Object) {
|
31 | var forthArgument = options;
|
32 | options = groups;
|
33 | groups = forthArgument;
|
34 | }
|
35 |
|
36 |
|
37 |
|
38 | if (options && options.throttleRedraw) {
|
39 | console.warn("Graph2d option \"throttleRedraw\" is DEPRICATED and no longer supported. It will be removed in the next MAJOR release.");
|
40 | }
|
41 |
|
42 | var me = this;
|
43 | this.defaultOptions = {
|
44 | start: null,
|
45 | end: null,
|
46 |
|
47 | autoResize: true,
|
48 |
|
49 | orientation: {
|
50 | axis: 'bottom',
|
51 | item: 'bottom'
|
52 | },
|
53 |
|
54 | moment: moment,
|
55 |
|
56 | width: null,
|
57 | height: null,
|
58 | maxHeight: null,
|
59 | minHeight: null
|
60 | };
|
61 | this.options = util.deepExtend({}, this.defaultOptions);
|
62 |
|
63 |
|
64 | this._create(container);
|
65 |
|
66 |
|
67 | this.components = [];
|
68 |
|
69 | this.body = {
|
70 | dom: this.dom,
|
71 | domProps: this.props,
|
72 | emitter: {
|
73 | on: this.on.bind(this),
|
74 | off: this.off.bind(this),
|
75 | emit: this.emit.bind(this)
|
76 | },
|
77 | hiddenDates: [],
|
78 | util: {
|
79 | toScreen: me._toScreen.bind(me),
|
80 | toGlobalScreen: me._toGlobalScreen.bind(me),
|
81 | toTime: me._toTime.bind(me),
|
82 | toGlobalTime : me._toGlobalTime.bind(me)
|
83 | }
|
84 | };
|
85 |
|
86 |
|
87 | this.range = new Range(this.body);
|
88 | this.components.push(this.range);
|
89 | this.body.range = this.range;
|
90 |
|
91 |
|
92 | this.timeAxis = new TimeAxis(this.body);
|
93 | this.components.push(this.timeAxis);
|
94 |
|
95 |
|
96 |
|
97 | this.currentTime = new CurrentTime(this.body);
|
98 | this.components.push(this.currentTime);
|
99 |
|
100 |
|
101 | this.linegraph = new LineGraph(this.body);
|
102 |
|
103 | this.components.push(this.linegraph);
|
104 |
|
105 | this.itemsData = null;
|
106 | this.groupsData = null;
|
107 |
|
108 |
|
109 | this.on('tap', function (event) {
|
110 | me.emit('click', me.getEventProperties(event))
|
111 | });
|
112 | this.on('doubletap', function (event) {
|
113 | me.emit('doubleClick', me.getEventProperties(event))
|
114 | });
|
115 | this.dom.root.oncontextmenu = function (event) {
|
116 | me.emit('contextmenu', me.getEventProperties(event))
|
117 | };
|
118 |
|
119 |
|
120 | this.initialFitDone = false;
|
121 | this.on('changed', function (){
|
122 | if (me.itemsData == null) return;
|
123 | if (!me.initialFitDone && !me.options.rollingMode) {
|
124 | me.initialFitDone = true;
|
125 | if (me.options.start != undefined || me.options.end != undefined) {
|
126 | if (me.options.start == undefined || me.options.end == undefined) {
|
127 | var range = me.getItemRange();
|
128 | }
|
129 |
|
130 | var start = me.options.start != undefined ? me.options.start : range.min;
|
131 | var end = me.options.end != undefined ? me.options.end : range.max;
|
132 | me.setWindow(start, end, {animation: false});
|
133 | } else {
|
134 | me.fit({animation: false});
|
135 | }
|
136 | }
|
137 |
|
138 | if (!me.initialDrawDone && (me.initialRangeChangeDone || (!me.options.start && !me.options.end)
|
139 | || me.options.rollingMode)) {
|
140 | me.initialDrawDone = true;
|
141 | me.itemSet.initialDrawDone = true;
|
142 | me.dom.root.style.visibility = 'visible';
|
143 | me.dom.loadingScreen.parentNode.removeChild(me.dom.loadingScreen);
|
144 | if (me.options.onInitialDrawComplete) {
|
145 | setTimeout(() => {
|
146 | return me.options.onInitialDrawComplete();
|
147 | }, 0)
|
148 | }
|
149 | }
|
150 | });
|
151 |
|
152 |
|
153 | if (options) {
|
154 | this.setOptions(options);
|
155 | }
|
156 |
|
157 |
|
158 | if (groups) {
|
159 | this.setGroups(groups);
|
160 | }
|
161 |
|
162 |
|
163 | if (items) {
|
164 | this.setItems(items);
|
165 | }
|
166 |
|
167 |
|
168 | this._redraw();
|
169 | }
|
170 |
|
171 |
|
172 | Graph2d.prototype = new Core();
|
173 |
|
174 | Graph2d.prototype.setOptions = function (options) {
|
175 |
|
176 | let errorFound = Validator.validate(options, allOptions);
|
177 | if (errorFound === true) {
|
178 | console.log('%cErrors have been found in the supplied options object.', printStyle);
|
179 | }
|
180 |
|
181 | Core.prototype.setOptions.call(this, options);
|
182 | };
|
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 | Graph2d.prototype.setItems = function(items) {
|
189 | var initialLoad = (this.itemsData == null);
|
190 |
|
191 |
|
192 | var newDataSet;
|
193 | if (!items) {
|
194 | newDataSet = null;
|
195 | }
|
196 | else if (items instanceof DataSet || items instanceof DataView) {
|
197 | newDataSet = items;
|
198 | }
|
199 | else {
|
200 |
|
201 | newDataSet = new DataSet(items, {
|
202 | type: {
|
203 | start: 'Date',
|
204 | end: 'Date'
|
205 | }
|
206 | });
|
207 | }
|
208 |
|
209 |
|
210 | this.itemsData = newDataSet;
|
211 | this.linegraph && this.linegraph.setItems(newDataSet);
|
212 |
|
213 | if (initialLoad) {
|
214 | if (this.options.start != undefined || this.options.end != undefined) {
|
215 | var start = this.options.start != undefined ? this.options.start : null;
|
216 | var end = this.options.end != undefined ? this.options.end : null;
|
217 | this.setWindow(start, end, {animation: false});
|
218 | }
|
219 | else {
|
220 | this.fit({animation: false});
|
221 | }
|
222 | }
|
223 | };
|
224 |
|
225 |
|
226 |
|
227 |
|
228 |
|
229 | Graph2d.prototype.setGroups = function(groups) {
|
230 |
|
231 | var newDataSet;
|
232 | if (!groups) {
|
233 | newDataSet = null;
|
234 | }
|
235 | else if (groups instanceof DataSet || groups instanceof DataView) {
|
236 | newDataSet = groups;
|
237 | }
|
238 | else {
|
239 |
|
240 | newDataSet = new DataSet(groups);
|
241 | }
|
242 |
|
243 | this.groupsData = newDataSet;
|
244 | this.linegraph.setGroups(newDataSet);
|
245 | };
|
246 |
|
247 |
|
248 |
|
249 |
|
250 |
|
251 |
|
252 |
|
253 |
|
254 | Graph2d.prototype.getLegend = function(groupId, width, height) {
|
255 | if (width === undefined) {width = 15;}
|
256 | if (height === undefined) {height = 15;}
|
257 | if (this.linegraph.groups[groupId] !== undefined) {
|
258 | return this.linegraph.groups[groupId].getLegend(width,height);
|
259 | }
|
260 | else {
|
261 | return "cannot find group:'" + groupId + "'";
|
262 | }
|
263 | };
|
264 |
|
265 |
|
266 |
|
267 |
|
268 |
|
269 |
|
270 | Graph2d.prototype.isGroupVisible = function(groupId) {
|
271 | if (this.linegraph.groups[groupId] !== undefined) {
|
272 | return (this.linegraph.groups[groupId].visible && (this.linegraph.options.groups.visibility[groupId] === undefined || this.linegraph.options.groups.visibility[groupId] == true));
|
273 | }
|
274 | else {
|
275 | return false;
|
276 | }
|
277 | };
|
278 |
|
279 |
|
280 |
|
281 |
|
282 |
|
283 |
|
284 |
|
285 |
|
286 | Graph2d.prototype.getDataRange = function() {
|
287 | var min = null;
|
288 | var max = null;
|
289 |
|
290 |
|
291 | for (var groupId in this.linegraph.groups) {
|
292 | if (this.linegraph.groups.hasOwnProperty(groupId)) {
|
293 | if (this.linegraph.groups[groupId].visible == true) {
|
294 | for (var i = 0; i < this.linegraph.groups[groupId].itemsData.length; i++) {
|
295 | var item = this.linegraph.groups[groupId].itemsData[i];
|
296 | var value = util.convert(item.x, 'Date').valueOf();
|
297 | min = min == null ? value : min > value ? value : min;
|
298 | max = max == null ? value : max < value ? value : max;
|
299 | }
|
300 | }
|
301 | }
|
302 | }
|
303 |
|
304 | return {
|
305 | min: (min != null) ? new Date(min) : null,
|
306 | max: (max != null) ? new Date(max) : null
|
307 | };
|
308 | };
|
309 |
|
310 |
|
311 |
|
312 |
|
313 |
|
314 |
|
315 |
|
316 |
|
317 | Graph2d.prototype.getEventProperties = function (event) {
|
318 | var clientX = event.center ? event.center.x : event.clientX;
|
319 | var clientY = event.center ? event.center.y : event.clientY;
|
320 | var x = clientX - util.getAbsoluteLeft(this.dom.centerContainer);
|
321 | var y = clientY - util.getAbsoluteTop(this.dom.centerContainer);
|
322 | var time = this._toTime(x);
|
323 |
|
324 | var customTime = CustomTime.customTimeFromTarget(event);
|
325 |
|
326 | var element = util.getTarget(event);
|
327 | var what = null;
|
328 | if (util.hasParent(element, this.timeAxis.dom.foreground)) {what = 'axis';}
|
329 | else if (this.timeAxis2 && util.hasParent(element, this.timeAxis2.dom.foreground)) {what = 'axis';}
|
330 | else if (util.hasParent(element, this.linegraph.yAxisLeft.dom.frame)) {what = 'data-axis';}
|
331 | else if (util.hasParent(element, this.linegraph.yAxisRight.dom.frame)) {what = 'data-axis';}
|
332 | else if (util.hasParent(element, this.linegraph.legendLeft.dom.frame)) {what = 'legend';}
|
333 | else if (util.hasParent(element, this.linegraph.legendRight.dom.frame)) {what = 'legend';}
|
334 | else if (customTime != null) {what = 'custom-time';}
|
335 | else if (util.hasParent(element, this.currentTime.bar)) {what = 'current-time';}
|
336 | else if (util.hasParent(element, this.dom.center)) {what = 'background';}
|
337 |
|
338 | var value = [];
|
339 | var yAxisLeft = this.linegraph.yAxisLeft;
|
340 | var yAxisRight = this.linegraph.yAxisRight;
|
341 | if (!yAxisLeft.hidden && this.itemsData.length > 0) {
|
342 | value.push(yAxisLeft.screenToValue(y));
|
343 | }
|
344 | if (!yAxisRight.hidden && this.itemsData.length > 0) {
|
345 | value.push(yAxisRight.screenToValue(y));
|
346 | }
|
347 |
|
348 | return {
|
349 | event: event,
|
350 | what: what,
|
351 | pageX: event.srcEvent ? event.srcEvent.pageX : event.pageX,
|
352 | pageY: event.srcEvent ? event.srcEvent.pageY : event.pageY,
|
353 | x: x,
|
354 | y: y,
|
355 | time: time,
|
356 | value: value
|
357 | }
|
358 | };
|
359 |
|
360 |
|
361 |
|
362 |
|
363 |
|
364 |
|
365 | Graph2d.prototype._createConfigurator = function () {
|
366 | return new Configurator(this, this.dom.container, configureOptions);
|
367 | };
|
368 |
|
369 |
|
370 | module.exports = Graph2d;
|