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