tsichart-core 2.0.0 → 2.1.0

package/dist/index.d.ts

@@ -310,18 +310,27 @@ declare class Legend extends Component {
     private svgSelection;
     private chartComponentData;
     constructor(drawChart: any, renderTarget: Element, legendWidth: number);
+    private getHeightPerSplitBy;
+    private addColorKey;
+    private addEyeIcon;
+    private addSeriesName;
+    private addSeriesTypeSelection;
+    private handleSplitByClick;
+    private handleSplitByMouseOver;
+    private handleSplitByMouseOut;
+    private isStickied;
     private labelMouseoutWrapper;
     private toggleSplitByVisible;
     triggerSplitByFocus(aggKey: string, splitBy: string): void;
-    private getHeightPerSplitBy;
     private createGradient;
-    private isNonNumeric;
     private createNonNumericColorKey;
     private createCategoricalColorKey;
     private createEventsColorKey;
+    private handleShowMoreSplitBys;
     private renderSplitBys;
     private toggleSticky;
     draw(legendState: string, chartComponentData: any, labelMouseover: any, svgSelection: any, options: any, labelMouseoutAction?: any, stickySeriesAction?: any, event?: any): void;
+    destroy(): void;
 }
 
 declare class ChartComponent extends Component {
@@ -1097,29 +1106,52 @@ declare class ModelAutocomplete extends Component {
     chartOptions: any;
     ap: any;
     constructor(renderTarget: Element);
-    render(environmentFqdn: string, getToken: any, chartOptions: any): void;
+    render(chartOptions: any): void;
 }
 
 declare class HierarchyNavigation extends Component {
     private searchFunction;
     private hierarchyElem;
     private path;
+    private debounceTimer;
+    private debounceDelay;
+    private requestCounter;
+    private latestRequestId;
     selectedIds: Array<string>;
     searchEnabled: boolean;
+    autocompleteEnabled: boolean;
     private searchWrapperElem;
     private hierarchyNavWrapper;
+    private isSearchMode;
+    private pathsToAutoExpand;
     ap: any;
     constructor(renderTarget: Element);
-    render(searchF: Function, hierarchyNavOptions: any, preselectedIds: Array<string>): Promise<void>;
+    render(searchF: (payload: any) => Promise<any>, hierarchyNavOptions: any, preselectedIds: Array<string>): Promise<void>;
     private createHierarchyNavWrapper;
     private createResultsWrapper;
     private createHierarchyElem;
+    private onKeyDown;
+    private getVisibleItemElems;
+    private focusItem;
+    private focusNext;
+    private focusPrev;
+    private handleArrowRight;
+    private handleArrowLeft;
     private requestPayload;
     private renderTree;
     private renderSearchBox;
     private pathSearchAndRenderResult;
     private renderSearchResult;
     private filterTree;
+    private fetchAutocompleteSuggestions;
+    private performDeepSearch;
+    private renderSearchResults;
+    private exitSearchMode;
+    private navigateToPath;
+    private computePathsToAutoExpand;
+    private shouldAutoExpand;
+    private autoExpandNode;
+    private highlightMatch;
     private fillDataRecursively;
     private createHierarchyItemElem;
     private getAriaLabel;
@@ -1129,6 +1161,1203 @@ declare class HierarchyNavigation extends Component {
     private instanceNodeString;
 }
 
+/*!
+ * Pikaday
+ *
+ * Copyright © 2014 David Bushell | BSD & MIT license | https://github.com/dbushell/Pikaday
+ */
+(function (root, factory) {
+
+    var moment;
+    if (typeof exports === 'object') {
+        // CommonJS module
+        // Load moment.js as an optional dependency
+        try { moment = require('moment'); } catch (e) { moment = (typeof window !== 'undefined' && window.moment) || undefined; }
+        module.exports = factory(moment);
+    } else if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(function (req) {
+            // Load moment.js as an optional dependency
+            var id = 'moment';
+            try { moment = req(id); } catch (e) { moment = (typeof window !== 'undefined' && window.moment) || undefined; }
+            return factory(moment);
+        });
+    } else {
+        // Browser global - safely access moment from multiple sources
+        moment = (typeof window !== 'undefined' && window.moment) ||
+            (typeof root !== 'undefined' && root && root.moment) ||
+            (typeof global !== 'undefined' && global.moment);
+
+        // Safely assign Pikaday to root if it exists, otherwise use window
+        if (typeof root !== 'undefined' && root) {
+            root.Pikaday = factory(moment);
+        } else if (typeof window !== 'undefined') {
+            window.Pikaday = factory(moment);
+        }
+    }
+}(typeof self !== 'undefined' ? self :
+    typeof window !== 'undefined' ? window :
+        typeof global !== 'undefined' ? global :
+            undefined, function (moment) {
+
+                /**
+                 * feature detection and helper functions
+                 */
+                var hasMoment = typeof moment === 'function' || (moment && typeof moment.version === 'string'),
+
+                    hasEventListeners = !!window.addEventListener,
+
+                    document = window.document,
+
+                    sto = window.setTimeout,
+
+                    addEvent = function (el, e, callback, capture) {
+                        if (hasEventListeners) {
+                            el.addEventListener(e, callback, !!capture);
+                        } else {
+                            el.attachEvent('on' + e, callback);
+                        }
+                    },
+
+                    removeEvent = function (el, e, callback, capture) {
+                        if (hasEventListeners) {
+                            el.removeEventListener(e, callback, !!capture);
+                        } else {
+                            el.detachEvent('on' + e, callback);
+                        }
+                    },
+
+                    trim = function (str) {
+                        return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g, '');
+                    },
+
+                    hasClass = function (el, cn) {
+                        return (' ' + el.className + ' ').indexOf(' ' + cn + ' ') !== -1;
+                    },
+
+                    addClass = function (el, cn) {
+                        if (!hasClass(el, cn)) {
+                            el.className = (el.className === '') ? cn : el.className + ' ' + cn;
+                        }
+                    },
+
+                    removeClass = function (el, cn) {
+                        el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' '));
+                    },
+
+                    isArray = function (obj) {
+                        return (/Array/).test(Object.prototype.toString.call(obj));
+                    },
+
+                    isDate = function (obj) {
+                        return (/Date/).test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
+                    },
+
+                    isWeekend = function (date) {
+                        var day = date.getDay();
+                        return day === 0 || day === 6;
+                    },
+
+                    isLeapYear = function (year) {
+                        // solution by Matti Virkkunen: http://stackoverflow.com/a/4881951
+                        return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
+                    },
+
+                    getDaysInMonth = function (year, month) {
+                        return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
+                    },
+
+                    setToStartOfDay = function (date) {
+                        if (isDate(date)) date.setHours(0, 0, 0, 0);
+                    },
+
+                    compareDates = function (a, b) {
+                        // weak date comparison (use setToStartOfDay(date) to ensure correct result)
+                        return a.getTime() === b.getTime();
+                    },
+
+                    extend = function (to, from, overwrite) {
+                        var prop, hasProp;
+                        for (prop in from) {
+                            hasProp = to[prop] !== undefined;
+                            if (hasProp && typeof from[prop] === 'object' && from[prop] !== null && from[prop].nodeName === undefined) {
+                                if (isDate(from[prop])) {
+                                    if (overwrite) {
+                                        to[prop] = new Date(from[prop].getTime());
+                                    }
+                                }
+                                else if (isArray(from[prop])) {
+                                    if (overwrite) {
+                                        to[prop] = from[prop].slice(0);
+                                    }
+                                } else {
+                                    to[prop] = extend({}, from[prop], overwrite);
+                                }
+                            } else if (overwrite || !hasProp) {
+                                to[prop] = from[prop];
+                            }
+                        }
+                        return to;
+                    },
+
+                    fireEvent = function (el, eventName, data) {
+                        var ev;
+
+                        if (document.createEvent) {
+                            ev = document.createEvent('HTMLEvents');
+                            ev.initEvent(eventName, true, false);
+                            ev = extend(ev, data);
+                            el.dispatchEvent(ev);
+                        } else if (document.createEventObject) {
+                            ev = document.createEventObject();
+                            ev = extend(ev, data);
+                            el.fireEvent('on' + eventName, ev);
+                        }
+                    },
+
+                    adjustCalendar = function (calendar) {
+                        if (calendar.month < 0) {
+                            calendar.year -= Math.ceil(Math.abs(calendar.month) / 12);
+                            calendar.month += 12;
+                        }
+                        if (calendar.month > 11) {
+                            calendar.year += Math.floor(Math.abs(calendar.month) / 12);
+                            calendar.month -= 12;
+                        }
+                        return calendar;
+                    },
+
+                    /**
+                     * defaults and localisation
+                     */
+                    defaults = {
+
+                        // bind the picker to a form field
+                        field: null,
+
+                        // automatically show/hide the picker on `field` focus (default `true` if `field` is set)
+                        bound: undefined,
+
+                        // position of the datepicker, relative to the field (default to bottom & left)
+                        // ('bottom' & 'left' keywords are not used, 'top' & 'right' are modifier on the bottom/left position)
+                        position: 'bottom left',
+
+                        // automatically fit in the viewport even if it means repositioning from the position option
+                        reposition: true,
+
+                        // the default output format for `.toString()` and `field` value
+                        format: 'YYYY-MM-DD',
+
+                        // the toString function which gets passed a current date object and format
+                        // and returns a string
+                        toString: null,
+
+                        // used to create date object from current input string
+                        parse: null,
+
+                        // the initial date to view when first opened
+                        defaultDate: null,
+
+                        // make the `defaultDate` the initial selected value
+                        setDefaultDate: false,
+
+                        // first day of week (0: Sunday, 1: Monday etc)
+                        firstDay: 0,
+
+                        // the default flag for moment's strict date parsing
+                        formatStrict: false,
+
+                        // the minimum/earliest date that can be selected
+                        minDate: null,
+                        // the maximum/latest date that can be selected
+                        maxDate: null,
+
+                        // number of years either side, or array of upper/lower range
+                        yearRange: 10,
+
+                        // show week numbers at head of row
+                        showWeekNumber: false,
+
+                        // Week picker mode
+                        pickWholeWeek: false,
+
+                        // used internally (don't config outside)
+                        minYear: 0,
+                        maxYear: 9999,
+                        minMonth: undefined,
+                        maxMonth: undefined,
+
+                        startRange: null,
+                        endRange: null,
+
+                        isRTL: false,
+
+                        // Additional text to append to the year in the calendar title
+                        yearSuffix: '',
+
+                        // Render the month after year in the calendar title
+                        showMonthAfterYear: false,
+
+                        // Render days of the calendar grid that fall in the next or previous month
+                        showDaysInNextAndPreviousMonths: false,
+
+                        // Allows user to select days that fall in the next or previous month
+                        enableSelectionDaysInNextAndPreviousMonths: false,
+
+                        // how many months are visible
+                        numberOfMonths: 1,
+
+                        // when numberOfMonths is used, this will help you to choose where the main calendar will be (default `left`, can be set to `right`)
+                        // only used for the first display or when a selected date is not visible
+                        mainCalendar: 'left',
+
+                        // Specify a DOM element to render the calendar in
+                        container: undefined,
+
+                        // Blur field when date is selected
+                        blurFieldOnSelect: true,
+
+                        // internationalization
+                        i18n: {
+                            previousMonth: 'Previous Month',
+                            nextMonth: 'Next Month',
+                            months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+                            weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+                            weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+                        },
+
+                        // Theme Classname
+                        theme: null,
+
+                        // events array
+                        events: [],
+
+                        // callback function
+                        onSelect: null,
+                        onOpen: null,
+                        onClose: null,
+                        onDraw: null,
+
+                        // Enable keyboard input
+                        keyboardInput: true
+                    },
+
+
+                    /**
+                     * templating functions to abstract HTML rendering
+                     */
+                    renderDayName = function (opts, day, abbr) {
+                        day += opts.firstDay;
+                        while (day >= 7) {
+                            day -= 7;
+                        }
+                        return abbr ? opts.i18n.weekdaysShort[day] : opts.i18n.weekdays[day];
+                    },
+
+                    renderDay = function (opts) {
+                        var arr = [];
+                        var ariaSelected = 'false';
+                        if (opts.isEmpty) {
+                            if (opts.showDaysInNextAndPreviousMonths) {
+                                arr.push('is-outside-current-month');
+
+                                if (!opts.enableSelectionDaysInNextAndPreviousMonths) {
+                                    arr.push('is-selection-disabled');
+                                }
+
+                            } else {
+                                return '<td class="is-empty"></td>';
+                            }
+                        }
+                        if (opts.isDisabled) {
+                            arr.push('is-disabled');
+                        }
+                        if (opts.isToday) {
+                            arr.push('is-today');
+                        }
+                        if (opts.isSelected) {
+                            arr.push('is-selected');
+                            ariaSelected = 'true';
+                        }
+                        if (opts.hasEvent) {
+                            arr.push('has-event');
+                        }
+                        if (opts.isInRange) {
+                            arr.push('is-inrange');
+                        }
+                        if (opts.isStartRange) {
+                            arr.push('is-startrange');
+                        }
+                        if (opts.isEndRange) {
+                            arr.push('is-endrange');
+                        }
+                        return '<td data-day="' + opts.day + '" class="' + arr.join(' ') + '" aria-selected="' + ariaSelected + '">' +
+                            '<button tabIndex="-1" class="pika-button pika-day" type="button" ' +
+                            'data-pika-year="' + opts.year + '" data-pika-month="' + opts.month + '" data-pika-day="' + opts.day + '">' +
+                            opts.day +
+                            '</button>' +
+                            '</td>';
+                    },
+
+                    renderWeek = function (d, m, y) {
+                        // Lifted from http://javascript.about.com/library/blweekyear.htm, lightly modified.
+                        var onejan = new Date(y, 0, 1),
+                            weekNum = Math.ceil((((new Date(y, m, d) - onejan) / 86400000) + onejan.getDay() + 1) / 7);
+                        return '<td class="pika-week">' + weekNum + '</td>';
+                    },
+
+                    renderRow = function (days, isRTL, pickWholeWeek, isRowSelected) {
+                        return '<tr class="pika-row' + (pickWholeWeek ? ' pick-whole-week' : '') + (isRowSelected ? ' is-selected' : '') + '">' + (isRTL ? days.reverse() : days).join('') + '</tr>';
+                    },
+
+                    renderBody = function (rows) {
+                        return '<tbody>' + rows.join('') + '</tbody>';
+                    },
+
+                    renderHead = function (opts) {
+                        var i, arr = [];
+                        if (opts.showWeekNumber) {
+                            arr.push('<th></th>');
+                        }
+                        for (i = 0; i < 7; i++) {
+                            arr.push('<th scope="col"><abbr title="' + renderDayName(opts, i) + '">' + renderDayName(opts, i, true) + '</abbr></th>');
+                        }
+                        return '<thead><tr>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</tr></thead>';
+                    },
+
+                    renderTitle = function (instance, c, year, month, refYear, randId) {
+                        var i, j, arr,
+                            opts = instance._o,
+                            isMinYear = year === opts.minYear,
+                            isMaxYear = year === opts.maxYear,
+                            html = '<div id="' + randId + '" class="pika-title">',
+                            monthHtml,
+                            yearHtml,
+                            prev = true,
+                            next = true;
+
+                        for (arr = [], i = 0; i < 12; i++) {
+                            arr.push('<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' +
+                                (i === month ? ' selected="selected"' : '') +
+                                ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled="disabled"' : '') + '>' +
+                                opts.i18n.months[i] + '</option>');
+                        }
+
+                        monthHtml = '<div class="pika-label">' + opts.i18n.months[month] + '<select aria-label="select month" class="pika-select pika-select-month" tabindex="-1">' + arr.join('') + '</select></div>';
+
+                        if (isArray(opts.yearRange)) {
+                            i = opts.yearRange[0];
+                            j = opts.yearRange[1] + 1;
+                        } else {
+                            i = year - opts.yearRange;
+                            j = 1 + year + opts.yearRange;
+                        }
+
+                        for (arr = []; i < j && i <= opts.maxYear; i++) {
+                            if (i >= opts.minYear) {
+                                arr.push('<option value="' + i + '"' + (i === year ? ' selected="selected"' : '') + '>' + (i) + '</option>');
+                            }
+                        }
+                        yearHtml = '<div class="pika-label">' + year + opts.yearSuffix + '<select aria-label="select year" class="pika-select pika-select-year" tabindex="-1">' + arr.join('') + '</select></div>';
+
+                        if (opts.showMonthAfterYear) {
+                            html += yearHtml + monthHtml;
+                        } else {
+                            html += monthHtml + yearHtml;
+                        }
+
+                        if (isMinYear && (month === 0 || opts.minMonth >= month)) {
+                            prev = false;
+                        }
+
+                        if (isMaxYear && (month === 11 || opts.maxMonth <= month)) {
+                            next = false;
+                        }
+
+                        if (c === 0) {
+                            html += '<button tabIndex="-1" class="pika-prev' + (prev ? '' : ' is-disabled') + '" type="button">' + opts.i18n.previousMonth + '</button>';
+                        }
+                        if (c === (instance._o.numberOfMonths - 1)) {
+                            html += '<button tabIndex="-1" class="pika-next' + (next ? '' : ' is-disabled') + '" type="button">' + opts.i18n.nextMonth + '</button>';
+                        }
+
+                        return html += '</div>';
+                    },
+
+                    renderTable = function (opts, data, randId) {
+                        return '<table cellpadding="0" cellspacing="0" class="pika-table" role="grid" aria-labelledby="' + randId + '">' + renderHead(opts) + renderBody(data) + '</table>';
+                    },
+
+
+                    /**
+                     * Pikaday constructor
+                     */
+                    Pikaday = function (options) {
+                        var self = this,
+                            opts = self.config(options);
+
+                        self._onMouseDown = function (e) {
+                            if (!self._v) {
+                                return;
+                            }
+                            e = e || window.event;
+                            var target = e.target || e.srcElement;
+                            if (!target) {
+                                return;
+                            }
+
+                            if (!hasClass(target, 'is-disabled')) {
+                                if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty') && !hasClass(target.parentNode, 'is-disabled')) {
+                                    self.setDate(new Date(target.getAttribute('data-pika-year'), target.getAttribute('data-pika-month'), target.getAttribute('data-pika-day')));
+                                    if (opts.bound) {
+                                        sto(function () {
+                                            self.hide();
+                                            if (opts.blurFieldOnSelect && opts.field) {
+                                                opts.field.blur();
+                                            }
+                                        }, 100);
+                                    }
+                                }
+                                else if (hasClass(target, 'pika-prev')) {
+                                    self.prevMonth();
+                                }
+                                else if (hasClass(target, 'pika-next')) {
+                                    self.nextMonth();
+                                }
+                            }
+                            if (!hasClass(target, 'pika-select')) {
+                                // if this is touch event prevent mouse events emulation
+                                if (e.preventDefault) {
+                                    e.preventDefault();
+                                } else {
+                                    e.returnValue = false;
+                                    return false;
+                                }
+                            } else {
+                                self._c = true;
+                            }
+                        };
+
+                        self._onChange = function (e) {
+                            e = e || window.event;
+                            var target = e.target || e.srcElement;
+                            if (!target) {
+                                return;
+                            }
+                            if (hasClass(target, 'pika-select-month')) {
+                                self.gotoMonth(target.value);
+                            }
+                            else if (hasClass(target, 'pika-select-year')) {
+                                self.gotoYear(target.value);
+                            }
+                        };
+
+                        self._onKeyChange = function (e) {
+                            e = e || window.event;
+                            // ignore if event comes from input box
+                            if (self.isVisible() && e.target && e.target.type !== 'text') {
+
+                                switch (e.keyCode) {
+                                    case 13:
+                                    case 27:
+                                        if (opts.field) {
+                                            opts.field.blur();
+                                        }
+                                        break;
+                                    case 37:
+                                        e.preventDefault();
+                                        self.adjustDate('subtract', 1);
+                                        break;
+                                    case 38:
+                                        self.adjustDate('subtract', 7);
+                                        break;
+                                    case 39:
+                                        self.adjustDate('add', 1);
+                                        break;
+                                    case 40:
+                                        self.adjustDate('add', 7);
+                                        break;
+                                }
+                            }
+                        };
+
+                        self._onInputChange = function (e) {
+                            var date;
+
+                            if (e.firedBy === self) {
+                                return;
+                            }
+                            if (opts.parse) {
+                                date = opts.parse(opts.field.value, opts.format);
+                            } else if (hasMoment) {
+                                date = moment(opts.field.value, opts.format, opts.formatStrict);
+                                date = (date && date.isValid()) ? date.toDate() : null;
+                            }
+                            else {
+                                date = new Date(Date.parse(opts.field.value));
+                            }
+                            // if (isDate(date)) {
+                            //   self.setDate(date);
+                            // }
+                            // if (!self._v) {
+                            //     self.show();
+                            // }
+                        };
+
+                        self._onInputFocus = function () {
+                            self.show();
+                        };
+
+                        self._onInputClick = function () {
+                            self.show();
+                        };
+
+                        self._onInputBlur = function () {
+                            // IE allows pika div to gain focus; catch blur the input field
+                            var pEl = document.activeElement;
+                            do {
+                                if (hasClass(pEl, 'pika-single')) {
+                                    return;
+                                }
+                            }
+                            while ((pEl = pEl.parentNode));
+
+                            if (!self._c) {
+                                self._b = sto(function () {
+                                    self.hide();
+                                }, 50);
+                            }
+                            self._c = false;
+                        };
+
+                        self._onClick = function (e) {
+                            e = e || window.event;
+                            var target = e.target || e.srcElement,
+                                pEl = target;
+                            if (!target) {
+                                return;
+                            }
+                            if (!hasEventListeners && hasClass(target, 'pika-select')) {
+                                if (!target.onchange) {
+                                    target.setAttribute('onchange', 'return;');
+                                    addEvent(target, 'change', self._onChange);
+                                }
+                            }
+                            do {
+                                if (hasClass(pEl, 'pika-single') || pEl === opts.trigger) {
+                                    return;
+                                }
+                            }
+                            while ((pEl = pEl.parentNode));
+                            if (self._v && target !== opts.trigger && pEl !== opts.trigger) {
+                                self.hide();
+                            }
+                        };
+
+                        self.el = document.createElement('div');
+                        self.el.className = 'pika-single' + (opts.isRTL ? ' is-rtl' : '') + (opts.theme ? ' ' + opts.theme : '');
+
+                        addEvent(self.el, 'mousedown', self._onMouseDown, true);
+                        addEvent(self.el, 'touchend', self._onMouseDown, true);
+                        addEvent(self.el, 'change', self._onChange);
+
+                        if (opts.keyboardInput) {
+                            addEvent(document, 'keydown', self._onKeyChange);
+                        }
+
+                        if (opts.field) {
+                            if (opts.container) {
+                                opts.container.appendChild(self.el);
+                            } else if (opts.bound) {
+                                document.body.appendChild(self.el);
+                            } else {
+                                opts.field.parentNode.insertBefore(self.el, opts.field.nextSibling);
+                            }
+                            addEvent(opts.field, 'change', self._onInputChange);
+
+                            if (!opts.defaultDate) {
+                                if (hasMoment && opts.field.value) {
+                                    opts.defaultDate = moment(opts.field.value, opts.format).toDate();
+                                } else {
+                                    opts.defaultDate = new Date(Date.parse(opts.field.value));
+                                }
+                                opts.setDefaultDate = true;
+                            }
+                        }
+
+                        var defDate = opts.defaultDate;
+
+                        if (isDate(defDate)) {
+                            if (opts.setDefaultDate) {
+                                self.setDate(defDate, true);
+                            } else {
+                                self.gotoDate(defDate);
+                            }
+                        } else {
+                            self.gotoDate(new Date());
+                        }
+
+                        if (opts.bound) {
+                            this.hide();
+                            self.el.className += ' is-bound';
+                            addEvent(opts.trigger, 'click', self._onInputClick);
+                            addEvent(opts.trigger, 'focus', self._onInputFocus);
+                            addEvent(opts.trigger, 'blur', self._onInputBlur);
+                        } else {
+                            this.show();
+                        }
+                    };
+
+
+                /**
+                 * public Pikaday API
+                 */
+                Pikaday.prototype = {
+
+
+                    /**
+                     * configure functionality
+                     */
+                    config: function (options) {
+                        if (!this._o) {
+                            this._o = extend({}, defaults, true);
+                        }
+
+                        var opts = extend(this._o, options, true);
+
+                        opts.isRTL = !!opts.isRTL;
+
+                        opts.field = (opts.field && opts.field.nodeName) ? opts.field : null;
+
+                        opts.theme = (typeof opts.theme) === 'string' && opts.theme ? opts.theme : null;
+
+                        opts.bound = !!(opts.bound !== undefined ? opts.field && opts.bound : opts.field);
+
+                        opts.trigger = (opts.trigger && opts.trigger.nodeName) ? opts.trigger : opts.field;
+
+                        opts.disableWeekends = !!opts.disableWeekends;
+
+                        opts.disableDayFn = (typeof opts.disableDayFn) === 'function' ? opts.disableDayFn : null;
+
+                        var nom = parseInt(opts.numberOfMonths, 10) || 1;
+                        opts.numberOfMonths = nom > 4 ? 4 : nom;
+
+                        if (!isDate(opts.minDate)) {
+                            opts.minDate = false;
+                        }
+                        if (!isDate(opts.maxDate)) {
+                            opts.maxDate = false;
+                        }
+                        if ((opts.minDate && opts.maxDate) && opts.maxDate < opts.minDate) {
+                            opts.maxDate = opts.minDate = false;
+                        }
+                        if (opts.minDate) {
+                            this.setMinDate(opts.minDate);
+                        }
+                        if (opts.maxDate) {
+                            this.setMaxDate(opts.maxDate);
+                        }
+
+                        if (isArray(opts.yearRange)) {
+                            var fallback = new Date().getFullYear() - 10;
+                            opts.yearRange[0] = parseInt(opts.yearRange[0], 10) || fallback;
+                            opts.yearRange[1] = parseInt(opts.yearRange[1], 10) || fallback;
+                        } else {
+                            opts.yearRange = Math.abs(parseInt(opts.yearRange, 10)) || defaults.yearRange;
+                            if (opts.yearRange > 100) {
+                                opts.yearRange = 100;
+                            }
+                        }
+
+                        return opts;
+                    },
+
+                    /**
+                     * return a formatted string of the current selection (using Moment.js if available)
+                     */
+                    toString: function (format) {
+                        format = format || this._o.format;
+                        if (!isDate(this._d)) {
+                            return '';
+                        }
+                        if (this._o.toString) {
+                            return this._o.toString(this._d, format);
+                        }
+                        if (hasMoment) {
+                            return moment(this._d).format(format);
+                        }
+                        return this._d.toDateString();
+                    },
+
+                    /**
+                     * return a Moment.js object of the current selection (if available)
+                     */
+                    getMoment: function () {
+                        return hasMoment ? moment(this._d) : null;
+                    },
+
+                    /**
+                     * set the current selection from a Moment.js object (if available)
+                     */
+                    setMoment: function (date, preventOnSelect) {
+                        if (hasMoment && moment.isMoment(date)) {
+                            this.setDate(date.toDate(), preventOnSelect);
+                        }
+                    },
+
+                    /**
+                     * return a Date object of the current selection
+                     */
+                    getDate: function () {
+                        return isDate(this._d) ? new Date(this._d.getTime()) : null;
+                    },
+
+                    /**
+                     * set the current selection
+                     */
+                    setDate: function (date, preventOnSelect) {
+                        if (!date) {
+                            this._d = null;
+
+                            if (this._o.field) {
+                                this._o.field.value = '';
+                                fireEvent(this._o.field, 'change', { firedBy: this });
+                            }
+
+                            return this.draw();
+                        }
+                        if (typeof date === 'string') {
+                            date = new Date(Date.parse(date));
+                        }
+                        if (!isDate(date)) {
+                            return;
+                        }
+
+                        var min = this._o.minDate,
+                            max = this._o.maxDate;
+
+                        if (isDate(min) && date < min) {
+                            date = min;
+                        } else if (isDate(max) && date > max) {
+                            date = max;
+                        }
+
+                        this._d = new Date(date.getTime());
+                        setToStartOfDay(this._d);
+                        this.gotoDate(this._d);
+
+                        if (this._o.field) {
+                            this._o.field.value = this.toString();
+                            fireEvent(this._o.field, 'change', { firedBy: this });
+                        }
+                        if (!preventOnSelect && typeof this._o.onSelect === 'function') {
+                            this._o.onSelect.call(this, this.getDate());
+                        }
+                    },
+
+                    /**
+                     * change view to a specific date
+                     */
+                    gotoDate: function (date) {
+                        var newCalendar = true;
+
+                        if (!isDate(date)) {
+                            return;
+                        }
+
+                        if (this.calendars) {
+                            var firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1),
+                                lastVisibleDate = new Date(this.calendars[this.calendars.length - 1].year, this.calendars[this.calendars.length - 1].month, 1),
+                                visibleDate = date.getTime();
+                            // get the end of the month
+                            lastVisibleDate.setMonth(lastVisibleDate.getMonth() + 1);
+                            lastVisibleDate.setDate(lastVisibleDate.getDate() - 1);
+                            newCalendar = (visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate);
+                        }
+
+                        if (newCalendar) {
+                            this.calendars = [{
+                                month: date.getMonth(),
+                                year: date.getFullYear()
+                            }];
+                            if (this._o.mainCalendar === 'right') {
+                                this.calendars[0].month += 1 - this._o.numberOfMonths;
+                            }
+                        }
+
+                        this.adjustCalendars();
+                    },
+
+                    adjustDate: function (sign, days) {
+
+                        var day = this.getDate() || new Date();
+                        var difference = parseInt(days) * 24 * 60 * 60 * 1000;
+
+                        var newDay;
+
+                        if (sign === 'add') {
+                            newDay = new Date(day.valueOf() + difference);
+                        } else if (sign === 'subtract') {
+                            newDay = new Date(day.valueOf() - difference);
+                        }
+
+                        this.setDate(newDay);
+                    },
+
+                    adjustCalendars: function () {
+                        this.calendars[0] = adjustCalendar(this.calendars[0]);
+                        for (var c = 1; c < this._o.numberOfMonths; c++) {
+                            this.calendars[c] = adjustCalendar({
+                                month: this.calendars[0].month + c,
+                                year: this.calendars[0].year
+                            });
+                        }
+                        this.draw();
+                    },
+
+                    gotoToday: function () {
+                        this.gotoDate(new Date());
+                    },
+
+                    /**
+                     * change view to a specific month (zero-index, e.g. 0: January)
+                     */
+                    gotoMonth: function (month) {
+                        if (!isNaN(month)) {
+                            this.calendars[0].month = parseInt(month, 10);
+                            this.adjustCalendars();
+                        }
+                    },
+
+                    nextMonth: function () {
+                        this.calendars[0].month++;
+                        this.adjustCalendars();
+                    },
+
+                    prevMonth: function () {
+                        this.calendars[0].month--;
+                        this.adjustCalendars();
+                    },
+
+                    /**
+                     * change view to a specific full year (e.g. "2012")
+                     */
+                    gotoYear: function (year) {
+                        if (!isNaN(year)) {
+                            this.calendars[0].year = parseInt(year, 10);
+                            this.adjustCalendars();
+                        }
+                    },
+
+                    /**
+                     * change the minDate
+                     */
+                    setMinDate: function (value) {
+                        if (value instanceof Date) {
+                            setToStartOfDay(value);
+                            this._o.minDate = value;
+                            this._o.minYear = value.getFullYear();
+                            this._o.minMonth = value.getMonth();
+                        } else {
+                            this._o.minDate = defaults.minDate;
+                            this._o.minYear = defaults.minYear;
+                            this._o.minMonth = defaults.minMonth;
+                            this._o.startRange = defaults.startRange;
+                        }
+
+                        this.draw();
+                    },
+
+                    /**
+                     * change the maxDate
+                     */
+                    setMaxDate: function (value) {
+                        if (value instanceof Date) {
+                            setToStartOfDay(value);
+                            this._o.maxDate = value;
+                            this._o.maxYear = value.getFullYear();
+                            this._o.maxMonth = value.getMonth();
+                        } else {
+                            this._o.maxDate = defaults.maxDate;
+                            this._o.maxYear = defaults.maxYear;
+                            this._o.maxMonth = defaults.maxMonth;
+                            this._o.endRange = defaults.endRange;
+                        }
+
+                        this.draw();
+                    },
+
+                    setStartRange: function (value) {
+                        this._o.startRange = value;
+                    },
+
+                    setEndRange: function (value) {
+                        this._o.endRange = value;
+                    },
+
+                    /**
+                     * refresh the HTML
+                     */
+                    draw: function (force) {
+                        if (!this._v && !force) {
+                            return;
+                        }
+                        var opts = this._o,
+                            minYear = opts.minYear,
+                            maxYear = opts.maxYear,
+                            minMonth = opts.minMonth,
+                            maxMonth = opts.maxMonth,
+                            html = '',
+                            randId;
+
+                        if (this._y <= minYear) {
+                            this._y = minYear;
+                            if (!isNaN(minMonth) && this._m < minMonth) {
+                                this._m = minMonth;
+                            }
+                        }
+                        if (this._y >= maxYear) {
+                            this._y = maxYear;
+                            if (!isNaN(maxMonth) && this._m > maxMonth) {
+                                this._m = maxMonth;
+                            }
+                        }
+
+                        for (var c = 0; c < opts.numberOfMonths; c++) {
+                            randId = 'pika-title-' + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 2);
+                            html += '<div class="pika-lendar">' + renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId) + '</div>';
+                        }
+
+                        this.el.innerHTML = html;
+
+                        if (opts.bound) {
+                            if (opts.field.type !== 'hidden') {
+                                sto(function () {
+                                    opts.trigger.focus();
+                                }, 1);
+                            }
+                        }
+
+                        if (typeof this._o.onDraw === 'function') {
+                            this._o.onDraw(this);
+                        }
+
+                        if (opts.bound) {
+                            // let the screen reader user know to use arrow keys
+                            opts.field.setAttribute('aria-label', 'Use the arrow keys to pick a date');
+                        }
+                    },
+
+                    adjustPosition: function () {
+                        var field, pEl, width, height, viewportWidth, viewportHeight, scrollTop, left, top, clientRect;
+
+                        if (this._o.container) return;
+
+                        this.el.style.position = 'absolute';
+
+                        field = this._o.trigger;
+                        pEl = field;
+                        width = this.el.offsetWidth;
+                        height = this.el.offsetHeight;
+                        viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+                        viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+                        scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+
+                        if (typeof field.getBoundingClientRect === 'function') {
+                            clientRect = field.getBoundingClientRect();
+                            left = clientRect.left + window.pageXOffset;
+                            top = clientRect.bottom + window.pageYOffset;
+                        } else {
+                            left = pEl.offsetLeft;
+                            top = pEl.offsetTop + pEl.offsetHeight;
+                            while ((pEl = pEl.offsetParent)) {
+                                left += pEl.offsetLeft;
+                                top += pEl.offsetTop;
+                            }
+                        }
+
+                        // default position is bottom & left
+                        if ((this._o.reposition && left + width > viewportWidth) ||
+                            (
+                                this._o.position.indexOf('right') > -1 &&
+                                left - width + field.offsetWidth > 0
+                            )
+                        ) {
+                            left = left - width + field.offsetWidth;
+                        }
+                        if ((this._o.reposition && top + height > viewportHeight + scrollTop) ||
+                            (
+                                this._o.position.indexOf('top') > -1 &&
+                                top - height - field.offsetHeight > 0
+                            )
+                        ) {
+                            top = top - height - field.offsetHeight;
+                        }
+
+                        this.el.style.left = left + 'px';
+                        this.el.style.top = top + 'px';
+                    },
+
+                    /**
+                     * render HTML for a particular month
+                     */
+                    render: function (year, month, randId) {
+                        var opts = this._o,
+                            now = new Date(),
+                            days = getDaysInMonth(year, month),
+                            before = new Date(year, month, 1).getDay(),
+                            data = [],
+                            row = [];
+                        setToStartOfDay(now);
+                        if (opts.firstDay > 0) {
+                            before -= opts.firstDay;
+                            if (before < 0) {
+                                before += 7;
+                            }
+                        }
+                        var previousMonth = month === 0 ? 11 : month - 1,
+                            nextMonth = month === 11 ? 0 : month + 1,
+                            yearOfPreviousMonth = month === 0 ? year - 1 : year,
+                            yearOfNextMonth = month === 11 ? year + 1 : year,
+                            daysInPreviousMonth = getDaysInMonth(yearOfPreviousMonth, previousMonth);
+                        var cells = days + before,
+                            after = cells;
+                        while (after > 7) {
+                            after -= 7;
+                        }
+                        cells += 7 - after;
+                        var isWeekSelected = false;
+                        for (var i = 0, r = 0; i < cells; i++) {
+                            var day = new Date(year, month, 1 + (i - before)),
+                                isSelected = isDate(this._d) ? compareDates(day, this._d) : false,
+                                isToday = compareDates(day, now),
+                                hasEvent = opts.events.indexOf(day.toDateString()) !== -1 ? true : false,
+                                isEmpty = i < before || i >= (days + before),
+                                dayNumber = 1 + (i - before),
+                                monthNumber = month,
+                                yearNumber = year,
+                                isStartRange = opts.startRange && compareDates(opts.startRange, day),
+                                isEndRange = opts.endRange && compareDates(opts.endRange, day),
+                                isInRange = opts.startRange && opts.endRange && opts.startRange < day && day < opts.endRange,
+                                isDisabled = (opts.minDate && day < opts.minDate) ||
+                                    (opts.maxDate && day > opts.maxDate) ||
+                                    (opts.disableWeekends && isWeekend(day)) ||
+                                    (opts.disableDayFn && opts.disableDayFn(day));
+
+                            if (isEmpty) {
+                                if (i < before) {
+                                    dayNumber = daysInPreviousMonth + dayNumber;
+                                    monthNumber = previousMonth;
+                                    yearNumber = yearOfPreviousMonth;
+                                } else {
+                                    dayNumber = dayNumber - days;
+                                    monthNumber = nextMonth;
+                                    yearNumber = yearOfNextMonth;
+                                }
+                            }
+
+                            var dayConfig = {
+                                day: dayNumber,
+                                month: monthNumber,
+                                year: yearNumber,
+                                hasEvent: hasEvent,
+                                isSelected: isSelected,
+                                isToday: isToday,
+                                isDisabled: isDisabled,
+                                isEmpty: isEmpty,
+                                isStartRange: isStartRange,
+                                isEndRange: isEndRange,
+                                isInRange: isInRange,
+                                showDaysInNextAndPreviousMonths: opts.showDaysInNextAndPreviousMonths,
+                                enableSelectionDaysInNextAndPreviousMonths: opts.enableSelectionDaysInNextAndPreviousMonths
+                            };
+
+                            if (opts.pickWholeWeek && isSelected) {
+                                isWeekSelected = true;
+                            }
+
+                            row.push(renderDay(dayConfig));
+
+                            if (++r === 7) {
+                                if (opts.showWeekNumber) {
+                                    row.unshift(renderWeek(i - before, month, year));
+                                }
+                                data.push(renderRow(row, opts.isRTL, opts.pickWholeWeek, isWeekSelected));
+                                row = [];
+                                r = 0;
+                                isWeekSelected = false;
+                            }
+                        }
+                        return renderTable(opts, data, randId);
+                    },
+
+                    isVisible: function () {
+                        return this._v;
+                    },
+
+                    show: function () {
+                        if (!this.isVisible()) {
+                            this._v = true;
+                            this.draw();
+                            removeClass(this.el, 'is-hidden');
+                            if (this._o.bound) {
+                                addEvent(document, 'click', this._onClick);
+                                this.adjustPosition();
+                            }
+                            if (typeof this._o.onOpen === 'function') {
+                                this._o.onOpen.call(this);
+                            }
+                        }
+                    },
+
+                    hide: function () {
+                        var v = this._v;
+                        if (v !== false) {
+                            if (this._o.bound) {
+                                removeEvent(document, 'click', this._onClick);
+                            }
+                            this.el.style.position = 'static'; // reset
+                            this.el.style.left = 'auto';
+                            this.el.style.top = 'auto';
+                            addClass(this.el, 'is-hidden');
+                            this._v = false;
+                            if (v !== undefined && typeof this._o.onClose === 'function') {
+                                this._o.onClose.call(this);
+                            }
+                        }
+                    },
+
+                    /**
+                     * GAME OVER
+                     */
+                    destroy: function () {
+                        var opts = this._o;
+
+                        this.hide();
+                        removeEvent(this.el, 'mousedown', this._onMouseDown, true);
+                        removeEvent(this.el, 'touchend', this._onMouseDown, true);
+                        removeEvent(this.el, 'change', this._onChange);
+                        if (opts.keyboardInput) {
+                            removeEvent(document, 'keydown', this._onKeyChange);
+                        }
+                        if (opts.field) {
+                            removeEvent(opts.field, 'change', this._onInputChange);
+                            if (opts.bound) {
+                                removeEvent(opts.trigger, 'click', this._onInputClick);
+                                removeEvent(opts.trigger, 'focus', this._onInputFocus);
+                                removeEvent(opts.trigger, 'blur', this._onInputBlur);
+                            }
+                        }
+                        if (this.el.parentNode) {
+                            this.el.parentNode.removeChild(this.el);
+                        }
+                    }
+
+                };
+
+                return Pikaday;
+            }));
+
 declare class SingleDateTimePicker extends ChartComponent {
     private calendar;
     private calendarPicker;
@@ -1177,12 +2406,16 @@ declare class DateTimeButton extends ChartComponent {
     constructor(renderTarget: Element);
     protected buttonDateTimeFormat(millis: any): string;
     render(chartOptions: any, minMillis: any, maxMillis: any, onSet?: any): void;
+    private getTimezoneFromOffset;
 }
 
 declare class DateTimeButtonSingle extends DateTimeButton {
     private selectedMillis;
+    private clickOutsideHandler;
     constructor(renderTarget: Element);
     private closeSDTP;
+    private removeClickOutsideHandler;
+    private setupClickOutsideHandler;
     private sDTPOnSet;
     render(chartOptions: any, minMillis: number, maxMillis: number, selectedMillis?: number, onSet?: any): void;
 }
@@ -1191,9 +2424,12 @@ declare class DateTimeButtonRange extends DateTimeButton {
     private onCancel;
     private fromMillis;
     private toMillis;
+    private clickOutsideHandler;
     constructor(renderTarget: Element);
     private setButtonText;
     private onClose;
+    private removeClickOutsideHandler;
+    private setupClickOutsideHandler;
     render(chartOptions: any, minMillis: number, maxMillis: number, fromMillis?: number, toMillis?: number, onSet?: any, onCancel?: any): void;
 }
 
@@ -1201,7 +2437,15 @@ interface IPlaybackSettings {
     intervalMillis: number;
     stepSizeMillis: number;
 }
+interface IPlaybackOptions {
+    theme?: string;
+    offset?: string;
+    is24HourTime?: boolean;
+    dateLocale?: string;
+    xAxisHidden?: boolean;
+}
 declare class PlaybackControls extends Component {
+    private static readonly CONSTANTS;
     private playbackInterval;
     private playButton;
     private handleElement;
@@ -1217,14 +2461,19 @@ declare class PlaybackControls extends Component {
     private playbackSettings;
     private end;
     private wasPlayingWhenDragStarted;
+    private rafId;
     readonly handleRadius: number;
     readonly minimumPlaybackInterval: number;
     constructor(renderTarget: Element, initialTimeStamp?: Date);
     get currentTimeStamp(): Date;
-    render(start: Date, end: Date, onSelectTimeStamp: (d: Date) => {}, options: any, playbackSettings: IPlaybackSettings): void;
+    render(start: Date, end: Date, onSelectTimeStamp: (timestamp: Date) => void, options: IPlaybackOptions, playbackSettings: IPlaybackSettings): void;
     play(): void;
     pause(): void;
     next(): void;
+    /**
+     * Cleanup resources to prevent memory leaks
+     */
+    destroy(): void;
     private clamp;
     private onDrag;
     private onDragEnd;