in src/UXClient/Components/EventsTable/EventsTable.ts [39:97]
public render(events: any, chartOptions: any, fromTsx: boolean = false) {
this.chartOptions.setOptions(chartOptions);
this.maxVisibleIndex = 100;
this.eventsTableData.setEvents(events, fromTsx, this.chartOptions.timeSeriesIdProperties, chartOptions.offset);
var componentContainer = d3.select(this.renderTarget)
.classed("tsi-tableComponent", true);
super.themify(componentContainer, this.chartOptions.theme);
var tableLeftPanel;
if (this.eventsTable == null) {
tableLeftPanel = componentContainer.append("div")
.classed("tsi-tableLeftPanel", true);
this.eventsLegend = tableLeftPanel.append("div")
.classed("tsi-tableLegend", true);
this.eventsLegend.append("ul");
this.eventsTable = componentContainer.append("div")
.classed("tsi-eventsTable", true);
this.eventsTable.append("div").classed("tsi-columnHeaders", true);
var table = this.eventsTable.append("div").classed("tsi-eventRowsContainer", true)
.append("table").classed("tsi-eventRows", true);
table.append("tr");
} else {
tableLeftPanel = componentContainer.select("tsi-tableLeftPanel");
}
this.renderLegend();
this.buildTable();
tableLeftPanel.selectAll(".tsi-eventsDownload").remove();
var downloadButton = tableLeftPanel.append("button")
.attr("class", "tsi-eventsDownload tsi-primaryButton")
.attr("aria-label", this.getString("Download as CSV"))
.on("click", function() {
this.classList.add('tsi-downloading');
setTimeout(() => {
Utils.downloadCSV(self.eventsTableData.generateCSVString(true, 0), "Events")
this.classList.remove('tsi-downloading');
}, 100);
});
downloadButton.append("div").attr("class", "tsi-downloadEventsIcon");
downloadButton.append("div").attr("class", "tsi-downloadEventsText").text(this.getString("Download as CSV"));
//listen for table scroll and adjust the headers accordingly
var self = this;
this.eventsTable.select('.tsi-eventRowsContainer').node().scrollLeft = 0;
this.eventsTable.select('.tsi-eventRowsContainer').node().scrollTop = 0;
this.eventsTable.select('.tsi-eventRowsContainer').node().addEventListener('scroll', function(evt) {
self.eventsTable.select('.tsi-columnHeaders').node().scrollLeft = this.scrollLeft;
//check to see if need to infiniteScroll
if ((this.scrollTop + this.clientHeight) > (this.scrollHeight - 100)) {
let oldVisibleIndex = self.maxVisibleIndex
self.maxVisibleIndex += (Math.min(100, self.eventsTableData.events.length - self.maxVisibleIndex));
if (self.maxVisibleIndex != oldVisibleIndex)
self.buildTable();
}
}, false);
}