@internetarchive/histogram-date-range 0.1.3-alpha → 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 +30 -8
  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 +30 -8
  9. package/docs/dist/demo/js/app-root.js +79 -0
  10. package/docs/dist/src/histogram-date-range.js +11 -10
  11. package/package.json +2 -2
  12. package/snowpack.config.js +1 -1
  13. package/src/histogram-date-range.ts +16 -12
  14. package/test/histogram-date-range.test.ts +46 -8
  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 -404
  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,
@@ -48,12 +53,29 @@
48
53
  ></histogram-date-range>
49
54
  </div>
50
55
 
51
-
56
+ <div class="container">
57
+ <div class="description">
58
+ small diff between max and min values
59
+ </div>
60
+ <histogram-date-range
61
+ width="175"
62
+ tooltipwidth="120"
63
+ dateFormat="YYYY"
64
+ updateDelay="1000"
65
+ missingDataMessage="..."
66
+ minSelectedDate="1987"
67
+ maxSelectedDate="2016"
68
+ minDate="1987"
69
+ maxDate="2016"
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]"
71
+ >
72
+ </histogram-date-range>
73
+ </div>
52
74
 
53
75
  <div class="container">
54
76
  <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]">
77
+ <histogram-date-range width="175" tooltipwidth="120"
78
+ minDate="2008" maxDate="2016" bins="[76104,866978,1151617,986331,218672,107410,3324]">
57
79
  </histogram-date-range>
58
80
  </div>
59
81
 
@@ -87,8 +109,8 @@
87
109
  minDate="1900"
88
110
  maxDate="2021"
89
111
  bins="[
90
- 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2, 13, 45, 67, 17, 66,
91
- 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
92
114
  ]"
93
115
  ></histogram-date-range>
94
116
  <button id="loading-toggle">toggle loading</button>
@@ -124,7 +146,7 @@
124
146
  <div class="description">
125
147
  single bin
126
148
  </div>
127
- <histogram-date-range mindate="1926" maxdate="1926" bins="[8]">
149
+ <histogram-date-range minDate="1926" maxDate="1926" bins="[8]">
128
150
  </histogram-date-range>
129
151
  </div>
130
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,
@@ -48,12 +53,29 @@
48
53
  ></histogram-date-range>
49
54
  </div>
50
55
 
51
-
56
+ <div class="container">
57
+ <div class="description">
58
+ small diff between max and min values
59
+ </div>
60
+ <histogram-date-range
61
+ width="175"
62
+ tooltipwidth="120"
63
+ dateFormat="YYYY"
64
+ updateDelay="1000"
65
+ missingDataMessage="..."
66
+ minSelectedDate="1987"
67
+ maxSelectedDate="2016"
68
+ minDate="1987"
69
+ maxDate="2016"
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]"
71
+ >
72
+ </histogram-date-range>
73
+ </div>
52
74
 
53
75
  <div class="container">
54
76
  <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]">
77
+ <histogram-date-range width="175" tooltipwidth="120"
78
+ minDate="2008" maxDate="2016" bins="[76104,866978,1151617,986331,218672,107410,3324]">
57
79
  </histogram-date-range>
58
80
  </div>
59
81
 
@@ -87,8 +109,8 @@
87
109
  minDate="1900"
88
110
  maxDate="2021"
89
111
  bins="[
90
- 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2, 13, 45, 67, 17, 66,
91
- 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
92
114
  ]"
93
115
  ></histogram-date-range>
94
116
  <button id="loading-toggle">toggle loading</button>
@@ -124,7 +146,7 @@
124
146
  <div class="description">
125
147
  single bin
126
148
  </div>
127
- <histogram-date-range mindate="1926" maxdate="1926" bins="[8]">
149
+ <histogram-date-range minDate="1926" maxDate="1926" bins="[8]">
128
150
  </histogram-date-range>
129
151
  </div>
130
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
@@ -125,7 +125,7 @@ export let HistogramDateRange = class extends LitElement {
125
125
  calculateHistData() {
126
126
  const minValue = Math.min(...this.bins);
127
127
  const maxValue = Math.max(...this.bins);
128
- const valueRange = minValue === maxValue ? 1 : Math.log1p(maxValue - minValue);
128
+ const valueRange = minValue === maxValue ? 1 : Math.log1p(maxValue);
129
129
  const valueScale = this.height / valueRange;
130
130
  const dateScale = this.dateRangeMS / this._numBins;
131
131
  return this.bins.map((v, i) => {
@@ -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.3-alpha",
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,11 +20,11 @@
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.3",
23
24
  "dayjs": "^1.10.7",
24
25
  "lit": "^2.1.1"
25
26
  },
26
27
  "devDependencies": {
27
- "@internetarchive/ia-activity-indicator": "^0.0.2",
28
28
  "@open-wc/eslint-config": "^7.0.0",
29
29
  "@open-wc/testing": "^3.0.3",
30
30
  "@typescript-eslint/eslint-plugin": "^5.10.0",
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
 
@@ -147,8 +147,7 @@ export class HistogramDateRange extends LitElement {
147
147
  const maxValue = Math.max(...this.bins);
148
148
  // if there is no difference between the min and max values, use a range of
149
149
  // 1 because log scaling will fail if the range is 0
150
- const valueRange =
151
- minValue === maxValue ? 1 : Math.log1p(maxValue - minValue);
150
+ const valueRange = minValue === maxValue ? 1 : Math.log1p(maxValue);
152
151
  const valueScale = this.height / valueRange;
153
152
  const dateScale = this.dateRangeMS / this._numBins;
154
153
  return this.bins.map((v: number, i: number) => {
@@ -491,15 +490,20 @@ export class HistogramDateRange extends LitElement {
491
490
  return `${this.minSelectedDate}:${this.maxSelectedDate}`;
492
491
  }
493
492
 
494
- private getMSFromString(date: string): number {
495
- 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;
496
500
  if (digitGroupCount === 1) {
497
501
  // if there's just a single set of digits, assume it's a year
498
502
  const dateObj = new Date(0, 0); // start at January 1, 1900
499
- dateObj.setFullYear(Number(date)); // override year
503
+ dateObj.setFullYear(Number(stringified)); // override year
500
504
  return dateObj.getTime(); // get time in milliseconds
501
505
  }
502
- return dayjs(date, [this.dateFormat, DATE_FORMAT]).valueOf();
506
+ return dayjs(stringified, [this.dateFormat, DATE_FORMAT]).valueOf();
503
507
  }
504
508
 
505
509
  /**
@@ -574,7 +578,7 @@ export class HistogramDateRange extends LitElement {
574
578
  <svg
575
579
  id="${id}"
576
580
  class="
577
- ${this.disabled ? '' : 'draggable'}
581
+ ${this.disabled ? '' : 'draggable'}
578
582
  ${this._isDragging ? 'dragging' : ''}"
579
583
  @pointerdown="${this.drag}"
580
584
  >
@@ -837,7 +841,7 @@ export class HistogramDateRange extends LitElement {
837
841
  <div
838
842
  id="container"
839
843
  class="
840
- noselect
844
+ noselect
841
845
  ${this._isDragging ? 'dragging' : ''}
842
846
  "
843
847
  style="width: ${this.width}px"