1 | import { a as __extends, _ as __assign } from './tslib.es6-f952ba6f.js';
|
2 | import { U as Utils } from './Utils-38a0872e.js';
|
3 | import { pointer, extent, select, scaleSequential, interpolateViridis, scaleLinear, hcl, scaleTime } from 'd3';
|
4 | import { L as Legend } from './Legend-a9a3b412.js';
|
5 | import { E as EllipsisMenu } from './EllipsisMenu-7faacf35.js';
|
6 | import { C as ChartComponent } from './ChartComponent-ed6f3c6d.js';
|
7 | import { T as TemporalXAxisComponent } from './TemporalXAxisComponent-1ecfb135.js';
|
8 |
|
9 | var HeatmapData = (function () {
|
10 | function HeatmapData(chartComponentData, aggKey) {
|
11 | var _this = this;
|
12 | this.visibleSBs = [];
|
13 | this.timeStamps = [];
|
14 | this.numRows = 0;
|
15 | this.numCols = 0;
|
16 | this.aggKey = aggKey;
|
17 | this.chartComponentData = chartComponentData;
|
18 | this.chartComponentData.isFromHeatmap = true;
|
19 | this.visibleSBs = Object.keys(this.chartComponentData.displayState[aggKey].splitBys).filter(function (sb) {
|
20 | return (_this.chartComponentData.getSplitByVisible(aggKey, sb));
|
21 | });
|
22 | this.numRows = this.visibleSBs.length;
|
23 | this.from = new Date(chartComponentData.displayState[aggKey].aggregateExpression.searchSpan.from);
|
24 | this.to = new Date(chartComponentData.displayState[aggKey].aggregateExpression.searchSpan.to);
|
25 | this.bucketSize = Utils.parseTimeInput(chartComponentData.displayState[aggKey].aggregateExpression.searchSpan.bucketSize);
|
26 | this.createTimeValues();
|
27 | }
|
28 | HeatmapData.prototype.adjustStartTime = function () {
|
29 | return new Date(Utils.adjustStartMillisToAbsoluteZero(new Date(this.from).valueOf(), this.bucketSize));
|
30 | };
|
31 | HeatmapData.prototype.createTimeValues = function () {
|
32 | var _this = this;
|
33 | this.timeValues = {};
|
34 | this.allValues = [];
|
35 |
|
36 | var colI = 0;
|
37 | var adjustedStartTime = this.adjustStartTime();
|
38 | for (var currTime = adjustedStartTime; (currTime.valueOf() < this.to.valueOf()); currTime = new Date(currTime.valueOf() + this.bucketSize)) {
|
39 | this.timeValues[currTime.toISOString()] = this.visibleSBs.reduce(function (obj, splitBy, splitByI) {
|
40 | obj[splitBy] = {
|
41 | colI: colI,
|
42 | rowI: splitByI,
|
43 | value: null
|
44 | };
|
45 | return obj;
|
46 | }, {});
|
47 | colI += 1;
|
48 | }
|
49 | this.numCols = Object.keys(this.timeValues).length;
|
50 | this.visibleSBs.forEach(function (splitBy, rowI) {
|
51 | _this.chartComponentData.timeArrays[_this.aggKey][splitBy].forEach(function (valueObject, colI) {
|
52 | var timestamp = new Date(valueObject.dateTime.valueOf()).toISOString();
|
53 | var visibleMeasure = _this.chartComponentData.getVisibleMeasure(_this.aggKey, splitBy);
|
54 | if (_this.timeValues[timestamp]) {
|
55 | _this.timeValues[timestamp][splitBy].value = valueObject.measures ? valueObject.measures[visibleMeasure] : null;
|
56 | if (Utils.safeNotNullOrUndefined(function () { return valueObject.measures[visibleMeasure]; }))
|
57 | _this.allValues.push(valueObject.measures[visibleMeasure]);
|
58 | }
|
59 | });
|
60 | });
|
61 | };
|
62 | return HeatmapData;
|
63 | }());
|
64 |
|
65 | var HeatmapCanvas = (function (_super) {
|
66 | __extends(HeatmapCanvas, _super);
|
67 | function HeatmapCanvas(renderTarget) {
|
68 | var _this = _super.call(this, renderTarget) || this;
|
69 | _this.gradientWidth = 8;
|
70 | _this.focusedXIndex = -1;
|
71 | _this.focusedYIndex = -1;
|
72 | _this.legendWidth = 80;
|
73 | return _this;
|
74 | }
|
75 | HeatmapCanvas.prototype.renderScale = function (aggColor, isOnlyAgg) {
|
76 | var _this = this;
|
77 | this.colorLegend.selectAll("*").remove();
|
78 | if (this.colorScale.domain() === null || isNaN(this.colorScale.domain()[0]) || isNaN(this.colorScale.domain()[1])) {
|
79 | return;
|
80 | }
|
81 | var gradientGuid = Utils.guid();
|
82 | var gradient = this.colorLegend.append("defs")
|
83 | .append("linearGradient")
|
84 | .attr("id", "gradient" + this.aggI + gradientGuid)
|
85 | .attr("x1", "0%")
|
86 | .attr("y1", "100%")
|
87 | .attr("x2", "0%")
|
88 | .attr("y2", "0%");
|
89 | var percentileCalc = function (i) { return i * (_this.colorScale.domain()[1] - _this.colorScale.domain()[0]) + _this.colorScale.domain()[0]; };
|
90 | for (var i = 0; i <= 20; i++) {
|
91 | var color = this.getColor(aggColor, percentileCalc(i / 20), isOnlyAgg);
|
92 | gradient.append("stop")
|
93 | .attr("offset", (i * 5) + "%")
|
94 | .attr("stop-color", color)
|
95 | .attr("stop-opacity", 1);
|
96 | }
|
97 | var gradientRect = this.colorLegend.append("rect")
|
98 | .attr("x", this.legendWidth - this.gradientWidth)
|
99 | .attr("y", 6)
|
100 | .attr("width", this.gradientWidth)
|
101 | .attr("height", Math.max(0, this.height - 12))
|
102 | .style("fill", "url(#gradient" + String(this.aggI) + gradientGuid + ")");
|
103 | var highlightedValueY = null;
|
104 | var range = this.colorScale.domain()[1] - this.colorScale.domain()[0];
|
105 | var highlightedText = this.colorLegend.append("text").attr("class", "highlightedValueText");
|
106 | var highlightedLine = this.colorLegend.append("line").attr("class", "highlightedValueLine");
|
107 | var minText = this.colorLegend.append("text");
|
108 | var maxText = this.colorLegend.append("text");
|
109 | var setHighlightedValueLineAndText = function (line, text) {
|
110 | var percentile;
|
111 | if (range == 0) {
|
112 | percentile = .5;
|
113 | }
|
114 | else {
|
115 | percentile = (_this.highlightedValue != null) ? (_this.highlightedValue - _this.colorScale.domain()[0]) / range : 0;
|
116 | }
|
117 | highlightedValueY = (_this.height - 6) + (12 - _this.height) * percentile;
|
118 | text.attr("x", _this.legendWidth - _this.gradientWidth - 10)
|
119 | .attr("y", highlightedValueY)
|
120 | .style("stroke-width", 2)
|
121 | .text(Utils.formatYAxisNumber(_this.highlightedValue));
|
122 | line.attr("x1", _this.legendWidth - _this.gradientWidth - 5)
|
123 | .attr("x2", _this.legendWidth)
|
124 | .attr("y1", highlightedValueY)
|
125 | .attr("y2", highlightedValueY)
|
126 | .style("stroke-width", 2);
|
127 | minText.attr("fill-opacity", ((highlightedValueY == null) || highlightedValueY < _this.height - 18) ? 1 : 0);
|
128 | maxText.attr("fill-opacity", ((highlightedValueY == null) || highlightedValueY > 18) ? 1 : 0);
|
129 | };
|
130 | minText.attr("x", this.legendWidth - this.gradientWidth - 5)
|
131 | .attr("y", this.height - 6)
|
132 | .text(Utils.formatYAxisNumber(this.colorScale.domain()[0]))
|
133 | .attr("fill-width", ((highlightedValueY == null) || highlightedValueY < this.height - 18) ? 1 : 0);
|
134 | maxText.attr("x", this.legendWidth - this.gradientWidth - 5)
|
135 | .attr("y", 6)
|
136 | .text(Utils.formatYAxisNumber(this.colorScale.domain()[1]))
|
137 | .attr("fill-opacity", ((highlightedValueY == null) || highlightedValueY > 18) ? 1 : 0);
|
138 |
|
139 |
|
140 | if (this.highlightedTime && this.highlightedSplitBy != null && this.highlightedValue != null) {
|
141 | setHighlightedValueLineAndText(highlightedLine, highlightedText);
|
142 | minText.attr("fill-opacity", ((highlightedValueY == null) || highlightedValueY < this.height - 18) ? 1 : 0);
|
143 | maxText.attr("fill-opacity", ((highlightedValueY == null) || highlightedValueY > 18) ? 1 : 0);
|
144 | }
|
145 | var self = this;
|
146 | gradientRect.on("mousemove", function (event) {
|
147 | var yPos = pointer(event)[1];
|
148 | var percentile = 1 - ((yPos - 6) / (self.height - 12));
|
149 | self.highlightedValue = self.colorScale.domain()[0] + (range * percentile);
|
150 | setHighlightedValueLineAndText(highlightedLine, highlightedText);
|
151 | })
|
152 | .on("mouseleave", function () {
|
153 | _this.render(_this.data, _this.chartOptions, _this.aggKey, null, null, _this.onCellFocus, null, _this.isOnlyAgg);
|
154 | });
|
155 | };
|
156 | HeatmapCanvas.prototype.getExtent = function () {
|
157 | var rawExtent = extent(this.heatmapData.allValues);
|
158 | var extent$1 = rawExtent;
|
159 | if (rawExtent[0] === rawExtent[1]) {
|
160 | extent$1 = [rawExtent[0] - .05, rawExtent[1] + .05];
|
161 | }
|
162 | return extent$1;
|
163 | };
|
164 | HeatmapCanvas.prototype.render = function (data, chartOptions, aggKey, highlightedSplitBy, highlightedTime, onCellFocus, aggI, isOnlyAgg) {
|
165 | var _this = this;
|
166 | if (highlightedSplitBy === void 0) { highlightedSplitBy = null; }
|
167 | if (highlightedTime === void 0) { highlightedTime = null; }
|
168 | this.chartOptions.setOptions(chartOptions);
|
169 | this.aggKey = aggKey;
|
170 | this.data = data;
|
171 | this.isOnlyAgg = isOnlyAgg;
|
172 | if (aggI != null) {
|
173 | this.aggI = aggI;
|
174 | }
|
175 | this.heatmapData = new HeatmapData(data, aggKey);
|
176 | var container = select(this.renderTarget).classed("tsi-heatmapCanvasWrapper", true);
|
177 | _super.prototype.themify.call(this, container, this.chartOptions.theme);
|
178 | if (highlightedSplitBy != null)
|
179 | this.highlightedSplitBy = highlightedSplitBy;
|
180 | this.highlightedTime = highlightedTime;
|
181 | if (this.highlightedSplitBy != null && this.highlightedTime) {
|
182 | if (this.heatmapData.timeValues[this.highlightedTime.toISOString()][this.highlightedSplitBy] != null) {
|
183 | this.highlightedValue = this.heatmapData.timeValues[this.highlightedTime.toISOString()][this.highlightedSplitBy].value;
|
184 | }
|
185 | }
|
186 | if (onCellFocus)
|
187 | this.onCellFocus = onCellFocus;
|
188 | if (!container.select("canvas").empty())
|
189 | this.canvas = container.select("canvas");
|
190 | else
|
191 | this.canvas = container.append("canvas").attr("class", "tsi-heatmapCanvas");
|
192 | this.width = Math.floor(container.node().getBoundingClientRect().width - this.legendWidth - 10);
|
193 | this.height = Math.floor(container.node().getBoundingClientRect().height);
|
194 | this.canvas.attr("width", this.width);
|
195 | this.canvas.attr("height", this.height);
|
196 | this.ctx = this.canvas.node().getContext("2d");
|
197 | this.ctx.clearRect(0, 0, this.width, this.height);
|
198 | container.selectAll("svg").remove();
|
199 | var self = this;
|
200 | this.canvas.on("mousemove", function (event) {
|
201 | var mouseCoords = pointer(event);
|
202 | var indexesChanged = false;
|
203 | var newXIndex = self.calcCellXIndex(mouseCoords[0]);
|
204 | var newYIndex = self.calcCellYIndex(mouseCoords[1]);
|
205 | var visibleSplitBys = Object.keys(self.data.displayState[aggKey].splitBys).filter(function (splitBy) {
|
206 | return self.data.isSplitByVisible(self.aggKey, splitBy);
|
207 | });
|
208 | if (newXIndex != self.focusedXIndex) {
|
209 | self.focusedXIndex = newXIndex;
|
210 | indexesChanged = true;
|
211 | }
|
212 | if (newYIndex != self.focusedYIndex) {
|
213 | self.focusedYIndex = newYIndex;
|
214 | indexesChanged = true;
|
215 | }
|
216 | var highlightedSplitBy = visibleSplitBys[self.focusedYIndex];
|
217 | if (indexesChanged && self.focusedXIndex >= 0 && self.focusedYIndex >= 0) {
|
218 | var cellX = self.calcCellX(self.focusedXIndex);
|
219 | var sortedDates = Object.keys(self.heatmapData.timeValues)
|
220 | .sort(function (a, b) {
|
221 | return ((new Date(a)).valueOf() < (new Date(b)).valueOf()) ? -1 : 1;
|
222 | });
|
223 | var startDate = new Date(sortedDates[self.focusedXIndex]);
|
224 | this.highlightedTime = startDate;
|
225 | self.onCellFocus(startDate, new Date(startDate.valueOf() + self.heatmapData.bucketSize), Math.max(0, cellX), cellX + self.calcCellWidth(self.focusedXIndex), self.calcCellY(self.focusedYIndex), highlightedSplitBy);
|
226 | }
|
227 | self.render(self.data, self.chartOptions, self.aggKey, highlightedSplitBy, this.highlightedTime, self.onCellFocus, null, self.isOnlyAgg);
|
228 | }).on("mouseout", function () {
|
229 | self.focusedXIndex = -1;
|
230 | self.focusedYIndex = -1;
|
231 | self.render(self.data, self.chartOptions, self.aggKey, null, null, self.onCellFocus, null, self.isOnlyAgg);
|
232 | });
|
233 | this.aggKey = aggKey;
|
234 | this.rawCellHeight = Math.floor(this.height / this.heatmapData.numRows);
|
235 | this.cellHeightMod = this.height % this.heatmapData.numRows;
|
236 | this.rawCellWidth = this.width / this.heatmapData.numCols;
|
237 | this.cellWidthMod = this.width % this.heatmapData.numCols;
|
238 | this.colorLegend = container.append("svg").attr("class", "tsi-heatmapColorLegend");
|
239 | this.colorLegend.attr("width", this.legendWidth)
|
240 | .attr("height", this.height)
|
241 | .style("left", (this.width) + "px");
|
242 | var aggColor = data.displayState[aggKey].color;
|
243 | if (isOnlyAgg) {
|
244 | this.colorScale = scaleSequential(interpolateViridis).domain(this.getExtent());
|
245 | }
|
246 | else {
|
247 | this.colorScale = scaleLinear().domain(this.getExtent())
|
248 | .range([hcl(aggColor).brighter().l, hcl(aggColor).darker().l]);
|
249 | }
|
250 | this.renderScale(aggColor, isOnlyAgg);
|
251 | var sortedTimes = Object.keys(this.heatmapData.timeValues).sort(function (a, b) {
|
252 | return ((new Date(a)).valueOf() < (new Date(b)).valueOf()) ? -1 : 1;
|
253 | });
|
254 | sortedTimes.forEach(function (ts, tsI) {
|
255 | Object.keys(_this.heatmapData.timeValues[ts]).forEach(function (splitBy, sBI) {
|
256 | var cellData = _this.heatmapData.timeValues[ts][splitBy];
|
257 | if (cellData != null) {
|
258 | if (highlightedSplitBy && highlightedSplitBy != splitBy) {
|
259 | _this.drawCell(cellData.rowI, cellData.colI, cellData.value, aggColor, isOnlyAgg, true);
|
260 | }
|
261 | else {
|
262 | _this.drawCell(cellData.rowI, cellData.colI, cellData.value, aggColor, isOnlyAgg);
|
263 | }
|
264 | }
|
265 | });
|
266 | });
|
267 | };
|
268 | HeatmapCanvas.prototype.calcCellXIndex = function (x) {
|
269 | var xI = 0;
|
270 | while (Math.round(xI * this.rawCellWidth) < x) {
|
271 | xI++;
|
272 | }
|
273 | return Math.max(xI - 1, 0);
|
274 | };
|
275 | HeatmapCanvas.prototype.calcCellYIndex = function (y) {
|
276 | if (y < (this.cellHeightMod * (this.rawCellHeight + 1)))
|
277 | return Math.floor(y / (this.rawCellHeight + 1));
|
278 | var modOffset = this.cellHeightMod * (this.rawCellHeight + 1);
|
279 | return Math.floor((y - modOffset) / this.rawCellHeight) + this.cellHeightMod;
|
280 | };
|
281 | HeatmapCanvas.prototype.calcCellHeight = function (i) {
|
282 | return this.rawCellHeight + (i < this.cellHeightMod ? 1 : 0) - (this.rawCellWidth > 10 ? 1 : 0);
|
283 | };
|
284 | HeatmapCanvas.prototype.calcCellX = function (i) {
|
285 | return Math.round(this.rawCellWidth * i);
|
286 | };
|
287 | HeatmapCanvas.prototype.calcCellWidth = function (i) {
|
288 | return (Math.round(this.rawCellWidth * (i + 1)) - Math.round(this.rawCellWidth * i) - (this.rawCellWidth > 10 ? 1 : 0));
|
289 | };
|
290 | HeatmapCanvas.prototype.calcCellY = function (i) {
|
291 | return Math.min(i, this.cellHeightMod) + (this.rawCellHeight * i);
|
292 | };
|
293 | HeatmapCanvas.prototype.drawCell = function (rowI, colI, value, aggColor, isOnlyAgg, outOfFocus) {
|
294 | if (outOfFocus === void 0) { outOfFocus = false; }
|
295 | var x = this.calcCellX(colI);
|
296 | var y = this.calcCellY(rowI);
|
297 | this.ctx.fillStyle = value !== null ? this.getColor(aggColor, value, isOnlyAgg) : "transparent";
|
298 | this.ctx.globalAlpha = outOfFocus ? .3 : 1;
|
299 | this.ctx.fillRect(this.calcCellX(colI), this.calcCellY(rowI), this.calcCellWidth(colI), this.calcCellHeight(rowI));
|
300 | };
|
301 | HeatmapCanvas.prototype.getColor = function (aggColor, index, isOnlyAgg) {
|
302 | var color;
|
303 | if (isOnlyAgg) {
|
304 | color = this.colorScale(index);
|
305 | }
|
306 | else {
|
307 | var interpolatedColorLuminance = this.colorScale(index);
|
308 | var newColor = hcl(aggColor);
|
309 | newColor.l = interpolatedColorLuminance;
|
310 | color = newColor.formatHex();
|
311 | }
|
312 | return color;
|
313 | };
|
314 | return HeatmapCanvas;
|
315 | }(ChartComponent));
|
316 |
|
317 | var Heatmap = (function (_super) {
|
318 | __extends(Heatmap, _super);
|
319 | function Heatmap(renderTarget) {
|
320 | var _this = _super.call(this, renderTarget) || this;
|
321 | _this.lineHeight = 12;
|
322 | _this.splitByLabelWidth = 140;
|
323 | _this.timeLabels = null;
|
324 | _this.timeLabelsHeight = 52;
|
325 | _this.visibleAggs = null;
|
326 | _this.mouseover = function (hoveredAggKey, hoveredSplitBy) {
|
327 | var heatmapCanvas = _this.heatmapCanvasMap[hoveredAggKey];
|
328 | if (heatmapCanvas)
|
329 | heatmapCanvas.render(_this.chartComponentData, _this.chartOptions, hoveredAggKey, hoveredSplitBy, null, null, null, _this.visibleAggs.length === 1);
|
330 | };
|
331 | _this.mouseout = function (selection, hoveredAggKey) {
|
332 | var heatmapCanvas = _this.heatmapCanvasMap[hoveredAggKey];
|
333 | if (heatmapCanvas)
|
334 | heatmapCanvas.render(_this.chartComponentData, _this.chartOptions, hoveredAggKey, null, null, null, null, _this.visibleAggs.length === 1);
|
335 | };
|
336 | _this.renderTimeLabels = function (focusStartTime, focusEndTime, focusX1, focusX2, focusY, yOffset, shiftMillis) {
|
337 | _this.timeLabels.selectAll(".tsi-heatmapTimeLabels").remove();
|
338 | _this.timeLabels.node().parentNode.appendChild(_this.timeLabels.node());
|
339 | _this.timeLabels.append("line").attr("class", "tsi-heatmapFocusLine tsi-heatmapTimeLabels")
|
340 | .attr("x1", focusX1)
|
341 | .attr("x2", focusX1)
|
342 | .attr("y1", focusY + yOffset)
|
343 | .attr("y2", _this.chartHeight - _this.timeLabelsHeight);
|
344 | _this.timeLabels.append("line").attr("class", "tsi-heatmapFocusLine tsi-heatmapTimeLabels")
|
345 | .attr("x1", focusX2)
|
346 | .attr("x2", focusX2)
|
347 | .attr("y1", focusY + yOffset)
|
348 | .attr("y2", _this.chartHeight - _this.timeLabelsHeight);
|
349 | var textBoxG = _this.timeLabels.append("g")
|
350 | .attr("class", "tsi-heatmapTimeLabelTextBox tsi-heatmapTimeLabels");
|
351 | var text = textBoxG.append("text");
|
352 | text.append("tspan").text(Utils.timeFormat(_this.chartComponentData.usesSeconds, _this.chartComponentData.usesMillis, _this.chartOptions.offset, _this.chartOptions.is24HourTime, shiftMillis, null, _this.chartOptions.dateLocale)(focusStartTime))
|
353 | .attr("x", 0)
|
354 | .attr("y", 16);
|
355 | text.append("tspan").text(Utils.timeFormat(_this.chartComponentData.usesSeconds, _this.chartComponentData.usesMillis, _this.chartOptions.offset, _this.chartOptions.is24HourTime, shiftMillis, null, _this.chartOptions.dateLocale)(focusEndTime))
|
356 | .attr("x", 0)
|
357 | .attr("y", 30);
|
358 | var textDimensions = text.node().getBoundingClientRect();
|
359 | textBoxG.append("rect")
|
360 | .attr("x", -(textDimensions.width / 2) - 5)
|
361 | .attr("y", 0)
|
362 | .attr("height", textDimensions.height + 12)
|
363 | .attr("width", textDimensions.width + 10);
|
364 | text.node().parentNode.appendChild(text.node());
|
365 | var rawOffset = (focusX1 + focusX2) / 2;
|
366 | var leftOffset = Math.floor(((rawOffset - ((textDimensions.width / 2) + 6)) > 0) ? rawOffset : ((textDimensions.width / 2) + 6));
|
367 | textBoxG.attr("transform", "translate(" + leftOffset + "," + (_this.chartHeight - _this.timeLabelsHeight - _this.chartMargins.bottom) + ")");
|
368 | };
|
369 | _this.chartMargins = {
|
370 | top: 0,
|
371 | bottom: 8,
|
372 | left: 40,
|
373 | right: 20
|
374 | };
|
375 | return _this;
|
376 | }
|
377 | Heatmap.prototype.focusOnEllipsis = function () {
|
378 | if (this.ellipsisContainer !== null) {
|
379 | this.ellipsisContainer.select(".tsi-ellipsisButton").node().focus();
|
380 | }
|
381 | };
|
382 | Heatmap.prototype.createControlsPanel = function () {
|
383 | this.chartControlsPanel = Utils.createControlPanel(this.renderTarget, this.CONTROLSWIDTH, 52, this.chartOptions);
|
384 | this.ellipsisContainer = this.chartControlsPanel.append("div")
|
385 | .attr("class", "tsi-ellipsisContainerDiv");
|
386 | this.ellipsisMenu = new EllipsisMenu(this.ellipsisContainer.node());
|
387 | };
|
388 | Heatmap.prototype.chartControlsExist = function () {
|
389 | return (this.ellipsisItemsExist() && !this.chartOptions.hideChartControlPanel);
|
390 | };
|
391 | Heatmap.prototype.addTimeLabels = function () {
|
392 | if (this.timeLabels === null || this.svgSelection === null) {
|
393 | this.svgSelection = this.heatmapWrapper.append('svg')
|
394 | .attr('class', 'tsi-heatmapSVG')
|
395 | .attr('title', this.getString('Heatmap'));
|
396 | this.timeLabels = this.svgSelection.append('g').attr("class", "tsi-heatmapTimeLabels")
|
397 | .attr('transform', 'translate(' + this.chartMargins.left + ',0)');
|
398 | }
|
399 | if (!this.chartOptions.xAxisHidden) {
|
400 | this.xAxis = this.timeLabels.selectAll(".xAxis").data([this.x]);
|
401 | this.drawXAxis(this.chartHeight - 60);
|
402 | this.xAxis.exit().remove();
|
403 | var xAxisBaseline = this.timeLabels.selectAll(".xAxisBaseline").data([this.x]);
|
404 | var xAxisBaselineEntered = xAxisBaseline.enter().append("line")
|
405 | .attr("class", "xAxisBaseline")
|
406 | .attr("x1", .5)
|
407 | .merge(xAxisBaseline)
|
408 | .attr("y2", this.chartHeight - (this.chartMargins.bottom + this.timeLabelsHeight))
|
409 | .attr("y1", this.chartHeight - (this.chartMargins.bottom + this.timeLabelsHeight))
|
410 | .attr("x2", this.chartWidth - 90);
|
411 | xAxisBaseline.exit().remove();
|
412 | }
|
413 | if (this.timeLabels.selectAll(".xAxis").size() !== 0) {
|
414 | this.timeLabels.selectAll(".xAxis").style("visibility", ((!this.chartOptions.xAxisHidden) ? "visible" : "hidden"));
|
415 | }
|
416 | };
|
417 | Heatmap.prototype.render = function (data, chartOptions, aggregateExpressionOptions) {
|
418 | var _this = this;
|
419 | _super.prototype.render.call(this, data, chartOptions, aggregateExpressionOptions);
|
420 |
|
421 | this.aggregateExpressionOptions = this.aggregateExpressionOptions.map(function (aE) {
|
422 | return __assign(__assign({}, aE), { visibleSplitByCap: 10000 });
|
423 | });
|
424 | this.chartOptions.setOptions(chartOptions);
|
425 | var targetElement = select(this.renderTarget).classed("tsi-heatmapComponent", true);
|
426 | if (targetElement.style("position") == "static")
|
427 | targetElement.style("position", "relative");
|
428 | this.chartComponentData.mergeDataToDisplayStateAndTimeArrays(this.data, this.aggregateExpressionOptions);
|
429 | if (this.chartControlsExist() && this.chartControlsPanel === null) {
|
430 | this.createControlsPanel();
|
431 | }
|
432 | else if ((this.chartOptions.hideChartControlPanel || !this.ellipsisItemsExist()) && this.chartControlsPanel !== null) {
|
433 | this.chartControlsPanel.remove();
|
434 | this.chartControlsPanel = null;
|
435 | }
|
436 | if (this.chartControlsExist()) {
|
437 | this.chartControlsPanel.style("top", (16 + (this.chartOptions.legend === 'compact' ? 32 : 0)) + 'px');
|
438 | this.drawEllipsisMenu();
|
439 | }
|
440 | if (this.heatmapWrapper == null) {
|
441 | this.heatmapWrapper = targetElement.append('div')
|
442 | .attr("class", "tsi-heatmapWrapper");
|
443 | this.draw = function (isFromResize) {
|
444 | if (isFromResize === void 0) { isFromResize = false; }
|
445 | _this.height = Math.floor(Math.max(select(_this.renderTarget).node().clientHeight, _this.MINHEIGHT));
|
446 | _this.chartHeight = _this.height - ((12 + (_this.chartControlsExist() ? 28 : 0) + (_this.chartOptions.legend === 'compact' ? 48 : 0)));
|
447 | _super.prototype.themify.call(_this, targetElement, _this.chartOptions.theme);
|
448 | _this.width = _this.getWidth();
|
449 | if (!isFromResize) {
|
450 | _this.chartWidth = _this.getChartWidth();
|
451 | }
|
452 | _this.x = scaleTime()
|
453 | .rangeRound([0, _this.chartWidth - 90]);
|
454 | var fromAndTo = _this.chartComponentData.setAllValuesAndVisibleTAs();
|
455 | _this.x.domain(fromAndTo);
|
456 | _this.heatmapWrapper.style("width", _this.chartWidth + (_this.chartMargins.left + _this.chartMargins.right) + "px")
|
457 | .style("height", _this.chartHeight + "px")
|
458 | .style("top", (20 + (_this.chartControlsExist() ? 36 : 0) + (_this.chartOptions.legend === 'compact' ? 40 : 0)) + "px");
|
459 | if (_this.chartControlsExist()) {
|
460 | _this.setControlsPanelWidth();
|
461 | }
|
462 | var canvasWrapperHeightTotal = _this.chartHeight - _this.timeLabelsHeight - _this.chartMargins.bottom;
|
463 | _this.heatmapCanvasMap = {};
|
464 | _this.visibleAggs = Object.keys(_this.chartComponentData.displayState).filter(function (aggKey) {
|
465 | return _this.chartComponentData.getAggVisible(aggKey);
|
466 | });
|
467 | var self = _this;
|
468 | var canvasWrappers = _this.heatmapWrapper.selectAll(".tsi-heatmapCanvasWrapper")
|
469 | .data(_this.visibleAggs);
|
470 | var canvasesEntered = canvasWrappers.enter()
|
471 | .append("div")
|
472 | .merge(canvasWrappers)
|
473 | .attr("class", "tsi-heatmapCanvasWrapper")
|
474 | .style("width", _this.chartWidth + 'px')
|
475 | .style('left', _this.chartMargins.left + 'px')
|
476 | .style("height", function (d, i) {
|
477 | return (canvasWrapperHeightTotal * (1 / _this.visibleAggs.length)) + "px";
|
478 | })
|
479 | .style("top", function (d, i) {
|
480 | return ((canvasWrapperHeightTotal * (1 / _this.visibleAggs.length)) * i) + "px";
|
481 | }).each(function (aggKey, aggI) {
|
482 | var heatmapCanvas = new HeatmapCanvas(this);
|
483 | self.heatmapCanvasMap[aggKey] = heatmapCanvas;
|
484 | var renderHeatmapCanvas = function () {
|
485 | function onCellFocus(focusStartTime, focusEndTime, focusX1, focusX2, focusY, splitBy) {
|
486 | var shiftMillis = self.chartComponentData.getTemporalShiftMillis(aggKey);
|
487 | self.renderTimeLabels(focusStartTime, focusEndTime, focusX1, focusX2, focusY, (aggI * canvasWrapperHeightTotal / self.visibleAggs.length), shiftMillis);
|
488 | self.legendObject.triggerSplitByFocus(aggKey, splitBy);
|
489 | self.chartOptions.onMouseover(aggKey, splitBy);
|
490 | }
|
491 | heatmapCanvas.render(self.chartComponentData, self.chartOptions, aggKey, null, null, onCellFocus, aggI, self.visibleAggs.length === 1);
|
492 | };
|
493 | renderHeatmapCanvas();
|
494 | }).on("mouseleave", function () {
|
495 | self.timeLabels.selectAll(".tsi-heatmapTimeLabels").remove();
|
496 | self.legendObject.legendElement.selectAll('.tsi-splitByLabel').classed("inFocus", false);
|
497 | self.chartOptions.onMouseout();
|
498 | });
|
499 | canvasWrappers.exit().remove();
|
500 | _this.legendObject.draw(_this.chartOptions.legend, _this.chartComponentData, _this.mouseover, _this.heatmapWrapper, _this.chartOptions, _this.mouseout);
|
501 |
|
502 | _this.legendObject.legendElement.selectAll(".seriesLabel").selectAll(".tsi-splitByLabel").selectAll(".colorKey").style("display", "none");
|
503 | if (isFromResize) {
|
504 | _this.addTimeLabels();
|
505 | }
|
506 | };
|
507 | this.legendObject = new Legend(this.draw, this.renderTarget, this.CONTROLSWIDTH);
|
508 | }
|
509 | this.chartComponentData.mergeDataToDisplayStateAndTimeArrays(this.data, this.aggregateExpressionOptions);
|
510 | this.draw();
|
511 | this.gatedShowGrid();
|
512 | this.addTimeLabels();
|
513 | window.addEventListener("resize", function () {
|
514 | if (!_this.chartOptions.suppressResizeListener) {
|
515 | _this.draw();
|
516 | _this.addTimeLabels();
|
517 | }
|
518 | });
|
519 | this.legendPostRenderProcess(this.chartOptions.legend, this.heatmapWrapper, true);
|
520 | };
|
521 | return Heatmap;
|
522 | }(TemporalXAxisComponent));
|
523 |
|
524 | export { Heatmap as H };
|