@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.
Files changed (28) hide show
  1. package/.editorconfig +29 -29
  2. package/.eslintrc.js +14 -14
  3. package/.github/workflows/ci.yml +30 -30
  4. package/LICENSE +661 -661
  5. package/README.md +113 -113
  6. package/demo/index.css +28 -28
  7. package/demo/index.html +221 -221
  8. package/dist/demo/js/list-histogram-wrapper.d.ts +20 -0
  9. package/dist/demo/js/list-histogram-wrapper.js +59 -0
  10. package/dist/demo/js/list-histogram-wrapper.js.map +1 -0
  11. package/dist/demo/js/lit-histogram-wrapper.d.ts +21 -0
  12. package/dist/demo/js/lit-histogram-wrapper.js +73 -0
  13. package/dist/demo/js/lit-histogram-wrapper.js.map +1 -0
  14. package/dist/src/histogram-date-range.d.ts +1 -1
  15. package/dist/src/histogram-date-range.js +8 -12
  16. package/dist/src/histogram-date-range.js.map +1 -1
  17. package/dist/test/histogram-date-range.test.js +22 -6
  18. package/dist/test/histogram-date-range.test.js.map +1 -1
  19. package/docs/demo/index.css +28 -28
  20. package/docs/demo/index.html +221 -221
  21. package/docs/dist/src/histogram-date-range.js +8 -11
  22. package/package.json +85 -85
  23. package/snowpack.config.js +10 -10
  24. package/src/histogram-date-range.ts +8 -13
  25. package/test/histogram-date-range.test.ts +26 -6
  26. package/tsconfig.json +21 -21
  27. package/web-dev-server.config.mjs +28 -28
  28. package/web-test-runner.config.mjs +29 -29
package/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>
package/dist/demo/js/list-histogram-wrapper.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import { LitElement, TemplateResult } from 'lit';
2
+ import '../../src/histogram-date-range';
3
+ interface DataSource {
4
+ minDate: unknown;
5
+ maxDate: unknown;
6
+ minSelectedDate: unknown;
7
+ maxSelectedDate: unknown;
8
+ bins: number[];
9
+ barScalingFunction?: (input: number) => number;
10
+ }
11
+ /**
12
+ * This is mainly to test the histogram-date-range within
13
+ * a lit-element.
14
+ */
15
+ export declare class LitHistogramWrapper extends LitElement {
16
+ dataSource: DataSource;
17
+ render(): TemplateResult;
18
+ private randomize;
19
+ }
20
+ export {};
package/dist/demo/js/list-histogram-wrapper.js ADDED
@@ -0,0 +1,59 @@
1
+ import { __decorate } from "tslib";
2
+ import { LitElement, html, nothing } from 'lit';
3
+ import { customElement, state } from 'lit/decorators.js';
4
+ import '../../src/histogram-date-range';
5
+ /**
6
+ * This is mainly to test the histogram-date-range within
7
+ * a lit-element.
8
+ */
9
+ let LitHistogramWrapper = class LitHistogramWrapper extends LitElement {
10
+ constructor() {
11
+ super(...arguments);
12
+ this.dataSource = {
13
+ minDate: 1955,
14
+ maxDate: 2000,
15
+ minSelectedDate: 1955,
16
+ maxSelectedDate: 2000,
17
+ bins: [
18
+ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
19
+ ],
20
+ };
21
+ }
22
+ render() {
23
+ var _a, _b, _c, _d, _e, _f, _g;
24
+ return html `
25
+ <histogram-date-range
26
+ .minDate=${(_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.minDate}
27
+ .maxDate=${(_b = this.dataSource) === null || _b === void 0 ? void 0 : _b.maxDate}
28
+ .minSelectedDate=${(_c = this.dataSource) === null || _c === void 0 ? void 0 : _c.minSelectedDate}
29
+ .maxSelectedDate=${(_d = this.dataSource) === null || _d === void 0 ? void 0 : _d.maxSelectedDate}
30
+ .updateDelay=${1000}
31
+ .bins=${(_e = this.dataSource) === null || _e === void 0 ? void 0 : _e.bins}
32
+ .barScalingFunction=${(_g = (_f = this.dataSource) === null || _f === void 0 ? void 0 : _f.barScalingFunction) !== null && _g !== void 0 ? _g : nothing}
33
+ ></histogram-date-range>
34
+
35
+ <button @click=${this.randomize}>Randomize</button>
36
+ `;
37
+ }
38
+ randomize() {
39
+ const minDate = Math.round(Math.random() * 1000);
40
+ const maxDate = minDate + Math.round(Math.random() * 1000);
41
+ // generate random bins
42
+ const bins = Array.from({ length: 20 }, () => Math.floor(Math.random() * minDate));
43
+ this.dataSource = {
44
+ minDate,
45
+ maxDate,
46
+ minSelectedDate: minDate,
47
+ maxSelectedDate: maxDate,
48
+ bins: bins,
49
+ };
50
+ }
51
+ };
52
+ __decorate([
53
+ state()
54
+ ], LitHistogramWrapper.prototype, "dataSource", void 0);
55
+ LitHistogramWrapper = __decorate([
56
+ customElement('lit-histogram-wrapper')
57
+ ], LitHistogramWrapper);
58
+ export { LitHistogramWrapper };
59
+ //# sourceMappingURL=list-histogram-wrapper.js.map
package/dist/demo/js/list-histogram-wrapper.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"list-histogram-wrapper.js","sourceRoot":"","sources":["../../../demo/js/list-histogram-wrapper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,gCAAgC,CAAC;AAWxC;;;GAGG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QACI,eAAU,GAAe;YAChC,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,IAAI;YACrB,eAAe,EAAE,IAAI;YACrB,IAAI,EAAE;gBACJ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;aACtE;SACF,CAAC;IAiCJ,CAAC;IA/BC,MAAM;;QACJ,OAAO,IAAI,CAAA;;mBAEI,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;mBACxB,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;2BAChB,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;2BAChC,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;uBACpC,IAAI;gBACX,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI;8BACP,MAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,kBAAkB,mCAAI,OAAO;;;uBAGrD,IAAI,CAAC,SAAS;KAChC,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QAC3D,uBAAuB;QACvB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,CAC3C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,CACpC,CAAC;QACF,IAAI,CAAC,UAAU,GAAG;YAChB,OAAO;YACP,OAAO;YACP,eAAe,EAAE,OAAO;YACxB,eAAe,EAAE,OAAO;YACxB,IAAI,EAAE,IAAI;SACX,CAAC;IACJ,CAAC;CACF,CAAA;AAzCU;IAAR,KAAK,EAAE;uDAQN;AATS,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CA0C/B","sourcesContent":["import { LitElement, html, TemplateResult, nothing } from 'lit';\r\nimport { customElement, state } from 'lit/decorators.js';\r\nimport '../../src/histogram-date-range';\r\n\r\ninterface DataSource {\r\n minDate: unknown;\r\n maxDate: unknown;\r\n minSelectedDate: unknown;\r\n maxSelectedDate: unknown;\r\n bins: number[];\r\n barScalingFunction?: (input: number) => number;\r\n}\r\n\r\n/**\r\n * This is mainly to test the histogram-date-range within\r\n * a lit-element.\r\n */\r\n@customElement('lit-histogram-wrapper')\r\nexport class LitHistogramWrapper extends LitElement {\r\n @state() dataSource: DataSource = {\r\n minDate: 1955,\r\n maxDate: 2000,\r\n minSelectedDate: 1955,\r\n maxSelectedDate: 2000,\r\n bins: [\r\n 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\r\n ],\r\n };\r\n\r\n render(): TemplateResult {\r\n return html`\r\n <histogram-date-range\r\n .minDate=${this.dataSource?.minDate}\r\n .maxDate=${this.dataSource?.maxDate}\r\n .minSelectedDate=${this.dataSource?.minSelectedDate}\r\n .maxSelectedDate=${this.dataSource?.maxSelectedDate}\r\n .updateDelay=${1000}\r\n .bins=${this.dataSource?.bins}\r\n .barScalingFunction=${this.dataSource?.barScalingFunction ?? nothing}\r\n ></histogram-date-range>\r\n\r\n <button @click=${this.randomize}>Randomize</button>\r\n `;\r\n }\r\n\r\n private randomize() {\r\n const minDate = Math.round(Math.random() * 1000);\r\n const maxDate = minDate + Math.round(Math.random() * 1000);\r\n // generate random bins\r\n const bins = Array.from({ length: 20 }, () =>\r\n Math.floor(Math.random() * minDate)\r\n );\r\n this.dataSource = {\r\n minDate,\r\n maxDate,\r\n minSelectedDate: minDate,\r\n maxSelectedDate: maxDate,\r\n bins: bins,\r\n };\r\n }\r\n}\r\n"]}
package/dist/demo/js/lit-histogram-wrapper.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { LitElement, TemplateResult } from 'lit';
2
+ import '../../src/histogram-date-range';
3
+ interface DataSource {
4
+ minDate: unknown;
5
+ maxDate: unknown;
6
+ minSelectedDate: unknown;
7
+ maxSelectedDate: unknown;
8
+ bins: number[];
9
+ }
10
+ /**
11
+ * This is mainly to test the histogram-date-range within
12
+ * a lit-element.
13
+ */
14
+ export declare class LitHistogramWrapper extends LitElement {
15
+ barScaling?: 'linear' | 'logarithmic';
16
+ dataSource: DataSource;
17
+ render(): TemplateResult;
18
+ private randomize;
19
+ static get styles(): import("lit").CSSResult;
20
+ }
21
+ export {};
package/dist/demo/js/lit-histogram-wrapper.js ADDED
@@ -0,0 +1,73 @@
1
+ import { __decorate } from "tslib";
2
+ import { LitElement, html, css, nothing } from 'lit';
3
+ import { customElement, property, state } from 'lit/decorators.js';
4
+ import '../../src/histogram-date-range';
5
+ const IDENTITY_FN = (x) => x;
6
+ /**
7
+ * This is mainly to test the histogram-date-range within
8
+ * a lit-element.
9
+ */
10
+ let LitHistogramWrapper = class LitHistogramWrapper extends LitElement {
11
+ constructor() {
12
+ super(...arguments);
13
+ this.dataSource = {
14
+ minDate: 1955,
15
+ maxDate: 2000,
16
+ minSelectedDate: 1955,
17
+ maxSelectedDate: 2000,
18
+ bins: [
19
+ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
20
+ ],
21
+ };
22
+ }
23
+ render() {
24
+ var _a, _b, _c, _d, _e;
25
+ const scalingFn = this.barScaling === 'linear' ? IDENTITY_FN : nothing;
26
+ return html `
27
+ <histogram-date-range
28
+ .minDate=${(_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.minDate}
29
+ .maxDate=${(_b = this.dataSource) === null || _b === void 0 ? void 0 : _b.maxDate}
30
+ .minSelectedDate=${(_c = this.dataSource) === null || _c === void 0 ? void 0 : _c.minSelectedDate}
31
+ .maxSelectedDate=${(_d = this.dataSource) === null || _d === void 0 ? void 0 : _d.maxSelectedDate}
32
+ .updateDelay=${1000}
33
+ .bins=${(_e = this.dataSource) === null || _e === void 0 ? void 0 : _e.bins}
34
+ .barScalingFunction=${scalingFn}
35
+ ></histogram-date-range>
36
+
37
+ <button @click=${this.randomize}>Randomize</button>
38
+ `;
39
+ }
40
+ randomize() {
41
+ const minDate = Math.round(Math.random() * 1000);
42
+ const maxDate = minDate + Math.round(Math.random() * 1000);
43
+ // generate random bins
44
+ const bins = Array.from({ length: 20 }, () => Math.floor(Math.random() * minDate));
45
+ this.dataSource = {
46
+ minDate,
47
+ maxDate,
48
+ minSelectedDate: minDate,
49
+ maxSelectedDate: maxDate,
50
+ bins: bins,
51
+ };
52
+ }
53
+ static get styles() {
54
+ return css `
55
+ :host {
56
+ display: flex;
57
+ flex-direction: column;
58
+ align-items: center;
59
+ }
60
+ `;
61
+ }
62
+ };
63
+ __decorate([
64
+ property({ type: String })
65
+ ], LitHistogramWrapper.prototype, "barScaling", void 0);
66
+ __decorate([
67
+ state()
68
+ ], LitHistogramWrapper.prototype, "dataSource", void 0);
69
+ LitHistogramWrapper = __decorate([
70
+ customElement('lit-histogram-wrapper')
71
+ ], LitHistogramWrapper);
72
+ export { LitHistogramWrapper };
73
+ //# sourceMappingURL=lit-histogram-wrapper.js.map
package/dist/demo/js/lit-histogram-wrapper.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"lit-histogram-wrapper.js","sourceRoot":"","sources":["../../../demo/js/lit-histogram-wrapper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,gCAAgC,CAAC;AAUxC,MAAM,WAAW,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC;AAErC;;;GAGG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QAGI,eAAU,GAAe;YAChC,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,IAAI;YACrB,eAAe,EAAE,IAAI;YACrB,IAAI,EAAE;gBACJ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;aACtE;SACF,CAAC;IA4CJ,CAAC;IA1CC,MAAM;;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC;QACvE,OAAO,IAAI,CAAA;;mBAEI,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;mBACxB,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;2BAChB,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;2BAChC,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;uBACpC,IAAI;gBACX,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI;8BACP,SAAS;;;uBAGhB,IAAI,CAAC,SAAS;KAChC,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QAC3D,uBAAuB;QACvB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,CAC3C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,CACpC,CAAC;QACF,IAAI,CAAC,UAAU,GAAG;YAChB,OAAO;YACP,OAAO;YACP,eAAe,EAAE,OAAO;YACxB,eAAe,EAAE,OAAO;YACxB,IAAI,EAAE,IAAI;SACX,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;CACF,CAAA;AAtD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAuC;AAEzD;IAAR,KAAK,EAAE;uDAQN;AAXS,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CAuD/B","sourcesContent":["import { LitElement, html, css, TemplateResult, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '../../src/histogram-date-range';\n\ninterface DataSource {\n minDate: unknown;\n maxDate: unknown;\n minSelectedDate: unknown;\n maxSelectedDate: unknown;\n bins: number[];\n}\n\nconst IDENTITY_FN = (x: number) => x;\n\n/**\n * This is mainly to test the histogram-date-range within\n * a lit-element.\n */\n@customElement('lit-histogram-wrapper')\nexport class LitHistogramWrapper extends LitElement {\n @property({ type: String }) barScaling?: 'linear' | 'logarithmic';\n\n @state() dataSource: DataSource = {\n minDate: 1955,\n maxDate: 2000,\n minSelectedDate: 1955,\n maxSelectedDate: 2000,\n bins: [\n 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n ],\n };\n\n render(): TemplateResult {\n const scalingFn = this.barScaling === 'linear' ? IDENTITY_FN : nothing;\n return html`\n <histogram-date-range\n .minDate=${this.dataSource?.minDate}\n .maxDate=${this.dataSource?.maxDate}\n .minSelectedDate=${this.dataSource?.minSelectedDate}\n .maxSelectedDate=${this.dataSource?.maxSelectedDate}\n .updateDelay=${1000}\n .bins=${this.dataSource?.bins}\n .barScalingFunction=${scalingFn}\n ></histogram-date-range>\n\n <button @click=${this.randomize}>Randomize</button>\n `;\n }\n\n private randomize() {\n const minDate = Math.round(Math.random() * 1000);\n const maxDate = minDate + Math.round(Math.random() * 1000);\n // generate random bins\n const bins = Array.from({ length: 20 }, () =>\n Math.floor(Math.random() * minDate)\n );\n this.dataSource = {\n minDate,\n maxDate,\n minSelectedDate: minDate,\n maxSelectedDate: maxDate,\n bins: bins,\n };\n }\n\n static get styles() {\n return css`\n :host {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n `;\n }\n}\n"]}
package/dist/src/histogram-date-range.d.ts CHANGED
@@ -229,7 +229,7 @@ export declare class HistogramDateRange extends LitElement {
229
229
  get minLabelTemplate(): TemplateResult;
230
230
  get maxLabelTemplate(): TemplateResult;
231
231
  get tooltipTemplate(): TemplateResult;
232
- private get histogramAccessibility();
232
+ private get histogramAccessibilityTemplate();
233
233
  private get noDataTemplate();
234
234
  private get activityIndicatorTemplate();
235
235
  static styles: import("lit").CSSResult;