@internetarchive/histogram-date-range 1.4.0-alpha-webdev7756.1 → 1.4.1-alpha1

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/README.md CHANGED
@@ -1,113 +1,113 @@
1
- # \<histogram-date-range>
2
-
3
- Check out the [interactive demo](https://internetarchive.github.io/iaux-histogram-date-range/demo/).
4
-
5
- This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
6
-
7
- Travis:
8
- [![Build Status](https://travis-ci.com/internetarchive/iaux-histogram-date-range.svg?branch=main)](https://travis-ci.com/internetarchive/iaux-histogram-date-range)
9
- CodeCov: [![codecov](https://codecov.io/gh/internetarchive/iaux-histogram-date-range/branch/main/graph/badge.svg)](https://codecov.io/gh/internetarchive/iaux-histogram-date-range)
10
-
11
- ## Installation
12
-
13
- ```bash
14
- npm i @internetarchive/histogram-date-range
15
- ```
16
-
17
- ## Usage
18
-
19
- ```html
20
- <script type="module">
21
- import 'histogram-date-range/dist/src/histogram-date-range.js';
22
- </script>
23
- <histogram-date-range
24
- width="300"
25
- height="50"
26
- tooltipWidth="140"
27
- dateFormat="DD MMM YYYY"
28
- style="
29
- --histogramDateRangeTooltipFontSize: 1rem;
30
- --histogramDateRangeInputWidth: 85px;
31
- "
32
- minDate="1400"
33
- maxDate="2021"
34
- minSelectedDate="1800"
35
- maxSelectedDate="1900"
36
- bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
37
- 13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
38
- 47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
39
- 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
40
- ]"
41
- ></histogram-date-range>
42
- ```
43
-
44
- A slot named `inputs-right-side` is available for inserting elements to the right
45
- of the min/max date input fields, e.g.:
46
-
47
- ```html
48
- <histogram-date-range>
49
- <button slot="inputs-right-side">Apply</button>
50
- </histogram-date-range>
51
- ```
52
-
53
- ## Linting with ESLint, Prettier, and Types
54
-
55
- To scan the project for linting errors, run
56
-
57
- ```bash
58
- npm run lint
59
- ```
60
-
61
- You can lint with ESLint and Prettier individually as well
62
-
63
- ```bash
64
- npm run lint:eslint
65
- ```
66
-
67
- ```bash
68
- npm run lint:prettier
69
- ```
70
-
71
- To automatically fix many linting errors, run
72
-
73
- ```bash
74
- npm run format
75
- ```
76
-
77
- You can format using ESLint and Prettier individually as well
78
-
79
- ```bash
80
- npm run format:eslint
81
- ```
82
-
83
- ```bash
84
- npm run format:prettier
85
- ```
86
-
87
- ## Testing with Web Test Runner
88
-
89
- To run the suite of Web Test Runner tests, run
90
-
91
- ```bash
92
- npm run test
93
- ```
94
-
95
- To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
96
-
97
- ```bash
98
- npm run test:watch
99
- ```
100
-
101
- ## Tooling configs
102
-
103
- For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
104
-
105
- If you customize the configuration a lot, you can consider moving them to individual files.
106
-
107
- ## Local Demo with `web-dev-server`
108
-
109
- ```bash
110
- npm start
111
- ```
112
-
113
- To run a local development server that serves the basic demo located in `demo/index.html`
1
+ # \<histogram-date-range>
2
+
3
+ Check out the [interactive demo](https://internetarchive.github.io/iaux-histogram-date-range/demo/).
4
+
5
+ This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
6
+
7
+ Travis:
8
+ [![Build Status](https://travis-ci.com/internetarchive/iaux-histogram-date-range.svg?branch=main)](https://travis-ci.com/internetarchive/iaux-histogram-date-range)
9
+ CodeCov: [![codecov](https://codecov.io/gh/internetarchive/iaux-histogram-date-range/branch/main/graph/badge.svg)](https://codecov.io/gh/internetarchive/iaux-histogram-date-range)
10
+
11
+ ## Installation
12
+
13
+ ```bash
14
+ npm i @internetarchive/histogram-date-range
15
+ ```
16
+
17
+ ## Usage
18
+
19
+ ```html
20
+ <script type="module">
21
+ import 'histogram-date-range/dist/src/histogram-date-range.js';
22
+ </script>
23
+ <histogram-date-range
24
+ width="300"
25
+ height="50"
26
+ tooltipWidth="140"
27
+ dateFormat="DD MMM YYYY"
28
+ style="
29
+ --histogramDateRangeTooltipFontSize: 1rem;
30
+ --histogramDateRangeInputWidth: 85px;
31
+ "
32
+ minDate="1400"
33
+ maxDate="2021"
34
+ minSelectedDate="1800"
35
+ maxSelectedDate="1900"
36
+ bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
37
+ 13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
38
+ 47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
39
+ 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
40
+ ]"
41
+ ></histogram-date-range>
42
+ ```
43
+
44
+ A slot named `inputs-right-side` is available for inserting elements to the right
45
+ of the min/max date input fields, e.g.:
46
+
47
+ ```html
48
+ <histogram-date-range>
49
+ <button slot="inputs-right-side">Apply</button>
50
+ </histogram-date-range>
51
+ ```
52
+
53
+ ## Linting with ESLint, Prettier, and Types
54
+
55
+ To scan the project for linting errors, run
56
+
57
+ ```bash
58
+ npm run lint
59
+ ```
60
+
61
+ You can lint with ESLint and Prettier individually as well
62
+
63
+ ```bash
64
+ npm run lint:eslint
65
+ ```
66
+
67
+ ```bash
68
+ npm run lint:prettier
69
+ ```
70
+
71
+ To automatically fix many linting errors, run
72
+
73
+ ```bash
74
+ npm run format
75
+ ```
76
+
77
+ You can format using ESLint and Prettier individually as well
78
+
79
+ ```bash
80
+ npm run format:eslint
81
+ ```
82
+
83
+ ```bash
84
+ npm run format:prettier
85
+ ```
86
+
87
+ ## Testing with Web Test Runner
88
+
89
+ To run the suite of Web Test Runner tests, run
90
+
91
+ ```bash
92
+ npm run test
93
+ ```
94
+
95
+ To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
96
+
97
+ ```bash
98
+ npm run test:watch
99
+ ```
100
+
101
+ ## Tooling configs
102
+
103
+ For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
104
+
105
+ If you customize the configuration a lot, you can consider moving them to individual files.
106
+
107
+ ## Local Demo with `web-dev-server`
108
+
109
+ ```bash
110
+ npm start
111
+ ```
112
+
113
+ To run a local development server that serves the basic demo located in `demo/index.html`
package/demo/index.css CHANGED
@@ -1,29 +1,29 @@
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
- .clipped {
14
- overflow: hidden;
15
- }
16
- .text-centered {
17
- text-align: 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;
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
+ .clipped {
14
+ overflow: hidden;
15
+ }
16
+ .text-centered {
17
+ text-align: 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
29
  }