tsichart-core 1.0.5 → 2.0.0-beta.2
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} +9498 -9497
- package/dist/styles/index.css.map +1 -0
- package/package.json +115 -124
- package/README.MD +0 -171
- package/dist/AggregateExpression.d.ts +0 -13
- package/dist/AggregateExpression.js +0 -70
- package/dist/AvailabilityChart-C8ewvn3T.js +0 -488
- package/dist/AvailabilityChart.d.ts +0 -59
- package/dist/AvailabilityChart.js +0 -26
- package/dist/ChartComponent-Dg8P-BTZ.js +0 -302
- package/dist/ChartComponent-ONNW31RL.d.ts +0 -80
- package/dist/ChartComponentData-DBW8_FnY.d.ts +0 -47
- package/dist/ChartDataOptions-CNTSB636.js +0 -49
- package/dist/ChartDataOptions-D0BJuRZy.d.ts +0 -38
- package/dist/ChartVisualizationComponent-CTs5Q_sg.js +0 -23
- package/dist/ChartVisualizationComponent-CpR8xZla.d.ts +0 -8
- package/dist/ColorPicker-0p6vkATj.js +0 -120
- package/dist/ColorPicker.d.ts +0 -28
- package/dist/ColorPicker.js +0 -6
- package/dist/Component-BgifJdKl.js +0 -401
- package/dist/Component-DXwYPoSo.d.ts +0 -226
- package/dist/ContextMenu-wqGGgAzp.js +0 -197
- package/dist/DateTimeButton-D7N8XG0S.js +0 -38
- package/dist/DateTimeButton-DfJL5kvr.d.ts +0 -16
- package/dist/DateTimeButtonRange-BM_J646m.js +0 -71
- package/dist/DateTimeButtonRange.d.ts +0 -19
- package/dist/DateTimeButtonRange.js +0 -15
- package/dist/DateTimeButtonSingle-BxMSitQG.js +0 -48
- package/dist/DateTimeButtonSingle.d.ts +0 -17
- package/dist/DateTimeButtonSingle.js +0 -14
- package/dist/DateTimePicker-BgTi-DY9.js +0 -532
- package/dist/DateTimePicker.d.ts +0 -69
- package/dist/DateTimePicker.js +0 -13
- package/dist/EllipsisMenu-CxJ0LoVm.js +0 -116
- package/dist/EllipsisMenu.d.ts +0 -20
- package/dist/EllipsisMenu.js +0 -6
- package/dist/Enums-DWpaQlXk.d.ts +0 -12
- package/dist/EventsTable-CsnBvvIW.js +0 -553
- package/dist/EventsTable.d.ts +0 -34
- package/dist/EventsTable.js +0 -10
- package/dist/GeoProcessGraphic-CUBMHIHX.js +0 -145
- package/dist/GeoProcessGraphic.d.ts +0 -34
- package/dist/GeoProcessGraphic.js +0 -7
- package/dist/Grid-uoHKTet9.js +0 -874
- package/dist/Grid.d.ts +0 -43
- package/dist/Grid.js +0 -6
- package/dist/GroupedBarChart-Bc3cGhgz.js +0 -579
- package/dist/GroupedBarChart.d.ts +0 -22
- package/dist/GroupedBarChart.js +0 -17
- package/dist/GroupedBarChartData-B7BTM9JH.d.ts +0 -20
- package/dist/GroupedBarChartData-Ml5JJimg.js +0 -121
- package/dist/Heatmap-5gFc_AVW.js +0 -524
- package/dist/Heatmap.d.ts +0 -31
- package/dist/Heatmap.js +0 -14
- package/dist/Hierarchy-C5ueDsus.js +0 -260
- package/dist/Hierarchy.d.ts +0 -39
- package/dist/Hierarchy.js +0 -6
- package/dist/HierarchyNavigation-C3Pwt0D6.js +0 -336
- package/dist/HierarchyNavigation.d.ts +0 -34
- package/dist/HierarchyNavigation.js +0 -6
- package/dist/HistoryPlayback-D09bter3.js +0 -175
- package/dist/HistoryPlayback-DmJ6u7lU.d.ts +0 -68
- package/dist/Interfaces-R_1l9lIT.d.ts +0 -6
- package/dist/Legend-gCIrAytG.js +0 -497
- package/dist/LineChart-CzDp5ULB.js +0 -3181
- package/dist/LineChart.d.ts +0 -163
- package/dist/LineChart.js +0 -18
- package/dist/ModelAutocomplete-lU71Ndju.js +0 -100
- package/dist/ModelAutocomplete.d.ts +0 -12
- package/dist/ModelAutocomplete.js +0 -7
- package/dist/ModelSearch-OF4DygOJ.js +0 -189
- package/dist/ModelSearch.d.ts +0 -23
- package/dist/ModelSearch.js +0 -9
- package/dist/PieChart-XLc9Itne.js +0 -258
- package/dist/PieChart.d.ts +0 -26
- package/dist/PieChart.js +0 -17
- package/dist/PlaybackControls-DbG9gExy.js +0 -195
- package/dist/PlaybackControls.d.ts +0 -39
- package/dist/PlaybackControls.js +0 -13
- package/dist/ProcessGraphic-Cft1b4Mf.js +0 -154
- package/dist/ProcessGraphic.d.ts +0 -31
- package/dist/ProcessGraphic.js +0 -7
- package/dist/ScatterPlot-CdnqSHq2.js +0 -924
- package/dist/ScatterPlot.d.ts +0 -115
- package/dist/ScatterPlot.js +0 -17
- package/dist/SingleDateTimePicker-Ddr-ogTk.js +0 -213
- package/dist/SingleDateTimePicker.d.ts +0 -45
- package/dist/SingleDateTimePicker.js +0 -12
- package/dist/Slider-CX0nvlqx.js +0 -186
- package/dist/Slider.d.ts +0 -31
- package/dist/Slider.js +0 -6
- package/dist/TemporalXAxisComponent-DXmMekYq.js +0 -129
- package/dist/TemporalXAxisComponent-PIeiJYUr.d.ts +0 -23
- package/dist/TimezonePicker-CQpXR5eb.js +0 -58
- package/dist/TimezonePicker.d.ts +0 -16
- package/dist/TimezonePicker.js +0 -10
- package/dist/Tooltip-C13k0eeH.js +0 -104
- package/dist/TsqExpression.d.ts +0 -36
- package/dist/TsqExpression.js +0 -89
- package/dist/UXClient-Bn1afElm.js +0 -230
- package/dist/UXClient.d.ts +0 -74
- package/dist/UXClient.js +0 -47
- package/dist/Utils-BcQeZOM3.d.ts +0 -104
- package/dist/Utils-DDGqSryb.js +0 -1138
- package/dist/Utils.d.ts +0 -7
- package/dist/Utils.js +0 -7
- package/dist/_tslib-BYFmvNeL.js +0 -96
- package/dist/pikaday-jh_aVtJs.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/tsiclient.css +0 -17323
- package/tsiclient.d.ts +0 -46
- package/tsiclient.js +0 -58
- package/tsiclient.min.css +0 -6
|
@@ -1,258 +0,0 @@
|
|
|
1
|
-
import { _ as __extends, a as __assign } from './_tslib-BYFmvNeL.js';
|
|
2
|
-
import * as d3 from 'd3';
|
|
3
|
-
import { U as Utils, T as TooltipMeasureFormat } from './Utils-DDGqSryb.js';
|
|
4
|
-
import { L as Legend } from './Legend-gCIrAytG.js';
|
|
5
|
-
import { C as ContextMenu } from './ContextMenu-wqGGgAzp.js';
|
|
6
|
-
import { C as ChartComponentData } from './Grid-uoHKTet9.js';
|
|
7
|
-
import { G as GroupedBarChartData } from './GroupedBarChartData-Ml5JJimg.js';
|
|
8
|
-
import { T as Tooltip } from './Tooltip-C13k0eeH.js';
|
|
9
|
-
import { C as ChartVisualizationComponent } from './ChartVisualizationComponent-CTs5Q_sg.js';
|
|
10
|
-
import { S as Slider } from './Slider-CX0nvlqx.js';
|
|
11
|
-
|
|
12
|
-
var PieChartData = /** @class */ (function (_super) {
|
|
13
|
-
__extends(PieChartData, _super);
|
|
14
|
-
function PieChartData() {
|
|
15
|
-
var _this = _super.call(this) || this;
|
|
16
|
-
_this.visibleValuesSum = 0;
|
|
17
|
-
return _this;
|
|
18
|
-
}
|
|
19
|
-
PieChartData.prototype.mergeDataToDisplayStateAndTimeArrays = function (data, timestamp, aggregateExpressionOptions) {
|
|
20
|
-
if (aggregateExpressionOptions === void 0) { aggregateExpressionOptions = null; }
|
|
21
|
-
ChartComponentData.prototype.mergeDataToDisplayStateAndTimeArrays.call(this, data, aggregateExpressionOptions);
|
|
22
|
-
this.timestamp = Utils.getValueOrDefault({ '': timestamp }, '', this.allTimestampsArray[0]);
|
|
23
|
-
_super.prototype.setValuesAtTimestamp.call(this);
|
|
24
|
-
this.setAllTimestampsArray();
|
|
25
|
-
};
|
|
26
|
-
PieChartData.prototype.updateFlatValueArray = function (timestamp) {
|
|
27
|
-
var _this = this;
|
|
28
|
-
this.visibleValuesSum = 0;
|
|
29
|
-
var values = [];
|
|
30
|
-
Object.keys(this.valuesAtTimestamp).forEach(function (aggKey) {
|
|
31
|
-
Object.keys(_this.valuesAtTimestamp[aggKey].splitBys).forEach(function (splitBy, splitByI) {
|
|
32
|
-
var value = 0;
|
|
33
|
-
if (_this.getSplitByVisible(aggKey, splitBy) && _this.valuesAtTimestamp[aggKey].splitBys[splitBy].measurements != undefined)
|
|
34
|
-
value = _this.valuesAtTimestamp[aggKey].splitBys[splitBy].measurements[_this.getVisibleMeasure(aggKey, splitBy)];
|
|
35
|
-
values.push({
|
|
36
|
-
aggKey: aggKey,
|
|
37
|
-
splitBy: splitBy,
|
|
38
|
-
val: value,
|
|
39
|
-
splitByI: splitByI
|
|
40
|
-
});
|
|
41
|
-
_this.visibleValuesSum += Math.abs(value);
|
|
42
|
-
});
|
|
43
|
-
});
|
|
44
|
-
this.flatValueArray = values;
|
|
45
|
-
};
|
|
46
|
-
return PieChartData;
|
|
47
|
-
}(GroupedBarChartData));
|
|
48
|
-
|
|
49
|
-
var PieChart = /** @class */ (function (_super) {
|
|
50
|
-
__extends(PieChart, _super);
|
|
51
|
-
function PieChart(renderTarget) {
|
|
52
|
-
var _this = _super.call(this, renderTarget) || this;
|
|
53
|
-
_this.chartComponentData = new PieChartData();
|
|
54
|
-
_this.chartMargins = {
|
|
55
|
-
top: 20,
|
|
56
|
-
bottom: 28,
|
|
57
|
-
left: 0,
|
|
58
|
-
right: 0
|
|
59
|
-
};
|
|
60
|
-
return _this;
|
|
61
|
-
}
|
|
62
|
-
PieChart.prototype.PieChart = function () { };
|
|
63
|
-
PieChart.prototype.render = function (data, options, aggregateExpressionOptions) {
|
|
64
|
-
var _this = this;
|
|
65
|
-
_super.prototype.render.call(this, data, options, aggregateExpressionOptions);
|
|
66
|
-
this.chartComponentData.mergeDataToDisplayStateAndTimeArrays(this.data, this.chartOptions.timestamp, this.aggregateExpressionOptions);
|
|
67
|
-
(options && options.timestamp != undefined) ? options.timestamp : this.chartComponentData.allTimestampsArray[0];
|
|
68
|
-
var targetElement = d3.select(this.renderTarget)
|
|
69
|
-
.classed("tsi-pieChart", true);
|
|
70
|
-
if (this.svgSelection == null) {
|
|
71
|
-
this.svgSelection = targetElement.append("svg")
|
|
72
|
-
.attr("class", "tsi-pieChartSVG tsi-chartSVG")
|
|
73
|
-
.attr('title', this.getString('Pie chart'));
|
|
74
|
-
var g = this.svgSelection.append("g");
|
|
75
|
-
var tooltip = new Tooltip(d3.select(this.renderTarget));
|
|
76
|
-
d3.select(this.renderTarget).append('div').classed('tsi-sliderWrapper', true);
|
|
77
|
-
this.draw = function (isFromResize, event) {
|
|
78
|
-
if (isFromResize === void 0) { isFromResize = false; }
|
|
79
|
-
// Determine the number of timestamps present, add margin for slider
|
|
80
|
-
if (_this.chartComponentData.allTimestampsArray.length > 1)
|
|
81
|
-
_this.chartMargins.bottom = 68;
|
|
82
|
-
if (_this.chartOptions.legend == "compact") {
|
|
83
|
-
_this.chartMargins.top = 68;
|
|
84
|
-
}
|
|
85
|
-
else {
|
|
86
|
-
_this.chartMargins.top = 20;
|
|
87
|
-
}
|
|
88
|
-
_this.width = _this.getWidth();
|
|
89
|
-
var height = +targetElement.node().getBoundingClientRect().height;
|
|
90
|
-
if (!isFromResize) {
|
|
91
|
-
_this.chartWidth = _this.getChartWidth();
|
|
92
|
-
}
|
|
93
|
-
var chartHeight = height;
|
|
94
|
-
var usableHeight = height - _this.chartMargins.bottom - _this.chartMargins.top;
|
|
95
|
-
var outerRadius = (Math.min(usableHeight, _this.chartWidth) - 10) / 2;
|
|
96
|
-
var innerRadius = _this.chartOptions.arcWidthRatio &&
|
|
97
|
-
(_this.chartOptions.arcWidthRatio < 1 && _this.chartOptions.arcWidthRatio > 0) ?
|
|
98
|
-
outerRadius - (outerRadius * _this.chartOptions.arcWidthRatio) :
|
|
99
|
-
0;
|
|
100
|
-
_this.svgSelection
|
|
101
|
-
.attr("width", _this.chartWidth)
|
|
102
|
-
.attr("height", chartHeight);
|
|
103
|
-
_this.svgSelection.select("g").attr("transform", "translate(" + (_this.chartWidth / 2) + "," + (chartHeight / 2) + ")");
|
|
104
|
-
var timestamp = (_this.chartOptions.timestamp != undefined) ? _this.chartOptions.timestamp : _this.chartComponentData.allTimestampsArray[0];
|
|
105
|
-
_this.chartComponentData.updateFlatValueArray(timestamp);
|
|
106
|
-
_super.prototype.themify.call(_this, targetElement, _this.chartOptions.theme);
|
|
107
|
-
if (!_this.chartOptions.hideChartControlPanel && _this.chartControlsPanel === null) {
|
|
108
|
-
_this.chartControlsPanel = Utils.createControlPanel(_this.renderTarget, _this.CONTROLSWIDTH, _this.chartMargins.top, _this.chartOptions);
|
|
109
|
-
}
|
|
110
|
-
else if (_this.chartOptions.hideChartControlPanel && _this.chartControlsPanel !== null) {
|
|
111
|
-
_this.removeControlPanel();
|
|
112
|
-
}
|
|
113
|
-
if (_this.ellipsisItemsExist() && !_this.chartOptions.hideChartControlPanel) {
|
|
114
|
-
_this.drawEllipsisMenu();
|
|
115
|
-
_this.chartControlsPanel.style("top", Math.max((_this.chartMargins.top - 24), 0) + 'px');
|
|
116
|
-
}
|
|
117
|
-
else {
|
|
118
|
-
_this.removeControlPanel();
|
|
119
|
-
}
|
|
120
|
-
var labelMouseover = function (aggKey, splitBy) {
|
|
121
|
-
if (splitBy === void 0) { splitBy = null; }
|
|
122
|
-
//filter out the selected timeseries/splitby
|
|
123
|
-
var selectedFilter = function (d, j) {
|
|
124
|
-
return !(d.data.aggKey == aggKey && (splitBy == null || d.data.splitBy == splitBy));
|
|
125
|
-
};
|
|
126
|
-
_this.svgSelection.selectAll(".tsi-pie-path")
|
|
127
|
-
.filter(selectedFilter)
|
|
128
|
-
.attr("stroke-opacity", .3)
|
|
129
|
-
.attr("fill-opacity", .3);
|
|
130
|
-
};
|
|
131
|
-
var labelMouseout = function (aggregateKey, splitBy) {
|
|
132
|
-
_this.svgSelection.selectAll(".tsi-pie-path")
|
|
133
|
-
.attr("stroke-opacity", 1)
|
|
134
|
-
.attr("fill-opacity", 1);
|
|
135
|
-
};
|
|
136
|
-
function drawTooltip(d, mousePosition) {
|
|
137
|
-
var xPos = mousePosition[0];
|
|
138
|
-
var yPos = mousePosition[1];
|
|
139
|
-
tooltip.render(self.chartOptions.theme);
|
|
140
|
-
var color = Utils.colorSplitBy(self.chartComponentData.displayState, d.data.splitByI, d.data.aggKey, self.chartOptions.keepSplitByColor);
|
|
141
|
-
tooltip.draw(d, self.chartComponentData, xPos, yPos, __assign(__assign({}, self.chartMargins), { top: 0, bottom: 0 }), function (text) {
|
|
142
|
-
self.tooltipFormat(self.convertToTimeValueFormat(d.data), text, TooltipMeasureFormat.SingleValue);
|
|
143
|
-
}, null, 20, 20, color);
|
|
144
|
-
}
|
|
145
|
-
_this.legendObject.draw(_this.chartOptions.legend, _this.chartComponentData, labelMouseover, _this.svgSelection, _this.chartOptions, labelMouseout, null, event);
|
|
146
|
-
var pie = d3.pie()
|
|
147
|
-
.sort(null)
|
|
148
|
-
.value(function (d) {
|
|
149
|
-
return Math.abs(d.val);
|
|
150
|
-
});
|
|
151
|
-
d3.arc()
|
|
152
|
-
.outerRadius(outerRadius)
|
|
153
|
-
.innerRadius(innerRadius);
|
|
154
|
-
var arc = g.selectAll(".tsi-pie-arc")
|
|
155
|
-
.data(pie(_this.chartComponentData.flatValueArray));
|
|
156
|
-
var arcEntered = arc
|
|
157
|
-
.enter().append("g")
|
|
158
|
-
.merge(arc)
|
|
159
|
-
.attr("class", "tsi-pie-arc");
|
|
160
|
-
var self = _this;
|
|
161
|
-
var drawArc = d3.arc()
|
|
162
|
-
.innerRadius(innerRadius)
|
|
163
|
-
.outerRadius(outerRadius);
|
|
164
|
-
function arcTween(a) {
|
|
165
|
-
var i = d3.interpolate(this._current, a);
|
|
166
|
-
this._current = i(0);
|
|
167
|
-
return function (t) {
|
|
168
|
-
return drawArc(i(t));
|
|
169
|
-
};
|
|
170
|
-
}
|
|
171
|
-
var self = _this;
|
|
172
|
-
function pathMouseout(event, d) {
|
|
173
|
-
if (self.contextMenu && self.contextMenu.contextMenuVisible)
|
|
174
|
-
return;
|
|
175
|
-
tooltip.hide();
|
|
176
|
-
labelMouseout(d.data.aggKey, d.data.splitBy);
|
|
177
|
-
self.legendObject.legendElement.selectAll('.tsi-splitByLabel').classed("inFocus", false);
|
|
178
|
-
}
|
|
179
|
-
function pathMouseInteraction(event, d) {
|
|
180
|
-
if (this.contextMenu && this.contextMenu.contextMenuVisible)
|
|
181
|
-
return;
|
|
182
|
-
pathMouseout(event, d);
|
|
183
|
-
labelMouseover(d.data.aggKey, d.data.splitBy);
|
|
184
|
-
self.legendObject.legendElement.selectAll('.tsi-splitByLabel').filter(function (filteredSplitBy) {
|
|
185
|
-
return (d3.select(this.parentNode).datum() == d.data.aggKey) && (filteredSplitBy == d.data.splitBy);
|
|
186
|
-
}).classed("inFocus", true);
|
|
187
|
-
drawTooltip(d, d3.pointer(event, self.svgSelection.node()));
|
|
188
|
-
}
|
|
189
|
-
var mouseOutArcOnContextMenuClick = function () {
|
|
190
|
-
arcEntered.selectAll("path").each(pathMouseout);
|
|
191
|
-
};
|
|
192
|
-
arcEntered.each(function () {
|
|
193
|
-
var pathElem = d3.select(this).selectAll(".tsi-pie-path").data(function (d) { return [d]; });
|
|
194
|
-
pathElem.enter()
|
|
195
|
-
.append("path")
|
|
196
|
-
.attr("class", "tsi-pie-path")
|
|
197
|
-
.attr("d", drawArc)
|
|
198
|
-
.on("mouseover", pathMouseInteraction)
|
|
199
|
-
.on("mousemove", pathMouseInteraction)
|
|
200
|
-
.on("mouseout", pathMouseout)
|
|
201
|
-
.on("contextmenu", function (event, d) {
|
|
202
|
-
if (self.chartComponentData.displayState[d.data.aggKey].contextMenuActions &&
|
|
203
|
-
self.chartComponentData.displayState[d.data.aggKey].contextMenuActions.length) {
|
|
204
|
-
var mousePosition = d3.pointer(event, targetElement.node());
|
|
205
|
-
event.preventDefault();
|
|
206
|
-
self.contextMenu.draw(self.chartComponentData, self.renderTarget, self.chartOptions, mousePosition, d.data.aggKey, d.data.splitBy, mouseOutArcOnContextMenuClick, new Date(self.chartComponentData.timestamp));
|
|
207
|
-
}
|
|
208
|
-
})
|
|
209
|
-
.each(function (d) { this._current = d; })
|
|
210
|
-
.merge(pathElem)
|
|
211
|
-
.transition()
|
|
212
|
-
.duration(self.TRANSDURATION)
|
|
213
|
-
.ease(d3.easeExp)
|
|
214
|
-
.attrTween("d", arcTween)
|
|
215
|
-
.attr("fill", function (d) {
|
|
216
|
-
return Utils.colorSplitBy(self.chartComponentData.displayState, d.data.splitByI, d.data.aggKey, self.chartOptions.keepSplitByColor);
|
|
217
|
-
})
|
|
218
|
-
.attr("class", "tsi-pie-path");
|
|
219
|
-
});
|
|
220
|
-
arc.exit().remove();
|
|
221
|
-
/******************** Temporal Slider ************************/
|
|
222
|
-
if (_this.chartComponentData.allTimestampsArray.length > 1) {
|
|
223
|
-
d3.select(_this.renderTarget).select('.tsi-sliderWrapper').classed('tsi-hidden', false);
|
|
224
|
-
slider.render(_this.chartComponentData.allTimestampsArray.map(function (ts) {
|
|
225
|
-
var action = function () {
|
|
226
|
-
_this.chartOptions.timestamp = ts;
|
|
227
|
-
_this.render(_this.chartComponentData.data, _this.chartOptions, _this.aggregateExpressionOptions);
|
|
228
|
-
};
|
|
229
|
-
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 };
|
|
230
|
-
}), _this.chartOptions, _this.chartWidth, Utils.timeFormat(_this.chartComponentData.usesSeconds, _this.chartComponentData.usesMillis, _this.chartOptions.offset, _this.chartOptions.is24HourTime, null, null, _this.chartOptions.dateLocale)(new Date(_this.chartComponentData.timestamp)));
|
|
231
|
-
}
|
|
232
|
-
else {
|
|
233
|
-
slider.remove();
|
|
234
|
-
d3.select(_this.renderTarget).select('.tsi-sliderWrapper').classed('tsi-hidden', true);
|
|
235
|
-
}
|
|
236
|
-
};
|
|
237
|
-
this.legendObject = new Legend(this.draw, this.renderTarget, this.CONTROLSWIDTH);
|
|
238
|
-
this.contextMenu = new ContextMenu(this.draw, this.renderTarget);
|
|
239
|
-
// temporal slider
|
|
240
|
-
var slider = new Slider(d3.select(this.renderTarget).select('.tsi-sliderWrapper').node());
|
|
241
|
-
window.addEventListener("resize", function () {
|
|
242
|
-
if (!_this.chartOptions.suppressResizeListener)
|
|
243
|
-
_this.draw();
|
|
244
|
-
});
|
|
245
|
-
}
|
|
246
|
-
this.draw();
|
|
247
|
-
this.gatedShowGrid();
|
|
248
|
-
d3.select("html").on("click." + Utils.guid(), function (event) {
|
|
249
|
-
if (_this.ellipsisContainer && event.target != _this.ellipsisContainer.select(".tsi-ellipsisButton").node()) {
|
|
250
|
-
_this.ellipsisMenu.setMenuVisibility(false);
|
|
251
|
-
}
|
|
252
|
-
});
|
|
253
|
-
this.legendPostRenderProcess(this.chartOptions.legend, this.svgSelection, true);
|
|
254
|
-
};
|
|
255
|
-
return PieChart;
|
|
256
|
-
}(ChartVisualizationComponent));
|
|
257
|
-
|
|
258
|
-
export { PieChart as P };
|
package/dist/PieChart.d.ts
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { G as GroupedBarChartData } from './GroupedBarChartData-B7BTM9JH.js';
|
|
2
|
-
import { C as ChartVisualizationComponent } from './ChartVisualizationComponent-CpR8xZla.js';
|
|
3
|
-
import './ChartComponentData-DBW8_FnY.js';
|
|
4
|
-
import './ChartComponent-ONNW31RL.js';
|
|
5
|
-
import './Enums-DWpaQlXk.js';
|
|
6
|
-
import './Component-DXwYPoSo.js';
|
|
7
|
-
import './Interfaces-R_1l9lIT.js';
|
|
8
|
-
import './EllipsisMenu.js';
|
|
9
|
-
|
|
10
|
-
declare class PieChartData extends GroupedBarChartData {
|
|
11
|
-
flatValueArray: any;
|
|
12
|
-
visibleValuesSum: number;
|
|
13
|
-
constructor();
|
|
14
|
-
mergeDataToDisplayStateAndTimeArrays(data: any, timestamp: any, aggregateExpressionOptions?: any): void;
|
|
15
|
-
updateFlatValueArray(timestamp: any): void;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
declare class PieChart extends ChartVisualizationComponent {
|
|
19
|
-
private contextMenu;
|
|
20
|
-
chartComponentData: PieChartData;
|
|
21
|
-
constructor(renderTarget: Element);
|
|
22
|
-
PieChart(): void;
|
|
23
|
-
render(data: any, options: any, aggregateExpressionOptions: any): void;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export { PieChart as default };
|
package/dist/PieChart.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
export { P as default } from './PieChart-XLc9Itne.js';
|
|
2
|
-
import './_tslib-BYFmvNeL.js';
|
|
3
|
-
import 'd3';
|
|
4
|
-
import './Utils-DDGqSryb.js';
|
|
5
|
-
import 'moment-timezone';
|
|
6
|
-
import './Legend-gCIrAytG.js';
|
|
7
|
-
import './Component-BgifJdKl.js';
|
|
8
|
-
import './ContextMenu-wqGGgAzp.js';
|
|
9
|
-
import './Grid-uoHKTet9.js';
|
|
10
|
-
import './GroupedBarChartData-Ml5JJimg.js';
|
|
11
|
-
import './Tooltip-C13k0eeH.js';
|
|
12
|
-
import './ChartVisualizationComponent-CTs5Q_sg.js';
|
|
13
|
-
import './ChartComponent-Dg8P-BTZ.js';
|
|
14
|
-
import 'split.js';
|
|
15
|
-
import './EllipsisMenu-CxJ0LoVm.js';
|
|
16
|
-
import './ChartDataOptions-CNTSB636.js';
|
|
17
|
-
import './Slider-CX0nvlqx.js';
|
|
@@ -1,195 +0,0 @@
|
|
|
1
|
-
import { _ as __extends } from './_tslib-BYFmvNeL.js';
|
|
2
|
-
import * as d3 from 'd3';
|
|
3
|
-
import { C as Component } from './Component-BgifJdKl.js';
|
|
4
|
-
import { U as Utils } from './Utils-DDGqSryb.js';
|
|
5
|
-
import { T as TemporalXAxisComponent } from './TemporalXAxisComponent-DXmMekYq.js';
|
|
6
|
-
|
|
7
|
-
var PlaybackControls = /** @class */ (function (_super) {
|
|
8
|
-
__extends(PlaybackControls, _super);
|
|
9
|
-
function PlaybackControls(renderTarget, initialTimeStamp) {
|
|
10
|
-
if (initialTimeStamp === void 0) { initialTimeStamp = null; }
|
|
11
|
-
var _this = _super.call(this, renderTarget) || this;
|
|
12
|
-
_this.handleRadius = 7;
|
|
13
|
-
_this.minimumPlaybackInterval = 1000; // 1 second
|
|
14
|
-
_this.playbackInterval = null;
|
|
15
|
-
_this.selectedTimeStamp = initialTimeStamp;
|
|
16
|
-
return _this;
|
|
17
|
-
}
|
|
18
|
-
Object.defineProperty(PlaybackControls.prototype, "currentTimeStamp", {
|
|
19
|
-
get: function () {
|
|
20
|
-
return this.selectedTimeStamp;
|
|
21
|
-
},
|
|
22
|
-
enumerable: false,
|
|
23
|
-
configurable: true
|
|
24
|
-
});
|
|
25
|
-
PlaybackControls.prototype.render = function (start, end, onSelectTimeStamp, options, playbackSettings) {
|
|
26
|
-
var _this = this;
|
|
27
|
-
this.end = end;
|
|
28
|
-
this.selectTimeStampCallback = onSelectTimeStamp;
|
|
29
|
-
this.chartOptions.setOptions(options);
|
|
30
|
-
this.playbackSettings = playbackSettings;
|
|
31
|
-
this.timeFormatter = Utils.timeFormat(true, false, this.chartOptions.offset, this.chartOptions.is24HourTime, null, null, this.chartOptions.dateLocale);
|
|
32
|
-
var targetElement = d3.select(this.renderTarget);
|
|
33
|
-
_super.prototype.themify.call(this, targetElement, this.chartOptions.theme);
|
|
34
|
-
targetElement.html('');
|
|
35
|
-
var sliderContainer = targetElement.append('div')
|
|
36
|
-
.classed('tsi-playback-timeline', true);
|
|
37
|
-
var sliderContainerWidth = sliderContainer.node().clientWidth;
|
|
38
|
-
var sliderContainerHeight = sliderContainer.node().clientHeight;
|
|
39
|
-
this.trackXOffset = this.handleRadius + 8;
|
|
40
|
-
this.trackYOffset = Math.floor(sliderContainerHeight / 2);
|
|
41
|
-
this.trackWidth = sliderContainerWidth - (2 * this.trackXOffset);
|
|
42
|
-
this.timeStampToPosition = d3.scaleTime()
|
|
43
|
-
.domain([start, end])
|
|
44
|
-
.range([0, this.trackWidth]);
|
|
45
|
-
var timeAxisContainer = sliderContainer.append('div')
|
|
46
|
-
.classed('tsi-playback-axis', true)
|
|
47
|
-
.style('top', "".concat(this.trackYOffset + 6, "px"))
|
|
48
|
-
.style('left', "".concat(this.trackXOffset, "px"))
|
|
49
|
-
.style('width', "".concat(this.trackWidth, "px"));
|
|
50
|
-
var timeAxis = new TimeAxis(timeAxisContainer.node());
|
|
51
|
-
timeAxis.render(this.chartOptions, this.timeStampToPosition);
|
|
52
|
-
var gWrapper = sliderContainer
|
|
53
|
-
.append('svg')
|
|
54
|
-
.append('g');
|
|
55
|
-
sliderContainer.append('div')
|
|
56
|
-
.classed('tsi-playback-input', true)
|
|
57
|
-
.style('left', "".concat(this.trackXOffset, "px"))
|
|
58
|
-
.style('width', "".concat(this.trackWidth, "px"));
|
|
59
|
-
this.track = gWrapper
|
|
60
|
-
.append('g')
|
|
61
|
-
.classed('tsi-playback-track', true);
|
|
62
|
-
gWrapper.call(d3.drag()
|
|
63
|
-
.container(sliderContainer.select('.tsi-playback-input').node())
|
|
64
|
-
.on('start.interrupt', function () { gWrapper.interrupt(); })
|
|
65
|
-
.on('start drag', function (event) {
|
|
66
|
-
_this.onDrag(event.x);
|
|
67
|
-
})
|
|
68
|
-
.on('end', function () {
|
|
69
|
-
_this.onDragEnd();
|
|
70
|
-
}));
|
|
71
|
-
this.track.append('line')
|
|
72
|
-
.classed('tsi-left-of-handle', true)
|
|
73
|
-
.attr('y1', this.trackYOffset)
|
|
74
|
-
.attr('y2', this.trackYOffset);
|
|
75
|
-
this.track.append('line')
|
|
76
|
-
.classed('tsi-right-of-handle', true)
|
|
77
|
-
.attr('y1', this.trackYOffset)
|
|
78
|
-
.attr('y2', this.trackYOffset);
|
|
79
|
-
this.handleElement = gWrapper.append('circle')
|
|
80
|
-
.classed('tsi-playback-handle', true)
|
|
81
|
-
.attr('r', this.handleRadius)
|
|
82
|
-
.attr('cy', this.trackYOffset);
|
|
83
|
-
this.controlsContainer = targetElement.append('div')
|
|
84
|
-
.classed('tsi-playback-buttons', true);
|
|
85
|
-
this.playButton = this.controlsContainer.append('button')
|
|
86
|
-
.classed('tsi-play-button', this.playbackInterval === null)
|
|
87
|
-
.classed('tsi-pause-button', this.playbackInterval !== null)
|
|
88
|
-
.on('click', function () {
|
|
89
|
-
if (_this.playbackInterval === null) {
|
|
90
|
-
_this.play();
|
|
91
|
-
}
|
|
92
|
-
else {
|
|
93
|
-
_this.pause();
|
|
94
|
-
}
|
|
95
|
-
});
|
|
96
|
-
this.controlsContainer.append('span')
|
|
97
|
-
.classed('tsi-playback-timestamp', true)
|
|
98
|
-
.style('margin', "0 ".concat(this.trackXOffset, "px"));
|
|
99
|
-
this.selectedTimeStamp = this.selectedTimeStamp || start;
|
|
100
|
-
var handlePosition = this.timeStampToPosition(this.selectedTimeStamp);
|
|
101
|
-
this.updateSelection(handlePosition, this.selectedTimeStamp);
|
|
102
|
-
};
|
|
103
|
-
PlaybackControls.prototype.play = function () {
|
|
104
|
-
if (this.playbackInterval === null) {
|
|
105
|
-
// Default to an interval if one is not provided. Also, the interval should
|
|
106
|
-
// not be lower than the minimum playback interval.
|
|
107
|
-
var playbackIntervalMs = Math.max(this.playbackSettings.intervalMillis || this.minimumPlaybackInterval, this.minimumPlaybackInterval);
|
|
108
|
-
this.next();
|
|
109
|
-
this.playbackInterval = window.setInterval(this.next.bind(this), playbackIntervalMs);
|
|
110
|
-
this.playButton
|
|
111
|
-
.classed('tsi-play-button', false)
|
|
112
|
-
.classed('tsi-pause-button', true);
|
|
113
|
-
}
|
|
114
|
-
};
|
|
115
|
-
PlaybackControls.prototype.pause = function () {
|
|
116
|
-
// Pause only if component is in 'play' mode (i.e. an interval has ben set)
|
|
117
|
-
// otherwise, do nothing.
|
|
118
|
-
if (this.playbackInterval !== null) {
|
|
119
|
-
window.clearInterval(this.playbackInterval);
|
|
120
|
-
this.playbackInterval = null;
|
|
121
|
-
this.playButton
|
|
122
|
-
.classed('tsi-play-button', true)
|
|
123
|
-
.classed('tsi-pause-button', false);
|
|
124
|
-
}
|
|
125
|
-
};
|
|
126
|
-
PlaybackControls.prototype.next = function () {
|
|
127
|
-
// If we've reached the end of the available time stamps, do nothing until
|
|
128
|
-
// the end moves forward.
|
|
129
|
-
if (this.selectedTimeStamp.valueOf() === this.end.valueOf()) {
|
|
130
|
-
return;
|
|
131
|
-
}
|
|
132
|
-
var newValue = this.selectedTimeStamp.valueOf() + this.playbackSettings.stepSizeMillis;
|
|
133
|
-
newValue = Math.min(newValue, this.end.valueOf());
|
|
134
|
-
this.selectedTimeStamp = new Date(newValue);
|
|
135
|
-
var handlePosition = this.timeStampToPosition(this.selectedTimeStamp);
|
|
136
|
-
this.updateSelection(handlePosition, this.selectedTimeStamp);
|
|
137
|
-
this.selectTimeStampCallback(this.selectedTimeStamp);
|
|
138
|
-
};
|
|
139
|
-
PlaybackControls.prototype.clamp = function (number, min, max) {
|
|
140
|
-
var clamped = Math.max(number, min);
|
|
141
|
-
return Math.min(clamped, max);
|
|
142
|
-
};
|
|
143
|
-
PlaybackControls.prototype.onDrag = function (positionX) {
|
|
144
|
-
this.wasPlayingWhenDragStarted = this.wasPlayingWhenDragStarted ||
|
|
145
|
-
(this.playbackInterval !== null);
|
|
146
|
-
this.pause();
|
|
147
|
-
var handlePosition = this.clamp(positionX, 0, this.trackWidth);
|
|
148
|
-
this.selectedTimeStamp = this.timeStampToPosition.invert(handlePosition);
|
|
149
|
-
this.updateSelection(handlePosition, this.selectedTimeStamp);
|
|
150
|
-
};
|
|
151
|
-
PlaybackControls.prototype.onDragEnd = function () {
|
|
152
|
-
this.selectTimeStampCallback(this.selectedTimeStamp);
|
|
153
|
-
if (this.wasPlayingWhenDragStarted) {
|
|
154
|
-
this.play();
|
|
155
|
-
this.wasPlayingWhenDragStarted = false;
|
|
156
|
-
}
|
|
157
|
-
};
|
|
158
|
-
PlaybackControls.prototype.updateSelection = function (handlePositionX, timeStamp) {
|
|
159
|
-
this.track.select('.tsi-left-of-handle')
|
|
160
|
-
.attr('x1', this.trackXOffset)
|
|
161
|
-
.attr('x2', this.trackXOffset + handlePositionX);
|
|
162
|
-
this.track.select('.tsi-right-of-handle')
|
|
163
|
-
.attr('x1', this.trackXOffset + handlePositionX)
|
|
164
|
-
.attr('x2', this.trackXOffset + this.trackWidth);
|
|
165
|
-
this.handleElement
|
|
166
|
-
.attr('cx', this.trackXOffset + handlePositionX);
|
|
167
|
-
this.controlsContainer
|
|
168
|
-
.select('.tsi-playback-timestamp')
|
|
169
|
-
.text(this.timeFormatter(timeStamp));
|
|
170
|
-
};
|
|
171
|
-
return PlaybackControls;
|
|
172
|
-
}(Component));
|
|
173
|
-
var TimeAxis = /** @class */ (function (_super) {
|
|
174
|
-
__extends(TimeAxis, _super);
|
|
175
|
-
function TimeAxis(renderTarget) {
|
|
176
|
-
return _super.call(this, renderTarget) || this;
|
|
177
|
-
}
|
|
178
|
-
TimeAxis.prototype.render = function (options, timeScale) {
|
|
179
|
-
this.chartOptions.setOptions(options);
|
|
180
|
-
this.x = timeScale;
|
|
181
|
-
if (this.chartOptions.xAxisHidden) {
|
|
182
|
-
return;
|
|
183
|
-
}
|
|
184
|
-
var targetElement = d3.select(this.renderTarget);
|
|
185
|
-
targetElement.html('');
|
|
186
|
-
this.chartWidth = targetElement.node().clientWidth;
|
|
187
|
-
this.xAxis = targetElement.append('svg')
|
|
188
|
-
.classed('xAxis', true)
|
|
189
|
-
.data([this.x]);
|
|
190
|
-
this.drawXAxis(0, true, true);
|
|
191
|
-
};
|
|
192
|
-
return TimeAxis;
|
|
193
|
-
}(TemporalXAxisComponent));
|
|
194
|
-
|
|
195
|
-
export { PlaybackControls as P };
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { C as Component } from './Component-DXwYPoSo.js';
|
|
2
|
-
import './Enums-DWpaQlXk.js';
|
|
3
|
-
import './Interfaces-R_1l9lIT.js';
|
|
4
|
-
|
|
5
|
-
interface IPlaybackSettings {
|
|
6
|
-
intervalMillis: number;
|
|
7
|
-
stepSizeMillis: number;
|
|
8
|
-
}
|
|
9
|
-
declare class PlaybackControls extends Component {
|
|
10
|
-
private playbackInterval;
|
|
11
|
-
private playButton;
|
|
12
|
-
private handleElement;
|
|
13
|
-
private controlsContainer;
|
|
14
|
-
private track;
|
|
15
|
-
private trackXOffset;
|
|
16
|
-
private trackYOffset;
|
|
17
|
-
private trackWidth;
|
|
18
|
-
private timeFormatter;
|
|
19
|
-
private selectedTimeStamp;
|
|
20
|
-
private selectTimeStampCallback;
|
|
21
|
-
private timeStampToPosition;
|
|
22
|
-
private playbackSettings;
|
|
23
|
-
private end;
|
|
24
|
-
private wasPlayingWhenDragStarted;
|
|
25
|
-
readonly handleRadius: number;
|
|
26
|
-
readonly minimumPlaybackInterval: number;
|
|
27
|
-
constructor(renderTarget: Element, initialTimeStamp?: Date);
|
|
28
|
-
get currentTimeStamp(): Date;
|
|
29
|
-
render(start: Date, end: Date, onSelectTimeStamp: (d: Date) => {}, options: any, playbackSettings: IPlaybackSettings): void;
|
|
30
|
-
play(): void;
|
|
31
|
-
pause(): void;
|
|
32
|
-
next(): void;
|
|
33
|
-
private clamp;
|
|
34
|
-
private onDrag;
|
|
35
|
-
private onDragEnd;
|
|
36
|
-
private updateSelection;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export { PlaybackControls as default };
|
package/dist/PlaybackControls.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export { P as default } from './PlaybackControls-DbG9gExy.js';
|
|
2
|
-
import './_tslib-BYFmvNeL.js';
|
|
3
|
-
import 'd3';
|
|
4
|
-
import './Component-BgifJdKl.js';
|
|
5
|
-
import './Utils-DDGqSryb.js';
|
|
6
|
-
import 'moment-timezone';
|
|
7
|
-
import './TemporalXAxisComponent-DXmMekYq.js';
|
|
8
|
-
import './ChartVisualizationComponent-CTs5Q_sg.js';
|
|
9
|
-
import './ChartComponent-Dg8P-BTZ.js';
|
|
10
|
-
import './Grid-uoHKTet9.js';
|
|
11
|
-
import 'split.js';
|
|
12
|
-
import './EllipsisMenu-CxJ0LoVm.js';
|
|
13
|
-
import './ChartDataOptions-CNTSB636.js';
|