tsiclient/UXClient-fd8e9d05.js

import { a as __extends, _ as __assign } from './tslib.es6-f952ba6f.js';
import { U as Utils } from './Utils-38a0872e.js';
import { select, pointer } from 'd3';
import { G as Grid } from './Grid-170eaa9c.js';
import { E as EllipsisMenu } from './EllipsisMenu-7faacf35.js';
import { C as ChartComponent } from './ChartComponent-ed6f3c6d.js';
import { C as ChartDataOptions } from './ChartDataOptions-a8fe7914.js';
import { L as LineChart } from './LineChart-5b1a9c9b.js';
import { T as TimezonePicker } from './TimezonePicker-354a93a2.js';
import { D as DateTimePicker } from './DateTimePicker-570b44a6.js';
import { D as DateTimeButtonRange } from './DateTimeButtonRange-9801b88b.js';
import { P as PieChart } from './PieChart-dca00393.js';
import { S as Slider } from './Slider-e643fd4a.js';
import { S as ScatterPlot } from './ScatterPlot-9415d373.js';
import { G as GroupedBarChart } from './GroupedBarChart-46d306a8.js';
import { H as Hierarchy } from './Hierarchy-336157a1.js';
import { H as Heatmap } from './Heatmap-5fd6b1b1.js';
import { E as EventsTable } from './EventsTable-c1da853f.js';
import { M as ModelAutocomplete } from './ModelAutocomplete-31909926.js';
import { M as ModelSearch } from './ModelSearch-3f0bdfee.js';
import { H as HierarchyNavigation } from './HierarchyNavigation-41264496.js';
import { S as SingleDateTimePicker } from './SingleDateTimePicker-3532265c.js';
import { D as DateTimeButtonSingle } from './DateTimeButtonSingle-e875d7ec.js';
import { P as PlaybackControls } from './PlaybackControls-6261fffc.js';
import { P as ProcessGraphic } from './ProcessGraphic-5aa218c9.js';
import { C as ColorPicker } from './ColorPicker-499f8df4.js';
import { G as GeoProcessGraphic } from './GeoProcessGraphic-4092087c.js';

var AvailabilityChart = /** @class */ (function (_super) {
    __extends(AvailabilityChart, _super);
    function AvailabilityChart(renderTarget) {
        var _this = _super.call(this, renderTarget) || this;
        _this.minBrushWidth = 5;
        _this.minGhostWidth = 2;
        _this.margins = {
            left: 10,
            right: 10
        };
        _this.uxClient = new UXClient();
        return _this;
    }
    //the most zoomed in possible
    AvailabilityChart.prototype.getMinZoomedRange = function () {
        var maxZoomFactor = (this.sparkLineChart.x.range()[1] - this.sparkLineChart.x.range()[0]) / this.minBrushWidth;
        var totalTimeRange = this.toMillis - this.fromMillis;
        return totalTimeRange / maxZoomFactor;
    };
    AvailabilityChart.prototype.zoom = function (event, direction, xPos) {
        if (this.chartOptions.isCompact)
            return;
        var range = Math.max(this.getMinZoomedRange(), (this.zoomedToMillis - this.zoomedFromMillis));
        var percentile = (xPos - this.sparkLineChart.x.range()[0]) /
            (this.sparkLineChart.x.range()[1] - this.sparkLineChart.x.range()[0]);
        var leftImpact = percentile * .2 * range;
        var rightImpact = (1 - percentile) * .2 * range;
        if (direction == 'out') {
            this.zoomedFromMillis = Math.max(this.zoomedFromMillis - leftImpact, this.fromMillis);
            this.zoomedToMillis = Math.min(this.zoomedToMillis + rightImpact, this.toMillis);
        }
        else {
            var prospectiveFromMillis = Math.max(this.zoomedFromMillis + leftImpact, this.fromMillis);
            var prospectiveToMillis = Math.min(this.zoomedToMillis - rightImpact, this.toMillis);
            if (prospectiveToMillis - prospectiveFromMillis >= this.getMinZoomedRange()) {
                this.zoomedFromMillis = prospectiveFromMillis;
                this.zoomedToMillis = prospectiveToMillis;
            }
            else {
                var offBy = this.getMinZoomedRange() - (prospectiveToMillis - prospectiveFromMillis);
                this.zoomedFromMillis = prospectiveFromMillis - (percentile * offBy);
                this.zoomedToMillis = prospectiveToMillis + ((1 - percentile) * offBy);
            }
        }
        this.setAvailabilityRange(this.zoomedFromMillis, this.zoomedToMillis);
        this.sparkLineChart.setBrushEndTime(new Date(this.zoomedToMillis));
        this.sparkLineChart.setBrushStartTime(new Date(this.zoomedFromMillis));
        this.sparkLineChart.setBrush();
        this.timePickerLineChart.drawBrushRange();
        event.preventDefault && event.preventDefault();
    };
    AvailabilityChart.prototype.setChartOptions = function (chartOptions) {
        this.chartOptions.setOptions(__assign(__assign({}, chartOptions), {
            keepBrush: true,
            isArea: true,
            noAnimate: true,
            minutesForTimeLabels: true,
            aggTopMargin: 0,
            yAxisHidden: true,
            focusHidden: true,
            singleLineXAxisLabel: false
        }));
    };
    AvailabilityChart.prototype.dateTimePickerAction = function (fromMillis, toMillis) {
        this.setBrush(fromMillis, toMillis, true);
        this.chartOptions.brushMoveEndAction(new Date(fromMillis), new Date(toMillis), this.chartOptions.offset);
        this.setTicks();
        this.dateTimePickerContainer.style("display", "none");
    };
    //transformation of buckets created by the UX client to buckets for the availabilityChart
    AvailabilityChart.prototype.createDisplayBuckets = function (fromMillis, toMillis) {
        var _this = this;
        var keysInRange = Object.keys(this.transformedAvailability[0].availabilityCount[""]).reduce(function (inRangeObj, timestamp, i, timestamps) {
            var currTSMillis = (new Date(timestamp)).valueOf();
            var nextTSMillis = currTSMillis + _this.bucketSize;
            if (currTSMillis >= fromMillis && currTSMillis <= toMillis) {
                inRangeObj[(new Date(currTSMillis)).toISOString()] = _this.transformedAvailability[0].availabilityCount[""][timestamp];
                return inRangeObj;
            }
            if (currTSMillis < fromMillis && nextTSMillis > fromMillis) {
                inRangeObj[(new Date(fromMillis)).toISOString()] = _this.transformedAvailability[0].availabilityCount[""][timestamp];
                return inRangeObj;
            }
            return inRangeObj;
        }, {});
        var rawBucketCount = Math.ceil((toMillis - fromMillis) / this.bucketSize);
        var bucketMultiplier = Math.ceil(rawBucketCount / this.maxBuckets);
        var computedBucketSize = this.bucketSize * bucketMultiplier;
        var createKey = function (millis) { return Math.round(Math.floor(millis / computedBucketSize) * computedBucketSize); };
        var firstBucket = createKey(fromMillis);
        var lastBucket = createKey(toMillis);
        var buckets = [];
        for (var i = firstBucket; i <= lastBucket; i += computedBucketSize) {
            buckets[(new Date(i)).toISOString()] = { count: 0 };
        }
        Object.keys(keysInRange).sort().forEach(function (ts, i) {
            var tsMillis = (new Date(ts)).valueOf();
            var computedKey = createKey(tsMillis);
            buckets[(new Date(computedKey)).toISOString()].count += (keysInRange[ts].count / bucketMultiplier);
        });
        if (fromMillis !== null && firstBucket !== null) {
            buckets[(new Date(fromMillis)).toISOString()] = buckets[(new Date(firstBucket)).toISOString()];
        }
        if (toMillis !== null && lastBucket !== null) {
            buckets[(new Date(toMillis)).toISOString()] = buckets[(new Date(lastBucket)).toISOString()];
        }
        // delete the bucket before the from time
        if (firstBucket < fromMillis) {
            delete buckets[(new Date(firstBucket)).toISOString()];
        }
        return [{ "availabilityCount": { "": buckets } }];
    };
    AvailabilityChart.prototype.setRangeVariables = function (rawAvailability) {
        if (Utils.safeNotNullOrUndefined(function () { return rawAvailability.range.from || rawAvailability.range.to || rawAvailability.intervalSize; })) {
            this.fromMillis = (new Date(rawAvailability.range.from)).valueOf();
            this.toMillis = (new Date(rawAvailability.range.to)).valueOf();
            this.bucketSize = Utils.parseTimeInput(rawAvailability.intervalSize);
        }
        else {
            this.fromMillis = null;
            this.toMillis = null;
            this.bucketSize = null;
        }
    };
    AvailabilityChart.prototype.render = function (transformedAvailability, chartOptions, rawAvailability) {
        var _this = this;
        if (rawAvailability === void 0) { rawAvailability = {}; }
        this.setChartOptions(chartOptions);
        this.rawAvailability = rawAvailability;
        this.transformedAvailability = transformedAvailability;
        this.color = this.chartOptions.color ? this.chartOptions.color : 'teal';
        this.maxBuckets = (this.chartOptions.maxBuckets) ? this.chartOptions.maxBuckets : 500;
        this.setRangeVariables(rawAvailability);
        var startBucket = (this.fromMillis !== null && this.bucketSize !== null) ?
            Math.round(Math.floor(this.fromMillis / this.bucketSize) * this.bucketSize) : null;
        var endBucket = (this.toMillis !== null && this.bucketSize !== null) ?
            Math.round(Math.floor(this.toMillis / this.bucketSize) * this.bucketSize) : null;
        if (startBucket !== null && startBucket === endBucket) {
            this.fromMillis = Math.floor(this.fromMillis / this.bucketSize) * this.bucketSize;
            this.toMillis = this.fromMillis + this.bucketSize;
            this.bucketSize = this.bucketSize / 60;
        }
        this.ae = [new this.uxClient.AggregateExpression({ predicateString: "" }, { property: 'Count', type: "Double" }, ['count'], { from: new Date(this.fromMillis), to: new Date(this.toMillis) }, null, 'grey', 'Availability')];
        this.targetElement = select(this.renderTarget)
            .classed("tsi-availabilityChart", true)
            .classed("tsi-compact", this.chartOptions.isCompact)
            .classed("tsi-withButton", this.chartOptions.persistDateTimeButtonRange);
        this.chartOptions.yAxisHidden = true;
        this.chartOptions.focusHidden = true;
        this.chartOptions.singleLineXAxisLabel = true;
        this.chartOptions.suppressResizeListener = true;
        this.chartOptions.brushClearable = false;
        this.chartOptions.minBrushWidth = 1;
        this.chartOptions.brushHandlesVisible = true;
        var brushMoveAction = this.chartOptions.brushMoveAction;
        this.chartOptions.brushMoveAction = function (from, to) {
            _this.setFromAndToTimes(from.valueOf(), to.valueOf());
            _this.drawGhost();
            if (_this.chartOptions.isCompact) {
                _this.buildCompactFromAndTo();
            }
            if (brushMoveAction != null)
                brushMoveAction(from, to);
        };
        _super.prototype.themify.call(this, this.targetElement, chartOptions.theme);
        if (this.timePickerContainer == null) {
            this.targetElement.html("");
            this.timePickerContainer = this.targetElement.append("div")
                .classed("tsi-timePickerContainer", true);
            this.timePickerChart = this.timePickerContainer.append("div").classed("tsi-timePickerChart", true);
            var sparkLineContainer = this.targetElement.append("div").classed("tsi-sparklineContainer", true);
            this.timePickerTextContainer = this.targetElement.append("div").classed("tsi-timePickerTextContainer", true)
                .style("margin-left", this.chartOptions.availabilityLeftMargin + this.margins.left);
            this.timePickerLineChart = new LineChart(this.timePickerChart.node());
            this.timePickerLineChart.chartMargins.left = (this.chartOptions.availabilityLeftMargin - this.margins.left);
            this.buildFromAndToContainer();
            this.sparkLineChart = new LineChart(sparkLineContainer.node());
            this.sparkLineChart.chartMargins.left = (this.chartOptions.availabilityLeftMargin - this.margins.left);
            this.dateTimePickerContainer = this.targetElement.append("div").classed("tsi-dateTimePickerContainer", true);
            this.dateTimePicker = new DateTimePicker(this.dateTimePickerContainer.node());
            window.addEventListener('resize', function () {
                _this.timePickerLineChart.draw();
                _this.setTicks();
                _this.drawWarmRange();
                if (_this.chartOptions.isCompact)
                    _this.buildCompactFromAndTo();
                setTimeout(function () {
                    _this.drawGhost();
                }, 100);
            });
            var pickerContainerAndContent = this.targetElement.selectAll(".tsi-dateTimePickerContainer, .tsi-dateTimePickerContainer *");
        }
        //clear the date time picker
        this.dateTimePickerContainer.style("display", "none");
        this.timePickerContainer.selectAll('.tsi-compactFromTo').remove();
        if (this.chartOptions.isCompact) {
            this.targetElement.select('.tsi-sparklineContainer').style("display", 'none');
            if (!this.chartOptions.persistDateTimeButtonRange)
                this.targetElement.select(".tsi-timePickerTextContainer").style('display', 'none');
            this.targetElement.select('.tsi-zoomButtonContainer').style('display', 'none');
            this.targetElement.select('.tsi-timePickerContainer').style('max-height', '68px').style('top', this.chartOptions.persistDateTimeButtonRange ? '6px' : '20px');
        }
        else {
            this.targetElement.select('.tsi-sparklineContainer').style("display", 'flex');
            this.targetElement.select(".tsi-timePickerTextContainer").style('display', 'inherit');
            this.targetElement.select('.tsi-zoomButtonContainer').style('display', 'flex');
            this.targetElement.select('.tsi-timePickerContainer').style('max-height', 'none').style('top', '0px');
        }
        var sparkLineOptions = this.createSparkLineOptions(chartOptions);
        var visibileAvailability = this.createDisplayBuckets(this.fromMillis, this.toMillis);
        this.sparkLineChart.render(visibileAvailability, sparkLineOptions, this.ae);
        this.timePickerLineChart.render(visibileAvailability, this.chartOptions, this.ae);
        this.setTicks();
        this.drawWarmRange();
        if (!this.chartOptions.preserveAvailabilityState) {
            this.zoomedToMillis = this.toMillis;
            this.zoomedFromMillis = this.chartOptions.defaultAvailabilityZoomRangeMillis ? Math.max(this.fromMillis, this.toMillis - this.chartOptions.defaultAvailabilityZoomRangeMillis) : this.fromMillis;
            this.sparkLineChart.setBrushStartTime(new Date(this.zoomedFromMillis));
            this.sparkLineChart.setBrushEndTime(new Date(this.zoomedToMillis));
            this.setFromAndToTimes(Math.max(this.fromMillis, this.toMillis - (24 * 60 * 60 * 1000)), this.toMillis);
            this.setBrush(Math.max(this.fromMillis, this.toMillis - (24 * 60 * 60 * 1000)), this.toMillis);
        }
        else {
            if (this.zoomedFromMillis == null)
                this.zoomedFromMillis = this.chartOptions.defaultAvailabilityZoomRangeMillis ? Math.max(this.fromMillis, this.toMillis - this.chartOptions.defaultAvailabilityZoomRangeMillis) : this.fromMillis;
            if (this.zoomedToMillis == null)
                this.zoomedToMillis = this.toMillis;
            if (this.sparkLineChart.brushStartTime == null)
                this.sparkLineChart.setBrushStartTime(new Date(this.zoomedFromMillis));
            if (this.sparkLineChart.brushEndTime == null)
                this.sparkLineChart.setBrushEndTime(new Date(this.zoomedToMillis));
            if (this.selectedFromMillis == null || this.selectedToMillis == null)
                this.setFromAndToTimes(this.toMillis - (24 * 60 * 60 * 1000), this.toMillis);
            this.drawGhost();
            this.setBrush(this.selectedFromMillis, this.selectedToMillis);
        }
        this.sparkLineChart.setBrush();
        var self = this;
        this.timePickerChart.select(".brushElem").on("wheel.zoom", function (event, d) {
            var direction = event.deltaY > 0 ? 'out' : 'in';
            var xPos = (pointer(event)[0]);
            self.zoom(event, direction, xPos);
        });
        if (!this.chartOptions.isCompact) {
            this.buildZoomButtons();
        }
        else {
            this.timePickerChart.select('.brushElem').select('.selection');
        }
        this.setAvailabilityRange(this.zoomedFromMillis, this.zoomedToMillis);
        if (this.chartOptions.isCompact) {
            this.buildCompactFromAndTo();
        }
        this.timePickerLineChart.drawBrushRange();
    };
    AvailabilityChart.prototype.buildZoomButtons = function () {
        var _this = this;
        this.targetElement.selectAll(".tsi-zoomButtonContainer").remove();
        var midpoint = (this.sparkLineChart.x.range()[1] - this.sparkLineChart.x.range()[0]) / 2;
        var buttonsDiv = this.targetElement.append("div")
            .classed("tsi-zoomButtonContainer", true);
        buttonsDiv.append("button")
            .attr("class", "tsi-zoomButton tsi-zoomButtonIn")
            .attr('aria-label', this.getString('A line chart zoom in'))
            .attr('title', this.getString('zoom in'))
            .on("click", function (event) {
            _this.zoom(event, "in", midpoint);
        });
        buttonsDiv.append("button")
            .attr("class", "tsi-zoomButton tsi-zoomButtonOut")
            .attr('aria-label', this.getString('A line chart zoom out'))
            .attr('title', this.getString('zoom out'))
            .on("click", function (event) {
            _this.zoom(event, "out", midpoint);
        });
    };
    AvailabilityChart.prototype.setSelectedMillis = function (fromMillis, toMillis) {
        this.selectedFromMillis = fromMillis;
        this.selectedToMillis = toMillis;
        this.timePickerLineChart.drawBrushRange();
    };
    AvailabilityChart.prototype.renderDateTimeButton = function () {
        var _this = this;
        var minMillis = this.fromMillis + (Utils.getOffsetMinutes(this.chartOptions.offset, this.fromMillis) * 60 * 1000);
        var maxMillis = this.toMillis + (Utils.getOffsetMinutes(this.chartOptions.offset, this.toMillis) * 60 * 1000);
        var startMillis = this.selectedFromMillis + (Utils.getOffsetMinutes(this.chartOptions.offset, this.selectedFromMillis) * 60 * 1000);
        var endMillis = this.selectedToMillis + (Utils.getOffsetMinutes(this.chartOptions.offset, this.selectedFromMillis) * 60 * 1000);
        this.dateTimeButton.render(this.chartOptions, this.fromMillis, this.toMillis, this.selectedFromMillis, this.selectedToMillis, function (fromMillis, toMillis, offset) {
            _this.chartOptions.offset = offset;
            _this.timePickerLineChart.chartOptions.offset = offset;
            _this.sparkLineChart.chartOptions.offset = offset;
            _this.dateTimePickerAction(fromMillis, toMillis);
            select(_this.renderTarget).select(".tsi-dateTimeContainer").node().focus();
        }, function () {
            _this.dateTimePickerContainer.style("display", "none");
            select(_this.renderTarget).select(".tsi-dateTimeContainer").node().focus();
        });
    };
    AvailabilityChart.prototype.setFromAndToTimes = function (fromMillis, toMillis, isFromButton) {
        if (isFromButton === void 0) { isFromButton = false; }
        var timezone = Utils.parseTimezoneName(this.chartOptions.offset);
        var timezoneAbbreviation = Utils.timezoneAbbreviation(timezone);
        this.setSelectedMillis(fromMillis, toMillis);
        if (!isFromButton) {
            this.renderDateTimeButton();
        }
    };
    AvailabilityChart.prototype.drawGhost = function () {
        var svgGroup = this.targetElement.select('.tsi-sparklineContainer').select(".tsi-lineChartSVG").select(".svgGroup");
        svgGroup.selectAll(".ghostRect").remove();
        svgGroup.append("rect")
            .classed("ghostRect", true)
            .attr("x", Math.max(this.sparkLineChart.x.range()[0], this.sparkLineChart.x(new Date(this.selectedFromMillis))))
            .attr("y", 0)
            .attr("width", Math.min(Math.max(this.minGhostWidth, this.sparkLineChart.x(new Date(this.selectedToMillis)) - this.sparkLineChart.x(new Date(this.selectedFromMillis))), this.sparkLineChart.x.range()[1] - this.sparkLineChart.x.range()[0]))
            .attr("height", 8)
            .attr("fill", this.chartOptions.color ? this.chartOptions.color : 'dark-grey')
            .attr("fill-opacity", .3)
            .attr("pointer-events", "none");
    };
    AvailabilityChart.prototype.drawWarmRange = function () {
        var svgGroup = this.targetElement.select('.tsi-timePickerContainer').select(".tsi-lineChartSVG").select(".svgGroup");
        if (svgGroup.select('.tsi-warmRect').empty()) {
            svgGroup.append("rect")
                .classed("tsi-warmRect", true);
            svgGroup.select('.brushElem').raise();
        }
        var warmRect = svgGroup.select(".tsi-warmRect");
        var outOfRange = true;
        if (this.chartOptions.warmStoreRange) {
            var warmStart = new Date(this.chartOptions.warmStoreRange[0]);
            var boundedWarmStart = new Date(Math.max(warmStart.valueOf(), this.zoomedFromMillis));
            var warmEnd = new Date(this.chartOptions.warmStoreRange.length === 2 ? this.chartOptions.warmStoreRange[1] : this.toMillis);
            var boundedWarmEnd = new Date(Math.min(warmEnd.valueOf(), this.zoomedToMillis));
            if (boundedWarmStart < boundedWarmEnd) {
                outOfRange = false;
                warmRect.attr("x", Math.max(this.timePickerLineChart.x(boundedWarmStart)))
                    .attr("y", this.chartOptions.isCompact ? 12 : -8)
                    .attr("width", this.timePickerLineChart.x(boundedWarmEnd) - this.timePickerLineChart.x(boundedWarmStart))
                    .attr("height", this.chartOptions.isCompact ? 4 : Math.max((this.targetElement.select('.tsi-timePickerContainer').select(".tsi-lineChartSVG").node().getBoundingClientRect().height - 44), 0))
                    .attr("fill-opacity", this.chartOptions.isCompact ? .8 : .08)
                    .attr('stroke-opacity', this.chartOptions.isCompact ? 0 : .5)
                    .attr("pointer-events", "none");
            }
        }
        if (outOfRange || this.chartOptions.warmStoreRange === null) {
            warmRect.style('display', 'none');
        }
        else {
            warmRect.style('display', 'block');
        }
    };
    AvailabilityChart.prototype.buildCompactFromAndTo = function () {
        this.timePickerContainer.selectAll('.tsi-compactFromTo').remove();
        // if the view is compact and there is a datetimebuttonrange present, we don't need compact from and to
        if (this.chartOptions.persistDateTimeButtonRange)
            return;
        var brushPositions = this.timePickerLineChart.getBrushPositions();
        var leftTimeText = null;
        var rightTimeText = null;
        if (this.selectedFromMillis != null && this.selectedToMillis != null) {
            leftTimeText = this.timePickerContainer.append('div')
                .classed('tsi-compactFromTo', true)
                .style('left', (brushPositions.leftPos != null ? Math.max(brushPositions.leftPos, 5) : 5) + 'px')
                .text(Utils.timeFormat(false, false, this.chartOptions.offset, this.chartOptions.is24HourTime, null, null, this.chartOptions.dateLocale)(new Date(this.selectedFromMillis)));
            var timezoneAbbreviation = ' (' + Utils.createTimezoneAbbreviation(this.chartOptions.offset) + ')';
            rightTimeText = this.timePickerContainer.append('div')
                .attr('class', 'tsi-compactFromTo')
                .style('right', brushPositions.rightPos != null ? 'calc(100% - ' + brushPositions.rightPos + 'px)' : '5px')
                .style('left', 'auto')
                .text(Utils.timeFormat(false, false, this.chartOptions.offset, this.chartOptions.is24HourTime, null, null, this.chartOptions.dateLocale)(new Date(this.selectedToMillis)) + timezoneAbbreviation);
        }
        if (leftTimeText && rightTimeText) {
            var rightSideOfLeft = leftTimeText.node().getBoundingClientRect().left + leftTimeText.node().getBoundingClientRect().width;
            var leftSideOfRight = rightTimeText.node().getBoundingClientRect().left;
            var totalWidth = this.timePickerContainer.node().getBoundingClientRect().width;
            var minOffset = 40;
            if (leftSideOfRight - rightSideOfLeft < minOffset) { // if there is overlap (or near overlap), correction needed
                var correction = (rightSideOfLeft - leftSideOfRight + minOffset) / 2;
                //if the correction puts either side off the edge of the container, weight the correction to the other side
                var leftWeight = 1;
                var rightWeight = 1;
                var padding = 32;
                if ((brushPositions.leftPos - correction) < padding) {
                    leftWeight = 1 - ((padding - (brushPositions.leftPos - correction)) / correction);
                    rightWeight = 2 - leftWeight;
                }
                if ((brushPositions.rightPos + correction) > (totalWidth - padding)) {
                    rightWeight = 1 - (padding - (totalWidth - brushPositions.rightPos - correction)) / correction;
                    leftWeight = 2 - rightWeight;
                }
                rightTimeText.style('right', 'calc(100% - ' + Math.round((brushPositions.rightPos + (rightWeight * correction))) + 'px)')
                    .style('left', 'auto');
                leftTimeText.style('left', (brushPositions.leftPos - (leftWeight * correction)) + 'px');
            }
        }
    };
    AvailabilityChart.prototype.offsetUTC = function (date) {
        date.setTime(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
        return date;
    };
    AvailabilityChart.prototype.buildFromAndToContainer = function () {
        var dateTimeContainer = this.timePickerTextContainer.append('div').classed('tsi-dateTimeContainer', true);
        var timeframeLabel = dateTimeContainer.append("label").text(this.getString("Timeframe")).attr("id", "time-frame-label");
        var dateTimeButtonContainer = dateTimeContainer.append("div")
            .classed('tsi-dateTimeButtonContainer', true)
            .attr("aria-labelledby", 'time-frame-label');
        this.dateTimeButton = new DateTimeButtonRange(dateTimeButtonContainer.node());
    };
    AvailabilityChart.prototype.setTicks = function () {
        this.timePickerLineChart.updateXAxis();
        var forceFirst = (this.timePickerLineChart.zoomedFromMillis == this.timePickerLineChart.fromMillis) && (this.zoomedFromMillis == this.fromMillis);
        var forceLast = (this.timePickerLineChart.zoomedToMillis == this.timePickerLineChart.toMillis) && (this.zoomedToMillis == this.toMillis);
        this.timePickerLineChart.updateXAxis(forceFirst, forceLast);
        var ticks = this.timePickerContainer.select('.tsi-timePickerChart')
            .select('.xAxis')
            .selectAll('.tick');
        ticks.each(function (d, i) {
            var elt = select(this);
            elt.classed((i === 0 && forceFirst ? 'tsi-fromTick' : (i === ticks.size() - 1 && forceLast ? 'tsi-toTick' : '')), true);
        });
    };
    AvailabilityChart.prototype.setAvailabilityRange = function (fromMillis, toMillis) {
        this.zoomedFromMillis = fromMillis;
        this.zoomedToMillis = toMillis;
        var visibileAvailability = this.createDisplayBuckets(fromMillis, toMillis);
        this.chartOptions.keepBrush = true;
        var aeWithNewTimeSpan = __assign(__assign({}, this.ae[0]), { searchSpan: {
                from: (new Date(fromMillis)),
                to: (new Date(toMillis))
            } });
        this.timePickerLineChart.render(visibileAvailability, this.chartOptions, [aeWithNewTimeSpan]);
        this.setTicks();
        this.drawWarmRange();
        this.timePickerLineChart.setBrush();
    };
    AvailabilityChart.prototype.setBrush = function (fromMillis, toMillis, isFromButton) {
        if (isFromButton === void 0) { isFromButton = false; }
        this.timePickerLineChart.setBrushEndTime(new Date(toMillis));
        this.timePickerLineChart.setBrushStartTime(new Date(fromMillis));
        this.timePickerLineChart.setBrush();
        this.setFromAndToTimes(fromMillis, toMillis, isFromButton);
        this.drawGhost();
        if (this.chartOptions.isCompact)
            this.buildCompactFromAndTo();
    };
    AvailabilityChart.prototype.createSparkLineOptions = function (chartOptions) {
        var _this = this;
        return {
            aggTopMargin: 0,
            theme: chartOptions.theme,
            grid: false,
            tooltip: false,
            legend: "hidden",
            brushContextMenuActions: [],
            snapBrush: false,
            keepBrush: false,
            xAxisHidden: true,
            yAxisHidden: true,
            focusHidden: true,
            minBrushWidth: 5,
            color: null,
            brushHandlesVisible: true,
            brushMoveAction: function (from, to) {
                _this.setAvailabilityRange(from.valueOf(), to.valueOf());
            },
            brushClearable: false,
            hideChartControlPanel: true,
            brushRangeVisible: false,
            isArea: true
        };
    };
    return AvailabilityChart;
}(ChartComponent));

var MAXCARD = 150000;
var AggregateExpression = /** @class */ (function (_super) {
    __extends(AggregateExpression, _super);
    function AggregateExpression(predicateObject, measureObject, measureTypes, searchSpan, splitByObject, colorOrOptionsObject, alias, contextMenu) {
        if (splitByObject === void 0) { splitByObject = null; }
        var _this = _super.call(this, (typeof (colorOrOptionsObject) === 'object' && !!colorOrOptionsObject) ? __assign(__assign({}, colorOrOptionsObject), { searchSpan: searchSpan, measureTypes: measureTypes }) : { color: colorOrOptionsObject, searchSpan: searchSpan, measureTypes: measureTypes, alias: alias, contextMenu: contextMenu }) || this;
        _this.visibleSplitByCap = 10;
        _this.predicate = predicateObject;
        _this.splitByObject = splitByObject;
        _this.measureObject = ((measureTypes.length == 1 && measureTypes[0] == 'count') || measureObject.property == 'Events Count') ? { count: {} } : { input: measureObject };
        return _this;
    }
    AggregateExpression.prototype.toTsx = function (roundFromTo) {
        var _this = this;
        if (roundFromTo === void 0) { roundFromTo = false; }
        var tsx = {};
        var shiftMillis = Utils.parseShift(this.timeShift, this.startAt, this.searchSpan);
        var fromMillis = this.searchSpan.from.valueOf() + shiftMillis;
        var toMillis = this.searchSpan.to.valueOf() + shiftMillis;
        var bucketSizeInMillis = Utils.parseTimeInput(this.searchSpan.bucketSize);
        var roundedFromMillis = Math.floor((fromMillis + 62135596800000) / (bucketSizeInMillis)) * (bucketSizeInMillis) - 62135596800000;
        var roundedToMillis = Math.ceil((toMillis + 62135596800000) / (bucketSizeInMillis)) * (bucketSizeInMillis) - 62135596800000;
        if (roundFromTo) {
            fromMillis = roundedFromMillis;
            toMillis = roundedToMillis;
        }
        tsx['searchSpan'] = { from: (new Date(fromMillis)).toISOString(), to: (new Date(toMillis)).toISOString() };
        // create aggregates
        var measures = (this.measureObject.hasOwnProperty('count')) ? [{ count: {} }]
            : this.measureTypes.reduce(function (p, c) {
                var measureObject = {};
                if (c == 'count')
                    measureObject = { count: {} };
                else
                    measureObject[c] = _this['measureObject'];
                p.push(measureObject);
                return p;
            }, []);
        var aggregateObject = {};
        var dimensionObject = { dateHistogram: { input: { builtInProperty: "$ts" }, breaks: { size: this.searchSpan.bucketSize } } };
        if (this.splitByObject != null) {
            var bucketsCeil = Math.ceil((roundedToMillis - roundedFromMillis) / bucketSizeInMillis);
            aggregateObject['dimension'] = { uniqueValues: { input: this.splitByObject, take: Math.floor(MAXCARD / bucketsCeil) } };
            aggregateObject['aggregate'] = { dimension: dimensionObject, measures: measures };
        }
        else {
            aggregateObject['dimension'] = dimensionObject;
            aggregateObject['measures'] = measures;
        }
        var aggregates = [aggregateObject];
        tsx['aggregates'] = aggregates;
        // create predicate
        var predicate;
        if (!this.measureObject.hasOwnProperty('count'))
            predicate = { and: [this.predicate, { not: { eq: { left: this.measureObject.input, right: { 'double': null } } } }] };
        else
            predicate = this.predicate;
        tsx['predicate'] = predicate;
        return tsx;
    };
    return AggregateExpression;
}(ChartDataOptions));

var TsqExpression = /** @class */ (function (_super) {
    __extends(TsqExpression, _super);
    function TsqExpression(instanceObject, variableObject, searchSpan, colorOrOptionsObject, alias, contextMenu) {
        var _this = this;
        // This constructor should be called with the following parameters: 
        // new TsqExpression(instanceObject, variableObject, searchSpan, optionsObject)
        // where the optionsObject should contain properties for color, alias, and contextMenu.
        //
        // However, to maintain backwards compatibility with older code, the constructor still 
        // accepts the older set of parameters:
        // new TsqExpression(instanceObject, variableObject, searchSpan, color, alias, contextMenu)
        // Here we differentiate between both and call the parent class's constructor as appropriate.
        var optionsObject = (typeof (colorOrOptionsObject) === 'object' && !!colorOrOptionsObject)
            ? __assign(__assign({}, colorOrOptionsObject), { searchSpan: searchSpan, measureTypes: Object.keys(variableObject) }) : {
            color: colorOrOptionsObject,
            searchSpan: searchSpan,
            measureTypes: Object.keys(variableObject),
            alias: alias,
            contextMenu: contextMenu
        };
        _this = _super.call(this, optionsObject) || this;
        _this.instanceObject = instanceObject;
        _this.variableObject = variableObject;
        return _this;
    }
    TsqExpression.prototype.toTsq = function (roundFromTo, getEvents, getSeries) {
        if (roundFromTo === void 0) { roundFromTo = false; }
        if (getEvents === void 0) { getEvents = false; }
        if (getSeries === void 0) { getSeries = false; }
        var tsq = {};
        var shiftMillis = Utils.parseShift(this.timeShift, this.startAt, this.searchSpan);
        var fromMillis = this.searchSpan.from.valueOf() + shiftMillis;
        var toMillis = this.searchSpan.to.valueOf() + shiftMillis;
        if (roundFromTo) {
            var bucketSizeInMillis = Utils.parseTimeInput(this.searchSpan.bucketSize);
            var roundedFromMillis = Math.floor((fromMillis + 62135596800000) / (bucketSizeInMillis)) * (bucketSizeInMillis) - 62135596800000;
            var roundedToMillis = Math.ceil((toMillis + 62135596800000) / (bucketSizeInMillis)) * (bucketSizeInMillis) - 62135596800000;
            fromMillis = roundedFromMillis;
            toMillis = roundedToMillis;
        }
        tsq['searchSpan'] = { from: (new Date(fromMillis)).toISOString(), to: (new Date(toMillis)).toISOString() };
        tsq['timeSeriesId'] = this.instanceObject.timeSeriesId;
        if (getEvents) {
            return { getEvents: tsq };
        }
        else if (getSeries) {
            tsq['inlineVariables'] = __assign({}, this.variableObject);
            tsq['projectedVariables'] = Object.keys(this.variableObject);
            return { getSeries: tsq };
        }
        else {
            tsq['interval'] = Utils.bucketSizeToTsqInterval(this.searchSpan.bucketSize);
            tsq['inlineVariables'] = __assign({}, this.variableObject);
            tsq['projectedVariables'] = Object.keys(this.variableObject);
            return { aggregateSeries: tsq };
        }
    };
    // This method will create an API query payload for the variable statistics of the first inline variable
    // of this object, for numeric dataTypes. Categorical types work as expected.
    TsqExpression.prototype.toStatsTsq = function (fromMillis, toMillis) {
        var tsq = this.toTsq();
        var shiftMillis = Utils.parseShift(this.timeShift);
        fromMillis += shiftMillis;
        toMillis += shiftMillis;
        tsq.aggregateSeries['searchSpan'] = { from: (new Date(fromMillis)).toISOString(), to: (new Date(toMillis)).toISOString() };
        tsq.aggregateSeries['interval'] = 'P1000Y';
        if (this.dataType === 'numeric') {
            var inlineVariables_1 = { min: {}, max: {}, avg: {}, stDev: {} };
            var firstVariable_1 = tsq.aggregateSeries['inlineVariables'][Object.keys(tsq.aggregateSeries['inlineVariables'])[0]];
            Object.keys(inlineVariables_1).forEach(function (k) {
                inlineVariables_1[k] = JSON.parse(JSON.stringify(firstVariable_1));
                inlineVariables_1[k].aggregation.tsx = k + "($value)";
                delete inlineVariables_1[k]['interpolation'];
            });
            tsq.aggregateSeries['inlineVariables'] = inlineVariables_1;
            tsq.aggregateSeries['projectedVariables'] = Object.keys(inlineVariables_1);
        }
        return tsq;
    };
    return TsqExpression;
}(ChartDataOptions));

var transformTsqResultsForVisualization = function (tsqResults, options) {
    var result = [];
    tsqResults.forEach(function (tsqr, i) {
        var transformedAggregate = {};
        var aggregatesObject = {};
        transformedAggregate[options[i].alias] = { '': aggregatesObject };
        if (tsqr.hasOwnProperty('__tsiError__'))
            transformedAggregate[''] = {};
        else {
            tsqr.timestamps.forEach(function (ts, j) {
                aggregatesObject[ts] = tsqr.properties.reduce(function (p, c) {
                    p[c.name] = aggregatesObject[ts] && aggregatesObject[ts][c.name] !== null ? aggregatesObject[ts][c.name] : c['values'][j];
                    return p;
                }, {});
            });
        }
        result.push(transformedAggregate);
    });
    return result;
};

var UXClient = /** @class */ (function () {
    function UXClient() {
        // Public facing components have class constructors exposed as public UXClient members.
        // This allows for typings to be bundled while maintaining 'new Component()' syntax
        this.DateTimePicker = DateTimePicker;
        this.PieChart = PieChart;
        this.ScatterPlot = ScatterPlot;
        this.BarChart = GroupedBarChart;
        this.LineChart = LineChart;
        this.AvailabilityChart = AvailabilityChart;
        this.Grid = Grid;
        this.Slider = Slider;
        this.Hierarchy = Hierarchy;
        this.AggregateExpression = AggregateExpression;
        this.TsqExpression = TsqExpression;
        this.Heatmap = Heatmap;
        this.EventsTable = EventsTable;
        this.ModelSearch = ModelSearch;
        this.ModelAutocomplete = ModelAutocomplete;
        this.HierarchyNavigation = HierarchyNavigation;
        this.TimezonePicker = TimezonePicker;
        this.EllipsisMenu = EllipsisMenu;
        this.SingleDateTimePicker = SingleDateTimePicker;
        this.DateTimeButtonSingle = DateTimeButtonSingle;
        this.DateTimeButtonRange = DateTimeButtonRange;
        this.ProcessGraphic = ProcessGraphic;
        this.PlaybackControls = PlaybackControls;
        this.ColorPicker = ColorPicker;
        this.GeoProcessGraphic = GeoProcessGraphic;
        this.transformTsqResultsForVisualization = transformTsqResultsForVisualization;
    }
    UXClient.prototype.UXClient = function () {
    };
    UXClient.prototype.transformTsxToEventsArray = function (events, options) {
        var timezoneOffset = options.timezoneOffset ? options.timezoneOffset : 0;
        var rows = [];
        var eventSourceProperties = {};
        var nameToStrippedPropName = {};
        var valueToStrippedValueMap = {};
        var _loop_1 = function () {
            if (events[eventIdx].hasOwnProperty('schema')) {
                eventSourceProperties[events[eventIdx].schema.rid] = {};
                eventSourceProperties[events[eventIdx].schema.rid].propertyNames = events[eventIdx].schema.properties.reduce(function (prev, curr) {
                    prev.push({ name: curr.name, type: curr.type });
                    return prev;
                }, []);
                eventSourceProperties[events[eventIdx].schema.rid].eventSourceName = events[eventIdx].schema['$esn'];
                eventSourceId = events[eventIdx].schema.rid;
            }
            else {
                eventSourceId = events[eventIdx].schemaRid;
            }
            timeStamp = (new Date((new Date(events[eventIdx]['$ts'])).valueOf() - timezoneOffset)).toISOString().slice(0, -1).replace('T', ' ');
            event = { 'timestamp ($ts)': timeStamp };
            // lts logic
            lts = events[eventIdx]['$lts'] ? events[eventIdx]['$lts'] : null;
            if (lts) {
                event['LocalTimestamp_DateTime'] = {
                    value: lts.replace('T', ' '),
                    name: 'LocalTimestamp',
                    type: 'DateTime'
                };
            }
            event["EventSourceName_String"] = {
                value: eventSourceProperties[eventSourceId].eventSourceName,
                name: 'EventSourceName',
                type: 'String'
            };
            for (var propIdx in eventSourceProperties[eventSourceId].propertyNames) {
                name = eventSourceProperties[eventSourceId].propertyNames[propIdx].name;
                if (!nameToStrippedPropName.hasOwnProperty(name))
                    nameToStrippedPropName[name] = Utils.stripForConcat(name);
                strippedName = nameToStrippedPropName[name];
                type = eventSourceProperties[eventSourceId].propertyNames[propIdx].type;
                columnNameAndType = strippedName + "_" + type;
                if (!valueToStrippedValueMap.hasOwnProperty(String(events[eventIdx].values[propIdx])))
                    valueToStrippedValueMap[String(events[eventIdx].values[propIdx])] = Utils.stripForConcat(String(events[eventIdx].values[propIdx]));
                eventObject = {
                    value: valueToStrippedValueMap[String(events[eventIdx].values[propIdx])],
                    name: strippedName,
                    type: type
                };
                event[columnNameAndType] = eventObject;
            }
            if (events[eventIdx].hasOwnProperty('$op')) {
                var defaultType_1 = 'String';
                var otherProps_1 = JSON.parse(events[eventIdx]['$op']);
                Object.keys(otherProps_1).forEach(function (propNameRaw) {
                    var strippedNameOP = Utils.stripForConcat(propNameRaw);
                    var columnNameAndTypeOP = strippedNameOP + '_String';
                    event[columnNameAndTypeOP] = {
                        value: otherProps_1[propNameRaw],
                        name: strippedNameOP,
                        type: defaultType_1
                    };
                });
            }
            rows.push(event);
        };
        var eventSourceId, timeStamp, event, lts, name, strippedName, type, columnNameAndType, eventObject;
        for (var eventIdx in events) {
            _loop_1();
        }
        return rows;
    };
    UXClient.prototype.toISONoMillis = function (dateTime) {
        return dateTime.toISOString().slice(0, -5) + "Z";
    };
    //specifiedRange gives the subset of availability buckets to be returned. If not included, will return all buckets
    UXClient.prototype.transformAvailabilityForVisualization = function (availabilityTsx) {
        var _this = this;
        var from = new Date(availabilityTsx.range.from);
        var to = new Date(availabilityTsx.range.to);
        var rawBucketSize = Utils.parseTimeInput(availabilityTsx.intervalSize);
        var buckets = {};
        var startBucket = Math.round(Math.floor(from.valueOf() / rawBucketSize) * rawBucketSize);
        var firstKey = this.toISONoMillis(new Date(startBucket));
        var firstCount = availabilityTsx.distribution[firstKey] ? availabilityTsx.distribution[firstKey] : 0;
        // reset first key if greater than the availability range from
        if (startBucket < (new Date(availabilityTsx.range.from)).valueOf())
            firstKey = this.toISONoMillis(new Date(availabilityTsx.range.from));
        buckets[firstKey] = { count: firstCount };
        Object.keys(availabilityTsx.distribution).forEach(function (key) {
            var formattedISO = _this.toISONoMillis(new Date(key));
            buckets[formattedISO] = { count: availabilityTsx.distribution[key] };
        });
        //set end time value
        var lastBucket = Math.round(Math.floor(to.valueOf() / rawBucketSize) * rawBucketSize);
        // pad out if range is less than one bucket;
        if (startBucket == lastBucket) {
            for (var i = startBucket; i <= startBucket + rawBucketSize; i += (rawBucketSize / 60)) {
                if (buckets[this.toISONoMillis(new Date(i))] == undefined)
                    buckets[this.toISONoMillis(new Date(i))] = { count: 0 };
            }
            //reset startBucket to count 0 if not the start time
            if (startBucket != from.valueOf()) {
                buckets[this.toISONoMillis(new Date(startBucket))] = { count: 0 };
            }
        }
        return [{ "availabilityCount": { "": buckets } }];
    };
    UXClient.prototype.transformAggregatesForVisualization = function (aggregates, options) {
        var result = [];
        aggregates.forEach(function (agg, i) {
            var transformedAggregate = {};
            var aggregatesObject = {};
            transformedAggregate[options[i].alias] = aggregatesObject;
            if (agg.hasOwnProperty('__tsiError__'))
                transformedAggregate[''] = {};
            else if (agg.hasOwnProperty('aggregate')) {
                agg.dimension.forEach(function (d, j) {
                    var dateTimeToValueObject = {};
                    aggregatesObject[d] = dateTimeToValueObject;
                    agg.aggregate.dimension.forEach(function (dt, k) {
                        var measuresObject = {};
                        dateTimeToValueObject[dt] = measuresObject;
                        options[i].measureTypes.forEach(function (t, l) {
                            if (agg.aggregate.measures[j][k] != null && agg.aggregate.measures[j][k] != undefined &&
                                agg.aggregate.measures[j][k][l] != null && agg.aggregate.measures[j][k][l] != undefined)
                                measuresObject[t] = agg.aggregate.measures[j][k][l];
                            else
                                measuresObject[t] = null;
                        });
                    });
                });
            }
            else {
                var dateTimeToValueObject = {};
                aggregatesObject[''] = dateTimeToValueObject;
                agg.dimension.forEach(function (dt, j) {
                    var measuresObject = {};
                    dateTimeToValueObject[dt] = measuresObject;
                    options[i].measureTypes.forEach(function (t, l) {
                        measuresObject[t] = agg.measures[j][l];
                    });
                });
            }
            result.push(transformedAggregate);
        });
        return result;
    };
    // exposed publicly to use for highlighting elements in the well on hover/focus
    UXClient.prototype.createEntityKey = function (aggName, aggIndex) {
        if (aggIndex === void 0) { aggIndex = 0; }
        return Utils.createEntityKey(aggName, aggIndex);
    };
    UXClient.prototype.transformTsqResultsToEventsArray = function (results) {
        var flattenedResults = [];
        results.forEach(function (tsqr) {
            tsqr.timestamps.forEach(function (ts, idx) {
                var event = {};
                event['timestamp ($ts)'] = ts;
                tsqr.properties.forEach(function (p) {
                    event[p.name + "_" + p.type] = { name: p.name, type: p.type, value: p.values[idx] };
                });
                flattenedResults.push(event);
            });
        });
        return flattenedResults.sort(function (a, b) { return (new Date(a['timestamp ($ts)'])).valueOf() < (new Date(b['timestamp ($ts)'])).valueOf() ? -1 : 1; });
    };
    return UXClient;
}());

export { AvailabilityChart as A, UXClient as U };