1 | import { a as __extends } from './tslib.es6-863e3717.js';
|
2 | import { D as DataTypes, U as Utils, a as EventElementTypes } from './Utils-5f9f1f09.js';
|
3 | import { event, select } from 'd3';
|
4 | import { C as Component } from './Component-5b66527b.js';
|
5 |
|
6 | var NUMERICSPLITBYHEIGHT = 44;
|
7 | var NONNUMERICSPLITBYHEIGHT = 24;
|
8 | var Legend = (function (_super) {
|
9 | __extends(Legend, _super);
|
10 | function Legend(drawChart, renderTarget, legendWidth) {
|
11 | var _this = _super.call(this, renderTarget) || this;
|
12 | _this.renderSplitBys = function (aggKey, aggSelection, dataType, noSplitBys) {
|
13 | var splitByLabelData = Object.keys(_this.chartComponentData.timeArrays[aggKey]);
|
14 | var firstSplitBy = _this.chartComponentData.displayState[aggKey].splitBys[Object.keys(_this.chartComponentData.displayState[aggKey].splitBys)[0]];
|
15 | var firstSplitByType = firstSplitBy ? firstSplitBy.visibleType : null;
|
16 | var isSame = Object.keys(_this.chartComponentData.displayState[aggKey].splitBys).reduce(function (isSame, curr) {
|
17 | return (firstSplitByType == _this.chartComponentData.displayState[aggKey].splitBys[curr].visibleType) && isSame;
|
18 | }, true);
|
19 | var showMoreSplitBys = function () {
|
20 | var oldShownSplitBys = _this.chartComponentData.displayState[aggKey].shownSplitBys;
|
21 | _this.chartComponentData.displayState[aggKey].shownSplitBys = Math.min(oldShownSplitBys + 20, splitByLabelData.length);
|
22 | if (oldShownSplitBys != _this.chartComponentData.displayState[aggKey].shownSplitBys) {
|
23 | _this.renderSplitBys(aggKey, aggSelection, dataType, noSplitBys);
|
24 | }
|
25 | };
|
26 | var splitByContainer = aggSelection.selectAll(".tsi-splitByContainer").data([aggKey]);
|
27 | var splitByContainerEntered = splitByContainer.enter().append("div")
|
28 | .merge(splitByContainer)
|
29 | .classed("tsi-splitByContainer", true);
|
30 | var splitByLabels = splitByContainerEntered.selectAll('.tsi-splitByLabel')
|
31 | .data(splitByLabelData.slice(0, _this.chartComponentData.displayState[aggKey].shownSplitBys), function (d) {
|
32 | return d;
|
33 | });
|
34 | var self = _this;
|
35 | var splitByLabelsEntered = splitByLabels
|
36 | .enter()
|
37 | .append("div")
|
38 | .merge(splitByLabels)
|
39 | .attr('role', _this.legendState === 'compact' ? 'button' : 'presentation')
|
40 | .attr('tabindex', _this.legendState === 'compact' ? '0' : '-1')
|
41 | .on('keypress', function (splitBy) {
|
42 | if (_this.legendState === 'compact' && (event.keyCode === 13 || event.keyCode === 32)) {
|
43 | _this.toggleSplitByVisible(aggKey, splitBy);
|
44 | _this.drawChart();
|
45 | event.preventDefault();
|
46 | }
|
47 | })
|
48 | .on("click", function (splitBy, i) {
|
49 | if (self.legendState == "compact") {
|
50 | self.toggleSplitByVisible(aggKey, splitBy);
|
51 | }
|
52 | else {
|
53 | self.toggleSticky(aggKey, splitBy);
|
54 | }
|
55 | self.drawChart();
|
56 | })
|
57 | .on("mouseover", function (splitBy, i) {
|
58 | event.stopPropagation();
|
59 | self.labelMouseover(aggKey, splitBy);
|
60 | })
|
61 | .on("mouseout", function (splitBy, i) {
|
62 | event.stopPropagation();
|
63 | self.svgSelection.selectAll(".tsi-valueElement")
|
64 | .attr("stroke-opacity", 1)
|
65 | .attr("fill-opacity", 1);
|
66 | self.labelMouseout(self.svgSelection, aggKey);
|
67 | })
|
68 | .attr("class", function (splitBy, i) {
|
69 | var compact = (dataType !== DataTypes.Numeric) ? 'tsi-splitByLabelCompact' : '';
|
70 | var shown = Utils.getAgVisible(self.chartComponentData.displayState, aggKey, splitBy) ? 'shown' : '';
|
71 | return "tsi-splitByLabel tsi-splitByLabel " + compact + " " + shown;
|
72 | })
|
73 | .classed("stickied", function (splitBy, i) {
|
74 | if (self.chartComponentData.stickiedKey != null) {
|
75 | return aggKey == self.chartComponentData.stickiedKey.aggregateKey && splitBy == self.chartComponentData.stickiedKey.splitBy;
|
76 | }
|
77 | });
|
78 | var colors = Utils.createSplitByColors(self.chartComponentData.displayState, aggKey, self.chartOptions.keepSplitByColor);
|
79 | splitByLabelsEntered.each(function (splitBy, j) {
|
80 | var color = (self.chartComponentData.isFromHeatmap) ? self.chartComponentData.displayState[aggKey].color : colors[j];
|
81 | if (dataType === DataTypes.Numeric || noSplitBys || self.legendState === 'compact') {
|
82 | var colorKey = select(this).selectAll('.tsi-colorKey').data([color]);
|
83 | var colorKeyEntered = colorKey.enter()
|
84 | .append("div")
|
85 | .attr("class", 'tsi-colorKey')
|
86 | .merge(colorKey);
|
87 | if (dataType === DataTypes.Numeric) {
|
88 | colorKeyEntered.style('background-color', function (d) {
|
89 | return d;
|
90 | });
|
91 | }
|
92 | else {
|
93 | self.createNonNumericColorKey(dataType, colorKeyEntered, aggKey);
|
94 | }
|
95 | select(this).classed('tsi-nonCompactNonNumeric', (dataType === DataTypes.Categorical || dataType === DataTypes.Events) && this.legendState !== 'compact');
|
96 | colorKey.exit().remove();
|
97 | }
|
98 | else {
|
99 | select(this).selectAll('.tsi-colorKey').remove();
|
100 | }
|
101 | if (select(this).select('.tsi-eyeIcon').empty()) {
|
102 | select(this).append("button")
|
103 | .attr("class", "tsi-eyeIcon")
|
104 | .attr('aria-label', function () {
|
105 | var showOrHide = self.chartComponentData.displayState[aggKey].splitBys[splitBy].visible ? self.getString('hide series') : self.getString('show series');
|
106 | return showOrHide + " " + splitBy + " " + self.getString('in group') + " " + self.chartComponentData.displayState[aggKey].name;
|
107 | })
|
108 | .attr('title', function () { return self.getString('Show/Hide values'); })
|
109 | .on("click", function (data, i) {
|
110 | event.stopPropagation();
|
111 | self.toggleSplitByVisible(aggKey, splitBy);
|
112 | select(this)
|
113 | .classed("shown", Utils.getAgVisible(self.chartComponentData.displayState, aggKey, splitBy));
|
114 | self.drawChart();
|
115 | });
|
116 | }
|
117 | if (select(this).select('.tsi-seriesName').empty()) {
|
118 | var seriesName = select(this)
|
119 | .append('div')
|
120 | .attr('class', 'tsi-seriesName');
|
121 | Utils.appendFormattedElementsFromString(seriesName, noSplitBys ? (self.chartComponentData.displayState[aggKey].name) : splitBy);
|
122 | }
|
123 | if (dataType === DataTypes.Numeric) {
|
124 | if (select(this).select('.tsi-seriesTypeSelection').empty()) {
|
125 | select(this).append("select")
|
126 | .attr('aria-label', self.getString("Series type selection for") + " " + splitBy + " " + self.getString('in group') + " " + self.chartComponentData.displayState[aggKey].name)
|
127 | .attr('class', 'tsi-seriesTypeSelection')
|
128 | .on("change", function (data) {
|
129 | var seriesType = select(this).property("value");
|
130 | self.chartComponentData.displayState[aggKey].splitBys[splitBy].visibleType = seriesType;
|
131 | self.drawChart();
|
132 | })
|
133 | .on("click", function () {
|
134 | event.stopPropagation();
|
135 | });
|
136 | }
|
137 | select(this).select('.tsi-seriesTypeSelection')
|
138 | .each(function (d) {
|
139 | var typeLabels = select(this).selectAll('option')
|
140 | .data(function (data) { return self.chartComponentData.displayState[aggKey].splitBys[splitBy].types.map(function (type) {
|
141 | return {
|
142 | type: type,
|
143 | aggKey: aggKey,
|
144 | splitBy: splitBy,
|
145 | visibleMeasure: Utils.getAgVisibleMeasure(self.chartComponentData.displayState, aggKey, splitBy)
|
146 | };
|
147 | }); });
|
148 | typeLabels
|
149 | .enter()
|
150 | .append("option")
|
151 | .attr("class", "seriesTypeLabel")
|
152 | .merge(typeLabels)
|
153 | .property("selected", function (data) {
|
154 | return ((data.type == Utils.getAgVisibleMeasure(self.chartComponentData.displayState, data.aggKey, data.splitBy)) ?
|
155 | " selected" : "");
|
156 | })
|
157 | .text(function (data) { return data.type; });
|
158 | typeLabels.exit().remove();
|
159 | });
|
160 | }
|
161 | else {
|
162 | select(this).selectAll('.tsi-seriesTypeSelection').remove();
|
163 | }
|
164 | });
|
165 | splitByLabels.exit().remove();
|
166 | var shouldShowMore = self.chartComponentData.displayState[aggKey].shownSplitBys < splitByLabelData.length;
|
167 | splitByContainerEntered.selectAll('.tsi-legendShowMore').remove();
|
168 | if (_this.legendState === 'shown' && shouldShowMore) {
|
169 | splitByContainerEntered.append('button')
|
170 | .text(_this.getString('Show more'))
|
171 | .attr('class', 'tsi-legendShowMore')
|
172 | .style('display', (_this.legendState === 'shown' && shouldShowMore) ? 'block' : 'none')
|
173 | .on('click', showMoreSplitBys);
|
174 | }
|
175 | splitByContainerEntered.on("scroll", function () {
|
176 | if (self.chartOptions.legend === 'shown') {
|
177 | if (this.scrollTop + this.clientHeight + 40 > this.scrollHeight) {
|
178 | showMoreSplitBys();
|
179 | }
|
180 | }
|
181 | });
|
182 | splitByContainer.exit().remove();
|
183 | };
|
184 | _this.toggleSticky = function (aggregateKey, splitBy) {
|
185 |
|
186 | if (!_this.chartComponentData.displayState[aggregateKey].visible ||
|
187 | !_this.chartComponentData.displayState[aggregateKey].splitBys[splitBy].visible)
|
188 | return;
|
189 | if (_this.chartComponentData.stickiedKey != null &&
|
190 | _this.chartComponentData.stickiedKey.aggregateKey == aggregateKey &&
|
191 | _this.chartComponentData.stickiedKey.splitBy == splitBy) {
|
192 | _this.chartComponentData.stickiedKey = null;
|
193 | }
|
194 | else {
|
195 | if (_this.stickySeriesAction) {
|
196 | _this.stickySeriesAction(aggregateKey, splitBy);
|
197 | }
|
198 | }
|
199 | };
|
200 | _this.drawChart = drawChart;
|
201 | _this.legendWidth = legendWidth;
|
202 | _this.legendElement = select(renderTarget).insert("div", ":first-child")
|
203 | .attr("class", "tsi-legend")
|
204 | .style("left", "0px")
|
205 | .style("width", (_this.legendWidth) + "px");
|
206 | return _this;
|
207 | }
|
208 | Legend.prototype.labelMouseoutWrapper = function (labelMouseout, svgSelection) {
|
209 | return function (svgSelection, aggKey) {
|
210 | event.stopPropagation();
|
211 | svgSelection.selectAll(".tsi-valueElement")
|
212 | .filter(function () { return !select(this).classed("tsi-valueEnvelope"); })
|
213 | .attr("stroke-opacity", 1)
|
214 | .attr("fill-opacity", 1);
|
215 | svgSelection.selectAll(".tsi-valueEnvelope")
|
216 | .attr("fill-opacity", .2);
|
217 | labelMouseout(svgSelection, aggKey);
|
218 | };
|
219 | };
|
220 | Legend.prototype.toggleSplitByVisible = function (aggregateKey, splitBy) {
|
221 | var _this = this;
|
222 | var newState = !this.chartComponentData.displayState[aggregateKey].splitBys[splitBy].visible;
|
223 | this.chartComponentData.displayState[aggregateKey].splitBys[splitBy].visible = newState;
|
224 | this.chartComponentData.displayState[aggregateKey].visible = Object.keys(this.chartComponentData.displayState[aggregateKey].splitBys)
|
225 | .reduce(function (prev, curr) {
|
226 | return _this.chartComponentData.displayState[aggregateKey]["splitBys"][curr]["visible"] || prev;
|
227 | }, false);
|
228 |
|
229 | if (newState == false && (this.chartComponentData.stickiedKey != null &&
|
230 | this.chartComponentData.stickiedKey.aggregateKey == aggregateKey &&
|
231 | this.chartComponentData.stickiedKey.splitBy == splitBy)) {
|
232 | this.chartComponentData.stickiedKey = null;
|
233 | }
|
234 | };
|
235 | Legend.prototype.triggerSplitByFocus = function (aggKey, splitBy) {
|
236 | if (this.chartOptions.legend == "hidden") {
|
237 | return;
|
238 | }
|
239 | this.legendElement.selectAll('.tsi-splitByLabel').classed("inFocus", false);
|
240 | this.legendElement.selectAll('.tsi-splitByLabel').filter(function (labelData) {
|
241 | return (select(this.parentNode).datum() == aggKey) && (labelData == splitBy);
|
242 | }).classed("inFocus", true);
|
243 | var indexOfSplitBy = Object.keys(this.chartComponentData.displayState[aggKey].splitBys).indexOf(splitBy);
|
244 | if (indexOfSplitBy != -1) {
|
245 | var splitByNode = this.legendElement.selectAll('.tsi-splitByContainer').filter(function (d) {
|
246 | return d == aggKey;
|
247 | }).node();
|
248 | var prospectiveScrollTop = Math.max((indexOfSplitBy - 1) * this.getHeightPerSplitBy(aggKey), 0);
|
249 | if (splitByNode.scrollTop < prospectiveScrollTop - (splitByNode.clientHeight - 40) || splitByNode.scrollTop > prospectiveScrollTop) {
|
250 | splitByNode.scrollTop = prospectiveScrollTop;
|
251 | }
|
252 | }
|
253 | };
|
254 | Legend.prototype.getHeightPerSplitBy = function (aggKey) {
|
255 | return (this.chartComponentData.displayState[aggKey].dataType === DataTypes.Numeric ? NUMERICSPLITBYHEIGHT : NONNUMERICSPLITBYHEIGHT);
|
256 | };
|
257 | Legend.prototype.createGradient = function (gradientKey, svg, values) {
|
258 | var gradient = svg.append('defs').append('linearGradient')
|
259 | .attr('id', gradientKey).attr('x1', '0%').attr('x2', '0%').attr('y1', '0%').attr('y2', '100%');
|
260 | var catCount = Object.keys(values).length;
|
261 | Object.keys(values).forEach(function (category, i) {
|
262 | var currentStop = i / catCount * 100;
|
263 | var nextStop = (i + 1) / catCount * 100;
|
264 | var color = values[category].color;
|
265 | gradient.append('stop')
|
266 | .attr("offset", currentStop + "%")
|
267 | .attr("stop-color", color)
|
268 | .attr("stop-opacity", 1);
|
269 | gradient.append('stop')
|
270 | .attr("offset", nextStop + "%")
|
271 | .attr("stop-color", color)
|
272 | .attr("stop-opacity", 1);
|
273 | });
|
274 | };
|
275 | Legend.prototype.isNonNumeric = function (aggKey) {
|
276 | var dataType = this.chartComponentData.displayState[aggKey].dataType;
|
277 | return (dataType === DataTypes.Categorical || dataType === DataTypes.Events);
|
278 | };
|
279 | Legend.prototype.createNonNumericColorKey = function (dataType, colorKey, aggKey) {
|
280 | if (dataType === DataTypes.Categorical) {
|
281 | this.createCategoricalColorKey(colorKey, aggKey);
|
282 | }
|
283 | if (dataType === DataTypes.Events) {
|
284 | this.createEventsColorKey(colorKey, aggKey);
|
285 | }
|
286 | };
|
287 | Legend.prototype.createCategoricalColorKey = function (colorKey, aggKey) {
|
288 | var categories = this.chartComponentData.displayState[aggKey].aggregateExpression.valueMapping;
|
289 | colorKey.classed('tsi-categoricalColorKey', true);
|
290 | colorKey.selectAll('*').remove();
|
291 | var svg = colorKey.append('svg')
|
292 | .attr('width', colorKey.style('width'))
|
293 | .attr('height', colorKey.style('height'));
|
294 | var rect = svg.append('rect')
|
295 | .attr('width', '100%')
|
296 | .attr('height', '100%')
|
297 | .attr('fill', 'black');
|
298 | var gradientKey = Utils.guid();
|
299 | this.createGradient(gradientKey, svg, categories);
|
300 | rect.attr('fill', "url(#" + gradientKey + ")");
|
301 | };
|
302 | Legend.prototype.createEventsColorKey = function (colorKey, aggKey) {
|
303 | var categories = this.chartComponentData.displayState[aggKey].aggregateExpression.valueMapping;
|
304 | var eventElementType = this.chartComponentData.displayState[aggKey].aggregateExpression.eventElementType;
|
305 | colorKey.classed('tsi-eventsColorKey', true);
|
306 | colorKey.selectAll('*').remove();
|
307 | var colorKeyWidth = colorKey.node().getBoundingClientRect().width;
|
308 | var colorKeyHeight = colorKey.node().getBoundingClientRect().height;
|
309 | var colorKeyUnitLength = Math.floor(colorKeyHeight / Math.sqrt(2));
|
310 | var svg = colorKey.append('svg')
|
311 | .attr('width', colorKeyWidth + "px")
|
312 | .attr('height', colorKeyHeight + "px");
|
313 | var gradientKey = Utils.guid();
|
314 | this.createGradient(gradientKey, svg, categories);
|
315 | if (eventElementType === EventElementTypes.Teardrop) {
|
316 | svg.append('path')
|
317 | .attr('transform', function (d) {
|
318 | return 'translate(' + (colorKeyWidth * .75) + ',' + (colorKeyHeight * .75) + ') rotate(180)';
|
319 | })
|
320 | .attr('d', this.teardropD(colorKeyWidth / 2, colorKeyHeight / 2))
|
321 | .attr('stroke-width', Math.min(colorKeyUnitLength / 2.25, 8))
|
322 | .style('fill', 'none')
|
323 | .style('stroke', "url(#" + gradientKey + ")");
|
324 | }
|
325 | else {
|
326 | var rect = svg.append('rect')
|
327 | .attr('width', colorKeyUnitLength)
|
328 | .attr('height', colorKeyUnitLength)
|
329 | .attr('transform', "translate(" + (colorKeyWidth / 2) + ",0)rotate(45)")
|
330 | .attr('fill', 'black');
|
331 | rect.attr('fill', "url(#" + gradientKey + ")");
|
332 | }
|
333 | };
|
334 | Legend.prototype.draw = function (legendState, chartComponentData, labelMouseover, svgSelection, options, labelMouseoutAction, stickySeriesAction) {
|
335 | var _this = this;
|
336 | if (labelMouseoutAction === void 0) { labelMouseoutAction = null; }
|
337 | if (stickySeriesAction === void 0) { stickySeriesAction = null; }
|
338 | this.chartOptions.setOptions(options);
|
339 | this.chartComponentData = chartComponentData;
|
340 | this.legendState = legendState;
|
341 | this.stickySeriesAction = stickySeriesAction;
|
342 | this.labelMouseover = labelMouseover;
|
343 | this.labelMouseout = this.labelMouseoutWrapper(labelMouseoutAction, svgSelection);
|
344 | this.svgSelection = svgSelection;
|
345 | var legend = this.legendElement;
|
346 | var self = this;
|
347 | _super.prototype.themify.call(this, this.legendElement, this.chartOptions.theme);
|
348 | legend.style('visibility', this.legendState != 'hidden')
|
349 | .classed('compact', this.legendState == 'compact')
|
350 | .classed('hidden', this.legendState == 'hidden');
|
351 | var seriesNames = Object.keys(this.chartComponentData.displayState);
|
352 | var seriesLabels = legend.selectAll(".tsi-seriesLabel")
|
353 | .data(seriesNames, function (d) { return d; });
|
354 | var seriesLabelsEntered = seriesLabels.enter()
|
355 | .append("div")
|
356 | .merge(seriesLabels)
|
357 | .attr("class", function (d, i) {
|
358 | return "tsi-seriesLabel " + (_this.chartComponentData.displayState[d]["visible"] ? " shown" : "");
|
359 | })
|
360 | .style("min-width", function () {
|
361 | return Math.min(124, _this.legendElement.node().clientWidth / seriesNames.length) + 'px';
|
362 | })
|
363 | .style("border-color", function (d, i) {
|
364 | if (select(this).classed("shown"))
|
365 | return self.chartComponentData.displayState[d].color;
|
366 | return "lightgray";
|
367 | });
|
368 | var self = this;
|
369 | var heightPerNameLabel = 25;
|
370 | var usableLegendHeight = legend.node().clientHeight;
|
371 | var prospectiveAggregateHeight = Math.ceil(Math.max(201, (usableLegendHeight / seriesLabelsEntered.size())));
|
372 | var contentHeight = 0;
|
373 | seriesLabelsEntered.each(function (aggKey, i) {
|
374 | var heightPerSplitBy = self.getHeightPerSplitBy(aggKey);
|
375 | var splitByLabelData = Object.keys(self.chartComponentData.timeArrays[aggKey]);
|
376 | var noSplitBys = splitByLabelData.length == 1 && splitByLabelData[0] == "";
|
377 | var seriesNameLabel = select(this).selectAll(".tsi-seriesNameLabel").data([aggKey]);
|
378 | select(this).classed('tsi-nsb', noSplitBys);
|
379 | var enteredSeriesNameLabel = seriesNameLabel.enter().append("button")
|
380 | .merge(seriesNameLabel)
|
381 | .attr("class", function (agg, i) {
|
382 | return "tsi-seriesNameLabel" + (self.chartComponentData.displayState[agg].visible ? " shown" : "");
|
383 | })
|
384 | .attr("aria-label", function (agg) {
|
385 | var showOrHide = self.chartComponentData.displayState[agg].visible ? self.getString('hide group') : self.getString('show group');
|
386 | return showOrHide + " " + self.getString('group') + " " + Utils.stripNullGuid(self.chartComponentData.displayState[agg].name);
|
387 | })
|
388 | .on("click", function (d, i) {
|
389 | var newState = !self.chartComponentData.displayState[d].visible;
|
390 | self.chartComponentData.displayState[d].visible = newState;
|
391 |
|
392 | if (newState == false && (self.chartComponentData.stickiedKey != null &&
|
393 | self.chartComponentData.stickiedKey.aggregateKey == d)) {
|
394 | self.chartComponentData.stickiedKey = null;
|
395 | }
|
396 | self.drawChart();
|
397 | })
|
398 | .on("mouseover", function (d) {
|
399 | labelMouseover(d);
|
400 | })
|
401 | .on("mouseout", function (d) {
|
402 | self.labelMouseout(svgSelection, d);
|
403 | });
|
404 | var dataType = self.chartComponentData.displayState[aggKey].dataType;
|
405 | if (dataType === DataTypes.Categorical || dataType === DataTypes.Events) {
|
406 | enteredSeriesNameLabel.classed('tsi-nonCompactNonNumeric', true);
|
407 | var colorKey = enteredSeriesNameLabel.selectAll('.tsi-colorKey').data(['']);
|
408 | var colorKeyEntered = colorKey.enter()
|
409 | .append("div")
|
410 | .attr("class", 'tsi-colorKey')
|
411 | .merge(colorKey);
|
412 | self.createNonNumericColorKey(dataType, colorKeyEntered, aggKey);
|
413 | colorKey.exit().remove();
|
414 | }
|
415 | var seriesNameLabelText = enteredSeriesNameLabel.selectAll("h4").data([aggKey]);
|
416 | seriesNameLabelText.enter()
|
417 | .append("h4")
|
418 | .merge(seriesNameLabelText)
|
419 | .attr("title", function (d) { return Utils.stripNullGuid(self.chartComponentData.displayState[d].name); })
|
420 | .each(function () {
|
421 | Utils.appendFormattedElementsFromString(select(this), self.chartComponentData.displayState[aggKey].name);
|
422 | });
|
423 | seriesNameLabelText.exit().remove();
|
424 | seriesNameLabel.exit().remove();
|
425 | var splitByContainerHeight;
|
426 | if (splitByLabelData.length > (prospectiveAggregateHeight / heightPerSplitBy)) {
|
427 | splitByContainerHeight = prospectiveAggregateHeight - heightPerNameLabel;
|
428 | contentHeight += splitByContainerHeight + heightPerNameLabel;
|
429 | }
|
430 | else if (splitByLabelData.length > 1 || (splitByLabelData.length === 1 && splitByLabelData[0] !== "")) {
|
431 | splitByContainerHeight = splitByLabelData.length * heightPerSplitBy + heightPerNameLabel;
|
432 | contentHeight += splitByContainerHeight + heightPerNameLabel;
|
433 | }
|
434 | else {
|
435 | splitByContainerHeight = heightPerSplitBy;
|
436 | contentHeight += splitByContainerHeight;
|
437 | }
|
438 | if (self.chartOptions.legend == "shown") {
|
439 | select(this).style("height", splitByContainerHeight + "px");
|
440 | }
|
441 | else {
|
442 | select(this).style("height", "unset");
|
443 | }
|
444 | var splitByContainer = select(this).selectAll(".tsi-splitByContainer").data([aggKey]);
|
445 | var splitByContainerEntered = splitByContainer.enter().append("div")
|
446 | .merge(splitByContainer)
|
447 | .classed("tsi-splitByContainer", true);
|
448 | var aggSelection = select(this);
|
449 | var sBs = self.renderSplitBys(aggKey, aggSelection, dataType, noSplitBys);
|
450 | splitByContainerEntered.on("scroll", function () {
|
451 | if (self.chartOptions.legend == "shown") {
|
452 | if (this.scrollTop + this.clientHeight + 40 > this.scrollHeight) {
|
453 | var oldShownSplitBys = self.chartComponentData.displayState[aggKey].shownSplitBys;
|
454 | self.chartComponentData.displayState[aggKey].shownSplitBys = Math.min(oldShownSplitBys + 20, splitByLabelData.length);
|
455 | if (oldShownSplitBys != self.chartComponentData.displayState[aggKey].shownSplitBys) {
|
456 | self.renderSplitBys(aggKey, aggSelection, dataType, noSplitBys);
|
457 | }
|
458 | }
|
459 | }
|
460 | });
|
461 | select(this).on('scroll', function () {
|
462 | if (self.chartOptions.legend == "compact") {
|
463 | if (this.scrollLeft + this.clientWidth + 40 > this.scrollWidth) {
|
464 | var oldShownSplitBys = self.chartComponentData.displayState[aggKey].shownSplitBys;
|
465 | self.chartComponentData.displayState[aggKey].shownSplitBys = Math.min(oldShownSplitBys + 20, splitByLabelData.length);
|
466 | if (oldShownSplitBys != self.chartComponentData.displayState[aggKey].shownSplitBys) {
|
467 | this.renderSplitBys(dataType);
|
468 | }
|
469 | }
|
470 | }
|
471 | });
|
472 | splitByContainer.exit().remove();
|
473 | });
|
474 | if (this.chartOptions.legend == 'shown') {
|
475 | var legendHeight = legend.node().clientHeight;
|
476 |
|
477 | if (contentHeight < usableLegendHeight) {
|
478 | this.legendElement.classed("tsi-flexLegend", true);
|
479 | seriesLabelsEntered.each(function (d) {
|
480 | var heightPerSplitBy = self.getHeightPerSplitBy(d);
|
481 | var minSplitByForFlexGrow = (prospectiveAggregateHeight - heightPerNameLabel) / heightPerSplitBy;
|
482 | var splitBysCount = Object.keys(self.chartComponentData.displayState[String(select(this).data()[0])].splitBys).length;
|
483 | if (splitBysCount > minSplitByForFlexGrow) {
|
484 | select(this).style("flex-grow", 1);
|
485 | }
|
486 | });
|
487 | }
|
488 | else {
|
489 | this.legendElement.classed("tsi-flexLegend", false);
|
490 | }
|
491 | }
|
492 | seriesLabels.exit().remove();
|
493 | };
|
494 | return Legend;
|
495 | }(Component));
|
496 |
|
497 | export { Legend as L };
|