tsiclient
Version:
--- [//]: <> (This content is similar to https://github.com/MicrosoftDocs/azure-docs/edit/main/includes/tsi-retirement.md)
1,018 lines (1,011 loc) • 167 kB
JavaScript
import { a as __extends, _ as __assign } from './tslib.es6-f952ba6f.js';
import { U as Utils, Y as YAxisStates, D as DataTypes, L as LINECHARTTOPPADDING, N as NONNUMERICTOPMARGIN, a as EventElementTypes, S as ShiftTypes, K as KeyCodes, M as MARKERVALUENUMERICHEIGHT, b as LINECHARTXOFFSET, V as VALUEBARHEIGHT, s as swimlaneLabelConstants, c as SERIESLABELWIDTH, d as LINECHARTCHARTMARGINS, T as TooltipMeasureFormat } from './Utils-38a0872e.js';
import * as d3 from 'd3';
import { area, scaleLinear, line, axisLeft, select, easeExp, drag, extent, pointer, scaleTime, brushX, local } from 'd3';
import { voronoi } from 'd3-voronoi';
import { C as Component } from './Component-5173b5ea.js';
import { L as Legend } from './Legend-a9a3b412.js';
import { C as ChartComponentData } from './Grid-170eaa9c.js';
import { T as TemporalXAxisComponent } from './TemporalXAxisComponent-1ecfb135.js';
import { C as ContextMenu } from './ContextMenu-e6ce08ae.js';
import { T as Tooltip } from './Tooltip-f293336f.js';
import { interpolatePath } from 'd3-interpolate-path';
var LineChartData = /** @class */ (function (_super) {
__extends(LineChartData, _super);
function LineChartData() {
var _this = _super.call(this) || this;
_this.timeMap = {};
_this._yExtents = [];
return _this;
}
Object.defineProperty(LineChartData.prototype, "yExtents", {
get: function () {
return this._yExtents;
},
enumerable: false,
configurable: true
});
LineChartData.prototype.setYExtents = function (idx, value) {
this._yExtents[idx] = value;
};
LineChartData.prototype.resetYExtents = function () {
this._yExtents = [];
for (var i = 0; i < this.data.length; i++) {
this._yExtents.push(null);
}
};
LineChartData.prototype.setTimeMap = function () {
this.timeMap = this.allValues.reduce(function (timeMap, currVal) {
var millis = currVal.dateTime.valueOf();
if (currVal.bucketSize != undefined) {
millis += (currVal.bucketSize / 2);
}
if (currVal.measures != null) {
if (timeMap[millis] == undefined) {
timeMap[millis] = [currVal];
}
else {
timeMap[millis].push(currVal);
}
}
return timeMap;
}, {});
};
LineChartData.prototype.mergeDataToDisplayStateAndTimeArrays = function (data, aggregateExpressionOptions) {
if (aggregateExpressionOptions === void 0) { aggregateExpressionOptions = null; }
_super.prototype.mergeDataToDisplayStateAndTimeArrays.call(this, data, aggregateExpressionOptions);
};
return LineChartData;
}(ChartComponentData));
var Plot = /** @class */ (function (_super) {
__extends(Plot, _super);
function Plot(renderTarget) {
var _this = _super.call(this, renderTarget) || this;
_this.backdropRect = null;
return _this;
}
Plot.prototype.getVisibleSeries = function (aggKey) {
var _this = this;
return Object.keys(this.chartComponentData.timeArrays[aggKey]).filter(function (s) {
return _this.chartComponentData.isSplitByVisible(aggKey, s);
});
};
Plot.prototype.createGradientKey = function (d, splitByIndex, i) {
return d.aggregateKey.replace(/^[^a-z]+|[^\w:.-]+/gi, "") + '_' + splitByIndex + '_' + i;
};
Plot.prototype.addGradientStops = function (d, gradient) {
var _this = this;
gradient.selectAll('stop').remove();
var colorMap = this.chartDataOptions.valueMap;
if (!d.measures) {
return;
}
//behavior if numeric measures
var allMeasuresNumeric = Object.keys(d.measures).reduce(function (p, currMeasure) {
return (typeof d.measures[currMeasure]) === 'number' && p;
}, true);
var sumOfMeasures;
if (allMeasuresNumeric) {
sumOfMeasures = Object.keys(d.measures).reduce(function (p, currMeasure) {
return p + d.measures[currMeasure];
}, 0);
if (sumOfMeasures <= 0) {
return;
}
}
var numMeasures = Object.keys(d.measures).length;
Object.keys(d.measures).reduce(function (p, currMeasure, i) {
var currFraction = allMeasuresNumeric ? (d.measures[currMeasure] / sumOfMeasures) : (i / numMeasures);
gradient.append('stop')
.attr("offset", (p * 100) + "%")
.attr("stop-color", _this.getColorForValue(currMeasure))
.attr("stop-opacity", 1);
var newFraction = allMeasuresNumeric ? (p + currFraction) : ((i + 1) / numMeasures);
gradient.append('stop')
.attr("offset", (newFraction * 100) + "%")
.attr("stop-color", _this.getColorForValue(currMeasure))
.attr("stop-opacity", 1);
return newFraction;
}, 0);
};
Plot.prototype.createBackdropRect = function (isVisible) {
this.backdropRect = this.aggregateGroup.selectAll('.tsi-backdropRect')
.data([isVisible]);
this.backdropRect.enter().append('rect')
.attr('class', 'tsi-backdropRect')
.attr('x', 0)
.attr('y', 0)
.merge(this.backdropRect)
.attr('visibility', function (d) { return d ? 'visible' : 'hidden'; })
.attr('width', this.x.range()[1])
.attr('height', this.height);
this.backdropRect.exit().remove();
};
Plot.prototype.getColorForValue = function (value) {
return Utils.getColorForValue(this.chartDataOptions, value);
};
Plot.prototype.getVisibleMeasures = function (measures) {
return Object.keys(measures).filter(function (measure) {
return measures[measure] !== 0;
});
};
Plot.prototype.hasData = function (d) {
return d.measures && (Object.keys(d.measures).length !== 0);
};
return Plot;
}(Component));
var LinePlot = /** @class */ (function (_super) {
__extends(LinePlot, _super);
function LinePlot(svgSelection) {
var _this = _super.call(this, svgSelection) || this;
_this.plotDataType = DataTypes.Numeric;
return _this;
}
LinePlot.prototype.getXPosition = function (d, x) {
var bucketSize = this.chartComponentData.displayState[d.aggregateKey].bucketSize;
if (bucketSize) {
return (x(d.dateTime) + x((new Date(d.dateTime.valueOf() + bucketSize)))) / 2;
}
return x(d.dateTime);
};
LinePlot.prototype.createAreaPath = function (y) {
var _this = this;
this.areaPath = area()
.curve(this.chartOptions.interpolationFunction)
.defined(function (d) {
return (d.measures !== null) &&
(d.measures[_this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)] !== null);
})
.x(function (d) {
return _this.getXPosition(d, _this.x);
})
.y0(function (d) {
return d.measures ? y(d.measures[_this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)]) : 0;
})
.y1(this.chartHeight);
};
// returns the next visibleAggI
LinePlot.prototype.render = function (chartOptions, visibleAggI, agg, aggVisible, aggregateGroup, chartComponentData, yAxisState, chartHeight, visibleAggCount, colorMap, previousAggregateData, x, areaPath, strokeOpacity, y, yMap, defs, chartDataOptions, previousIncludeDots, yTopAndHeight, svgSelection, categoricalMouseover, categoricalMouseout, yAxisOnClick) {
var _this = this;
this.previousIncludeDots = previousIncludeDots;
this.defs = defs;
this.chartOptions = chartOptions;
this.chartHeight = chartHeight;
this.visibleAggCount = visibleAggCount;
this.chartComponentData = chartComponentData;
this.x = x;
this.y = y;
var aggKey = agg.aggKey;
this.aggregateGroup = aggregateGroup;
var yAxisHasOnClick = yAxisOnClick && typeof yAxisOnClick === "function";
visibleAggI = yAxisState.positionInGroup;
this.yTop = yTopAndHeight[0];
this.height = yTopAndHeight[1];
var aggY;
var aggLine;
var aggEnvelope;
this.yAxisState = yAxisState;
var yExtent = this.yAxisState.yExtent;
aggY = scaleLinear();
aggY.range([this.height, this.chartOptions.aggTopMargin]);
if (this.chartComponentData.aggHasVisibleSplitBys(aggKey)) {
var yRange = (yExtent[1] - yExtent[0]) > 0 ? yExtent[1] - yExtent[0] : 1;
var yOffsetPercentage = 10 / (this.chartHeight / ((this.yAxisState.axisType === YAxisStates.Overlap) ? 1 : this.visibleAggCount));
var yDomainMin = this.chartOptions.isArea ?
(Math.max(yExtent[0] - (yRange * yOffsetPercentage), 0)) :
(yExtent[0] - (yRange * yOffsetPercentage));
aggY.domain([yDomainMin, yExtent[1] + (yRange * (10 / this.chartHeight))]);
}
else {
aggY.domain([0, 1]);
yExtent = [0, 1];
}
aggLine = line()
.curve(this.chartComponentData.displayState[aggKey].interpolationFunction ? d3[this.chartComponentData.displayState[aggKey].interpolationFunction] : this.chartOptions.interpolationFunction)
.defined(function (d) {
return (d.measures !== null) &&
(d.measures[_this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)] !== null);
})
.x(function (d) { return _this.getXPosition(d, _this.x); })
.y(function (d) {
return d.measures ? aggY(d.measures[_this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)]) : null;
});
aggEnvelope = area()
.curve(this.chartComponentData.displayState[aggKey].interpolationFunction ? d3[this.chartComponentData.displayState[aggKey].interpolationFunction] : this.chartOptions.interpolationFunction)
.defined(function (d) { return (d.measures !== null) && (d.measures['min'] !== null) && (d.measures['max'] !== null); })
.x(function (d) { return _this.getXPosition(d, _this.x); })
.y0(function (d) { return d.measures ? aggY(d.measures['max']) : 0; })
.y1(function (d) { return d.measures ? aggY(d.measures['min']) : 0; });
var localY = aggY.copy();
localY.range([this.yTop + this.height, this.yTop + this.chartOptions.aggTopMargin]);
yMap[aggKey] = localY;
var yAxis = this.aggregateGroup.selectAll(".yAxis")
.data([aggKey]);
var visibleYAxis = (aggVisible && (this.yAxisState.axisType !== YAxisStates.Shared || visibleAggI === 0));
yAxis = yAxis.enter()
.append("g")
.attr("class", "yAxis " + (yAxisHasOnClick ? "tsi-clickableYAxis tsi-swimLaneAxis-" + this.chartComponentData.displayState[aggKey].aggregateExpression.swimLane : ''))
.merge(yAxis)
.style("visibility", ((visibleYAxis && !this.chartOptions.yAxisHidden) ? "visible" : "hidden"));
if (this.yAxisState.axisType === YAxisStates.Overlap) {
yAxis.call(axisLeft(aggY).tickFormat(Utils.formatYAxisNumber).tickValues(yExtent))
.selectAll("text")
.attr("y", function (d, j) { return (j == 0) ? (-visibleAggI * 16) : (visibleAggI * 16); })
.style("fill", this.chartComponentData.displayState[aggKey].color);
}
else {
yAxis.call(axisLeft(aggY).tickFormat(Utils.formatYAxisNumber)
.ticks(Math.max(2, Math.ceil(this.height / (this.yAxisState.axisType === YAxisStates.Stacked ? this.visibleAggCount : 1) / 90))))
.selectAll("text").classed("standardYAxisText", true);
}
// If yAxisOnClick present, attach to yAxis
if (yAxisHasOnClick) {
yAxis.on("click", function () {
yAxisOnClick();
});
var label_1 = document.getElementsByClassName("tsi-swimLaneLabel-" + agg.swimLane)[0];
if (label_1) {
yAxis.on("mouseover", function () {
label_1.classList.add("tsi-axisHover");
yAxis.selectAll("text").classed("tsi-boldYAxisText", true);
});
yAxis.on("mouseout", function () {
label_1.classList.remove("tsi-axisHover");
yAxis.selectAll("text").classed("tsi-boldYAxisText", false);
});
}
}
yAxis.exit().remove();
var guideLinesData = {
x: this.x,
y: aggY,
visible: visibleYAxis
};
var splitByColors = Utils.createSplitByColors(this.chartComponentData.displayState, aggKey, this.chartOptions.keepSplitByColor);
var includeDots = this.chartOptions.includeDots || this.chartComponentData.displayState[aggKey].includeDots;
var self = this;
var splitByGroups = this.aggregateGroup.selectAll(".tsi-splitByGroup")
.data(Object.keys(this.chartComponentData.timeArrays[aggKey]));
splitByGroups.enter()
.append("g")
.attr("class", "tsi-splitByGroup " + agg.aggKey)
.merge(splitByGroups)
.each(function (splitBy, j) {
var _this = this;
colorMap[aggKey + "_" + splitBy] = splitByColors[j];
// creation of segments between each gap in the data
var segments = [];
var lineData = self.chartComponentData.timeArrays[aggKey][splitBy];
var visibleMeasure = self.chartComponentData.getVisibleMeasure(aggKey, splitBy);
for (var i = 0; i < lineData.length - 1; i++) {
if (lineData[i].measures !== null && lineData[i].measures[visibleMeasure] !== null) {
var scannerI = i + 1;
while (scannerI < lineData.length && ((lineData[scannerI].measures == null) ||
lineData[scannerI].measures[visibleMeasure] == null)) {
scannerI++;
}
if (scannerI < lineData.length && scannerI != i + 1) {
segments.push([lineData[i], lineData[scannerI]]);
}
i = scannerI - 1;
}
}
var durationFunction = function (d) {
var previousUndefined = previousAggregateData.get(_this) === undefined;
return (self.chartOptions.noAnimate || previousUndefined) ? 0 : self.TRANSDURATION;
};
var gapPath = select(this).selectAll(".tsi-gapLine")
.data(segments.map(function (d) {
d.inTransition = true;
return d;
}));
gapPath.enter()
.append("path")
.attr("class", "tsi-valueElement tsi-gapLine")
.merge(gapPath)
.style("visibility", function (d) {
return (self.chartComponentData.isSplitByVisible(aggKey, splitBy)) ? "visible" : "hidden";
})
.transition()
.duration(durationFunction)
.ease(easeExp)
.attr("stroke-dasharray", "5,5")
.attr("stroke", splitByColors[j])
.attrTween('d', function (d) {
var previous = select(this).attr('d');
var current = aggLine(d);
return interpolatePath(previous, current);
})
.on('end', function (d) {
d.inTransition = false;
});
var path = select(this).selectAll(".tsi-valueLine")
.data([self.chartComponentData.timeArrays[aggKey][splitBy]].map(function (d) {
d.inTransition = true;
return d;
}));
path.enter()
.append("path")
.attr("class", "tsi-valueElement tsi-valueLine")
.merge(path)
.style("visibility", function (d) {
return (self.chartComponentData.isSplitByVisible(aggKey, splitBy)) ? "visible" : "hidden";
})
.transition()
.duration(durationFunction)
.ease(easeExp)
.attr("stroke", splitByColors[j])
.attr("stroke-opacity", self.strokeOpacity)
.attrTween('d', function (d) {
var previous = select(this).attr('d');
var current = aggLine(d);
return interpolatePath(previous, current);
})
.on('end', function (d) {
d.inTransition = false;
});
if (self.chartOptions.includeDots || self.chartComponentData.displayState[aggKey].includeDots) {
var dots = select(this).selectAll(".tsi-valueDot")
.data(self.chartComponentData.timeArrays[aggKey][splitBy].filter(function (d) {
return d && d.measures && d.measures[self.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)] !== null;
}), function (d, i) {
return d.dateTime.toString();
});
dots.enter()
.append('circle')
.attr('class', 'tsi-valueElement tsi-valueDot')
.attr('r', 3)
.merge(dots)
.style("visibility", function (d) {
return (self.chartComponentData.isSplitByVisible(aggKey, splitBy) && d.measures) ? "visible" : "hidden";
})
.transition()
.duration(function (d, i) {
return (self.previousIncludeDots.get(this) === true) ? durationFunction() : 0;
})
.ease(easeExp)
.attr("fill", splitByColors[j])
.attr('cx', function (d) { return self.getXPosition(d, self.x); })
.attr('cy', function (d) {
return d.measures ? aggY(d.measures[self.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)]) : null;
})
.each(function () {
self.previousIncludeDots.set(this, includeDots);
});
dots.exit().remove();
}
else {
select(this).selectAll(".tsi-valueDot").remove();
}
var envelopeData = {};
if ((self.chartComponentData.displayState[aggKey].includeEnvelope || self.chartOptions.includeEnvelope) && self.chartComponentData.isPossibleEnvelope(aggKey, splitBy)) {
envelopeData = self.chartComponentData.timeArrays[aggKey][splitBy].map(function (d) { return (__assign(__assign({}, d), { isEnvelope: true })); });
}
var envelope = select(this).selectAll(".tsi-valueEnvelope")
.data([envelopeData]);
envelope.enter()
.append("path")
.attr("class", "tsi-valueElement tsi-valueEnvelope")
.merge(envelope)
.style("visibility", function (d) {
return (self.chartComponentData.isSplitByVisible(aggKey, splitBy)) ? "visible" : "hidden";
})
.transition()
.duration(durationFunction)
.ease(easeExp)
.style("fill", splitByColors[j])
.attr("fill-opacity", .2)
.attr("d", aggEnvelope);
if (self.chartOptions.isArea) {
self.createAreaPath(aggY);
var area = select(this).selectAll(".tsi-valueArea")
.data([self.chartComponentData.timeArrays[aggKey][splitBy]]);
// logic for shiny gradient fill via url()
var svgId = Utils.guid();
var lg = self.defs.selectAll('linearGradient')
.data([self.chartComponentData.timeArrays[aggKey][splitBy]]);
var gradient = lg.enter()
.append('linearGradient');
gradient.merge(lg)
.attr('id', svgId).attr('x1', '0%').attr('x2', '0%').attr('y1', '0%').attr('y2', '100%');
gradient.append('stop').attr('offset', '0%').attr('style', function () { return 'stop-color:' + splitByColors[j] + ';stop-opacity:.2'; });
gradient.append('stop').attr('offset', '100%').attr('style', function () { return 'stop-color:' + splitByColors[j] + ';stop-opacity:.03'; });
lg.exit().remove();
area.enter()
.append("path")
.attr("class", "tsi-valueArea")
.merge(area)
.style("fill", 'url(#' + (svgId) + ')')
.style("visibility", function (d) {
return (self.chartComponentData.isSplitByVisible(aggKey, splitBy)) ? "visible" : "hidden";
})
.transition()
.duration(durationFunction)
.ease(easeExp)
.attr("d", self.areaPath);
area.exit().remove();
}
gapPath.exit().remove();
path.exit().remove();
previousAggregateData.set(this, splitBy);
});
splitByGroups.exit().remove();
};
return LinePlot;
}(Plot));
var TOPMARGIN = 4;
var CategoricalPlot = /** @class */ (function (_super) {
__extends(CategoricalPlot, _super);
function CategoricalPlot(svgSelection) {
var _this = _super.call(this, svgSelection) || this;
_this.plotDataType = DataTypes.Categorical;
return _this;
}
CategoricalPlot.prototype.onMouseover = function (d, rectWidth) {
var _this = this;
var visibleMeasures = this.getVisibleMeasures(d.measures);
this.hoverRect.attr('visibility', 'visible')
.attr('x', function () {
return _this.x(new Date(d.dateTime));
})
.attr('width', rectWidth)
.attr('height', Math.max(0, this.chartHeight + 1 - LINECHARTTOPPADDING))
.attr('fill', function () {
return visibleMeasures.length === 1 ? _this.getColorForValue(visibleMeasures[0]) : 'none';
});
};
CategoricalPlot.prototype.onMouseout = function () {
this.hoverRect.attr('visibility', 'hidden');
this.categoricalMouseout();
};
CategoricalPlot.prototype.createHoverRect = function () {
if (!this.hoverRect) {
this.hoverRect = this.chartGroup.append('rect')
.attr('class', 'tsi-categoricalHoverRect')
.attr('y', LINECHARTTOPPADDING)
.attr('height', this.chartHeight + 1);
}
else {
this.hoverRect.raise();
}
};
CategoricalPlot.prototype.getSeriesEndDate = function () {
if (this.chartDataOptions.searchSpan) {
return new Date(this.chartDataOptions.searchSpan.to);
}
return new Date(this.chartComponentData.toMillis);
};
CategoricalPlot.prototype.getBucketEndDate = function (d, i) {
var _this = this;
var data = this.chartComponentData.timeArrays[d.aggregateKey][d.splitBy];
if (i + 1 < data.length) {
return data[i + 1].dateTime;
}
else {
var shouldRoundEnd = Utils.safeNotNullOrUndefined(function () { return _this.chartDataOptions.searchSpan; }) && Utils.safeNotNullOrUndefined(function () { return _this.chartDataOptions.searchSpan.bucketSize; });
return shouldRoundEnd ? Utils.roundToMillis(this.getSeriesEndDate().valueOf(), Utils.parseTimeInput(this.chartDataOptions.searchSpan.bucketSize)) : this.getSeriesEndDate();
}
};
CategoricalPlot.prototype.render = function (chartOptions, visibleAggI, agg, aggVisible, aggregateGroup, chartComponentData, yExtent, chartHeight, visibleAggCount, colorMap, previousAggregateData, x, areaPath, strokeOpacity, y, yMap, defs, chartDataOptions, previousIncludeDots, yTopAndHeight, chartGroup, categoricalMouseover, categoricalMouseout) {
var _this = this;
this.chartOptions = chartOptions;
this.yTop = yTopAndHeight[0];
this.height = yTopAndHeight[1];
this.x = x;
this.chartComponentData = chartComponentData;
var aggKey = agg.aggKey;
this.chartDataOptions = chartDataOptions;
this.chartHeight = chartHeight;
this.chartGroup = chartGroup;
this.categoricalMouseover = categoricalMouseover;
this.aggregateGroup = aggregateGroup;
this.categoricalMouseout = categoricalMouseout;
this.createBackdropRect(true);
if (this.aggregateGroup.selectAll('defs').empty()) {
this.defs = this.aggregateGroup.append('defs');
}
if (this.aggregateGroup.selectAll('.tsi-splitBysGroup').empty()) {
this.splitBysGroup = this.aggregateGroup.append('g').classed('tsi-splitBysGroup', true);
}
var gradientData = [];
var durationFunction = function (d) {
var previousUndefined = previousAggregateData.get(_this) === undefined;
return (self.chartOptions.noAnimate || previousUndefined) ? 0 : self.TRANSDURATION;
};
var self = this;
this.createHoverRect();
var series = this.getVisibleSeries(aggKey);
var heightPerSeries = Math.max((self.chartDataOptions.height - (series.length * TOPMARGIN)) / series.length, 0);
var splitByGroups = this.splitBysGroup.selectAll(".tsi-splitByGroup")
.data(series, function (d) {
return d.splitBy;
});
splitByGroups.enter()
.append("g")
.attr("class", "tsi-splitByGroup " + agg.aggKey)
.merge(splitByGroups)
.attr('transform', function (d, i) {
return 'translate(0,' + (NONNUMERICTOPMARGIN + (i * (_this.chartDataOptions.height / series.length))) + ')';
})
.each(function (splitBy, j) {
var data = self.chartComponentData.timeArrays[aggKey][splitBy];
var categoricalBuckets = select(this).selectAll(".tsi-categoricalBucket")
.data(data);
var getWidth = function (d, i) {
var seriesWidth = self.x.range()[1] - self.x.range()[0];
var xPos1 = Math.max(self.x(new Date(d.dateTime)), 0);
var xPos2 = self.x(self.getBucketEndDate(d, i));
return Math.max(xPos2 - xPos1, 1);
};
var categoricalBucketsEntered = categoricalBuckets.enter()
.append("rect")
.attr("class", "tsi-valueElement tsi-categoricalBucket")
.merge(categoricalBuckets)
.style("visibility", function (d) {
return (self.chartComponentData.isSplitByVisible(aggKey, splitBy) && self.hasData(d)) ? "visible" : "hidden";
})
.on('mouseover', function (event, d) {
var e = categoricalBucketsEntered.nodes();
var i = e.indexOf(event.currentTarget);
var y = self.yTop + (j * (self.chartDataOptions.height / series.length));
var x = self.x(new Date(d.dateTime)) + (getWidth(d, i));
var shouldMouseover = self.categoricalMouseover(d, x, y + NONNUMERICTOPMARGIN, self.getBucketEndDate(d, i), getWidth(d, i));
if (shouldMouseover) {
self.onMouseover(d, getWidth(d, i));
}
})
.on('mouseout', function () {
self.onMouseout();
})
.attr('cursor', (self.chartDataOptions.onElementClick ? 'pointer' : 'inherit'))
.on('click', function (event, d) {
if (self.chartDataOptions.onElementClick) {
self.chartDataOptions.onElementClick(d.aggregateKey, d.splitBy, d.dateTime.toISOString(), d.measures);
}
})
.transition()
.duration(durationFunction)
.ease(easeExp)
.attr('height', heightPerSeries)
.attr('width', getWidth)
.attr('x', function (d) {
return self.x(new Date(d.dateTime));
})
.each(function (d, i) {
var gradientKey = self.createGradientKey(d, j, i);
gradientData.push([gradientKey, d]);
select(this)
.attr('fill', "url(#" + gradientKey + ")");
});
categoricalBuckets.exit().remove();
});
splitByGroups.exit().remove();
//corresponding linear gradients
var gradients = this.defs.selectAll('linearGradient')
.data(gradientData, function (d) {
return d[1].splitBy;
});
var enteredGradients = gradients.enter()
.append('linearGradient')
.attr("x2", "0%")
.attr("y2", "100%")
.merge(gradients)
.attr("id", function (d) { return d[0]; });
enteredGradients
.each(function (d) {
self.addGradientStops(d[1], select(this));
});
gradients.exit().remove();
};
return CategoricalPlot;
}(Plot));
var EventsPlot = /** @class */ (function (_super) {
__extends(EventsPlot, _super);
function EventsPlot(svgSelection) {
var _this = _super.call(this, svgSelection) || this;
_this.gradientArray = {};
_this.eventOnClick = function (d) {
if (_this.chartDataOptions.onElementClick) {
_this.chartDataOptions.onElementClick(d.aggregateKey, d.splitBy, d.dateTime.toISOString(), d.measures);
}
};
_this.colorFunction = function (d) {
if (d.measures) {
if (Object.keys(d.measures).length === 1) {
return _this.getColorForValue(Object.keys(d.measures)[0]);
}
else {
return 'grey';
}
}
return 'none';
};
_this.createDateStringFunction = function (shiftMillis) {
return Utils.timeFormat(_this.chartComponentData.usesSeconds, _this.chartComponentData.usesMillis, _this.chartOptions.offset, _this.chartOptions.is24HourTime, shiftMillis, null, _this.chartOptions.dateLocale);
};
_this.createEventElements = function (splitBy, g, splitByIndex) {
var sortEvents = function () {
enteredEvents.sort(function (a, b) {
if (a.dateTime < b.dateTime) {
return -1;
}
else if (a.dateTime > b.dateTime) {
return 1;
}
return 0;
});
};
var data = _this.chartComponentData.timeArrays[_this.aggKey][splitBy];
var discreteEvents = g.selectAll(".tsi-discreteEvent")
.data(data, function (d) { return d.dateTime; });
var self = _this;
var enteredEvents;
var shiftMillis = _this.chartComponentData.getTemporalShiftMillis(_this.aggKey);
var dateStringFn = _this.createDateStringFunction(shiftMillis);
switch (_this.chartDataOptions.eventElementType) {
case EventElementTypes.Teardrop:
if (discreteEvents.size() && discreteEvents.classed('tsi-discreteEventDiamond')) {
g.selectAll('.tsi-discreteEvent').remove();
discreteEvents = g.selectAll(".tsi-discreteEvent")
.data(data, function (d) { return d.dateTime; });
}
enteredEvents = discreteEvents.enter()
.append('path')
.attr('class', 'tsi-discreteEvent tsi-valueElement')
.merge(discreteEvents)
.classed('tsi-discreteEventDiamond', false)
.classed('tsi-discreteEventTeardrop', true)
.attr('transform', function (d) {
return 'translate(' + (_this.x(new Date(d.dateTime)) + _this.eventHeight / 2) + ',' + (_this.eventHeight * 1.4) + ') rotate(180)';
})
.attr('d', _this.teardropD(_this.eventHeight, _this.eventHeight))
.attr('stroke-width', Math.min(_this.eventHeight / 2.25, 8))
.attr('stroke', _this.colorFunction)
.attr('fill', 'none');
break;
case EventElementTypes.Diamond:
if (discreteEvents.size() && discreteEvents.classed('tsi-discreteEventTeardrop')) {
g.selectAll('.tsi-discreteEvent').remove();
discreteEvents = g.selectAll(".tsi-discreteEvent")
.data(data, function (d) { return d.dateTime; });
}
enteredEvents = discreteEvents.enter()
.append('rect')
.attr('class', 'tsi-discreteEvent tsi-valueElement')
.merge(discreteEvents)
.classed('tsi-discreteEventTeardrop', false)
.classed('tsi-discreteEventDiamond', true)
.attr('d', 'none')
.attr('transform', function (d) {
return 'translate(' + _this.x(new Date(d.dateTime)) + ',0) rotate(45)';
})
.attr('fill', _this.colorFunction)
.attr('stroke', 'none');
break;
}
enteredEvents
.attr('y', 0)
.attr('x', 0)
.attr('width', _this.eventHeight)
.attr('height', _this.eventHeight)
.on('mouseover', function (event, d) {
select(this).raise();
self.onMouseover(d, splitByIndex);
})
.on('mouseout', function () {
_this.onMouseout();
})
.on('click', function (event, d) {
_this.eventOnClick(d);
})
.on('touchstart', function (event, d) {
_this.eventOnClick(d);
})
.on('keydown', function (event, d) {
if (event.keyCode === 9) {
sortEvents();
select(this).node().focus();
}
if (event.keyCode === 32 || event.keyCode === 13) {
self.eventOnClick(d);
}
})
.attr('role', _this.chartDataOptions.onElementClick ? 'button' : null)
.attr('tabindex', _this.chartDataOptions.onElementClick ? '0' : null)
.attr('cursor', _this.chartDataOptions.onElementClick ? 'pointer' : 'inherit')
.attr('aria-label', function (d) {
if (_this.chartDataOptions.onElementClick) {
var dateString = dateStringFn(d);
var retString_1 = _this.getString('event in series') + " " + d.aggregateName + " " + _this.getString('at time') + " " + dateString + ".";
Object.keys(d.measures).forEach(function (mKey) {
retString_1 += " " + _this.getString('measure with key') + " " + mKey + " " + _this.getString('and value') + " " + d.measures[mKey] + ".";
});
return retString_1;
}
return null;
})
.style('visibility', function (d) {
return (self.chartComponentData.isSplitByVisible(_this.aggKey, splitBy) && self.hasData(d)) ? 'visible' : 'hidden';
})
.each(function (d, i) {
if (Object.keys(d.measures).length > 1) {
var gradientKey = self.createGradientKey(d, splitByIndex, i);
self.gradientData.push([gradientKey, d]);
select(this)
.attr(self.chartDataOptions.eventElementType === EventElementTypes.Teardrop ? 'stroke' : 'fill', "url(#" + gradientKey + ")");
}
});
discreteEvents.exit().remove();
};
_this.shouldDrawBackdrop = function () {
//check to see if this is the first aggregate within a collapsed swimlane.
var lane = _this.chartComponentData.getSwimlane(_this.aggKey);
if (!_this.chartOptions.swimLaneOptions || !_this.chartOptions.swimLaneOptions[lane] ||
!_this.chartOptions.swimLaneOptions[lane].collapseEvents) {
return true;
}
var eventSeriesInLane = Object.keys(_this.chartComponentData.displayState).filter(function (aggKey) {
return _this.chartComponentData.getSwimlane(aggKey) === lane;
});
return eventSeriesInLane.indexOf(_this.aggKey) === 0;
};
_this.plotDataType = DataTypes.Events;
return _this;
}
EventsPlot.prototype.onMouseover = function (d, seriesNumber) {
var _this = this;
var getX = function () {
return _this.x(new Date(d.dateTime));
};
var seriesWidth = Math.ceil(this.eventHeight * Math.sqrt(2));
var seriesTop = this.yTop + NONNUMERICTOPMARGIN + (seriesWidth * seriesNumber) + (seriesWidth / 2);
var shouldMouseover = this.discreteEventsMouseover(d, getX() + (seriesWidth / 2), seriesTop, seriesWidth);
if (!shouldMouseover) {
return;
}
var visibleMeasures = this.getVisibleMeasures(d.measures);
this.hoverLine.attr('visibility', 'visible')
.attr('x1', getX)
.attr('x2', getX)
.attr('y1', LINECHARTTOPPADDING)
.attr('y2', this.chartHeight + 1)
.attr('stroke', function () {
return visibleMeasures.length === 1 ? _this.getColorForValue(visibleMeasures[0]) : 'grey';
});
};
EventsPlot.prototype.onMouseout = function () {
this.hoverLine.attr('visibility', 'hidden');
this.discreteEventsMouseout();
};
EventsPlot.prototype.createHoverLine = function () {
if (!this.hoverLine) {
this.hoverLine = this.chartGroup.append('line')
.attr('class', 'tsi-discreteEventHoverLine')
.attr('y1', LINECHARTTOPPADDING)
.attr('y2', this.chartHeight + 1)
.attr('pointer-events', 'none')
.attr('visibility', 'hidden');
}
else {
this.hoverLine.raise();
}
};
EventsPlot.prototype.setEventHeight = function (visibleSeriesCount) {
var useableHeight = this.height - NONNUMERICTOPMARGIN;
this.eventHeight = Math.floor((useableHeight / visibleSeriesCount) / Math.sqrt(2));
};
EventsPlot.prototype.render = function (chartOptions, visibleAggI, agg, aggVisible, aggregateGroup, chartComponentData, yExtent, chartHeight, visibleAggCount, colorMap, previousAggregateData, x, areaPath, strokeOpacity, y, yMap, defs, chartDataOptions, previousIncludeDots, yTopAndHeight, chartGroup, discreteEventsMouseover, discreteEventsMouseout) {
var _this = this;
this.chartOptions = chartOptions;
this.yTop = yTopAndHeight[0];
this.height = yTopAndHeight[1];
this.x = x;
this.chartComponentData = chartComponentData;
this.aggKey = agg.aggKey;
this.chartDataOptions = chartDataOptions;
this.chartHeight = chartHeight;
this.chartGroup = chartGroup;
this.aggregateGroup = aggregateGroup;
this.discreteEventsMouseover = discreteEventsMouseover;
this.discreteEventsMouseout = discreteEventsMouseout;
this.createBackdropRect(this.shouldDrawBackdrop());
if (this.aggregateGroup.selectAll('defs').empty()) {
this.defs = this.aggregateGroup.append('defs');
}
this.createHoverLine();
var series = this.getVisibleSeries(agg.aggKey);
this.setEventHeight(series.length);
if (this.aggregateGroup.selectAll('.tsi-splitBysGroup').empty()) {
this.splitBysGroup = this.aggregateGroup.append('g').classed('tsi-splitBysGroup', true);
}
var self = this;
var splitByGroups = this.splitBysGroup.selectAll(".tsi-splitByGroup")
.data(series, function (d) {
return d.splitBy;
});
this.gradientData = [];
var enteredSplitByGroups = splitByGroups.enter()
.append("g")
.attr("class", "tsi-eventsGroup tsi-splitByGroup " + this.aggKey)
.merge(splitByGroups)
.attr('transform', function (d, i) {
return 'translate(0,' + (+(i * (_this.chartDataOptions.height / series.length))) + ')';
})
.each(function (splitBy, j) {
self.createEventElements(splitBy, select(this), j);
}).each(function () {
self.themify(select(this), self.chartOptions.theme);
});
splitByGroups.exit().remove();
var gradients = this.defs.selectAll('linearGradient')
.data(this.gradientData, function (d) {
return d[1].splitBy;
});
var enteredGradients = gradients.enter()
.append('linearGradient')
.attr("x2", "0%")
.attr("y2", "100%")
.merge(gradients)
.attr("id", function (d) { return d[0]; });
enteredGradients
.each(function (d) {
self.addGradientStops(d[1], select(this));
});
gradients.exit().remove();
};
return EventsPlot;
}(Plot));
var AxisState = /** @class */ (function () {
function AxisState(axisType, yExtent, positionInGroup) {
this.axisType = axisType;
this.yExtent = yExtent;
this.positionInGroup = positionInGroup;
}
return AxisState;
}());
var MARKERSTRINGMAXLENGTH = 250;
var MARKERVALUEMAXWIDTH = 80;
var Marker = /** @class */ (function (_super) {
__extends(Marker, _super);
function Marker(renderTarget) {
var _this = _super.call(this, renderTarget) || this;
_this.tooltipMap = {};
_this.labelText = '';
_this.markerIsDragging = false;
_this.isSeriesLabels = false;
_this.ADDITIONALRIGHTSIDEOVERHANG = 12;
_this.guid = Utils.guid();
return _this;
}
Marker.prototype.getGuid = function () {
return this.guid;
};
Marker.prototype.setMillis = function (millis) {
this.timestampMillis = millis;
};
Marker.prototype.getMillis = function () {
return this.timestampMillis;
};
// returns whether the string was trimmed to the max length
Marker.prototype.setLabelText = function (labelText) {
if (labelText.length > MARKERSTRINGMAXLENGTH) {
this.labelText = labelText.slice(0, MARKERSTRINGMAXLENGTH);
return true;
}
this.labelText = labelText;
return false;
};
Marker.prototype.getLabelText = function () {
return this.labelText;
};
Marker.prototype.setSeriesLabelText = function (d, text, isSeriesLabelInFocus) {
text.classed('tsi-isExpanded', false);
var title = text.append('h4')
.attr('class', 'tsi-seriesLabelGroupName tsi-tooltipTitle');
Utils.appendFormattedElementsFromString(title, d.aggregateName);
var shiftTuple = this.chartComponentData.getTemporalShiftStringTuple(d.aggregateKey);
var shiftString = '';
if (shiftTuple !== null) {
shiftString = shiftTuple[0] === ShiftTypes.startAt ? this.timeFormat(new Date(shiftTuple[1])) : shiftTuple[1];
}
var labelDatum = {
splitBy: d.splitBy,
variableAlias: this.chartComponentData.displayState[d.aggregateKey].aggregateExpression.variableAlias,
timeShift: shiftString,
};
var subtitle = text.selectAll('.tsi-seriesLabelSeriesName').data([labelDatum]);
var enteredSubtitle = subtitle.enter()
.append('div')
.attr('class', 'tsi-seriesLabelSeriesName tsi-tooltipSubtitle');
if (labelDatum.splitBy && labelDatum.splitBy !== '') {
enteredSubtitle.append('span')
.classed('tsi-splitBy', true);
}
if (labelDatum.timeShift) {
enteredSubtitle.append('span')
.classed('tsi-timeShift', true);
}
if (labelDatum.variableAlias) {
enteredSubtitle.append('span')
.classed('tsi-variableAlias', true);
}
subtitle.exit().remove();
Utils.setSeriesLabelSubtitleText(enteredSubtitle, false);
};
Marker.prototype.tooltipFormat = function (d, text, measureFormat, xyrMeasures, isSeriesLabelInFocus) {
if (isSeriesLabelInFocus === void 0) { isSeriesLabelInFocus = false; }
var tooltipHeight = MARKERVALUENUMERICHEIGHT;
// revert to default text format if none specified
if (!this.isSeriesLabels) {
text.text(Utils.formatYAxisNumber(this.getValueOfVisible(d)))
.style('height', tooltipHeight + 'px')
.style('line-height', ((tooltipHeight - 2) + 'px')); // - 2 to account for border height
}
else {
this.setSeriesLabelText(d, text, isSeriesLabelInFocus);
}
text.classed('tsi-markerValueTooltipInner', true)
.style('border-color', this.colorMap[d.aggregateKey + "_" + d.splitBy]);
};
Marker.prototype.getLeft = function (d) {
return Math.round(this.x(d.timestamp) + this.marginLeft);
};
// check to see if any marker is being dragged
Marker.prototype.isMarkerDragOccuring = function () {
return this.markerIsDragging;
};
Marker.prototype.bumpMarker = function () {
var _this = this;
select(this.renderTarget).selectAll('.tsi-markerContainer')
.style('animation', 'none')
.sort(function (a, b) {
if (a.timestamp === _this.timestampMillis) {
return 1;
}
if (b.timestamp === _this.timestampMillis) {
return -1;
}
return a.timestamp < b.timestamp ? 1 : -1;
});
};
Marker.prototype.renderMarker = function () {
var _this = this;
var self = this;
var marker = select(this.renderTarget).selectAll(".tsi-markerContainer")
.filter(function (d) { return d.guid === _this.guid; })
.data([{ guid: this.guid, timestamp: this.timestampMillis }]);
this.markerContainer = marker.enter()
.append('div')
.attr('class', 'tsi-markerContainer')
.classed('tsi-isSeriesLabels', this.isSeriesLabels)
.merge(marker)
.style('top', this.chartMargins.top + this.chartOptions.aggTopMargin + "px")
.style('height', this.chartHeight - (this.chartMargins.top + this.chartMargins.bottom + this.chartOptions.aggTopMargin) + "px")
.style('left', function (d) {
return _this.getLeft(d) + "px";
})
.classed('tsi-isFlipped', function (d) {
if (_this.isSeriesLabels) {
return false;
}
return (_this.chartOptions.labelSeriesWithMarker && _this.x(d.timestamp) > (_this.x.range()[1] - MARKERVALUEMAXWIDTH));
})
.each(function (markerD) {
if (self.isSeriesLabels) {
return;
}
if (select(this).selectAll('.tsi-markerLine').empty()) {
select(this).append('div')
.attr('class', 'tsi-markerLine');
self.markerLabel = select(this).append('div')
.attr('class', 'tsi-markerLabel')
.on('mouseleave', function () {
select(this).classed('tsi-markerLabelHovered', false);
});
self.markerLabel.append('div')
.attr('class', 'tsi-markerGrabber')
.on('mouseenter', function () {
self.bumpMarker();
});
self.markerLabel.append('div')
.at