1 | import { a as __extends } from './tslib.es6-f952ba6f.js';
|
2 | import { U as Utils, v as valueTypes } from './Utils-38a0872e.js';
|
3 | import { select } from 'd3';
|
4 | import { C as ChartComponent } from './ChartComponent-ed6f3c6d.js';
|
5 |
|
6 | var TimeSeriesEventCell = (function () {
|
7 | function TimeSeriesEventCell(name, value, type) {
|
8 | if (type === void 0) { type = null; }
|
9 | this.key = name + "_" + type;
|
10 | this.name = name;
|
11 | this.type = type;
|
12 | this.value = value;
|
13 | }
|
14 | return TimeSeriesEventCell;
|
15 | }());
|
16 |
|
17 | var TimeSeriesEvent = (function () {
|
18 | function TimeSeriesEvent(rawEvent, offset, offsetName, locale) {
|
19 | if (offset === void 0) { offset = null; }
|
20 | if (offsetName === void 0) { offsetName = null; }
|
21 | if (locale === void 0) { locale = 'en'; }
|
22 | this.cells = {};
|
23 | if (offset !== null) {
|
24 | var type = 'DateTime';
|
25 | var utcOffsetDate_1 = Utils.offsetUTC(new Date(Date.parse(rawEvent['timestamp ($ts)'].split("Z").join(""))));
|
26 | rawEvent[offsetName + "_" + type] = {
|
27 | name: offsetName,
|
28 | value: function () { return Utils.timeFormat(true, true, offset, true, null, null, locale)(utcOffsetDate_1); },
|
29 | type: type
|
30 | };
|
31 | }
|
32 | this.cells = Object.keys(rawEvent).reduce(function (cellObj, propId) {
|
33 | var cell;
|
34 | if (propId == "timestamp ($ts)")
|
35 | cell = new TimeSeriesEventCell('timestamp ($ts)', rawEvent[propId], 'DateTime');
|
36 | else {
|
37 | cell = new TimeSeriesEventCell(rawEvent[propId]['name'], rawEvent[propId]['value'], rawEvent[propId]['type']);
|
38 | }
|
39 | cellObj[cell.key] = cell;
|
40 | return cellObj;
|
41 | }, {});
|
42 | }
|
43 | return TimeSeriesEvent;
|
44 | }());
|
45 |
|
46 | var EventsTableData = (function () {
|
47 | function EventsTableData() {
|
48 | this.columns = {};
|
49 | this.rows = [];
|
50 | this.events = [];
|
51 | this.timestampColumnKey = "timestamp ($ts)_DateTime";
|
52 | this.offsetName = null;
|
53 | this.maxVisibleToStart = 10;
|
54 | this.offsetNameCache = {};
|
55 | this.timeSeriesIdProperties = [];
|
56 | }
|
57 | EventsTableData.prototype.createOffsetName = function (offset) {
|
58 | if (offset in this.offsetNameCache) {
|
59 | return this.offsetNameCache[offset];
|
60 | }
|
61 | var offsetSubstring = "";
|
62 | if ((typeof offset) === 'string') {
|
63 | offsetSubstring = Utils.convertTimezoneToLabel(offset);
|
64 | }
|
65 | else {
|
66 | offsetSubstring = Utils.formatOffsetMinutes(offset);
|
67 | }
|
68 | var offsetName = "timestamp " + offsetSubstring;
|
69 | this.offsetNameCache[offset] = offsetName;
|
70 | return offsetName;
|
71 | };
|
72 | EventsTableData.prototype.sortColumnKeys = function () {
|
73 | var _this = this;
|
74 | var columnKeys = Object.keys(this.columns);
|
75 | var existingTsidColumnKeys = Object.values(this.columns).filter(function (c) { return c['isTsid']; }).map(function (c) { return c['key']; });
|
76 | columnKeys = existingTsidColumnKeys.concat(columnKeys.filter(function (c) { return !existingTsidColumnKeys.includes(c); }));
|
77 | var offsetKey = this.offsetName + "_DateTime";
|
78 | var lessTimestamps = columnKeys.filter(function (columnKey) {
|
79 | return (columnKey !== _this.timestampColumnKey && columnKey !== offsetKey);
|
80 | });
|
81 | var timestamps = [];
|
82 | if (columnKeys.indexOf(this.timestampColumnKey) !== -1)
|
83 | timestamps.push(this.timestampColumnKey);
|
84 | if (columnKeys.indexOf(offsetKey) !== -1)
|
85 | timestamps.push(offsetKey);
|
86 | return timestamps.concat(lessTimestamps);
|
87 | };
|
88 | EventsTableData.prototype.setEvents = function (rawEvents, fromTsx, timeSeriesIdProperties, offset) {
|
89 | var _this = this;
|
90 | if (offset === void 0) { offset = null; }
|
91 | this.timeSeriesIdProperties = timeSeriesIdProperties;
|
92 | this.events = [];
|
93 | rawEvents.forEach(function (rawEvent) {
|
94 | if (!fromTsx) {
|
95 | rawEvent = Object.keys(rawEvent).reduce(function (newEventMap, currColName) {
|
96 | newEventMap[currColName] = {
|
97 | name: currColName,
|
98 | value: rawEvent[currColName]
|
99 | };
|
100 | return newEventMap;
|
101 | }, {});
|
102 | }
|
103 | if (offset !== null) {
|
104 | _this.offsetName = _this.createOffsetName(offset);
|
105 | }
|
106 | var event = new TimeSeriesEvent(rawEvent, offset, (offset !== null ? _this.offsetName : null));
|
107 | _this.events.push(event);
|
108 | });
|
109 | this.constructColumns();
|
110 | };
|
111 | EventsTableData.prototype.sortEvents = function (columnKey, isAscending) {
|
112 | var sortType = this.columns[columnKey].type;
|
113 | var aTop = 1;
|
114 | var bTop = -1;
|
115 | if (!isAscending) {
|
116 | aTop = -1;
|
117 | bTop = 1;
|
118 | }
|
119 | this.events.sort(function (a, b) {
|
120 | if ((a.cells && a.cells[columnKey]) || (b.cells && b.cells[columnKey])) {
|
121 | var aConverted = (a.cells && a.cells[columnKey]) ? a.cells[columnKey].value : null;
|
122 | var bConverted = (b.cells && b.cells[columnKey]) ? b.cells[columnKey].value : null;
|
123 |
|
124 | if (aConverted == null)
|
125 | return bTop;
|
126 | if (bConverted == null)
|
127 | return aTop;
|
128 |
|
129 | if (sortType == "Double") {
|
130 | aConverted = Number(aConverted);
|
131 | bConverted = Number(bConverted);
|
132 | }
|
133 | else if (sortType == "DateTime") {
|
134 | aConverted = (new Date(aConverted)).valueOf();
|
135 | bConverted = (new Date(bConverted)).valueOf();
|
136 | }
|
137 |
|
138 | if (aConverted > bConverted)
|
139 | return aTop;
|
140 | if (aConverted < bConverted)
|
141 | return bTop;
|
142 | return 0;
|
143 | }
|
144 | return 0;
|
145 | });
|
146 | };
|
147 | EventsTableData.prototype.constructColumns = function () {
|
148 | var _this = this;
|
149 | var timeSeriesIdPropertyKeys = this.timeSeriesIdProperties.map(function (p) { return p.name + "_" + p.type; });
|
150 | var newColumns = {};
|
151 | this.events.forEach(function (event) {
|
152 | Object.keys(event.cells).forEach(function (cellKey) {
|
153 | var cell = event.cells[cellKey];
|
154 | if (_this.columns[cell.key] == null) {
|
155 | newColumns[cell.key] = {
|
156 | key: cell.key,
|
157 | name: cell.name,
|
158 | visible: true,
|
159 | type: cell.type,
|
160 | isTsid: timeSeriesIdPropertyKeys.includes(cell.key)
|
161 | };
|
162 | }
|
163 | else {
|
164 | newColumns[cell.key] = _this.columns[cell.key];
|
165 | }
|
166 | });
|
167 | });
|
168 | var visibleColumnCounter = Object.values(newColumns).filter(function (c) { return c['isTsid']; }).length;
|
169 | Object.keys(newColumns).forEach(function (columnKey) {
|
170 | if (newColumns[columnKey].isTsid) {
|
171 | newColumns[columnKey].visible = true;
|
172 | }
|
173 | else {
|
174 | newColumns[columnKey].visible = visibleColumnCounter < _this.maxVisibleToStart;
|
175 | visibleColumnCounter++;
|
176 | }
|
177 | });
|
178 | this.columns = newColumns;
|
179 | };
|
180 | EventsTableData.prototype.generateCSVString = function (includeAllColumns, offset) {
|
181 |
|
182 | var endLine = function (s) {
|
183 | return s.slice(0, s.length - 1) + "\n";
|
184 | };
|
185 | var columnKeys = this.sortColumnKeys();
|
186 | var csvString = endLine(columnKeys.reduce(function (headerString, columnKey) {
|
187 | return headerString + Utils.sanitizeString(columnKey, valueTypes.String) + ",";
|
188 | }, ""));
|
189 | this.events.forEach(function (event) {
|
190 | csvString += endLine(columnKeys.reduce(function (lineString, columnKey) {
|
191 | var value = (event.cells[columnKey] ? (typeof (event.cells[columnKey].value) === 'function' ? event.cells[columnKey].value() : event.cells[columnKey].value) : null);
|
192 | return lineString + ((event.cells[columnKey] != null && Utils.sanitizeString(value, event.cells[columnKey].type) !== null) ?
|
193 | Utils.sanitizeString(value, event.cells[columnKey].type) : "") + ",";
|
194 | }, ""));
|
195 | });
|
196 | return csvString;
|
197 | };
|
198 | return EventsTableData;
|
199 | }());
|
200 |
|
201 | var EventsTable = (function (_super) {
|
202 | __extends(EventsTable, _super);
|
203 | function EventsTable(renderTarget) {
|
204 | var _this = _super.call(this, renderTarget) || this;
|
205 | _this.maxVisibleIndex = 100;
|
206 | _this.isAscending = true;
|
207 | _this.timestampColumnName = 'timestamp ($ts)';
|
208 | _this.sortColumn = 'timestamp ($ts)';
|
209 | _this.allSelectedState = "all";
|
210 | _this.eventsTableData = new EventsTableData();
|
211 | _this.margins = {
|
212 | left: 10,
|
213 | right: 10
|
214 | };
|
215 | return _this;
|
216 | }
|
217 | EventsTable.prototype.EventsTable = function () {
|
218 | };
|
219 | EventsTable.prototype.renderFromEventsTsx = function (eventsFromTsx, chartOptions) {
|
220 | this.render(eventsFromTsx, chartOptions, true);
|
221 | };
|
222 | EventsTable.prototype.render = function (events, chartOptions, fromTsx) {
|
223 | if (fromTsx === void 0) { fromTsx = false; }
|
224 | this.chartOptions.setOptions(chartOptions);
|
225 | this.maxVisibleIndex = 100;
|
226 | this.eventsTableData.setEvents(events, fromTsx, this.chartOptions.timeSeriesIdProperties, chartOptions.offset);
|
227 | var componentContainer = select(this.renderTarget)
|
228 | .classed("tsi-tableComponent", true);
|
229 | _super.prototype.themify.call(this, componentContainer, this.chartOptions.theme);
|
230 | var tableLeftPanel;
|
231 | if (this.eventsTable == null) {
|
232 | tableLeftPanel = componentContainer.append("div")
|
233 | .classed("tsi-tableLeftPanel", true);
|
234 | this.eventsLegend = tableLeftPanel.append("div")
|
235 | .classed("tsi-tableLegend", true);
|
236 | this.eventsLegend.append("ul");
|
237 | this.eventsTable = componentContainer.append("div")
|
238 | .classed("tsi-eventsTable", true);
|
239 | this.eventsTable.append("div").classed("tsi-columnHeaders", true);
|
240 | var table = this.eventsTable.append("div").classed("tsi-eventRowsContainer", true)
|
241 | .append("table").classed("tsi-eventRows", true);
|
242 | table.append("tr");
|
243 | }
|
244 | else {
|
245 | tableLeftPanel = componentContainer.select("tsi-tableLeftPanel");
|
246 | }
|
247 | this.renderLegend();
|
248 | this.buildTable();
|
249 | tableLeftPanel.selectAll(".tsi-eventsDownload").remove();
|
250 | var downloadButton = tableLeftPanel.append("button")
|
251 | .attr("class", "tsi-eventsDownload tsi-primaryButton")
|
252 | .attr("aria-label", this.getString("Download as CSV"))
|
253 | .on("click", function () {
|
254 | var _this = this;
|
255 | this.classList.add('tsi-downloading');
|
256 | setTimeout(function () {
|
257 | Utils.downloadCSV(self.eventsTableData.generateCSVString(true, 0), "Events");
|
258 | _this.classList.remove('tsi-downloading');
|
259 | }, 100);
|
260 | });
|
261 | downloadButton.append("div").attr("class", "tsi-downloadEventsIcon");
|
262 | downloadButton.append("div").attr("class", "tsi-downloadEventsText").text(this.getString("Download as CSV"));
|
263 |
|
264 | var self = this;
|
265 | this.eventsTable.select('.tsi-eventRowsContainer').node().scrollLeft = 0;
|
266 | this.eventsTable.select('.tsi-eventRowsContainer').node().scrollTop = 0;
|
267 | this.eventsTable.select('.tsi-eventRowsContainer').node().addEventListener('scroll', function (evt) {
|
268 | self.eventsTable.select('.tsi-columnHeaders').node().scrollLeft = this.scrollLeft;
|
269 |
|
270 | if ((this.scrollTop + this.clientHeight) > (this.scrollHeight - 100)) {
|
271 | var oldVisibleIndex = self.maxVisibleIndex;
|
272 | self.maxVisibleIndex += (Math.min(100, self.eventsTableData.events.length - self.maxVisibleIndex));
|
273 | if (self.maxVisibleIndex != oldVisibleIndex)
|
274 | self.buildTable();
|
275 | }
|
276 | }, false);
|
277 | };
|
278 | EventsTable.prototype.renderLegend = function () {
|
279 | var _this = this;
|
280 | this.eventsLegend.html("");
|
281 | this.eventsLegend.append("ul");
|
282 | var columns = this.eventsTableData.sortColumnKeys()
|
283 | .map(function (cIdx) { return _this.eventsTableData.columns[cIdx]; });
|
284 | this.setSelectAllState();
|
285 | if (columns.length > 2) {
|
286 | var selectAllColumns = this.eventsLegend.select("ul")
|
287 | .append("li").attr("class", "tsi-selectAllColumns");
|
288 | selectAllColumns.append("button").attr("class", "tsi-columnToggleButton")
|
289 | .attr("aria-label", function () {
|
290 | var selectAllState = _this.getSelectAllState();
|
291 | return selectAllState !== "all" ? _this.getString("Toggle all columns") : _this.getString("Toggle all columns");
|
292 | })
|
293 | .on("click", function () {
|
294 | var setAllVisible = false;
|
295 | var selectAllState = _this.getSelectAllState();
|
296 | if (selectAllState != "all") {
|
297 | setAllVisible = true;
|
298 | }
|
299 | Object.keys(_this.eventsTableData.columns).forEach(function (columnKey) {
|
300 | if (setAllVisible) {
|
301 | _this.eventsTableData.columns[columnKey].visible = true;
|
302 | }
|
303 | else {
|
304 | if (columnKey != _this.timestampColumnName)
|
305 | _this.eventsTableData.columns[columnKey].visible = false;
|
306 | }
|
307 | });
|
308 | _this.setLegendColumnStates();
|
309 | _this.buildTable();
|
310 | });
|
311 | selectAllColumns.append("span").attr("class", "tsi-columnToggleCheckbox");
|
312 | selectAllColumns.append("span").attr("class", "tsi-selectAllSomeState");
|
313 | selectAllColumns.append("span").attr("class", "tsi-columnToggleName")
|
314 | .text(this.getString("All Columns"));
|
315 | }
|
316 | var toggleableColumnLis = this.eventsLegend.select("ul").selectAll(".tsi-columnToggle")
|
317 | .data(columns);
|
318 | var toggleableColumnLisEntered = toggleableColumnLis.enter()
|
319 | .append("li")
|
320 | .classed("tsi-columnToggle", true)
|
321 | .merge(toggleableColumnLis);
|
322 | var self = this;
|
323 | toggleableColumnLisEntered.each(function (d) {
|
324 | select(this).append("button").attr("class", "tsi-columnToggleButton")
|
325 | .attr("aria-label", function (d) { return "toggle column " + d.key; })
|
326 | .on("click", function (event, d) {
|
327 | d.visible = !d.visible;
|
328 | self.setLegendColumnStates();
|
329 | self.buildTable();
|
330 | });
|
331 | select(this).append("div").attr("class", "tsi-columnToggleCheckbox");
|
332 | if (d.isTsid) {
|
333 | var typeIconCOntainer = select(this).append("div").attr("class", "tsi-columnTypeIcons");
|
334 | typeIconCOntainer.append("span").attr("class", "tsi-columnTypeIcon")
|
335 | .classed("tsid", true).attr("title", self.getString("Time Series ID"));
|
336 | typeIconCOntainer.append("span").attr("class", "tsi-columnTypeIcon")
|
337 | .classed(d.type, true);
|
338 | }
|
339 | else {
|
340 | select(this).append("div").attr("class", "tsi-columnTypeIcon")
|
341 | .classed(d.type, true);
|
342 | }
|
343 | select(this).select("button").append("div").attr("class", "tsi-onlyLabel").text(self.getString("only"))
|
344 | .attr('tabindex', "0")
|
345 | .attr('role', 'button')
|
346 | .on("click", function (event, d) {
|
347 | event.stopPropagation();
|
348 | columns.forEach(function (column) {
|
349 | if (column.key == d.key)
|
350 | column.visible = true;
|
351 | else
|
352 | column.visible = false;
|
353 | });
|
354 | self.setLegendColumnStates();
|
355 | self.buildTable();
|
356 | });
|
357 | select(this).append("div").attr("class", "tsi-columnToggleName").classed('tsidPropertyName', function (d) { return d.isTsid; }).text(function (d) { return columns.filter(function (c) { return c.name === d.name; }).length > 1 ? d.name + " (" + d.type + ")" : d.name; });
|
358 | });
|
359 | this.setLegendColumnStates();
|
360 | toggleableColumnLis.exit().remove();
|
361 | };
|
362 | EventsTable.prototype.setLegendColumnStates = function () {
|
363 | if (this.eventsLegend.select("ul")) {
|
364 | this.eventsLegend.select("ul").selectAll(".tsi-columnToggle").each(function () {
|
365 | select(this).select(".tsi-columnToggleCheckbox").classed("tsi-notSelected", function (d) { return !(d.visible); });
|
366 | });
|
367 | }
|
368 | this.setSelectAllState();
|
369 | };
|
370 | EventsTable.prototype.getSelectAllState = function () {
|
371 | var _this = this;
|
372 | var selectAllState = Object.keys(this.eventsTableData.columns).reduce(function (prev, curr) {
|
373 | if (curr == _this.timestampColumnName)
|
374 | return prev;
|
375 | if (prev == null)
|
376 | return (_this.eventsTableData.columns[curr].visible) ? "all" : "none";
|
377 | if (prev == "some")
|
378 | return "some";
|
379 | return (prev == (_this.eventsTableData.columns[curr].visible ? "all" : "none")) ? prev : "some";
|
380 | }, null);
|
381 | if (selectAllState == null)
|
382 | selectAllState = "none";
|
383 | return selectAllState;
|
384 | };
|
385 | EventsTable.prototype.setSelectAllState = function () {
|
386 | var selectAllState = this.getSelectAllState();
|
387 | var selectAllColumns = this.eventsLegend.select("ul").select(".tsi-selectAllColumns");
|
388 | selectAllColumns.select(".tsi-columnToggleCheckbox")
|
389 | .classed("tsi-notSelected", function () { return selectAllState !== "all"; });
|
390 | selectAllColumns.select(".tsi-columnToggleButton")
|
391 | .attr("aria-label", (selectAllState !== "all" ? this.getString("Toggle all columns on") : this.getString("Toggle all columns off")));
|
392 | this.eventsLegend.select("ul").select(".tsi-selectAllColumns").select(".tsi-selectAllSomeState")
|
393 | .style("visibility", function () { return (selectAllState == "some") ? "visible" : "hidden"; });
|
394 | };
|
395 | EventsTable.prototype.getFilteredColumnKeys = function () {
|
396 | var _this = this;
|
397 | return this.eventsTableData.sortColumnKeys().filter(function (columnKey) {
|
398 | return _this.eventsTableData.columns[columnKey].visible;
|
399 | });
|
400 | };
|
401 |
|
402 | EventsTable.prototype.buildHeaders = function (filteredColumnKeys, focusedHeader) {
|
403 | var _this = this;
|
404 | if (focusedHeader === void 0) { focusedHeader = null; }
|
405 | var longAndDoubleExist = function (propertyKey) {
|
406 | var propertyName = _this.eventsTableData.columns[propertyKey].name;
|
407 | return _this.eventsTableData.columns.hasOwnProperty(propertyName + "_Long") && _this.eventsTableData.columns.hasOwnProperty(propertyName + "_Double");
|
408 | };
|
409 | this.eventsTable.select(".tsi-columnHeaders").html("");
|
410 | var self = this;
|
411 | var columnHeaders = this.eventsTable.select(".tsi-columnHeaders").selectAll(".tsi-columnHeader")
|
412 | .data(filteredColumnKeys);
|
413 | var isOffsetDateTimeColumn = function (d) { return d.includes('timestamp') && (d.includes('') || d.includes('-')) && !d.includes('$ts') ? true : null; };
|
414 | var columnHeadersEntered = columnHeaders.enter()
|
415 | .append("div")
|
416 | .classed("tsi-columnHeader", true)
|
417 | .classed("tsi-columnHeaderDisabled", isOffsetDateTimeColumn)
|
418 | .each(function (d) {
|
419 | select(this).append("span")
|
420 | .classed("tsi-columnHeaderName", true)
|
421 | .classed("moreMarginRight", function (d) { return self.eventsTableData.columns[d].isTsid; })
|
422 | .text(longAndDoubleExist(d) ? self.eventsTableData.columns[d].name + " (" + self.eventsTableData.columns[d].type + ")" : self.eventsTableData.columns[d].name);
|
423 | select(this).append("span").attr("class", "tsi-columnSortIcon").classed("moreRight", self.eventsTableData.columns[d].isTsid)
|
424 | .classed("up", (self.sortColumn == d && self.isAscending))
|
425 | .classed("down", (self.sortColumn == d && !self.isAscending));
|
426 | if (self.eventsTableData.columns[d].isTsid) {
|
427 | var typeIconContainer = select(this).append("div").attr("class", "tsi-columnTypeIcons");
|
428 | typeIconContainer.append("span").attr("class", "tsi-columnTypeIcon")
|
429 | .classed("tsid", true).attr("title", self.getString("Time Series ID"));
|
430 | typeIconContainer.append("span").attr("class", "tsi-columnTypeIcon")
|
431 | .classed(self.eventsTableData.columns[d].type, true);
|
432 | }
|
433 | else {
|
434 | select(this).append("span").attr("class", "tsi-columnTypeIcon")
|
435 | .classed(self.eventsTableData.columns[d].type, true);
|
436 | }
|
437 | var id = JSON.parse(JSON.stringify(d));
|
438 | select(this).append("button").attr("class", "tsi-sortColumnButton")
|
439 | .attr("aria-label", function (title) { return "Sort by column " + title; })
|
440 | .on("click", function (event, f) {
|
441 |
|
442 | if (self.sortColumn == d) {
|
443 | self.isAscending = !self.isAscending;
|
444 | }
|
445 | else {
|
446 | self.isAscending = false;
|
447 | }
|
448 | self.sortColumn = d;
|
449 | self.eventsTableData.sortEvents(d, self.isAscending);
|
450 | self.buildTable(f);
|
451 | self.eventsTable.select('.tsi-columnHeaders').node().scrollLeft =
|
452 | self.eventsTable.select('.tsi-eventRowsContainer').node().scrollLeft;
|
453 | })
|
454 | .attr("disabled", isOffsetDateTimeColumn);
|
455 | });
|
456 | var widthDictionary = {};
|
457 | columnHeadersEntered.each(function (d) {
|
458 | widthDictionary[d] = select(this).node().getBoundingClientRect().width;
|
459 | });
|
460 | columnHeaders.exit().remove();
|
461 | if (focusedHeader !== null) {
|
462 | var columnHeader = select(columnHeadersEntered.filter(function (d) {
|
463 | return d === focusedHeader;
|
464 | }).nodes()[0]);
|
465 | if (columnHeader) {
|
466 | columnHeader.select("button").node().focus();
|
467 | }
|
468 | }
|
469 | return widthDictionary;
|
470 | };
|
471 | EventsTable.prototype.adjustHeaderWidth = function (widthDictionary) {
|
472 |
|
473 | var tableSelection = this.eventsTable.select('.tsi-eventRowsContainer').node();
|
474 | var scrollBarWidthDiff = tableSelection.getBoundingClientRect().width - tableSelection.clientWidth;
|
475 | this.eventsTable.select(".tsi-columnHeaders").style("width", "calc(100% - " + scrollBarWidthDiff + "px)");
|
476 | this.eventsTable.select(".tsi-columnHeaders").selectAll(".tsi-columnHeader")
|
477 | .style("width", function (d) {
|
478 | if (widthDictionary[d])
|
479 | return (widthDictionary[d] - 17) + "px";
|
480 | else {
|
481 | return select(this).style("width");
|
482 | }
|
483 | });
|
484 | };
|
485 | EventsTable.prototype.buildTable = function (currentSortedCol) {
|
486 | var _this = this;
|
487 | if (currentSortedCol === void 0) { currentSortedCol = null; }
|
488 | var filteredColumnKeys = this.getFilteredColumnKeys();
|
489 | var widthDictionary = this.buildHeaders(filteredColumnKeys, currentSortedCol);
|
490 | this.eventsTable.select("table").html("");
|
491 | var self = this;
|
492 | var rowsData = this.eventsTableData.events.slice(0, this.maxVisibleIndex);
|
493 | var firstRow = this.eventsTable.select("table").append("tr")
|
494 | .classed("tsi-eventRow", true);
|
495 | var firstRowCells = firstRow.selectAll("td").data(filteredColumnKeys);
|
496 | firstRowCells.enter()
|
497 | .append("td")
|
498 | .classed("tsi-eventCell", true)
|
499 | .text(function (d) { return _this.eventsTableData.columns[d].name; });
|
500 | var rows = this.eventsTable.select("table").selectAll("tsi-eventRow").data(rowsData);
|
501 | var rowsEntered = rows.enter()
|
502 | .append("tr")
|
503 | .classed("tsi-eventRow", true)
|
504 | .merge(rows)
|
505 | .each(function (event) {
|
506 | var visibleCells = filteredColumnKeys.map(function (columnKey) {
|
507 | if (event.cells[columnKey])
|
508 | return event.cells[columnKey];
|
509 | return { key: columnKey, value: null };
|
510 | });
|
511 | var valueCells = select(this).selectAll("td").data(visibleCells);
|
512 | var valueCellsEntered = valueCells.enter()
|
513 | .append("td")
|
514 | .classed("tsi-eventCell", true)
|
515 | .style("min-width", function (d) {
|
516 | if (widthDictionary[d.key] != null)
|
517 | return Math.ceil(widthDictionary[d.key]) + "px";
|
518 | else
|
519 | return "none";
|
520 | })
|
521 | .text(function (d) {
|
522 | return self.formatValue(d.value, d.type);
|
523 | });
|
524 | valueCells.exit().remove();
|
525 | });
|
526 | if (rowsEntered.size() > 0) {
|
527 | var firstRow = rowsEntered.filter(function (d, i) { return i === 0; });
|
528 | firstRow.selectAll("td").each(function (d) {
|
529 | var cellWidth = select(this).node().getBoundingClientRect().width;
|
530 | widthDictionary[d.key] = (cellWidth > widthDictionary[d.key]) ? cellWidth : widthDictionary[d.key];
|
531 | });
|
532 | }
|
533 | rows.exit().remove();
|
534 | this.adjustHeaderWidth(widthDictionary);
|
535 | };
|
536 | EventsTable.prototype.formatValue = function (value, type) {
|
537 | if (type === 'Dynamic') {
|
538 | return JSON.stringify(value);
|
539 | }
|
540 | if (type !== 'DateTime' || value === null || value === undefined) {
|
541 | return value;
|
542 | }
|
543 | if (typeof (value) === 'function') {
|
544 | return value();
|
545 | }
|
546 | var timeFormatFunction = Utils.timeFormat(true, true, 0, this.chartOptions.is24HourTime, null, null, this.chartOptions.dateLocale);
|
547 | var dateValue = new Date(value.split("Z").join(""));
|
548 | return timeFormatFunction(Utils.offsetUTC(dateValue));
|
549 | };
|
550 | return EventsTable;
|
551 | }(ChartComponent));
|
552 |
|
553 | export { EventsTable as E };
|