1 | import { a as __extends, d as __spreadArray } from './tslib.es6-863e3717.js';
|
2 | import { G as GRIDCONTAINERCLASS, U as Utils, T as TooltipMeasureFormat, D as DataTypes, S as ShiftTypes } from './Utils-5f9f1f09.js';
|
3 | import { select } from 'd3';
|
4 | import { C as Component } from './Component-5b66527b.js';
|
5 | import { G as Grid, C as ChartComponentData } from './Grid-545284f2.js';
|
6 | import { E as EllipsisMenu } from './EllipsisMenu-8802ae90.js';
|
7 | import Split from 'split.js';
|
8 |
|
9 | var ChartComponent = (function (_super) {
|
10 | __extends(ChartComponent, _super);
|
11 | function ChartComponent(renderTarget) {
|
12 | var _this = _super.call(this, renderTarget) || this;
|
13 | _this.MINWIDTH = 350;
|
14 | _this.MINHEIGHT = 150;
|
15 | _this.CONTROLSWIDTH = 200;
|
16 | _this.GUTTERWIDTH = 6;
|
17 | _this.chartControlsPanel = null;
|
18 | _this.ellipsisContainer = null;
|
19 | _this.ellipsisMenu = null;
|
20 | _this.svgSelection = null;
|
21 | _this.legendWidth = _this.CONTROLSWIDTH;
|
22 | _this.downloadAsCSV = function (isScatterPlot) {
|
23 | if (isScatterPlot === void 0) { isScatterPlot = false; }
|
24 | Utils.downloadCSV(_this.chartComponentData.generateCSVString(_this.chartOptions.offset, _this.chartOptions.dateLocale, isScatterPlot ? _this.chartOptions.spMeasures : null));
|
25 | };
|
26 | _this.chartComponentData = new ChartComponentData();
|
27 | return _this;
|
28 | }
|
29 | ChartComponent.prototype.showGrid = function () {
|
30 | Grid.showGrid(this.renderTarget, this.chartOptions, this.aggregateExpressionOptions, this.chartComponentData);
|
31 | };
|
32 | ChartComponent.prototype.gatedShowGrid = function () {
|
33 | if (this.isGridVisible()) {
|
34 | this.showGrid();
|
35 | }
|
36 | };
|
37 | ChartComponent.prototype.hideGrid = function () {
|
38 | Grid.hideGrid(this.renderTarget);
|
39 | };
|
40 | ChartComponent.prototype.isGridVisible = function () {
|
41 | return !select(this.renderTarget).selectAll("." + GRIDCONTAINERCLASS).empty();
|
42 | };
|
43 | ChartComponent.prototype.drawEllipsisMenu = function (additionalEllipsisItems) {
|
44 | var _this = this;
|
45 | if (additionalEllipsisItems === void 0) { additionalEllipsisItems = []; }
|
46 | if (this.chartOptions.canDownload || this.chartOptions.grid || (this.chartOptions.ellipsisItems && this.chartOptions.ellipsisItems.length > 0) || additionalEllipsisItems.length > 0) {
|
47 | if (this.ellipsisContainer === null) {
|
48 | this.ellipsisContainer = this.chartControlsPanel.append("div")
|
49 | .attr("class", "tsi-ellipsisContainerDiv");
|
50 | }
|
51 | if (this.ellipsisMenu === null) {
|
52 | this.ellipsisMenu = new EllipsisMenu(this.ellipsisContainer.node());
|
53 | }
|
54 | var ellipsisItems = [];
|
55 | if (this.chartOptions.grid) {
|
56 | ellipsisItems.push(Grid.createGridEllipsisOption(this.renderTarget, this.chartOptions, this.aggregateExpressionOptions, this.chartComponentData, this.getString("Display Grid")));
|
57 | }
|
58 | if (this.chartOptions.canDownload) {
|
59 | ellipsisItems.push(Utils.createDownloadEllipsisOption(function () { return _this.chartComponentData.generateCSVString(_this.chartOptions.offset, _this.chartOptions.dateLocale); }, function () { return Utils.focusOnEllipsisButton(_this.renderTarget); }, this.getString("Download as CSV")));
|
60 | }
|
61 | if (this.chartOptions.ellipsisItems) {
|
62 | ellipsisItems = ellipsisItems.concat(this.chartOptions.ellipsisItems);
|
63 | }
|
64 | this.ellipsisMenu.render(ellipsisItems.concat(additionalEllipsisItems), { theme: this.chartOptions.theme });
|
65 | }
|
66 | };
|
67 | ChartComponent.prototype.removeControlPanel = function () {
|
68 | if (this.chartControlsPanel) {
|
69 | this.chartControlsPanel.remove();
|
70 | }
|
71 | this.chartControlsPanel = null;
|
72 | this.ellipsisContainer = null;
|
73 | this.ellipsisMenu = null;
|
74 | };
|
75 | ChartComponent.prototype.removeEllipsisMenu = function () {
|
76 | if (this.ellipsisContainer) {
|
77 | this.ellipsisContainer.remove();
|
78 | }
|
79 | this.ellipsisContainer = null;
|
80 | this.ellipsisMenu = null;
|
81 | };
|
82 | ChartComponent.prototype.getWidth = function () {
|
83 | return Math.max(select(this.renderTarget).node().clientWidth, this.MINWIDTH);
|
84 | };
|
85 | ChartComponent.prototype.getVisibilityState = function () {
|
86 | return this.chartComponentData.getVisibilityState();
|
87 | };
|
88 | ChartComponent.prototype.ellipsisItemsExist = function () {
|
89 | return (this.chartOptions.canDownload || this.chartOptions.ellipsisItems.length > 0 || this.chartOptions.grid);
|
90 | };
|
91 | ChartComponent.prototype.getDataType = function (aggKey) {
|
92 | return this.chartComponentData.getDataType(aggKey);
|
93 | };
|
94 | ChartComponent.prototype.getCDOFromAggKey = function (aggKey) {
|
95 | var matches = this.aggregateExpressionOptions.filter(function (cDO) {
|
96 | return cDO.aggKey === aggKey;
|
97 | });
|
98 | if (matches.length === 1) {
|
99 | return matches[0];
|
100 | }
|
101 | return {};
|
102 | };
|
103 | ChartComponent.prototype.getFilteredMeasures = function (measureList, visibleMeasure, measureFormat, xyrMeasures) {
|
104 | if (xyrMeasures === void 0) { xyrMeasures = null; }
|
105 | var justVisibleMeasure = [visibleMeasure];
|
106 | switch (measureFormat) {
|
107 | case TooltipMeasureFormat.SingleValue:
|
108 | return justVisibleMeasure;
|
109 | case TooltipMeasureFormat.Scatter:
|
110 | return xyrMeasures;
|
111 | default:
|
112 | if (measureList.length !== 3) {
|
113 | return justVisibleMeasure;
|
114 | }
|
115 | var isAvgMinMax_1 = true;
|
116 | measureList.forEach(function (measure) {
|
117 | if (!(measure === 'avg' || measure === 'min' || measure === 'max')) {
|
118 | isAvgMinMax_1 = false;
|
119 | }
|
120 | });
|
121 | return isAvgMinMax_1 ? measureList.sort(function (m) { return m === 'min' ? -1 : (m === 'avg' ? 0 : 1); }) : justVisibleMeasure;
|
122 | }
|
123 | };
|
124 |
|
125 | ChartComponent.prototype.convertToTimeValueFormat = function (d) {
|
126 | var measuresObject = {};
|
127 | var measureType = d.measureType ? d.measureType : this.chartComponentData.displayState[d.aggKey].splitBys[d.splitBy].visibleType;
|
128 | measuresObject[measureType] = d.val;
|
129 | return {
|
130 | aggregateKey: d.aggKey,
|
131 | splitBy: d.splitBy,
|
132 | aggregateName: this.chartComponentData.displayState[d.aggKey].name,
|
133 | measures: measuresObject
|
134 | };
|
135 | };
|
136 | ChartComponent.prototype.formatDate = function (date, shiftMillis) {
|
137 | return Utils.timeFormat(this.chartComponentData.usesSeconds, this.chartComponentData.usesMillis, this.chartOptions.offset, this.chartOptions.is24HourTime, shiftMillis, null, this.chartOptions.dateLocale)(date);
|
138 | };
|
139 | ChartComponent.prototype.tooltipFormat = function (d, text, measureFormat, xyrMeasures) {
|
140 | var _this = this;
|
141 | if (xyrMeasures === void 0) { xyrMeasures = null; }
|
142 | var dataType = this.getDataType(d.aggregateKey);
|
143 | var title = d.aggregateName;
|
144 | var cDO = this.getCDOFromAggKey(d.aggregateKey);
|
145 | var shiftMillis = this.chartComponentData.getTemporalShiftMillis(d.aggregateKey);
|
146 | var formatDate = function (date) { return _this.formatDate(date, shiftMillis); };
|
147 | var titleGroup = text.append("div")
|
148 | .attr("class", "tsi-tooltipTitleGroup");
|
149 | this.createTooltipSeriesInfo(d, titleGroup, cDO);
|
150 | if (dataType === DataTypes.Categorical) {
|
151 | titleGroup.append('h4')
|
152 | .attr('class', 'tsi-tooltipSubtitle tsi-tooltipTimeStamp')
|
153 | .text(formatDate(d.dateTime) + ' - ' + formatDate(d.endDate));
|
154 | }
|
155 | if (dataType === DataTypes.Events) {
|
156 | titleGroup.append('h4')
|
157 | .attr('class', 'tsi-tooltipSubtitle tsi-tooltipTimeStamp')
|
158 | .text(formatDate(d.dateTime));
|
159 | }
|
160 | var tooltipAttrs = cDO.tooltipAttributes;
|
161 | if (shiftMillis !== 0 && tooltipAttrs) {
|
162 | var shiftTuple = this.chartComponentData.getTemporalShiftStringTuple(d.aggregateKey);
|
163 | if (shiftTuple !== null) {
|
164 | var keyString = this.getString(shiftTuple[0]);
|
165 | var valueString = (keyString === ShiftTypes.startAt) ? this.formatDate(new Date(shiftTuple[1]), 0) : shiftTuple[1];
|
166 | tooltipAttrs = __spreadArray(__spreadArray([], tooltipAttrs), [[keyString, valueString]]);
|
167 | }
|
168 | }
|
169 | if (tooltipAttrs && tooltipAttrs.length > 0) {
|
170 | var attrsGroup_1 = text.append('div')
|
171 | .attr('class', 'tsi-tooltipAttributeContainer tsi-tooltipFlexyBox');
|
172 | tooltipAttrs.forEach(function (attrTuple, i) {
|
173 | var timeShiftRow = attrsGroup_1.append('div')
|
174 | .attr('class', 'tsi-tooltipAttribute tsi-tooltipFlexyItem');
|
175 | timeShiftRow.append('div')
|
176 | .attr('class', 'tsi-tooltipAttrTitle')
|
177 | .text(attrTuple[0]);
|
178 | timeShiftRow.append('div')
|
179 | .attr('class', 'tsi-tooltipAttrValue')
|
180 | .text(attrTuple[1]);
|
181 | });
|
182 | }
|
183 | if (d.measures && Object.keys(d.measures).length) {
|
184 | var formatValue_1 = (dataType === DataTypes.Events ? function (d) { return d; } : Utils.formatYAxisNumber);
|
185 | if (dataType !== DataTypes.Numeric) {
|
186 | var valueGroup_1 = text.append('table')
|
187 | .attr('class', 'tsi-tooltipValues tsi-tooltipTable');
|
188 | Object.keys(d.measures).forEach(function (measureType, i) {
|
189 | if (!(dataType === DataTypes.Categorical) || d.measures[measureType] !== 0) {
|
190 | valueGroup_1.append('tr').classed('tsi-tableSpacer', true);
|
191 | var tr = valueGroup_1.append('tr')
|
192 | .classed('tsi-visibleValue', (dataType === DataTypes.Numeric && (measureType === _this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy))))
|
193 | .style('border-left-color', Utils.getColorForValue(cDO, measureType));
|
194 | tr.append('td')
|
195 | .attr('class', 'tsi-valueLabel')
|
196 | .text(measureType);
|
197 | tr.append('td')
|
198 | .attr('class', 'tsi-valueCell')
|
199 | .text(formatValue_1(d.measures[measureType]));
|
200 | }
|
201 | });
|
202 | }
|
203 | else {
|
204 | var valueGroup_2 = text.append('div')
|
205 | .attr('class', 'tsi-tooltipFlexyBox');
|
206 | var filteredMeasures = this.getFilteredMeasures(Object.keys(d.measures), this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy), measureFormat, xyrMeasures);
|
207 | filteredMeasures.forEach(function (measureType, i) {
|
208 | var valueItem = valueGroup_2.append('div')
|
209 | .attr('class', 'tsi-tooltipFlexyItem')
|
210 | .classed('tsi-visibleValue', (dataType === DataTypes.Numeric &&
|
211 | (measureType === _this.chartComponentData.getVisibleMeasure(d.aggregateKey, d.splitBy)) &&
|
212 | (measureFormat !== TooltipMeasureFormat.Scatter)));
|
213 | var measureTitle = valueItem.append('div')
|
214 | .attr('class', 'tsi-tooltipMeasureTitle');
|
215 | Utils.appendFormattedElementsFromString(measureTitle, measureType);
|
216 | valueItem.append('div')
|
217 | .attr('class', 'tsi-tooltipMeasureValue')
|
218 | .text(formatValue_1(d.measures[measureType]));
|
219 | });
|
220 | }
|
221 | }
|
222 | };
|
223 | ChartComponent.prototype.getSVGWidth = function () {
|
224 | return this.chartWidth + this.chartMargins.left + this.chartMargins.right;
|
225 | };
|
226 | ChartComponent.prototype.getChartWidth = function (legendWidth) {
|
227 | if (legendWidth === void 0) { legendWidth = this.CONTROLSWIDTH; }
|
228 | legendWidth = this.legendWidth;
|
229 | return Math.max(1, this.width - this.chartMargins.left - this.chartMargins.right - (this.chartOptions.legend === "shown" ? legendWidth : 0));
|
230 | };
|
231 | ChartComponent.prototype.calcSVGWidth = function () {
|
232 | return this.svgSelection.node().getBoundingClientRect().width;
|
233 | };
|
234 | ChartComponent.prototype.setControlsPanelWidth = function () {
|
235 | if (!this.chartOptions.hideChartControlPanel && this.chartControlsPanel !== null) {
|
236 |
|
237 | var controlPanelWidth = this.svgSelection && this.svgSelection.node() ?
|
238 | this.calcSVGWidth() :
|
239 | this.getWidth() - (this.chartOptions.legend === 'shown' ? (this.legendWidth + this.GUTTERWIDTH) : 0);
|
240 | this.chartControlsPanel.style("width", controlPanelWidth + "px");
|
241 | }
|
242 | };
|
243 | ChartComponent.prototype.legendPostRenderProcess = function (legendState, chartElement, shouldSetControlsWidth, splitLegendOnDrag) {
|
244 | if (splitLegendOnDrag === void 0) { splitLegendOnDrag = undefined; }
|
245 | if (legendState === 'shown') {
|
246 | this.splitLegendAndSVG(chartElement.node(), splitLegendOnDrag);
|
247 | if (shouldSetControlsWidth) {
|
248 | this.setControlsPanelWidth();
|
249 | }
|
250 | }
|
251 | else {
|
252 | select(this.renderTarget).select('.tsi-resizeGutter').remove();
|
253 | }
|
254 | };
|
255 | ChartComponent.prototype.splitLegendAndSVG = function (chartElement, onDrag) {
|
256 | var _this = this;
|
257 | if (onDrag === void 0) { onDrag = function () { }; }
|
258 | var svgWidth = this.getSVGWidth();
|
259 | var legendWidth = this.width - svgWidth;
|
260 | select(this.renderTarget).select('.tsi-resizeGutter').remove();
|
261 | var legend = this.legendObject.legendElement;
|
262 | Split([this.legendObject.legendElement.node(), chartElement], {
|
263 | sizes: [legendWidth / this.width * 100, svgWidth / this.width * 100],
|
264 | gutterSize: 2,
|
265 | minSize: [200, 0],
|
266 | snapOffset: 0,
|
267 | cursor: 'e-resize',
|
268 | onDragEnd: function (sizes) {
|
269 | var legendWidth = _this.width * (sizes[0] / 100);
|
270 | _this.legendWidth = legendWidth;
|
271 | _this.chartWidth = _this.getChartWidth();
|
272 | _this.draw(true);
|
273 | legend.style('width', _this.legendWidth + 'px');
|
274 | select(_this.renderTarget).select('.tsi-resizeGutter')
|
275 | .classed('tsi-isDragging', false);
|
276 | },
|
277 | onDragStart: function () {
|
278 | select(_this.renderTarget).select('.tsi-resizeGutter')
|
279 | .classed('tsi-isDragging', true);
|
280 | },
|
281 | onDrag: function () {
|
282 | if (!_this.chartOptions.hideChartControlPanel && _this.chartControlsPanel !== null) {
|
283 | var svgLeftOffset = _this.calcSVGWidth();
|
284 | _this.chartControlsPanel.style("width", Math.max(svgLeftOffset, _this.chartMargins.left + 8) + "px");
|
285 | }
|
286 | onDrag();
|
287 | },
|
288 | gutter: function (index, direction) {
|
289 | var gutter = document.createElement('div');
|
290 | gutter.className = "gutter tsi-resizeGutter";
|
291 | return gutter;
|
292 | },
|
293 | direction: 'horizontal'
|
294 | });
|
295 |
|
296 | var calcedLegendWidth = legend.node().getBoundingClientRect().width;
|
297 | legend.style("width", calcedLegendWidth + "px");
|
298 | };
|
299 | return ChartComponent;
|
300 | }(Component));
|
301 |
|
302 | export { ChartComponent as C };
|