@internetarchive/histogram-date-range 0.0.11-beta → 0.1.2-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.
- package/demo/index.css +23 -0
- package/demo/index.html +51 -42
- package/dist/src/histogram-date-range.d.ts +22 -13
- package/dist/src/histogram-date-range.js +134 -70
- package/dist/src/histogram-date-range.js.map +1 -1
- package/dist/test/histogram-date-range.test.js +130 -34
- package/dist/test/histogram-date-range.test.js.map +1 -1
- package/docs/_snowpack/pkg/@internetarchive/ia-activity-indicator/ia-activity-indicator.js +9 -2534
- package/docs/_snowpack/pkg/common/lit-element-3254fb50.js +22 -0
- package/docs/_snowpack/pkg/common/lit-html-1d707ff6.js +8 -0
- package/docs/_snowpack/pkg/dayjs/esm/index.js +3 -3
- package/docs/_snowpack/pkg/dayjs/esm/plugin/customParseFormat.js +342 -0
- package/docs/_snowpack/pkg/import-map.json +1 -0
- package/docs/_snowpack/pkg/lit/decorators.js +8 -2
- package/docs/_snowpack/pkg/lit/directives/live.js +4 -4
- package/docs/_snowpack/pkg/lit.js +2 -23
- package/docs/demo/index.css +23 -0
- package/docs/demo/index.html +51 -42
- package/docs/dist/src/histogram-date-range.js +95 -51
- package/package.json +21 -20
- package/src/histogram-date-range.ts +176 -76
- package/test/histogram-date-range.test.ts +172 -38
- package/docs/_snowpack/env.js +0 -3
- package/docs/_snowpack/pkg/common/lit-html-e67c9f49.js +0 -8
- package/types/static.d.ts +0 -4
package/demo/index.css
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
html {
|
|
2
|
+
font-size: 10px;
|
|
3
|
+
font-family: sans-serif;
|
|
4
|
+
}
|
|
5
|
+
body {
|
|
6
|
+
background: white;
|
|
7
|
+
}
|
|
8
|
+
.container {
|
|
9
|
+
margin-top: 20px;
|
|
10
|
+
display: grid;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
}
|
|
13
|
+
.description {
|
|
14
|
+
margin: 10px auto;
|
|
15
|
+
}
|
|
16
|
+
.received-events {
|
|
17
|
+
position: absolute;
|
|
18
|
+
top: 0;
|
|
19
|
+
}
|
|
20
|
+
button {
|
|
21
|
+
font-size: 100%;
|
|
22
|
+
margin: 10px auto;
|
|
23
|
+
}
|
package/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
|
-
<
|
|
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
|
-
|
|
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">
|
|
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">
|
|
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
|
|
72
|
-
maxDate="
|
|
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
|
|
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
|
|
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>
|
|
@@ -42,14 +42,18 @@ export declare class HistogramDateRange extends LitElement {
|
|
|
42
42
|
private calculateHistData;
|
|
43
43
|
private get hasBinData();
|
|
44
44
|
private get _numBins();
|
|
45
|
+
private get histogramLeftEdgeX();
|
|
46
|
+
private get histogramRightEdgeX();
|
|
45
47
|
/** component's loading (and disabled) state */
|
|
46
48
|
get loading(): boolean;
|
|
47
49
|
set loading(value: boolean);
|
|
48
50
|
/** formatted minimum date of selected date range */
|
|
49
51
|
get minSelectedDate(): string;
|
|
52
|
+
/** updates minSelectedDate if new date is valid */
|
|
50
53
|
set minSelectedDate(rawDate: string);
|
|
51
54
|
/** formatted maximum date of selected date range */
|
|
52
55
|
get maxSelectedDate(): string;
|
|
56
|
+
/** updates maxSelectedDate if new date is valid */
|
|
53
57
|
set maxSelectedDate(rawDate: string);
|
|
54
58
|
/** horizontal position of min date slider */
|
|
55
59
|
get minSliderX(): number;
|
|
@@ -70,18 +74,18 @@ export declare class HistogramDateRange extends LitElement {
|
|
|
70
74
|
* Constrain a proposed value for the minimum (left) slider
|
|
71
75
|
*
|
|
72
76
|
* If the value is less than the leftmost valid position, then set it to the
|
|
73
|
-
* left edge of the
|
|
74
|
-
* the rightmost valid position (the position of the max slider), then
|
|
75
|
-
* to the position of the max slider
|
|
77
|
+
* left edge of the histogram (ie the slider width). If the value is greater
|
|
78
|
+
* than the rightmost valid position (the position of the max slider), then
|
|
79
|
+
* set it to the position of the max slider
|
|
76
80
|
*/
|
|
77
81
|
private validMinSliderX;
|
|
78
82
|
/**
|
|
79
83
|
* Constrain a proposed value for the maximum (right) slider
|
|
80
84
|
*
|
|
81
85
|
* If the value is greater than the rightmost valid position, then set it to
|
|
82
|
-
* the right edge of the
|
|
83
|
-
* is less than the leftmost valid position (the position of the min
|
|
84
|
-
* then set it to the position of the min slider
|
|
86
|
+
* the right edge of the histogram (ie histogram width - slider width). If the
|
|
87
|
+
* value is less than the leftmost valid position (the position of the min
|
|
88
|
+
* slider), then set it to the position of the min slider
|
|
85
89
|
*/
|
|
86
90
|
private validMaxSliderX;
|
|
87
91
|
private addListeners;
|
|
@@ -103,20 +107,25 @@ export declare class HistogramDateRange extends LitElement {
|
|
|
103
107
|
*/
|
|
104
108
|
private translatePositionToDate;
|
|
105
109
|
/**
|
|
106
|
-
* Returns slider x-position corresponding to given date
|
|
107
|
-
* date)
|
|
110
|
+
* Returns slider x-position corresponding to given date
|
|
108
111
|
*
|
|
109
112
|
* @param date
|
|
110
113
|
* @returns x-position of slider
|
|
111
114
|
*/
|
|
112
115
|
private translateDateToPosition;
|
|
116
|
+
/** ensure that the returned value is between minValue and maxValue */
|
|
117
|
+
private clamp;
|
|
113
118
|
private handleMinDateInput;
|
|
114
119
|
private handleMaxDateInput;
|
|
120
|
+
private handleKeyUp;
|
|
115
121
|
private get currentDateRangeString();
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
122
|
+
private getMSFromString;
|
|
123
|
+
/**
|
|
124
|
+
* expand or narrow the selected range by moving the slider nearest the
|
|
125
|
+
* clicked bar to the outer edge of the clicked bar
|
|
126
|
+
*
|
|
127
|
+
* @param e Event click event from a histogram bar
|
|
128
|
+
*/
|
|
120
129
|
private handleBarClick;
|
|
121
130
|
private get minSliderTemplate();
|
|
122
131
|
private get maxSliderTemplate();
|
|
@@ -135,7 +144,7 @@ export declare class HistogramDateRange extends LitElement {
|
|
|
135
144
|
get tooltipTemplate(): TemplateResult;
|
|
136
145
|
private get noDataTemplate();
|
|
137
146
|
private get activityIndicatorTemplate();
|
|
138
|
-
static styles: import("lit").
|
|
147
|
+
static styles: import("lit").CSSResult;
|
|
139
148
|
render(): TemplateResult;
|
|
140
149
|
}
|
|
141
150
|
declare global {
|