@internetarchive/histogram-date-range 0.1.0-beta → 0.1.3-alpha

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 (25) hide show
  1. package/demo/index.css +23 -0
  2. package/demo/index.html +51 -42
  3. package/dist/src/histogram-date-range.d.ts +22 -13
  4. package/dist/src/histogram-date-range.js +131 -65
  5. package/dist/src/histogram-date-range.js.map +1 -1
  6. package/dist/test/histogram-date-range.test.js +76 -17
  7. package/dist/test/histogram-date-range.test.js.map +1 -1
  8. package/docs/_snowpack/pkg/@internetarchive/ia-activity-indicator/ia-activity-indicator.js +9 -2534
  9. package/docs/_snowpack/pkg/common/lit-element-3254fb50.js +22 -0
  10. package/docs/_snowpack/pkg/common/lit-html-1d707ff6.js +8 -0
  11. package/docs/_snowpack/pkg/dayjs/esm/index.js +3 -3
  12. package/docs/_snowpack/pkg/dayjs/esm/plugin/customParseFormat.js +342 -0
  13. package/docs/_snowpack/pkg/import-map.json +1 -0
  14. package/docs/_snowpack/pkg/lit/decorators.js +8 -2
  15. package/docs/_snowpack/pkg/lit/directives/live.js +4 -4
  16. package/docs/_snowpack/pkg/lit.js +2 -23
  17. package/docs/demo/index.css +23 -0
  18. package/docs/demo/index.html +51 -42
  19. package/docs/dist/src/histogram-date-range.js +94 -47
  20. package/package.json +20 -19
  21. package/src/histogram-date-range.ts +164 -72
  22. package/test/histogram-date-range.test.ts +107 -23
  23. package/docs/_snowpack/env.js +0 -3
  24. package/docs/_snowpack/pkg/common/lit-html-e67c9f49.js +0 -8
  25. package/types/static.d.ts +0 -4
package/docs/demo/index.html CHANGED
@@ -3,49 +3,29 @@
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1" />
5
5
  <meta charset="utf-8" />
6
- <style>
7
- html {
8
- font-size: 10px;
9
- font-family: sans-serif;
10
- }
11
- body {
12
- background: white;
13
- }
14
- .container {
15
- margin-top: 50px;
16
- display: grid;
17
- justify-content: center;
18
- }
19
- .description {
20
- margin: 10px auto;
21
- }
22
- .received-events {
23
- position: absolute;
24
- top: 0;
25
- }
26
- button {
27
- font-size: 100%;
28
- margin: 10px auto;
29
- }
30
- </style>
6
+ <link rel="stylesheet" href="index.css">
31
7
  </head>
32
8
 
33
9
  <script type="module">
34
10
  import '../dist/src/histogram-date-range.js';
11
+ let eventCount = 0;
35
12
  // listen to events from the component and display the data received from them
36
13
  document.addEventListener('histogramDateRangeUpdated', e => {
37
- document.querySelector('.received-events').innerHTML +=
38
- '\n' + JSON.stringify(e.detail);
14
+ document.querySelector('.received-events').innerHTML =
15
+ ++eventCount + ': ' + JSON.stringify(e.detail);
39
16
  });
40
17
  </script>
41
18
  <body>
42
19
  <pre class="received-events"></pre>
43
20
 
44
21
  <div class="container">
45
- <div class="description">pre-selected range with default date format</div>
22
+ <div class="description">
23
+ pre-selected range with 1000ms debounce delay
24
+ </div>
46
25
  <histogram-date-range
47
26
  minDate="1400"
48
27
  maxDate="2021"
28
+ updateDelay="1000"
49
29
  minSelectedDate="1800"
50
30
  maxSelectedDate="1900"
51
31
  bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
@@ -57,19 +37,45 @@
57
37
  </div>
58
38
 
59
39
  <div class="container">
60
- <div class="description">default range with custom date format</div>
40
+ <div class="description">range spanning negative to positive years</div>
41
+ <histogram-date-range
42
+ mindate="-1050" maxdate="2200"
43
+ bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
44
+ 13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
45
+ 47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
46
+ 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
47
+ ]"
48
+ ></histogram-date-range>
49
+ </div>
50
+
51
+
52
+
53
+ <div class="container">
54
+ <div class="description">small year range and few bins</div>
55
+ <histogram-date-range width="175" tooltipwidth="120"
56
+ mindate="2008" maxdate="2016" bins="[76104,866978,1151617,986331,218672,107410,3324]">
57
+ </histogram-date-range>
58
+ </div>
59
+
60
+ <div class="container">
61
+ <div class="description">
62
+ default range with custom styling and date format
63
+ </div>
61
64
  <histogram-date-range
62
65
  width="300"
63
66
  height="50"
64
67
  tooltipWidth="140"
65
- updateDelay="2000"
66
68
  dateFormat="DD MMM YYYY"
67
69
  style="
70
+ --histogramDateRangeSliderColor: #d8b384;
71
+ --histogramDateRangeSelectedRangeColor: #f3f0d7;
72
+ --histogramDateRangeTooltipFontFamily: serif;
73
+ --histogramDateRangeInputFontFamily: serif;
68
74
  --histogramDateRangeTooltipFontSize: 1rem;
69
75
  --histogramDateRangeInputWidth: 85px;
70
76
  "
71
- minDate="May 1, 1972"
72
- maxDate="12/21/1980"
77
+ minDate="05 May 1972"
78
+ maxDate="21 Dec 1980"
73
79
  bins="[ 85, 25, 200, 0, 0, 34, 0, 2, 5, 10, 0, 56, 10, 45, 100, 70, 50 ]"
74
80
  ></histogram-date-range>
75
81
  </div>
@@ -99,11 +105,8 @@
99
105
  </script>
100
106
 
101
107
  <div class="container">
102
- <div class="description">data set up with js; no debounce delay</div>
103
- <histogram-date-range
104
- id="js-setup"
105
- updateDelay="0"
106
- ></histogram-date-range>
108
+ <div class="description">data set up with js</div>
109
+ <histogram-date-range id="js-setup"></histogram-date-range>
107
110
  </div>
108
111
  <script>
109
112
  document.addEventListener('DOMContentLoaded', function () {
@@ -112,17 +115,23 @@
112
115
  );
113
116
  histogram.minDate = '1950';
114
117
  histogram.maxDate = '2000';
115
- // generate an array like [0, 1, 2, ... 49]
118
+ // generate array of [0, 1, 2, ... 49]
116
119
  histogram.bins = [...Array(50).keys()];
117
120
  });
118
121
  </script>
119
122
 
123
+ <div class="container">
124
+ <div class="description">
125
+ single bin
126
+ </div>
127
+ <histogram-date-range mindate="1926" maxdate="1926" bins="[8]">
128
+ </histogram-date-range>
129
+ </div>
130
+
120
131
  <div class="container">
121
132
  <div class="description">empty data</div>
122
- <histogram-date-range
123
- bins=""
124
- missingDataMessage="no data..."
125
- ></histogram-date-range>
133
+ <histogram-date-range missingDataMessage="no data..."></histoghistogram-date-range>
126
134
  </div>
135
+
127
136
  </body>
128
137
  </html>
package/docs/dist/src/histogram-date-range.js CHANGED
@@ -12,12 +12,15 @@ var __decorate = (decorators, target, key, kind) => {
12
12
  import {
13
13
  css,
14
14
  html,
15
+ nothing,
15
16
  LitElement,
16
17
  svg
17
18
  } from "../../_snowpack/pkg/lit.js";
18
19
  import {property, state, customElement} from "../../_snowpack/pkg/lit/decorators.js";
19
20
  import {live} from "../../_snowpack/pkg/lit/directives/live.js";
20
21
  import dayjs from "../../_snowpack/pkg/dayjs/esm/index.js";
22
+ import customParseFormat from "../../_snowpack/pkg/dayjs/esm/plugin/customParseFormat.js";
23
+ dayjs.extend(customParseFormat);
21
24
  import "../../_snowpack/pkg/@internetarchive/ia-activity-indicator/ia-activity-indicator.js";
22
25
  const WIDTH = 180;
23
26
  const HEIGHT = 40;
@@ -26,19 +29,21 @@ const TOOLTIP_WIDTH = 125;
26
29
  const TOOLTIP_HEIGHT = 30;
27
30
  const DATE_FORMAT = "YYYY";
28
31
  const MISSING_DATA = "no data";
29
- const UPDATE_DEBOUNCE_DELAY_MS = 1e3;
32
+ const UPDATE_DEBOUNCE_DELAY_MS = 0;
30
33
  const SLIDER_CORNER_SIZE = 4;
31
- const sliderFill = css`var(--histogramDateRangeSliderFill, #4B65FE)`;
32
- const selectedRangeFill = css`var(--histogramDateRangeSelectedRangeFill, #DBE0FF)`;
34
+ const sliderColor = css`var(--histogramDateRangeSliderColor, #4B65FE)`;
35
+ const selectedRangeColor = css`var(--histogramDateRangeSelectedRangeColor, #DBE0FF)`;
33
36
  const barIncludedFill = css`var(--histogramDateRangeBarIncludedFill, #2C2C2C)`;
34
37
  const activityIndicatorColor = css`var(--histogramDateRangeActivityIndicator, #2C2C2C)`;
35
38
  const barExcludedFill = css`var(--histogramDateRangeBarExcludedFill, #CCCCCC)`;
36
39
  const inputBorder = css`var(--histogramDateRangeInputBorder, 0.5px solid #2C2C2C)`;
37
40
  const inputWidth = css`var(--histogramDateRangeInputWidth, 35px)`;
38
41
  const inputFontSize = css`var(--histogramDateRangeInputFontSize, 1.2rem)`;
42
+ const inputFontFamily = css`var(--histogramDateRangeInputFontFamily, sans-serif)`;
39
43
  const tooltipBackgroundColor = css`var(--histogramDateRangeTooltipBackgroundColor, #2C2C2C)`;
40
44
  const tooltipTextColor = css`var(--histogramDateRangeTooltipTextColor, #FFFFFF)`;
41
45
  const tooltipFontSize = css`var(--histogramDateRangeTooltipFontSize, 1.1rem)`;
46
+ const tooltipFontFamily = css`var(--histogramDateRangeTooltipFontFamily, sans-serif)`;
42
47
  export let HistogramDateRange = class extends LitElement {
43
48
  constructor() {
44
49
  super(...arguments);
@@ -87,11 +92,10 @@ export let HistogramDateRange = class extends LitElement {
87
92
  this.move = (e) => {
88
93
  const newX = e.offsetX - this._dragOffset;
89
94
  const slider = this._currentSlider;
90
- const date = this.translatePositionToDate(newX);
91
95
  if (slider.id === "slider-min") {
92
- this.minSelectedDate = date;
96
+ this.minSelectedDate = this.translatePositionToDate(this.validMinSliderX(newX));
93
97
  } else {
94
- this.maxSelectedDate = date;
98
+ this.maxSelectedDate = this.translatePositionToDate(this.validMaxSliderX(newX));
95
99
  }
96
100
  };
97
101
  }
@@ -109,8 +113,8 @@ export let HistogramDateRange = class extends LitElement {
109
113
  return;
110
114
  }
111
115
  this._histWidth = this.width - this.sliderWidth * 2;
112
- this._minDateMS = dayjs(this.minDate).valueOf();
113
- this._maxDateMS = dayjs(this.maxDate).valueOf();
116
+ this._minDateMS = this.getMSFromString(this.minDate);
117
+ this._maxDateMS = this.getMSFromString(this.maxDate);
114
118
  this._binWidth = this._histWidth / this._numBins;
115
119
  this._previousDateRange = this.currentDateRangeString;
116
120
  this._histData = this.calculateHistData();
@@ -121,7 +125,8 @@ export let HistogramDateRange = class extends LitElement {
121
125
  calculateHistData() {
122
126
  const minValue = Math.min(...this.bins);
123
127
  const maxValue = Math.max(...this.bins);
124
- const valueScale = this.height / Math.log1p(maxValue - minValue);
128
+ const valueRange = minValue === maxValue ? 1 : Math.log1p(maxValue - minValue);
129
+ const valueScale = this.height / valueRange;
125
130
  const dateScale = this.dateRangeMS / this._numBins;
126
131
  return this.bins.map((v, i) => {
127
132
  return {
@@ -141,6 +146,12 @@ export let HistogramDateRange = class extends LitElement {
141
146
  }
142
147
  return this.bins.length;
143
148
  }
149
+ get histogramLeftEdgeX() {
150
+ return this.sliderWidth;
151
+ }
152
+ get histogramRightEdgeX() {
153
+ return this.width - this.sliderWidth;
154
+ }
144
155
  get loading() {
145
156
  return this._isLoading;
146
157
  }
@@ -149,38 +160,44 @@ export let HistogramDateRange = class extends LitElement {
149
160
  this._isLoading = value;
150
161
  }
151
162
  get minSelectedDate() {
152
- return this.formatDate(this._minSelectedDate);
163
+ return this.formatDate(this.getMSFromString(this._minSelectedDate));
153
164
  }
154
165
  set minSelectedDate(rawDate) {
155
166
  if (!this._minSelectedDate) {
156
167
  this._minSelectedDate = rawDate;
168
+ return;
157
169
  }
158
- const x = this.translateDateToPosition(rawDate);
159
- if (x) {
160
- const validX = this.validMinSliderX(x);
161
- this._minSelectedDate = this.translatePositionToDate(validX);
170
+ const proposedDateMS = this.getMSFromString(rawDate);
171
+ const isValidDate = !Number.isNaN(proposedDateMS);
172
+ const isNotTooRecent = proposedDateMS <= this.getMSFromString(this.maxSelectedDate);
173
+ if (isValidDate && isNotTooRecent) {
174
+ this._minSelectedDate = this.formatDate(proposedDateMS);
162
175
  }
163
176
  this.requestUpdate();
164
177
  }
165
178
  get maxSelectedDate() {
166
- return this.formatDate(this._maxSelectedDate);
179
+ return this.formatDate(this.getMSFromString(this._maxSelectedDate));
167
180
  }
168
181
  set maxSelectedDate(rawDate) {
169
182
  if (!this._maxSelectedDate) {
170
183
  this._maxSelectedDate = rawDate;
184
+ return;
171
185
  }
172
- const x = this.translateDateToPosition(rawDate);
173
- if (x) {
174
- const validX = this.validMaxSliderX(x);
175
- this._maxSelectedDate = this.translatePositionToDate(validX);
186
+ const proposedDateMS = this.getMSFromString(rawDate);
187
+ const isValidDate = !Number.isNaN(proposedDateMS);
188
+ const isNotTooOld = proposedDateMS >= this.getMSFromString(this.minSelectedDate);
189
+ if (isValidDate && isNotTooOld) {
190
+ this._maxSelectedDate = this.formatDate(proposedDateMS);
176
191
  }
177
192
  this.requestUpdate();
178
193
  }
179
194
  get minSliderX() {
180
- return this.translateDateToPosition(this.minSelectedDate) ?? this.sliderWidth;
195
+ const x = this.translateDateToPosition(this.minSelectedDate);
196
+ return this.validMinSliderX(x);
181
197
  }
182
198
  get maxSliderX() {
183
- return this.translateDateToPosition(this.maxSelectedDate) ?? this.width - this.sliderWidth;
199
+ const x = this.translateDateToPosition(this.maxSelectedDate);
200
+ return this.validMaxSliderX(x);
184
201
  }
185
202
  get dateRangeMS() {
186
203
  return this._maxDateMS - this._minDateMS;
@@ -193,9 +210,10 @@ export let HistogramDateRange = class extends LitElement {
193
210
  const x = target.x.baseVal.value + this.sliderWidth / 2;
194
211
  const dataset = target.dataset;
195
212
  const itemsText = `item${dataset.numItems !== "1" ? "s" : ""}`;
213
+ const formattedNumItems = Number(dataset.numItems).toLocaleString();
196
214
  this._tooltipOffset = x + (this._binWidth - this.sliderWidth - this.tooltipWidth) / 2;
197
215
  this._tooltipContent = html`
198
- ${dataset.numItems} ${itemsText}<br />
216
+ ${formattedNumItems} ${itemsText}<br />
199
217
  ${dataset.binStart} - ${dataset.binEnd}
200
218
  `;
201
219
  this._tooltipVisible = true;
@@ -205,12 +223,16 @@ export let HistogramDateRange = class extends LitElement {
205
223
  this._tooltipVisible = false;
206
224
  }
207
225
  validMinSliderX(newX) {
208
- const validX = Math.max(newX, this.sliderWidth);
209
- return Math.min(validX, this.maxSliderX);
226
+ const rightLimit = Math.min(this.translateDateToPosition(this.maxSelectedDate), this.histogramRightEdgeX);
227
+ newX = this.clamp(newX, this.histogramLeftEdgeX, rightLimit);
228
+ const isInvalid = Number.isNaN(newX) || rightLimit < this.histogramLeftEdgeX;
229
+ return isInvalid ? this.histogramLeftEdgeX : newX;
210
230
  }
211
231
  validMaxSliderX(newX) {
212
- const validX = Math.max(newX, this.minSliderX);
213
- return Math.min(validX, this.width - this.sliderWidth);
232
+ const leftLimit = Math.max(this.histogramLeftEdgeX, this.translateDateToPosition(this.minSelectedDate));
233
+ newX = this.clamp(newX, leftLimit, this.histogramRightEdgeX);
234
+ const isInvalid = Number.isNaN(newX) || leftLimit > this.histogramRightEdgeX;
235
+ return isInvalid ? this.histogramRightEdgeX : newX;
214
236
  }
215
237
  addListeners() {
216
238
  window.addEventListener("pointermove", this.move);
@@ -260,9 +282,11 @@ export let HistogramDateRange = class extends LitElement {
260
282
  return this.formatDate(this._minDateMS + milliseconds);
261
283
  }
262
284
  translateDateToPosition(date) {
263
- const milliseconds = dayjs(date).valueOf();
264
- const xPosition = this.sliderWidth + (milliseconds - this._minDateMS) * this._histWidth / this.dateRangeMS;
265
- return isNaN(milliseconds) || isNaN(xPosition) ? null : xPosition;
285
+ const milliseconds = this.getMSFromString(date);
286
+ return this.sliderWidth + (milliseconds - this._minDateMS) * this._histWidth / this.dateRangeMS;
287
+ }
288
+ clamp(x, minValue, maxValue) {
289
+ return Math.min(Math.max(x, minValue), maxValue);
266
290
  }
267
291
  handleMinDateInput(e) {
268
292
  const target = e.currentTarget;
@@ -274,23 +298,37 @@ export let HistogramDateRange = class extends LitElement {
274
298
  this.maxSelectedDate = target.value;
275
299
  this.beginEmitUpdateProcess();
276
300
  }
301
+ handleKeyUp(e) {
302
+ if (e.key === "Enter") {
303
+ const target = e.currentTarget;
304
+ target.blur();
305
+ if (target.id === "date-min") {
306
+ this.handleMinDateInput(e);
307
+ } else if (target.id === "date-max") {
308
+ this.handleMaxDateInput(e);
309
+ }
310
+ }
311
+ }
277
312
  get currentDateRangeString() {
278
313
  return `${this.minSelectedDate}:${this.maxSelectedDate}`;
279
314
  }
280
- get minSelectedDateMS() {
281
- return dayjs(this.minSelectedDate).valueOf();
282
- }
283
- get maxSelectedDateMS() {
284
- return dayjs(this.maxSelectedDate).valueOf();
315
+ getMSFromString(date) {
316
+ const digitGroupCount = (date.split(/(\d+)/).length - 1) / 2;
317
+ if (digitGroupCount === 1) {
318
+ const dateObj = new Date(0, 0);
319
+ dateObj.setFullYear(Number(date));
320
+ return dateObj.getTime();
321
+ }
322
+ return dayjs(date, [this.dateFormat, DATE_FORMAT]).valueOf();
285
323
  }
286
324
  handleBarClick(e) {
287
325
  const dataset = e.currentTarget.dataset;
288
- const binStartDateMS = dayjs(dataset.binStart).valueOf();
289
- if (binStartDateMS < this.minSelectedDateMS) {
326
+ const clickPosition = (this.getMSFromString(dataset.binStart) + this.getMSFromString(dataset.binEnd)) / 2;
327
+ const distanceFromMinSlider = Math.abs(clickPosition - this.getMSFromString(this.minSelectedDate));
328
+ const distanceFromMaxSlider = Math.abs(clickPosition - this.getMSFromString(this.maxSelectedDate));
329
+ if (distanceFromMinSlider < distanceFromMaxSlider) {
290
330
  this.minSelectedDate = dataset.binStart;
291
- }
292
- const binEndDateMS = dayjs(dataset.binEnd).valueOf();
293
- if (binEndDateMS > this.maxSelectedDateMS) {
331
+ } else {
294
332
  this.maxSelectedDate = dataset.binEnd;
295
333
  }
296
334
  this.beginEmitUpdateProcess();
@@ -329,7 +367,7 @@ export let HistogramDateRange = class extends LitElement {
329
367
  ${this._isDragging ? "dragging" : ""}"
330
368
  @pointerdown="${this.drag}"
331
369
  >
332
- <path d="${sliderShape} z" fill="${sliderFill}" />
370
+ <path d="${sliderShape} z" fill="${sliderColor}" />
333
371
  <rect
334
372
  x="${sliderPositionX - this.sliderWidth * k + this.sliderWidth * 0.4 * k}"
335
373
  y="${this.height / 3}"
@@ -354,7 +392,7 @@ export let HistogramDateRange = class extends LitElement {
354
392
  y="0"
355
393
  width="${this.maxSliderX - this.minSliderX}"
356
394
  height="${this.height}"
357
- fill="${selectedRangeFill}"
395
+ fill="${selectedRangeColor}"
358
396
  />`;
359
397
  }
360
398
  get histogramTemplate() {
@@ -373,7 +411,7 @@ export let HistogramDateRange = class extends LitElement {
373
411
  @pointerenter="${this.showTooltip}"
374
412
  @pointerleave="${this.hideTooltip}"
375
413
  @click="${this.handleBarClick}"
376
- fill="${x >= this.minSliderX && x <= this.maxSliderX ? barIncludedFill : barExcludedFill}"
414
+ fill="${x + barWidth >= this.minSliderX && x <= this.maxSliderX ? barIncludedFill : barExcludedFill}"
377
415
  data-num-items="${data.value}"
378
416
  data-bin-start="${data.binStart}"
379
417
  data-bin-end="${data.binEnd}"
@@ -382,9 +420,15 @@ export let HistogramDateRange = class extends LitElement {
382
420
  return bar;
383
421
  });
384
422
  }
385
- formatDate(rawDate) {
386
- const date = dayjs(rawDate);
387
- return date.isValid() ? date.format(this.dateFormat) : "";
423
+ formatDate(dateMS) {
424
+ if (Number.isNaN(dateMS)) {
425
+ return "";
426
+ }
427
+ const date = dayjs(dateMS);
428
+ if (date.year() < 1e3) {
429
+ return String(date.year());
430
+ }
431
+ return date.format(this.dateFormat);
388
432
  }
389
433
  get minInputTemplate() {
390
434
  return html`
@@ -394,6 +438,7 @@ export let HistogramDateRange = class extends LitElement {
394
438
  type="text"
395
439
  @focus="${this.cancelPendingUpdateEvent}"
396
440
  @blur="${this.handleMinDateInput}"
441
+ @keyup="${this.handleKeyUp}"
397
442
  .value="${live(this.minSelectedDate)}"
398
443
  ?disabled="${this.disabled}"
399
444
  />
@@ -407,6 +452,7 @@ export let HistogramDateRange = class extends LitElement {
407
452
  type="text"
408
453
  @focus="${this.cancelPendingUpdateEvent}"
409
454
  @blur="${this.handleMaxDateInput}"
455
+ @keyup="${this.handleKeyUp}"
410
456
  .value="${live(this.maxSelectedDate)}"
411
457
  ?disabled="${this.disabled}"
412
458
  />
@@ -436,7 +482,7 @@ export let HistogramDateRange = class extends LitElement {
436
482
  }
437
483
  get activityIndicatorTemplate() {
438
484
  if (!this.loading) {
439
- return html``;
485
+ return nothing;
440
486
  }
441
487
  return html`
442
488
  <ia-activity-indicator mode="processing"> </ia-activity-indicator>
@@ -536,7 +582,7 @@ HistogramDateRange.styles = css`
536
582
  border-radius: 3px;
537
583
  padding: 2px;
538
584
  font-size: ${tooltipFontSize};
539
- font-family: sans-serif;
585
+ font-family: ${tooltipFontFamily};
540
586
  touch-action: none;
541
587
  pointer-events: none;
542
588
  }
@@ -573,6 +619,7 @@ HistogramDateRange.styles = css`
573
619
  border-radius: 2px !important;
574
620
  text-align: center;
575
621
  font-size: ${inputFontSize};
622
+ font-family: ${inputFontFamily};
576
623
  }
577
624
  `;
578
625
  __decorate([
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetarchive/histogram-date-range",
3
- "version": "0.1.0-beta",
3
+ "version": "0.1.3-alpha",
4
4
  "description": "Internet Archive histogram date range picker",
5
5
  "license": "AGPL-3.0-only",
6
6
  "main": "dist/index.js",
@@ -20,26 +20,27 @@
20
20
  "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
21
21
  },
22
22
  "dependencies": {
23
- "dayjs": "^1.9.7",
24
- "lit": "^2.0.0-rc.2"
23
+ "dayjs": "^1.10.7",
24
+ "lit": "^2.1.1"
25
25
  },
26
26
  "devDependencies": {
27
- "@internetarchive/ia-activity-indicator": "^0.0.1",
28
- "@open-wc/eslint-config": "^4.2.0",
29
- "@open-wc/testing": "^2.0.0",
30
- "@typescript-eslint/eslint-plugin": "^2.20.0",
31
- "@typescript-eslint/parser": "^2.20.0",
32
- "@web/dev-server": "^0.1.1",
33
- "@web/test-runner": "^0.11.5",
34
- "concurrently": "^5.3.0",
35
- "eslint": "^6.1.0",
36
- "eslint-config-prettier": "^6.11.0",
37
- "husky": "^1.0.0",
38
- "lint-staged": "^10.0.0",
39
- "prettier": "^2.0.4",
40
- "snowpack": "^3.0.11",
41
- "tslib": "^2.0.3",
42
- "typescript": "^4.3"
27
+ "@internetarchive/ia-activity-indicator": "^0.0.2",
28
+ "@open-wc/eslint-config": "^7.0.0",
29
+ "@open-wc/testing": "^3.0.3",
30
+ "@typescript-eslint/eslint-plugin": "^5.10.0",
31
+ "@typescript-eslint/parser": "^5.10.0",
32
+ "@web/dev-server": "^0.1.29",
33
+ "@web/test-runner": "^0.13.25",
34
+ "concurrently": "^7.0.0",
35
+ "eslint": "^8.7.0",
36
+ "eslint-config-prettier": "^8.3.0",
37
+ "husky": "^4.3.8",
38
+ "lint-staged": "^12.2.2",
39
+ "lit-html": "^2.1.1",
40
+ "prettier": "^2.5.1",
41
+ "snowpack": "^3.8.8",
42
+ "tslib": "^2.3.1",
43
+ "typescript": "^4.5"
43
44
  },
44
45
  "eslintConfig": {
45
46
  "parser": "@typescript-eslint/parser",