tsichart-core 1.0.4 → 2.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +22 -22
- package/README.md +80 -0
- package/dist/index.d.ts +1744 -0
- package/dist/index.js +14284 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +14209 -0
- package/dist/index.mjs.map +1 -0
- package/dist/{tsiclient.css → styles/index.css} +9388 -9387
- package/dist/styles/index.css.map +1 -0
- package/package.json +115 -125
- package/README.MD +0 -171
- package/dist/AggregateExpression.d.ts +0 -13
- package/dist/AggregateExpression.js +0 -70
- package/dist/AvailabilityChart-vciRThEz.js +0 -488
- package/dist/AvailabilityChart.d.ts +0 -59
- package/dist/AvailabilityChart.js +0 -26
- package/dist/ChartComponent-BxPbycj0.js +0 -302
- package/dist/ChartComponent-L_dR-Eny.d.ts +0 -80
- package/dist/ChartComponentData-ClzAtU_E.d.ts +0 -47
- package/dist/ChartDataOptions-DBu_M5gU.d.ts +0 -38
- package/dist/ChartDataOptions-rcIzlQJO.js +0 -49
- package/dist/ChartVisualizationComponent-CswB2P7Z.d.ts +0 -8
- package/dist/ChartVisualizationComponent-NsvZCsc-.js +0 -23
- package/dist/ColorPicker-CUZt1uup.js +0 -120
- package/dist/ColorPicker.d.ts +0 -28
- package/dist/ColorPicker.js +0 -6
- package/dist/Component-C9fQU2ia.js +0 -401
- package/dist/Component-CdI_Pyko.d.ts +0 -226
- package/dist/ContextMenu-CP1qV7pP.js +0 -197
- package/dist/DateTimeButton-Ck71nL87.d.ts +0 -16
- package/dist/DateTimeButton-DnqhATyX.js +0 -38
- package/dist/DateTimeButtonRange-CT1zOoCf.js +0 -71
- package/dist/DateTimeButtonRange.d.ts +0 -19
- package/dist/DateTimeButtonRange.js +0 -15
- package/dist/DateTimeButtonSingle-DZk5fW35.js +0 -48
- package/dist/DateTimeButtonSingle.d.ts +0 -17
- package/dist/DateTimeButtonSingle.js +0 -14
- package/dist/DateTimePicker-CuGwz86U.js +0 -532
- package/dist/DateTimePicker.d.ts +0 -69
- package/dist/DateTimePicker.js +0 -13
- package/dist/EllipsisMenu-CNWSo-qQ.js +0 -116
- package/dist/EllipsisMenu.d.ts +0 -20
- package/dist/EllipsisMenu.js +0 -6
- package/dist/Enums-CEhu18PC.d.ts +0 -12
- package/dist/EventsTable-mjoOfc0E.js +0 -553
- package/dist/EventsTable.d.ts +0 -34
- package/dist/EventsTable.js +0 -10
- package/dist/GeoProcessGraphic-CSsTL4zj.js +0 -145
- package/dist/GeoProcessGraphic.d.ts +0 -34
- package/dist/GeoProcessGraphic.js +0 -7
- package/dist/Grid-ByDh3Qdn.js +0 -874
- package/dist/Grid.d.ts +0 -43
- package/dist/Grid.js +0 -6
- package/dist/GroupedBarChart-DrSrSHNj.js +0 -579
- package/dist/GroupedBarChart.d.ts +0 -22
- package/dist/GroupedBarChart.js +0 -17
- package/dist/GroupedBarChartData-CpJKvTDQ.js +0 -121
- package/dist/GroupedBarChartData-DK30DLVh.d.ts +0 -20
- package/dist/Heatmap-BbWcAgp6.js +0 -524
- package/dist/Heatmap.d.ts +0 -31
- package/dist/Heatmap.js +0 -14
- package/dist/Hierarchy-BsvoKnCY.js +0 -260
- package/dist/Hierarchy.d.ts +0 -39
- package/dist/Hierarchy.js +0 -6
- package/dist/HierarchyNavigation-C5yoj--u.js +0 -336
- package/dist/HierarchyNavigation.d.ts +0 -34
- package/dist/HierarchyNavigation.js +0 -6
- package/dist/HistoryPlayback-DIhAsAOi.d.ts +0 -68
- package/dist/HistoryPlayback-DiflRzRf.js +0 -175
- package/dist/Interfaces-CdAVFIA6.d.ts +0 -6
- package/dist/Legend-CQ5yaF8f.js +0 -497
- package/dist/LineChart-DcUenMrZ.js +0 -3181
- package/dist/LineChart.d.ts +0 -163
- package/dist/LineChart.js +0 -18
- package/dist/ModelAutocomplete-sxVy4m65.js +0 -100
- package/dist/ModelAutocomplete.d.ts +0 -12
- package/dist/ModelAutocomplete.js +0 -7
- package/dist/ModelSearch-DEg5KwKw.js +0 -189
- package/dist/ModelSearch.d.ts +0 -23
- package/dist/ModelSearch.js +0 -9
- package/dist/PieChart-DDxMXcXE.js +0 -258
- package/dist/PieChart.d.ts +0 -26
- package/dist/PieChart.js +0 -17
- package/dist/PlaybackControls-DSoUncDP.js +0 -195
- package/dist/PlaybackControls.d.ts +0 -39
- package/dist/PlaybackControls.js +0 -13
- package/dist/ProcessGraphic-1f-FoGDy.js +0 -154
- package/dist/ProcessGraphic.d.ts +0 -31
- package/dist/ProcessGraphic.js +0 -7
- package/dist/README.MD +0 -171
- package/dist/ScatterPlot-BAn6r8ml.js +0 -924
- package/dist/ScatterPlot.d.ts +0 -115
- package/dist/ScatterPlot.js +0 -17
- package/dist/SingleDateTimePicker-BrFB5iPu.js +0 -213
- package/dist/SingleDateTimePicker.d.ts +0 -45
- package/dist/SingleDateTimePicker.js +0 -12
- package/dist/Slider-BpNCqoBD.js +0 -186
- package/dist/Slider.d.ts +0 -31
- package/dist/Slider.js +0 -6
- package/dist/TemporalXAxisComponent-BsTQyVO6.js +0 -129
- package/dist/TemporalXAxisComponent-DohbI08i.d.ts +0 -23
- package/dist/TimezonePicker-DHkC2iKE.js +0 -58
- package/dist/TimezonePicker.d.ts +0 -16
- package/dist/TimezonePicker.js +0 -10
- package/dist/Tooltip-B-mIKo4g.js +0 -104
- package/dist/TsqExpression.d.ts +0 -36
- package/dist/TsqExpression.js +0 -89
- package/dist/UXClient-BTulvzpq.js +0 -230
- package/dist/UXClient.d.ts +0 -74
- package/dist/UXClient.js +0 -47
- package/dist/Utils-CdKMmmwx.js +0 -1138
- package/dist/Utils-ChzaAbch.d.ts +0 -104
- package/dist/Utils.d.ts +0 -7
- package/dist/Utils.js +0 -7
- package/dist/_tslib-DYvz7dIO.js +0 -96
- package/dist/package.json +0 -125
- package/dist/pikaday-C_DS7oEN.js +0 -1252
- package/dist/tsiclient.cjs.js +0 -3
- package/dist/tsiclient.cjs.js.LICENSE.txt +0 -19
- package/dist/tsiclient.cjs.js.map +0 -1
- package/dist/tsiclient.d.ts +0 -46
- package/dist/tsiclient.esm.js +0 -3
- package/dist/tsiclient.esm.js.LICENSE.txt +0 -19
- package/dist/tsiclient.esm.js.map +0 -1
- package/dist/tsiclient.js +0 -58
- package/dist/tsiclient.min.css +0 -6
- package/dist/tsiclient.min.css.map +0 -1
- package/dist/tsiclient.umd.js +0 -3
- package/dist/tsiclient.umd.js.LICENSE.txt +0 -19
- package/dist/tsiclient.umd.js.map +0 -1
- package/dist/tsiclient.umd.min.js +0 -3
- package/dist/tsiclient.umd.min.js.LICENSE.txt +0 -19
- package/dist/tsiclient.umd.min.js.map +0 -1
package/dist/Grid.d.ts
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { C as Component, a as ChartOptions } from './Component-CdI_Pyko.js';
|
|
2
|
-
import { C as ChartComponentData } from './ChartComponentData-ClzAtU_E.js';
|
|
3
|
-
import './Enums-CEhu18PC.js';
|
|
4
|
-
import './Interfaces-CdAVFIA6.js';
|
|
5
|
-
|
|
6
|
-
declare class Grid extends Component {
|
|
7
|
-
private gridComponent;
|
|
8
|
-
private rowLabelKey;
|
|
9
|
-
private colorKey;
|
|
10
|
-
private aggIndexKey;
|
|
11
|
-
private chartComponentData;
|
|
12
|
-
private draw;
|
|
13
|
-
private closeButton;
|
|
14
|
-
private filteredTimestamps;
|
|
15
|
-
private table;
|
|
16
|
-
private tableHeaderRow;
|
|
17
|
-
private tableContentRows;
|
|
18
|
-
usesSeconds: boolean;
|
|
19
|
-
usesMillis: boolean;
|
|
20
|
-
constructor(renderTarget: Element);
|
|
21
|
-
static hideGrid(renderTarget: any): void;
|
|
22
|
-
static showGrid(renderTarget: any, chartOptions: ChartOptions, aggregateExpressionOptions: any, chartComponentData: ChartComponentData): void;
|
|
23
|
-
static createGridEllipsisOption(renderTarget: any, chartOptions: ChartOptions, aggregateExpressionOptions: any, chartComponentData: ChartComponentData, labelText?: string): {
|
|
24
|
-
iconClass: string;
|
|
25
|
-
label: string;
|
|
26
|
-
action: () => void;
|
|
27
|
-
description: string;
|
|
28
|
-
};
|
|
29
|
-
Grid(): void;
|
|
30
|
-
private cellClass;
|
|
31
|
-
focus: (rowIdx: any, colIdx: any) => void;
|
|
32
|
-
renderFromAggregates(data: any, options: any, aggregateExpressionOptions: any, chartComponentData: any): void;
|
|
33
|
-
private getRowData;
|
|
34
|
-
private convertSeriesToGridData;
|
|
35
|
-
private getFormattedDate;
|
|
36
|
-
private setFilteredTimestamps;
|
|
37
|
-
private addHeaderCells;
|
|
38
|
-
private addValueCells;
|
|
39
|
-
render(data: any, options: any, aggregateExpressionOptions: any, chartComponentData?: ChartComponentData): void;
|
|
40
|
-
private arrowNavigate;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
export { Grid as default };
|
package/dist/Grid.js
DELETED
|
@@ -1,579 +0,0 @@
|
|
|
1
|
-
import { _ as __extends } from './_tslib-DYvz7dIO.js';
|
|
2
|
-
import * as d3 from 'd3';
|
|
3
|
-
import { U as Utils, T as TooltipMeasureFormat } from './Utils-CdKMmmwx.js';
|
|
4
|
-
import { L as Legend } from './Legend-CQ5yaF8f.js';
|
|
5
|
-
import { G as GroupedBarChartData } from './GroupedBarChartData-CpJKvTDQ.js';
|
|
6
|
-
import { C as ContextMenu } from './ContextMenu-CP1qV7pP.js';
|
|
7
|
-
import { T as Tooltip } from './Tooltip-B-mIKo4g.js';
|
|
8
|
-
import { C as ChartVisualizationComponent } from './ChartVisualizationComponent-NsvZCsc-.js';
|
|
9
|
-
import { S as Slider } from './Slider-BpNCqoBD.js';
|
|
10
|
-
|
|
11
|
-
var GroupedBarChart = /** @class */ (function (_super) {
|
|
12
|
-
__extends(GroupedBarChart, _super);
|
|
13
|
-
function GroupedBarChart(renderTarget) {
|
|
14
|
-
var _this = _super.call(this, renderTarget) || this;
|
|
15
|
-
_this.isStacked = null;
|
|
16
|
-
_this.stackedButton = null;
|
|
17
|
-
_this.chartComponentData = new GroupedBarChartData();
|
|
18
|
-
_this.chartMargins = {
|
|
19
|
-
top: 52,
|
|
20
|
-
bottom: 48,
|
|
21
|
-
left: 70,
|
|
22
|
-
right: 60
|
|
23
|
-
};
|
|
24
|
-
return _this;
|
|
25
|
-
}
|
|
26
|
-
GroupedBarChart.prototype.GroupedBarChart = function () { };
|
|
27
|
-
GroupedBarChart.prototype.render = function (data, options, aggregateExpressionOptions) {
|
|
28
|
-
var _this = this;
|
|
29
|
-
_super.prototype.render.call(this, data, options, aggregateExpressionOptions);
|
|
30
|
-
if (options && options.stacked || this.isStacked == null) {
|
|
31
|
-
this.isStacked = this.chartOptions.stacked;
|
|
32
|
-
}
|
|
33
|
-
this.chartMargins.top = (this.chartOptions.legend === 'compact') ? 84 : 52;
|
|
34
|
-
this.width = Math.max(d3.select(this.renderTarget).node().clientWidth, this.MINWIDTH);
|
|
35
|
-
var height = Math.max(d3.select(this.renderTarget).node().clientHeight, this.MINHEIGHT);
|
|
36
|
-
this.chartComponentData.mergeDataToDisplayStateAndTimeArrays(this.data, this.timestamp, this.aggregateExpressionOptions);
|
|
37
|
-
this.timestamp = (options && options.timestamp != undefined) ? options.timestamp : this.chartComponentData.allTimestampsArray[0];
|
|
38
|
-
var chartHeight = height - this.chartMargins.bottom - this.chartMargins.top;
|
|
39
|
-
this.chartWidth = this.getChartWidth();
|
|
40
|
-
if (this.svgSelection == null) {
|
|
41
|
-
var targetElement = d3.select(this.renderTarget)
|
|
42
|
-
.classed("tsi-barChart", true);
|
|
43
|
-
var svgSelection = targetElement.append("svg")
|
|
44
|
-
.attr("class", "tsi-barChartSVG tsi-chartSVG")
|
|
45
|
-
.attr('title', this.getString('Bar chart'))
|
|
46
|
-
.style("height", height)
|
|
47
|
-
.style("width", this.getSVGWidth() + 'px');
|
|
48
|
-
this.svgSelection = svgSelection;
|
|
49
|
-
var g = svgSelection.append("g")
|
|
50
|
-
.attr("transform", "translate(" + this.chartMargins.left + "," + this.chartMargins.top + ")");
|
|
51
|
-
var baseLine = g.append("line")
|
|
52
|
-
.classed("tsi-baseLine", true)
|
|
53
|
-
.attr("stroke-width", 1);
|
|
54
|
-
var focus = g.append("g")
|
|
55
|
-
.attr("transform", "translate(-100,-100)")
|
|
56
|
-
.attr("class", "tsi-focus");
|
|
57
|
-
focus.append("line")
|
|
58
|
-
.attr("class", "tsi-focusLine")
|
|
59
|
-
.attr("x1", 0)
|
|
60
|
-
.attr("x2", this.chartWidth)
|
|
61
|
-
.attr("y1", 0)
|
|
62
|
-
.attr("y2", 0);
|
|
63
|
-
var vHoverG = focus.append("g")
|
|
64
|
-
.attr("class", 'vHoverG');
|
|
65
|
-
vHoverG.append("rect")
|
|
66
|
-
.attr("class", 'vHoverBox')
|
|
67
|
-
.attr("x", -5)
|
|
68
|
-
.attr("y", 0)
|
|
69
|
-
.attr("width", 0)
|
|
70
|
-
.attr("height", 0);
|
|
71
|
-
vHoverG.append("text")
|
|
72
|
-
.attr("class", "vHoverText hoverText")
|
|
73
|
-
.attr("dy", ".32em")
|
|
74
|
-
.attr("x", -10)
|
|
75
|
-
.text(function (d) { return d; });
|
|
76
|
-
d3.select(this.renderTarget).append('div').classed('tsi-sliderWrapper', true);
|
|
77
|
-
var tooltip = new Tooltip(d3.select(this.renderTarget));
|
|
78
|
-
this.chartComponentData.data.map(function (aggregate, aggI) {
|
|
79
|
-
Object.keys(aggregate)[0];
|
|
80
|
-
Utils.createEntityKey(Object.keys(aggregate)[0], aggI);
|
|
81
|
-
});
|
|
82
|
-
var labelMouseover = function (aggKey, splitBy) {
|
|
83
|
-
if (splitBy === void 0) { splitBy = null; }
|
|
84
|
-
var self = _this;
|
|
85
|
-
svgSelection.selectAll(".tsi-valueElement")
|
|
86
|
-
.attr("stroke-opacity", 1)
|
|
87
|
-
.attr("fill-opacity", 1);
|
|
88
|
-
//filter out the selected timeseries/splitby
|
|
89
|
-
var selectedFilter = function (d, j) {
|
|
90
|
-
var currAggKey;
|
|
91
|
-
var currSplitBy;
|
|
92
|
-
if (d.aggKey) {
|
|
93
|
-
currAggKey = d.aggKey;
|
|
94
|
-
currSplitBy = d.splitBy;
|
|
95
|
-
}
|
|
96
|
-
else if (d && d.length) {
|
|
97
|
-
currAggKey = d[0].aggKey;
|
|
98
|
-
currSplitBy = d[0].splitBy;
|
|
99
|
-
}
|
|
100
|
-
else
|
|
101
|
-
return true;
|
|
102
|
-
return !(aggKey == currAggKey && (splitBy == null || splitBy == currSplitBy));
|
|
103
|
-
};
|
|
104
|
-
svgSelection.selectAll(".tsi-valueElement")
|
|
105
|
-
.filter(selectedFilter)
|
|
106
|
-
.attr("stroke-opacity", .3)
|
|
107
|
-
.attr("fill-opacity", .3);
|
|
108
|
-
var text = svgSelection.selectAll(".barGroup")
|
|
109
|
-
.filter(function (d) {
|
|
110
|
-
return d == aggKey;
|
|
111
|
-
})
|
|
112
|
-
.select(".labelGroup").select("text").text(null);
|
|
113
|
-
var dy = parseFloat(text.attr("dy"));
|
|
114
|
-
var aggLabelGroup = text.append("tspan").attr('class', "tsi-labelGroupLine");
|
|
115
|
-
Utils.appendFormattedElementsFromString(aggLabelGroup, self.chartComponentData.displayState[aggKey].name, { inSvg: true, additionalClassName: "tsi-aggregateLabelGroupText" });
|
|
116
|
-
var splitByLabelGroup = text.append("tspan").attr('class', "tsi-labelGroupLine");
|
|
117
|
-
Utils.appendFormattedElementsFromString(splitByLabelGroup, splitBy, { inSvg: true, additionalClassName: "tsi-splitByLabelGroupText" });
|
|
118
|
-
splitByLabelGroup.selectAll('.tsi-splitByLabelGroupText').each(function (d, i) {
|
|
119
|
-
if (i == 0) {
|
|
120
|
-
d3.select(this).attr("y", text.attr("y"))
|
|
121
|
-
.attr("x", text.attr("x"))
|
|
122
|
-
.attr("dy", (dy + dy * 2) + "em")
|
|
123
|
-
.attr("text-anchor", "middle");
|
|
124
|
-
}
|
|
125
|
-
});
|
|
126
|
-
rePositionLabelGroupBoxes(svgSelection, aggKey);
|
|
127
|
-
};
|
|
128
|
-
var labelMouseout = function (svgSelection, aggKey) {
|
|
129
|
-
var self = _this;
|
|
130
|
-
var allText = svgSelection.selectAll(".barGroup")
|
|
131
|
-
.selectAll(".labelGroup")
|
|
132
|
-
.selectAll("text")
|
|
133
|
-
.text(null);
|
|
134
|
-
allText.each(function (aggKey) {
|
|
135
|
-
var text = d3.select(this);
|
|
136
|
-
if (self.chartComponentData.displayState[aggKey] != undefined) {
|
|
137
|
-
Utils.appendFormattedElementsFromString(text, self.chartComponentData.displayState[aggKey].name, { inSvg: true, additionalClassName: "tsi-aggregateLabelGroupText" });
|
|
138
|
-
}
|
|
139
|
-
});
|
|
140
|
-
rePositionLabelGroupBoxes(svgSelection);
|
|
141
|
-
};
|
|
142
|
-
var calcSpacePerAgg = function () {
|
|
143
|
-
var aggregateCount = Math.max(Object.keys(_this.chartComponentData.filteredAggregates).length, 1);
|
|
144
|
-
return Math.max((_this.chartWidth / 2) / aggregateCount, 0);
|
|
145
|
-
};
|
|
146
|
-
var rePositionLabelGroupBoxes = function (svgSelection, aggKey) {
|
|
147
|
-
if (aggKey === void 0) { aggKey = null; }
|
|
148
|
-
svgSelection.selectAll(".barGroup").filter(function (d, i) {
|
|
149
|
-
if (aggKey == null)
|
|
150
|
-
return true;
|
|
151
|
-
return d == aggKey;
|
|
152
|
-
})
|
|
153
|
-
.each(function () {
|
|
154
|
-
if (d3.select(this).select('.labelGroup').select('text').node() == null)
|
|
155
|
-
return;
|
|
156
|
-
var textElemDimensions = d3.select(this).select('.labelGroup').select('text').node()
|
|
157
|
-
.getBoundingClientRect();
|
|
158
|
-
var spacePerAgg = calcSpacePerAgg();
|
|
159
|
-
d3.select(this).attr("width");
|
|
160
|
-
// //truncate text to fit in spacePerAggregate of width
|
|
161
|
-
var textSelection = d3.select(this).select('.labelGroup').select("text");
|
|
162
|
-
var truncateText = function (textSelection, childrenSize) {
|
|
163
|
-
if (childrenSize === void 0) { childrenSize = 1; }
|
|
164
|
-
if (textSelection.node().getComputedTextLength) {
|
|
165
|
-
var textLength = textSelection.node().getComputedTextLength();
|
|
166
|
-
var text = textSelection.text();
|
|
167
|
-
while (textLength > ((spacePerAgg - 6) / childrenSize) && text.length > 0) {
|
|
168
|
-
text = text.slice(0, -1);
|
|
169
|
-
textSelection.text(text + '...');
|
|
170
|
-
textLength = textSelection.node().getComputedTextLength();
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
};
|
|
174
|
-
//text is either in tspans or just in text. Either truncate text directly or through tspan
|
|
175
|
-
if (textSelection.selectAll("tspan").filter(function () { return !d3.select(this).classed("tsi-labelGroupLine"); }).size() === 0)
|
|
176
|
-
truncateText(textSelection);
|
|
177
|
-
else {
|
|
178
|
-
textSelection.selectAll("tspan").filter(function () { return !d3.select(this).classed("tsi-labelGroupLine"); }).each(function () {
|
|
179
|
-
var tspanTextSelection = d3.select(this);
|
|
180
|
-
var childrenSize = tspanTextSelection.classed("tsi-splitByLabelGroupText") ? textSelection.selectAll(".tsi-splitByLabelGroupText").size() : textSelection.selectAll(".tsi-aggregateLabelGroupText").size();
|
|
181
|
-
truncateText(tspanTextSelection, childrenSize);
|
|
182
|
-
});
|
|
183
|
-
}
|
|
184
|
-
d3.select(this).select('.labelGroup').select("rect")
|
|
185
|
-
.attr("height", textElemDimensions.height + 4)
|
|
186
|
-
.attr("y", chartHeight + 6)
|
|
187
|
-
.attr("x", 0)
|
|
188
|
-
.attr("width", spacePerAgg);
|
|
189
|
-
});
|
|
190
|
-
};
|
|
191
|
-
var draw = function (isFromResize) {
|
|
192
|
-
if (isFromResize === void 0) { isFromResize = false; }
|
|
193
|
-
var self = _this;
|
|
194
|
-
_this.width = _this.getWidth();
|
|
195
|
-
height = Math.max(d3.select(_this.renderTarget).node().clientHeight, _this.MINHEIGHT);
|
|
196
|
-
_this.chartComponentData.timestamp = (_this.chartOptions.timestamp != undefined) ? _this.chartOptions.timestamp : _this.chartComponentData.allTimestampsArray[0];
|
|
197
|
-
_this.chartComponentData.setFilteredAggregates();
|
|
198
|
-
if (!isFromResize) {
|
|
199
|
-
_this.chartWidth = _this.getChartWidth();
|
|
200
|
-
}
|
|
201
|
-
_super.prototype.themify.call(_this, targetElement, _this.chartOptions.theme);
|
|
202
|
-
if (!_this.chartOptions.hideChartControlPanel && _this.chartControlsPanel === null) {
|
|
203
|
-
_this.chartControlsPanel = Utils.createControlPanel(_this.renderTarget, _this.CONTROLSWIDTH, _this.chartMargins.top, _this.chartOptions);
|
|
204
|
-
_this.stackedButton = _this.chartControlsPanel.append("button")
|
|
205
|
-
.style("left", "60px")
|
|
206
|
-
.attr("class", "tsi-stackedButton").on("click", function () {
|
|
207
|
-
self.chartOptions.stacked = !self.chartOptions.stacked;
|
|
208
|
-
self.draw();
|
|
209
|
-
})
|
|
210
|
-
.attr("type", "button")
|
|
211
|
-
.attr('title', _this.getString('Stack/Unstack Bars'));
|
|
212
|
-
}
|
|
213
|
-
else if (_this.chartOptions.hideChartControlPanel && _this.chartControlsPanel !== null) {
|
|
214
|
-
_this.removeControlPanel();
|
|
215
|
-
}
|
|
216
|
-
if (_this.chartControlsPanel) {
|
|
217
|
-
_this.stackedButton.attr('aria-label', _this.chartOptions.stacked ? _this.getString("Unstack bars") : _this.getString("Stack bars"));
|
|
218
|
-
}
|
|
219
|
-
if (_this.chartControlsPanel !== null && _this.ellipsisItemsExist()) {
|
|
220
|
-
_this.drawEllipsisMenu();
|
|
221
|
-
_this.chartControlsPanel.style("top", Math.max((_this.chartMargins.top - 24), 0) + 'px');
|
|
222
|
-
}
|
|
223
|
-
else {
|
|
224
|
-
_this.removeEllipsisMenu();
|
|
225
|
-
}
|
|
226
|
-
/********* Determine the number of timestamps present, add margin for slider *********/
|
|
227
|
-
if (_this.chartComponentData.allTimestampsArray.length > 1)
|
|
228
|
-
_this.chartMargins.bottom = 88;
|
|
229
|
-
/*******************/
|
|
230
|
-
chartHeight = height - _this.chartMargins.bottom - _this.chartMargins.top;
|
|
231
|
-
focus.select("line").attr("x2", _this.chartWidth);
|
|
232
|
-
svgSelection.style("width", "".concat(_this.getSVGWidth(), "px"));
|
|
233
|
-
if (_this.timestamp.substring(_this.timestamp.length - 5, _this.timestamp.length) == ".000Z")
|
|
234
|
-
_this.timestamp = _this.timestamp.substring(0, _this.timestamp.length - 5) + "Z";
|
|
235
|
-
var aggregateCount = Math.max(Object.keys(_this.chartComponentData.filteredAggregates).length, 1);
|
|
236
|
-
svgSelection.select('g').attr("transform", "translate(" + _this.chartMargins.left + "," + _this.chartMargins.top + ")")
|
|
237
|
-
.selectAll('.barGroup')
|
|
238
|
-
.attr("visibility", "hidden");
|
|
239
|
-
var barGroups = g.selectAll('.barGroup').data(Object.keys(_this.chartComponentData.displayState));
|
|
240
|
-
var spacePerAggregate = calcSpacePerAgg();
|
|
241
|
-
//map to x position
|
|
242
|
-
var xPosMap = _this.chartComponentData.filteredAggregates.reduce(function (map, aggKey, aggKeyI) {
|
|
243
|
-
map[aggKey] = ((1 / (aggregateCount + 1)) * (aggKeyI + 1) * _this.chartWidth - (spacePerAggregate / 2));
|
|
244
|
-
return map;
|
|
245
|
-
}, {});
|
|
246
|
-
_this.legendObject.draw(_this.chartOptions.legend, _this.chartComponentData, labelMouseover, svgSelection, _this.chartOptions, labelMouseout);
|
|
247
|
-
barGroups = barGroups.enter()
|
|
248
|
-
.append("g")
|
|
249
|
-
.attr("class", "barGroup")
|
|
250
|
-
.merge(barGroups)
|
|
251
|
-
.attr("display", function (d, i) { return (_this.chartComponentData.displayState[d].visible ? "inherit" : "none"); })
|
|
252
|
-
.attr("visibility", "visible")
|
|
253
|
-
.attr("transform", function (d, i) {
|
|
254
|
-
if (xPosMap[d])
|
|
255
|
-
return "translate(" + xPosMap[d] + ",0)";
|
|
256
|
-
return "";
|
|
257
|
-
});
|
|
258
|
-
_this.chartComponentData.setEntireRangeData(_this.chartOptions.scaledToCurrentTime);
|
|
259
|
-
var allValues = _this.chartComponentData.valuesOfVisibleType;
|
|
260
|
-
var aggsSeries = _this.chartComponentData.aggsSeries;
|
|
261
|
-
var yScale = d3.scaleLinear()
|
|
262
|
-
.range([chartHeight, 0]);
|
|
263
|
-
var extent = d3.extent(allValues);
|
|
264
|
-
if (!_this.chartOptions.stacked) {
|
|
265
|
-
if (allValues.length > 0) { //check to make sure there are values present
|
|
266
|
-
if (_this.chartOptions.zeroYAxis) {
|
|
267
|
-
if (extent[0] > 0)
|
|
268
|
-
yScale.domain([0, d3.extent(allValues)[1]]);
|
|
269
|
-
else
|
|
270
|
-
yScale.domain([d3.extent(allValues)[0], Math.max(d3.extent(allValues)[1], 0)]);
|
|
271
|
-
}
|
|
272
|
-
else {
|
|
273
|
-
var offset = (Math.abs(d3.extent(allValues)[1]) * .05);
|
|
274
|
-
yScale.domain([d3.extent(allValues)[0] - offset, (d3.extent(allValues)[1] + offset)]);
|
|
275
|
-
}
|
|
276
|
-
}
|
|
277
|
-
else {
|
|
278
|
-
yScale.domain([0, 0]);
|
|
279
|
-
}
|
|
280
|
-
}
|
|
281
|
-
else {
|
|
282
|
-
yScale.domain([Math.min(_this.chartComponentData.globalMin, _this.chartComponentData.globalMax),
|
|
283
|
-
Math.max(_this.chartComponentData.globalMin, _this.chartComponentData.globalMax)]);
|
|
284
|
-
}
|
|
285
|
-
var barBase = (yScale.domain()[0] > 0) ? yScale(yScale.domain()[0]) : yScale(0);
|
|
286
|
-
var legendObject = _this.legendObject;
|
|
287
|
-
barGroups.each(function (aggKey, i) {
|
|
288
|
-
var splitBys = Object.keys(self.chartComponentData.displayState[aggKey].splitBys);
|
|
289
|
-
var filteredSplitBys = splitBys.filter(function (splitBy) {
|
|
290
|
-
return self.chartComponentData.displayState[aggKey].splitBys[splitBy].visible;
|
|
291
|
-
});
|
|
292
|
-
var splitByCount = filteredSplitBys.length;
|
|
293
|
-
var barWidth = spacePerAggregate / splitByCount;
|
|
294
|
-
var valueElements = d3.select(this).selectAll('.tsi-valueElement').data(self.chartComponentData.getValueContainerData(aggKey));
|
|
295
|
-
var labelGroup = d3.select(this).selectAll(".labelGroup").data([aggKey]);
|
|
296
|
-
var labelGroupEntered = labelGroup.enter()
|
|
297
|
-
.append("g")
|
|
298
|
-
.attr("class", "labelGroup");
|
|
299
|
-
labelGroupEntered.append("rect");
|
|
300
|
-
var labelGroupText = labelGroupEntered.append("text")
|
|
301
|
-
.attr("dy", ".71em");
|
|
302
|
-
Utils.appendFormattedElementsFromString(labelGroupText, self.chartComponentData.displayState[aggKey].name, { inSvg: true, additionalClassName: "tsi-aggregateLabelGroupText" });
|
|
303
|
-
labelGroupEntered.merge(labelGroup)
|
|
304
|
-
.select("rect")
|
|
305
|
-
.attr("class", 'aggregateLabelBox')
|
|
306
|
-
.attr("x", 0)
|
|
307
|
-
.attr("y", 1)
|
|
308
|
-
.attr("width", 0)
|
|
309
|
-
.attr("height", 0);
|
|
310
|
-
d3.select(this).select(".labelGroup").select("text")
|
|
311
|
-
.transition()
|
|
312
|
-
.duration(self.TRANSDURATION)
|
|
313
|
-
.ease(d3.easeExp)
|
|
314
|
-
.attr("x", function (d) { return (spacePerAggregate / 2); })
|
|
315
|
-
.attr("y", chartHeight + 12)
|
|
316
|
-
.style("fill", function (d) { return self.chartComponentData.displayState[aggKey].color; })
|
|
317
|
-
.attr("text-anchor", "middle");
|
|
318
|
-
labelGroup.exit().remove();
|
|
319
|
-
rePositionLabelGroupBoxes(svgSelection, aggKey);
|
|
320
|
-
var xScale = d3.scaleLinear()
|
|
321
|
-
.domain([0, splitByCount])
|
|
322
|
-
.range([0, spacePerAggregate]);
|
|
323
|
-
//yOffset to position 0 at the appropriate place
|
|
324
|
-
chartHeight - filteredSplitBys.reduce(function (offset, splitBy) {
|
|
325
|
-
var measureType = self.chartComponentData.displayState[aggKey].splitBys[splitBy].visibleType;
|
|
326
|
-
var yScaledVal; // either 0 or the value
|
|
327
|
-
if (self.chartComponentData.valuesAtTimestamp[aggKey].splitBys[splitBy].measurements)
|
|
328
|
-
yScaledVal = yScale(self.chartComponentData.valuesAtTimestamp[aggKey].splitBys[splitBy].measurements[measureType]);
|
|
329
|
-
else
|
|
330
|
-
yScaledVal = 0;
|
|
331
|
-
return offset + yScaledVal;
|
|
332
|
-
}, 0);
|
|
333
|
-
//calculate the yPosition of an element, either by its data or explicitly through its value
|
|
334
|
-
var calcYPos = function (d, i) {
|
|
335
|
-
if (!self.chartOptions.stacked) {
|
|
336
|
-
if (d.val > 0)
|
|
337
|
-
return yScale(d.val);
|
|
338
|
-
return yScale(0);
|
|
339
|
-
}
|
|
340
|
-
if (aggsSeries[d.aggKey] != undefined && aggsSeries[d.aggKey].length != 0) {
|
|
341
|
-
return yScale(aggsSeries[d.aggKey][i][0][1]);
|
|
342
|
-
}
|
|
343
|
-
return 0;
|
|
344
|
-
};
|
|
345
|
-
//calculate the height of an element given its data
|
|
346
|
-
var calcHeight = function (d, i, dValue) {
|
|
347
|
-
if (dValue === void 0) { dValue = null; }
|
|
348
|
-
if (!self.chartOptions.stacked) {
|
|
349
|
-
if (yScale.domain()[0] >= 0)
|
|
350
|
-
return chartHeight - calcYPos(d, i);
|
|
351
|
-
dValue = (dValue != null) ? dValue : d.val;
|
|
352
|
-
if (dValue > 0)
|
|
353
|
-
return Math.abs(calcYPos(d, i) - yScale(0));
|
|
354
|
-
return yScale(dValue) - yScale(0);
|
|
355
|
-
}
|
|
356
|
-
return Math.max(Math.abs(yScale(d.val) - yScale(0)), 0);
|
|
357
|
-
};
|
|
358
|
-
//map to x position for grouped, map to y position for stacked
|
|
359
|
-
var splitByXPosMap = filteredSplitBys.reduce(function (map, splitBy, splitByI) {
|
|
360
|
-
map[splitBy] = xScale(splitByI);
|
|
361
|
-
return map;
|
|
362
|
-
}, {});
|
|
363
|
-
var valueElementsEntered = valueElements.enter()
|
|
364
|
-
.append("g")
|
|
365
|
-
.attr("class", "tsi-valueElement");
|
|
366
|
-
valueElementsEntered.append("rect");
|
|
367
|
-
valueElementsEntered.append("line");
|
|
368
|
-
var valueElementMouseout = function (event, d) {
|
|
369
|
-
if (self.contextMenu && self.contextMenu.contextMenuVisible)
|
|
370
|
-
return;
|
|
371
|
-
focus.style("display", "none");
|
|
372
|
-
legendObject.legendElement.selectAll('.tsi-splitByLabel').filter(function (filteredSplitBy) {
|
|
373
|
-
return (d3.select(this.parentNode).datum() == d.aggKey) && (filteredSplitBy == d.splitBy);
|
|
374
|
-
}).classed("inFocus", false);
|
|
375
|
-
event.stopPropagation();
|
|
376
|
-
svgSelection.selectAll(".tsi-valueElement")
|
|
377
|
-
.attr("stroke-opacity", 1)
|
|
378
|
-
.attr("fill-opacity", 1);
|
|
379
|
-
labelMouseout(svgSelection, d.aggKey);
|
|
380
|
-
tooltip.hide();
|
|
381
|
-
};
|
|
382
|
-
var mouseOutValueElementOnContextMenuClick = function () {
|
|
383
|
-
valueElementsEntered.selectAll("path").each(valueElementMouseout);
|
|
384
|
-
};
|
|
385
|
-
var splitByColors = Utils.createSplitByColors(self.chartComponentData.displayState, aggKey, self.chartOptions.keepSplitByColor);
|
|
386
|
-
valueElementsEntered.merge(valueElements)
|
|
387
|
-
.select("rect")
|
|
388
|
-
.attr("fill", function (d, j) {
|
|
389
|
-
return splitByColors[j];
|
|
390
|
-
})
|
|
391
|
-
.on("mouseover", function (event, d) {
|
|
392
|
-
if (self.contextMenu && self.contextMenu.contextMenuVisible)
|
|
393
|
-
return;
|
|
394
|
-
(legendObject.legendElement.selectAll('.tsi-splitByLabel').filter(function (filteredSplitBy) {
|
|
395
|
-
return (d3.select(this.parentNode).datum() == d.aggKey) && (filteredSplitBy == d.splitBy);
|
|
396
|
-
})).classed("inFocus", true);
|
|
397
|
-
labelMouseover(d.aggKey, d.splitBy);
|
|
398
|
-
var e = valueElementsEntered.nodes();
|
|
399
|
-
var j = e.indexOf(event.currentTarget);
|
|
400
|
-
var yPos = calcYPos(d, j);
|
|
401
|
-
if (d.val < 0) {
|
|
402
|
-
yPos = yPos + calcHeight(d, j);
|
|
403
|
-
}
|
|
404
|
-
focus.style("display", "block")
|
|
405
|
-
.attr("transform", "translate(0," + yPos + ")");
|
|
406
|
-
focus.select('.vHoverG')
|
|
407
|
-
.select("text")
|
|
408
|
-
.text(function () {
|
|
409
|
-
if (!self.chartOptions.stacked)
|
|
410
|
-
return Utils.formatYAxisNumber(d.val);
|
|
411
|
-
var yVal = yScale.invert(calcYPos(d, j));
|
|
412
|
-
if (d.val < 0)
|
|
413
|
-
yVal += d.val;
|
|
414
|
-
return Utils.formatYAxisNumber(yVal);
|
|
415
|
-
});
|
|
416
|
-
var textElemDimensions = focus.select('.vHoverG').select("text")
|
|
417
|
-
.node().getBoundingClientRect();
|
|
418
|
-
focus.select(".vHoverG").select("rect")
|
|
419
|
-
.attr("x", -(textElemDimensions.width) - 13)
|
|
420
|
-
.attr("y", -(textElemDimensions.height / 2) - 3)
|
|
421
|
-
.attr("width", textElemDimensions.width + 6)
|
|
422
|
-
.attr("height", textElemDimensions.height + 4);
|
|
423
|
-
focus.node().parentNode.appendChild(focus.node());
|
|
424
|
-
})
|
|
425
|
-
.on("mousemove", function (event, d) {
|
|
426
|
-
if (self.chartOptions.tooltip) {
|
|
427
|
-
var e = valueElementsEntered.nodes();
|
|
428
|
-
var i_1 = e.indexOf(event.currentTarget);
|
|
429
|
-
var mousePos = d3.pointer(event, g.node());
|
|
430
|
-
tooltip.render(self.chartOptions.theme);
|
|
431
|
-
tooltip.draw(d, self.chartComponentData, mousePos[0], mousePos[1], self.chartMargins, function (text) {
|
|
432
|
-
self.tooltipFormat(self.convertToTimeValueFormat(d), text, TooltipMeasureFormat.SingleValue);
|
|
433
|
-
}, null, 20, 20, splitByColors[i_1]);
|
|
434
|
-
}
|
|
435
|
-
else {
|
|
436
|
-
tooltip.hide();
|
|
437
|
-
}
|
|
438
|
-
})
|
|
439
|
-
.on("mouseout", valueElementMouseout)
|
|
440
|
-
.on("contextmenu", function (event, d) {
|
|
441
|
-
if (self.chartComponentData.displayState[d.aggKey].contextMenuActions &&
|
|
442
|
-
self.chartComponentData.displayState[d.aggKey].contextMenuActions.length) {
|
|
443
|
-
var mousePosition = d3.pointer(event, targetElement.node());
|
|
444
|
-
event.preventDefault();
|
|
445
|
-
self.contextMenu.draw(self.chartComponentData, self.renderTarget, self.chartOptions, mousePosition, d.aggKey, d.splitBy, mouseOutValueElementOnContextMenuClick, new Date(self.chartComponentData.timestamp));
|
|
446
|
-
}
|
|
447
|
-
})
|
|
448
|
-
.transition()
|
|
449
|
-
.duration(self.TRANSDURATION)
|
|
450
|
-
.ease(d3.easeExp)
|
|
451
|
-
.attr("y", function (d, i) { return calcYPos(d, i); })
|
|
452
|
-
.attr("height", function (d, i) {
|
|
453
|
-
if (self.chartOptions.stacked && (splitByXPosMap[d.splitBy] == undefined))
|
|
454
|
-
return 0;
|
|
455
|
-
return Math.max(calcHeight(d, i), 0);
|
|
456
|
-
})
|
|
457
|
-
.attr("x", function (d, i) {
|
|
458
|
-
if (self.chartOptions.stacked)
|
|
459
|
-
return 0;
|
|
460
|
-
if (splitByXPosMap[d.splitBy] != undefined)
|
|
461
|
-
return splitByXPosMap[d.splitBy];
|
|
462
|
-
//if invisible, put it in the empty space where it would be
|
|
463
|
-
var splitBys = Object.keys(self.chartComponentData.displayState[aggKey].splitBys);
|
|
464
|
-
var prevSplitBy = splitBys[0];
|
|
465
|
-
for (var splitByI = 0; splitBys[splitByI] != d.splitBy; splitByI++) {
|
|
466
|
-
if (splitByXPosMap[splitBys[splitByI]] != undefined)
|
|
467
|
-
prevSplitBy = splitBys[splitByI];
|
|
468
|
-
}
|
|
469
|
-
if (splitByXPosMap[prevSplitBy] != undefined)
|
|
470
|
-
return splitByXPosMap[prevSplitBy] + barWidth;
|
|
471
|
-
return 0;
|
|
472
|
-
})
|
|
473
|
-
.attr("width", function (d, i) {
|
|
474
|
-
if (self.chartOptions.stacked)
|
|
475
|
-
return spacePerAggregate;
|
|
476
|
-
if (splitByXPosMap[d.splitBy] != undefined)
|
|
477
|
-
return barWidth;
|
|
478
|
-
return 0;
|
|
479
|
-
});
|
|
480
|
-
valueElementsEntered.merge(valueElements)
|
|
481
|
-
.select("line")
|
|
482
|
-
.classed("tsi-baseLine", true)
|
|
483
|
-
.attr("stroke-width", 2)
|
|
484
|
-
.transition()
|
|
485
|
-
.duration(self.TRANSDURATION)
|
|
486
|
-
.ease(d3.easeExp)
|
|
487
|
-
.attr("x1", function (d, i) {
|
|
488
|
-
if (self.chartOptions.stacked)
|
|
489
|
-
return 0;
|
|
490
|
-
if (splitByXPosMap[d.splitBy] != undefined)
|
|
491
|
-
return splitByXPosMap[d.splitBy];
|
|
492
|
-
return 0;
|
|
493
|
-
})
|
|
494
|
-
.attr("x2", function (d, i) {
|
|
495
|
-
if (self.chartOptions.stacked)
|
|
496
|
-
return spacePerAggregate;
|
|
497
|
-
if (splitByXPosMap[d.splitBy] != undefined)
|
|
498
|
-
return splitByXPosMap[d.splitBy] + barWidth;
|
|
499
|
-
return 0;
|
|
500
|
-
})
|
|
501
|
-
.attr("y1", function (d, i) {
|
|
502
|
-
if (!self.chartOptions.stacked) {
|
|
503
|
-
return barBase;
|
|
504
|
-
}
|
|
505
|
-
d.val;
|
|
506
|
-
if (self.chartOptions.stacked && (splitByXPosMap[d.splitBy] == undefined))
|
|
507
|
-
return calcYPos(d, i);
|
|
508
|
-
return calcYPos(d, i) + calcHeight(d, i);
|
|
509
|
-
})
|
|
510
|
-
.attr("y2", function (d, i) {
|
|
511
|
-
if (!self.chartOptions.stacked) {
|
|
512
|
-
return barBase;
|
|
513
|
-
}
|
|
514
|
-
d.val;
|
|
515
|
-
if (self.chartOptions.stacked && (splitByXPosMap[d.splitBy] == undefined))
|
|
516
|
-
return calcYPos(d, i);
|
|
517
|
-
return calcYPos(d, i) + calcHeight(d, i);
|
|
518
|
-
});
|
|
519
|
-
valueElements.exit().remove();
|
|
520
|
-
});
|
|
521
|
-
barGroups.exit().remove();
|
|
522
|
-
var yAxis = g.selectAll(".yAxis")
|
|
523
|
-
.data([yScale]);
|
|
524
|
-
yAxis.enter()
|
|
525
|
-
.append("g")
|
|
526
|
-
.attr("class", "yAxis")
|
|
527
|
-
.merge(yAxis)
|
|
528
|
-
.call(d3.axisLeft(yScale).tickFormat(Utils.formatYAxisNumber).ticks(4));
|
|
529
|
-
yAxis.exit().remove();
|
|
530
|
-
baseLine
|
|
531
|
-
.attr("x1", 0)
|
|
532
|
-
.attr("x2", _this.chartWidth)
|
|
533
|
-
.attr("y1", barBase + 1)
|
|
534
|
-
.attr("y2", barBase + 1);
|
|
535
|
-
/******************** Stack/Unstack button ************************/
|
|
536
|
-
_this.stackedButton.style("opacity", _this.chartOptions.stacked ? 1 : .5)
|
|
537
|
-
.classed('tsi-lightTheme', _this.chartOptions.theme == 'light')
|
|
538
|
-
.classed('tsi-darkTheme', _this.chartOptions.theme == 'dark');
|
|
539
|
-
/******************** Temporal Slider ************************/
|
|
540
|
-
if (_this.chartComponentData.allTimestampsArray.length > 1) {
|
|
541
|
-
d3.select(_this.renderTarget).select('.tsi-sliderWrapper').classed('tsi-hidden', false);
|
|
542
|
-
slider.render(_this.chartComponentData.allTimestampsArray.map(function (ts) {
|
|
543
|
-
var action = function () {
|
|
544
|
-
_this.chartOptions.timestamp = ts;
|
|
545
|
-
_this.render(_this.chartComponentData.data, _this.chartOptions, _this.aggregateExpressionOptions);
|
|
546
|
-
};
|
|
547
|
-
return { label: Utils.timeFormat(_this.chartComponentData.usesSeconds, _this.chartComponentData.usesMillis, _this.chartOptions.offset, _this.chartOptions.is24HourTime, null, null, _this.chartOptions.dateLocale)(new Date(ts)), action: action };
|
|
548
|
-
}), _this.chartOptions, _this.getSVGWidth(), Utils.timeFormat(_this.chartComponentData.usesSeconds, _this.chartComponentData.usesMillis, _this.chartOptions.offset, _this.chartOptions.is24HourTime, null, null, _this.chartOptions.dateLocale)(new Date(_this.chartComponentData.timestamp)));
|
|
549
|
-
}
|
|
550
|
-
else {
|
|
551
|
-
slider.remove();
|
|
552
|
-
d3.select(_this.renderTarget).select('.tsi-sliderWrapper').classed('tsi-hidden', true);
|
|
553
|
-
}
|
|
554
|
-
_this.setControlsPanelWidth();
|
|
555
|
-
};
|
|
556
|
-
this.legendObject = new Legend(draw, this.renderTarget, this.CONTROLSWIDTH);
|
|
557
|
-
this.contextMenu = new ContextMenu(this.draw, this.renderTarget);
|
|
558
|
-
// temporal slider
|
|
559
|
-
var slider = new Slider(d3.select(this.renderTarget).select('.tsi-sliderWrapper').node());
|
|
560
|
-
this.draw = draw;
|
|
561
|
-
window.addEventListener("resize", function () {
|
|
562
|
-
if (!_this.chartOptions.suppressResizeListener)
|
|
563
|
-
_this.draw();
|
|
564
|
-
});
|
|
565
|
-
}
|
|
566
|
-
d3.select("html").on("click." + Utils.guid(), function (event) {
|
|
567
|
-
if (_this.ellipsisContainer && event.target != _this.ellipsisContainer.select(".tsi-ellipsisButton").node()) {
|
|
568
|
-
_this.ellipsisMenu.setMenuVisibility(false);
|
|
569
|
-
}
|
|
570
|
-
});
|
|
571
|
-
this.chartComponentData.mergeDataToDisplayStateAndTimeArrays(this.data, this.timestamp, this.aggregateExpressionOptions);
|
|
572
|
-
this.draw();
|
|
573
|
-
this.gatedShowGrid();
|
|
574
|
-
this.legendPostRenderProcess(this.chartOptions.legend, this.svgSelection, true);
|
|
575
|
-
};
|
|
576
|
-
return GroupedBarChart;
|
|
577
|
-
}(ChartVisualizationComponent));
|
|
578
|
-
|
|
579
|
-
export { GroupedBarChart as G };
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { G as GroupedBarChartData } from './GroupedBarChartData-DK30DLVh.js';
|
|
2
|
-
import { C as ChartVisualizationComponent } from './ChartVisualizationComponent-CswB2P7Z.js';
|
|
3
|
-
import './ChartComponentData-ClzAtU_E.js';
|
|
4
|
-
import './ChartComponent-L_dR-Eny.js';
|
|
5
|
-
import './Enums-CEhu18PC.js';
|
|
6
|
-
import './Component-CdI_Pyko.js';
|
|
7
|
-
import './Interfaces-CdAVFIA6.js';
|
|
8
|
-
import './EllipsisMenu.js';
|
|
9
|
-
|
|
10
|
-
declare class GroupedBarChart extends ChartVisualizationComponent {
|
|
11
|
-
private contextMenu;
|
|
12
|
-
private setStateFromData;
|
|
13
|
-
private timestamp;
|
|
14
|
-
private isStacked;
|
|
15
|
-
private stackedButton;
|
|
16
|
-
chartComponentData: GroupedBarChartData;
|
|
17
|
-
constructor(renderTarget: Element);
|
|
18
|
-
GroupedBarChart(): void;
|
|
19
|
-
render(data: any, options: any, aggregateExpressionOptions: any): void;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export { GroupedBarChart as default };
|