@internetarchive/histogram-date-range 1.4.0-alpha-webdev7756.0 → 1.4.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/demo/index.html +22 -9
- package/demo/js/{lit-histogram-wrapper.ts → app-root.ts} +4 -20
- package/dist/demo/js/app-root.d.ts +1 -2
- package/dist/demo/js/app-root.js +19 -20
- package/dist/demo/js/app-root.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js.map +1 -1
- package/dist/src/histogram-date-range.d.ts +18 -9
- package/dist/src/histogram-date-range.js +284 -268
- package/dist/src/histogram-date-range.js.map +1 -1
- package/dist/test/histogram-date-range.test.js +174 -156
- package/dist/test/histogram-date-range.test.js.map +1 -1
- package/docs/demo/index.html +22 -9
- package/docs/dist/demo/js/{lit-histogram-wrapper.js → app-root.js} +7 -22
- package/docs/dist/src/histogram-date-range.js +14 -5
- package/index.ts +7 -4
- package/package.json +1 -1
- package/src/histogram-date-range.ts +1172 -1152
- package/test/histogram-date-range.test.ts +992 -966
|
@@ -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');
|
|
@@ -35,13 +35,31 @@ async function createCustomElementInHTMLContainer() {
|
|
|
35
35
|
return fixture(subject, { parentNode });
|
|
36
36
|
}
|
|
37
37
|
describe('HistogramDateRange', () => {
|
|
38
|
-
it('shows scaled histogram bars when provided with data', async () => {
|
|
38
|
+
it('shows log-scaled histogram bars when provided with data', async () => {
|
|
39
39
|
var _a;
|
|
40
40
|
const el = await createCustomElementInHTMLContainer();
|
|
41
41
|
const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
|
|
42
42
|
const heights = Array.from(bars, b => b.height.baseVal.value);
|
|
43
43
|
expect(heights).to.eql([38, 7, 50]);
|
|
44
44
|
});
|
|
45
|
+
it('uses linear bar height scaling when specified', async () => {
|
|
46
|
+
var _a;
|
|
47
|
+
const el = await createCustomElementInHTMLContainer();
|
|
48
|
+
el.barScaling = 'linear';
|
|
49
|
+
await el.updateComplete;
|
|
50
|
+
const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
|
|
51
|
+
const heights = Array.from(bars, b => b.height.baseVal.value);
|
|
52
|
+
expect(heights).to.eql([16, 0, 50]);
|
|
53
|
+
});
|
|
54
|
+
it('uses custom bar height scaling when specified', async () => {
|
|
55
|
+
var _a;
|
|
56
|
+
const el = await createCustomElementInHTMLContainer();
|
|
57
|
+
el.barScaling = (x) => Math.sqrt(x);
|
|
58
|
+
await el.updateComplete;
|
|
59
|
+
const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
|
|
60
|
+
const heights = Array.from(bars, b => b.height.baseVal.value);
|
|
61
|
+
expect(heights).to.eql([28, 5, 50]);
|
|
62
|
+
});
|
|
45
63
|
it('changes the position of the sliders and standardizes date format when dates are entered', async () => {
|
|
46
64
|
var _a, _b;
|
|
47
65
|
const el = await createCustomElementInHTMLContainer();
|
|
@@ -366,15 +384,15 @@ describe('HistogramDateRange', () => {
|
|
|
366
384
|
});
|
|
367
385
|
it('allows range to be pre-selected', async () => {
|
|
368
386
|
var _a, _b;
|
|
369
|
-
const el = await fixture(html `
|
|
370
|
-
<histogram-date-range
|
|
371
|
-
minDate="1900"
|
|
372
|
-
maxDate="Dec 4, 2020"
|
|
373
|
-
minSelectedDate="2012"
|
|
374
|
-
maxSelectedDate="2019"
|
|
375
|
-
bins="[33, 1, 100]"
|
|
376
|
-
>
|
|
377
|
-
</histogram-date-range>
|
|
387
|
+
const el = await fixture(html `
|
|
388
|
+
<histogram-date-range
|
|
389
|
+
minDate="1900"
|
|
390
|
+
maxDate="Dec 4, 2020"
|
|
391
|
+
minSelectedDate="2012"
|
|
392
|
+
maxSelectedDate="2019"
|
|
393
|
+
bins="[33, 1, 100]"
|
|
394
|
+
>
|
|
395
|
+
</histogram-date-range>
|
|
378
396
|
`);
|
|
379
397
|
const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
|
|
380
398
|
expect(minDateInput.value).to.eq('2012');
|
|
@@ -383,15 +401,15 @@ describe('HistogramDateRange', () => {
|
|
|
383
401
|
});
|
|
384
402
|
it('extends the selected range when the histogram is clicked outside of the current range', async () => {
|
|
385
403
|
var _a, _b;
|
|
386
|
-
const el = await fixture(html `
|
|
387
|
-
<histogram-date-range
|
|
388
|
-
minDate="1900"
|
|
389
|
-
maxDate="2020"
|
|
390
|
-
minSelectedDate="1950"
|
|
391
|
-
maxSelectedDate="1955"
|
|
392
|
-
bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
|
|
393
|
-
>
|
|
394
|
-
</histogram-date-range>
|
|
404
|
+
const el = await fixture(html `
|
|
405
|
+
<histogram-date-range
|
|
406
|
+
minDate="1900"
|
|
407
|
+
maxDate="2020"
|
|
408
|
+
minSelectedDate="1950"
|
|
409
|
+
maxSelectedDate="1955"
|
|
410
|
+
bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
|
|
411
|
+
>
|
|
412
|
+
</histogram-date-range>
|
|
395
413
|
`);
|
|
396
414
|
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
|
|
397
415
|
leftBarToClick.dispatchEvent(new Event('click'));
|
|
@@ -403,15 +421,15 @@ describe('HistogramDateRange', () => {
|
|
|
403
421
|
});
|
|
404
422
|
it('narrows the selected range when the histogram is clicked inside of the current range', async () => {
|
|
405
423
|
var _a, _b;
|
|
406
|
-
const el = await fixture(html `
|
|
407
|
-
<histogram-date-range
|
|
408
|
-
minDate="1900"
|
|
409
|
-
maxDate="2020"
|
|
410
|
-
minSelectedDate="1900"
|
|
411
|
-
maxSelectedDate="2020"
|
|
412
|
-
bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
|
|
413
|
-
>
|
|
414
|
-
</histogram-date-range>
|
|
424
|
+
const el = await fixture(html `
|
|
425
|
+
<histogram-date-range
|
|
426
|
+
minDate="1900"
|
|
427
|
+
maxDate="2020"
|
|
428
|
+
minSelectedDate="1900"
|
|
429
|
+
maxSelectedDate="2020"
|
|
430
|
+
bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
|
|
431
|
+
>
|
|
432
|
+
</histogram-date-range>
|
|
415
433
|
`);
|
|
416
434
|
///////////////////////////////////////////////
|
|
417
435
|
// NB: the slider nearest the clicked bar moves
|
|
@@ -425,15 +443,15 @@ describe('HistogramDateRange', () => {
|
|
|
425
443
|
});
|
|
426
444
|
it('handles invalid pre-selected range by defaulting to overall max and min', async () => {
|
|
427
445
|
var _a, _b;
|
|
428
|
-
const el = await fixture(html `
|
|
429
|
-
<histogram-date-range
|
|
430
|
-
minDate="1900"
|
|
431
|
-
maxDate="2020"
|
|
432
|
-
minSelectedDate="2000xyz"
|
|
433
|
-
maxSelectedDate="5000"
|
|
434
|
-
bins="[33, 1, 100]"
|
|
435
|
-
>
|
|
436
|
-
</histogram-date-range>
|
|
446
|
+
const el = await fixture(html `
|
|
447
|
+
<histogram-date-range
|
|
448
|
+
minDate="1900"
|
|
449
|
+
maxDate="2020"
|
|
450
|
+
minSelectedDate="2000xyz"
|
|
451
|
+
maxSelectedDate="5000"
|
|
452
|
+
bins="[33, 1, 100]"
|
|
453
|
+
>
|
|
454
|
+
</histogram-date-range>
|
|
437
455
|
`);
|
|
438
456
|
const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
|
|
439
457
|
// malformed min date defaults to overall min
|
|
@@ -444,16 +462,16 @@ describe('HistogramDateRange', () => {
|
|
|
444
462
|
});
|
|
445
463
|
it('handles year values less than 1000 correctly', async () => {
|
|
446
464
|
var _a, _b;
|
|
447
|
-
const el = await fixture(html `
|
|
448
|
-
<histogram-date-range
|
|
449
|
-
dateFormat="M/D/YYYY"
|
|
450
|
-
minDate="-2000"
|
|
451
|
-
maxDate="2000"
|
|
452
|
-
minSelectedDate="-500"
|
|
453
|
-
maxSelectedDate="500"
|
|
454
|
-
bins="[33, 1, 100]"
|
|
455
|
-
>
|
|
456
|
-
</histogram-date-range>
|
|
465
|
+
const el = await fixture(html `
|
|
466
|
+
<histogram-date-range
|
|
467
|
+
dateFormat="M/D/YYYY"
|
|
468
|
+
minDate="-2000"
|
|
469
|
+
maxDate="2000"
|
|
470
|
+
minSelectedDate="-500"
|
|
471
|
+
maxSelectedDate="500"
|
|
472
|
+
bins="[33, 1, 100]"
|
|
473
|
+
>
|
|
474
|
+
</histogram-date-range>
|
|
457
475
|
`);
|
|
458
476
|
const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
|
|
459
477
|
expect(minDateInput.value).to.eq('1/1/-500');
|
|
@@ -462,23 +480,23 @@ describe('HistogramDateRange', () => {
|
|
|
462
480
|
});
|
|
463
481
|
it('handles missing data', async () => {
|
|
464
482
|
var _a, _b;
|
|
465
|
-
let el = await fixture(html `<histogram-date-range>
|
|
466
|
-
minDate="1900" maxDate="2020" bins=""
|
|
483
|
+
let el = await fixture(html `<histogram-date-range>
|
|
484
|
+
minDate="1900" maxDate="2020" bins=""
|
|
467
485
|
</histogram-date-range>`);
|
|
468
486
|
expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.innerHTML).to.contain('no data');
|
|
469
|
-
el = await fixture(html `<histogram-date-range
|
|
470
|
-
minDate="1900"
|
|
471
|
-
maxDate="2020"
|
|
472
|
-
bins="[]"
|
|
473
|
-
missingDataMessage="no data available"
|
|
487
|
+
el = await fixture(html `<histogram-date-range
|
|
488
|
+
minDate="1900"
|
|
489
|
+
maxDate="2020"
|
|
490
|
+
bins="[]"
|
|
491
|
+
missingDataMessage="no data available"
|
|
474
492
|
></histogram-date-range>`);
|
|
475
493
|
expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.innerHTML).to.contain('no data available');
|
|
476
494
|
});
|
|
477
495
|
it('correctly displays data consisting of a single bin', async () => {
|
|
478
496
|
var _a;
|
|
479
|
-
const el = await fixture(html `
|
|
480
|
-
<histogram-date-range minDate="2020" maxDate="2020" bins="[50]">
|
|
481
|
-
</histogram-date-range>
|
|
497
|
+
const el = await fixture(html `
|
|
498
|
+
<histogram-date-range minDate="2020" maxDate="2020" bins="[50]">
|
|
499
|
+
</histogram-date-range>
|
|
482
500
|
`);
|
|
483
501
|
const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
|
|
484
502
|
const heights = Array.from(bars, b => b.height.baseVal.value);
|
|
@@ -486,9 +504,9 @@ describe('HistogramDateRange', () => {
|
|
|
486
504
|
});
|
|
487
505
|
it('correctly displays small diff between max and min values', async () => {
|
|
488
506
|
var _a;
|
|
489
|
-
const el = await fixture(html `
|
|
490
|
-
<histogram-date-range bins="[1519,2643,1880,2041,1638,1441]">
|
|
491
|
-
</histogram-date-range>
|
|
507
|
+
const el = await fixture(html `
|
|
508
|
+
<histogram-date-range bins="[1519,2643,1880,2041,1638,1441]">
|
|
509
|
+
</histogram-date-range>
|
|
492
510
|
`);
|
|
493
511
|
const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
|
|
494
512
|
const heights = Array.from(bars, b => b.height.baseVal.value);
|
|
@@ -496,15 +514,15 @@ describe('HistogramDateRange', () => {
|
|
|
496
514
|
});
|
|
497
515
|
it('correctly aligns bins to exact month boundaries when binSnapping=month', async () => {
|
|
498
516
|
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="2020-01"
|
|
505
|
-
maxDate="2021-12"
|
|
506
|
-
bins="[10,20,30,40,50,60,70,80]"
|
|
507
|
-
></histogram-date-range>
|
|
517
|
+
const el = await fixture(html `
|
|
518
|
+
<histogram-date-range
|
|
519
|
+
binSnapping="month"
|
|
520
|
+
dateFormat="YYYY-MM"
|
|
521
|
+
tooltipDateFormat="MMM YYYY"
|
|
522
|
+
minDate="2020-01"
|
|
523
|
+
maxDate="2021-12"
|
|
524
|
+
bins="[10,20,30,40,50,60,70,80]"
|
|
525
|
+
></histogram-date-range>
|
|
508
526
|
`);
|
|
509
527
|
const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
|
|
510
528
|
const tooltips = Array.from(bars, b => b.dataset.tooltip);
|
|
@@ -521,15 +539,15 @@ describe('HistogramDateRange', () => {
|
|
|
521
539
|
});
|
|
522
540
|
it('correctly handles month snapping for years 0-99', async () => {
|
|
523
541
|
var _a;
|
|
524
|
-
const el = await fixture(html `
|
|
525
|
-
<histogram-date-range
|
|
526
|
-
binSnapping="month"
|
|
527
|
-
dateFormat="YYYY-MM"
|
|
528
|
-
tooltipDateFormat="MMM YYYY"
|
|
529
|
-
minDate="0050-01"
|
|
530
|
-
maxDate="0065-12"
|
|
531
|
-
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]"
|
|
532
|
-
></histogram-date-range>
|
|
542
|
+
const el = await fixture(html `
|
|
543
|
+
<histogram-date-range
|
|
544
|
+
binSnapping="month"
|
|
545
|
+
dateFormat="YYYY-MM"
|
|
546
|
+
tooltipDateFormat="MMM YYYY"
|
|
547
|
+
minDate="0050-01"
|
|
548
|
+
maxDate="0065-12"
|
|
549
|
+
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]"
|
|
550
|
+
></histogram-date-range>
|
|
533
551
|
`);
|
|
534
552
|
const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
|
|
535
553
|
const tooltips = Array.from(bars, b => b.dataset.tooltip);
|
|
@@ -570,13 +588,13 @@ describe('HistogramDateRange', () => {
|
|
|
570
588
|
});
|
|
571
589
|
it('correctly aligns bins to exact year boundaries when binSnapping=year', async () => {
|
|
572
590
|
var _a;
|
|
573
|
-
const el = await fixture(html `
|
|
574
|
-
<histogram-date-range
|
|
575
|
-
binSnapping="year"
|
|
576
|
-
minDate="2000"
|
|
577
|
-
maxDate="2019"
|
|
578
|
-
bins="[10,20,30,40,50,60,70,80,90,100]"
|
|
579
|
-
></histogram-date-range>
|
|
591
|
+
const el = await fixture(html `
|
|
592
|
+
<histogram-date-range
|
|
593
|
+
binSnapping="year"
|
|
594
|
+
minDate="2000"
|
|
595
|
+
maxDate="2019"
|
|
596
|
+
bins="[10,20,30,40,50,60,70,80,90,100]"
|
|
597
|
+
></histogram-date-range>
|
|
580
598
|
`);
|
|
581
599
|
const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
|
|
582
600
|
const tooltips = Array.from(bars, b => b.dataset.tooltip);
|
|
@@ -595,14 +613,14 @@ describe('HistogramDateRange', () => {
|
|
|
595
613
|
});
|
|
596
614
|
it('correctly handles year snapping for years 0-99', async () => {
|
|
597
615
|
var _a;
|
|
598
|
-
const el = await fixture(html `
|
|
599
|
-
<histogram-date-range
|
|
600
|
-
binSnapping="year"
|
|
601
|
-
dateFormat="YYYY"
|
|
602
|
-
minDate="0020"
|
|
603
|
-
maxDate="0025"
|
|
604
|
-
bins="[1,2,3,4,5,6]"
|
|
605
|
-
></histogram-date-range>
|
|
616
|
+
const el = await fixture(html `
|
|
617
|
+
<histogram-date-range
|
|
618
|
+
binSnapping="year"
|
|
619
|
+
dateFormat="YYYY"
|
|
620
|
+
minDate="0020"
|
|
621
|
+
maxDate="0025"
|
|
622
|
+
bins="[1,2,3,4,5,6]"
|
|
623
|
+
></histogram-date-range>
|
|
606
624
|
`);
|
|
607
625
|
const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
|
|
608
626
|
const tooltips = Array.from(bars, b => b.dataset.tooltip);
|
|
@@ -610,14 +628,14 @@ describe('HistogramDateRange', () => {
|
|
|
610
628
|
});
|
|
611
629
|
it('does not duplicate start/end date in tooltips when representing a single year', async () => {
|
|
612
630
|
var _a;
|
|
613
|
-
const el = await fixture(html `
|
|
614
|
-
<histogram-date-range
|
|
615
|
-
binSnapping="year"
|
|
616
|
-
dateFormat="YYYY"
|
|
617
|
-
minDate="2001"
|
|
618
|
-
maxDate="2005"
|
|
619
|
-
bins="[10,20,30,40,50]"
|
|
620
|
-
></histogram-date-range>
|
|
631
|
+
const el = await fixture(html `
|
|
632
|
+
<histogram-date-range
|
|
633
|
+
binSnapping="year"
|
|
634
|
+
dateFormat="YYYY"
|
|
635
|
+
minDate="2001"
|
|
636
|
+
maxDate="2005"
|
|
637
|
+
bins="[10,20,30,40,50]"
|
|
638
|
+
></histogram-date-range>
|
|
621
639
|
`);
|
|
622
640
|
const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
|
|
623
641
|
const tooltips = Array.from(bars, b => b.dataset.tooltip);
|
|
@@ -625,13 +643,13 @@ describe('HistogramDateRange', () => {
|
|
|
625
643
|
});
|
|
626
644
|
it('falls back to default date format for tooltips if no tooltip date format provided', async () => {
|
|
627
645
|
var _a;
|
|
628
|
-
const el = await fixture(html `
|
|
629
|
-
<histogram-date-range
|
|
630
|
-
binSnapping="year"
|
|
631
|
-
minDate="2001"
|
|
632
|
-
maxDate="2005"
|
|
633
|
-
bins="[10,20,30,40,50]"
|
|
634
|
-
></histogram-date-range>
|
|
646
|
+
const el = await fixture(html `
|
|
647
|
+
<histogram-date-range
|
|
648
|
+
binSnapping="year"
|
|
649
|
+
minDate="2001"
|
|
650
|
+
maxDate="2005"
|
|
651
|
+
bins="[10,20,30,40,50]"
|
|
652
|
+
></histogram-date-range>
|
|
635
653
|
`);
|
|
636
654
|
const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
|
|
637
655
|
let tooltips = Array.from(bars, b => b.dataset.tooltip);
|
|
@@ -666,14 +684,14 @@ describe('HistogramDateRange', () => {
|
|
|
666
684
|
});
|
|
667
685
|
it('has a disabled state', async () => {
|
|
668
686
|
var _a, _b, _c;
|
|
669
|
-
const el = await fixture(html `
|
|
670
|
-
<histogram-date-range
|
|
671
|
-
minDate="1900"
|
|
672
|
-
maxDate="2020"
|
|
673
|
-
disabled
|
|
674
|
-
bins="[33, 1, 100]"
|
|
675
|
-
>
|
|
676
|
-
</histogram-date-range>
|
|
687
|
+
const el = await fixture(html `
|
|
688
|
+
<histogram-date-range
|
|
689
|
+
minDate="1900"
|
|
690
|
+
maxDate="2020"
|
|
691
|
+
disabled
|
|
692
|
+
bins="[33, 1, 100]"
|
|
693
|
+
>
|
|
694
|
+
</histogram-date-range>
|
|
677
695
|
`);
|
|
678
696
|
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);
|
|
679
697
|
const minSlider = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#slider-min');
|
|
@@ -691,28 +709,28 @@ describe('HistogramDateRange', () => {
|
|
|
691
709
|
});
|
|
692
710
|
it('has a loading state with an activity indicator', async () => {
|
|
693
711
|
var _a, _b, _c, _d;
|
|
694
|
-
const el = await fixture(html `
|
|
695
|
-
<histogram-date-range
|
|
696
|
-
minDate="1900"
|
|
697
|
-
maxDate="2020"
|
|
698
|
-
loading
|
|
699
|
-
bins="[33, 1, 100]"
|
|
700
|
-
>
|
|
701
|
-
</histogram-date-range>
|
|
712
|
+
const el = await fixture(html `
|
|
713
|
+
<histogram-date-range
|
|
714
|
+
minDate="1900"
|
|
715
|
+
maxDate="2020"
|
|
716
|
+
loading
|
|
717
|
+
bins="[33, 1, 100]"
|
|
718
|
+
>
|
|
719
|
+
</histogram-date-range>
|
|
702
720
|
`);
|
|
703
721
|
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');
|
|
704
722
|
});
|
|
705
723
|
it('can use LitElement bound properties', async () => {
|
|
706
724
|
var _a, _b;
|
|
707
|
-
const el = await fixture(html `
|
|
708
|
-
<histogram-date-range
|
|
709
|
-
.minDate=${1900}
|
|
710
|
-
.maxDate=${'Dec 4, 2020'}
|
|
711
|
-
.minSelectedDate=${2012}
|
|
712
|
-
.maxSelectedDate=${2019}
|
|
713
|
-
.bins=${[33, 1, 100]}
|
|
714
|
-
>
|
|
715
|
-
</histogram-date-range>
|
|
725
|
+
const el = await fixture(html `
|
|
726
|
+
<histogram-date-range
|
|
727
|
+
.minDate=${1900}
|
|
728
|
+
.maxDate=${'Dec 4, 2020'}
|
|
729
|
+
.minSelectedDate=${2012}
|
|
730
|
+
.maxSelectedDate=${2019}
|
|
731
|
+
.bins=${[33, 1, 100]}
|
|
732
|
+
>
|
|
733
|
+
</histogram-date-range>
|
|
716
734
|
`);
|
|
717
735
|
const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
|
|
718
736
|
expect(minDateInput.value).to.eq('2012');
|