@internetarchive/histogram-date-range 1.2.1-alpha.1 → 1.2.2-alpha-webdev7377.0

package/README.md

@@ -1,113 +1,113 @@
-# \<histogram-date-range>
-
-Check out the [interactive demo](https://internetarchive.github.io/iaux-histogram-date-range/demo/).
-
-This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
-
-Travis:
-[![Build Status](https://travis-ci.com/internetarchive/iaux-histogram-date-range.svg?branch=main)](https://travis-ci.com/internetarchive/iaux-histogram-date-range)
-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)
-
-## Installation
-
-```bash
-npm i @internetarchive/histogram-date-range
-```
-
-## Usage
-
-```html
-<script type="module">
-  import 'histogram-date-range/dist/src/histogram-date-range.js';
-</script>
-<histogram-date-range
-  width="300"
-  height="50"
-  tooltipWidth="140"
-  dateFormat="DD MMM YYYY"
-  style="
-    --histogramDateRangeTooltipFontSize: 1rem;
-    --histogramDateRangeInputWidth: 85px;
-  "
-  minDate="1400"
-  maxDate="2021"
-  minSelectedDate="1800"
-  maxSelectedDate="1900"
-  bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
-          13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
-          47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
-          32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
-        ]"
-></histogram-date-range>
-```
-
-A slot named `inputs-right-side` is available for inserting elements to the right
-of the min/max date input fields, e.g.:
-
-```html
-<histogram-date-range>
-  <button slot="inputs-right-side">Apply</button>
-</histogram-date-range>
-```
-
-## Linting with ESLint, Prettier, and Types
-
-To scan the project for linting errors, run
-
-```bash
-npm run lint
-```
-
-You can lint with ESLint and Prettier individually as well
-
-```bash
-npm run lint:eslint
-```
-
-```bash
-npm run lint:prettier
-```
-
-To automatically fix many linting errors, run
-
-```bash
-npm run format
-```
-
-You can format using ESLint and Prettier individually as well
-
-```bash
-npm run format:eslint
-```
-
-```bash
-npm run format:prettier
-```
-
-## Testing with Web Test Runner
-
-To run the suite of Web Test Runner tests, run
-
-```bash
-npm run test
-```
-
-To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
-
-```bash
-npm run test:watch
-```
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
-
-If you customize the configuration a lot, you can consider moving them to individual files.
-
-## Local Demo with `web-dev-server`
-
-```bash
-npm start
-```
-
-To run a local development server that serves the basic demo located in `demo/index.html`
+# \<histogram-date-range>
+
+Check out the [interactive demo](https://internetarchive.github.io/iaux-histogram-date-range/demo/).
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+Travis:
+[![Build Status](https://travis-ci.com/internetarchive/iaux-histogram-date-range.svg?branch=main)](https://travis-ci.com/internetarchive/iaux-histogram-date-range)
+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)
+
+## Installation
+
+```bash
+npm i @internetarchive/histogram-date-range
+```
+
+## Usage
+
+```html
+<script type="module">
+  import 'histogram-date-range/dist/src/histogram-date-range.js';
+</script>
+<histogram-date-range
+  width="300"
+  height="50"
+  tooltipWidth="140"
+  dateFormat="DD MMM YYYY"
+  style="
+    --histogramDateRangeTooltipFontSize: 1rem;
+    --histogramDateRangeInputWidth: 85px;
+  "
+  minDate="1400"
+  maxDate="2021"
+  minSelectedDate="1800"
+  maxSelectedDate="1900"
+  bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
+          13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
+          47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
+          32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
+        ]"
+></histogram-date-range>
+```
+
+A slot named `inputs-right-side` is available for inserting elements to the right
+of the min/max date input fields, e.g.:
+
+```html
+<histogram-date-range>
+  <button slot="inputs-right-side">Apply</button>
+</histogram-date-range>
+```
+
+## Linting with ESLint, Prettier, and Types
+
+To scan the project for linting errors, run
+
+```bash
+npm run lint
+```
+
+You can lint with ESLint and Prettier individually as well
+
+```bash
+npm run lint:eslint
+```
+
+```bash
+npm run lint:prettier
+```
+
+To automatically fix many linting errors, run
+
+```bash
+npm run format
+```
+
+You can format using ESLint and Prettier individually as well
+
+```bash
+npm run format:eslint
+```
+
+```bash
+npm run format:prettier
+```
+
+## Testing with Web Test Runner
+
+To run the suite of Web Test Runner tests, run
+
+```bash
+npm run test
+```
+
+To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
+
+```bash
+npm run test:watch
+```
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/demo/index.css

@@ -1,23 +1,23 @@
-html {
-  font-size: 10px;
-  font-family: sans-serif;
-}
-body {
-  background: white;
-}
-.container {
-  margin-top: 20px;
-  display: grid;
-  justify-content: center;
-}
-.description {
-  margin: 10px auto;
-}
-.received-events {
-  position: absolute;
-  top: 0;
-}
-button {
-  font-size: 100%;
-  margin: 10px auto;
+html {
+  font-size: 10px;
+  font-family: sans-serif;
+}
+body {
+  background: white;
+}
+.container {
+  margin-top: 20px;
+  display: grid;
+  justify-content: center;
+}
+.description {
+  margin: 10px auto;
+}
+.received-events {
+  position: absolute;
+  top: 0;
+}
+button {
+  font-size: 100%;
+  margin: 10px auto;
 }

package/demo/index.html

@@ -1,159 +1,159 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="index.css">
-  </head>
-
-  <script type="module">
-    import '../dist/src/histogram-date-range.js';
-    let eventCount = 0;
-    import '../dist/demo/js/app-root.js';
-    // listen to events from the component and display the data received from them
-    document.addEventListener('histogramDateRangeUpdated', e => {
-      document.querySelector('.received-events').innerHTML =
-      ++eventCount + ': ' + JSON.stringify(e.detail);
-    });
-  </script>
-  <body>
-    <pre class="received-events"></pre>
-    <div class="container">
-      <div class="description">
-        histogram inside a lit element
-      </div>
-      <app-root></app-root>
-
-      <div class="description">
-        pre-selected range with 1000ms debounce delay
-      </div>
-      <histogram-date-range
-        minDate="1400"
-        maxDate="2021"
-        updateDelay="1000"
-        minSelectedDate="1800"
-        maxSelectedDate="1900"
-        bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
-                13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
-                47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
-                32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
-              ]"
-      ></histogram-date-range>
-    </div>
-
-    <div class="container">
-      <div class="description">range spanning negative to positive years</div>
-      <histogram-date-range
-        minDate="-1050" maxDate="2200"
-        bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
-                13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
-                47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
-                32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
-              ]"
-      ></histogram-date-range>
-    </div>
-
-    <div class="container">
-      <div class="description">
-        small diff between max and min values
-      </div>
-      <histogram-date-range
-        width="175"
-        tooltipwidth="120"
-        dateFormat="YYYY"
-        updateDelay="1000"
-        missingDataMessage="..."
-        minSelectedDate="1987"
-        maxSelectedDate="2016"
-        minDate="1987"
-        maxDate="2016"
-        bins="[1519,1643,1880,2046,1973,2085,2148,2152,2349,2304,2314,2484,2590,2450,2495,2475,2392,2631,2504,2619,2519,2552,2462,2217,2171,2132,2127,2041,1638,1441]"
-      >
-      </histogram-date-range>
-    </div>
-
-    <div class="container">
-      <div class="description">small year range and few bins</div>
-      <histogram-date-range width="175" tooltipwidth="120"
-        minDate="2008" maxDate="2016" bins="[76104,866978,1151617,986331,218672,107410,3324]">
-      </histogram-date-range>
-    </div>
-
-    <div class="container">
-      <div class="description">
-        default range with custom styling and date format
-      </div>
-      <histogram-date-range
-        width="300"
-        height="50"
-        tooltipWidth="140"
-        dateFormat="DD MMM YYYY"
-        style="
-          --histogramDateRangeSliderColor: #d8b384;
-          --histogramDateRangeSelectedRangeColor: #f3f0d7;
-          --histogramDateRangeTooltipFontFamily: serif;
-          --histogramDateRangeInputFontFamily: serif;
-          --histogramDateRangeTooltipFontSize: 1rem;
-          --histogramDateRangeInputWidth: 85px;
-        "
-        minDate="05 May 1972"
-        maxDate="21 Dec 1980"
-        bins="[ 85, 25, 200, 0, 0, 34, 0, 2, 5, 10, 0, 56, 10, 45, 100, 70, 50 ]"
-      ></histogram-date-range>
-    </div>
-
-    <div class="container">
-      <div class="description">loading state toggle</div>
-      <histogram-date-range
-        id="loading"
-        minDate="1900"
-        maxDate="2021"
-        bins="[
-            74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2, 13, 45, 67, 17, 66,
-            49, 93, 47, 61, 32, 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
-          ]"
-      ></histogram-date-range>
-      <button id="loading-toggle">toggle loading</button>
-    </div>
-    <script>
-      document
-        .querySelector('#loading-toggle')
-        .addEventListener('click', () => {
-          const histogram = document.querySelector(
-            'histogram-date-range#loading'
-          );
-          histogram.loading = !histogram.loading;
-        });
-    </script>
-
-    <div class="container">
-      <div class="description">data set up with js</div>
-      <histogram-date-range id="js-setup"></histogram-date-range>
-    </div>
-    <script>
-      document.addEventListener('DOMContentLoaded', function () {
-        const histogram = document.querySelector(
-          'histogram-date-range#js-setup'
-        );
-        histogram.minDate = '1950';
-        histogram.maxDate = '2000';
-        // generate array of [0, 1, 2, ... 49]
-        histogram.bins = [...Array(50).keys()];
-      });
-    </script>
-
-    <div class="container">
-      <div class="description">
-        single bin
-      </div>
-      <histogram-date-range minDate="1926" maxDate="1926" bins="[8]">
-      </histogram-date-range>
-    </div>
-
-    <div class="container">
-      <div class="description">empty data</div>
-      <histogram-date-range missingDataMessage="no data..."></histoghistogram-date-range>
-    </div>
-
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="index.css">
+  </head>
+
+  <script type="module">
+    import '../dist/src/histogram-date-range.js';
+    let eventCount = 0;
+    import '../dist/demo/js/app-root.js';
+    // listen to events from the component and display the data received from them
+    document.addEventListener('histogramDateRangeUpdated', e => {
+      document.querySelector('.received-events').innerHTML =
+      ++eventCount + ': ' + JSON.stringify(e.detail);
+    });
+  </script>
+  <body>
+    <pre class="received-events"></pre>
+    <div class="container">
+      <div class="description">
+        histogram inside a lit element
+      </div>
+      <app-root></app-root>
+
+      <div class="description">
+        pre-selected range with 1000ms debounce delay
+      </div>
+      <histogram-date-range
+        minDate="1400"
+        maxDate="2021"
+        updateDelay="1000"
+        minSelectedDate="1800"
+        maxSelectedDate="1900"
+        bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
+                13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
+                47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
+                32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
+              ]"
+      ></histogram-date-range>
+    </div>
+
+    <div class="container">
+      <div class="description">range spanning negative to positive years</div>
+      <histogram-date-range
+        minDate="-1050" maxDate="2200"
+        bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
+                13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
+                47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
+                32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
+              ]"
+      ></histogram-date-range>
+    </div>
+
+    <div class="container">
+      <div class="description">
+        small diff between max and min values
+      </div>
+      <histogram-date-range
+        width="175"
+        tooltipwidth="120"
+        dateFormat="YYYY"
+        updateDelay="1000"
+        missingDataMessage="..."
+        minSelectedDate="1987"
+        maxSelectedDate="2016"
+        minDate="1987"
+        maxDate="2016"
+        bins="[1519,1643,1880,2046,1973,2085,2148,2152,2349,2304,2314,2484,2590,2450,2495,2475,2392,2631,2504,2619,2519,2552,2462,2217,2171,2132,2127,2041,1638,1441]"
+      >
+      </histogram-date-range>
+    </div>
+
+    <div class="container">
+      <div class="description">small year range and few bins</div>
+      <histogram-date-range width="175" tooltipwidth="120"
+        minDate="2008" maxDate="2016" bins="[76104,866978,1151617,986331,218672,107410,3324]">
+      </histogram-date-range>
+    </div>
+
+    <div class="container">
+      <div class="description">
+        default range with custom styling and date format
+      </div>
+      <histogram-date-range
+        width="300"
+        height="50"
+        tooltipWidth="140"
+        dateFormat="DD MMM YYYY"
+        style="
+          --histogramDateRangeSliderColor: #d8b384;
+          --histogramDateRangeSelectedRangeColor: #f3f0d7;
+          --histogramDateRangeTooltipFontFamily: serif;
+          --histogramDateRangeInputFontFamily: serif;
+          --histogramDateRangeTooltipFontSize: 1rem;
+          --histogramDateRangeInputWidth: 85px;
+        "
+        minDate="05 May 1972"
+        maxDate="21 Dec 1980"
+        bins="[ 85, 25, 200, 0, 0, 34, 0, 2, 5, 10, 0, 56, 10, 45, 100, 70, 50 ]"
+      ></histogram-date-range>
+    </div>
+
+    <div class="container">
+      <div class="description">loading state toggle</div>
+      <histogram-date-range
+        id="loading"
+        minDate="1900"
+        maxDate="2021"
+        bins="[
+            74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2, 13, 45, 67, 17, 66,
+            49, 93, 47, 61, 32, 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
+          ]"
+      ></histogram-date-range>
+      <button id="loading-toggle">toggle loading</button>
+    </div>
+    <script>
+      document
+        .querySelector('#loading-toggle')
+        .addEventListener('click', () => {
+          const histogram = document.querySelector(
+            'histogram-date-range#loading'
+          );
+          histogram.loading = !histogram.loading;
+        });
+    </script>
+
+    <div class="container">
+      <div class="description">data set up with js</div>
+      <histogram-date-range id="js-setup"></histogram-date-range>
+    </div>
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const histogram = document.querySelector(
+          'histogram-date-range#js-setup'
+        );
+        histogram.minDate = '1950';
+        histogram.maxDate = '2000';
+        // generate array of [0, 1, 2, ... 49]
+        histogram.bins = [...Array(50).keys()];
+      });
+    </script>
+
+    <div class="container">
+      <div class="description">
+        single bin
+      </div>
+      <histogram-date-range minDate="1926" maxDate="1926" bins="[8]">
+      </histogram-date-range>
+    </div>
+
+    <div class="container">
+      <div class="description">empty data</div>
+      <histogram-date-range missingDataMessage="no data..."></histoghistogram-date-range>
+    </div>
+
+  </body>
+</html>

package/dist/demo/js/app-root.d.ts

@@ -1,19 +1,19 @@
-import { LitElement, TemplateResult } from 'lit';
-import '../../src/histogram-date-range';
-interface DataSource {
-    minDate: unknown;
-    maxDate: unknown;
-    minSelectedDate: unknown;
-    maxSelectedDate: unknown;
-    bins: number[];
-}
-/**
- * This is mainly to test the histogram-date-range within
- * a lit-element.
- */
-export declare class AppRoot extends LitElement {
-    dataSource: DataSource;
-    render(): TemplateResult;
-    private randomize;
-}
-export {};
+import { LitElement, TemplateResult } from 'lit';
+import '../../src/histogram-date-range';
+interface DataSource {
+    minDate: unknown;
+    maxDate: unknown;
+    minSelectedDate: unknown;
+    maxSelectedDate: unknown;
+    bins: number[];
+}
+/**
+ * This is mainly to test the histogram-date-range within
+ * a lit-element.
+ */
+export declare class AppRoot extends LitElement {
+    dataSource: DataSource;
+    render(): TemplateResult;
+    private randomize;
+}
+export {};