in src/UXClient/Components/Heatmap/Heatmap.ts [89:211]
public render (data: any, chartOptions?: any, aggregateExpressionOptions?: any) {
super.render(data, chartOptions, aggregateExpressionOptions);
// override visibleSplitByCap
this.aggregateExpressionOptions = this.aggregateExpressionOptions.map((aE: AggregateExpression) => {
return {...aE, visibleSplitByCap : 10000 };
});
this.chartOptions.setOptions(chartOptions);
var targetElement = d3.select(this.renderTarget).classed("tsi-heatmapComponent", true);
if(targetElement.style("position") == "static")
targetElement.style("position", "relative");
this.chartComponentData.mergeDataToDisplayStateAndTimeArrays(this.data, this.aggregateExpressionOptions);
if (this.chartControlsExist() && this.chartControlsPanel === null) {
this.createControlsPanel();
} else if ((this.chartOptions.hideChartControlPanel || !this.ellipsisItemsExist()) && this.chartControlsPanel !== null){
this.chartControlsPanel.remove();
this.chartControlsPanel = null;
}
if (this.chartControlsExist()) {
this.chartControlsPanel.style("top", (16 + (this.chartOptions.legend === 'compact' ? 32 : 0)) + 'px');
this.drawEllipsisMenu();
}
if (this.heatmapWrapper == null) {
this.heatmapWrapper = targetElement.append('div')
.attr("class", "tsi-heatmapWrapper");
this.draw = (isFromResize = false) => {
this.height = Math.floor(Math.max((<any>d3.select(this.renderTarget).node()).clientHeight, this.MINHEIGHT));
this.chartHeight = this.height - ((12 + (this.chartControlsExist() ? 28 : 0) + (this.chartOptions.legend === 'compact' ? 48 : 0)));
super.themify(targetElement, this.chartOptions.theme);
this.width = this.getWidth();
if (!isFromResize) {
this.chartWidth = this.getChartWidth();
}
this.x = d3.scaleTime()
.rangeRound([0, this.chartWidth - 90]); // HARDCODED to be the width of a heatmapCanvas
var fromAndTo: any = this.chartComponentData.setAllValuesAndVisibleTAs();
this.x.domain(fromAndTo);
this.heatmapWrapper.style("width", this.chartWidth + (this.chartMargins.left + this.chartMargins.right) + "px")
.style("height", this.chartHeight + "px")
.style("top", (20 + (this.chartControlsExist() ? 36 : 0) + (this.chartOptions.legend === 'compact' ? 40 : 0)) + "px");
if (this.chartControlsExist()) {
this.setControlsPanelWidth();
}
var canvasWrapperHeightTotal = this.chartHeight - this.timeLabelsHeight - this.chartMargins.bottom;
this.heatmapCanvasMap = {};
this.visibleAggs = Object.keys(this.chartComponentData.displayState).filter((aggKey) => {
return this.chartComponentData.getAggVisible(aggKey);
});
var self = this;
var canvasWrappers = this.heatmapWrapper.selectAll(".tsi-heatmapCanvasWrapper")
.data(this.visibleAggs);
var canvasesEntered = canvasWrappers.enter()
.append("div")
.merge(canvasWrappers)
.attr("class", "tsi-heatmapCanvasWrapper")
.style("width", this.chartWidth + 'px')
.style('left', this.chartMargins.left + 'px')
.style("height", (d, i) => {
return (canvasWrapperHeightTotal * (1 / this.visibleAggs.length)) + "px"
})
.style("top", (d, i) => {
return ((canvasWrapperHeightTotal * (1 / this.visibleAggs.length)) * i) + "px";
}).each(function (aggKey, aggI) {
var heatmapCanvas = new HeatmapCanvas(this);
self.heatmapCanvasMap[aggKey] = heatmapCanvas;
var renderHeatmapCanvas = () => {
function onCellFocus (focusStartTime, focusEndTime, focusX1, focusX2, focusY, splitBy) {
let shiftMillis = self.chartComponentData.getTemporalShiftMillis(aggKey);
self.renderTimeLabels(focusStartTime, focusEndTime, focusX1, focusX2, focusY, (aggI * canvasWrapperHeightTotal / self.visibleAggs.length), shiftMillis);
self.legendObject.triggerSplitByFocus(aggKey, splitBy);
self.chartOptions.onMouseover(aggKey, splitBy);
}
heatmapCanvas.render(self.chartComponentData, self.chartOptions, aggKey, null, null, onCellFocus, aggI, self.visibleAggs.length === 1);
}
renderHeatmapCanvas();
}).on("mouseleave", () => {
self.timeLabels.selectAll(".tsi-heatmapTimeLabels").remove();
self.legendObject.legendElement.selectAll('.tsi-splitByLabel').classed("inFocus", false);
self.chartOptions.onMouseout();
})
canvasWrappers.exit().remove();
this.legendObject.draw(this.chartOptions.legend, this.chartComponentData, this.mouseover,
this.heatmapWrapper, this.chartOptions, this.mouseout);
//remove all the colorKeys
this.legendObject.legendElement.selectAll(".seriesLabel").selectAll(".tsi-splitByLabel").selectAll(".colorKey").style("display", "none");
if (isFromResize) {
this.addTimeLabels();
}
}
this.legendObject = new Legend(this.draw, this.renderTarget, this.CONTROLSWIDTH);
}
this.chartComponentData.mergeDataToDisplayStateAndTimeArrays(this.data, this.aggregateExpressionOptions);
this.draw();
this.gatedShowGrid();
this.addTimeLabels();
window.addEventListener("resize", () => {
if (!this.chartOptions.suppressResizeListener) {
this.draw();
this.addTimeLabels();
}
});
this.legendPostRenderProcess(this.chartOptions.legend, this.heatmapWrapper, true);
}