@internetarchive/histogram-date-range 1.4.1-alpha1 → 1.4.2-alpha-webdev8495.0
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/.editorconfig +29 -29
- package/.eslintrc.js +14 -14
- package/.github/workflows/ci.yml +30 -30
- package/LICENSE +661 -661
- package/README.md +113 -113
- package/demo/index.css +28 -28
- package/demo/index.html +221 -221
- package/dist/demo/js/list-histogram-wrapper.d.ts +20 -0
- package/dist/demo/js/list-histogram-wrapper.js +59 -0
- package/dist/demo/js/list-histogram-wrapper.js.map +1 -0
- package/dist/demo/js/lit-histogram-wrapper.d.ts +21 -0
- package/dist/demo/js/lit-histogram-wrapper.js +73 -0
- package/dist/demo/js/lit-histogram-wrapper.js.map +1 -0
- package/dist/src/histogram-date-range.d.ts +1 -1
- package/dist/src/histogram-date-range.js +8 -12
- package/dist/src/histogram-date-range.js.map +1 -1
- package/dist/test/histogram-date-range.test.js +22 -6
- package/dist/test/histogram-date-range.test.js.map +1 -1
- package/docs/demo/index.css +28 -28
- package/docs/demo/index.html +221 -221
- package/docs/dist/src/histogram-date-range.js +8 -11
- package/package.json +85 -85
- package/snowpack.config.js +10 -10
- package/src/histogram-date-range.ts +8 -13
- package/test/histogram-date-range.test.ts +26 -6
- package/tsconfig.json +21 -21
- package/web-dev-server.config.mjs +28 -28
- package/web-test-runner.config.mjs +29 -29
package/docs/demo/index.html
CHANGED
|
@@ -1,221 +1,221 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
5
|
-
<meta charset="utf-8" />
|
|
6
|
-
<link rel="stylesheet" href="index.css">
|
|
7
|
-
</head>
|
|
8
|
-
|
|
9
|
-
<script type="module">
|
|
10
|
-
import '../dist/src/histogram-date-range.js';
|
|
11
|
-
let eventCount = 0;
|
|
12
|
-
import '../dist/demo/js/app-root.js';
|
|
13
|
-
// listen to events from the component and display the data received from them
|
|
14
|
-
document.addEventListener('histogramDateRangeUpdated', e => {
|
|
15
|
-
document.querySelector('.received-events').innerHTML =
|
|
16
|
-
++eventCount + ': ' + JSON.stringify(e.detail);
|
|
17
|
-
});
|
|
18
|
-
</script>
|
|
19
|
-
<body>
|
|
20
|
-
<pre class="received-events"></pre>
|
|
21
|
-
<div class="container">
|
|
22
|
-
<div class="description">
|
|
23
|
-
histogram inside a lit element
|
|
24
|
-
</div>
|
|
25
|
-
<app-root></app-root>
|
|
26
|
-
|
|
27
|
-
<div class="description">
|
|
28
|
-
pre-selected range with 1000ms debounce delay
|
|
29
|
-
</div>
|
|
30
|
-
<histogram-date-range
|
|
31
|
-
minDate="1400"
|
|
32
|
-
maxDate="2021"
|
|
33
|
-
updateDelay="1000"
|
|
34
|
-
minSelectedDate="1800"
|
|
35
|
-
maxSelectedDate="1900"
|
|
36
|
-
bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
|
|
37
|
-
13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
|
|
38
|
-
47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
|
|
39
|
-
32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
|
|
40
|
-
]"
|
|
41
|
-
></histogram-date-range>
|
|
42
|
-
</div>
|
|
43
|
-
|
|
44
|
-
<div class="container">
|
|
45
|
-
<div class="description">range spanning negative to positive years</div>
|
|
46
|
-
<histogram-date-range
|
|
47
|
-
minDate="-1050" maxDate="2200"
|
|
48
|
-
bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
|
|
49
|
-
13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
|
|
50
|
-
47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
|
|
51
|
-
32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
|
|
52
|
-
]"
|
|
53
|
-
></histogram-date-range>
|
|
54
|
-
</div>
|
|
55
|
-
|
|
56
|
-
<div class="container">
|
|
57
|
-
<div class="description">
|
|
58
|
-
small diff between max and min values
|
|
59
|
-
</div>
|
|
60
|
-
<histogram-date-range
|
|
61
|
-
width="175"
|
|
62
|
-
tooltipwidth="120"
|
|
63
|
-
dateFormat="YYYY"
|
|
64
|
-
updateDelay="1000"
|
|
65
|
-
missingDataMessage="..."
|
|
66
|
-
minSelectedDate="1987"
|
|
67
|
-
maxSelectedDate="2016"
|
|
68
|
-
minDate="1987"
|
|
69
|
-
maxDate="2016"
|
|
70
|
-
bins="[1519,1643,1880,2046,1973,2085,2148,2152,2349,2304,2314,2484,2590,2450,2495,2475,2392,2631,2504,2619,2519,2552,2462,2217,2171,2132,2127,2041,1638,1441]"
|
|
71
|
-
>
|
|
72
|
-
</histogram-date-range>
|
|
73
|
-
</div>
|
|
74
|
-
|
|
75
|
-
<div class="container">
|
|
76
|
-
<div class="description">
|
|
77
|
-
as above, but with linear scaled bars
|
|
78
|
-
</div>
|
|
79
|
-
<histogram-date-range
|
|
80
|
-
width="175"
|
|
81
|
-
tooltipwidth="120"
|
|
82
|
-
dateFormat="YYYY"
|
|
83
|
-
updateDelay="1000"
|
|
84
|
-
missingDataMessage="..."
|
|
85
|
-
barScaling="linear"
|
|
86
|
-
minSelectedDate="1987"
|
|
87
|
-
maxSelectedDate="2016"
|
|
88
|
-
minDate="1987"
|
|
89
|
-
maxDate="2016"
|
|
90
|
-
bins="[1519,1643,1880,2046,1973,2085,2148,2152,2349,2304,2314,2484,2590,2450,2495,2475,2392,2631,2504,2619,2519,2552,2462,2217,2171,2132,2127,2041,1638,1441]"
|
|
91
|
-
>
|
|
92
|
-
</histogram-date-range>
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
<div class="container">
|
|
96
|
-
<div class="description">small year range and few bins</div>
|
|
97
|
-
<histogram-date-range width="175" tooltipwidth="120"
|
|
98
|
-
minDate="2008" maxDate="2016" bins="[76104,866978,1151617,986331,218672,107410,3324]">
|
|
99
|
-
</histogram-date-range>
|
|
100
|
-
</div>
|
|
101
|
-
|
|
102
|
-
<div class="container">
|
|
103
|
-
<div class="description">bins snapped to nearest month</div>
|
|
104
|
-
<histogram-date-range
|
|
105
|
-
width="175"
|
|
106
|
-
tooltipwidth="120"
|
|
107
|
-
dateFormat="YYYY-MM"
|
|
108
|
-
tooltipDateFormat="MMM YYYY"
|
|
109
|
-
binSnapping="month"
|
|
110
|
-
minDate="2009-05"
|
|
111
|
-
maxDate="2014-08"
|
|
112
|
-
bins="[100,5000,2000,100,5000,2000,100,5000,2000,100,5000,2000,100,5000,2000,100]"
|
|
113
|
-
style="--histogramDateRangeInputWidth: 50px;"
|
|
114
|
-
></histogram-date-range>
|
|
115
|
-
</div>
|
|
116
|
-
|
|
117
|
-
<div class="container">
|
|
118
|
-
<div class="description">bins snapped to nearest year</div>
|
|
119
|
-
<histogram-date-range
|
|
120
|
-
width="175"
|
|
121
|
-
dateFormat="YYYY"
|
|
122
|
-
binSnapping="year"
|
|
123
|
-
minDate="2009"
|
|
124
|
-
maxDate="2018"
|
|
125
|
-
bins="[100,1000,10000,100,1000,10000,100,1000,10000,100]"
|
|
126
|
-
></histogram-date-range>
|
|
127
|
-
</div>
|
|
128
|
-
|
|
129
|
-
<div class="container">
|
|
130
|
-
<div class="clipped text-centered">
|
|
131
|
-
<div class="description">inside clipping container</div>
|
|
132
|
-
<histogram-date-range
|
|
133
|
-
width="175"
|
|
134
|
-
dateFormat="MM/YYYY"
|
|
135
|
-
binSnapping="month"
|
|
136
|
-
minDate="01/2000"
|
|
137
|
-
maxDate="12/2005"
|
|
138
|
-
bins="[1,12,2,11,3,10,4,9,5,8,6,7]"
|
|
139
|
-
style="--histogramDateRangeInputWidth: 50px;"
|
|
140
|
-
></histogram-date-range>
|
|
141
|
-
</div>
|
|
142
|
-
</div>
|
|
143
|
-
|
|
144
|
-
<div class="container">
|
|
145
|
-
<div class="description">
|
|
146
|
-
default range with custom styling and date format
|
|
147
|
-
</div>
|
|
148
|
-
<histogram-date-range
|
|
149
|
-
width="300"
|
|
150
|
-
height="50"
|
|
151
|
-
tooltipWidth="140"
|
|
152
|
-
dateFormat="DD MMM YYYY"
|
|
153
|
-
style="
|
|
154
|
-
--histogramDateRangeSliderColor: #d8b384;
|
|
155
|
-
--histogramDateRangeSelectedRangeColor: #f3f0d7;
|
|
156
|
-
--histogramDateRangeTooltipFontFamily: serif;
|
|
157
|
-
--histogramDateRangeInputFontFamily: serif;
|
|
158
|
-
--histogramDateRangeTooltipFontSize: 1rem;
|
|
159
|
-
--histogramDateRangeInputWidth: 85px;
|
|
160
|
-
"
|
|
161
|
-
minDate="05 May 1972"
|
|
162
|
-
maxDate="21 Dec 1980"
|
|
163
|
-
bins="[ 85, 25, 200, 0, 0, 34, 0, 2, 5, 10, 0, 56, 10, 45, 100, 70, 50 ]"
|
|
164
|
-
></histogram-date-range>
|
|
165
|
-
</div>
|
|
166
|
-
|
|
167
|
-
<div class="container">
|
|
168
|
-
<div class="description">loading state toggle</div>
|
|
169
|
-
<histogram-date-range
|
|
170
|
-
id="loading"
|
|
171
|
-
minDate="1900"
|
|
172
|
-
maxDate="2021"
|
|
173
|
-
bins="[
|
|
174
|
-
74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2, 13, 45, 67, 17, 66,
|
|
175
|
-
49, 93, 47, 61, 32, 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
|
|
176
|
-
]"
|
|
177
|
-
></histogram-date-range>
|
|
178
|
-
<button id="loading-toggle">toggle loading</button>
|
|
179
|
-
</div>
|
|
180
|
-
<script>
|
|
181
|
-
document
|
|
182
|
-
.querySelector('#loading-toggle')
|
|
183
|
-
.addEventListener('click', () => {
|
|
184
|
-
const histogram = document.querySelector(
|
|
185
|
-
'histogram-date-range#loading'
|
|
186
|
-
);
|
|
187
|
-
histogram.loading = !histogram.loading;
|
|
188
|
-
});
|
|
189
|
-
</script>
|
|
190
|
-
|
|
191
|
-
<div class="container">
|
|
192
|
-
<div class="description">data set up with js</div>
|
|
193
|
-
<histogram-date-range id="js-setup"></histogram-date-range>
|
|
194
|
-
</div>
|
|
195
|
-
<script>
|
|
196
|
-
document.addEventListener('DOMContentLoaded', function () {
|
|
197
|
-
const histogram = document.querySelector(
|
|
198
|
-
'histogram-date-range#js-setup'
|
|
199
|
-
);
|
|
200
|
-
histogram.minDate = '1950';
|
|
201
|
-
histogram.maxDate = '2000';
|
|
202
|
-
// generate array of [0, 1, 2, ... 49]
|
|
203
|
-
histogram.bins = [...Array(50).keys()];
|
|
204
|
-
});
|
|
205
|
-
</script>
|
|
206
|
-
|
|
207
|
-
<div class="container">
|
|
208
|
-
<div class="description">
|
|
209
|
-
single bin
|
|
210
|
-
</div>
|
|
211
|
-
<histogram-date-range minDate="1926" maxDate="1926" bins="[8]">
|
|
212
|
-
</histogram-date-range>
|
|
213
|
-
</div>
|
|
214
|
-
|
|
215
|
-
<div class="container">
|
|
216
|
-
<div class="description">empty data</div>
|
|
217
|
-
<histogram-date-range missingDataMessage="no data..."></histoghistogram-date-range>
|
|
218
|
-
</div>
|
|
219
|
-
|
|
220
|
-
</body>
|
|
221
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
5
|
+
<meta charset="utf-8" />
|
|
6
|
+
<link rel="stylesheet" href="index.css">
|
|
7
|
+
</head>
|
|
8
|
+
|
|
9
|
+
<script type="module">
|
|
10
|
+
import '../dist/src/histogram-date-range.js';
|
|
11
|
+
let eventCount = 0;
|
|
12
|
+
import '../dist/demo/js/app-root.js';
|
|
13
|
+
// listen to events from the component and display the data received from them
|
|
14
|
+
document.addEventListener('histogramDateRangeUpdated', e => {
|
|
15
|
+
document.querySelector('.received-events').innerHTML =
|
|
16
|
+
++eventCount + ': ' + JSON.stringify(e.detail);
|
|
17
|
+
});
|
|
18
|
+
</script>
|
|
19
|
+
<body>
|
|
20
|
+
<pre class="received-events"></pre>
|
|
21
|
+
<div class="container">
|
|
22
|
+
<div class="description">
|
|
23
|
+
histogram inside a lit element
|
|
24
|
+
</div>
|
|
25
|
+
<app-root></app-root>
|
|
26
|
+
|
|
27
|
+
<div class="description">
|
|
28
|
+
pre-selected range with 1000ms debounce delay
|
|
29
|
+
</div>
|
|
30
|
+
<histogram-date-range
|
|
31
|
+
minDate="1400"
|
|
32
|
+
maxDate="2021"
|
|
33
|
+
updateDelay="1000"
|
|
34
|
+
minSelectedDate="1800"
|
|
35
|
+
maxSelectedDate="1900"
|
|
36
|
+
bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
|
|
37
|
+
13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
|
|
38
|
+
47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
|
|
39
|
+
32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
|
|
40
|
+
]"
|
|
41
|
+
></histogram-date-range>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div class="container">
|
|
45
|
+
<div class="description">range spanning negative to positive years</div>
|
|
46
|
+
<histogram-date-range
|
|
47
|
+
minDate="-1050" maxDate="2200"
|
|
48
|
+
bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
|
|
49
|
+
13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
|
|
50
|
+
47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
|
|
51
|
+
32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
|
|
52
|
+
]"
|
|
53
|
+
></histogram-date-range>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<div class="container">
|
|
57
|
+
<div class="description">
|
|
58
|
+
small diff between max and min values
|
|
59
|
+
</div>
|
|
60
|
+
<histogram-date-range
|
|
61
|
+
width="175"
|
|
62
|
+
tooltipwidth="120"
|
|
63
|
+
dateFormat="YYYY"
|
|
64
|
+
updateDelay="1000"
|
|
65
|
+
missingDataMessage="..."
|
|
66
|
+
minSelectedDate="1987"
|
|
67
|
+
maxSelectedDate="2016"
|
|
68
|
+
minDate="1987"
|
|
69
|
+
maxDate="2016"
|
|
70
|
+
bins="[1519,1643,1880,2046,1973,2085,2148,2152,2349,2304,2314,2484,2590,2450,2495,2475,2392,2631,2504,2619,2519,2552,2462,2217,2171,2132,2127,2041,1638,1441]"
|
|
71
|
+
>
|
|
72
|
+
</histogram-date-range>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<div class="container">
|
|
76
|
+
<div class="description">
|
|
77
|
+
as above, but with linear scaled bars
|
|
78
|
+
</div>
|
|
79
|
+
<histogram-date-range
|
|
80
|
+
width="175"
|
|
81
|
+
tooltipwidth="120"
|
|
82
|
+
dateFormat="YYYY"
|
|
83
|
+
updateDelay="1000"
|
|
84
|
+
missingDataMessage="..."
|
|
85
|
+
barScaling="linear"
|
|
86
|
+
minSelectedDate="1987"
|
|
87
|
+
maxSelectedDate="2016"
|
|
88
|
+
minDate="1987"
|
|
89
|
+
maxDate="2016"
|
|
90
|
+
bins="[1519,1643,1880,2046,1973,2085,2148,2152,2349,2304,2314,2484,2590,2450,2495,2475,2392,2631,2504,2619,2519,2552,2462,2217,2171,2132,2127,2041,1638,1441]"
|
|
91
|
+
>
|
|
92
|
+
</histogram-date-range>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div class="container">
|
|
96
|
+
<div class="description">small year range and few bins</div>
|
|
97
|
+
<histogram-date-range width="175" tooltipwidth="120"
|
|
98
|
+
minDate="2008" maxDate="2016" bins="[76104,866978,1151617,986331,218672,107410,3324]">
|
|
99
|
+
</histogram-date-range>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<div class="container">
|
|
103
|
+
<div class="description">bins snapped to nearest month</div>
|
|
104
|
+
<histogram-date-range
|
|
105
|
+
width="175"
|
|
106
|
+
tooltipwidth="120"
|
|
107
|
+
dateFormat="YYYY-MM"
|
|
108
|
+
tooltipDateFormat="MMM YYYY"
|
|
109
|
+
binSnapping="month"
|
|
110
|
+
minDate="2009-05"
|
|
111
|
+
maxDate="2014-08"
|
|
112
|
+
bins="[100,5000,2000,100,5000,2000,100,5000,2000,100,5000,2000,100,5000,2000,100]"
|
|
113
|
+
style="--histogramDateRangeInputWidth: 50px;"
|
|
114
|
+
></histogram-date-range>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<div class="container">
|
|
118
|
+
<div class="description">bins snapped to nearest year</div>
|
|
119
|
+
<histogram-date-range
|
|
120
|
+
width="175"
|
|
121
|
+
dateFormat="YYYY"
|
|
122
|
+
binSnapping="year"
|
|
123
|
+
minDate="2009"
|
|
124
|
+
maxDate="2018"
|
|
125
|
+
bins="[100,1000,10000,100,1000,10000,100,1000,10000,100]"
|
|
126
|
+
></histogram-date-range>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div class="container">
|
|
130
|
+
<div class="clipped text-centered">
|
|
131
|
+
<div class="description">inside clipping container</div>
|
|
132
|
+
<histogram-date-range
|
|
133
|
+
width="175"
|
|
134
|
+
dateFormat="MM/YYYY"
|
|
135
|
+
binSnapping="month"
|
|
136
|
+
minDate="01/2000"
|
|
137
|
+
maxDate="12/2005"
|
|
138
|
+
bins="[1,12,2,11,3,10,4,9,5,8,6,7]"
|
|
139
|
+
style="--histogramDateRangeInputWidth: 50px;"
|
|
140
|
+
></histogram-date-range>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<div class="container">
|
|
145
|
+
<div class="description">
|
|
146
|
+
default range with custom styling and date format
|
|
147
|
+
</div>
|
|
148
|
+
<histogram-date-range
|
|
149
|
+
width="300"
|
|
150
|
+
height="50"
|
|
151
|
+
tooltipWidth="140"
|
|
152
|
+
dateFormat="DD MMM YYYY"
|
|
153
|
+
style="
|
|
154
|
+
--histogramDateRangeSliderColor: #d8b384;
|
|
155
|
+
--histogramDateRangeSelectedRangeColor: #f3f0d7;
|
|
156
|
+
--histogramDateRangeTooltipFontFamily: serif;
|
|
157
|
+
--histogramDateRangeInputFontFamily: serif;
|
|
158
|
+
--histogramDateRangeTooltipFontSize: 1rem;
|
|
159
|
+
--histogramDateRangeInputWidth: 85px;
|
|
160
|
+
"
|
|
161
|
+
minDate="05 May 1972"
|
|
162
|
+
maxDate="21 Dec 1980"
|
|
163
|
+
bins="[ 85, 25, 200, 0, 0, 34, 0, 2, 5, 10, 0, 56, 10, 45, 100, 70, 50 ]"
|
|
164
|
+
></histogram-date-range>
|
|
165
|
+
</div>
|
|
166
|
+
|
|
167
|
+
<div class="container">
|
|
168
|
+
<div class="description">loading state toggle</div>
|
|
169
|
+
<histogram-date-range
|
|
170
|
+
id="loading"
|
|
171
|
+
minDate="1900"
|
|
172
|
+
maxDate="2021"
|
|
173
|
+
bins="[
|
|
174
|
+
74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2, 13, 45, 67, 17, 66,
|
|
175
|
+
49, 93, 47, 61, 32, 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
|
|
176
|
+
]"
|
|
177
|
+
></histogram-date-range>
|
|
178
|
+
<button id="loading-toggle">toggle loading</button>
|
|
179
|
+
</div>
|
|
180
|
+
<script>
|
|
181
|
+
document
|
|
182
|
+
.querySelector('#loading-toggle')
|
|
183
|
+
.addEventListener('click', () => {
|
|
184
|
+
const histogram = document.querySelector(
|
|
185
|
+
'histogram-date-range#loading'
|
|
186
|
+
);
|
|
187
|
+
histogram.loading = !histogram.loading;
|
|
188
|
+
});
|
|
189
|
+
</script>
|
|
190
|
+
|
|
191
|
+
<div class="container">
|
|
192
|
+
<div class="description">data set up with js</div>
|
|
193
|
+
<histogram-date-range id="js-setup"></histogram-date-range>
|
|
194
|
+
</div>
|
|
195
|
+
<script>
|
|
196
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
197
|
+
const histogram = document.querySelector(
|
|
198
|
+
'histogram-date-range#js-setup'
|
|
199
|
+
);
|
|
200
|
+
histogram.minDate = '1950';
|
|
201
|
+
histogram.maxDate = '2000';
|
|
202
|
+
// generate array of [0, 1, 2, ... 49]
|
|
203
|
+
histogram.bins = [...Array(50).keys()];
|
|
204
|
+
});
|
|
205
|
+
</script>
|
|
206
|
+
|
|
207
|
+
<div class="container">
|
|
208
|
+
<div class="description">
|
|
209
|
+
single bin
|
|
210
|
+
</div>
|
|
211
|
+
<histogram-date-range minDate="1926" maxDate="1926" bins="[8]">
|
|
212
|
+
</histogram-date-range>
|
|
213
|
+
</div>
|
|
214
|
+
|
|
215
|
+
<div class="container">
|
|
216
|
+
<div class="description">empty data</div>
|
|
217
|
+
<histogram-date-range missingDataMessage="no data..."></histoghistogram-date-range>
|
|
218
|
+
</div>
|
|
219
|
+
|
|
220
|
+
</body>
|
|
221
|
+
</html>
|
|
@@ -134,7 +134,6 @@ export let HistogramDateRange = class extends LitElement {
|
|
|
134
134
|
this._minDateMS = this.snapTimestamp(this.getMSFromString(this.minDate));
|
|
135
135
|
this._maxDateMS = this.snapTimestamp(this.getMSFromString(this.maxDate) + this.snapInterval) + this.snapEndOffset;
|
|
136
136
|
this._binWidth = this._histWidth / this._numBins;
|
|
137
|
-
this._previousDateRange = this.currentDateRangeString;
|
|
138
137
|
this._histData = this.calculateHistData();
|
|
139
138
|
this.minSelectedDate = this.minSelectedDate ? this.minSelectedDate : this.minDate;
|
|
140
139
|
this.maxSelectedDate = this.maxSelectedDate ? this.maxSelectedDate : this.maxDate;
|
|
@@ -600,19 +599,17 @@ export let HistogramDateRange = class extends LitElement {
|
|
|
600
599
|
<div id="tooltip" style=${styles} popover>${this._tooltipContent}</div>
|
|
601
600
|
`;
|
|
602
601
|
}
|
|
603
|
-
get
|
|
604
|
-
let rangeText;
|
|
602
|
+
get histogramAccessibilityTemplate() {
|
|
603
|
+
let rangeText = "";
|
|
605
604
|
if (this.minSelectedDate && this.maxSelectedDate) {
|
|
606
|
-
rangeText = `from ${this.minSelectedDate} to ${this.maxSelectedDate}`;
|
|
605
|
+
rangeText = ` from ${this.minSelectedDate} to ${this.maxSelectedDate}`;
|
|
607
606
|
} else if (this.minSelectedDate) {
|
|
608
|
-
rangeText = `from ${this.minSelectedDate}`;
|
|
607
|
+
rangeText = ` from ${this.minSelectedDate}`;
|
|
609
608
|
} else if (this.maxSelectedDate) {
|
|
610
|
-
rangeText = `up to ${this.maxSelectedDate}`;
|
|
611
|
-
} else {
|
|
612
|
-
rangeText = "for all available dates";
|
|
609
|
+
rangeText = ` up to ${this.maxSelectedDate}`;
|
|
613
610
|
}
|
|
614
|
-
const titleText = `Filter results
|
|
615
|
-
const descText = `This
|
|
611
|
+
const titleText = `Filter results for dates${rangeText}`;
|
|
612
|
+
const descText = `This histogram shows the distribution of dates${rangeText}`;
|
|
616
613
|
return html`<title id="histogram-title">${titleText}</title
|
|
617
614
|
><desc id="histogram-desc">${descText}</desc>`;
|
|
618
615
|
}
|
|
@@ -653,7 +650,7 @@ export let HistogramDateRange = class extends LitElement {
|
|
|
653
650
|
aria-labelledby="histogram-title histogram-desc"
|
|
654
651
|
@pointerleave="${this.drop}"
|
|
655
652
|
>
|
|
656
|
-
${this.
|
|
653
|
+
${this.histogramAccessibilityTemplate} ${this.selectedRangeTemplate}
|
|
657
654
|
<svg id="histogram">${this.histogramTemplate}</svg>
|
|
658
655
|
${this.minSliderTemplate} ${this.maxSliderTemplate}
|
|
659
656
|
</svg>
|
package/package.json
CHANGED
|
@@ -1,85 +1,85 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@internetarchive/histogram-date-range",
|
|
3
|
-
"version": "1.4.
|
|
4
|
-
"description": "Internet Archive histogram date range picker",
|
|
5
|
-
"license": "AGPL-3.0-only",
|
|
6
|
-
"main": "dist/index.js",
|
|
7
|
-
"module": "dist/index.js",
|
|
8
|
-
"types": "dist/index.d.ts",
|
|
9
|
-
"publishConfig": {
|
|
10
|
-
"access": "public"
|
|
11
|
-
},
|
|
12
|
-
"scripts": {
|
|
13
|
-
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
|
14
|
-
"build": "snowpack build && touch docs/.nojekyll",
|
|
15
|
-
"prepublish": "tsc",
|
|
16
|
-
"prepare": "npm run build",
|
|
17
|
-
"lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
|
|
18
|
-
"format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
|
|
19
|
-
"test": "tsc && wtr --coverage",
|
|
20
|
-
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
21
|
-
},
|
|
22
|
-
"dependencies": {
|
|
23
|
-
"@internetarchive/ia-activity-indicator": "^0.0.6",
|
|
24
|
-
"dayjs": "^1.11.13",
|
|
25
|
-
"lit": "^2.8.0"
|
|
26
|
-
},
|
|
27
|
-
"devDependencies": {
|
|
28
|
-
"@open-wc/eslint-config": "^12.0.3",
|
|
29
|
-
"@open-wc/testing": "^4.0.0",
|
|
30
|
-
"@types/mocha": "^10.0.10",
|
|
31
|
-
"@typescript-eslint/eslint-plugin": "^8.42.0",
|
|
32
|
-
"@typescript-eslint/parser": "^8.42.0",
|
|
33
|
-
"@web/dev-server": "^0.4.6",
|
|
34
|
-
"@web/test-runner": "^0.20.0",
|
|
35
|
-
"concurrently": "^9.1.2",
|
|
36
|
-
"eslint": "^8.7.0",
|
|
37
|
-
"eslint-config-prettier": "^8.3.0",
|
|
38
|
-
"eslint-plugin-html": "^8.1.2",
|
|
39
|
-
"husky": "^4.3.8",
|
|
40
|
-
"lint-staged": "^12.2.2",
|
|
41
|
-
"prettier": "^2.5.1",
|
|
42
|
-
"snowpack": "^3.8.8",
|
|
43
|
-
"tslib": "^2.8.1",
|
|
44
|
-
"typescript": "^5.8.2"
|
|
45
|
-
},
|
|
46
|
-
"eslintConfig": {
|
|
47
|
-
"parser": "@typescript-eslint/parser",
|
|
48
|
-
"extends": [
|
|
49
|
-
"@open-wc/eslint-config",
|
|
50
|
-
"eslint-config-prettier"
|
|
51
|
-
],
|
|
52
|
-
"plugins": [
|
|
53
|
-
"@typescript-eslint"
|
|
54
|
-
],
|
|
55
|
-
"rules": {
|
|
56
|
-
"no-unused-vars": "off",
|
|
57
|
-
"@typescript-eslint/no-unused-vars": [
|
|
58
|
-
"error"
|
|
59
|
-
],
|
|
60
|
-
"import/no-unresolved": "off",
|
|
61
|
-
"import/extensions": [
|
|
62
|
-
"error",
|
|
63
|
-
"always",
|
|
64
|
-
{
|
|
65
|
-
"ignorePackages": true
|
|
66
|
-
}
|
|
67
|
-
]
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
|
-
"prettier": {
|
|
71
|
-
"singleQuote": true,
|
|
72
|
-
"arrowParens": "avoid"
|
|
73
|
-
},
|
|
74
|
-
"husky": {
|
|
75
|
-
"hooks": {
|
|
76
|
-
"pre-commit": "lint-staged"
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
"lint-staged": {
|
|
80
|
-
"*.ts": [
|
|
81
|
-
"eslint --fix",
|
|
82
|
-
"prettier --write"
|
|
83
|
-
]
|
|
84
|
-
}
|
|
85
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@internetarchive/histogram-date-range",
|
|
3
|
+
"version": "1.4.2-alpha-webdev8495.0",
|
|
4
|
+
"description": "Internet Archive histogram date range picker",
|
|
5
|
+
"license": "AGPL-3.0-only",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"module": "dist/index.js",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"publishConfig": {
|
|
10
|
+
"access": "public"
|
|
11
|
+
},
|
|
12
|
+
"scripts": {
|
|
13
|
+
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
|
14
|
+
"build": "snowpack build && touch docs/.nojekyll",
|
|
15
|
+
"prepublish": "tsc",
|
|
16
|
+
"prepare": "npm run build",
|
|
17
|
+
"lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
|
|
18
|
+
"format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
|
|
19
|
+
"test": "tsc && wtr --coverage",
|
|
20
|
+
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
21
|
+
},
|
|
22
|
+
"dependencies": {
|
|
23
|
+
"@internetarchive/ia-activity-indicator": "^0.0.6",
|
|
24
|
+
"dayjs": "^1.11.13",
|
|
25
|
+
"lit": "^2.8.0"
|
|
26
|
+
},
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"@open-wc/eslint-config": "^12.0.3",
|
|
29
|
+
"@open-wc/testing": "^4.0.0",
|
|
30
|
+
"@types/mocha": "^10.0.10",
|
|
31
|
+
"@typescript-eslint/eslint-plugin": "^8.42.0",
|
|
32
|
+
"@typescript-eslint/parser": "^8.42.0",
|
|
33
|
+
"@web/dev-server": "^0.4.6",
|
|
34
|
+
"@web/test-runner": "^0.20.0",
|
|
35
|
+
"concurrently": "^9.1.2",
|
|
36
|
+
"eslint": "^8.7.0",
|
|
37
|
+
"eslint-config-prettier": "^8.3.0",
|
|
38
|
+
"eslint-plugin-html": "^8.1.2",
|
|
39
|
+
"husky": "^4.3.8",
|
|
40
|
+
"lint-staged": "^12.2.2",
|
|
41
|
+
"prettier": "^2.5.1",
|
|
42
|
+
"snowpack": "^3.8.8",
|
|
43
|
+
"tslib": "^2.8.1",
|
|
44
|
+
"typescript": "^5.8.2"
|
|
45
|
+
},
|
|
46
|
+
"eslintConfig": {
|
|
47
|
+
"parser": "@typescript-eslint/parser",
|
|
48
|
+
"extends": [
|
|
49
|
+
"@open-wc/eslint-config",
|
|
50
|
+
"eslint-config-prettier"
|
|
51
|
+
],
|
|
52
|
+
"plugins": [
|
|
53
|
+
"@typescript-eslint"
|
|
54
|
+
],
|
|
55
|
+
"rules": {
|
|
56
|
+
"no-unused-vars": "off",
|
|
57
|
+
"@typescript-eslint/no-unused-vars": [
|
|
58
|
+
"error"
|
|
59
|
+
],
|
|
60
|
+
"import/no-unresolved": "off",
|
|
61
|
+
"import/extensions": [
|
|
62
|
+
"error",
|
|
63
|
+
"always",
|
|
64
|
+
{
|
|
65
|
+
"ignorePackages": true
|
|
66
|
+
}
|
|
67
|
+
]
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
"prettier": {
|
|
71
|
+
"singleQuote": true,
|
|
72
|
+
"arrowParens": "avoid"
|
|
73
|
+
},
|
|
74
|
+
"husky": {
|
|
75
|
+
"hooks": {
|
|
76
|
+
"pre-commit": "lint-staged"
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
"lint-staged": {
|
|
80
|
+
"*.ts": [
|
|
81
|
+
"eslint --fix",
|
|
82
|
+
"prettier --write"
|
|
83
|
+
]
|
|
84
|
+
}
|
|
85
|
+
}
|