@hpcc-js/timeline 2.56.0 → 2.57.0

package/dist/index.es6.js

@@ -0,0 +1,1625 @@
+import { ITooltip } from '@hpcc-js/api';
+import { Axis } from '@hpcc-js/chart';
+import { Utility, local, scaleBand, extent, timeParse, timeFormat, zoomIdentity, d3Event, zoom, select, EntityPin, EntityRect, SVGWidget, scaleLinear, SVGZoomWidget, min, max } from '@hpcc-js/common';
+import { HTMLTooltip } from '@hpcc-js/html';
+import { LabelledRect, render } from '@hpcc-js/react';
+import { Border2 } from '@hpcc-js/layout';
+
+var PKG_NAME = "@hpcc-js/timeline";
+var PKG_VERSION = "2.57.0";
+var BUILD_VERSION = "2.108.6";
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+var extendStatics = function(d, b) {
+  extendStatics = Object.setPrototypeOf ||
+      ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+      function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+  return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+  if (typeof b !== "function" && b !== null)
+      throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+  extendStatics(d, b);
+  function __() { this.constructor = d; }
+  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+  __assign = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+      return t;
+  };
+  return __assign.apply(this, arguments);
+};
+
+function __spreadArray(to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+      if (ar || !(i in from)) {
+          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+          ar[i] = from[i];
+      }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".timeline_MiniGantt .line{fill:none;stroke:#d3d3d3;opacity:.7}.timeline_MiniGantt .common_TextBox .rect{fill:#87cefa;stroke:blue;opacity:.5}.timeline_MiniGantt .buckets .entity_shape rect{stroke:#333}.timeline_MiniGantt .buckets.selected .common_EntityRect .common_Shape>rect{stroke:red}.timeline_MiniGantt .common_TextBox .rect text{fill:#000;stroke:none}.timeline_MiniGantt .over{stroke:transparent;opacity:.8}.timeline_MiniGantt rect{shape-rendering:crispEdges}";
+styleInject(css_248z);
+
+var MiniGantt = /** @class */ (function (_super) {
+    __extends(MiniGantt, _super);
+    function MiniGantt() {
+        var _this = _super.call(this) || this;
+        _this.localRect = local();
+        _this.localEntityPin = local();
+        _this._title_idx = 0;
+        _this._startDate_idx = 1;
+        _this._endDate_idx = 2;
+        _this._icon_idx = -1;
+        _this._color_idx = -1;
+        _this._yoffset_idx = -1;
+        ITooltip.call(_this);
+        Utility.SimpleSelectionMixin.call(_this);
+        _this._drawStartPos = "origin";
+        _this.tooltipHTML(function (d) { return "<center>".concat(d[_this._title_idx], "</center><br>").concat(_this.tooltipFormatter(_this.brAxis.parse(d[_this._startDate_idx])), " -> ").concat(_this.tooltipFormatter(_this.brAxis.parse(d[_this._endDate_idx]))); });
+        _this.tlAxis = new Axis()
+            .type("time");
+        _this.brAxis = new Axis()
+            .type("time");
+        _this.verticalBands = scaleBand()
+            .paddingOuter(0.2)
+            .paddingInner(0.2);
+        return _this;
+    }
+    MiniGantt.prototype.isHorizontal = function () {
+        return this.orientation() === "horizontal";
+    };
+    MiniGantt.prototype.fullExtent = function () {
+        var _this = this;
+        var data = __spreadArray(__spreadArray([], this.data().map(function (d) { return d[_this._startDate_idx]; }), true), this.data().filter(function (d) { return !!d[_this._endDate_idx]; }).map(function (d) { return d[_this._endDate_idx]; }), true);
+        return extent(data);
+    };
+    MiniGantt.prototype.extent = function () {
+        var extent = this.rootExtent ? [this.rootExtent[1], this.rootExtent[2]] : this.fullExtent();
+        if (extent[0] !== undefined && extent[1] !== undefined) {
+            if (extent[0] === extent[1] || this.centerOnMostRecent()) {
+                var parser = timeParse(this.timePattern());
+                var formatter = timeFormat(this.timePattern());
+                var date1 = parser(extent[0]);
+                var date2 = parser(extent[1]);
+                if (extent[0] === extent[1]) {
+                    extent[0] = formatter(new Date(date1.setFullYear(date1.getFullYear() - 1)));
+                    extent[1] = formatter(new Date(date1.setFullYear(date1.getFullYear() + 2)));
+                }
+                else {
+                    var time1 = date1.getTime();
+                    var timeDiff = date2.getTime() - time1;
+                    extent[0] = formatter(date1);
+                    extent[1] = formatter(new Date(time1 + (timeDiff * 2)));
+                }
+            }
+        }
+        return extent;
+    };
+    MiniGantt.prototype.dataStartPos = function (d) {
+        if (typeof this._dateCache[d[this._startDate_idx]] !== "undefined") {
+            return this._dateCache[d[this._startDate_idx]];
+        }
+        var pos = this.brAxis.scalePos(d[this._startDate_idx]);
+        this._dateCache[d[this._startDate_idx]] = pos;
+        return pos;
+    };
+    MiniGantt.prototype.dataEndPos = function (d) {
+        if (typeof this._dateCache[d[this._endDate_idx]] !== "undefined") {
+            return this._dateCache[d[this._endDate_idx]];
+        }
+        var pos = this.brAxis.scalePos(d[this._endDate_idx]);
+        this._dateCache[d[this._endDate_idx]] = pos;
+        return pos;
+    };
+    MiniGantt.prototype.dataWidth = function (d) {
+        return this.dataEndPos(d) - this.dataStartPos(d);
+    };
+    MiniGantt.prototype.resetZoom = function () {
+        //  Triggers a "zoomed" event ---
+        this._zoom.transform(this.element(), zoomIdentity.translate(0, this.isHorizontal() ? 0 : this.height()));
+    };
+    MiniGantt.prototype.zoomed = function () {
+        this.transform = d3Event().transform;
+        this.render();
+    };
+    MiniGantt.prototype.enter = function (domNode, element) {
+        var _this = this;
+        _super.prototype.enter.call(this, domNode, element);
+        this._zoom = zoom()
+            .scaleExtent([0, this.maxZoom()])
+            .on("zoom", function () {
+            _this.zoomed();
+        });
+        this.background = element.append("rect")
+            .attr("fill", "white")
+            .attr("opacity", 0)
+            .on("dblclick", function () {
+            d3Event().stopPropagation();
+            delete _this.rootExtent;
+            _this.resetZoom();
+        });
+        this.gUpperContent = element.append("g").attr("class", "gUpperContent");
+        this.gUpperAxis = element.append("g").attr("class", "gUpperAxis");
+        this.gMiddleContent = element.append("g").attr("class", "gMiddleContent");
+        this.gLowerAxis = element.append("g").attr("class", "gLowerAxis");
+        this.gLowerContent = element.append("g").attr("class", "gLowerContent");
+        this.tlAxis
+            .target(this.gUpperAxis.node())
+            .tickFormat(this.tickFormat())
+            .guideTarget(this.gUpperAxis.append("g").node())
+            .shrinkToFit("none")
+            .overlapMode(this.tickFormat_exists() ? "stagger" : "none")
+            .extend(0.1);
+        this.brAxis
+            .target(this.gLowerAxis.node())
+            .tickFormat(this.tickFormat())
+            .guideTarget(this.gLowerAxis.append("g").node())
+            .shrinkToFit("none")
+            .overlapMode(this.tickFormat_exists() ? "stagger" : "none")
+            .extend(0.1);
+        element.call(this._zoom);
+        this._selection.widgetElement(this.gMiddleContent);
+    };
+    MiniGantt.prototype.update = function (domNode, element) {
+        var _this = this;
+        _super.prototype.update.call(this, domNode, element);
+        this._dateCache = {};
+        this._title_idx = this.titleColumn() !== null ? this.columns().indexOf(this.titleColumn()) : this._title_idx;
+        this._startDate_idx = this.startDateColumn() !== null ? this.columns().indexOf(this.startDateColumn()) : this._startDate_idx;
+        this._endDate_idx = this.endDateColumn() !== null ? this.columns().indexOf(this.endDateColumn()) : this._endDate_idx;
+        this._icon_idx = this.iconColumn() !== null ? this.columns().indexOf(this.iconColumn()) : this._icon_idx;
+        this._color_idx = this.colorColumn() !== null ? this.columns().indexOf(this.colorColumn()) : this._color_idx;
+        this._yoffset_idx = this.yOffsetColumn() !== null ? this.columns().indexOf(this.yOffsetColumn()) : this._yoffset_idx;
+        if (this._prevIsHorizontal !== this.isHorizontal()) {
+            this._prevIsHorizontal = this.isHorizontal();
+            this.resetZoom();
+            return;
+        }
+        this.tooltipFormatter = timeFormat(this.tooltipTimeFormat());
+        var width = this.width();
+        var height = this.height();
+        this.background
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", width)
+            .attr("height", height);
+        var extent = this.extent();
+        this.tlAxis
+            .x(width / 2)
+            .orientation(this.isHorizontal() ? "top" : "left")
+            .reverse(!this.isHorizontal())
+            .timePattern(this.timePattern()) //  "%Y-%m-%dT%H:%M:%S.%LZ"
+            .width(width - 1)
+            .low(extent[0])
+            .high(extent[1])
+            .updateScale();
+        this.brAxis
+            .x(width / 2)
+            .y(height / 2)
+            .orientation(this.isHorizontal() ? "bottom" : "right")
+            .reverse(!this.isHorizontal())
+            .timePattern(this.timePattern()) //  "%Y-%m-%dT%H:%M:%S.%LZ"
+            .width(width - 1)
+            .height(height)
+            .low(extent[0])
+            .high(extent[1])
+            .updateScale();
+        if (this.transform) {
+            var low = void 0;
+            var hi = void 0;
+            if (this.isHorizontal()) {
+                low = this.tlAxis.parseInvert(this.tlAxis.invert(this.transform.invertX(0)));
+                hi = this.tlAxis.parseInvert(this.tlAxis.invert(this.transform.invertX(width - 1)));
+            }
+            else {
+                low = this.tlAxis.parseInvert(this.tlAxis.invert(-this.transform.invertY(0)));
+                hi = this.tlAxis.parseInvert(this.tlAxis.invert(-this.transform.invertY(height - 1)));
+            }
+            this.tlAxis
+                .low(low)
+                .high(hi)
+                .updateScale();
+            this.brAxis
+                .low(low)
+                .high(hi)
+                .updateScale();
+        }
+        var data = this.data().sort(this.isHorizontal() ? function (l, r) {
+            var retVal = _this.brAxis.scalePos(l[1]) - _this.brAxis.scalePos(r[1]);
+            if (retVal === 0) {
+                return ("" + l[0]).localeCompare("" + r[0]);
+            }
+            return retVal;
+        } : function (l, r) {
+            return _this.brAxis.scalePos(r[1]) - _this.brAxis.scalePos(l[1]);
+        });
+        var events = data.filter(function (d) { return !d[_this._endDate_idx]; });
+        var ranges = data.filter(function (d) { return !!d[_this._endDate_idx]; });
+        this.tlAxis
+            .render();
+        this.brAxis
+            .render();
+        var brAxisBBox = this.brAxis.getBBox();
+        var upperContentHeight = this.updateEntityPins(events);
+        var lowerAxisHeight = brAxisBBox.height;
+        var lowerHeight = height - upperContentHeight;
+        var minYOffset = this._yoffset_idx !== -1 ? Math.min.apply(undefined, this.data().filter(function (row) { return !isNaN(row[_this._yoffset_idx]); }).map(function (row) { return row[_this._yoffset_idx]; })) : 0;
+        if (events.length > 0 && ranges.length === 0) {
+            // ONLY EVENTS
+            this.tlAxis.visible(false);
+            var y_offset = upperContentHeight / 4;
+            if (y_offset > (height / 2) - lowerAxisHeight) {
+                y_offset = (height / 2) - lowerAxisHeight;
+            }
+            var upperContentYOffset = (height / 2) + y_offset;
+            var lowerAxisYOffset = ((height / 2) - lowerAxisHeight - y_offset) * -1;
+            var halfMinYOffset = minYOffset !== 0 ? minYOffset / 2 : 0;
+            this.gUpperContent.attr("transform", "translate(0, ".concat(upperContentYOffset - halfMinYOffset, ")"));
+            this.gLowerAxis.attr("transform", "translate(0, ".concat(lowerAxisYOffset - halfMinYOffset, ")"));
+        }
+        else if (events.length === 0 && ranges.length > 0) {
+            // ONLY RANGES
+            this.tlAxis.visible(true);
+            this.gUpperContent.attr("transform", "translate(0, ".concat(upperContentHeight, ")"));
+            this.gUpperAxis.attr("transform", "translate(0, ".concat(upperContentHeight, ")"));
+        }
+        else {
+            upperContentHeight -= minYOffset;
+            lowerHeight += minYOffset;
+            // BOTH
+            this.tlAxis.visible(true);
+            this.gUpperContent.attr("transform", "translate(0, ".concat(upperContentHeight, ")"));
+            this.gUpperAxis.attr("transform", "translate(0, ".concat(upperContentHeight, ")"));
+            this.gMiddleContent.attr("transform", "translate(0, ".concat(upperContentHeight, ")"));
+        }
+        this.tlAxis
+            .render();
+        var tlAxisBBox = this.tlAxis.getBBox();
+        var bucketData = [];
+        var bucketIndex = {};
+        for (var _i = 0, ranges_1 = ranges; _i < ranges_1.length; _i++) {
+            var range = ranges_1[_i];
+            for (var i = 0; i < bucketData.length; ++i) {
+                var bucket = bucketData[i];
+                if (bucket.endPos + this.overlapTolerence() <= this.dataStartPos(range)) {
+                    bucketIndex[range] = i;
+                    bucket.endPos = this.dataEndPos(range);
+                    break;
+                }
+            }
+            if (bucketIndex[range] === undefined) {
+                bucketIndex[range] = bucketData.length;
+                bucketData.push({
+                    endPos: this.dataEndPos(range)
+                });
+            }
+        }
+        var vbLower = this.isHorizontal() ? 0 + tlAxisBBox.height : 0 + tlAxisBBox.width;
+        var vbHigher = this.isHorizontal() ? lowerHeight - brAxisBBox.height : width - brAxisBBox.width;
+        this.verticalBands
+            .range([vbLower, vbHigher])
+            .domain(bucketData.map(function (_d, i) { return i; }));
+        if (ranges.length > 0) {
+            this.updateEventRanges(events, ranges, bucketIndex, lowerHeight, tlAxisBBox, brAxisBBox, width);
+        }
+    };
+    MiniGantt.prototype.updateEntityPins = function (events) {
+        var event_height = 0;
+        var context = this;
+        var entityPins = this.gUpperContent.selectAll(".entity_pin").data(events, function (d) { return d[0] + ":" + d[1]; });
+        var eventFontColor_idx = this.eventFontColorColumn() ? this.columns().indexOf(this.eventFontColorColumn()) : -1;
+        var eventBorderColor_idx = this.eventBorderColorColumn() ? this.columns().indexOf(this.eventBorderColorColumn()) : -1;
+        var eventBackgroundColor_idx = this.eventBackgroundColorColumn() ? this.columns().indexOf(this.eventBackgroundColorColumn()) : -1;
+        var title_counts = {};
+        for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {
+            var d = events_1[_i];
+            var type = typeof d[context._title_idx] !== "undefined" ? d[context._title_idx] : d[0];
+            title_counts[type] = title_counts[type] ? title_counts[type] + 1 : 1;
+        }
+        var title_types = Object.keys(title_counts);
+        var title_group_offset = context.eventGroupOffset();
+        var entityPinsEnter = entityPins.enter().append("g")
+            .attr("class", "entity_pin");
+        entityPinsEnter.append("line")
+            .attr("class", "entity_line");
+        entityPinsEnter
+            .on("mouseover", function (d) {
+            select(this).raise();
+        })
+            .each(function (d, i) {
+            var entityPin = new EntityPin()
+                .target(this)
+                .icon("")
+                .iconOnlyShowOnHover(context.hideIconWhenCollapsed())
+                .titleOnlyShowOnHover(context.hideTitleWhenCollapsed())
+                .descriptionOnlyShowOnHover(context.hideDescriptionWhenCollapsed())
+                .annotationOnlyShowOnHover(context.hideAnnotationsWhenCollapsed())
+                .iconDiameter(18)
+                .iconPaddingPercent(1)
+                .titleFontSize(14)
+                .descriptionColor("#333")
+                .descriptionFontSize(15)
+                .iconColor(eventFontColor_idx === -1 ? "#333" : d[eventFontColor_idx])
+                .titleColor(eventFontColor_idx === -1 ? "#333" : d[eventFontColor_idx])
+                .descriptionColor(eventFontColor_idx === -1 ? "#333" : d[eventFontColor_idx])
+                .backgroundShape("pin")
+                .backgroundColorFill(eventFontColor_idx === -1 ? "#f8f8f8" : d[eventBackgroundColor_idx])
+                .backgroundColorStroke(eventFontColor_idx === -1 ? "#ccc" : d[eventBorderColor_idx])
+                .cornerRadius(5)
+                .arrowHeight(10)
+                .arrowWidth(16);
+            context.localEntityPin.set(this, entityPin);
+        })
+            .merge(entityPins)
+            .each(function (d, i) {
+            var entityPin = context.localEntityPin.get(this);
+            var _title = typeof d[context._title_idx] !== "undefined" ? d[context._title_idx] : entityPin.title();
+            var x_offset = context.dataStartPos(d) - 0;
+            var y_offset = ((title_types.indexOf(_title) % context.eventGroupMod()) * title_group_offset) - 5;
+            if (typeof d[context._yoffset_idx] !== "undefined")
+                y_offset += d[context._yoffset_idx] ? d[context._yoffset_idx] : 0;
+            if (d[context._title_idx] !== entityPin.title() && d[context._startDate_idx] !== entityPin.description()) {
+                var parsed_start_time = context.brAxis.parse(d[context._startDate_idx]);
+                var formatted_start_time = context.tooltipFormatter(parsed_start_time);
+                entityPin
+                    .x(x_offset)
+                    .y(y_offset)
+                    .iconOnlyShowOnHover(context.hideIconWhenCollapsed())
+                    .titleOnlyShowOnHover(context.hideTitleWhenCollapsed())
+                    .descriptionOnlyShowOnHover(context.hideDescriptionWhenCollapsed())
+                    .annotationOnlyShowOnHover(context.hideAnnotationsWhenCollapsed())
+                    .icon(typeof d[context._icon_idx] !== "undefined" ? d[context._icon_idx] : entityPin.icon())
+                    .title(_title)
+                    .description(formatted_start_time)
+                    .animationFrameRender();
+            }
+            else {
+                entityPin.move({ x: x_offset, y: y_offset });
+            }
+            var calc_height = entityPin.calcHeight();
+            if (event_height < calc_height)
+                event_height = calc_height;
+            select(this).selectAll(".entity_line")
+                .attr("x1", x_offset)
+                .attr("x2", x_offset)
+                .attr("y1", 0)
+                .attr("y2", y_offset)
+                .style("stroke", eventFontColor_idx === -1 ? "#ccc" : d[eventBorderColor_idx])
+                .style("stroke-width", 1);
+        });
+        entityPins.exit()
+            .each(function (d, i) {
+            var entityPin = context.localEntityPin.get(this);
+            entityPin.target(null);
+        })
+            .remove();
+        var event_offset = Math.abs(Math.min(events.length, context.eventGroupMod()) * context.eventGroupOffset());
+        return event_height + event_offset;
+    };
+    MiniGantt.prototype.updateEventRanges = function (events, ranges, bucketIndex, eventRangeHeight, tlAxisBBox, brAxisBBox, width) {
+        var _this = this;
+        var context = this;
+        var lines = this.gMiddleContent.selectAll(".line").data(events, function (d) {
+            return d[context._title_idx];
+        });
+        lines.enter().append("line")
+            .attr("class", "line")
+            .merge(lines)
+            .attr(this.isHorizontal() ? "x1" : "y1", function (d) { return _this.dataStartPos(d) - 0; })
+            .attr(this.isHorizontal() ? "x2" : "y2", function (d) { return _this.dataStartPos(d) - 0; })
+            .attr(this.isHorizontal() ? "y1" : "x1", this.isHorizontal() ? tlAxisBBox.height : tlAxisBBox.width)
+            .attr(this.isHorizontal() ? "y2" : "x2", this.isHorizontal() ? eventRangeHeight - brAxisBBox.height : width - brAxisBBox.width);
+        lines.exit().remove();
+        var buckets = this.gMiddleContent.selectAll(".buckets").data(ranges, function (d) { return d[context._title_idx]; });
+        buckets.enter().append("g")
+            .attr("class", "buckets")
+            .call(this._selection.enter.bind(this._selection))
+            .each(function (d) {
+            var entityRect = new EntityRect()
+                .target(this)
+                .iconDiameter(28)
+                .iconPaddingPercent(0)
+                .titleFontSize(28)
+                .titleColor(context.rangeFontColor())
+                .descriptionColor(context.rangeFontColor())
+                .iconColor(context.rangeFontColor())
+                .backgroundShape("rect")
+                .backgroundColorFill(d[context._color_idx]);
+            context.localRect.set(this, entityRect);
+            context.enterEntityRect(entityRect, d);
+        })
+            .on("click", function (d) {
+            context.click(context.rowToObj(d), "range", context._selection.selected(this));
+        }, false)
+            .on("dblclick", function (d) {
+            context.rootExtent = d;
+            context.resetZoom();
+            context.dblclick(context.rowToObj(d), "range", context._selection.selected(this));
+        }, true)
+            .on("mouseout.tooltip", this.tooltip.hide)
+            .on("mousemove.tooltip", this.tooltip.show)
+            .merge(buckets)
+            .attr("transform", function (d) { return context.isHorizontal() ?
+            "translate(".concat(_this.dataStartPos(d), ", ").concat(_this.verticalBands(bucketIndex[d]), ") ") :
+            "translate(".concat(_this.verticalBands(bucketIndex[d]), ", ").concat(_this.dataStartPos(d), ") "); })
+            .each(function (d) {
+            var textBox = context.localRect.get(this);
+            var x = context.dataWidth(d) / 2;
+            var y = context.verticalBands.bandwidth() / 2;
+            var rectWidth = Math.max(context.dataWidth(d), 2);
+            var rectHeight = Math.max(context.verticalBands.bandwidth(), 2);
+            var fontHeightRatio = 0.618;
+            var paddingRatio = ((1 - fontHeightRatio) / 2);
+            var paddingSize = paddingRatio * rectHeight;
+            var fontSize = rectHeight * fontHeightRatio;
+            var iconSize = fontSize;
+            textBox
+                .pos(context.isHorizontal() ? { x: x, y: y } : { x: y, y: x })
+                .fixedHeight(context.isHorizontal() ? rectHeight : rectWidth)
+                .fixedWidth(context.isHorizontal() ? rectWidth : rectHeight)
+                .icon(typeof d[context._icon_idx] !== "undefined" ? d[context._icon_idx] : "")
+                .title(typeof d[context._title_idx] !== "undefined" ? d[context._title_idx] : "")
+                .padding(paddingSize)
+                .iconDiameter(iconSize)
+                .titleFontSize(fontSize);
+            if (iconSize * 1.5 > rectWidth) {
+                textBox.icon(null);
+            }
+            context.updateEntityRect(textBox, d[context._icon_idx]);
+            textBox
+                .render();
+        });
+        buckets.exit().remove();
+    };
+    MiniGantt.prototype.exit = function (domNode, element) {
+        this.brAxis.target(null);
+        this.tlAxis.target(null);
+        _super.prototype.exit.call(this, domNode, element);
+    };
+    //  Events  ---
+    MiniGantt.prototype.click = function (row, col, sel) {
+    };
+    MiniGantt.prototype.dblclick = function (row, col, sel) {
+    };
+    MiniGantt.prototype.enterEntityRect = function (textbox, d) {
+    };
+    MiniGantt.prototype.updateEntityRect = function (textbox, d) {
+    };
+    return MiniGantt;
+}(SVGWidget));
+MiniGantt.prototype._class += " timeline_MiniGantt";
+MiniGantt.prototype.implements(ITooltip.prototype);
+MiniGantt.prototype.mixin(Utility.SimpleSelectionMixin);
+MiniGantt.prototype.publish("timePattern", "%Y-%m-%d", "string", "timePattern");
+MiniGantt.prototype.publish("tickFormat", null, "string", "tickFormat", undefined, { optional: true });
+MiniGantt.prototype.publish("tooltipTimeFormat", "%Y-%m-%d", "string", "tooltipTimeFormat");
+MiniGantt.prototype.publish("overlapTolerence", 2, "number", "overlapTolerence");
+MiniGantt.prototype.publish("orientation", "horizontal", "set", "orientation", ["horizontal", "vertical"]);
+MiniGantt.prototype.publish("rangeFontColor", "#ecf0f1", "html-color", "rangeFontColor");
+MiniGantt.prototype.publish("titleColumn", null, "string", "titleColumn");
+MiniGantt.prototype.publish("startDateColumn", null, "string", "startDateColumn");
+MiniGantt.prototype.publish("endDateColumn", null, "string", "endDateColumn");
+MiniGantt.prototype.publish("iconColumn", null, "string", "iconColumn");
+MiniGantt.prototype.publish("colorColumn", null, "string", "colorColumn");
+MiniGantt.prototype.publish("yOffsetColumn", null, "string", "yOffsetColumn");
+MiniGantt.prototype.publish("maxZoom", 16, "number", "maxZoom");
+MiniGantt.prototype.publish("eventGroupOffset", -50, "number", "eventGroupOffset");
+MiniGantt.prototype.publish("eventGroupMod", 5, "number", "eventGroupMod");
+MiniGantt.prototype.publish("eventFontColorColumn", null, "string", "eventFontColorColumn");
+MiniGantt.prototype.publish("eventBorderColorColumn", null, "string", "eventBorderColorColumn");
+MiniGantt.prototype.publish("eventBackgroundColorColumn", null, "string", "eventBackgroundColorColumn");
+MiniGantt.prototype.publish("hideIconWhenCollapsed", false, "boolean", "hideIconWhenCollapsed");
+MiniGantt.prototype.publish("hideTitleWhenCollapsed", false, "boolean", "hideTitleWhenCollapsed");
+MiniGantt.prototype.publish("hideDescriptionWhenCollapsed", false, "boolean", "hideDescriptionWhenCollapsed");
+MiniGantt.prototype.publish("hideAnnotationsWhenCollapsed", true, "boolean", "hideAnnotationsWhenCollapsed");
+MiniGantt.prototype.publish("centerOnMostRecent", false, "boolean", "If true, the timeline will be centered on the most recent data point");
+
+var ReactGantt = /** @class */ (function (_super) {
+    __extends(ReactGantt, _super);
+    function ReactGantt(drawStartPosition) {
+        if (drawStartPosition === void 0) { drawStartPosition = "origin"; }
+        var _this = _super.call(this) || this;
+        _this._selection = new Utility.Selection(_this);
+        _this._title_idx = 0;
+        _this._startDate_idx = 1;
+        _this._endDate_idx = 2;
+        _this._icon_idx = -1;
+        _this._color_idx = -1;
+        _this._series_idx = -1;
+        _this._bucket_idx = -1;
+        _this._yoffset_idx = -1;
+        _this._rangeOptions = {
+            rangePadding: 2,
+            fontFamily: "Verdana",
+            fontSize: 12,
+            fill: "white",
+            stroke: "black",
+            textFill: "black",
+            cornerRadius: 3,
+            strokeWidth: 0
+        };
+        _this._rangeRenderer = LabelledRect;
+        _this._transform = { k: 1, x: 0, y: 0 };
+        _this._drawStartPos = drawStartPosition;
+        _this.showToolbar_default(false);
+        _this._tooltip = new HTMLTooltip();
+        _this._tooltip
+            .tooltipHTML(function (d) {
+            return "<div style=\"text-align:center;\">".concat(d[0], "<br/><br/>").concat(d[1], " -&gt; ").concat(d[2], "</div>");
+        });
+        _this._tooltip
+            .followCursor(true);
+        return _this;
+    }
+    ReactGantt.prototype.selection = function (_) {
+        if (!arguments.length)
+            return this._selection.get();
+        this._selection.set(_);
+        return this;
+    };
+    ReactGantt.prototype.rangeRenderer = function (_) {
+        if (!arguments.length)
+            return this._rangeRenderer;
+        this._rangeRenderer = _;
+        return this._rangeRenderer;
+    };
+    ReactGantt.prototype.enter = function (domNode, element) {
+        _super.prototype.enter.call(this, domNode, element);
+        var context = this;
+        element
+            .on("click", function (d) {
+            context._selection.clear();
+        });
+        this._tooltip.target(domNode);
+    };
+    ReactGantt.prototype.update = function (domNode, element) {
+        var _this = this;
+        _super.prototype.update.call(this, domNode, element);
+        this.zoomExtent([0.05, this.maxZoom()]);
+        this._title_idx = this.titleColumn() !== null ? this.columns().indexOf(this.titleColumn()) : this._title_idx;
+        this._startDate_idx = this.startDateColumn() !== null ? this.columns().indexOf(this.startDateColumn()) : this._startDate_idx;
+        this._endDate_idx = this.endDateColumn() !== null ? this.columns().indexOf(this.endDateColumn()) : this._endDate_idx;
+        this._icon_idx = this.iconColumn() !== null ? this.columns().indexOf(this.iconColumn()) : this._icon_idx;
+        this._color_idx = this.colorColumn() !== null ? this.columns().indexOf(this.colorColumn()) : this._color_idx;
+        this._series_idx = this.seriesColumn() !== null ? this.columns().indexOf(this.seriesColumn()) : this._series_idx;
+        this._bucket_idx = this.bucketColumn() !== null ? this.columns().indexOf(this.bucketColumn()) : -1;
+        var context = this;
+        var w = this.width();
+        var x0 = 0;
+        var x1 = w;
+        this._interpolateX = scaleLinear()
+            .domain([this._minStart, this._maxEnd])
+            .range([x0, x1]);
+        this.data().sort(function (a, b) { return a[1] - b[1]; });
+        if (this._series_idx > -1) {
+            this._origIdxMap = {};
+            this._dataBySeries = {};
+            this._bucketsBySeries = {};
+            this.data().forEach(function (dataRow, origIdx) {
+                var seriesKey = dataRow[_this._series_idx];
+                if (!_this._dataBySeries[seriesKey]) {
+                    _this._origIdxMap[seriesKey] = {};
+                    _this._dataBySeries[seriesKey] = [];
+                }
+                _this._dataBySeries[seriesKey].push({
+                    dataRow: dataRow,
+                    origIdx: origIdx
+                });
+            });
+            var gutter_1 = this.gutter();
+            var bucketOffset_1 = 0;
+            var seriesKeys = Object.keys(this._dataBySeries);
+            seriesKeys.forEach(function (seriesKey) {
+                _this._dataBySeries[seriesKey].sort(function (a, b) { return a.dataRow[1] - b.dataRow[1]; });
+                _this._bucketsBySeries[seriesKey] = _this.calcBuckets(_this._dataBySeries[seriesKey].map(function (n) { return n.dataRow; }), 1, 2);
+                _this._bucketsBySeries[seriesKey].bucketHeight = _this.bucketHeight();
+                _this._bucketsBySeries[seriesKey].bucketOffset = bucketOffset_1;
+                bucketOffset_1 += (_this._bucketsBySeries[seriesKey].bucketHeight + _this.strokeWidth() + _this.gutter()) * (_this._bucketsBySeries[seriesKey].maxBucket + 1);
+                _this._dataBySeries[seriesKey].forEach(function (n, i) {
+                    _this._origIdxMap[seriesKey][n.origIdx] = i;
+                });
+            });
+            this._seriesBackgrounds = this._renderElement.selectAll(".series-background")
+                .data(seriesKeys.map(function (key) {
+                return _this._bucketsBySeries[key];
+            }));
+            this._seriesBackgrounds
+                .join(function (enter) { return enter.append("rect")
+                .attr("class", "series-background"); }, function (update) { return update; }, function (exit) { return exit
+                .each(function (d) {
+                delete d.element;
+            })
+                .remove(); })
+                .attr("opacity", function (d) { return d.props && d.props.hidden ? 0 : 1; })
+                .each(function (d, i) {
+                select(this)
+                    .attr("x", 0)
+                    .attr("y", d.bucketOffset - (gutter_1 / 2))
+                    .attr("width", w)
+                    .attr("height", ((d.bucketHeight + gutter_1) * (d.maxBucket + 1)) + gutter_1)
+                    .attr("fill", i % 2 ? context.oddSeriesBackground() : context.evenSeriesBackground());
+            });
+        }
+        else {
+            if (this._bucket_idx !== -1) {
+                this._buckets = this.calcBuckets(this.data(), this._startDate_idx, this._endDate_idx, this._bucket_idx);
+            }
+            else {
+                this._buckets = this.calcBuckets(this.data(), this._startDate_idx, this._endDate_idx);
+            }
+        }
+        var interpedStart = this._interpolateX(this._minStart);
+        this.zoomTo([interpedStart, 0], 1);
+        var bucketHeight = this.bucketHeight();
+        this.setRangeOptions();
+        this._maxFontScale = (bucketHeight - (this.rangePadding() * 2));
+        this.measureDataText();
+        var itemSelection = this._renderElement.selectAll(".item")
+            .data(this.data());
+        var borderOffset1 = this.strokeWidth();
+        var borderOffset2 = borderOffset1 * 2;
+        itemSelection
+            .join(function (enter) { return enter.append("g")
+            .attr("class", "item")
+            .on("click.selectionBag", function (d, i) {
+            var _id = d.id === undefined ? i : d.id;
+            if (context._selection.isSelected({ _id: _id, element: d.element })) {
+                context._selection.clear();
+            }
+            else {
+                context._selection.click({
+                    _id: _id,
+                    element: function () { return d.element; }
+                }, d3Event);
+            }
+            context.selectionChanged();
+            d3Event().stopPropagation();
+        })
+            .on("click", function (d) {
+            var selected = d.element.classed("selected");
+            if (d[context.columns().length]) {
+                d.__lparam = d[context.columns().length];
+            }
+            context.click(d, "", selected);
+        })
+            .on("dblclick", function (d) {
+            var selected = d.element.classed("selected");
+            if (d[context.columns().length]) {
+                d.__lparam = d[context.columns().length];
+            }
+            context.click(d, "", selected);
+        })
+            .on("mousein", function (d) {
+            context.highlightItem(select(this), d);
+            var selected = d.element.classed("selected");
+            context.mousein(d, "", selected);
+        })
+            .on("mouseover", function (d) {
+            var d3evt = d3Event();
+            context._tooltip._triggerElement = d.element;
+            context._tooltip._cursorLoc = [
+                d3evt.clientX,
+                d3evt.clientY
+            ];
+            context._tooltip
+                .data(d)
+                .visible(true)
+                .fitContent(true)
+                .render();
+            context.highlightItem(select(this), d);
+            var selected = d.element.classed("selected");
+            context.mouseover(d, "", selected);
+        })
+            .on("mouseout", function (d) {
+            context._tooltip
+                .visible(false)
+                .render();
+            context.highlightItem(null, null);
+            var selected = d.element.classed("selected");
+            context.mouseout(d, "", selected);
+        })
+            .each(function (d, i) {
+            d.that = this;
+            d.element = select(this);
+            d.x = context._interpolateX(d[1]);
+            var endX = context._interpolateX(d[2]);
+            if (context._series_idx > -1) {
+                var seriesKey = d[context._series_idx];
+                var bucket = context._bucketsBySeries[seriesKey].bucketMap[context._origIdxMap[seriesKey][i]];
+                d.y = context._bucketsBySeries[seriesKey].interpolateY(bucket) + context._bucketsBySeries[seriesKey].bucketOffset;
+            }
+            else {
+                var _i = context._bucket_idx === -1 ? i : d[context._bucket_idx];
+                d.y = context._buckets.interpolateY(context._buckets.bucketMap[_i]);
+            }
+            d.props = __assign(__assign({}, d[3]), { text: d[0] });
+            d.props.width = endX - d.x;
+            d.props.height = bucketHeight;
+            d.x += borderOffset1;
+            d.y += borderOffset1;
+            d.props.width -= borderOffset2;
+            d.props.height -= borderOffset2;
+            d.element.attr("transform", "translate(".concat(d.x + (d.props.width / 2), " ").concat(d.y + (d.props.height / 2), ")"));
+        }); }, function (update) { return update; }, function (exit) { return exit
+            .each(function (d) {
+            delete d.element;
+        })
+            .remove(); })
+            .attr("opacity", function (d) { return d.props && d.props.hidden ? 0 : 1; })
+            .each(function (d, i) {
+            d.that = this;
+            if (context._series_idx > -1) {
+                var seriesKey = d[context._series_idx];
+                d.x = context.renderRangeElement(d, i, false, context._rangeOptions, seriesKey);
+            }
+            else {
+                d.x = context.renderRangeElement(d, i, false, context._rangeOptions);
+            }
+        })
+            .on("dblclick.zoom", function (d) {
+            var x1 = _this._interpolateX(d[1]);
+            var x2 = _this._interpolateX(d[2]);
+            var xRange = x2 - x1;
+            var xScale = w / xRange;
+            _this.zoomTo([
+                -x1 * xScale,
+                0
+            ], xScale);
+        });
+        element.on("dblclick.zoom", null);
+    };
+    ReactGantt.prototype.renderRangeElement = function (d, i, transformEach, options, seriesKey) {
+        if (transformEach === void 0) { transformEach = false; }
+        if (options === void 0) { options = {}; }
+        var borderOffset1 = options.strokeWidth;
+        var borderOffset2 = borderOffset1 * 2;
+        var padding = options.rangePadding;
+        var endX;
+        var x = isNaN(this._transform.x) ? 0 : this._transform.x;
+        var k = isNaN(this._transform.k) ? 1 : this._transform.k;
+        var b;
+        var bucketHeight = this.bucketHeight();
+        d.that.setAttribute("data-series", seriesKey);
+        if (this._color_idx > -1) {
+            d.that.setAttribute("data-color", d[this._color_idx]);
+        }
+        if (seriesKey !== undefined) {
+            b = this._bucketsBySeries[seriesKey].bucketMap[this._origIdxMap[seriesKey][i]];
+            d.that.setAttribute("data-b", b);
+            d.that.setAttribute("data-bucketOffset", this._bucketsBySeries[seriesKey].bucketOffset);
+            d.y = this._bucketsBySeries[seriesKey].interpolateY(b) + this._bucketsBySeries[seriesKey].bucketOffset;
+            d.that.setAttribute("data-dy", d.y);
+        }
+        else {
+            b = this._buckets.bucketMap[i];
+            d.y = this._buckets.interpolateY(b);
+        }
+        if (this._color_idx > -1) {
+            options.fill = d[this._color_idx];
+        }
+        if (!transformEach) {
+            d.x = this._interpolateX(d[1]);
+            endX = this._interpolateX(d[2]);
+            d.props = __assign(__assign({}, d[3]), { text: d[0] });
+            d.props.width = (endX - d.x) / k;
+        }
+        else {
+            d.x = this._interpolateX(d[1]) * k;
+            endX = this._interpolateX(d[2]) * k;
+            d.props = __assign(__assign({}, d[3]), { text: d[0] });
+            d.props.width = (endX - d.x) / k;
+            d.x += x;
+            d.props.width *= k;
+        }
+        d.props.height = bucketHeight;
+        if (seriesKey === undefined && this._buckets.bucketScale < 1) {
+            d.props.height = this._buckets.bucketScale * bucketHeight;
+        }
+        if (d.element === undefined && d.that) {
+            d.element = select(d.that);
+        }
+        d.element.attr("transform", "translate(".concat(d.x + (d.props.width / 2), " ").concat(d.y + (d.props.height / 2), ")"));
+        d.x += borderOffset1;
+        d.y += borderOffset1;
+        d.props.width -= borderOffset2;
+        d.props.height -= borderOffset2;
+        d.props.width = d.props.width < 1 ? 1 : d.props.width;
+        d.props.height = d.props.height < 1 ? 1 : d.props.height;
+        var text = this.truncateText(d.props.text, d.props.width - padding, this._maxFontScale);
+        if (text !== d.props.text) {
+            text = this.truncateText(d.props.text, d.props.width - padding);
+        }
+        else {
+            d.props.fontSize = this._maxFontScale * options.fontSize;
+        }
+        if (seriesKey === undefined && this._buckets.bucketScale < 1) {
+            d.props.fontSize = Math.min(this._maxFontScale, this._buckets.bucketScale) * options.fontSize;
+        }
+        if (!this._maxY || this._maxY < d.y + d.props.height) {
+            this._maxY = d.y + d.props.height;
+        }
+        if (!this._maxX || this._maxX < d.x + d.props.width) {
+            this._maxX = d.x + d.props.width;
+        }
+        render(this._rangeRenderer, __assign(__assign(__assign({}, options), d.props), { text: text }), d.that);
+    };
+    ReactGantt.prototype.setRangeOptions = function () {
+        this._rangeOptions = {
+            rangePadding: this.rangePadding(),
+            fontFamily: this.fontFamily(),
+            fontSize: this.fontSize(),
+            strokeWidth: this.strokeWidth(),
+            fill: this.fill(),
+            stroke: this.stroke(),
+            textFill: this.rangeFontColor(),
+            cornerRadius: this.cornerRadius(),
+        };
+    };
+    ReactGantt.prototype.zoomed = function (transform) {
+        var _this = this;
+        this._transform = transform;
+        switch (this.renderMode()) {
+            case "scale-all":
+                this._zoomScale = transform.k;
+                this._zoomTranslate = [transform.x, 0];
+                this._zoomG.attr("transform", "translate(".concat(transform.x, " ").concat(0, ")scale(").concat(transform.k, " 1)"));
+                break;
+            default:
+                var options_1 = this._rangeOptions;
+                this.data().forEach(function (d, i) {
+                    if (_this._color_idx > -1) {
+                        options_1.fill = d[_this._color_idx];
+                    }
+                    if (_this._series_idx > -1) {
+                        var seriesKey = d[_this._series_idx];
+                        _this.renderRangeElement(d, i, true, options_1, seriesKey);
+                    }
+                    else {
+                        _this.renderRangeElement(d, i, true, options_1);
+                    }
+                });
+        }
+        this.zoomedHook(transform);
+    };
+    ReactGantt.prototype.zoomedHook = function (transform) {
+    };
+    ReactGantt.prototype.calcBuckets = function (data, startKey, endKey, bucketKey) {
+        var bucketMap = {};
+        var bucketKeyMap = {};
+        var tol = this.overlapTolerence();
+        var buckets = [{ end: -Infinity }];
+        var maxBucket = 0;
+        if (bucketKey !== undefined) {
+            data.forEach(function (d, i) {
+                bucketMap[i] = d[bucketKey];
+                bucketKeyMap[d[bucketKey]] = true;
+            });
+            maxBucket = Object.keys(bucketKeyMap).length;
+        }
+        else {
+            data.forEach(function (d, i) {
+                for (var i2 = 0; i2 < buckets.length; ++i2) {
+                    if (i === 0 || buckets[i2][endKey] + tol <= d[startKey]) {
+                        bucketMap[i] = i2;
+                        if (maxBucket < i2)
+                            maxBucket = i2;
+                        buckets[i2][endKey] = d[endKey];
+                        break;
+                    }
+                }
+                if (bucketMap[i] === undefined) {
+                    bucketMap[i] = buckets.length;
+                    var b = {};
+                    b[endKey] = d[endKey];
+                    buckets.push(b);
+                }
+                if (maxBucket < bucketMap[i])
+                    maxBucket = bucketMap[i];
+            });
+        }
+        var height = (maxBucket + 1) * (this.bucketHeight() + this.gutter());
+        return {
+            bucketMap: bucketMap,
+            maxBucket: maxBucket,
+            bucketScale: this.height() / height,
+            interpolateY: scaleLinear()
+                .domain([0, maxBucket + 1])
+                .range([0, Math.min(this.height(), height)])
+        };
+    };
+    ReactGantt.prototype.data = function (_) {
+        var _a, _b;
+        var retVal = _super.prototype.data.apply(this, arguments);
+        if (arguments.length > 0) {
+            this._minStart = (_a = Math.min.apply(Math, this.data().map(function (n) { return n[1]; }))) !== null && _a !== void 0 ? _a : 0;
+            this._maxEnd = (_b = Math.max.apply(Math, this.data().map(function (n) { return n[2]; }))) !== null && _b !== void 0 ? _b : 1;
+            this.measureDataText(true);
+        }
+        return retVal;
+    };
+    ReactGantt.prototype.measureDataText = function (forceMeasure) {
+        if (forceMeasure === void 0) { forceMeasure = false; }
+        var textWidths = {};
+        var characterWidths = {};
+        var fontFamily = this.fontFamily();
+        var fontSize = this.fontSize();
+        var bucketHeight = this.bucketHeight();
+        if (bucketHeight) {
+            this._maxFontScale = (bucketHeight - (this.rangePadding() * 2)) / fontSize;
+        }
+        if (forceMeasure || this._prevFontFamily !== fontFamily || this._prevFontSize !== fontSize) {
+            characterWidths["."] = Utility.textSize(".", fontFamily, fontSize).width;
+            this.data().forEach(function (d) {
+                if (!textWidths[d[0]]) {
+                    textWidths[d[0]] = Utility.textSize(d[0], fontFamily, fontSize).width;
+                }
+                d[0].split("").forEach(function (char) {
+                    if (!characterWidths[char]) {
+                        characterWidths[char] = Utility.textSize(char, fontFamily, fontSize).width;
+                    }
+                });
+            });
+            this._textWidths = textWidths;
+            this._characterWidths = characterWidths;
+        }
+        this._prevFontFamily = fontFamily;
+        this._prevFontSize = fontSize;
+    };
+    ReactGantt.prototype.truncateText = function (text, width, scale) {
+        if (scale === void 0) { scale = 1; }
+        var textFits = this._textWidths[text] * scale < width;
+        if (textFits) {
+            return text;
+        }
+        var ret = "";
+        var sum = 0;
+        var _width = width - (this._characterWidths["."] * 3);
+        for (var _a = 0, text_1 = text; _a < text_1.length; _a++) {
+            var char = text_1[_a];
+            sum += this._characterWidths[char];
+            if (sum < _width) {
+                ret += char;
+            }
+            else {
+                break;
+            }
+        }
+        return _width < 0 ? "" : ret + "...";
+    };
+    ReactGantt.prototype.resize = function (_size) {
+        var retVal;
+        if (this.fitWidthToContent() || this.fitHeightToContent()) {
+            retVal = _super.prototype.resize.call(this, {
+                width: _size.width,
+                height: this._maxY
+            });
+        }
+        else {
+            retVal = _super.prototype.resize.apply(this, arguments);
+        }
+        return retVal;
+    };
+    ReactGantt.prototype.selectionChanged = function () {
+    };
+    ReactGantt.prototype.highlightItem = function (_element, d) {
+    };
+    ReactGantt.prototype.click = function (row, _col, sel) {
+    };
+    ReactGantt.prototype.dblclick = function (row, _col, sel) {
+    };
+    ReactGantt.prototype.mousein = function (row, _col, sel) {
+    };
+    ReactGantt.prototype.mouseover = function (row, _col, sel) {
+    };
+    ReactGantt.prototype.mouseout = function (row, _col, sel) {
+    };
+    return ReactGantt;
+}(SVGZoomWidget));
+ReactGantt.prototype._class += " timeline_ReactGantt";
+ReactGantt.prototype.publish("fitWidthToContent", false, "boolean", "If true, resize will simply reapply the bounding box width");
+ReactGantt.prototype.publish("fitHeightToContent", false, "boolean", "If true, resize will simply reapply the bounding box height");
+ReactGantt.prototype.publish("titleColumn", null, "string", "Column name to for the title");
+ReactGantt.prototype.publish("startDateColumn", null, "string", "Column name to for the start date");
+ReactGantt.prototype.publish("endDateColumn", null, "string", "Column name to for the end date");
+ReactGantt.prototype.publish("iconColumn", null, "string", "Column name to for the icon");
+ReactGantt.prototype.publish("colorColumn", null, "string", "Column name to for the color");
+ReactGantt.prototype.publish("seriesColumn", null, "string", "Column name to for the series identifier");
+ReactGantt.prototype.publish("bucketColumn", null, "string", "Column name to for the bucket identifier");
+ReactGantt.prototype.publish("renderMode", "default", "set", "Render modes vary in features and performance", ["default", "scale-all"]);
+ReactGantt.prototype.publish("rangePadding", 3, "number", "Padding within each range rectangle (pixels)");
+ReactGantt.prototype.publish("fill", "#1f77b4", "string", "Background color of range rectangle");
+ReactGantt.prototype.publish("stroke", null, "string", "Color of range rectangle border");
+ReactGantt.prototype.publish("strokeWidth", null, "number", "Width of range rectangle border (pixels)");
+ReactGantt.prototype.publish("cornerRadius", 3, "number", "Space between range buckets (pixels)");
+ReactGantt.prototype.publish("fontFamily", null, "string", "Font family within range rectangle", null, { optional: true });
+ReactGantt.prototype.publish("fontSize", 10, "number", "Size of font within range rectangle (pixels)");
+ReactGantt.prototype.publish("rangeFontColor", "#ecf0f1", "html-color", "rangeFontColor");
+ReactGantt.prototype.publish("overlapTolerence", 2, "number", "overlapTolerence");
+ReactGantt.prototype.publish("smallestRangeWidth", 10, "number", "Width of the shortest range (pixels)");
+ReactGantt.prototype.publish("bucketHeight", 100, "number", "Max height of range element (pixels)");
+ReactGantt.prototype.publish("gutter", 2, "number", "Space between range buckets (pixels)");
+ReactGantt.prototype.publish("maxZoom", 16, "number", "Maximum zoom");
+ReactGantt.prototype.publish("evenSeriesBackground", "#FFFFFF", "html-color", "Background color of even series rows");
+ReactGantt.prototype.publish("oddSeriesBackground", "#DDDDDD", "html-color", "Background color of odd series rows");
+
+var ReactAxisGantt = /** @class */ (function (_super) {
+    __extends(ReactAxisGantt, _super);
+    function ReactAxisGantt() {
+        var _this = _super.call(this) || this;
+        _this._topAxis = new Axis("center")
+            .orientation("top")
+            .type("linear")
+            .shrinkToFit("none")
+            .overlapMode("hide")
+            .extend(0)
+            .tickFormat("d");
+        _this._gantt = new ReactGantt("center")
+            .stroke("#000000");
+        _this._bottomAxis = new Axis("center")
+            .orientation("bottom")
+            .type("linear")
+            .shrinkToFit("none")
+            .overlapMode("hide")
+            .extend(0)
+            .tickFormat("d");
+        _this._drawStartPos = "origin";
+        _this.rangeRenderer = function () {
+            var ret = this._gantt.rangeRenderer.apply(this._gantt, arguments);
+            if (!arguments.length)
+                return ret;
+            return this;
+        };
+        return _this;
+    }
+    ReactAxisGantt.prototype.selection = function (_) {
+        if (!arguments.length)
+            return this._gantt.selection();
+        this._gantt.selection(_);
+        return this;
+    };
+    ReactAxisGantt.prototype.resizeWrappers = function () {
+        var w = this.width();
+        var h = this.height();
+        var axisHeight = this.axisHeight(); //TODO: Dynamic scaling to allow for small resolutions?
+        var contentHeight = (h - (axisHeight * 2));
+        var borderOffset1 = this.strokeWidth();
+        this._topRect
+            .attr("height", axisHeight)
+            .attr("width", w)
+            .attr("fill", "transparent");
+        this._topAxisElement.attr("transform", "translate(0 0)");
+        this._topAxis.resize({ height: axisHeight, width: w });
+        this._contentRect
+            .attr("height", contentHeight)
+            .attr("width", w)
+            .attr("fill", "transparent");
+        this._contentElement.attr("transform", "translate(0 ".concat(axisHeight + borderOffset1, ")"));
+        this._gantt.resize({ height: contentHeight, width: w });
+        this._bottomRect
+            .attr("height", axisHeight)
+            .attr("width", w)
+            .attr("fill", "transparent");
+        this._bottomAxisElement.attr("transform", "translate(0 ".concat(axisHeight + contentHeight + borderOffset1, ")"));
+        this._bottomAxis.resize({ height: axisHeight, width: w });
+    };
+    ReactAxisGantt.prototype.enter = function (domNode, element) {
+        var _this = this;
+        _super.prototype.enter.call(this, domNode, element);
+        this._gantt.click = function (row, col, sel) {
+            _this.click(row, col, sel);
+        };
+        this._gantt.dblclick = function (row, col, sel) {
+            _this.dblclick(row, col, sel);
+        };
+        this._topAxisElement = element.append("g")
+            .attr("class", "top-axis-wrapper");
+        this._topRect = this._topAxisElement.append("rect")
+            .attr("class", "top-axis-rect");
+        this._contentElement = element.append("g")
+            .attr("class", "content-wrapper");
+        this._contentRect = this._contentElement.append("rect")
+            .attr("class", "content-rect");
+        this._bottomAxisElement = element.append("g")
+            .attr("class", "bottom-axis-wrapper");
+        this._bottomRect = this._bottomAxisElement.append("rect")
+            .attr("class", "top-axis-rect");
+        this._topAxis.target(this._topAxisElement.node());
+        this._gantt.target(this._contentElement.node()).bucketHeight(30);
+        this._bottomAxis.target(this._bottomAxisElement.node());
+        this.resizeWrappers();
+        this._gantt.zoomedHook = function (transform) {
+            _this.onzoom(transform);
+        };
+    };
+    ReactAxisGantt.prototype.onzoom = function (transform) {
+        var w = this.width();
+        var low = this._gantt._minStart;
+        var high = this._gantt._maxEnd;
+        var range = high - low;
+        var wpp = range / w;
+        var nextLow = Math.floor(low - (wpp * (transform.x / transform.k)));
+        var nextHigh = Math.ceil((range / transform.k) + nextLow);
+        this._topAxis
+            .fontFamily(this.axisFontFamily())
+            .fontSize(this.axisFontSize())
+            .tickLength(this.axisTickLength())
+            .low(nextLow)
+            .high(nextHigh)
+            .render();
+        this._bottomAxis
+            .fontFamily(this.axisFontFamily())
+            .fontSize(this.axisFontSize())
+            .tickLength(this.axisTickLength())
+            .low(nextLow)
+            .high(nextHigh)
+            .render();
+    };
+    ReactAxisGantt.prototype.update = function (domNode, element) {
+        _super.prototype.update.call(this, domNode, element);
+        this._topAxis.tickFormat(this.tickFormat()).render();
+        this._bottomAxis.tickFormat(this.tickFormat()).render();
+        this._gantt.render();
+    };
+    ReactAxisGantt.prototype.columns = function (_) {
+        var retVal = _super.prototype.columns.apply(this, arguments);
+        if (arguments.length > 0) {
+            this._gantt.columns(_);
+        }
+        return retVal;
+    };
+    ReactAxisGantt.prototype.data = function (_) {
+        var _a, _b;
+        var retVal = _super.prototype.data.apply(this, arguments);
+        if (arguments.length > 0) {
+            var ganttData = this.data().map(function (n) {
+                var ret = __spreadArray([], n, true);
+                ret[1] = isNaN(n[1]) ? new Date(n[1]).getTime() : Number(n[1]);
+                ret[2] = isNaN(n[2]) ? new Date(n[2]).getTime() : Number(n[2]);
+                return ret;
+            });
+            this._gantt._minStart = (_a = Math.min.apply(Math, ganttData.map(function (n) { return n[1]; }))) !== null && _a !== void 0 ? _a : 0;
+            this._gantt._maxEnd = (_b = Math.max.apply(Math, ganttData.map(function (n) { return n[2]; }))) !== null && _b !== void 0 ? _b : 1;
+            this._gantt.data(ganttData);
+        }
+        return retVal;
+    };
+    ReactAxisGantt.prototype.resize = function (_size) {
+        var retVal = _super.prototype.resize.apply(this, arguments);
+        if (this._topAxisElement) {
+            this.resizeWrappers();
+        }
+        return retVal;
+    };
+    ReactAxisGantt.prototype.click = function (row, col, sel) {
+    };
+    ReactAxisGantt.prototype.dblclick = function (row, col, sel) {
+    };
+    ReactAxisGantt.prototype.tooltip = function () {
+        return this._gantt._tooltip;
+    };
+    return ReactAxisGantt;
+}(SVGWidget));
+ReactAxisGantt.prototype._class += " timeline_ReactAxisGantt";
+ReactAxisGantt.prototype.publish("tickFormat", null, "string", "Format rule applied to axis tick labels", undefined, { optional: true });
+ReactAxisGantt.prototype.publish("axisHeight", 22, "number", "Height of axes (pixels)");
+ReactAxisGantt.prototype.publish("overlapTolerence", 2, "number", "overlapTolerence");
+ReactAxisGantt.prototype.publish("smallestRangeWidth", 10, "number", "Width of the shortest range (pixels)");
+ReactAxisGantt.prototype.publish("axisFontSize", null, "number", "Font size of axis tick labels");
+ReactAxisGantt.prototype.publish("axisFontFamily", null, "string", "Font family of axis tick labels");
+ReactAxisGantt.prototype.publish("axisTickLength", null, "number", "Length of axis ticks");
+ReactAxisGantt.prototype.publishProxy("gutter", "_gantt");
+ReactAxisGantt.prototype.publishProxy("renderMode", "_gantt");
+ReactAxisGantt.prototype.publishProxy("strokeWidth", "_gantt");
+ReactAxisGantt.prototype.publishProxy("fontSize", "_gantt");
+ReactAxisGantt.prototype.publishProxy("fontFamily", "_gantt");
+ReactAxisGantt.prototype.publishProxy("stroke", "_gantt");
+ReactAxisGantt.prototype.publishProxy("cornerRadius", "_gantt");
+ReactAxisGantt.prototype.publishProxy("titleColumn", "_gantt");
+ReactAxisGantt.prototype.publishProxy("startDateColumn", "_gantt");
+ReactAxisGantt.prototype.publishProxy("endDateColumn", "_gantt");
+ReactAxisGantt.prototype.publishProxy("iconColumn", "_gantt");
+ReactAxisGantt.prototype.publishProxy("colorColumn", "_gantt");
+ReactAxisGantt.prototype.publishProxy("bucketColumn", "_gantt");
+ReactAxisGantt.prototype.publishProxy("maxZoom", "_gantt");
+ReactAxisGantt.prototype.publishProxy("bucketHeight", "_gantt");
+
+var ReactAxisGanttSeries = /** @class */ (function (_super) {
+    __extends(ReactAxisGanttSeries, _super);
+    function ReactAxisGanttSeries() {
+        var _this = _super.call(this) || this;
+        _this._topAxis = new Axis("origin")
+            .orientation("top")
+            .type("linear")
+            .shrinkToFit("none")
+            .overlapMode("hide")
+            .extend(0)
+            .tickFormat("d");
+        _this._gantt = new ReactGantt("origin")
+            .stroke("#000000")
+            .fitHeightToContent(true);
+        _this._bottomAxis = new Axis("origin")
+            .orientation("bottom")
+            .type("linear")
+            .shrinkToFit("none")
+            .overlapMode("hide")
+            .extend(0)
+            .tickFormat("d");
+        _this.centerOverflowX_default("hidden");
+        _this.centerOverflowY_default("auto");
+        return _this;
+    }
+    ReactAxisGanttSeries.prototype.selection = function (_) {
+        if (!arguments.length)
+            return this._gantt.selection();
+        this._gantt.selection(_);
+        return this;
+    };
+    ReactAxisGanttSeries.prototype.rangeRenderer = function (_) {
+        var ret = this._gantt.rangeRenderer.apply(this._gantt, arguments);
+        if (!arguments.length)
+            return ret;
+        return this;
+    };
+    ReactAxisGanttSeries.prototype.resizeWrappers = function () {
+        var w = this.width();
+        var h = this.height();
+        var axisHeight = this.axisHeight(); //TODO: Dynamic scaling to allow for small resolutions?
+        var contentHeight = (h - (axisHeight * 2));
+        this.bottomHeight(axisHeight);
+        this._topWA.resize({
+            width: w,
+            height: axisHeight
+        });
+        this._centerWA.resize({
+            width: w,
+            height: contentHeight
+        });
+        this._bottomWA.resize({
+            width: w,
+            height: axisHeight
+        });
+        this.top().render();
+        this.bottom().render();
+        this.center().render();
+    };
+    ReactAxisGanttSeries.prototype.enter = function (domNode, element) {
+        var _this = this;
+        _super.prototype.enter.call(this, domNode, element);
+        this._gantt.click = function (row, col, sel) {
+            _this.click(row, col, sel);
+        };
+        this._gantt.dblclick = function (row, col, sel) {
+            _this.dblclick(row, col, sel);
+        };
+        this.top(this._topAxis);
+        this.center(this._gantt);
+        this.bottom(this._bottomAxis);
+        this.resizeWrappers();
+        this._gantt.zoomedHook = function (transform) {
+            _this.onzoom(transform);
+        };
+    };
+    ReactAxisGanttSeries.prototype.onzoom = function (transform) {
+        var w = this.width();
+        var low = this._gantt._minStart;
+        var high = this._gantt._maxEnd;
+        var range = high - low;
+        var wpp = range / w;
+        var nextLow = Math.floor(low - (wpp * (transform.x / transform.k)));
+        var nextHigh = Math.ceil((range / transform.k) + nextLow);
+        this._topAxis
+            .fontFamily(this.axisFontFamily())
+            .fontSize(this.axisFontSize())
+            .tickLength(this.axisTickLength())
+            .low(nextLow)
+            .high(nextHigh)
+            .lazyRender();
+        this._bottomAxis
+            .fontFamily(this.axisFontFamily())
+            .fontSize(this.axisFontSize())
+            .tickLength(this.axisTickLength())
+            .low(nextLow)
+            .high(nextHigh)
+            .lazyRender();
+    };
+    ReactAxisGanttSeries.prototype.update = function (domNode, element) {
+        _super.prototype.update.call(this, domNode, element);
+        this._topAxis.tickFormat(this.tickFormat()).render();
+        this._bottomAxis.tickFormat(this.tickFormat()).render();
+        this._gantt.render();
+    };
+    ReactAxisGanttSeries.prototype.columns = function (_) {
+        var retVal = _super.prototype.columns.apply(this, arguments);
+        if (arguments.length > 0) {
+            this._gantt.columns(_);
+        }
+        return retVal;
+    };
+    ReactAxisGanttSeries.prototype.data = function (_) {
+        var retVal = _super.prototype.data.apply(this, arguments);
+        if (arguments.length > 0) {
+            var ganttData = this.data().map(function (n) {
+                var ret = __spreadArray([], n, true);
+                ret[1] = isNaN(n[1]) ? new Date(n[1]).getTime() : Number(n[1]);
+                ret[2] = isNaN(n[2]) ? new Date(n[2]).getTime() : Number(n[2]);
+                return ret;
+            });
+            this._gantt._minStart = min(ganttData, function (n) { return n[1]; });
+            this._gantt._maxEnd = max(ganttData, function (n) { return n[2]; });
+            this._gantt.data(ganttData);
+        }
+        return retVal;
+    };
+    ReactAxisGanttSeries.prototype.resize = function (_size) {
+        var retVal = _super.prototype.resize.apply(this, arguments);
+        if (this._topAxisElement) {
+            this.resizeWrappers();
+        }
+        return retVal;
+    };
+    ReactAxisGanttSeries.prototype.click = function (row, col, sel) {
+    };
+    ReactAxisGanttSeries.prototype.dblclick = function (row, col, sel) {
+    };
+    ReactAxisGanttSeries.prototype.tooltip = function () {
+        return this._gantt._tooltip;
+    };
+    return ReactAxisGanttSeries;
+}(Border2));
+ReactAxisGanttSeries.prototype._class += " timeline_ReactAxisGanttSeries";
+ReactAxisGanttSeries.prototype.publish("tickFormat", null, "string", "Format rule applied to axis tick labels", undefined, { optional: true });
+ReactAxisGanttSeries.prototype.publish("axisHeight", 22, "number", "Height of axes (pixels)");
+ReactAxisGanttSeries.prototype.publish("overlapTolerence", 2, "number", "overlapTolerence");
+ReactAxisGanttSeries.prototype.publish("smallestRangeWidth", 10, "number", "Width of the shortest range (pixels)");
+ReactAxisGanttSeries.prototype.publish("axisFontSize", null, "number", "Font size of axis tick labels");
+ReactAxisGanttSeries.prototype.publish("axisFontFamily", null, "string", "Font family of axis tick labels");
+ReactAxisGanttSeries.prototype.publish("axisTickLength", null, "number", "Length of axis ticks");
+ReactAxisGanttSeries.prototype.publishProxy("gutter", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("renderMode", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("strokeWidth", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("fontSize", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("fontFamily", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("stroke", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("cornerRadius", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("titleColumn", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("startDateColumn", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("endDateColumn", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("iconColumn", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("colorColumn", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("seriesColumn", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("bucketColumn", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("maxZoom", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("evenSeriesBackground", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("oddSeriesBackground", "_gantt");
+ReactAxisGanttSeries.prototype.publishProxy("bucketHeight", "_gantt");
+
+var ReactTimeline = /** @class */ (function (_super) {
+    __extends(ReactTimeline, _super);
+    function ReactTimeline() {
+        var _this = _super.call(this) || this;
+        _this._drawStartPos = "origin";
+        _this._topAxis.type("time");
+        _this._bottomAxis.type("time");
+        _this.tooltipHTML(function (d) {
+            var parser = timeParse("%Q");
+            var startTime = parser(d[1]);
+            var endTime = parser(d[2]);
+            var formatter = timeFormat(_this.tooltipTimeFormat());
+            return "<div style=\"text-align:center;\">".concat(d[0], "<br/><br/>").concat(formatter(startTime), " -&gt; ").concat(formatter(endTime), "</div>");
+        });
+        return _this;
+    }
+    ReactTimeline.prototype.update = function (domNode, element) {
+        _super.prototype.update.call(this, domNode, element);
+        if (this.timePattern_exists()) {
+            var minTimestamp_1 = Infinity;
+            var maxTimestamp_1 = -Infinity;
+            var lowDateStr_1 = "";
+            var highDateStr_1 = "";
+            this.data().map(function (n) {
+                var start = new Date(n[1]).getTime();
+                var end = new Date(n[2]).getTime();
+                if (minTimestamp_1 > start) {
+                    minTimestamp_1 = start;
+                    lowDateStr_1 = "" + n[1];
+                }
+                if (maxTimestamp_1 < end) {
+                    maxTimestamp_1 = end;
+                    highDateStr_1 = "" + n[2];
+                }
+            });
+            this._topAxis
+                .type("time")
+                .timePattern(this.timePattern())
+                .overlapMode("none")
+                .tickFormat(this._axisLabelFormatter)
+                .low(lowDateStr_1)
+                .high(highDateStr_1);
+            this._bottomAxis
+                .type("time")
+                .timePattern(this.timePattern())
+                .overlapMode("none")
+                .tickFormat(this._axisLabelFormatter)
+                .low(lowDateStr_1)
+                .high(highDateStr_1);
+            this._gantt._minStart = minTimestamp_1;
+            this._gantt._maxEnd = maxTimestamp_1;
+        }
+    };
+    ReactTimeline.prototype.tooltipHTML = function (callback) {
+        this._tooltipHTML = callback;
+        this.tooltip().tooltipHTML(this._tooltipHTML);
+        return this;
+    };
+    ReactTimeline.prototype.parseAxisValue = function (v) {
+        var parseTime = timeParse("%Q");
+        var parsedTime = parseTime(v);
+        var formatTime = timeFormat(this.timePattern());
+        return formatTime(parsedTime);
+    };
+    ReactTimeline.prototype.onzoom = function (transform) {
+        var w = this.width();
+        var low = this._gantt._minStart;
+        var high = this._gantt._maxEnd;
+        var range = high - low;
+        var wpp = range / w;
+        var nextLow = Math.floor(low - (wpp * (transform.x / transform.k)));
+        var nextHigh = Math.ceil((range / transform.k) + nextLow);
+        this._topAxis
+            .low(this.parseAxisValue(nextLow))
+            .high(this.parseAxisValue(nextHigh))
+            .render();
+        this._bottomAxis
+            .low(this.parseAxisValue(nextLow))
+            .high(this.parseAxisValue(nextHigh))
+            .render();
+    };
+    return ReactTimeline;
+}(ReactAxisGantt));
+ReactTimeline.prototype._class += " timeline_ReactTimeline";
+ReactTimeline.prototype.publish("timePattern", "%Y-%m-%d", "string", "Time pattern used for parsing datetime strings on each data row", null, { optional: true });
+ReactTimeline.prototype.publish("tooltipTimeFormat", "%Y-%m-%d", "string", "Time format used in the default html tooltip");
+
+var parseTime = timeParse("%Q");
+var ReactTimelineSeries = /** @class */ (function (_super) {
+    __extends(ReactTimelineSeries, _super);
+    function ReactTimelineSeries() {
+        var _this = _super.call(this) || this;
+        _this._topAxis.type("time");
+        _this._bottomAxis.type("time");
+        _this.tooltipHTML(function (d) {
+            var startTime = parseTime(d[1]);
+            var endTime = parseTime(d[2]);
+            var formatter = timeFormat(_this.tooltipTimeFormat());
+            return "<div style=\"text-align:center;\">".concat(d[0], "<br/><br/>").concat(formatter(startTime), " -&gt; ").concat(formatter(endTime), "</div>");
+        });
+        return _this;
+    }
+    ReactTimelineSeries.prototype.update = function (domNode, element) {
+        _super.prototype.update.call(this, domNode, element);
+        if (this.timePattern_exists()) {
+            var minTimestamp_1 = Infinity;
+            var maxTimestamp_1 = -Infinity;
+            var lowDateStr_1 = "";
+            var highDateStr_1 = "";
+            this.data().forEach(function (n) {
+                var start = new Date(n[1]).getTime();
+                var end = new Date(n[2]).getTime();
+                if (minTimestamp_1 > start) {
+                    minTimestamp_1 = start;
+                    lowDateStr_1 = "" + n[1];
+                }
+                if (maxTimestamp_1 < end) {
+                    maxTimestamp_1 = end;
+                    highDateStr_1 = "" + n[2];
+                }
+            });
+            this._topAxis
+                .type("time")
+                .timePattern(this.timePattern())
+                .overlapMode("none")
+                .tickFormat(this._axisLabelFormatter)
+                .low(lowDateStr_1)
+                .high(highDateStr_1);
+            this._bottomAxis
+                .type("time")
+                .timePattern(this.timePattern())
+                .overlapMode("none")
+                .tickFormat(this._axisLabelFormatter)
+                .low(lowDateStr_1)
+                .high(highDateStr_1);
+            this._gantt._minStart = minTimestamp_1;
+            this._gantt._maxEnd = maxTimestamp_1;
+        }
+    };
+    ReactTimelineSeries.prototype.tooltipHTML = function (callback) {
+        this._tooltipHTML = callback;
+        this.tooltip().tooltipHTML(this._tooltipHTML);
+        return this;
+    };
+    ReactTimelineSeries.prototype.parseAxisValue = function (v) {
+        var parsedTime = parseTime(v);
+        var formatTime = timeFormat(this.timePattern());
+        return formatTime(parsedTime);
+    };
+    ReactTimelineSeries.prototype.onzoom = function (transform) {
+        var w = this.width();
+        var low = this._gantt._minStart;
+        var high = this._gantt._maxEnd;
+        var range = high - low;
+        var wpp = range / w;
+        var nextLow = Math.floor(low - (wpp * (transform.x / transform.k)));
+        var nextHigh = Math.ceil((range / transform.k) + nextLow);
+        this._topAxis
+            .low(this.parseAxisValue(nextLow))
+            .high(this.parseAxisValue(nextHigh))
+            .render();
+        this._bottomAxis
+            .low(this.parseAxisValue(nextLow))
+            .high(this.parseAxisValue(nextHigh))
+            .render();
+    };
+    return ReactTimelineSeries;
+}(ReactAxisGanttSeries));
+ReactTimelineSeries.prototype._class += " timeline_ReactTimelineSeries";
+ReactTimelineSeries.prototype.publish("timePattern", "%Y-%m-%d", "string", "Time pattern used for parsing datetime strings on each data row", null, { optional: true });
+ReactTimelineSeries.prototype.publish("tooltipTimeFormat", "%Y-%m-%d", "string", "Time format used in the default html tooltip");
+
+export { BUILD_VERSION, MiniGantt, PKG_NAME, PKG_VERSION, ReactAxisGantt, ReactAxisGanttSeries, ReactGantt, ReactTimeline, ReactTimelineSeries };
+//# sourceMappingURL=index.es6.js.map