@internetarchive/histogram-date-range 0.1.5 → 0.1.6-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.
Files changed (27) hide show
  1. package/demo/index.html +19 -14
  2. package/demo/js/app-root.ts +59 -0
  3. package/docs/_snowpack/pkg/@internetarchive/ia-activity-indicator/ia-activity-indicator.js +2 -2
  4. package/docs/_snowpack/pkg/common/{lit-element-3254fb50.js → lit-element-fd3f69c3.js} +3 -3
  5. package/docs/_snowpack/pkg/common/lit-html-64eba09b.js +8 -0
  6. package/docs/_snowpack/pkg/lit/directives/live.js +1 -1
  7. package/docs/_snowpack/pkg/lit.js +2 -2
  8. package/docs/demo/index.html +19 -14
  9. package/docs/dist/demo/js/app-root.js +79 -0
  10. package/docs/dist/src/histogram-date-range.js +10 -9
  11. package/package.json +2 -2
  12. package/snowpack.config.js +1 -1
  13. package/src/histogram-date-range.ts +15 -10
  14. package/test/histogram-date-range.test.ts +34 -10
  15. package/dist/index.d.ts +0 -1
  16. package/dist/index.js +0 -2
  17. package/dist/index.js.map +0 -1
  18. package/dist/src/HistogramDateRange.d.ts +0 -58
  19. package/dist/src/HistogramDateRange.js +0 -447
  20. package/dist/src/HistogramDateRange.js.map +0 -1
  21. package/dist/src/histogram-date-range.d.ts +0 -154
  22. package/dist/src/histogram-date-range.js +0 -807
  23. package/dist/src/histogram-date-range.js.map +0 -1
  24. package/dist/test/histogram-date-range.test.d.ts +0 -1
  25. package/dist/test/histogram-date-range.test.js +0 -414
  26. package/dist/test/histogram-date-range.test.js.map +0 -1
  27. package/docs/_snowpack/pkg/common/lit-html-1d707ff6.js +0 -8
package/demo/index.html CHANGED
@@ -9,6 +9,7 @@
9
9
  <script type="module">
10
10
  import '../dist/src/histogram-date-range.js';
11
11
  let eventCount = 0;
12
+ import '../dist/demo/js/app-root.js';
12
13
  // listen to events from the component and display the data received from them
13
14
  document.addEventListener('histogramDateRangeUpdated', e => {
14
15
  document.querySelector('.received-events').innerHTML =
@@ -17,8 +18,12 @@
17
18
  </script>
18
19
  <body>
19
20
  <pre class="received-events"></pre>
20
-
21
21
  <div class="container">
22
+ <div class="description">
23
+ histogram inside a lit element
24
+ </div>
25
+ <app-root></app-root>
26
+
22
27
  <div class="description">
23
28
  pre-selected range with 1000ms debounce delay
24
29
  </div>
@@ -39,7 +44,7 @@
39
44
  <div class="container">
40
45
  <div class="description">range spanning negative to positive years</div>
41
46
  <histogram-date-range
42
- mindate="-1050" maxdate="2200"
47
+ minDate="-1050" maxDate="2200"
43
48
  bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
44
49
  13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
45
50
  47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
@@ -55,13 +60,13 @@
55
60
  <histogram-date-range
56
61
  width="175"
57
62
  tooltipwidth="120"
58
- dateformat="YYYY"
59
- updatedelay="1000"
60
- missingdatamessage="..."
61
- minselecteddate="1987"
62
- maxselecteddate="2016"
63
- mindate="1987"
64
- maxdate="2016"
63
+ dateFormat="YYYY"
64
+ updateDelay="1000"
65
+ missingDataMessage="..."
66
+ minSelectedDate="1987"
67
+ maxSelectedDate="2016"
68
+ minDate="1987"
69
+ maxDate="2016"
65
70
  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]"
66
71
  >
67
72
  </histogram-date-range>
@@ -69,8 +74,8 @@
69
74
 
70
75
  <div class="container">
71
76
  <div class="description">small year range and few bins</div>
72
- <histogram-date-range width="175" tooltipwidth="120"
73
- mindate="2008" maxdate="2016" bins="[76104,866978,1151617,986331,218672,107410,3324]">
77
+ <histogram-date-range width="175" tooltipwidth="120"
78
+ minDate="2008" maxDate="2016" bins="[76104,866978,1151617,986331,218672,107410,3324]">
74
79
  </histogram-date-range>
75
80
  </div>
76
81
 
@@ -104,8 +109,8 @@
104
109
  minDate="1900"
105
110
  maxDate="2021"
106
111
  bins="[
107
- 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2, 13, 45, 67, 17, 66,
108
- 49, 93, 47, 61, 32, 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
112
+ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2, 13, 45, 67, 17, 66,
113
+ 49, 93, 47, 61, 32, 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
109
114
  ]"
110
115
  ></histogram-date-range>
111
116
  <button id="loading-toggle">toggle loading</button>
@@ -141,7 +146,7 @@
141
146
  <div class="description">
142
147
  single bin
143
148
  </div>
144
- <histogram-date-range mindate="1926" maxdate="1926" bins="[8]">
149
+ <histogram-date-range minDate="1926" maxDate="1926" bins="[8]">
145
150
  </histogram-date-range>
146
151
  </div>
147
152
 
package/demo/js/app-root.ts ADDED
@@ -0,0 +1,59 @@
1
+ import { LitElement, html, TemplateResult } from 'lit';
2
+ import { customElement, state } from 'lit/decorators.js';
3
+ import '../../src/histogram-date-range';
4
+
5
+ interface DataSource {
6
+ minDate: unknown;
7
+ maxDate: unknown;
8
+ minSelectedDate: unknown;
9
+ maxSelectedDate: unknown;
10
+ bins: number[];
11
+ }
12
+
13
+ /**
14
+ * This is mainly to test the histogram-date-range within
15
+ * a lit-element.
16
+ */
17
+ @customElement('app-root')
18
+ export class AppRoot extends LitElement {
19
+ @state() dataSource: DataSource = {
20
+ minDate: 1955,
21
+ maxDate: 2000,
22
+ minSelectedDate: 1955,
23
+ maxSelectedDate: 2000,
24
+ bins: [
25
+ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
26
+ ],
27
+ };
28
+
29
+ render(): TemplateResult {
30
+ return html`
31
+ <histogram-date-range
32
+ .minDate=${this.dataSource?.minDate}
33
+ .maxDate=${this.dataSource?.maxDate}
34
+ .minSelectedDate=${this.dataSource?.minSelectedDate}
35
+ .maxSelectedDate=${this.dataSource?.maxSelectedDate}
36
+ .updateDelay=${1000}
37
+ .bins=${this.dataSource?.bins}
38
+ ></histogram-date-range>
39
+
40
+ <button @click=${this.randomize}>Randomize</button>
41
+ `;
42
+ }
43
+
44
+ private randomize() {
45
+ const minDate = Math.round(Math.random() * 1000);
46
+ const maxDate = minDate + Math.round(Math.random() * 1000);
47
+ // generate random bins
48
+ const bins = Array.from({ length: 20 }, () =>
49
+ Math.floor(Math.random() * minDate)
50
+ );
51
+ this.dataSource = {
52
+ minDate,
53
+ maxDate,
54
+ minSelectedDate: minDate,
55
+ maxSelectedDate: maxDate,
56
+ bins: bins,
57
+ };
58
+ }
59
+ }
package/docs/_snowpack/pkg/@internetarchive/ia-activity-indicator/ia-activity-indicator.js CHANGED
@@ -1,5 +1,5 @@
1
- import { s, r } from '../../common/lit-element-3254fb50.js';
2
- import { $ } from '../../common/lit-html-1d707ff6.js';
1
+ import { s, r } from '../../common/lit-element-fd3f69c3.js';
2
+ import { $ } from '../../common/lit-html-64eba09b.js';
3
3
 
4
4
  const IAActivityIndicatorMode = Object.freeze({
5
5
  processing: 'processing',
package/docs/_snowpack/pkg/common/{lit-element-3254fb50.js → lit-element-fd3f69c3.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { x, b } from './lit-html-1d707ff6.js';
1
+ import { x, b } from './lit-html-64eba09b.js';
2
2
 
3
3
  /**
4
4
  * @license
@@ -11,12 +11,12 @@ const t=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShad
11
11
  * @license
12
12
  * Copyright 2017 Google LLC
13
13
  * SPDX-License-Identifier: BSD-3-Clause
14
- */var s$1;const e$1=window.trustedTypes,r$1=e$1?e$1.emptyScript:"",h=window.reactiveElementPolyfillSupport,o$1={toAttribute(t,i){switch(i){case Boolean:t=t?r$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t);}catch(t){s=null;}}return s}},n$1=(t,i)=>i!==t&&(i==i||t==t),l={attribute:!0,type:String,converter:o$1,reflect:!1,hasChanged:n$1};class a extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o();}static addInitializer(t){var i;null!==(i=this.l)&&void 0!==i||(this.l=[]),this.l.push(t);}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Eh(s,i);void 0!==e&&(this._$Eu.set(e,s),t.push(e));})),t}static createProperty(t,i=l){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e);}}static getPropertyDescriptor(t,i,s){return {get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||l}static finalize(){if(this.hasOwnProperty("finalized"))return !1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(S(i));}else void 0!==i&&s.push(S(i));return s}static _$Eh(t,i){const s=i.attribute;return !1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}o(){var t;this._$Ep=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Em(),this.requestUpdate(),null===(t=this.constructor.l)||void 0===t||t.forEach((t=>t(this)));}addController(t){var i,s;(null!==(i=this._$Eg)&&void 0!==i?i:this._$Eg=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t));}removeController(t){var i;null===(i=this._$Eg)||void 0===i||i.splice(this._$Eg.indexOf(t)>>>0,1);}_$Em(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Et.set(i,this[i]),delete this[i]);}));}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return i(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}));}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}));}attributeChangedCallback(t,i,s){this._$AK(t,s);}_$ES(t,i,s=l){var e,r;const h=this.constructor._$Eh(t,s);if(void 0!==h&&!0===s.reflect){const n=(null!==(r=null===(e=s.converter)||void 0===e?void 0:e.toAttribute)&&void 0!==r?r:o$1.toAttribute)(i,s.type);this._$Ei=t,null==n?this.removeAttribute(h):this.setAttribute(h,n),this._$Ei=null;}}_$AK(t,i){var s,e,r;const h=this.constructor,n=h._$Eu.get(t);if(void 0!==n&&this._$Ei!==n){const t=h.getPropertyOptions(n),l=t.converter,a=null!==(r=null!==(e=null===(s=l)||void 0===s?void 0:s.fromAttribute)&&void 0!==e?e:"function"==typeof l?l:null)&&void 0!==r?r:o$1.fromAttribute;this._$Ei=n,this[n]=a(i,t.type),this._$Ei=null;}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||n$1)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$Ei!==t&&(void 0===this._$E_&&(this._$E_=new Map),this._$E_.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$Ep=this._$EC());}async _$EC(){this.isUpdatePending=!0;try{await this._$Ep;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach(((t,i)=>this[i]=t)),this._$Et=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$EU();}catch(t){throw i=!1,this._$EU(),t}i&&this._$AE(s);}willUpdate(t){}_$AE(t){var i;null===(i=this._$Eg)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ep}shouldUpdate(t){return !0}update(t){void 0!==this._$E_&&(this._$E_.forEach(((t,i)=>this._$ES(i,this[i],t))),this._$E_=void 0),this._$EU();}updated(t){}firstUpdated(t){}}a.finalized=!0,a.elementProperties=new Map,a.elementStyles=[],a.shadowRootOptions={mode:"open"},null==h||h({ReactiveElement:a}),(null!==(s$1=globalThis.reactiveElementVersions)&&void 0!==s$1?s$1:globalThis.reactiveElementVersions=[]).push("1.1.2");
14
+ */var s$1;const e$1=window.trustedTypes,r$1=e$1?e$1.emptyScript:"",h=window.reactiveElementPolyfillSupport,o$1={toAttribute(t,i){switch(i){case Boolean:t=t?r$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t);}catch(t){s=null;}}return s}},n$1=(t,i)=>i!==t&&(i==i||t==t),l={attribute:!0,type:String,converter:o$1,reflect:!1,hasChanged:n$1};class a extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o();}static addInitializer(t){var i;null!==(i=this.l)&&void 0!==i||(this.l=[]),this.l.push(t);}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Eh(s,i);void 0!==e&&(this._$Eu.set(e,s),t.push(e));})),t}static createProperty(t,i=l){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e);}}static getPropertyDescriptor(t,i,s){return {get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||l}static finalize(){if(this.hasOwnProperty("finalized"))return !1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(S(i));}else void 0!==i&&s.push(S(i));return s}static _$Eh(t,i){const s=i.attribute;return !1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}o(){var t;this._$Ep=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Em(),this.requestUpdate(),null===(t=this.constructor.l)||void 0===t||t.forEach((t=>t(this)));}addController(t){var i,s;(null!==(i=this._$Eg)&&void 0!==i?i:this._$Eg=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t));}removeController(t){var i;null===(i=this._$Eg)||void 0===i||i.splice(this._$Eg.indexOf(t)>>>0,1);}_$Em(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Et.set(i,this[i]),delete this[i]);}));}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return i(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}));}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}));}attributeChangedCallback(t,i,s){this._$AK(t,s);}_$ES(t,i,s=l){var e,r;const h=this.constructor._$Eh(t,s);if(void 0!==h&&!0===s.reflect){const n=(null!==(r=null===(e=s.converter)||void 0===e?void 0:e.toAttribute)&&void 0!==r?r:o$1.toAttribute)(i,s.type);this._$Ei=t,null==n?this.removeAttribute(h):this.setAttribute(h,n),this._$Ei=null;}}_$AK(t,i){var s,e,r;const h=this.constructor,n=h._$Eu.get(t);if(void 0!==n&&this._$Ei!==n){const t=h.getPropertyOptions(n),l=t.converter,a=null!==(r=null!==(e=null===(s=l)||void 0===s?void 0:s.fromAttribute)&&void 0!==e?e:"function"==typeof l?l:null)&&void 0!==r?r:o$1.fromAttribute;this._$Ei=n,this[n]=a(i,t.type),this._$Ei=null;}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||n$1)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$Ei!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$Ep=this._$E_());}async _$E_(){this.isUpdatePending=!0;try{await this._$Ep;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach(((t,i)=>this[i]=t)),this._$Et=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$EU();}catch(t){throw i=!1,this._$EU(),t}i&&this._$AE(s);}willUpdate(t){}_$AE(t){var i;null===(i=this._$Eg)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ep}shouldUpdate(t){return !0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,i)=>this._$ES(i,this[i],t))),this._$EC=void 0),this._$EU();}updated(t){}firstUpdated(t){}}a.finalized=!0,a.elementProperties=new Map,a.elementStyles=[],a.shadowRootOptions={mode:"open"},null==h||h({ReactiveElement:a}),(null!==(s$1=globalThis.reactiveElementVersions)&&void 0!==s$1?s$1:globalThis.reactiveElementVersions=[]).push("1.3.2");
15
15
 
16
16
  /**
17
17
  * @license
18
18
  * Copyright 2017 Google LLC
19
19
  * SPDX-License-Identifier: BSD-3-Clause
20
- */var l$1,o$2;class s$2 extends a{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0;}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=x(i,this.renderRoot,this.renderOptions);}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!0);}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!1);}render(){return b}}s$2.finalized=!0,s$2._$litElement$=!0,null===(l$1=globalThis.litElementHydrateSupport)||void 0===l$1||l$1.call(globalThis,{LitElement:s$2});const n$2=globalThis.litElementPolyfillSupport;null==n$2||n$2({LitElement:s$2});(null!==(o$2=globalThis.litElementVersions)&&void 0!==o$2?o$2:globalThis.litElementVersions=[]).push("3.1.1");
20
+ */var l$1,o$2;class s$2 extends a{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0;}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=x(i,this.renderRoot,this.renderOptions);}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!0);}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!1);}render(){return b}}s$2.finalized=!0,s$2._$litElement$=!0,null===(l$1=globalThis.litElementHydrateSupport)||void 0===l$1||l$1.call(globalThis,{LitElement:s$2});const n$2=globalThis.litElementPolyfillSupport;null==n$2||n$2({LitElement:s$2});(null!==(o$2=globalThis.litElementVersions)&&void 0!==o$2?o$2:globalThis.litElementVersions=[]).push("3.2.0");
21
21
 
22
22
  export { r, s$2 as s };
package/docs/_snowpack/pkg/common/lit-html-64eba09b.js ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2017 Google LLC
4
+ * SPDX-License-Identifier: BSD-3-Clause
5
+ */
6
+ var t;const i=globalThis.trustedTypes,s=i?i.createPolicy("lit-html",{createHTML:t=>t}):void 0,e=`lit$${(Math.random()+"").slice(9)}$`,o="?"+e,n=`<${o}>`,l=document,h=(t="")=>l.createComment(t),r=t=>null===t||"object"!=typeof t&&"function"!=typeof t,d=Array.isArray,u=t=>{var i;return d(t)||"function"==typeof(null===(i=t)||void 0===i?void 0:i[Symbol.iterator])},c=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,a=/>/g,f=/>|[ \n \r](?:([^\s"'>=/]+)([ \n \r]*=[ \n \r]*(?:[^ \n \r"'`<>=]|("|')|))|$)/g,_=/'/g,m=/"/g,g=/^(?:script|style|textarea|title)$/i,p=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),$=p(1),y=p(2),b=Symbol.for("lit-noChange"),w=Symbol.for("lit-nothing"),T=new WeakMap,x=(t,i,s)=>{var e,o;const n=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new N(i.insertBefore(h(),t),t,void 0,null!=s?s:{});}return l._$AI(t),l},A=l.createTreeWalker(l,129,null,!1),C=(t,i)=>{const o=t.length-1,l=[];let h,r=2===i?"<svg>":"",d=c;for(let i=0;i<o;i++){const s=t[i];let o,u,p=-1,$=0;for(;$<s.length&&(d.lastIndex=$,u=d.exec(s),null!==u);)$=d.lastIndex,d===c?"!--"===u[1]?d=v:void 0!==u[1]?d=a:void 0!==u[2]?(g.test(u[2])&&(h=RegExp("</"+u[2],"g")),d=f):void 0!==u[3]&&(d=f):d===f?">"===u[0]?(d=null!=h?h:c,p=-1):void 0===u[1]?p=-2:(p=d.lastIndex-u[2].length,o=u[1],d=void 0===u[3]?f:'"'===u[3]?m:_):d===m||d===_?d=f:d===v||d===a?d=c:(d=f,h=void 0);const y=d===f&&t[i+1].startsWith("/>")?" ":"";r+=d===c?s+n:p>=0?(l.push(o),s.slice(0,p)+"$lit$"+s.slice(p)+e+y):s+e+(-2===p?(l.push(void 0),i):y);}const u=r+(t[o]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return [void 0!==s?s.createHTML(u):u,l]};class E{constructor({strings:t,_$litType$:s},n){let l;this.parts=[];let r=0,d=0;const u=t.length-1,c=this.parts,[v,a]=C(t,s);if(this.el=E.createElement(v,n),A.currentNode=this.el.content,2===s){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(l=A.nextNode())&&c.length<u;){if(1===l.nodeType){if(l.hasAttributes()){const t=[];for(const i of l.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(e)){const s=a[d++];if(t.push(i),void 0!==s){const t=l.getAttribute(s.toLowerCase()+"$lit$").split(e),i=/([.?@])?(.*)/.exec(s);c.push({type:1,index:r,name:i[2],strings:t,ctor:"."===i[1]?M:"?"===i[1]?H:"@"===i[1]?I:S});}else c.push({type:6,index:r});}for(const i of t)l.removeAttribute(i);}if(g.test(l.tagName)){const t=l.textContent.split(e),s=t.length-1;if(s>0){l.textContent=i?i.emptyScript:"";for(let i=0;i<s;i++)l.append(t[i],h()),A.nextNode(),c.push({type:2,index:++r});l.append(t[s],h());}}}else if(8===l.nodeType)if(l.data===o)c.push({type:2,index:r});else {let t=-1;for(;-1!==(t=l.data.indexOf(e,t+1));)c.push({type:7,index:r}),t+=e.length-1;}r++;}}static createElement(t,i){const s=l.createElement("template");return s.innerHTML=t,s}}function P(t,i,s=t,e){var o,n,l,h;if(i===b)return i;let d=void 0!==e?null===(o=s._$Cl)||void 0===o?void 0:o[e]:s._$Cu;const u=r(i)?void 0:i._$litDirective$;return (null==d?void 0:d.constructor)!==u&&(null===(n=null==d?void 0:d._$AO)||void 0===n||n.call(d,!1),void 0===u?d=void 0:(d=new u(t),d._$AT(t,s,e)),void 0!==e?(null!==(l=(h=s)._$Cl)&&void 0!==l?l:h._$Cl=[])[e]=d:s._$Cu=d),void 0!==d&&(i=P(t,d._$AS(t,i.values),d,e)),i}class V{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:s},parts:e}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:l).importNode(s,!0);A.currentNode=o;let n=A.nextNode(),h=0,r=0,d=e[0];for(;void 0!==d;){if(h===d.index){let i;2===d.type?i=new N(n,n.nextSibling,this,t):1===d.type?i=new d.ctor(n,d.name,d.strings,this,t):6===d.type&&(i=new L(n,this,t)),this.v.push(i),d=e[++r];}h!==(null==d?void 0:d.index)&&(n=A.nextNode(),h++);}return o}m(t){let i=0;for(const s of this.v)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class N{constructor(t,i,s,e){var o;this.type=2,this._$AH=w,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cg=null===(o=null==e?void 0:e.isConnected)||void 0===o||o;}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=P(this,t,i),r(t)?t===w||null==t||""===t?(this._$AH!==w&&this._$AR(),this._$AH=w):t!==this._$AH&&t!==b&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.k(t):u(t)?this.S(t):this.$(t);}M(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.M(t));}$(t){this._$AH!==w&&r(this._$AH)?this._$AA.nextSibling.data=t:this.k(l.createTextNode(t)),this._$AH=t;}T(t){var i;const{values:s,_$litType$:e}=t,o="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=E.createElement(e.h,this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.m(s);else {const t=new V(o,this),i=t.p(this.options);t.m(s),this.k(i),this._$AH=t;}}_$AC(t){let i=T.get(t.strings);return void 0===i&&T.set(t.strings,i=new E(t)),i}S(t){d(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const o of t)e===i.length?i.push(s=new N(this.M(h()),this.M(h()),this,this.options)):s=i[e],s._$AI(o),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){var i;void 0===this._$AM&&(this._$Cg=t,null===(i=this._$AP)||void 0===i||i.call(this,t));}}class S{constructor(t,i,s,e,o){this.type=1,this._$AH=w,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=w;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=P(this,t,i,0),n=!r(t)||t!==this._$AH&&t!==b,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l<o.length-1;l++)h=P(this,e[s+l],i,l),h===b&&(h=this._$AH[l]),n||(n=!r(h)||h!==this._$AH[l]),h===w?t=w:t!==w&&(t+=(null!=h?h:"")+o[l+1]),this._$AH[l]=h;}n&&!e&&this.C(t);}C(t){t===w?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"");}}class M extends S{constructor(){super(...arguments),this.type=3;}C(t){this.element[this.name]=t===w?void 0:t;}}const k=i?i.emptyScript:"";class H extends S{constructor(){super(...arguments),this.type=4;}C(t){t&&t!==w?this.element.setAttribute(this.name,k):this.element.removeAttribute(this.name);}}class I extends S{constructor(t,i,s,e,o){super(t,i,s,e,o),this.type=5;}_$AI(t,i=this){var s;if((t=null!==(s=P(this,t,i,0))&&void 0!==s?s:w)===b)return;const e=this._$AH,o=t===w&&e!==w||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==w&&(e===w||o);o&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t);}}class L{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){P(this,t);}}const z=window.litHtmlPolyfillSupport;null==z||z(E,N),(null!==(t=globalThis.litHtmlVersions)&&void 0!==t?t:globalThis.litHtmlVersions=[]).push("2.2.5");
7
+
8
+ export { $, b, w, x, y };
package/docs/_snowpack/pkg/lit/directives/live.js CHANGED
@@ -1,4 +1,4 @@
1
- import { b, w } from '../../common/lit-html-1d707ff6.js';
1
+ import { b, w } from '../../common/lit-html-64eba09b.js';
2
2
 
3
3
  /**
4
4
  * @license
package/docs/_snowpack/pkg/lit.js CHANGED
@@ -1,2 +1,2 @@
1
- export { s as LitElement, r as css } from './common/lit-element-3254fb50.js';
2
- export { $ as html, w as nothing, y as svg } from './common/lit-html-1d707ff6.js';
1
+ export { s as LitElement, r as css } from './common/lit-element-fd3f69c3.js';
2
+ export { $ as html, w as nothing, y as svg } from './common/lit-html-64eba09b.js';
package/docs/demo/index.html CHANGED
@@ -9,6 +9,7 @@
9
9
  <script type="module">
10
10
  import '../dist/src/histogram-date-range.js';
11
11
  let eventCount = 0;
12
+ import '../dist/demo/js/app-root.js';
12
13
  // listen to events from the component and display the data received from them
13
14
  document.addEventListener('histogramDateRangeUpdated', e => {
14
15
  document.querySelector('.received-events').innerHTML =
@@ -17,8 +18,12 @@
17
18
  </script>
18
19
  <body>
19
20
  <pre class="received-events"></pre>
20
-
21
21
  <div class="container">
22
+ <div class="description">
23
+ histogram inside a lit element
24
+ </div>
25
+ <app-root></app-root>
26
+
22
27
  <div class="description">
23
28
  pre-selected range with 1000ms debounce delay
24
29
  </div>
@@ -39,7 +44,7 @@
39
44
  <div class="container">
40
45
  <div class="description">range spanning negative to positive years</div>
41
46
  <histogram-date-range
42
- mindate="-1050" maxdate="2200"
47
+ minDate="-1050" maxDate="2200"
43
48
  bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
44
49
  13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
45
50
  47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
@@ -55,13 +60,13 @@
55
60
  <histogram-date-range
56
61
  width="175"
57
62
  tooltipwidth="120"
58
- dateformat="YYYY"
59
- updatedelay="1000"
60
- missingdatamessage="..."
61
- minselecteddate="1987"
62
- maxselecteddate="2016"
63
- mindate="1987"
64
- maxdate="2016"
63
+ dateFormat="YYYY"
64
+ updateDelay="1000"
65
+ missingDataMessage="..."
66
+ minSelectedDate="1987"
67
+ maxSelectedDate="2016"
68
+ minDate="1987"
69
+ maxDate="2016"
65
70
  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]"
66
71
  >
67
72
  </histogram-date-range>
@@ -69,8 +74,8 @@
69
74
 
70
75
  <div class="container">
71
76
  <div class="description">small year range and few bins</div>
72
- <histogram-date-range width="175" tooltipwidth="120"
73
- mindate="2008" maxdate="2016" bins="[76104,866978,1151617,986331,218672,107410,3324]">
77
+ <histogram-date-range width="175" tooltipwidth="120"
78
+ minDate="2008" maxDate="2016" bins="[76104,866978,1151617,986331,218672,107410,3324]">
74
79
  </histogram-date-range>
75
80
  </div>
76
81
 
@@ -104,8 +109,8 @@
104
109
  minDate="1900"
105
110
  maxDate="2021"
106
111
  bins="[
107
- 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2, 13, 45, 67, 17, 66,
108
- 49, 93, 47, 61, 32, 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
112
+ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2, 13, 45, 67, 17, 66,
113
+ 49, 93, 47, 61, 32, 32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
109
114
  ]"
110
115
  ></histogram-date-range>
111
116
  <button id="loading-toggle">toggle loading</button>
@@ -141,7 +146,7 @@
141
146
  <div class="description">
142
147
  single bin
143
148
  </div>
144
- <histogram-date-range mindate="1926" maxdate="1926" bins="[8]">
149
+ <histogram-date-range minDate="1926" maxDate="1926" bins="[8]">
145
150
  </histogram-date-range>
146
151
  </div>
147
152
 
package/docs/dist/demo/js/app-root.js ADDED
@@ -0,0 +1,79 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __decorate = (decorators, target, key, kind) => {
4
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
5
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
6
+ if (decorator = decorators[i])
7
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
8
+ if (kind && result)
9
+ __defProp(target, key, result);
10
+ return result;
11
+ };
12
+ import {LitElement, html} from "../../../_snowpack/pkg/lit.js";
13
+ import {customElement, state} from "../../../_snowpack/pkg/lit/decorators.js";
14
+ import "../../src/histogram-date-range.js";
15
+ export let AppRoot = class extends LitElement {
16
+ constructor() {
17
+ super(...arguments);
18
+ this.dataSource = {
19
+ minDate: 1955,
20
+ maxDate: 2e3,
21
+ minSelectedDate: 1955,
22
+ maxSelectedDate: 2e3,
23
+ bins: [
24
+ 1,
25
+ 2,
26
+ 3,
27
+ 4,
28
+ 5,
29
+ 6,
30
+ 7,
31
+ 8,
32
+ 9,
33
+ 10,
34
+ 11,
35
+ 12,
36
+ 13,
37
+ 14,
38
+ 15,
39
+ 16,
40
+ 17,
41
+ 18,
42
+ 19,
43
+ 20
44
+ ]
45
+ };
46
+ }
47
+ render() {
48
+ return html`
49
+ <histogram-date-range
50
+ .minDate=${this.dataSource?.minDate}
51
+ .maxDate=${this.dataSource?.maxDate}
52
+ .minSelectedDate=${this.dataSource?.minSelectedDate}
53
+ .maxSelectedDate=${this.dataSource?.maxSelectedDate}
54
+ .updateDelay=${1e3}
55
+ .bins=${this.dataSource?.bins}
56
+ ></histogram-date-range>
57
+
58
+ <button @click=${this.randomize}>Randomize</button>
59
+ `;
60
+ }
61
+ randomize() {
62
+ const minDate = Math.round(Math.random() * 1e3);
63
+ const maxDate = minDate + Math.round(Math.random() * 1e3);
64
+ const bins = Array.from({length: 20}, () => Math.floor(Math.random() * minDate));
65
+ this.dataSource = {
66
+ minDate,
67
+ maxDate,
68
+ minSelectedDate: minDate,
69
+ maxSelectedDate: maxDate,
70
+ bins
71
+ };
72
+ }
73
+ };
74
+ __decorate([
75
+ state()
76
+ ], AppRoot.prototype, "dataSource", 2);
77
+ AppRoot = __decorate([
78
+ customElement("app-root")
79
+ ], AppRoot);
package/docs/dist/src/histogram-date-range.js CHANGED
@@ -313,13 +313,14 @@ export let HistogramDateRange = class extends LitElement {
313
313
  return `${this.minSelectedDate}:${this.maxSelectedDate}`;
314
314
  }
315
315
  getMSFromString(date) {
316
- const digitGroupCount = (date.split(/(\d+)/).length - 1) / 2;
316
+ const stringified = typeof date === "string" ? date : String(date);
317
+ const digitGroupCount = (stringified.split(/(\d+)/).length - 1) / 2;
317
318
  if (digitGroupCount === 1) {
318
319
  const dateObj = new Date(0, 0);
319
- dateObj.setFullYear(Number(date));
320
+ dateObj.setFullYear(Number(stringified));
320
321
  return dateObj.getTime();
321
322
  }
322
- return dayjs(date, [this.dateFormat, DATE_FORMAT]).valueOf();
323
+ return dayjs(stringified, [this.dateFormat, DATE_FORMAT]).valueOf();
323
324
  }
324
325
  handleBarClick(e) {
325
326
  const dataset = e.currentTarget.dataset;
@@ -363,7 +364,7 @@ export let HistogramDateRange = class extends LitElement {
363
364
  <svg
364
365
  id="${id}"
365
366
  class="
366
- ${this.disabled ? "" : "draggable"}
367
+ ${this.disabled ? "" : "draggable"}
367
368
  ${this._isDragging ? "dragging" : ""}"
368
369
  @pointerdown="${this.drag}"
369
370
  >
@@ -496,7 +497,7 @@ export let HistogramDateRange = class extends LitElement {
496
497
  <div
497
498
  id="container"
498
499
  class="
499
- noselect
500
+ noselect
500
501
  ${this._isDragging ? "dragging" : ""}
501
502
  "
502
503
  style="width: ${this.width}px"
@@ -641,16 +642,16 @@ __decorate([
641
642
  property({type: Number})
642
643
  ], HistogramDateRange.prototype, "updateDelay", 2);
643
644
  __decorate([
644
- property()
645
+ property({type: String})
645
646
  ], HistogramDateRange.prototype, "dateFormat", 2);
646
647
  __decorate([
647
- property()
648
+ property({type: String})
648
649
  ], HistogramDateRange.prototype, "missingDataMessage", 2);
649
650
  __decorate([
650
- property()
651
+ property({type: String})
651
652
  ], HistogramDateRange.prototype, "minDate", 2);
652
653
  __decorate([
653
- property()
654
+ property({type: String})
654
655
  ], HistogramDateRange.prototype, "maxDate", 2);
655
656
  __decorate([
656
657
  property({type: Boolean})
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetarchive/histogram-date-range",
3
- "version": "0.1.5",
3
+ "version": "0.1.6-alpha1",
4
4
  "description": "Internet Archive histogram date range picker",
5
5
  "license": "AGPL-3.0-only",
6
6
  "main": "dist/index.js",
@@ -20,7 +20,7 @@
20
20
  "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
21
21
  },
22
22
  "dependencies": {
23
- "@internetarchive/ia-activity-indicator": "^0.0.2",
23
+ "@internetarchive/ia-activity-indicator": "^0.0.3",
24
24
  "dayjs": "^1.10.7",
25
25
  "lit": "^2.1.1"
26
26
  },
package/snowpack.config.js CHANGED
@@ -3,8 +3,8 @@ module.exports = {
3
3
  out: 'docs',
4
4
  },
5
5
  mount: {
6
+ 'demo/js': { url: '/dist/demo/js' },
6
7
  demo: { url: '/demo' },
7
8
  src: { url: '/dist/src' },
8
9
  },
9
10
  };
10
-
package/src/histogram-date-range.ts CHANGED
@@ -69,10 +69,10 @@ export class HistogramDateRange extends LitElement {
69
69
  @property({ type: Number }) tooltipWidth = TOOLTIP_WIDTH;
70
70
  @property({ type: Number }) tooltipHeight = TOOLTIP_HEIGHT;
71
71
  @property({ type: Number }) updateDelay = UPDATE_DEBOUNCE_DELAY_MS;
72
- @property() dateFormat = DATE_FORMAT;
73
- @property() missingDataMessage = MISSING_DATA;
74
- @property() minDate = '';
75
- @property() maxDate = '';
72
+ @property({ type: String }) dateFormat = DATE_FORMAT;
73
+ @property({ type: String }) missingDataMessage = MISSING_DATA;
74
+ @property({ type: String }) minDate = '';
75
+ @property({ type: String }) maxDate = '';
76
76
  @property({ type: Boolean }) disabled = false;
77
77
  @property({ type: Object }) bins: number[] = [];
78
78
 
@@ -490,15 +490,20 @@ export class HistogramDateRange extends LitElement {
490
490
  return `${this.minSelectedDate}:${this.maxSelectedDate}`;
491
491
  }
492
492
 
493
- private getMSFromString(date: string): number {
494
- const digitGroupCount = (date.split(/(\d+)/).length - 1) / 2;
493
+ private getMSFromString(date: unknown): number {
494
+ // It's possible that `date` is not a string in certain situations.
495
+ // For instance if you use LitElement bindings and the date is `2000`,
496
+ // it will be treated as a number instead of a string. This just makes sure
497
+ // we're dealing with a string.
498
+ const stringified = typeof date === 'string' ? date : String(date);
499
+ const digitGroupCount = (stringified.split(/(\d+)/).length - 1) / 2;
495
500
  if (digitGroupCount === 1) {
496
501
  // if there's just a single set of digits, assume it's a year
497
502
  const dateObj = new Date(0, 0); // start at January 1, 1900
498
- dateObj.setFullYear(Number(date)); // override year
503
+ dateObj.setFullYear(Number(stringified)); // override year
499
504
  return dateObj.getTime(); // get time in milliseconds
500
505
  }
501
- return dayjs(date, [this.dateFormat, DATE_FORMAT]).valueOf();
506
+ return dayjs(stringified, [this.dateFormat, DATE_FORMAT]).valueOf();
502
507
  }
503
508
 
504
509
  /**
@@ -573,7 +578,7 @@ export class HistogramDateRange extends LitElement {
573
578
  <svg
574
579
  id="${id}"
575
580
  class="
576
- ${this.disabled ? '' : 'draggable'}
581
+ ${this.disabled ? '' : 'draggable'}
577
582
  ${this._isDragging ? 'dragging' : ''}"
578
583
  @pointerdown="${this.drag}"
579
584
  >
@@ -836,7 +841,7 @@ export class HistogramDateRange extends LitElement {
836
841
  <div
837
842
  id="container"
838
843
  class="
839
- noselect
844
+ noselect
840
845
  ${this._isDragging ? 'dragging' : ''}
841
846
  "
842
847
  style="width: ${this.width}px"
package/test/histogram-date-range.test.ts CHANGED
@@ -45,9 +45,9 @@ async function createCustomElementInHTMLContainer(): Promise<HistogramDateRange>
45
45
  describe('HistogramDateRange', () => {
46
46
  it('shows scaled histogram bars when provided with data', async () => {
47
47
  const el = await createCustomElementInHTMLContainer();
48
- const bars = el.shadowRoot?.querySelectorAll(
48
+ const bars = (el.shadowRoot?.querySelectorAll(
49
49
  '.bar'
50
- ) as unknown as SVGRectElement[];
50
+ ) as unknown) as SVGRectElement[];
51
51
  const heights = Array.from(bars).map(b => b.height.baseVal.value);
52
52
 
53
53
  expect(heights).to.eql([38, 7, 50]);
@@ -276,9 +276,9 @@ describe('HistogramDateRange', () => {
276
276
  // include a number which will require commas (1,000,000)
277
277
  el.bins = [1000000, 1, 100];
278
278
  await aTimeout(10);
279
- const bars = el.shadowRoot?.querySelectorAll(
279
+ const bars = (el.shadowRoot?.querySelectorAll(
280
280
  '.bar'
281
- ) as unknown as SVGRectElement[];
281
+ ) as unknown) as SVGRectElement[];
282
282
  const tooltip = el.shadowRoot?.querySelector('#tooltip') as HTMLDivElement;
283
283
  expect(tooltip.innerText).to.eq('');
284
284
 
@@ -304,9 +304,9 @@ describe('HistogramDateRange', () => {
304
304
 
305
305
  it('does not show tooltip while dragging', async () => {
306
306
  const el = await createCustomElementInHTMLContainer();
307
- const bars = el.shadowRoot?.querySelectorAll(
307
+ const bars = (el.shadowRoot?.querySelectorAll(
308
308
  '.bar'
309
- ) as unknown as SVGRectElement[];
309
+ ) as unknown) as SVGRectElement[];
310
310
  const tooltip = el.shadowRoot?.querySelector('#tooltip') as HTMLDivElement;
311
311
  expect(tooltip.innerText).to.eq('');
312
312
  const minSlider = el.shadowRoot?.querySelector('#slider-min') as SVGElement;
@@ -492,9 +492,9 @@ describe('HistogramDateRange', () => {
492
492
  </histogram-date-range>
493
493
  `
494
494
  );
495
- const bars = el.shadowRoot?.querySelectorAll(
495
+ const bars = (el.shadowRoot?.querySelectorAll(
496
496
  '.bar'
497
- ) as unknown as SVGRectElement[];
497
+ ) as unknown) as SVGRectElement[];
498
498
  const heights = Array.from(bars).map(b => b.height.baseVal.value);
499
499
  expect(heights).to.eql([157]);
500
500
  });
@@ -506,9 +506,9 @@ describe('HistogramDateRange', () => {
506
506
  </histogram-date-range>
507
507
  `
508
508
  );
509
- const bars = el.shadowRoot?.querySelectorAll(
509
+ const bars = (el.shadowRoot?.querySelectorAll(
510
510
  '.bar'
511
- ) as unknown as SVGRectElement[];
511
+ ) as unknown) as SVGRectElement[];
512
512
  const heights = Array.from(bars).map(b => b.height.baseVal.value);
513
513
  expect(heights).to.eql([37, 40, 38, 38, 37, 36]);
514
514
  });
@@ -568,4 +568,28 @@ describe('HistogramDateRange', () => {
568
568
  ?.attributes?.getNamedItem('mode')?.value
569
569
  ).to.eq('processing');
570
570
  });
571
+
572
+ it('can use LitElement bound properties', async () => {
573
+ const el = await fixture<HistogramDateRange>(
574
+ html`
575
+ <histogram-date-range
576
+ .minDate=${1900}
577
+ .maxDate=${'Dec 4, 2020'}
578
+ .minSelectedDate=${2012}
579
+ .maxSelectedDate=${2019}
580
+ .bins=${[33, 1, 100]}
581
+ >
582
+ </histogram-date-range>
583
+ `
584
+ );
585
+ const minDateInput = el.shadowRoot?.querySelector(
586
+ '#date-min'
587
+ ) as HTMLInputElement;
588
+ expect(minDateInput.value).to.eq('2012');
589
+
590
+ const maxDateInput = el.shadowRoot?.querySelector(
591
+ '#date-max'
592
+ ) as HTMLInputElement;
593
+ expect(maxDateInput.value).to.eq('2019');
594
+ });
571
595
  });
package/dist/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export { HistogramDateRange } from './src/histogram-date-range';
package/dist/index.js DELETED
@@ -1,2 +0,0 @@
1
- export { HistogramDateRange } from './src/histogram-date-range';
2
- //# sourceMappingURL=index.js.map
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["export { HistogramDateRange } from './src/histogram-date-range';\n"]}