@hpcc-js/timeline 2.54.1 → 2.56.0

package/dist/index.js

@@ -1,1634 +1,1209 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@hpcc-js/api'), require('@hpcc-js/chart'), require('@hpcc-js/common'), require('@hpcc-js/html'), require('@hpcc-js/react'), require('@hpcc-js/layout')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@hpcc-js/api', '@hpcc-js/chart', '@hpcc-js/common', '@hpcc-js/html', '@hpcc-js/react', '@hpcc-js/layout'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@hpcc-js/timeline"] = {}, global["@hpcc-js/api"], global["@hpcc-js/chart"], global["@hpcc-js/common"], global["@hpcc-js/html"], global["@hpcc-js/react"], global["@hpcc-js/layout"]));
-})(this, (function (exports, api, chart, common, html, react, layout) { 'use strict';
+import { ITooltip } from "@hpcc-js/api";
+import { Axis } from "@hpcc-js/chart";
+import { EntityPin, EntityRect, SVGWidget, SVGZoomWidget, Utility, d3Event, extent, local, max, min, scaleBand, scaleLinear, select, timeFormat, timeParse, zoom, zoomIdentity } 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.54.1";
-  var BUILD_VERSION = "2.108.2";
+//#region src/__package__.ts
+const PKG_NAME = "@hpcc-js/timeline";
+const PKG_VERSION = "3.0.0";
+const BUILD_VERSION = "3.2.1";
 
-  /******************************************************************************
-  Copyright (c) Microsoft Corporation.
+//#endregion
+//#region src/MiniGantt.ts
+var MiniGantt = class extends SVGWidget {
+	tlAxis;
+	brAxis;
+	verticalBands;
+	_zoom;
+	gUpperContent;
+	gUpperAxis;
+	gMiddleContent;
+	gLowerAxis;
+	gLowerContent;
+	localRect = local();
+	localEntityPin = local();
+	tooltipFormatter;
+	_dateCache;
+	rootExtent;
+	_title_idx = 0;
+	_startDate_idx = 1;
+	_endDate_idx = 2;
+	_icon_idx = -1;
+	_color_idx = -1;
+	_yoffset_idx = -1;
+	constructor() {
+		super();
+		ITooltip.call(this);
+		Utility.SimpleSelectionMixin.call(this);
+		this._drawStartPos = "origin";
+		this.tooltipHTML((d) => `<center>${d[this._title_idx]}</center><br>${this.tooltipFormatter(this.brAxis.parse(d[this._startDate_idx]))} -> ${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(.2).paddingInner(.2);
+	}
+	isHorizontal() {
+		return this.orientation() === "horizontal";
+	}
+	fullExtent() {
+		return extent([...this.data().map((d) => d[this._startDate_idx]), ...this.data().filter((d) => !!d[this._endDate_idx]).map((d) => d[this._endDate_idx])]);
+	}
+	extent() {
+		const extent$1 = this.rootExtent ? [this.rootExtent[1], this.rootExtent[2]] : this.fullExtent();
+		if (extent$1[0] !== void 0 && extent$1[1] !== void 0) {
+			if (extent$1[0] === extent$1[1] || this.centerOnMostRecent()) {
+				const parser = timeParse(this.timePattern());
+				const formatter = timeFormat(this.timePattern());
+				const date1 = parser(extent$1[0]);
+				const date2 = parser(extent$1[1]);
+				if (extent$1[0] === extent$1[1]) {
+					extent$1[0] = formatter(new Date(date1.setFullYear(date1.getFullYear() - 1)));
+					extent$1[1] = formatter(new Date(date1.setFullYear(date1.getFullYear() + 2)));
+				} else {
+					const time1 = date1.getTime();
+					const timeDiff = date2.getTime() - time1;
+					extent$1[0] = formatter(date1);
+					extent$1[1] = formatter(new Date(time1 + timeDiff * 2));
+				}
+			}
+		}
+		return extent$1;
+	}
+	dataStartPos(d) {
+		if (typeof this._dateCache[d[this._startDate_idx]] !== "undefined") return this._dateCache[d[this._startDate_idx]];
+		const pos = this.brAxis.scalePos(d[this._startDate_idx]);
+		this._dateCache[d[this._startDate_idx]] = pos;
+		return pos;
+	}
+	dataEndPos(d) {
+		if (typeof this._dateCache[d[this._endDate_idx]] !== "undefined") return this._dateCache[d[this._endDate_idx]];
+		const pos = this.brAxis.scalePos(d[this._endDate_idx]);
+		this._dateCache[d[this._endDate_idx]] = pos;
+		return pos;
+	}
+	dataWidth(d) {
+		return this.dataEndPos(d) - this.dataStartPos(d);
+	}
+	transform;
+	resetZoom() {
+		this._zoom.transform(this.element(), zoomIdentity.translate(0, this.isHorizontal() ? 0 : this.height()));
+	}
+	zoomed() {
+		this.transform = d3Event().transform;
+		this.render();
+	}
+	background;
+	enter(domNode, element) {
+		super.enter(domNode, element);
+		this._zoom = zoom().scaleExtent([0, this.maxZoom()]).on("zoom", () => {
+			this.zoomed();
+		});
+		this.background = element.append("rect").attr("fill", "white").attr("opacity", 0).on("dblclick", () => {
+			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(.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(.1);
+		element.call(this._zoom);
+		this._selection.widgetElement(this.gMiddleContent);
+	}
+	_prevIsHorizontal;
+	update(domNode, element) {
+		super.update(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());
+		const width = this.width();
+		const height = this.height();
+		this.background.attr("x", 0).attr("y", 0).attr("width", width).attr("height", height);
+		const extent$1 = this.extent();
+		this.tlAxis.x(width / 2).orientation(this.isHorizontal() ? "top" : "left").reverse(!this.isHorizontal()).timePattern(this.timePattern()).width(width - 1).low(extent$1[0]).high(extent$1[1]).updateScale();
+		this.brAxis.x(width / 2).y(height / 2).orientation(this.isHorizontal() ? "bottom" : "right").reverse(!this.isHorizontal()).timePattern(this.timePattern()).width(width - 1).height(height).low(extent$1[0]).high(extent$1[1]).updateScale();
+		if (this.transform) {
+			let low;
+			let hi;
+			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();
+		}
+		const data = this.data().sort(this.isHorizontal() ? (l, r) => {
+			const retVal = this.brAxis.scalePos(l[1]) - this.brAxis.scalePos(r[1]);
+			if (retVal === 0) return ("" + l[0]).localeCompare("" + r[0]);
+			return retVal;
+		} : (l, r) => {
+			return this.brAxis.scalePos(r[1]) - this.brAxis.scalePos(l[1]);
+		});
+		const events = data.filter((d) => !d[this._endDate_idx]);
+		const ranges = data.filter((d) => !!d[this._endDate_idx]);
+		this.tlAxis.render();
+		this.brAxis.render();
+		const brAxisBBox = this.brAxis.getBBox();
+		let upperContentHeight = this.updateEntityPins(events);
+		const lowerAxisHeight = brAxisBBox.height;
+		let lowerHeight = height - upperContentHeight;
+		const minYOffset = this._yoffset_idx !== -1 ? Math.min.apply(void 0, this.data().filter((row) => !isNaN(row[this._yoffset_idx])).map((row) => row[this._yoffset_idx])) : 0;
+		if (events.length > 0 && ranges.length === 0) {
+			this.tlAxis.visible(false);
+			let y_offset = upperContentHeight / 4;
+			if (y_offset > height / 2 - lowerAxisHeight) y_offset = height / 2 - lowerAxisHeight;
+			const upperContentYOffset = height / 2 + y_offset;
+			const lowerAxisYOffset = (height / 2 - lowerAxisHeight - y_offset) * -1;
+			const halfMinYOffset = minYOffset !== 0 ? minYOffset / 2 : 0;
+			this.gUpperContent.attr("transform", `translate(0, ${upperContentYOffset - halfMinYOffset})`);
+			this.gLowerAxis.attr("transform", `translate(0, ${lowerAxisYOffset - halfMinYOffset})`);
+		} else if (events.length === 0 && ranges.length > 0) {
+			this.tlAxis.visible(true);
+			this.gUpperContent.attr("transform", `translate(0, ${upperContentHeight})`);
+			this.gUpperAxis.attr("transform", `translate(0, ${upperContentHeight})`);
+		} else {
+			upperContentHeight -= minYOffset;
+			lowerHeight += minYOffset;
+			this.tlAxis.visible(true);
+			this.gUpperContent.attr("transform", `translate(0, ${upperContentHeight})`);
+			this.gUpperAxis.attr("transform", `translate(0, ${upperContentHeight})`);
+			this.gMiddleContent.attr("transform", `translate(0, ${upperContentHeight})`);
+		}
+		this.tlAxis.render();
+		const tlAxisBBox = this.tlAxis.getBBox();
+		const bucketData = [];
+		const bucketIndex = {};
+		for (const range of ranges) {
+			for (let i = 0; i < bucketData.length; ++i) {
+				const bucket = bucketData[i];
+				if (bucket.endPos + this.overlapTolerence() <= this.dataStartPos(range)) {
+					bucketIndex[range] = i;
+					bucket.endPos = this.dataEndPos(range);
+					break;
+				}
+			}
+			if (bucketIndex[range] === void 0) {
+				bucketIndex[range] = bucketData.length;
+				bucketData.push({ endPos: this.dataEndPos(range) });
+			}
+		}
+		const vbLower = this.isHorizontal() ? 0 + tlAxisBBox.height : 0 + tlAxisBBox.width;
+		const vbHigher = this.isHorizontal() ? lowerHeight - brAxisBBox.height : width - brAxisBBox.width;
+		this.verticalBands.range([vbLower, vbHigher]).domain(bucketData.map((_d, i) => i));
+		if (ranges.length > 0) this.updateEventRanges(events, ranges, bucketIndex, lowerHeight, tlAxisBBox, brAxisBBox, width);
+	}
+	updateEntityPins(events) {
+		let event_height = 0;
+		const context = this;
+		const entityPins = this.gUpperContent.selectAll(".entity_pin").data(events, (d) => d[0] + ":" + d[1]);
+		const eventFontColor_idx = this.eventFontColorColumn() ? this.columns().indexOf(this.eventFontColorColumn()) : -1;
+		const eventBorderColor_idx = this.eventBorderColorColumn() ? this.columns().indexOf(this.eventBorderColorColumn()) : -1;
+		const eventBackgroundColor_idx = this.eventBackgroundColorColumn() ? this.columns().indexOf(this.eventBackgroundColorColumn()) : -1;
+		const title_counts = {};
+		for (const d of events) {
+			const type = typeof d[context._title_idx] !== "undefined" ? d[context._title_idx] : d[0];
+			title_counts[type] = title_counts[type] ? title_counts[type] + 1 : 1;
+		}
+		const title_types = Object.keys(title_counts);
+		const title_group_offset = context.eventGroupOffset();
+		const 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) {
+			const 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) {
+			const entityPin = context.localEntityPin.get(this);
+			const _title = typeof d[context._title_idx] !== "undefined" ? d[context._title_idx] : entityPin.title();
+			const x_offset = context.dataStartPos(d) - 0;
+			let 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()) {
+				const parsed_start_time = context.brAxis.parse(d[context._startDate_idx]);
+				const 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
+			});
+			const 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) {
+			context.localEntityPin.get(this).target(null);
+		}).remove();
+		const event_offset = Math.abs(Math.min(events.length, context.eventGroupMod()) * context.eventGroupOffset());
+		return event_height + event_offset;
+	}
+	updateEventRanges(events, ranges, bucketIndex, eventRangeHeight, tlAxisBBox, brAxisBBox, width) {
+		const context = this;
+		const lines = this.gMiddleContent.selectAll(".line").data(events, (d) => {
+			return d[context._title_idx];
+		});
+		lines.enter().append("line").attr("class", "line").merge(lines).attr(this.isHorizontal() ? "x1" : "y1", (d) => this.dataStartPos(d) - 0).attr(this.isHorizontal() ? "x2" : "y2", (d) => 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();
+		const buckets = this.gMiddleContent.selectAll(".buckets").data(ranges, (d) => d[context._title_idx]);
+		buckets.enter().append("g").attr("class", "buckets").call(this._selection.enter.bind(this._selection)).each(function(d) {
+			const 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", (d) => context.isHorizontal() ? `translate(${this.dataStartPos(d)}, ${this.verticalBands(bucketIndex[d])}) ` : `translate(${this.verticalBands(bucketIndex[d])}, ${this.dataStartPos(d)}) `).each(function(d) {
+			const textBox = context.localRect.get(this);
+			const x = context.dataWidth(d) / 2;
+			const y = context.verticalBands.bandwidth() / 2;
+			const rectWidth = Math.max(context.dataWidth(d), 2);
+			const rectHeight = Math.max(context.verticalBands.bandwidth(), 2);
+			const fontHeightRatio = .618;
+			const paddingSize = (1 - fontHeightRatio) / 2 * rectHeight;
+			const fontSize = rectHeight * fontHeightRatio;
+			const iconSize = fontSize;
+			textBox.pos(context.isHorizontal() ? {
+				x,
+				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();
+	}
+	exit(domNode, element) {
+		this.brAxis.target(null);
+		this.tlAxis.target(null);
+		super.exit(domNode, element);
+	}
+	click(row, col, sel) {}
+	dblclick(row, col, sel) {}
+	enterEntityRect(textbox, d) {}
+	updateEntityRect(textbox, d) {}
+};
+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", void 0, { 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");
 
-  Permission to use, copy, modify, and/or distribute this software for any
-  purpose with or without fee is hereby granted.
+//#endregion
+//#region src/ReactGantt.ts
+var ReactGantt = class extends SVGZoomWidget {
+	_selection = new Utility.Selection(this);
+	_buckets;
+	_interpolateX;
+	_interpolateY;
+	_bucketsBySeries;
+	_dataBySeries;
+	_origIdxMap;
+	_seriesBackgrounds;
+	_maxFontSize;
+	_tooltip;
+	_minStart;
+	_maxEnd;
+	_title_idx = 0;
+	_startDate_idx = 1;
+	_endDate_idx = 2;
+	_icon_idx = -1;
+	_color_idx = -1;
+	_series_idx = -1;
+	_bucket_idx = -1;
+	_yoffset_idx = -1;
+	_maxX;
+	_maxY;
+	_rangeOptions = {
+		rangePadding: 2,
+		fontFamily: "Verdana",
+		fontSize: 12,
+		fill: "white",
+		stroke: "black",
+		textFill: "black",
+		cornerRadius: 3,
+		strokeWidth: 0
+	};
+	constructor(drawStartPosition = "origin") {
+		super();
+		this._drawStartPos = drawStartPosition;
+		this.showToolbar_default(false);
+		this._tooltip = new HTMLTooltip();
+		this._tooltip.tooltipHTML((d) => {
+			return `<div style="text-align:center;">${d[0]}<br/><br/>${d[1]} -&gt; ${d[2]}</div>`;
+		});
+		this._tooltip.followCursor(true);
+	}
+	selection(_) {
+		if (!arguments.length) return this._selection.get();
+		this._selection.set(_);
+		return this;
+	}
+	_rangeRenderer = LabelledRect;
+	rangeRenderer(_) {
+		if (!arguments.length) return this._rangeRenderer;
+		this._rangeRenderer = _;
+		return this._rangeRenderer;
+	}
+	enter(domNode, element) {
+		super.enter(domNode, element);
+		const context = this;
+		element.on("click", function(d) {
+			context._selection.clear();
+		});
+		this._tooltip.target(domNode);
+	}
+	update(domNode, element) {
+		super.update(domNode, element);
+		this.zoomExtent([.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;
+		const context = this;
+		const w = this.width();
+		const x0 = 0;
+		const x1 = w;
+		this._interpolateX = scaleLinear().domain([this._minStart, this._maxEnd]).range([x0, x1]);
+		this.data().sort((a, b) => a[1] - b[1]);
+		if (this._series_idx > -1) {
+			this._origIdxMap = {};
+			this._dataBySeries = {};
+			this._bucketsBySeries = {};
+			this.data().forEach((dataRow, origIdx) => {
+				const seriesKey = dataRow[this._series_idx];
+				if (!this._dataBySeries[seriesKey]) {
+					this._origIdxMap[seriesKey] = {};
+					this._dataBySeries[seriesKey] = [];
+				}
+				this._dataBySeries[seriesKey].push({
+					dataRow,
+					origIdx
+				});
+			});
+			const gutter = this.gutter();
+			let bucketOffset = 0;
+			const seriesKeys = Object.keys(this._dataBySeries);
+			seriesKeys.forEach((seriesKey) => {
+				this._dataBySeries[seriesKey].sort((a, b) => a.dataRow[1] - b.dataRow[1]);
+				this._bucketsBySeries[seriesKey] = this.calcBuckets(this._dataBySeries[seriesKey].map((n) => n.dataRow), 1, 2);
+				this._bucketsBySeries[seriesKey].bucketHeight = this.bucketHeight();
+				this._bucketsBySeries[seriesKey].bucketOffset = bucketOffset;
+				bucketOffset += (this._bucketsBySeries[seriesKey].bucketHeight + this.strokeWidth() + this.gutter()) * (this._bucketsBySeries[seriesKey].maxBucket + 1);
+				this._dataBySeries[seriesKey].forEach((n, i) => {
+					this._origIdxMap[seriesKey][n.origIdx] = i;
+				});
+			});
+			this._seriesBackgrounds = this._renderElement.selectAll(".series-background").data(seriesKeys.map((key) => {
+				return this._bucketsBySeries[key];
+			}));
+			this._seriesBackgrounds.join((enter) => enter.append("rect").attr("class", "series-background"), (update) => update, (exit) => exit.each(function(d) {
+				delete d.element;
+			}).remove()).attr("opacity", (d) => d.props && d.props.hidden ? 0 : 1).each(function(d, i) {
+				select(this).attr("x", 0).attr("y", d.bucketOffset - gutter / 2).attr("width", w).attr("height", (d.bucketHeight + gutter) * (d.maxBucket + 1) + gutter).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);
+		const interpedStart = this._interpolateX(this._minStart);
+		this.zoomTo([interpedStart, 0], 1);
+		const bucketHeight = this.bucketHeight();
+		this.setRangeOptions();
+		this._maxFontScale = bucketHeight - this.rangePadding() * 2;
+		this.measureDataText();
+		const itemSelection = this._renderElement.selectAll(".item").data(this.data());
+		const borderOffset1 = this.strokeWidth();
+		const borderOffset2 = borderOffset1 * 2;
+		itemSelection.join((enter) => enter.append("g").attr("class", "item").on("click.selectionBag", function(d, i) {
+			const _id = d.id === void 0 ? i : d.id;
+			if (context._selection.isSelected({
+				_id,
+				element: d.element
+			})) context._selection.clear();
+			else context._selection.click({
+				_id,
+				element: () => d.element
+			}, d3Event);
+			context.selectionChanged();
+			d3Event().stopPropagation();
+		}).on("click", function(d) {
+			const selected = d.element.classed("selected");
+			if (d[context.columns().length]) d.__lparam = d[context.columns().length];
+			context.click(d, "", selected);
+		}).on("dblclick", function(d) {
+			const 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);
+			const selected = d.element.classed("selected");
+			context.mousein(d, "", selected);
+		}).on("mouseover", function(d) {
+			const 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);
+			const selected = d.element.classed("selected");
+			context.mouseover(d, "", selected);
+		}).on("mouseout", function(d) {
+			context._tooltip.visible(false).render();
+			context.highlightItem(null, null);
+			const 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]);
+			const endX = context._interpolateX(d[2]);
+			if (context._series_idx > -1) {
+				const seriesKey = d[context._series_idx];
+				const bucket = context._bucketsBySeries[seriesKey].bucketMap[context._origIdxMap[seriesKey][i]];
+				d.y = context._bucketsBySeries[seriesKey].interpolateY(bucket) + context._bucketsBySeries[seriesKey].bucketOffset;
+			} else {
+				const _i = context._bucket_idx === -1 ? i : d[context._bucket_idx];
+				d.y = context._buckets.interpolateY(context._buckets.bucketMap[_i]);
+			}
+			d.props = {
+				...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(${d.x + d.props.width / 2} ${d.y + d.props.height / 2})`);
+		}), (update) => update, (exit) => exit.each(function(d) {
+			delete d.element;
+		}).remove()).attr("opacity", (d) => d.props && d.props.hidden ? 0 : 1).each(function(d, i) {
+			d.that = this;
+			if (context._series_idx > -1) {
+				const 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", (d) => {
+			const x1$1 = this._interpolateX(d[1]);
+			const xScale = w / (this._interpolateX(d[2]) - x1$1);
+			this.zoomTo([-x1$1 * xScale, 0], xScale);
+		});
+		element.on("dblclick.zoom", null);
+	}
+	exit(domNode, element) {
+		this._tooltip.target(null);
+		super.exit(domNode, element);
+	}
+	renderRangeElement(d, i, transformEach = false, options = {}, seriesKey) {
+		const borderOffset1 = options.strokeWidth;
+		const borderOffset2 = borderOffset1 * 2;
+		const padding = options.rangePadding;
+		let endX;
+		const x = isNaN(this._transform.x) ? 0 : this._transform.x;
+		const k = isNaN(this._transform.k) ? 1 : this._transform.k;
+		let b;
+		const 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 !== void 0) {
+			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 = {
+				...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 = {
+				...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 === void 0 && this._buckets.bucketScale < 1) d.props.height = this._buckets.bucketScale * bucketHeight;
+		if (d.element === void 0 && d.that) d.element = select(d.that);
+		d.element.attr("transform", `translate(${d.x + d.props.width / 2} ${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;
+		let 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 === void 0 && 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, {
+			...options,
+			...d.props,
+			text
+		}, d.that);
+	}
+	setRangeOptions() {
+		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()
+		};
+	}
+	_transform = {
+		k: 1,
+		x: 0,
+		y: 0
+	};
+	zoomed(transform) {
+		this._transform = transform;
+		switch (this.renderMode()) {
+			case "scale-all":
+				this._zoomScale = transform.k;
+				this._zoomTranslate = [transform.x, 0];
+				this._zoomG.attr("transform", `translate(${transform.x} 0)scale(${transform.k} 1)`);
+				break;
+			default:
+				const options = this._rangeOptions;
+				this.data().forEach((d, i) => {
+					if (this._color_idx > -1) options.fill = d[this._color_idx];
+					if (this._series_idx > -1) {
+						const seriesKey = d[this._series_idx];
+						this.renderRangeElement(d, i, true, options, seriesKey);
+					} else this.renderRangeElement(d, i, true, options);
+				});
+		}
+		this.zoomedHook(transform);
+	}
+	zoomedHook(transform) {}
+	calcBuckets(data, startKey, endKey, bucketKey) {
+		const bucketMap = {};
+		const bucketKeyMap = {};
+		const tol = this.overlapTolerence();
+		const buckets = [{ end: -Infinity }];
+		let maxBucket = 0;
+		if (bucketKey !== void 0) {
+			data.forEach((d, i) => {
+				bucketMap[i] = d[bucketKey];
+				bucketKeyMap[d[bucketKey]] = true;
+			});
+			maxBucket = Object.keys(bucketKeyMap).length;
+		} else data.forEach((d, i) => {
+			for (let 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] === void 0) {
+				bucketMap[i] = buckets.length;
+				const b = {};
+				b[endKey] = d[endKey];
+				buckets.push(b);
+			}
+			if (maxBucket < bucketMap[i]) maxBucket = bucketMap[i];
+		});
+		const height = (maxBucket + 1) * (this.bucketHeight() + this.gutter());
+		return {
+			bucketMap,
+			maxBucket,
+			bucketScale: this.height() / height,
+			interpolateY: scaleLinear().domain([0, maxBucket + 1]).range([0, Math.min(this.height(), height)])
+		};
+	}
+	data(_) {
+		const retVal = super.data.apply(this, arguments);
+		if (arguments.length > 0) {
+			this._minStart = Math.min(...this.data().map((n) => n[1])) ?? 0;
+			this._maxEnd = Math.max(...this.data().map((n) => n[2])) ?? 1;
+			this.measureDataText(true);
+		}
+		return retVal;
+	}
+	_textWidths;
+	_maxFontScale;
+	_characterWidths;
+	_prevFontFamily;
+	_prevFontSize;
+	measureDataText(forceMeasure = false) {
+		const textWidths = {};
+		const characterWidths = {};
+		const fontFamily = this.fontFamily();
+		const fontSize = this.fontSize();
+		const 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((d) => {
+				if (!textWidths[d[0]]) textWidths[d[0]] = Utility.textSize(d[0], fontFamily, fontSize).width;
+				d[0].split("").forEach((char) => {
+					if (!characterWidths[char]) characterWidths[char] = Utility.textSize(char, fontFamily, fontSize).width;
+				});
+			});
+			this._textWidths = textWidths;
+			this._characterWidths = characterWidths;
+		}
+		this._prevFontFamily = fontFamily;
+		this._prevFontSize = fontSize;
+	}
+	truncateText(text, width, scale = 1) {
+		if (this._textWidths[text] * scale < width) return text;
+		let ret = "";
+		let sum = 0;
+		const _width = width - this._characterWidths["."] * 3;
+		for (const char of text) {
+			sum += this._characterWidths[char];
+			if (sum < _width) ret += char;
+			else break;
+		}
+		return _width < 0 ? "" : ret + "...";
+	}
+	resize(_size) {
+		let retVal;
+		if (this.fitWidthToContent() || this.fitHeightToContent()) retVal = super.resize.call(this, {
+			width: _size.width,
+			height: this._maxY
+		});
+		else retVal = super.resize.apply(this, arguments);
+		return retVal;
+	}
+	selectionChanged() {}
+	highlightItem(_element, d) {}
+	click(row, _col, sel) {}
+	dblclick(row, _col, sel) {}
+	mousein(row, _col, sel) {}
+	mouseover(row, _col, sel) {}
+	mouseout(row, _col, sel) {}
+};
+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");
 
-  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 */
+//#endregion
+//#region src/ReactAxisGantt.ts
+var ReactAxisGantt = class extends SVGWidget {
+	_topAxis = new Axis("center").orientation("top").type("linear").shrinkToFit("none").overlapMode("hide").extend(0).tickFormat("d");
+	_gantt = new ReactGantt("center").stroke("#000000");
+	_bottomAxis = new Axis("center").orientation("bottom").type("linear").shrinkToFit("none").overlapMode("hide").extend(0).tickFormat("d");
+	_topAxisElement;
+	_contentElement;
+	_bottomAxisElement;
+	_topRect;
+	_contentRect;
+	_bottomRect;
+	rangeRenderer;
+	constructor() {
+		super();
+		this._drawStartPos = "origin";
+		this.rangeRenderer = function() {
+			const ret = this._gantt.rangeRenderer.apply(this._gantt, arguments);
+			if (!arguments.length) return ret;
+			return this;
+		};
+	}
+	selection(_) {
+		if (!arguments.length) return this._gantt.selection();
+		this._gantt.selection(_);
+		return this;
+	}
+	resizeWrappers() {
+		const w = this.width();
+		const h = this.height();
+		const axisHeight = this.axisHeight();
+		const contentHeight = h - axisHeight * 2;
+		const 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 ${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 ${axisHeight + contentHeight + borderOffset1})`);
+		this._bottomAxis.resize({
+			height: axisHeight,
+			width: w
+		});
+	}
+	enter(domNode, element) {
+		super.enter(domNode, element);
+		this._gantt.click = (row, col, sel) => {
+			this.click(row, col, sel);
+		};
+		this._gantt.dblclick = (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 = (transform) => {
+			this.onzoom(transform);
+		};
+	}
+	onzoom(transform) {
+		const w = this.width();
+		const low = this._gantt._minStart;
+		const range = this._gantt._maxEnd - low;
+		const wpp = range / w;
+		const nextLow = Math.floor(low - wpp * (transform.x / transform.k));
+		const 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();
+	}
+	update(domNode, element) {
+		super.update(domNode, element);
+		this._topAxis.tickFormat(this.tickFormat()).render();
+		this._bottomAxis.tickFormat(this.tickFormat()).render();
+		this._gantt.render();
+	}
+	exit(domNode, element) {
+		this._bottomAxis.target(null);
+		this._gantt.target(null);
+		this._topAxis.target(null);
+		super.exit(domNode, element);
+	}
+	columns(_) {
+		const retVal = super.columns.apply(this, arguments);
+		if (arguments.length > 0) this._gantt.columns(_);
+		return retVal;
+	}
+	data(_) {
+		const retVal = super.data.apply(this, arguments);
+		if (arguments.length > 0) {
+			const ganttData = this.data().map((n) => {
+				const ret = [...n];
+				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 = Math.min(...ganttData.map((n) => n[1])) ?? 0;
+			this._gantt._maxEnd = Math.max(...ganttData.map((n) => n[2])) ?? 1;
+			this._gantt.data(ganttData);
+		}
+		return retVal;
+	}
+	resize(_size) {
+		const retVal = super.resize.apply(this, arguments);
+		if (this._topAxisElement) this.resizeWrappers();
+		return retVal;
+	}
+	click(row, col, sel) {}
+	dblclick(row, col, sel) {}
+	tooltip() {
+		return this._gantt._tooltip;
+	}
+};
+ReactAxisGantt.prototype._class += " timeline_ReactAxisGantt";
+ReactAxisGantt.prototype.publish("tickFormat", null, "string", "Format rule applied to axis tick labels", void 0, { 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 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);
-  };
+//#endregion
+//#region src/ReactAxisGanttSeries.ts
+var ReactAxisGanttSeries = class extends Border2 {
+	_topAxis = new Axis("origin").orientation("top").type("linear").shrinkToFit("none").overlapMode("hide").extend(0).tickFormat("d");
+	_gantt = new ReactGantt("origin").stroke("#000000").fitHeightToContent(true);
+	_bottomAxis = new Axis("origin").orientation("bottom").type("linear").shrinkToFit("none").overlapMode("hide").extend(0).tickFormat("d");
+	_topAxisElement;
+	_contentElement;
+	_bottomAxisElement;
+	_topRect;
+	_contentRect;
+	_bottomRect;
+	constructor() {
+		super();
+		this.centerOverflowX_default("hidden");
+		this.centerOverflowY_default("auto");
+	}
+	selection(_) {
+		if (!arguments.length) return this._gantt.selection();
+		this._gantt.selection(_);
+		return this;
+	}
+	rangeRenderer(_) {
+		const ret = this._gantt.rangeRenderer.apply(this._gantt, arguments);
+		if (!arguments.length) return ret;
+		return this;
+	}
+	resizeWrappers() {
+		const w = this.width();
+		const h = this.height();
+		const axisHeight = this.axisHeight();
+		const 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();
+	}
+	enter(domNode, element) {
+		super.enter(domNode, element);
+		this._gantt.click = (row, col, sel) => {
+			this.click(row, col, sel);
+		};
+		this._gantt.dblclick = (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 = (transform) => {
+			this.onzoom(transform);
+		};
+	}
+	onzoom(transform) {
+		const w = this.width();
+		const low = this._gantt._minStart;
+		const range = this._gantt._maxEnd - low;
+		const wpp = range / w;
+		const nextLow = Math.floor(low - wpp * (transform.x / transform.k));
+		const 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();
+	}
+	update(domNode, element) {
+		super.update(domNode, element);
+		this._topAxis.tickFormat(this.tickFormat()).render();
+		this._bottomAxis.tickFormat(this.tickFormat()).render();
+		this._gantt.render();
+	}
+	columns(_) {
+		const retVal = super.columns.apply(this, arguments);
+		if (arguments.length > 0) this._gantt.columns(_);
+		return retVal;
+	}
+	data(_) {
+		const retVal = super.data.apply(this, arguments);
+		if (arguments.length > 0) {
+			const ganttData = this.data().map((n) => {
+				const ret = [...n];
+				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, (n) => n[1]);
+			this._gantt._maxEnd = max(ganttData, (n) => n[2]);
+			this._gantt.data(ganttData);
+		}
+		return retVal;
+	}
+	resize(_size) {
+		const retVal = super.resize.apply(this, arguments);
+		if (this._topAxisElement) this.resizeWrappers();
+		return retVal;
+	}
+	click(row, col, sel) {}
+	dblclick(row, col, sel) {}
+	tooltip() {
+		return this._gantt._tooltip;
+	}
+};
+ReactAxisGanttSeries.prototype._class += " timeline_ReactAxisGanttSeries";
+ReactAxisGanttSeries.prototype.publish("tickFormat", null, "string", "Format rule applied to axis tick labels", void 0, { 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");
 
-  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 __());
-  }
+//#endregion
+//#region src/ReactTimeline.ts
+var ReactTimeline = class extends ReactAxisGantt {
+	_axisLabelFormatter;
+	constructor() {
+		super();
+		this._drawStartPos = "origin";
+		this._topAxis.type("time");
+		this._bottomAxis.type("time");
+		this.tooltipHTML((d) => {
+			const parser = timeParse("%Q");
+			const startTime = parser(d[1]);
+			const endTime = parser(d[2]);
+			const formatter = timeFormat(this.tooltipTimeFormat());
+			return `<div style="text-align:center;">${d[0]}<br/><br/>${formatter(startTime)} -&gt; ${formatter(endTime)}</div>`;
+		});
+	}
+	update(domNode, element) {
+		super.update(domNode, element);
+		if (this.timePattern_exists()) {
+			let minTimestamp = Infinity;
+			let maxTimestamp = -Infinity;
+			let lowDateStr = "";
+			let highDateStr = "";
+			this.data().map((n) => {
+				const start = new Date(n[1]).getTime();
+				const end = new Date(n[2]).getTime();
+				if (minTimestamp > start) {
+					minTimestamp = start;
+					lowDateStr = "" + n[1];
+				}
+				if (maxTimestamp < end) {
+					maxTimestamp = end;
+					highDateStr = "" + n[2];
+				}
+			});
+			const axisTickFormat = this._axisLabelFormatter ? this._axisLabelFormatter : this.tickFormat_exists && this.tickFormat_exists() ? this.tickFormat() : void 0;
+			this._topAxis.type("time").timePattern(this.timePattern()).overlapMode("none").low(lowDateStr).high(highDateStr);
+			this._bottomAxis.type("time").timePattern(this.timePattern()).overlapMode("none").low(lowDateStr).high(highDateStr);
+			if (axisTickFormat) {
+				this._topAxis.tickFormat(axisTickFormat);
+				this._bottomAxis.tickFormat(axisTickFormat);
+			} else {
+				this._topAxis.tickFormat_reset();
+				this._bottomAxis.tickFormat_reset();
+			}
+			this._gantt._minStart = minTimestamp;
+			this._gantt._maxEnd = maxTimestamp;
+		}
+	}
+	tooltipHTML(callback) {
+		this._tooltipHTML = callback;
+		this.tooltip().tooltipHTML(this._tooltipHTML);
+		return this;
+	}
+	parseAxisValue(v) {
+		const parsedTime = timeParse("%Q")(v);
+		return timeFormat(this.timePattern())(parsedTime);
+	}
+	onzoom(transform) {
+		const w = this.width();
+		const low = this._gantt._minStart;
+		const range = this._gantt._maxEnd - low;
+		const wpp = range / w;
+		const nextLow = Math.floor(low - wpp * (transform.x / transform.k));
+		const 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();
+	}
+};
+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 __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);
-  };
+//#endregion
+//#region src/ReactTimelineSeries.ts
+var parseTime = timeParse("%Q");
+var ReactTimelineSeries = class extends ReactAxisGanttSeries {
+	_axisLabelFormatter;
+	constructor() {
+		super();
+		this._topAxis.type("time");
+		this._bottomAxis.type("time");
+		this.tooltipHTML((d) => {
+			const startTime = parseTime(d[1]);
+			const endTime = parseTime(d[2]);
+			const formatter = timeFormat(this.tooltipTimeFormat());
+			return `<div style="text-align:center;">${d[0]}<br/><br/>${formatter(startTime)} -&gt; ${formatter(endTime)}</div>`;
+		});
+	}
+	update(domNode, element) {
+		super.update(domNode, element);
+		if (this.timePattern_exists()) {
+			let minTimestamp = Infinity;
+			let maxTimestamp = -Infinity;
+			let lowDateStr = "";
+			let highDateStr = "";
+			this.data().forEach((n) => {
+				const start = new Date(n[1]).getTime();
+				const end = new Date(n[2]).getTime();
+				if (minTimestamp > start) {
+					minTimestamp = start;
+					lowDateStr = "" + n[1];
+				}
+				if (maxTimestamp < end) {
+					maxTimestamp = end;
+					highDateStr = "" + n[2];
+				}
+			});
+			const axisTickFormat = this._axisLabelFormatter ? this._axisLabelFormatter : this.tickFormat_exists && this.tickFormat_exists() ? this.tickFormat() : void 0;
+			this._topAxis.type("time").timePattern(this.timePattern()).overlapMode("none").low(lowDateStr).high(highDateStr);
+			this._bottomAxis.type("time").timePattern(this.timePattern()).overlapMode("none").low(lowDateStr).high(highDateStr);
+			if (axisTickFormat) {
+				this._topAxis.tickFormat(axisTickFormat);
+				this._bottomAxis.tickFormat(axisTickFormat);
+			} else {
+				this._topAxis.tickFormat_reset();
+				this._bottomAxis.tickFormat_reset();
+			}
+			this._gantt._minStart = minTimestamp;
+			this._gantt._maxEnd = maxTimestamp;
+		}
+	}
+	tooltipHTML(callback) {
+		this._tooltipHTML = callback;
+		this.tooltip().tooltipHTML(this._tooltipHTML);
+		return this;
+	}
+	parseAxisValue(v) {
+		const parsedTime = parseTime(v);
+		return timeFormat(this.timePattern())(parsedTime);
+	}
+	onzoom(transform) {
+		const w = this.width();
+		const low = this._gantt._minStart;
+		const range = this._gantt._maxEnd - low;
+		const wpp = range / w;
+		const nextLow = Math.floor(low - wpp * (transform.x / transform.k));
+		const 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();
+	}
+	_tooltipHTML;
+};
+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");
 
-  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 = common.local();
-          _this.localEntityPin = common.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;
-          api.ITooltip.call(_this);
-          common.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 chart.Axis()
-              .type("time");
-          _this.brAxis = new chart.Axis()
-              .type("time");
-          _this.verticalBands = common.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 common.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 = common.timeParse(this.timePattern());
-                  var formatter = common.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(), common.zoomIdentity.translate(0, this.isHorizontal() ? 0 : this.height()));
-      };
-      MiniGantt.prototype.zoomed = function () {
-          this.transform = common.d3Event().transform;
-          this.render();
-      };
-      MiniGantt.prototype.enter = function (domNode, element) {
-          var _this = this;
-          _super.prototype.enter.call(this, domNode, element);
-          this._zoom = common.zoom()
-              .scaleExtent([0, this.maxZoom()])
-              .on("zoom", function () {
-              _this.zoomed();
-          });
-          this.background = element.append("rect")
-              .attr("fill", "white")
-              .attr("opacity", 0)
-              .on("dblclick", function () {
-              common.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 = common.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) {
-              common.select(this).raise();
-          })
-              .each(function (d, i) {
-              var entityPin = new common.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;
-              common.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 common.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;
-  }(common.SVGWidget));
-  MiniGantt.prototype._class += " timeline_MiniGantt";
-  MiniGantt.prototype.implements(api.ITooltip.prototype);
-  MiniGantt.prototype.mixin(common.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 common.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 = react.LabelledRect;
-          _this._transform = { k: 1, x: 0, y: 0 };
-          _this._drawStartPos = drawStartPosition;
-          _this.showToolbar_default(false);
-          _this._tooltip = new html.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 = common.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) {
-                  common.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; }
-                  }, common.d3Event);
-              }
-              context.selectionChanged();
-              common.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(common.select(this), d);
-              var selected = d.element.classed("selected");
-              context.mousein(d, "", selected);
-          })
-              .on("mouseover", function (d) {
-              var d3evt = common.d3Event();
-              context._tooltip._triggerElement = d.element;
-              context._tooltip._cursorLoc = [
-                  d3evt.clientX,
-                  d3evt.clientY
-              ];
-              context._tooltip
-                  .data(d)
-                  .visible(true)
-                  .fitContent(true)
-                  .render();
-              context.highlightItem(common.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 = common.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 = common.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;
-          }
-          react.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: common.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["."] = common.Utility.textSize(".", fontFamily, fontSize).width;
-              this.data().forEach(function (d) {
-                  if (!textWidths[d[0]]) {
-                      textWidths[d[0]] = common.Utility.textSize(d[0], fontFamily, fontSize).width;
-                  }
-                  d[0].split("").forEach(function (char) {
-                      if (!characterWidths[char]) {
-                          characterWidths[char] = common.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;
-  }(common.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 chart.Axis("center")
-              .orientation("top")
-              .type("linear")
-              .shrinkToFit("none")
-              .overlapMode("hide")
-              .extend(0)
-              .tickFormat("d");
-          _this._gantt = new ReactGantt("center")
-              .stroke("#000000");
-          _this._bottomAxis = new chart.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;
-  }(common.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 chart.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 chart.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 = common.min(ganttData, function (n) { return n[1]; });
-              this._gantt._maxEnd = common.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;
-  }(layout.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 = common.timeParse("%Q");
-              var startTime = parser(d[1]);
-              var endTime = parser(d[2]);
-              var formatter = common.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 = common.timeParse("%Q");
-          var parsedTime = parseTime(v);
-          var formatTime = common.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 = common.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 = common.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 = common.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");
-
-  exports.BUILD_VERSION = BUILD_VERSION;
-  exports.MiniGantt = MiniGantt;
-  exports.PKG_NAME = PKG_NAME;
-  exports.PKG_VERSION = PKG_VERSION;
-  exports.ReactAxisGantt = ReactAxisGantt;
-  exports.ReactAxisGanttSeries = ReactAxisGanttSeries;
-  exports.ReactGantt = ReactGantt;
-  exports.ReactTimeline = ReactTimeline;
-  exports.ReactTimelineSeries = ReactTimelineSeries;
-
-}));
-//# sourceMappingURL=index.js.map
+//#endregion
+export { BUILD_VERSION, MiniGantt, PKG_NAME, PKG_VERSION, ReactAxisGantt, ReactAxisGanttSeries, ReactGantt, ReactTimeline, ReactTimelineSeries };
+//# sourceMappingURL=index.js.map!function(){try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".timeline_MiniGantt .line{fill:none;stroke:#d3d3d3;opacity:.7}.timeline_MiniGantt .common_TextBox .rect{fill:#87cefa;stroke:#00f;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:#0000;opacity:.8}.timeline_MiniGantt rect{shape-rendering:crispEdges}\n/*$vite$:1*/")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();