@internetarchive/histogram-date-range 1.3.1-alpha-webdev7745.0 → 1.3.1

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 (10) hide show
  1. package/dist/src/histogram-date-range.js +247 -247
  2. package/dist/src/histogram-date-range.js.map +1 -1
  3. package/dist/src/plugins/fix-first-century-years.js.map +1 -1
  4. package/dist/test/histogram-date-range.test.js +155 -155
  5. package/dist/test/histogram-date-range.test.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/histogram-date-range.ts +1094 -1094
  8. package/src/plugins/fix-first-century-years.ts +52 -52
  9. package/test/histogram-date-range.test.ts +934 -934
  10. package/types/dayjs.d.ts +10 -10
package/dist/test/histogram-date-range.test.js CHANGED
@@ -2,31 +2,31 @@ import { html, fixture, expect, oneEvent, aTimeout } from '@open-wc/testing';
2
2
  import '../src/histogram-date-range';
3
3
  const SLIDER_WIDTH = 10;
4
4
  const WIDTH = 200;
5
- const subject = html `
6
- <histogram-date-range
7
- width="${WIDTH}"
8
- tooltipWidth="140"
9
- height="50"
10
- dateFormat="M/D/YYYY"
11
- minDate="1900"
12
- maxDate="12/4/2020"
13
- bins="[33, 1, 100]"
14
- >
15
- </histogram-date-range>
5
+ const subject = html `
6
+ <histogram-date-range
7
+ width="${WIDTH}"
8
+ tooltipWidth="140"
9
+ height="50"
10
+ dateFormat="M/D/YYYY"
11
+ minDate="1900"
12
+ maxDate="12/4/2020"
13
+ bins="[33, 1, 100]"
14
+ >
15
+ </histogram-date-range>
16
16
  `;
17
17
  async function createCustomElementInHTMLContainer() {
18
- document.head.insertAdjacentHTML('beforeend', `<style>
19
- html {
20
- font-size:10px;
21
- }
22
- .container {
23
- width: 400px;
24
- height: 400px;
25
- display: flex;
26
- background: #FFF6E1;
27
- justify-content: center;
28
- align-items: center;
29
- }
18
+ document.head.insertAdjacentHTML('beforeend', `<style>
19
+ html {
20
+ font-size:10px;
21
+ }
22
+ .container {
23
+ width: 400px;
24
+ height: 400px;
25
+ display: flex;
26
+ background: #FFF6E1;
27
+ justify-content: center;
28
+ align-items: center;
29
+ }
30
30
  </style>`);
31
31
  // https://open-wc.org/docs/testing/helpers/#customize-the-fixture-container
32
32
  const parentNode = document.createElement('div');
@@ -341,15 +341,15 @@ describe('HistogramDateRange', () => {
341
341
  });
342
342
  it('allows range to be pre-selected', async () => {
343
343
  var _a, _b;
344
- const el = await fixture(html `
345
- <histogram-date-range
346
- minDate="1900"
347
- maxDate="Dec 4, 2020"
348
- minSelectedDate="2012"
349
- maxSelectedDate="2019"
350
- bins="[33, 1, 100]"
351
- >
352
- </histogram-date-range>
344
+ const el = await fixture(html `
345
+ <histogram-date-range
346
+ minDate="1900"
347
+ maxDate="Dec 4, 2020"
348
+ minSelectedDate="2012"
349
+ maxSelectedDate="2019"
350
+ bins="[33, 1, 100]"
351
+ >
352
+ </histogram-date-range>
353
353
  `);
354
354
  const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
355
355
  expect(minDateInput.value).to.eq('2012');
@@ -358,15 +358,15 @@ describe('HistogramDateRange', () => {
358
358
  });
359
359
  it('extends the selected range when the histogram is clicked outside of the current range', async () => {
360
360
  var _a, _b;
361
- const el = await fixture(html `
362
- <histogram-date-range
363
- minDate="1900"
364
- maxDate="2020"
365
- minSelectedDate="1950"
366
- maxSelectedDate="1955"
367
- bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
368
- >
369
- </histogram-date-range>
361
+ const el = await fixture(html `
362
+ <histogram-date-range
363
+ minDate="1900"
364
+ maxDate="2020"
365
+ minSelectedDate="1950"
366
+ maxSelectedDate="1955"
367
+ bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
368
+ >
369
+ </histogram-date-range>
370
370
  `);
371
371
  const leftBarToClick = Array.from((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar'))[1]; // click on second bar to the left
372
372
  leftBarToClick.dispatchEvent(new Event('click'));
@@ -378,15 +378,15 @@ describe('HistogramDateRange', () => {
378
378
  });
379
379
  it('narrows the selected range when the histogram is clicked inside of the current range', async () => {
380
380
  var _a, _b;
381
- const el = await fixture(html `
382
- <histogram-date-range
383
- minDate="1900"
384
- maxDate="2020"
385
- minSelectedDate="1900"
386
- maxSelectedDate="2020"
387
- bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
388
- >
389
- </histogram-date-range>
381
+ const el = await fixture(html `
382
+ <histogram-date-range
383
+ minDate="1900"
384
+ maxDate="2020"
385
+ minSelectedDate="1900"
386
+ maxSelectedDate="2020"
387
+ bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
388
+ >
389
+ </histogram-date-range>
390
390
  `);
391
391
  ///////////////////////////////////////////////
392
392
  // NB: the slider nearest the clicked bar moves
@@ -400,15 +400,15 @@ describe('HistogramDateRange', () => {
400
400
  });
401
401
  it('handles invalid pre-selected range by defaulting to overall max and min', async () => {
402
402
  var _a, _b;
403
- const el = await fixture(html `
404
- <histogram-date-range
405
- minDate="1900"
406
- maxDate="2020"
407
- minSelectedDate="2000xyz"
408
- maxSelectedDate="5000"
409
- bins="[33, 1, 100]"
410
- >
411
- </histogram-date-range>
403
+ const el = await fixture(html `
404
+ <histogram-date-range
405
+ minDate="1900"
406
+ maxDate="2020"
407
+ minSelectedDate="2000xyz"
408
+ maxSelectedDate="5000"
409
+ bins="[33, 1, 100]"
410
+ >
411
+ </histogram-date-range>
412
412
  `);
413
413
  const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
414
414
  // malformed min date defaults to overall min
@@ -419,16 +419,16 @@ describe('HistogramDateRange', () => {
419
419
  });
420
420
  it('handles year values less than 1000 correctly', async () => {
421
421
  var _a, _b;
422
- const el = await fixture(html `
423
- <histogram-date-range
424
- dateFormat="M/D/YYYY"
425
- minDate="-2000"
426
- maxDate="2000"
427
- minSelectedDate="-500"
428
- maxSelectedDate="500"
429
- bins="[33, 1, 100]"
430
- >
431
- </histogram-date-range>
422
+ const el = await fixture(html `
423
+ <histogram-date-range
424
+ dateFormat="M/D/YYYY"
425
+ minDate="-2000"
426
+ maxDate="2000"
427
+ minSelectedDate="-500"
428
+ maxSelectedDate="500"
429
+ bins="[33, 1, 100]"
430
+ >
431
+ </histogram-date-range>
432
432
  `);
433
433
  const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
434
434
  expect(minDateInput.value).to.eq('1/1/-500');
@@ -437,23 +437,23 @@ describe('HistogramDateRange', () => {
437
437
  });
438
438
  it('handles missing data', async () => {
439
439
  var _a, _b;
440
- let el = await fixture(html `<histogram-date-range>
441
- minDate="1900" maxDate="2020" bins=""
440
+ let el = await fixture(html `<histogram-date-range>
441
+ minDate="1900" maxDate="2020" bins=""
442
442
  </histogram-date-range>`);
443
443
  expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.innerHTML).to.contain('no data');
444
- el = await fixture(html `<histogram-date-range
445
- minDate="1900"
446
- maxDate="2020"
447
- bins="[]"
448
- missingDataMessage="no data available"
444
+ el = await fixture(html `<histogram-date-range
445
+ minDate="1900"
446
+ maxDate="2020"
447
+ bins="[]"
448
+ missingDataMessage="no data available"
449
449
  ></histogram-date-range>`);
450
450
  expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.innerHTML).to.contain('no data available');
451
451
  });
452
452
  it('correctly displays data consisting of a single bin', async () => {
453
453
  var _a;
454
- const el = await fixture(html `
455
- <histogram-date-range minDate="2020" maxDate="2020" bins="[50]">
456
- </histogram-date-range>
454
+ const el = await fixture(html `
455
+ <histogram-date-range minDate="2020" maxDate="2020" bins="[50]">
456
+ </histogram-date-range>
457
457
  `);
458
458
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
459
459
  const heights = Array.from(bars).map(b => b.height.baseVal.value);
@@ -461,9 +461,9 @@ describe('HistogramDateRange', () => {
461
461
  });
462
462
  it('correctly displays small diff between max and min values', async () => {
463
463
  var _a;
464
- const el = await fixture(html `
465
- <histogram-date-range bins="[1519,2643,1880,2041,1638,1441]">
466
- </histogram-date-range>
464
+ const el = await fixture(html `
465
+ <histogram-date-range bins="[1519,2643,1880,2041,1638,1441]">
466
+ </histogram-date-range>
467
467
  `);
468
468
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
469
469
  const heights = Array.from(bars).map(b => b.height.baseVal.value);
@@ -471,15 +471,15 @@ describe('HistogramDateRange', () => {
471
471
  });
472
472
  it('correctly aligns bins to exact month boundaries when binSnapping=month', async () => {
473
473
  var _a;
474
- const el = await fixture(html `
475
- <histogram-date-range
476
- binSnapping="month"
477
- dateFormat="YYYY-MM"
478
- tooltipDateFormat="MMM YYYY"
479
- minDate="2020-01"
480
- maxDate="2021-12"
481
- bins="[10,20,30,40,50,60,70,80]"
482
- ></histogram-date-range>
474
+ const el = await fixture(html `
475
+ <histogram-date-range
476
+ binSnapping="month"
477
+ dateFormat="YYYY-MM"
478
+ tooltipDateFormat="MMM YYYY"
479
+ minDate="2020-01"
480
+ maxDate="2021-12"
481
+ bins="[10,20,30,40,50,60,70,80]"
482
+ ></histogram-date-range>
483
483
  `);
484
484
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
485
485
  const tooltips = Array.from(bars).map(b => b.dataset.tooltip);
@@ -496,15 +496,15 @@ describe('HistogramDateRange', () => {
496
496
  });
497
497
  it('correctly handles month snapping for years 0-99', async () => {
498
498
  var _a;
499
- const el = await fixture(html `
500
- <histogram-date-range
501
- binSnapping="month"
502
- dateFormat="YYYY-MM"
503
- tooltipDateFormat="MMM YYYY"
504
- minDate="0050-01"
505
- maxDate="0065-12"
506
- bins="[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32]"
507
- ></histogram-date-range>
499
+ const el = await fixture(html `
500
+ <histogram-date-range
501
+ binSnapping="month"
502
+ dateFormat="YYYY-MM"
503
+ tooltipDateFormat="MMM YYYY"
504
+ minDate="0050-01"
505
+ maxDate="0065-12"
506
+ bins="[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32]"
507
+ ></histogram-date-range>
508
508
  `);
509
509
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
510
510
  const tooltips = Array.from(bars).map(b => b.dataset.tooltip);
@@ -545,13 +545,13 @@ describe('HistogramDateRange', () => {
545
545
  });
546
546
  it('correctly aligns bins to exact year boundaries when binSnapping=year', async () => {
547
547
  var _a;
548
- const el = await fixture(html `
549
- <histogram-date-range
550
- binSnapping="year"
551
- minDate="2000"
552
- maxDate="2019"
553
- bins="[10,20,30,40,50,60,70,80,90,100]"
554
- ></histogram-date-range>
548
+ const el = await fixture(html `
549
+ <histogram-date-range
550
+ binSnapping="year"
551
+ minDate="2000"
552
+ maxDate="2019"
553
+ bins="[10,20,30,40,50,60,70,80,90,100]"
554
+ ></histogram-date-range>
555
555
  `);
556
556
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
557
557
  const tooltips = Array.from(bars).map(b => b.dataset.tooltip);
@@ -570,14 +570,14 @@ describe('HistogramDateRange', () => {
570
570
  });
571
571
  it('correctly handles year snapping for years 0-99', async () => {
572
572
  var _a;
573
- const el = await fixture(html `
574
- <histogram-date-range
575
- binSnapping="year"
576
- dateFormat="YYYY"
577
- minDate="0020"
578
- maxDate="0025"
579
- bins="[1,2,3,4,5,6]"
580
- ></histogram-date-range>
573
+ const el = await fixture(html `
574
+ <histogram-date-range
575
+ binSnapping="year"
576
+ dateFormat="YYYY"
577
+ minDate="0020"
578
+ maxDate="0025"
579
+ bins="[1,2,3,4,5,6]"
580
+ ></histogram-date-range>
581
581
  `);
582
582
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
583
583
  const tooltips = Array.from(bars).map(b => b.dataset.tooltip);
@@ -585,14 +585,14 @@ describe('HistogramDateRange', () => {
585
585
  });
586
586
  it('does not duplicate start/end date in tooltips when representing a single year', async () => {
587
587
  var _a;
588
- const el = await fixture(html `
589
- <histogram-date-range
590
- binSnapping="year"
591
- dateFormat="YYYY"
592
- minDate="2001"
593
- maxDate="2005"
594
- bins="[10,20,30,40,50]"
595
- ></histogram-date-range>
588
+ const el = await fixture(html `
589
+ <histogram-date-range
590
+ binSnapping="year"
591
+ dateFormat="YYYY"
592
+ minDate="2001"
593
+ maxDate="2005"
594
+ bins="[10,20,30,40,50]"
595
+ ></histogram-date-range>
596
596
  `);
597
597
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
598
598
  const tooltips = Array.from(bars).map(b => b.dataset.tooltip);
@@ -600,13 +600,13 @@ describe('HistogramDateRange', () => {
600
600
  });
601
601
  it('falls back to default date format for tooltips if no tooltip date format provided', async () => {
602
602
  var _a;
603
- const el = await fixture(html `
604
- <histogram-date-range
605
- binSnapping="year"
606
- minDate="2001"
607
- maxDate="2005"
608
- bins="[10,20,30,40,50]"
609
- ></histogram-date-range>
603
+ const el = await fixture(html `
604
+ <histogram-date-range
605
+ binSnapping="year"
606
+ minDate="2001"
607
+ maxDate="2005"
608
+ bins="[10,20,30,40,50]"
609
+ ></histogram-date-range>
610
610
  `);
611
611
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
612
612
  let tooltips = Array.from(bars).map(b => b.dataset.tooltip);
@@ -641,14 +641,14 @@ describe('HistogramDateRange', () => {
641
641
  });
642
642
  it('has a disabled state', async () => {
643
643
  var _a, _b, _c;
644
- const el = await fixture(html `
645
- <histogram-date-range
646
- minDate="1900"
647
- maxDate="2020"
648
- disabled
649
- bins="[33, 1, 100]"
650
- >
651
- </histogram-date-range>
644
+ const el = await fixture(html `
645
+ <histogram-date-range
646
+ minDate="1900"
647
+ maxDate="2020"
648
+ disabled
649
+ bins="[33, 1, 100]"
650
+ >
651
+ </histogram-date-range>
652
652
  `);
653
653
  expect((_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.inner-container')) === null || _b === void 0 ? void 0 : _b.classList.contains('disabled')).to.eq(true);
654
654
  const minSlider = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#slider-min');
@@ -666,28 +666,28 @@ describe('HistogramDateRange', () => {
666
666
  });
667
667
  it('has a loading state with an activity indicator', async () => {
668
668
  var _a, _b, _c, _d;
669
- const el = await fixture(html `
670
- <histogram-date-range
671
- minDate="1900"
672
- maxDate="2020"
673
- loading
674
- bins="[33, 1, 100]"
675
- >
676
- </histogram-date-range>
669
+ const el = await fixture(html `
670
+ <histogram-date-range
671
+ minDate="1900"
672
+ maxDate="2020"
673
+ loading
674
+ bins="[33, 1, 100]"
675
+ >
676
+ </histogram-date-range>
677
677
  `);
678
678
  expect((_d = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-activity-indicator')) === null || _b === void 0 ? void 0 : _b.attributes) === null || _c === void 0 ? void 0 : _c.getNamedItem('mode')) === null || _d === void 0 ? void 0 : _d.value).to.eq('processing');
679
679
  });
680
680
  it('can use LitElement bound properties', async () => {
681
681
  var _a, _b;
682
- const el = await fixture(html `
683
- <histogram-date-range
684
- .minDate=${1900}
685
- .maxDate=${'Dec 4, 2020'}
686
- .minSelectedDate=${2012}
687
- .maxSelectedDate=${2019}
688
- .bins=${[33, 1, 100]}
689
- >
690
- </histogram-date-range>
682
+ const el = await fixture(html `
683
+ <histogram-date-range
684
+ .minDate=${1900}
685
+ .maxDate=${'Dec 4, 2020'}
686
+ .minSelectedDate=${2012}
687
+ .maxSelectedDate=${2019}
688
+ .bins=${[33, 1, 100]}
689
+ >
690
+ </histogram-date-range>
691
691
  `);
692
692
  const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
693
693
  expect(minDateInput.value).to.eq('2012');