@internetarchive/histogram-date-range 1.4.2-alpha-webdev8495.0 → 1.4.2

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 (7) hide show
  1. package/dist/src/histogram-date-range.js +254 -254
  2. package/dist/src/histogram-date-range.js.map +1 -1
  3. package/dist/test/histogram-date-range.test.js +173 -173
  4. package/dist/test/histogram-date-range.test.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/histogram-date-range.ts +1189 -1189
  7. package/test/histogram-date-range.test.ts +1079 -1079
package/dist/test/histogram-date-range.test.js CHANGED
@@ -3,31 +3,31 @@ import { html, fixture, expect, oneEvent, aTimeout } from '@open-wc/testing';
3
3
  import '../src/histogram-date-range';
4
4
  const SLIDER_WIDTH = 10;
5
5
  const WIDTH = 200;
6
- const subject = html `
7
- <histogram-date-range
8
- width="${WIDTH}"
9
- tooltipWidth="140"
10
- height="50"
11
- dateFormat="M/D/YYYY"
12
- minDate="1900"
13
- maxDate="12/4/2020"
14
- bins="[33, 1, 100]"
15
- >
16
- </histogram-date-range>
6
+ const subject = html `
7
+ <histogram-date-range
8
+ width="${WIDTH}"
9
+ tooltipWidth="140"
10
+ height="50"
11
+ dateFormat="M/D/YYYY"
12
+ minDate="1900"
13
+ maxDate="12/4/2020"
14
+ bins="[33, 1, 100]"
15
+ >
16
+ </histogram-date-range>
17
17
  `;
18
18
  async function createCustomElementInHTMLContainer() {
19
- document.head.insertAdjacentHTML('beforeend', `<style>
20
- html {
21
- font-size:10px;
22
- }
23
- .container {
24
- width: 400px;
25
- height: 400px;
26
- display: flex;
27
- background: #FFF6E1;
28
- justify-content: center;
29
- align-items: center;
30
- }
19
+ document.head.insertAdjacentHTML('beforeend', `<style>
20
+ html {
21
+ font-size:10px;
22
+ }
23
+ .container {
24
+ width: 400px;
25
+ height: 400px;
26
+ display: flex;
27
+ background: #FFF6E1;
28
+ justify-content: center;
29
+ align-items: center;
30
+ }
31
31
  </style>`);
32
32
  // https://open-wc.org/docs/testing/helpers/#customize-the-fixture-container
33
33
  const parentNode = document.createElement('div');
@@ -399,15 +399,15 @@ describe('HistogramDateRange', () => {
399
399
  });
400
400
  it('allows range to be pre-selected', async () => {
401
401
  var _a, _b;
402
- const el = await fixture(html `
403
- <histogram-date-range
404
- minDate="1900"
405
- maxDate="Dec 4, 2020"
406
- minSelectedDate="2012"
407
- maxSelectedDate="2019"
408
- bins="[33, 1, 100]"
409
- >
410
- </histogram-date-range>
402
+ const el = await fixture(html `
403
+ <histogram-date-range
404
+ minDate="1900"
405
+ maxDate="Dec 4, 2020"
406
+ minSelectedDate="2012"
407
+ maxSelectedDate="2019"
408
+ bins="[33, 1, 100]"
409
+ >
410
+ </histogram-date-range>
411
411
  `);
412
412
  const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
413
413
  expect(minDateInput.value).to.eq('2012');
@@ -416,15 +416,15 @@ describe('HistogramDateRange', () => {
416
416
  });
417
417
  it('extends the selected range when the histogram is clicked outside of the current range', async () => {
418
418
  var _a, _b;
419
- const el = await fixture(html `
420
- <histogram-date-range
421
- minDate="1900"
422
- maxDate="2020"
423
- minSelectedDate="1950"
424
- maxSelectedDate="1955"
425
- bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
426
- >
427
- </histogram-date-range>
419
+ const el = await fixture(html `
420
+ <histogram-date-range
421
+ minDate="1900"
422
+ maxDate="2020"
423
+ minSelectedDate="1950"
424
+ maxSelectedDate="1955"
425
+ bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
426
+ >
427
+ </histogram-date-range>
428
428
  `);
429
429
  const leftBarToClick = Array.from((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target'))[1]; // click on second bar to the left
430
430
  leftBarToClick.dispatchEvent(new Event('click'));
@@ -436,15 +436,15 @@ describe('HistogramDateRange', () => {
436
436
  });
437
437
  it('narrows the selected range when the histogram is clicked inside of the current range', async () => {
438
438
  var _a, _b;
439
- const el = await fixture(html `
440
- <histogram-date-range
441
- minDate="1900"
442
- maxDate="2020"
443
- minSelectedDate="1900"
444
- maxSelectedDate="2020"
445
- bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
446
- >
447
- </histogram-date-range>
439
+ const el = await fixture(html `
440
+ <histogram-date-range
441
+ minDate="1900"
442
+ maxDate="2020"
443
+ minSelectedDate="1900"
444
+ maxSelectedDate="2020"
445
+ bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
446
+ >
447
+ </histogram-date-range>
448
448
  `);
449
449
  ///////////////////////////////////////////////
450
450
  // NB: the slider nearest the clicked bar moves
@@ -458,15 +458,15 @@ describe('HistogramDateRange', () => {
458
458
  });
459
459
  it('handles invalid pre-selected range by defaulting to overall max and min', async () => {
460
460
  var _a, _b;
461
- const el = await fixture(html `
462
- <histogram-date-range
463
- minDate="1900"
464
- maxDate="2020"
465
- minSelectedDate="2000xyz"
466
- maxSelectedDate="5000"
467
- bins="[33, 1, 100]"
468
- >
469
- </histogram-date-range>
461
+ const el = await fixture(html `
462
+ <histogram-date-range
463
+ minDate="1900"
464
+ maxDate="2020"
465
+ minSelectedDate="2000xyz"
466
+ maxSelectedDate="5000"
467
+ bins="[33, 1, 100]"
468
+ >
469
+ </histogram-date-range>
470
470
  `);
471
471
  const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
472
472
  // malformed min date defaults to overall min
@@ -477,16 +477,16 @@ describe('HistogramDateRange', () => {
477
477
  });
478
478
  it('handles year values less than 1000 correctly', async () => {
479
479
  var _a, _b;
480
- const el = await fixture(html `
481
- <histogram-date-range
482
- dateFormat="M/D/YYYY"
483
- minDate="-2000"
484
- maxDate="2000"
485
- minSelectedDate="-500"
486
- maxSelectedDate="500"
487
- bins="[33, 1, 100]"
488
- >
489
- </histogram-date-range>
480
+ const el = await fixture(html `
481
+ <histogram-date-range
482
+ dateFormat="M/D/YYYY"
483
+ minDate="-2000"
484
+ maxDate="2000"
485
+ minSelectedDate="-500"
486
+ maxSelectedDate="500"
487
+ bins="[33, 1, 100]"
488
+ >
489
+ </histogram-date-range>
490
490
  `);
491
491
  const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
492
492
  expect(minDateInput.value).to.eq('1/1/-500');
@@ -495,23 +495,23 @@ describe('HistogramDateRange', () => {
495
495
  });
496
496
  it('handles missing data', async () => {
497
497
  var _a, _b;
498
- let el = await fixture(html `<histogram-date-range>
499
- minDate="1900" maxDate="2020" bins=""
498
+ let el = await fixture(html `<histogram-date-range>
499
+ minDate="1900" maxDate="2020" bins=""
500
500
  </histogram-date-range>`);
501
501
  expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.innerHTML).to.contain('no data');
502
- el = await fixture(html `<histogram-date-range
503
- minDate="1900"
504
- maxDate="2020"
505
- bins="[]"
506
- missingDataMessage="no data available"
502
+ el = await fixture(html `<histogram-date-range
503
+ minDate="1900"
504
+ maxDate="2020"
505
+ bins="[]"
506
+ missingDataMessage="no data available"
507
507
  ></histogram-date-range>`);
508
508
  expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.innerHTML).to.contain('no data available');
509
509
  });
510
510
  it('correctly displays data consisting of a single bin', async () => {
511
511
  var _a;
512
- const el = await fixture(html `
513
- <histogram-date-range minDate="2020" maxDate="2020" bins="[50]">
514
- </histogram-date-range>
512
+ const el = await fixture(html `
513
+ <histogram-date-range minDate="2020" maxDate="2020" bins="[50]">
514
+ </histogram-date-range>
515
515
  `);
516
516
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
517
517
  const heights = Array.from(bars, b => b.height.baseVal.value);
@@ -519,9 +519,9 @@ describe('HistogramDateRange', () => {
519
519
  });
520
520
  it('correctly displays small diff between max and min values', async () => {
521
521
  var _a;
522
- const el = await fixture(html `
523
- <histogram-date-range bins="[1519,2643,1880,2041,1638,1441]">
524
- </histogram-date-range>
522
+ const el = await fixture(html `
523
+ <histogram-date-range bins="[1519,2643,1880,2041,1638,1441]">
524
+ </histogram-date-range>
525
525
  `);
526
526
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
527
527
  const heights = Array.from(bars, b => b.height.baseVal.value);
@@ -529,15 +529,15 @@ describe('HistogramDateRange', () => {
529
529
  });
530
530
  it('correctly aligns bins to exact month boundaries when binSnapping=month', async () => {
531
531
  var _a;
532
- const el = await fixture(html `
533
- <histogram-date-range
534
- binSnapping="month"
535
- dateFormat="YYYY-MM"
536
- tooltipDateFormat="MMM YYYY"
537
- minDate="2020-01"
538
- maxDate="2021-12"
539
- bins="[10,20,30,40,50,60,70,80]"
540
- ></histogram-date-range>
532
+ const el = await fixture(html `
533
+ <histogram-date-range
534
+ binSnapping="month"
535
+ dateFormat="YYYY-MM"
536
+ tooltipDateFormat="MMM YYYY"
537
+ minDate="2020-01"
538
+ maxDate="2021-12"
539
+ bins="[10,20,30,40,50,60,70,80]"
540
+ ></histogram-date-range>
541
541
  `);
542
542
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
543
543
  const tooltips = Array.from(bars, b => b.dataset.tooltip);
@@ -554,15 +554,15 @@ describe('HistogramDateRange', () => {
554
554
  });
555
555
  it('correctly handles month snapping for years 0-99', async () => {
556
556
  var _a;
557
- const el = await fixture(html `
558
- <histogram-date-range
559
- binSnapping="month"
560
- dateFormat="YYYY-MM"
561
- tooltipDateFormat="MMM YYYY"
562
- minDate="0050-01"
563
- maxDate="0065-12"
564
- 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]"
565
- ></histogram-date-range>
557
+ const el = await fixture(html `
558
+ <histogram-date-range
559
+ binSnapping="month"
560
+ dateFormat="YYYY-MM"
561
+ tooltipDateFormat="MMM YYYY"
562
+ minDate="0050-01"
563
+ maxDate="0065-12"
564
+ 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]"
565
+ ></histogram-date-range>
566
566
  `);
567
567
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
568
568
  const tooltips = Array.from(bars, b => b.dataset.tooltip);
@@ -603,13 +603,13 @@ describe('HistogramDateRange', () => {
603
603
  });
604
604
  it('correctly aligns bins to exact year boundaries when binSnapping=year', async () => {
605
605
  var _a;
606
- const el = await fixture(html `
607
- <histogram-date-range
608
- binSnapping="year"
609
- minDate="2000"
610
- maxDate="2019"
611
- bins="[10,20,30,40,50,60,70,80,90,100]"
612
- ></histogram-date-range>
606
+ const el = await fixture(html `
607
+ <histogram-date-range
608
+ binSnapping="year"
609
+ minDate="2000"
610
+ maxDate="2019"
611
+ bins="[10,20,30,40,50,60,70,80,90,100]"
612
+ ></histogram-date-range>
613
613
  `);
614
614
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
615
615
  const tooltips = Array.from(bars, b => b.dataset.tooltip);
@@ -628,14 +628,14 @@ describe('HistogramDateRange', () => {
628
628
  });
629
629
  it('correctly handles year snapping for years 0-99', async () => {
630
630
  var _a;
631
- const el = await fixture(html `
632
- <histogram-date-range
633
- binSnapping="year"
634
- dateFormat="YYYY"
635
- minDate="0020"
636
- maxDate="0025"
637
- bins="[1,2,3,4,5,6]"
638
- ></histogram-date-range>
631
+ const el = await fixture(html `
632
+ <histogram-date-range
633
+ binSnapping="year"
634
+ dateFormat="YYYY"
635
+ minDate="0020"
636
+ maxDate="0025"
637
+ bins="[1,2,3,4,5,6]"
638
+ ></histogram-date-range>
639
639
  `);
640
640
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
641
641
  const tooltips = Array.from(bars, b => b.dataset.tooltip);
@@ -643,14 +643,14 @@ describe('HistogramDateRange', () => {
643
643
  });
644
644
  it('does not duplicate start/end date in tooltips when representing a single year', async () => {
645
645
  var _a;
646
- const el = await fixture(html `
647
- <histogram-date-range
648
- binSnapping="year"
649
- dateFormat="YYYY"
650
- minDate="2001"
651
- maxDate="2005"
652
- bins="[10,20,30,40,50]"
653
- ></histogram-date-range>
646
+ const el = await fixture(html `
647
+ <histogram-date-range
648
+ binSnapping="year"
649
+ dateFormat="YYYY"
650
+ minDate="2001"
651
+ maxDate="2005"
652
+ bins="[10,20,30,40,50]"
653
+ ></histogram-date-range>
654
654
  `);
655
655
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
656
656
  const tooltips = Array.from(bars, b => b.dataset.tooltip);
@@ -658,13 +658,13 @@ describe('HistogramDateRange', () => {
658
658
  });
659
659
  it('falls back to default date format for tooltips if no tooltip date format provided', async () => {
660
660
  var _a;
661
- const el = await fixture(html `
662
- <histogram-date-range
663
- binSnapping="year"
664
- minDate="2001"
665
- maxDate="2005"
666
- bins="[10,20,30,40,50]"
667
- ></histogram-date-range>
661
+ const el = await fixture(html `
662
+ <histogram-date-range
663
+ binSnapping="year"
664
+ minDate="2001"
665
+ maxDate="2005"
666
+ bins="[10,20,30,40,50]"
667
+ ></histogram-date-range>
668
668
  `);
669
669
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
670
670
  let tooltips = Array.from(bars, b => b.dataset.tooltip);
@@ -699,14 +699,14 @@ describe('HistogramDateRange', () => {
699
699
  });
700
700
  it('has a disabled state', async () => {
701
701
  var _a, _b, _c;
702
- const el = await fixture(html `
703
- <histogram-date-range
704
- minDate="1900"
705
- maxDate="2020"
706
- disabled
707
- bins="[33, 1, 100]"
708
- >
709
- </histogram-date-range>
702
+ const el = await fixture(html `
703
+ <histogram-date-range
704
+ minDate="1900"
705
+ maxDate="2020"
706
+ disabled
707
+ bins="[33, 1, 100]"
708
+ >
709
+ </histogram-date-range>
710
710
  `);
711
711
  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);
712
712
  const minSlider = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#slider-min');
@@ -724,28 +724,28 @@ describe('HistogramDateRange', () => {
724
724
  });
725
725
  it('has a loading state with an activity indicator', async () => {
726
726
  var _a, _b, _c, _d;
727
- const el = await fixture(html `
728
- <histogram-date-range
729
- minDate="1900"
730
- maxDate="2020"
731
- loading
732
- bins="[33, 1, 100]"
733
- >
734
- </histogram-date-range>
727
+ const el = await fixture(html `
728
+ <histogram-date-range
729
+ minDate="1900"
730
+ maxDate="2020"
731
+ loading
732
+ bins="[33, 1, 100]"
733
+ >
734
+ </histogram-date-range>
735
735
  `);
736
736
  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');
737
737
  });
738
738
  it('can use LitElement bound properties', async () => {
739
739
  var _a, _b;
740
- const el = await fixture(html `
741
- <histogram-date-range
742
- .minDate=${1900}
743
- .maxDate=${'Dec 4, 2020'}
744
- .minSelectedDate=${2012}
745
- .maxSelectedDate=${2019}
746
- .bins=${[33, 1, 100]}
747
- >
748
- </histogram-date-range>
740
+ const el = await fixture(html `
741
+ <histogram-date-range
742
+ .minDate=${1900}
743
+ .maxDate=${'Dec 4, 2020'}
744
+ .minSelectedDate=${2012}
745
+ .maxSelectedDate=${2019}
746
+ .bins=${[33, 1, 100]}
747
+ >
748
+ </histogram-date-range>
749
749
  `);
750
750
  const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
751
751
  expect(minDateInput.value).to.eq('2012');
@@ -754,48 +754,48 @@ describe('HistogramDateRange', () => {
754
754
  });
755
755
  it('SVG accessbility - dynamic title for MIN and MAX date', async () => {
756
756
  var _a, _b;
757
- const el = await fixture(html `
758
- <histogram-date-range
759
- minDate="1900"
760
- maxDate="2020"
761
- .bins=${[33, 1, 100]}
762
- >
763
- </histogram-date-range>
757
+ const el = await fixture(html `
758
+ <histogram-date-range
759
+ minDate="1900"
760
+ maxDate="2020"
761
+ .bins=${[33, 1, 100]}
762
+ >
763
+ </histogram-date-range>
764
764
  `);
765
765
  const svg = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
766
766
  expect((_b = svg.querySelector('title')) === null || _b === void 0 ? void 0 : _b.textContent).to.equal('Filter results for dates from 1900 to 2020');
767
767
  });
768
768
  it('SVG accessbility - dynamic title for MIN date', async () => {
769
769
  var _a, _b;
770
- const el = await fixture(html `
771
- <histogram-date-range minDate="1900" .bins=${[33, 1, 100]}>
772
- </histogram-date-range>
770
+ const el = await fixture(html `
771
+ <histogram-date-range minDate="1900" .bins=${[33, 1, 100]}>
772
+ </histogram-date-range>
773
773
  `);
774
774
  const svg = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
775
775
  expect((_b = svg.querySelector('title')) === null || _b === void 0 ? void 0 : _b.textContent).to.equal('Filter results for dates from 1900');
776
776
  });
777
777
  it('SVG accessbility - dynamic title for MAX date', async () => {
778
778
  var _a, _b;
779
- const el = await fixture(html `
780
- <histogram-date-range maxDate="2020" .bins=${[33, 1, 100]}>
781
- </histogram-date-range>
779
+ const el = await fixture(html `
780
+ <histogram-date-range maxDate="2020" .bins=${[33, 1, 100]}>
781
+ </histogram-date-range>
782
782
  `);
783
783
  const svg = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
784
784
  expect((_b = svg.querySelector('title')) === null || _b === void 0 ? void 0 : _b.textContent).to.equal('Filter results for dates up to 2020');
785
785
  });
786
786
  it('SVG accessbility - dynamic title for all dates', async () => {
787
787
  var _a, _b;
788
- const el = await fixture(html `
789
- <histogram-date-range .bins=${[33, 1, 100]}> </histogram-date-range>
788
+ const el = await fixture(html `
789
+ <histogram-date-range .bins=${[33, 1, 100]}> </histogram-date-range>
790
790
  `);
791
791
  const svg = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
792
792
  expect((_b = svg.querySelector('title')) === null || _b === void 0 ? void 0 : _b.textContent).to.equal('Filter results for dates');
793
793
  });
794
794
  it('SVG accessibility - dynamic desc', async () => {
795
795
  var _a, _b;
796
- const el = await fixture(html `
797
- <histogram-date-range maxDate="2020" .bins=${[33, 1, 100]}>
798
- </histogram-date-range>
796
+ const el = await fixture(html `
797
+ <histogram-date-range maxDate="2020" .bins=${[33, 1, 100]}>
798
+ </histogram-date-range>
799
799
  `);
800
800
  const svg = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
801
801
  expect((_b = svg.querySelector('desc')) === null || _b === void 0 ? void 0 : _b.textContent).to.equal('This histogram shows the distribution of dates up to 2020');