1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 | import { DataInterface, DataSet, DataView, Queue } from 'vis-data';
|
20 | export { DataSet, DataView, Queue };
|
21 | export type DataInterfaceDataGroup = DataInterface<DataGroup, 'id'>;
|
22 | export type DataInterfaceDataItem = DataInterface<DataItem, 'id'>;
|
23 | export type DataSetDataGroup = DataSet<DataGroup, 'id'>;
|
24 | export type DataSetDataItem = DataSet<DataItem, 'id'>;
|
25 | export type DataViewDataGroup = DataView<DataGroup, 'id'>;
|
26 | export type DataViewDataItem = DataView<DataItem, 'id'>;
|
27 |
|
28 | import * as util from 'vis-util';
|
29 | export { util };
|
30 |
|
31 | import moment from 'moment'
|
32 | export { moment }
|
33 | import Hammer from 'hammerjs'
|
34 | export { Hammer }
|
35 | import keycharm from 'keycharm'
|
36 | export { keycharm }
|
37 |
|
38 | import { MomentInput, MomentFormatSpecification, Moment } from 'moment';
|
39 | export type MomentConstructor1 =
|
40 | (inp?: MomentInput, format?: MomentFormatSpecification, strict?: boolean) => Moment;
|
41 | export type MomentConstructor2 =
|
42 | (inp?: MomentInput, format?: MomentFormatSpecification, language?: string, strict?: boolean) => Moment;
|
43 |
|
44 | export type MomentConstructor = MomentConstructor1 | MomentConstructor2;
|
45 |
|
46 | export type IdType = string | number;
|
47 | export type SubgroupType = IdType;
|
48 | export type DateType = Date | number | string;
|
49 | export type HeightWidthType = IdType;
|
50 | export type TimelineItemType = 'box' | 'point' | 'range' | 'background';
|
51 | export type TimelineAlignType = 'auto' | 'center' | 'left' | 'right';
|
52 | export type TimelineTimeAxisScaleType = 'millisecond' | 'second' | 'minute' | 'hour' |
|
53 | 'weekday' | 'day' | 'month' | 'year';
|
54 | export type TimelineEventPropertiesResultWhatType = 'item' | 'background' | 'axis' |
|
55 | 'group-label' | 'custom-time' | 'current-time';
|
56 | export type TimelineEvents =
|
57 | 'currentTimeTick' |
|
58 | 'click' |
|
59 | 'contextmenu' |
|
60 | 'doubleClick' |
|
61 | 'drop' |
|
62 | 'mouseOver' |
|
63 | 'mouseDown' |
|
64 | 'mouseUp' |
|
65 | 'mouseMove' |
|
66 | 'groupDragged' |
|
67 | 'changed' |
|
68 | 'rangechange' |
|
69 | 'rangechanged' |
|
70 | 'select' |
|
71 | 'itemover' |
|
72 | 'itemout' |
|
73 | 'timechange' |
|
74 | 'timechanged';
|
75 | export type Graph2dStyleType = 'line' | 'bar' | 'points';
|
76 | export type Graph2dBarChartAlign = 'left' | 'center' | 'right';
|
77 | export type Graph2dDrawPointsStyle = 'square' | 'circle';
|
78 | export type LegendPositionType = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
79 | export type ParametrizationInterpolationType = 'centripetal' | 'chordal' | 'uniform' | 'disabled';
|
80 | export type TopBottomEnumType = 'top' | 'bottom';
|
81 | export type RightLeftEnumType = 'right' | 'left';
|
82 |
|
83 | export interface LegendPositionOptions {
|
84 | visible?: boolean;
|
85 | position?: LegendPositionType;
|
86 | }
|
87 |
|
88 | export interface LegendOptions {
|
89 | enabled?: boolean;
|
90 | icons?: boolean;
|
91 | iconSize?: number;
|
92 | iconSpacing?: number;
|
93 | left?: LegendPositionOptions;
|
94 | right?: LegendPositionOptions;
|
95 | }
|
96 |
|
97 | export interface DataItem {
|
98 | className?: string;
|
99 | content: string;
|
100 | end?: DateType;
|
101 | group?: any;
|
102 | id?: IdType;
|
103 | start: DateType;
|
104 | style?: string;
|
105 | subgroup?: SubgroupType;
|
106 | title?: string;
|
107 | type?: string;
|
108 | editable?: TimelineItemEditableType;
|
109 | selectable?: boolean;
|
110 | }
|
111 |
|
112 | export interface SubGroupStackOptions {
|
113 | [name: string]: boolean;
|
114 | }
|
115 |
|
116 | export interface SubGroupVisibilityOptions {
|
117 | [name: string]: boolean;
|
118 | }
|
119 |
|
120 | export interface DataGroup {
|
121 | className?: string;
|
122 | content: string | HTMLElement;
|
123 | id: IdType;
|
124 | options?: DataGroupOptions;
|
125 | style?: string;
|
126 | subgroupOrder?: string | ((a: any, b: any) => number);
|
127 | title?: string;
|
128 | nestedGroups?: IdType[];
|
129 | subgroupStack?: SubGroupStackOptions | boolean;
|
130 | visible?: boolean;
|
131 | showNested?: boolean;
|
132 | subgroupVisibility?: SubGroupVisibilityOptions;
|
133 | }
|
134 |
|
135 | export interface DataGroupOptions {
|
136 | drawPoints?: Graph2dDrawPointsOption | (() => void); // TODO
|
137 | excludeFromLegend?: boolean;
|
138 | interpolation?: boolean | InterpolationOptions;
|
139 | shaded?: Graph2dShadedOption;
|
140 | style?: string;
|
141 | yAxisOrientation?: RightLeftEnumType;
|
142 | }
|
143 |
|
144 | export interface InterpolationOptions {
|
145 | parametrization: ParametrizationInterpolationType;
|
146 | }
|
147 |
|
148 | export interface TimelineEditableOption {
|
149 | add?: boolean;
|
150 | remove?: boolean;
|
151 | updateGroup?: boolean;
|
152 | updateTime?: boolean;
|
153 | overrideItems?: boolean;
|
154 | }
|
155 |
|
156 | export type TimelineFormatLabelsFunction = (date: Date, scale: string, step: number) => string;
|
157 |
|
158 | export interface TimelineFormatLabelsOption {
|
159 | millisecond?: string;
|
160 | second?: string;
|
161 | minute?: string;
|
162 | hour?: string;
|
163 | weekday?: string;
|
164 | day?: string;
|
165 | week?: string;
|
166 | month?: string;
|
167 | year?: string;
|
168 | }
|
169 |
|
170 | export interface TimelineFormatOption {
|
171 | minorLabels?: TimelineFormatLabelsOption | TimelineFormatLabelsFunction;
|
172 | majorLabels?: TimelineFormatLabelsOption | TimelineFormatLabelsFunction;
|
173 | }
|
174 |
|
175 | export interface TimelineGroupEditableOption {
|
176 | add?: boolean;
|
177 | remove?: boolean;
|
178 | order?: boolean;
|
179 | }
|
180 |
|
181 | export interface TimelineHiddenDateOption {
|
182 | start: DateType;
|
183 | end: DateType;
|
184 | repeat?: 'daily' | 'weekly' | 'monthly' | 'yearly';
|
185 | }
|
186 |
|
187 | export interface TimelineItemsAlwaysDraggableOption {
|
188 | item?: boolean;
|
189 | range?: boolean;
|
190 | }
|
191 |
|
192 | export interface TimelineMarginItem {
|
193 | horizontal?: number;
|
194 | vertical?: number;
|
195 | }
|
196 |
|
197 | export type TimelineMarginItemType = number | TimelineMarginItem;
|
198 |
|
199 | export interface TimelineMarginOption {
|
200 | axis?: number;
|
201 | item?: TimelineMarginItemType;
|
202 | }
|
203 |
|
204 | export interface TimelineOrientationOption {
|
205 | axis?: string;
|
206 | item?: string;
|
207 | }
|
208 |
|
209 | export interface TimelineTimeAxisOption {
|
210 | scale?: TimelineTimeAxisScaleType;
|
211 | step?: number;
|
212 | }
|
213 |
|
214 | export interface TimelineRollingModeOption {
|
215 | follow?: boolean;
|
216 | offset?: number;
|
217 | }
|
218 |
|
219 | export interface TimelineTooltipOption {
|
220 | followMouse?: boolean;
|
221 | overflowMethod?: 'cap' | 'flip' | 'none';
|
222 | delay?: number;
|
223 | template?: (item: TimelineItem, editedData?: TimelineItem) => string;
|
224 | }
|
225 |
|
226 | export type TimelineOptionsConfigureFunction = (option: string, path: string[]) => boolean;
|
227 | export type TimelineOptionsConfigureType = boolean | TimelineOptionsConfigureFunction;
|
228 | export type TimelineOptionsDataAttributesType = boolean | string | string[];
|
229 | export type TimelineOptionsEditableType = boolean | TimelineEditableOption;
|
230 | export type TimelineOptionsItemCallbackFunction = (item: TimelineItem, callback: (item: TimelineItem | null) => void) => void;
|
231 | export type TimelineOptionsGroupCallbackFunction = (group: TimelineGroup, callback: (group: TimelineGroup | null) => void) => void;
|
232 | export type TimelineOptionsGroupEditableType = boolean | TimelineGroupEditableOption;
|
233 | export type TimelineOptionsGroupOrderType = string | TimelineOptionsComparisonFunction;
|
234 | export type TimelineOptionsGroupOrderSwapFunction = (fromGroup: any, toGroup: any, groups: DataInterfaceDataGroup) => void;
|
235 | export type TimelineOptionsHiddenDatesType = TimelineHiddenDateOption | TimelineHiddenDateOption[];
|
236 | export type TimelineOptionsItemsAlwaysDraggableType = boolean | TimelineItemsAlwaysDraggableOption;
|
237 | export type TimelineOptionsMarginType = number | TimelineMarginOption;
|
238 | export type TimelineOptionsOrientationType = string | TimelineOrientationOption;
|
239 | export type TimelineOptionsSnapFunction = (date: Date, scale: string, step: number) => Date | number;
|
240 | export type TimelineOptionsTemplateFunction = (item?: any, element?: any, data?: any) => string;
|
241 | export type TimelineOptionsComparisonFunction = (a: any, b: any) => number;
|
242 |
|
243 | export interface TimelineOptions {
|
244 | align?: TimelineAlignType;
|
245 | autoResize?: boolean;
|
246 | clickToUse?: boolean;
|
247 | configure?: TimelineOptionsConfigureType;
|
248 | dataAttributes?: TimelineOptionsDataAttributesType;
|
249 | editable?: TimelineOptionsEditableType;
|
250 | end?: DateType;
|
251 | format?: TimelineFormatOption;
|
252 | groupEditable?: TimelineOptionsGroupEditableType;
|
253 | groupOrder?: TimelineOptionsGroupOrderType;
|
254 | groupOrderSwap?: TimelineOptionsGroupOrderSwapFunction;
|
255 | groupTemplate?: TimelineOptionsTemplateFunction;
|
256 | height?: HeightWidthType;
|
257 | hiddenDates?: TimelineOptionsHiddenDatesType;
|
258 | horizontalScroll?: boolean;
|
259 | itemsAlwaysDraggable?: TimelineOptionsItemsAlwaysDraggableType;
|
260 | locale?: string;
|
261 | locales?: any;
|
262 | moment?: MomentConstructor;
|
263 | margin?: TimelineOptionsMarginType;
|
264 | max?: DateType;
|
265 | maxHeight?: HeightWidthType;
|
266 | maxMinorChars?: number;
|
267 | min?: DateType;
|
268 | minHeight?: HeightWidthType;
|
269 | moveable?: boolean;
|
270 | multiselect?: boolean;
|
271 | multiselectPerGroup?: boolean;
|
272 | onAdd?: TimelineOptionsItemCallbackFunction;
|
273 | onAddGroup?: TimelineOptionsGroupCallbackFunction;
|
274 | onInitialDrawComplete?: (() => void);
|
275 | onUpdate?: TimelineOptionsItemCallbackFunction;
|
276 | onMove?: TimelineOptionsItemCallbackFunction;
|
277 | onMoveGroup?: TimelineOptionsGroupCallbackFunction;
|
278 | onMoving?: TimelineOptionsItemCallbackFunction;
|
279 | onRemove?: TimelineOptionsItemCallbackFunction;
|
280 | onRemoveGroup?: TimelineOptionsGroupCallbackFunction;
|
281 | order?: TimelineOptionsComparisonFunction;
|
282 | orientation?: TimelineOptionsOrientationType;
|
283 | preferZoom?: boolean;
|
284 | rollingMode?: TimelineRollingModeOption;
|
285 | rtl?: boolean;
|
286 | selectable?: boolean;
|
287 | sequentialSelection?: boolean;
|
288 | showCurrentTime?: boolean;
|
289 | showMajorLabels?: boolean;
|
290 | showMinorLabels?: boolean;
|
291 | showTooltips?: boolean;
|
292 | stack?: boolean;
|
293 | stackSubgroups?: boolean;
|
294 | snap?: TimelineOptionsSnapFunction;
|
295 | start?: DateType;
|
296 | template?: TimelineOptionsTemplateFunction;
|
297 | visibleFrameTemplate?: TimelineOptionsTemplateFunction;
|
298 | throttleRedraw?: number;
|
299 | timeAxis?: TimelineTimeAxisOption;
|
300 | type?: string;
|
301 | tooltip?: TimelineTooltipOption;
|
302 | tooltipOnItemUpdateTime?: boolean | { template(item: any): any };
|
303 | verticalScroll?: boolean;
|
304 | width?: HeightWidthType;
|
305 | zoomable?: boolean;
|
306 | zoomKey?: string;
|
307 | zoomMax?: number;
|
308 | zoomMin?: number;
|
309 | }
|
310 |
|
311 | /**
|
312 | * If true (default) or an Object, the range is animated smoothly to the new window.
|
313 | * An object can be provided to specify duration and easing function.
|
314 | * Default duration is 500 ms, and default easing function is 'easeInOutQuad'.
|
315 | */
|
316 | export type TimelineAnimationType = boolean | AnimationOptions;
|
317 |
|
318 | export interface TimelineAnimationOptions {
|
319 | animation?: TimelineAnimationType;
|
320 | }
|
321 |
|
322 | export interface TimelineEventPropertiesResult {
|
323 | /**
|
324 | * The id of the clicked group
|
325 | */
|
326 | group?: number | null;
|
327 |
|
328 | /**
|
329 | * The id of the clicked item.
|
330 | */
|
331 | item?: IdType | null;
|
332 |
|
333 | /**
|
334 | * Absolute horizontal position of the click event.
|
335 | */
|
336 | pageX: number;
|
337 |
|
338 | /**
|
339 | * Absolute vertical position of the click event.
|
340 | */
|
341 | pageY: number;
|
342 |
|
343 | /**
|
344 | * Relative horizontal position of the click event.
|
345 | */
|
346 | x: number;
|
347 |
|
348 | /**
|
349 | * Relative vertical position of the click event.
|
350 | */
|
351 | y: number;
|
352 |
|
353 | /**
|
354 | * Date of the clicked event.
|
355 | */
|
356 | time: Date;
|
357 |
|
358 | /**
|
359 | * Date of the clicked event, snapped to a nice value.
|
360 | */
|
361 | snappedTime: Date;
|
362 |
|
363 | /**
|
364 | * Name of the clicked thing.
|
365 | */
|
366 | what?: TimelineEventPropertiesResultWhatType;
|
367 |
|
368 | /**
|
369 | * The original click event.
|
370 | */
|
371 | event: Event;
|
372 | }
|
373 |
|
374 | export type DataItemCollectionType = DataItem[] | DataInterfaceDataItem;
|
375 | export type DataGroupCollectionType = DataGroup[] | DataInterfaceDataGroup;
|
376 |
|
377 | export interface TitleOption {
|
378 | text?: string;
|
379 | style?: string;
|
380 | }
|
381 |
|
382 | export interface RangeType {
|
383 | min: IdType;
|
384 | max: IdType;
|
385 | }
|
386 |
|
387 | export interface DataAxisSideOption {
|
388 | range?: RangeType;
|
389 | format?(): string;
|
390 | title?: TitleOption;
|
391 | }
|
392 |
|
393 | export interface Graph2dBarChartOption {
|
394 | width?: number;
|
395 | minWidth?: number;
|
396 | sideBySide?: boolean;
|
397 | align?: Graph2dBarChartAlign;
|
398 | }
|
399 |
|
400 | export interface Graph2dDataAxisOption {
|
401 | orientation?: TimelineOptionsOrientationType;
|
402 | showMinorLabels?: boolean;
|
403 | showMajorLabels?: boolean;
|
404 | majorLinesOffset?: number;
|
405 | minorLinesOffset?: number;
|
406 | labelOffsetX?: number;
|
407 | labelOffsetY?: number;
|
408 | iconWidth?: number;
|
409 | width?: string;
|
410 | icons?: boolean;
|
411 | visible?: boolean;
|
412 | alignZeros?: boolean;
|
413 | left?: DataAxisSideOption;
|
414 | right?: DataAxisSideOption;
|
415 | }
|
416 |
|
417 | export interface Graph2dDrawPointsOption {
|
418 | enabled?: boolean;
|
419 | onRender?(): boolean; // TODO
|
420 | size?: number;
|
421 | style: Graph2dDrawPointsStyle;
|
422 | }
|
423 |
|
424 | export interface Graph2dShadedOption {
|
425 | orientation?: TopBottomEnumType;
|
426 | groupid?: IdType;
|
427 | }
|
428 |
|
429 | export type Graph2dOptionBarChart = number | Graph2dBarChartOption;
|
430 | export type Graph2dOptionDataAxis = boolean | Graph2dDataAxisOption;
|
431 | export type Graph2dOptionDrawPoints = boolean | Graph2dDrawPointsOption;
|
432 | export type Graph2dLegendOption = boolean | LegendOptions;
|
433 |
|
434 | export interface Graph2dOptions {
|
435 | autoResize?: boolean;
|
436 | barChart?: Graph2dOptionBarChart;
|
437 | clickToUse?: boolean;
|
438 | configure?: TimelineOptionsConfigureType;
|
439 | dataAxis?: Graph2dOptionDataAxis;
|
440 | defaultGroup?: string;
|
441 | drawPoints?: Graph2dOptionDrawPoints;
|
442 | end?: DateType;
|
443 | format?: any; // TODO
|
444 | graphHeight?: HeightWidthType;
|
445 | height?: HeightWidthType;
|
446 | hiddenDates?: any; // TODO
|
447 | legend?: Graph2dLegendOption;
|
448 | locale?: string;
|
449 | locales?: any; // TODO
|
450 | moment?: MomentConstructor;
|
451 | max?: DateType;
|
452 | maxHeight?: HeightWidthType;
|
453 | maxMinorChars?: number;
|
454 | min?: DateType;
|
455 | minHeight?: HeightWidthType;
|
456 | moveable?: boolean;
|
457 | multiselect?: boolean;
|
458 | orientation?: string;
|
459 | sampling?: boolean;
|
460 | showCurrentTime?: boolean;
|
461 | showMajorLabels?: boolean;
|
462 | showMinorLabels?: boolean;
|
463 | sort?: boolean;
|
464 | stack?: boolean;
|
465 | start?: DateType;
|
466 | style?: Graph2dStyleType;
|
467 | throttleRedraw?: number;
|
468 | timeAxis?: TimelineTimeAxisOption;
|
469 | width?: HeightWidthType;
|
470 | yAxisOrientation?: RightLeftEnumType;
|
471 | zoomable?: boolean;
|
472 | zoomKey?: string;
|
473 | zoomMax?: number;
|
474 | zoomMin?: number;
|
475 | zIndex?: number;
|
476 | }
|
477 |
|
478 | export class Graph2d {
|
479 | constructor(
|
480 | container: HTMLElement,
|
481 | items: DataItemCollectionType,
|
482 | groups: DataGroupCollectionType,
|
483 | options?: Graph2dOptions
|
484 | );
|
485 | constructor(
|
486 | container: HTMLElement,
|
487 | items: DataItemCollectionType,
|
488 | options?: Graph2dOptions
|
489 | );
|
490 |
|
491 | addCustomTime(time: DateType, id?: IdType): IdType;
|
492 | destroy(): void;
|
493 | fit(options?: TimelineAnimationOptions): void;
|
494 | focus(ids: IdType | IdType[], options?: TimelineAnimationOptions): void;
|
495 | getCurrentTime(): Date;
|
496 | getCustomTime(id?: IdType): Date;
|
497 | getEventProperties(event: Event): TimelineEventPropertiesResult;
|
498 | getItemRange(): any; // TODO
|
499 | getSelection(): IdType[];
|
500 | getVisibleItems(): IdType[];
|
501 | getWindow(): { start: Date, end: Date };
|
502 | moveTo(time: DateType, options?: TimelineAnimationOptions): void;
|
503 | on(event: TimelineEvents, callback: () => void): void;
|
504 | off(event: TimelineEvents, callback: () => void): void;
|
505 | redraw(): void;
|
506 | removeCustomTime(id: IdType): void;
|
507 | setCurrentTime(time: DateType): void;
|
508 | setCustomTime(time: DateType, id?: IdType): void;
|
509 | setCustomTimeTitle(title: string, id?: IdType): void;
|
510 | setData(data: { groups?: DataGroupCollectionType; items?: DataItemCollectionType }): void;
|
511 | setGroups(groups?: DataGroupCollectionType): void;
|
512 | setItems(items: DataItemCollectionType): void;
|
513 | setOptions(options: TimelineOptions): void;
|
514 | setSelection(ids: IdType | IdType[]): void;
|
515 | setWindow(start: DateType, end: DateType, options?: TimelineAnimationOptions): void;
|
516 | }
|
517 |
|
518 | export interface Graph2d {
|
519 | setGroups(groups?: TimelineGroup[]): void;
|
520 | setItems(items?: TimelineItem[]): void;
|
521 | getLegend(): TimelineWindow;
|
522 | getWindow(): TimelineWindow;
|
523 | setWindow(start: any, date: any): void;
|
524 | focus(selection: any): void;
|
525 | on(event?: string, callback?: (properties: any) => void): void;
|
526 | }
|
527 |
|
528 | export class Timeline {
|
529 | constructor(
|
530 | container: HTMLElement,
|
531 | items: DataItemCollectionType,
|
532 | groups: DataGroupCollectionType,
|
533 | options?: TimelineOptions
|
534 | );
|
535 |
|
536 | constructor(
|
537 | container: HTMLElement,
|
538 | items: DataItemCollectionType,
|
539 | options?: TimelineOptions
|
540 | );
|
541 |
|
542 | /**
|
543 | * Add new vertical bar representing a custom time that can be dragged by the user.
|
544 | * Parameter time can be a Date, Number, or String, and is new Date() by default.
|
545 | * Parameter id can be Number or String and is undefined by default.
|
546 | * The id is added as CSS class name of the custom time bar, allowing to style multiple time bars differently.
|
547 | * The method returns id of the created bar.
|
548 | */
|
549 | addCustomTime(time: DateType, id?: IdType): IdType;
|
550 |
|
551 | /**
|
552 | * Destroy the Timeline. The timeline is removed from memory. all DOM elements and event listeners are cleaned up.
|
553 | */
|
554 | destroy(): void;
|
555 |
|
556 | /**
|
557 | * Adjust the visible window such that it fits all items. See also focus(id).
|
558 | */
|
559 | fit(options?: TimelineAnimationOptions): void;
|
560 |
|
561 | /**
|
562 | * Adjust the visible window such that the selected item (or multiple items) are centered on screen. See also function fit()
|
563 | */
|
564 | focus(ids: IdType | IdType[], options?: TimelineAnimationOptions): void;
|
565 |
|
566 | /**
|
567 | * Get the current time. Only applicable when option showCurrentTime is true.
|
568 | */
|
569 | getCurrentTime(): Date;
|
570 |
|
571 | /**
|
572 | * Retrieve the custom time from the custom time bar with given id.
|
573 | * @param id Id is undefined by default.
|
574 | */
|
575 | getCustomTime(id?: IdType): Date;
|
576 |
|
577 | getEventProperties(event: Event): TimelineEventPropertiesResult;
|
578 |
|
579 | /**
|
580 | * Get the range of all the items as an object containing min date and max date
|
581 | */
|
582 | getItemRange(): { min: Date, max: Date };
|
583 |
|
584 | /**
|
585 | * Get an array with the ids of the currently selected items
|
586 | */
|
587 | getSelection(): IdType[];
|
588 |
|
589 | /**
|
590 | * Get an array with the ids of the currently visible items.
|
591 | */
|
592 | getVisibleItems(): IdType[];
|
593 |
|
594 | /**
|
595 | * Get the current visible window.
|
596 | */
|
597 | getWindow(): TimelineWindow;
|
598 |
|
599 | /**
|
600 | * Move the window such that given time is centered on screen.
|
601 | */
|
602 | moveTo(time: DateType, options?: TimelineAnimationOptions, callback?: (properties?: any) => void): void;
|
603 |
|
604 | /**
|
605 | * Create an event listener. The callback function is invoked every time the event is triggered.
|
606 | */
|
607 | on(event: TimelineEvents, callback?: (properties?: any) => void): void;
|
608 |
|
609 | /**
|
610 | * Remove an event listener created before via function on(event[, callback]).
|
611 | */
|
612 | off(event: TimelineEvents, callback?: (properties?: any) => void): void;
|
613 |
|
614 | /**
|
615 | * Force a redraw of the Timeline. The size of all items will be recalculated.
|
616 | * Can be useful to manually redraw when option autoResize=false and the window has been resized, or when the items CSS has been changed.
|
617 | */
|
618 | redraw(): void;
|
619 |
|
620 | /**
|
621 | * Remove vertical bars previously added to the timeline via addCustomTime method.
|
622 | * @param id ID of the custom vertical bar returned by addCustomTime method.
|
623 | */
|
624 | removeCustomTime(id: IdType): void;
|
625 |
|
626 | /**
|
627 | * Set a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time.
|
628 | * Only applicable when option showCurrentTime is true.
|
629 | */
|
630 | setCurrentTime(time: DateType): void;
|
631 |
|
632 | /**
|
633 | * Adjust the time of a custom time bar.
|
634 | * @param time The time the custom time bar should point to
|
635 | * @param id Id of the custom time bar, and is undefined by default.
|
636 | */
|
637 | setCustomTime(time: DateType, id?: IdType): void;
|
638 |
|
639 | /**
|
640 | * Adjust the title attribute of a custom time bar.
|
641 | * @param title The title shown when hover over time bar
|
642 | * @param id Id of the custom time bar, and is undefined by default.
|
643 | */
|
644 | setCustomTimeTitle(title: string, id?: IdType): void;
|
645 |
|
646 | /**
|
647 | * Set both groups and items at once. Both properties are optional.
|
648 | * This is a convenience method for individually calling both setItems(items) and setGroups(groups).
|
649 | * Both items and groups can be an Array with Objects, a DataSet (offering 2 way data binding), or a DataView (offering 1 way data binding).
|
650 | */
|
651 | setData(data: { groups?: DataGroupCollectionType; items?: DataItemCollectionType }): void;
|
652 |
|
653 | /**
|
654 | * Set a data set with groups for the Timeline.
|
655 | */
|
656 | setGroups(groups?: DataGroupCollectionType): void;
|
657 |
|
658 | /**
|
659 | * Set a data set with items for the Timeline.
|
660 | */
|
661 | setItems(items: DataItemCollectionType): void;
|
662 |
|
663 | /**
|
664 | * Set or update options. It is possible to change any option of the timeline at any time.
|
665 | * You can for example switch orientation on the fly.
|
666 | */
|
667 | setOptions(options: TimelineOptions): void;
|
668 |
|
669 | /**
|
670 | * Select one or multiple items by their id. The currently selected items will be unselected.
|
671 | * To unselect all selected items, call `setSelection([])`.
|
672 | */
|
673 | setSelection(ids: IdType | IdType[], options?: { focus: boolean, animation: TimelineAnimationOptions }): void;
|
674 |
|
675 | /**
|
676 | * Set the current visible window.
|
677 | * @param start If the parameter value of start is null, the parameter will be left unchanged.
|
678 | * @param end If the parameter value of end is null, the parameter will be left unchanged.
|
679 | * @param options Timeline animation options. See {@link TimelineAnimationOptions}
|
680 | * @param callback The callback function
|
681 | */
|
682 | setWindow(start: DateType, end: DateType, options?: TimelineAnimationOptions, callback?: () => void): void;
|
683 |
|
684 | /**
|
685 | * Toggle rollingMode.
|
686 | */
|
687 | toggleRollingMode(): void;
|
688 |
|
689 | /**
|
690 | * Zoom in the current visible window.
|
691 | * @param percentage A number and must be between 0 and 1. If null, the window will be left unchanged.
|
692 | * @param options Timeline animation options. See {@link TimelineAnimationOptions}
|
693 | * @param callback The callback function
|
694 | */
|
695 | zoomIn(percentage: number, options?: TimelineAnimationOptions, callback?: () => void): void;
|
696 |
|
697 | /**
|
698 | * Zoom out the current visible window.
|
699 | * @param percentage A number and must be between 0 and 1. If null, the window will be left unchanged.
|
700 | * @param options Timeline animation options. See {@link TimelineAnimationOptions}
|
701 | * @param callback The callback function
|
702 | */
|
703 | zoomOut(percentage: number, options?: TimelineAnimationOptions, callback?: () => void): void;
|
704 | }
|
705 |
|
706 | export interface Timeline {
|
707 | setGroups(groups?: TimelineGroup[]): void;
|
708 | setItems(items?: TimelineItem[]): void;
|
709 | getWindow(): TimelineWindow;
|
710 | setWindow(start: any, date: any): void;
|
711 | focus(selection: any): void;
|
712 | on(event?: string, callback?: (properties: any) => void): void;
|
713 | off(event: string, callback?: (properties?: any) => void): void;
|
714 | }
|
715 |
|
716 | export interface TimelineWindow {
|
717 | start: Date;
|
718 | end: Date;
|
719 | }
|
720 |
|
721 | export interface TimelineItemEditableOption {
|
722 | remove?: boolean;
|
723 | updateGroup?: boolean;
|
724 | updateTime?: boolean;
|
725 | }
|
726 |
|
727 | export type TimelineItemEditableType = boolean | TimelineItemEditableOption;
|
728 |
|
729 | export interface TimelineItem {
|
730 | className?: string;
|
731 | align?: TimelineAlignType;
|
732 | content: string;
|
733 | end?: DateType;
|
734 | group?: IdType;
|
735 | id: IdType;
|
736 | start: DateType;
|
737 | style?: string;
|
738 | subgroup?: IdType;
|
739 | title?: string;
|
740 | type?: TimelineItemType;
|
741 | editable?: TimelineItemEditableType;
|
742 | selectable?: boolean;
|
743 | }
|
744 |
|
745 | export interface TimelineGroup {
|
746 | className?: string;
|
747 | content: string | HTMLElement;
|
748 | id: IdType;
|
749 | style?: string;
|
750 | order?: number;
|
751 | subgroupOrder?: TimelineOptionsGroupOrderType;
|
752 | title?: string;
|
753 | visible?: boolean;
|
754 | nestedGroups?: IdType[];
|
755 | showNested?: boolean;
|
756 | subgroupVisibility?: SubGroupVisibilityOptions;
|
757 | }
|
758 |
|
759 | /**
|
760 | * Animation options interface.
|
761 | */
|
762 | export interface AnimationOptions {
|
763 | /**
|
764 | * The duration (in milliseconds).
|
765 | */
|
766 | duration: number;
|
767 | /**
|
768 | * The easing function.
|
769 | *
|
770 | * Available are:
|
771 | * linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic,
|
772 | * easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart,
|
773 | * easeInQuint, easeOutQuint, easeInOutQuint.
|
774 | */
|
775 | easingFunction: EasingFunction;
|
776 | }
|
777 |
|
778 | export type EasingFunction =
|
779 | 'linear' |
|
780 | 'easeInQuad' |
|
781 | 'easeOutQuad' |
|
782 | 'easeInOutQuad' |
|
783 | 'easeInCubic' |
|
784 | 'easeOutCubic' |
|
785 | 'easeInOutCubic' |
|
786 | 'easeInQuart' |
|
787 | 'easeOutQuart' |
|
788 | 'easeInOutQuart' |
|
789 | 'easeInQuint' |
|
790 | 'easeOutQuint' |
|
791 | 'easeInOutQuint';
|
792 |
|
\ | No newline at end of file |