tsichart-core 1.0.0

package/dist/ContextMenu-DABSkTA2.js

@@ -0,0 +1,197 @@
+import { _ as __extends } from './_tslib-5_9pMg1F.js';
+import * as d3 from 'd3';
+import { C as Component } from './Component-CofgyEw0.js';
+
+var ACTIONELEMENTHEIGHT = 28;
+var ACTIONELEMENTMAXWIDTH = 200;
+var ACTIONELEMENTCONTAINERMAXHEIGHT = 200;
+var VERTICALPADDING = 4;
+var ContextMenu = /** @class */ (function (_super) {
+    __extends(ContextMenu, _super);
+    function ContextMenu(drawChart, renderTarget) {
+        var _this = _super.call(this, renderTarget) || this;
+        _this.contextMenuVisible = false;
+        _this.drawChart = drawChart;
+        _this.contextMenuElement = d3.select(renderTarget).insert("div", ":first-child")
+            .attr("class", "tsi-contextMenu")
+            .style("left", "0px")
+            .style("top", "0px");
+        return _this;
+    }
+    ContextMenu.prototype.launchSubMenu = function (parent, subMenuActions, subLevel, top) {
+        var container = this.contextMenuElement
+            .selectAll(".tsi-actionElementContainer".concat(subLevel))
+            .data([{ subLevel: subLevel }]);
+        var enteredContainer = container.enter()
+            .append('div')
+            .attr("class", function (d) { return "tsi-actionElementContainer tsi-actionElementContainer".concat(d.subLevel); })
+            .merge(container)
+            .style('max-height', "".concat(ACTIONELEMENTCONTAINERMAXHEIGHT, "px"))
+            .style('display', 'block');
+        this.createActionElements(enteredContainer, subMenuActions, subLevel);
+        this.positionAEC(enteredContainer, subMenuActions.length, top, subLevel);
+        container.exit().remove();
+    };
+    ContextMenu.prototype.positionAEC = function (container, subMenuActionsCount, top, subLevel) {
+        this.verticalPositionAEC(container, top, subMenuActionsCount, subLevel);
+        this.horizontalPositionAEC(container, subLevel);
+    };
+    ContextMenu.prototype.shouldHorizontalFlip = function (rawLeft) {
+        var containerLeft = rawLeft + this.left;
+        var totalWidth = d3.select(this.renderTarget).node().getBoundingClientRect().width;
+        return ((containerLeft + ACTIONELEMENTMAXWIDTH) > totalWidth);
+    };
+    ContextMenu.prototype.shouldVerticalFlip = function (rawTop, elementCount) {
+        var containerTop = rawTop + this.top;
+        var totalHeight = d3.select(this.renderTarget).node().getBoundingClientRect().height;
+        var heightOfElements = Math.min(elementCount * ACTIONELEMENTHEIGHT + (VERTICALPADDING * 2), ACTIONELEMENTCONTAINERMAXHEIGHT);
+        return ((containerTop + heightOfElements) > totalHeight);
+    };
+    //determine position relative to the chart as a whole
+    ContextMenu.prototype.getRelativeHorizontalPosition = function (node, isLeft) {
+        if (isLeft === void 0) { isLeft = true; }
+        return node.getBoundingClientRect().x + (isLeft ? 0 : node.getBoundingClientRect().width) - this.renderTarget.getBoundingClientRect().x;
+    };
+    ContextMenu.prototype.verticalPositionAEC = function (actionElementContainer, rawTop, elementCount, subLevel) {
+        var totalHeight = this.contextMenuElement.node().getBoundingClientRect().height;
+        if (this.shouldVerticalFlip(rawTop, elementCount)) {
+            actionElementContainer.style('bottom', "".concat((totalHeight - rawTop) - (subLevel === 0 ? 0 : ACTIONELEMENTHEIGHT + VERTICALPADDING), "px"))
+                .style('top', null);
+        }
+        else {
+            actionElementContainer.style('top', "".concat(rawTop - VERTICALPADDING, "px"))
+                .style('bottom', null);
+        }
+    };
+    ContextMenu.prototype.horizontalPositionAEC = function (actionElementContainer, subLevel) {
+        var leftPosition = 0;
+        var rightPosition = 0;
+        if (subLevel !== 0) {
+            var oneLevelUp = this.contextMenuElement.selectAll(".tsi-actionElementContainer".concat(subLevel - 1));
+            if (oneLevelUp.size()) {
+                rightPosition = this.getRelativeHorizontalPosition(oneLevelUp.nodes()[0], false) - this.left;
+                leftPosition = this.getRelativeHorizontalPosition(oneLevelUp.nodes()[0], true) - this.left;
+            }
+        }
+        if (this.shouldHorizontalFlip(rightPosition)) {
+            actionElementContainer.style('left', null)
+                .style('right', "".concat(0 - leftPosition, "px"));
+        }
+        else {
+            actionElementContainer.style('left', "".concat(rightPosition, "px"))
+                .style('right', null);
+        }
+    };
+    ContextMenu.prototype.getActionElementContainerTop = function (launchedFromActionNode) {
+        if (launchedFromActionNode === void 0) { launchedFromActionNode = null; }
+        if (launchedFromActionNode === null) {
+            return 0;
+        }
+        return launchedFromActionNode.getBoundingClientRect().top -
+            this.contextMenuElement.node().getBoundingClientRect().top;
+    };
+    ContextMenu.prototype.removeSubMenusAboveLevel = function (level) {
+        d3.select(this.renderTarget).selectAll('.tsi-actionElementContainer').filter(function (subMenuD) {
+            return (subMenuD.subLevel > level);
+        }).remove();
+    };
+    ContextMenu.prototype.createActionElements = function (container, actions, subLevel) {
+        if (subLevel === void 0) { subLevel = 0; }
+        var self = this;
+        var actionElements = container.selectAll(".tsi-actionElement")
+            .data(actions.map(function (a) {
+            a.subLevel = subLevel;
+            return a;
+        }));
+        var actionElementsEntered = actionElements.enter()
+            .append("div")
+            .attr("class", "tsi-actionElement")
+            .classed('tsi-hasSubMenu', function (d) { return d.isNested; })
+            .merge(actionElements)
+            .text(function (d) { return d.name; })
+            .on('mouseenter', function (event, d) {
+            var e = actionElementsEntered.nodes();
+            var i = e.indexOf(event.currentTarget);
+            if (d.isNested) {
+                self.launchSubMenu(d3.select(this), d.subActions, subLevel + 1, self.getActionElementContainerTop(this));
+                self.subMenuFromActionIndex = i;
+                self.subMenuFromSubLevel = d.subLevel;
+                return;
+            }
+            if ((d.subLevel === self.subMenuFromSubLevel && i !== self.subMenuFromActionIndex) || d.subLevel < self.subMenuFromSubLevel) {
+                self.removeSubMenusAboveLevel(d.subLevel);
+            }
+        })
+            .on("click", function (event, d) {
+            if (d.isNested) {
+                return;
+            }
+            if (self.endTime) { // if endTime is present, this is a brush action
+                var startTime = self.startTime ? self.startTime.toISOString().slice(0, -5) + "Z" : null;
+                var endTime = self.endTime ? self.endTime.toISOString().slice(0, -5) + "Z" : null;
+                d.action(startTime, endTime);
+            }
+            else {
+                var timestamp = self.startTime ? self.startTime.toISOString().slice(0, -5) + "Z" : null;
+                d.action(self.ae, self.splitBy, timestamp, event);
+            }
+            self.hide();
+            if (self.onClick)
+                self.onClick();
+        });
+        actionElements.exit().remove();
+    };
+    ContextMenu.prototype.draw = function (chartComponentData, renderTarget, options, mousePosition, aggKey, splitBy, onClick, startTime, endTime, event) {
+        var _this = this;
+        if (onClick === void 0) { onClick = null; }
+        if (startTime === void 0) { startTime = null; }
+        if (endTime === void 0) { endTime = null; }
+        this.contextMenuVisible = true;
+        if (!endTime) {
+            this.actions = chartComponentData.displayState[aggKey].contextMenuActions;
+            this.ae = chartComponentData.displayState[aggKey].aggregateExpression;
+        }
+        else {
+            this.actions = options.brushContextMenuActions;
+        }
+        this.splitBy = splitBy;
+        this.startTime = startTime;
+        this.endTime = endTime;
+        this.onClick = onClick;
+        _super.prototype.themify.call(this, this.contextMenuElement, options.theme);
+        this.left = mousePosition[0];
+        this.top = mousePosition[1];
+        this.contextMenuElement
+            .style('left', this.left + 'px')
+            .style('top', this.top + 'px');
+        this.contextMenuElement.selectAll('*').remove();
+        this.contextMenuElement.style("display", "block")
+            .on('mouseleave', function () {
+            _this.removeSubMenusAboveLevel(0);
+        });
+        var actionContainer = this.contextMenuElement
+            .selectAll('.tsi-actionElementContainer0')
+            .data([{ subLevel: 0 }]);
+        var actionContainerEntered = actionContainer.enter()
+            .append('div')
+            .attr('class', 'tsi-actionElementContainer tsi-actionElementContainer0');
+        this.createActionElements(actionContainerEntered, this.actions);
+        this.positionAEC(actionContainerEntered, this.actions.length, 0, 0);
+        var self = this;
+        d3.select(this.renderTarget).on("click", function (event) {
+            if (!d3.select(event.srcElement).classed('tsi-actionElement')) {
+                if (onClick) {
+                    onClick();
+                }
+                self.hide();
+            }
+        });
+    };
+    ContextMenu.prototype.hide = function () {
+        this.contextMenuElement.style("display", "none");
+        this.contextMenuVisible = false;
+    };
+    return ContextMenu;
+}(Component));
+
+export { ContextMenu as C };

package/dist/DateTimeButton-CMcCxc8x.d.ts

@@ -0,0 +1,16 @@
+import { C as ChartComponent } from './ChartComponent-DTcc6aED.js';
+
+declare class DateTimeButton extends ChartComponent {
+    protected dateTimePicker: any;
+    private pickerIsVisible;
+    protected minMillis: number;
+    protected maxMillis: number;
+    protected onSet: any;
+    protected dateTimeButton: any;
+    protected dateTimePickerContainer: any;
+    constructor(renderTarget: Element);
+    protected buttonDateTimeFormat(millis: any): string;
+    render(chartOptions: any, minMillis: any, maxMillis: any, onSet?: any): void;
+}
+
+export { DateTimeButton as D };

package/dist/DateTimeButton-Ca1487GR.js

@@ -0,0 +1,38 @@
+import { _ as __extends } from './_tslib-5_9pMg1F.js';
+import * as d3 from 'd3';
+import { U as Utils } from './Utils-C_j8IgZh.js';
+import { C as ChartComponent } from './ChartComponent-DnKLTxWe.js';
+
+var DateTimeButton = /** @class */ (function (_super) {
+    __extends(DateTimeButton, _super);
+    function DateTimeButton(renderTarget) {
+        var _this = _super.call(this, renderTarget) || this;
+        _this.pickerIsVisible = false;
+        return _this;
+    }
+    DateTimeButton.prototype.buttonDateTimeFormat = function (millis) {
+        return Utils.timeFormat(!this.chartOptions.minutesForTimeLabels, !this.chartOptions.minutesForTimeLabels, this.chartOptions.offset, this.chartOptions.is24HourTime, 0, null, this.chartOptions.dateLocale)(millis);
+    };
+    DateTimeButton.prototype.render = function (chartOptions, minMillis, maxMillis, onSet) {
+        if (onSet === void 0) { onSet = null; }
+        this.chartOptions.setOptions(chartOptions);
+        this.minMillis = minMillis;
+        this.maxMillis = maxMillis;
+        this.onSet = onSet ? onSet : function () { };
+        var dateTimeContainer = d3.select(this.renderTarget);
+        if (!this.dateTimeButton) {
+            this.dateTimeButton = dateTimeContainer.append("button")
+                .classed('tsi-dateTimeButton', true);
+        }
+        if (!this.dateTimePickerContainer) {
+            this.dateTimePickerContainer = dateTimeContainer.append('div').classed('tsi-dateTimePickerContainer', true)
+                .attr('role', 'dialog')
+                .attr('aria-label', this.getString('a time selection control dialog'));
+            this.dateTimePickerContainer.style('display', 'none');
+        }
+        _super.prototype.themify.call(this, d3.select(this.renderTarget), this.chartOptions.theme);
+    };
+    return DateTimeButton;
+}(ChartComponent));
+
+export { DateTimeButton as D };

package/dist/DateTimeButtonRange-DpgfhHQt.js

@@ -0,0 +1,71 @@
+import { _ as __extends } from './_tslib-5_9pMg1F.js';
+import * as d3 from 'd3';
+import { D as DateTimeButton } from './DateTimeButton-Ca1487GR.js';
+import { D as DateTimePicker } from './DateTimePicker-BH6qiVfQ.js';
+import { U as Utils } from './Utils-C_j8IgZh.js';
+
+var DateTimeButtonRange = /** @class */ (function (_super) {
+    __extends(DateTimeButtonRange, _super);
+    function DateTimeButtonRange(renderTarget) {
+        return _super.call(this, renderTarget) || this;
+    }
+    DateTimeButtonRange.prototype.setButtonText = function (fromMillis, toMillis, isRelative, quickTime) {
+        var fromString = this.buttonDateTimeFormat(fromMillis);
+        var tzAbbr = Utils.createTimezoneAbbreviation(this.chartOptions.offset);
+        var toString = this.buttonDateTimeFormat(toMillis) + ' (' + tzAbbr + ')';
+        if (!isRelative) {
+            this.dateTimeButton.text("".concat(fromString, " - ").concat(toString));
+            this.dateTimeButton.attr('aria-label', "".concat(this.getString('a button to launch a time selection dialog current selected time is '), " ").concat(fromString, " - ").concat(toString));
+        }
+        else {
+            var quickTimeText = this.dateTimePicker.getQuickTimeText(quickTime);
+            var text = quickTimeText !== null ? "".concat(quickTimeText, " (").concat(fromString, " - ").concat(toString, ")") : "".concat(fromString, " - ").concat(this.getString('Latest'), " (").concat(toString, ")");
+            this.dateTimeButton.text(text);
+            this.dateTimeButton.attr('aria-label', "".concat(this.getString('a button to launch a time selection dialog current selected time is '), " ").concat(text));
+        }
+    };
+    DateTimeButtonRange.prototype.onClose = function () {
+        this.dateTimePickerContainer.style("display", "none");
+        this.dateTimeButton.node().focus();
+    };
+    DateTimeButtonRange.prototype.render = function (chartOptions, minMillis, maxMillis, fromMillis, toMillis, onSet, onCancel) {
+        var _this = this;
+        if (chartOptions === void 0) { chartOptions = {}; }
+        if (fromMillis === void 0) { fromMillis = null; }
+        if (toMillis === void 0) { toMillis = null; }
+        if (onSet === void 0) { onSet = null; }
+        if (onCancel === void 0) { onCancel = null; }
+        _super.prototype.render.call(this, chartOptions, minMillis, maxMillis, onSet);
+        d3.select(this.renderTarget).classed('tsi-dateTimeContainerRange', true);
+        this.fromMillis = fromMillis;
+        this.toMillis = toMillis;
+        this.onCancel = onCancel ? onCancel : function () { };
+        if (!this.dateTimePicker) {
+            this.dateTimePicker = new DateTimePicker(this.dateTimePickerContainer.node());
+        }
+        this.setButtonText(fromMillis, toMillis, toMillis === maxMillis, this.toMillis - this.fromMillis);
+        this.dateTimeButton.on("click", function () {
+            if (_this.dateTimePickerContainer.style("display") !== "none") {
+                _this.onClose(); // close if already open
+            }
+            else {
+                _this.chartOptions.dTPIsModal = true;
+                _this.dateTimePickerContainer.style("display", "block");
+                _this.dateTimePicker.render(_this.chartOptions, minMillis, maxMillis, _this.fromMillis, _this.toMillis, function (fromMillis, toMillis, offset, isRelative, currentQuickTime) {
+                    _this.chartOptions.offset = offset;
+                    _this.fromMillis = fromMillis;
+                    _this.toMillis = toMillis;
+                    _this.setButtonText(fromMillis, toMillis, isRelative, currentQuickTime);
+                    _this.onSet(fromMillis, toMillis, offset, isRelative, currentQuickTime);
+                    _this.onClose();
+                }, function () {
+                    _this.onClose();
+                    _this.onCancel();
+                });
+            }
+        });
+    };
+    return DateTimeButtonRange;
+}(DateTimeButton));
+
+export { DateTimeButtonRange as D };

package/dist/DateTimeButtonRange.d.ts

@@ -0,0 +1,19 @@
+import { D as DateTimeButton } from './DateTimeButton-CMcCxc8x.js';
+import './ChartComponent-DTcc6aED.js';
+import './Enums-ChUuTtHV.js';
+import './Component-Rp30sSAW.js';
+import './Interfaces-BKRQ685G.js';
+import './ChartComponentData-D5wuQmmZ.js';
+import './EllipsisMenu.js';
+
+declare class DateTimeButtonRange extends DateTimeButton {
+    private onCancel;
+    private fromMillis;
+    private toMillis;
+    constructor(renderTarget: Element);
+    private setButtonText;
+    private onClose;
+    render(chartOptions: any, minMillis: number, maxMillis: number, fromMillis?: number, toMillis?: number, onSet?: any, onCancel?: any): void;
+}
+
+export { DateTimeButtonRange as default };

package/dist/DateTimeButtonRange.js

@@ -0,0 +1,15 @@
+export { D as default } from './DateTimeButtonRange-DpgfhHQt.js';
+import './_tslib-5_9pMg1F.js';
+import 'd3';
+import './DateTimeButton-Ca1487GR.js';
+import './Utils-C_j8IgZh.js';
+import 'moment-timezone';
+import './ChartComponent-DnKLTxWe.js';
+import './Component-CofgyEw0.js';
+import './Grid-DfFAkeeV.js';
+import 'split.js';
+import './EllipsisMenu-30FNqoIv.js';
+import './DateTimePicker-BH6qiVfQ.js';
+import './pikaday-DMSzaLH6.js';
+import 'moment';
+import './TimezonePicker-ClfP1lBL.js';

package/dist/DateTimeButtonSingle-C6cTx5VO.js

@@ -0,0 +1,48 @@
+import { _ as __extends } from './_tslib-5_9pMg1F.js';
+import * as d3 from 'd3';
+import { D as DateTimeButton } from './DateTimeButton-Ca1487GR.js';
+import { S as SingleDateTimePicker } from './SingleDateTimePicker-7anflEq8.js';
+
+var DateTimeButtonSingle = /** @class */ (function (_super) {
+    __extends(DateTimeButtonSingle, _super);
+    function DateTimeButtonSingle(renderTarget) {
+        var _this = _super.call(this, renderTarget) || this;
+        _this.sDTPOnSet = function (millis) {
+            if (millis === void 0) { millis = null; }
+            if (millis !== null) {
+                _this.dateTimeButton.text(_this.buttonDateTimeFormat(millis));
+                _this.selectedMillis = millis;
+                _this.onSet(millis);
+            }
+            _this.closeSDTP();
+        };
+        return _this;
+    }
+    DateTimeButtonSingle.prototype.closeSDTP = function () {
+        this.dateTimePickerContainer.style("display", "none");
+        this.dateTimeButton.node().focus();
+    };
+    DateTimeButtonSingle.prototype.render = function (chartOptions, minMillis, maxMillis, selectedMillis, onSet) {
+        var _this = this;
+        if (chartOptions === void 0) { chartOptions = {}; }
+        if (selectedMillis === void 0) { selectedMillis = null; }
+        if (onSet === void 0) { onSet = null; }
+        _super.prototype.render.call(this, chartOptions, minMillis, maxMillis, onSet);
+        this.selectedMillis = selectedMillis;
+        d3.select(this.renderTarget).classed('tsi-dateTimeContainerSingle', true);
+        this.dateTimeButton.text(this.buttonDateTimeFormat(selectedMillis));
+        if (!this.dateTimePicker) {
+            this.dateTimePicker = new SingleDateTimePicker(this.dateTimePickerContainer.node());
+        }
+        var targetElement = d3.select(this.renderTarget);
+        (targetElement.select(".tsi-dateTimePickerContainer")).selectAll("*");
+        this.dateTimeButton.on("click", function () {
+            _this.chartOptions.dTPIsModal = true;
+            _this.dateTimePickerContainer.style("display", "block");
+            _this.dateTimePicker.render(_this.chartOptions, _this.minMillis, _this.maxMillis, _this.selectedMillis, _this.sDTPOnSet);
+        });
+    };
+    return DateTimeButtonSingle;
+}(DateTimeButton));
+
+export { DateTimeButtonSingle as D };

package/dist/DateTimeButtonSingle.d.ts

@@ -0,0 +1,17 @@
+import { D as DateTimeButton } from './DateTimeButton-CMcCxc8x.js';
+import './ChartComponent-DTcc6aED.js';
+import './Enums-ChUuTtHV.js';
+import './Component-Rp30sSAW.js';
+import './Interfaces-BKRQ685G.js';
+import './ChartComponentData-D5wuQmmZ.js';
+import './EllipsisMenu.js';
+
+declare class DateTimeButtonSingle extends DateTimeButton {
+    private selectedMillis;
+    constructor(renderTarget: Element);
+    private closeSDTP;
+    private sDTPOnSet;
+    render(chartOptions: any, minMillis: number, maxMillis: number, selectedMillis?: number, onSet?: any): void;
+}
+
+export { DateTimeButtonSingle as default };

package/dist/DateTimeButtonSingle.js

@@ -0,0 +1,14 @@
+export { D as default } from './DateTimeButtonSingle-C6cTx5VO.js';
+import './_tslib-5_9pMg1F.js';
+import 'd3';
+import './DateTimeButton-Ca1487GR.js';
+import './Utils-C_j8IgZh.js';
+import 'moment-timezone';
+import './ChartComponent-DnKLTxWe.js';
+import './Component-CofgyEw0.js';
+import './Grid-DfFAkeeV.js';
+import 'split.js';
+import './EllipsisMenu-30FNqoIv.js';
+import './SingleDateTimePicker-7anflEq8.js';
+import './pikaday-DMSzaLH6.js';
+import 'moment';