1 | import { a as __extends } from './tslib.es6-863e3717.js';
|
2 | import { U as Utils } from './Utils-5f9f1f09.js';
|
3 | import { select, scalePoint, drag, event } from 'd3';
|
4 | import { C as Component } from './Component-5b66527b.js';
|
5 |
|
6 | var Slider = (function (_super) {
|
7 | __extends(Slider, _super);
|
8 | function Slider(renderTarget) {
|
9 | var _this = _super.call(this, renderTarget) || this;
|
10 | _this.sliderSVG = null;
|
11 | _this.sliderTextDiv = null;
|
12 | _this.margins = {
|
13 | left: 60,
|
14 | right: 60
|
15 | };
|
16 | _this.height = 55;
|
17 | _this.setSelectedLabelAndGetLabelAction = function (h, useFirstValue) {
|
18 | if (useFirstValue === void 0) { useFirstValue = false; }
|
19 |
|
20 | var reduceFirstValue = useFirstValue ? _this.data[0] : { label: _this.selectedLabel, action: function () { } };
|
21 | var newSelectedLabel = _this.data.reduce(function (prev, curr) {
|
22 | var currDiff = Math.abs(_this.getXPositionOfLabel(curr.label) - h);
|
23 | var prevDiff = Math.abs(_this.getXPositionOfLabel(prev.label) - h);
|
24 | return (currDiff < prevDiff) ? curr : prev;
|
25 | }, reduceFirstValue);
|
26 | _this.selectedLabel = (newSelectedLabel != null) ? newSelectedLabel.label : _this.selectedLabel;
|
27 | return newSelectedLabel;
|
28 | };
|
29 | _this.setSliderTextDivLabel = function () {
|
30 | _this.sliderTextDiv.attr("aria-label", function () {
|
31 | return _this.getString("Currently displayed time is") + ' ' + _this.selectedLabel + ". " +
|
32 | _this.getString("Left arrow to go back in time") + ", " + _this.getString("right arrow to go forward");
|
33 | });
|
34 | };
|
35 | return _this;
|
36 | }
|
37 | Slider.prototype.Slider = function () {
|
38 | };
|
39 | Slider.prototype.getXPositionOfLabel = function (label) {
|
40 | if (this.data.map(function (d) { return d.label; }).indexOf(label) != -1) {
|
41 | return this.xScale(label);
|
42 | }
|
43 |
|
44 | if ((Utils.parseTimeInput(label) > -1) && this.isAscendingTimePeriods && this.data.length > 1) {
|
45 | var labelMillis = Utils.parseTimeInput(label);
|
46 | for (var i = 0; i < this.data.length; i++) {
|
47 | if (Utils.parseTimeInput(this.data[i].label) > labelMillis) {
|
48 | return (this.xScale(this.data[i].label) + this.xScale(this.data[Math.max(i - 1, 0)].label)) / 2;
|
49 | }
|
50 | }
|
51 | return this.xScale(this.data[this.data.length - 1].label);
|
52 | }
|
53 | return 0;
|
54 | };
|
55 | Slider.prototype.determineIfAscendingTimePeriods = function () {
|
56 | var left = this.data.length > 0 ? Utils.parseTimeInput(this.data[0].label) : -1;
|
57 | var isAscending = left !== -1;
|
58 | for (var i = 0; isAscending && i < this.data.length - 1; i++) {
|
59 | isAscending = left < (left = Utils.parseTimeInput(this.data[i + 1].label));
|
60 | }
|
61 | return isAscending;
|
62 | };
|
63 | Slider.prototype.render = function (data, options, width, selectedLabel) {
|
64 | var _this = this;
|
65 | if (selectedLabel === void 0) { selectedLabel = null; }
|
66 | this.chartOptions.setOptions(options);
|
67 | this.data = data;
|
68 | this.isAscendingTimePeriods = this.determineIfAscendingTimePeriods();
|
69 | this.width = width;
|
70 | var marginsTotal = this.margins.left + this.margins.right;
|
71 | this.sliderWidth = width - marginsTotal;
|
72 | var targetElement = select(this.renderTarget);
|
73 | if (targetElement.style("position") == "static")
|
74 | targetElement.style("position", "relative");
|
75 | if (selectedLabel)
|
76 | this.selectedLabel = selectedLabel;
|
77 | this.xScale = scalePoint()
|
78 | .domain(data.map(function (d) { return d.label; }))
|
79 | .range([0, this.sliderWidth]);
|
80 | width = Math.max(width, marginsTotal);
|
81 | var self = this;
|
82 | if (this.sliderSVG == null) {
|
83 | this.sliderSVG = targetElement.append("svg")
|
84 | .attr("class", "tsi-sliderComponent");
|
85 | var slider = this.sliderSVG.append("g")
|
86 | .attr("class", "slider tsi-sliderG");
|
87 | slider.append("line")
|
88 | .attr("class", "slider-track tsi-sliderTrack")
|
89 | .select(function () { return this.parentNode.appendChild(this.cloneNode(true)); })
|
90 | .attr("class", "track-overlay tsi-sliderTrackOverlay")
|
91 | .call(drag()
|
92 | .on("start.interrupt", function () { slider.interrupt(); })
|
93 | .on("start drag", function (d) {
|
94 | self.onDrag(event.x);
|
95 | })
|
96 | .on("end", function (d) {
|
97 | self.onDragEnd(event.x);
|
98 | }));
|
99 | slider.insert("circle", ".track-overlay")
|
100 | .attr("class", "handle tsi-sliderHandle")
|
101 | .attr("r", 6);
|
102 | this.sliderTextDiv = targetElement.append("div")
|
103 | .attr("class", "tsi-sliderLabel")
|
104 | .attr("tabindex", 0)
|
105 | .attr("aria-label", selectedLabel)
|
106 | .on("keydown", function () {
|
107 | if (event.keyCode == 37) {
|
108 | _this.moveLeft();
|
109 | }
|
110 | if (event.keyCode == 39) {
|
111 | _this.moveRight();
|
112 | }
|
113 | });
|
114 | }
|
115 | this.themify(this.sliderSVG, this.chartOptions.theme);
|
116 | this.sliderSVG.attr("width", width + "px");
|
117 | var slider = this.sliderSVG.select(".tsi-sliderG")
|
118 | .attr("transform", "translate(" + this.margins.left + "," + (this.height / 2) + ")");
|
119 | slider.select(".tsi-sliderTrack")
|
120 | .attr("x1", 0)
|
121 | .attr("x2", this.sliderWidth)
|
122 | .attr("y1", 0)
|
123 | .attr("y2", 0);
|
124 | slider.select(".tsi-sliderTrackOverlay")
|
125 | .attr("x1", -20)
|
126 | .attr("x2", this.sliderWidth + 20)
|
127 | .attr("y1", 0)
|
128 | .attr("y2", 0);
|
129 | this.setStateFromLabel();
|
130 | };
|
131 | Slider.prototype.remove = function () {
|
132 | if (this.sliderSVG)
|
133 | this.sliderSVG.remove();
|
134 | this.sliderSVG = null;
|
135 | if (this.sliderTextDiv)
|
136 | this.sliderTextDiv.remove();
|
137 | };
|
138 | Slider.prototype.onDrag = function (h) {
|
139 |
|
140 | var newSelectedLabel = this.setSelectedLabelAndGetLabelAction(h);
|
141 | if (!this.chartOptions.throttleSlider) {
|
142 | newSelectedLabel.action(newSelectedLabel.label);
|
143 | }
|
144 | this.setStateFromLabel();
|
145 | };
|
146 | Slider.prototype.onDragEnd = function (h) {
|
147 | if (this.chartOptions.throttleSlider) {
|
148 | var newSelectedLabel = this.setSelectedLabelAndGetLabelAction(h, true);
|
149 | newSelectedLabel.action(newSelectedLabel.label);
|
150 | }
|
151 | };
|
152 |
|
153 | Slider.prototype.setStateFromLabel = function () {
|
154 | this.sliderSVG.select(".handle").attr("cx", this.getXPositionOfLabel(this.selectedLabel));
|
155 | this.sliderTextDiv.text(this.selectedLabel);
|
156 | this.setSliderTextDivLabel();
|
157 |
|
158 | var centerDivOffset = this.sliderTextDiv.node().getBoundingClientRect().width / 2;
|
159 | this.sliderTextDiv.style("right", (this.width - (this.margins.right + this.getXPositionOfLabel(this.selectedLabel))) - centerDivOffset + "px");
|
160 | };
|
161 | Slider.prototype.moveLeft = function () {
|
162 | for (var i = 0; i < this.data.length; i++) {
|
163 | if (this.data[i].label == this.selectedLabel) {
|
164 | var newI = Math.max(0, i - 1);
|
165 | this.selectedLabel = this.data[newI].label;
|
166 | this.data[newI].action(this.selectedLabel);
|
167 | this.setStateFromLabel();
|
168 | return;
|
169 | }
|
170 | }
|
171 | };
|
172 | Slider.prototype.moveRight = function () {
|
173 | for (var i = 0; i < this.data.length; i++) {
|
174 | if (this.data[i].label == this.selectedLabel) {
|
175 | var newI = Math.min(this.data.length - 1, i + 1);
|
176 | this.selectedLabel = this.data[newI].label;
|
177 | this.data[newI].action(this.selectedLabel);
|
178 | this.setStateFromLabel();
|
179 | return;
|
180 | }
|
181 | }
|
182 | };
|
183 | return Slider;
|
184 | }(Component));
|
185 |
|
186 | export { Slider as S };
|