@internetarchive/histogram-date-range 1.3.2-alpha-webdev7713.0 → 1.4.0-alpha-webdev7756.0

package/demo/index.html

@@ -9,7 +9,7 @@
   <script type="module">
     import '../dist/src/histogram-date-range.js';
     let eventCount = 0;
-    import '../dist/demo/js/app-root.js';
+    import '../dist/demo/js/lit-histogram-wrapper.js';
     // listen to events from the component and display the data received from them
     document.addEventListener('histogramDateRangeUpdated', e => {
       document.querySelector('.received-events').innerHTML =
@@ -22,7 +22,14 @@
       <div class="description">
         histogram inside a lit element
       </div>
-      <app-root></app-root>
+      <lit-histogram-wrapper></lit-histogram-wrapper>
+
+      <div class="description">
+        bars scaled linearly (not logarithmic)
+      </div>
+      <lit-histogram-wrapper
+        barScaling="linear"
+      ></lit-histogram-wrapper>
 
       <div class="description">
         pre-selected range with 1000ms debounce delay

package/demo/js/{app-root.ts → lit-histogram-wrapper.ts}

@@ -1,5 +1,5 @@
-import { LitElement, html, TemplateResult } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { LitElement, html, css, TemplateResult, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import '../../src/histogram-date-range';
 
 interface DataSource {
@@ -10,12 +10,16 @@ interface DataSource {
   bins: number[];
 }
 
+const IDENTITY_FN = (x: number) => x;
+
 /**
  * This is mainly to test the histogram-date-range within
  * a lit-element.
  */
-@customElement('app-root')
-export class AppRoot extends LitElement {
+@customElement('lit-histogram-wrapper')
+export class LitHistogramWrapper extends LitElement {
+  @property({ type: String }) barScaling?: 'linear' | 'logarithmic';
+
   @state() dataSource: DataSource = {
     minDate: 1955,
     maxDate: 2000,
@@ -27,6 +31,7 @@ export class AppRoot extends LitElement {
   };
 
   render(): TemplateResult {
+    const scalingFn = this.barScaling === 'linear' ? IDENTITY_FN : nothing;
     return html`
       <histogram-date-range
         .minDate=${this.dataSource?.minDate}
@@ -35,6 +40,7 @@ export class AppRoot extends LitElement {
         .maxSelectedDate=${this.dataSource?.maxSelectedDate}
         .updateDelay=${1000}
         .bins=${this.dataSource?.bins}
+        .barScalingFunction=${scalingFn}
       ></histogram-date-range>
 
       <button @click=${this.randomize}>Randomize</button>
@@ -56,4 +62,14 @@ export class AppRoot extends LitElement {
       bins: bins,
     };
   }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    `;
+  }
 }

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

@@ -6,12 +6,13 @@ interface DataSource {
     minSelectedDate: unknown;
     maxSelectedDate: unknown;
     bins: number[];
+    barScalingFunction?: (input: number) => number;
 }
 /**
  * This is mainly to test the histogram-date-range within
  * a lit-element.
  */
-export declare class AppRoot extends LitElement {
+export declare class LitHistogramWrapper extends LitElement {
     dataSource: DataSource;
     render(): TemplateResult;
     private randomize;

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

@@ -1,12 +1,12 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import '../../src/histogram-date-range';
 /**
  * This is mainly to test the histogram-date-range within
  * a lit-element.
  */
-let AppRoot = class AppRoot extends LitElement {
+let LitHistogramWrapper = class LitHistogramWrapper extends LitElement {
     constructor() {
         super(...arguments);
         this.dataSource = {
@@ -20,18 +20,19 @@ let AppRoot = class AppRoot extends LitElement {
         };
     }
     render() {
-        var _a, _b, _c, _d, _e;
-        return html `
-      <histogram-date-range
-        .minDate=${(_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.minDate}
-        .maxDate=${(_b = this.dataSource) === null || _b === void 0 ? void 0 : _b.maxDate}
-        .minSelectedDate=${(_c = this.dataSource) === null || _c === void 0 ? void 0 : _c.minSelectedDate}
-        .maxSelectedDate=${(_d = this.dataSource) === null || _d === void 0 ? void 0 : _d.maxSelectedDate}
-        .updateDelay=${1000}
-        .bins=${(_e = this.dataSource) === null || _e === void 0 ? void 0 : _e.bins}
-      ></histogram-date-range>
-
-      <button @click=${this.randomize}>Randomize</button>
+        var _a, _b, _c, _d, _e, _f, _g;
+        return html `
+      <histogram-date-range
+        .minDate=${(_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.minDate}
+        .maxDate=${(_b = this.dataSource) === null || _b === void 0 ? void 0 : _b.maxDate}
+        .minSelectedDate=${(_c = this.dataSource) === null || _c === void 0 ? void 0 : _c.minSelectedDate}
+        .maxSelectedDate=${(_d = this.dataSource) === null || _d === void 0 ? void 0 : _d.maxSelectedDate}
+        .updateDelay=${1000}
+        .bins=${(_e = this.dataSource) === null || _e === void 0 ? void 0 : _e.bins}
+        .barScalingFunction=${(_g = (_f = this.dataSource) === null || _f === void 0 ? void 0 : _f.barScalingFunction) !== null && _g !== void 0 ? _g : nothing}
+      ></histogram-date-range>
+
+      <button @click=${this.randomize}>Randomize</button>
     `;
     }
     randomize() {
@@ -50,9 +51,9 @@ let AppRoot = class AppRoot extends LitElement {
 };
 __decorate([
     state()
-], AppRoot.prototype, "dataSource", void 0);
-AppRoot = __decorate([
-    customElement('app-root')
-], AppRoot);
-export { AppRoot };
+], LitHistogramWrapper.prototype, "dataSource", void 0);
+LitHistogramWrapper = __decorate([
+    customElement('lit-histogram-wrapper')
+], LitHistogramWrapper);
+export { LitHistogramWrapper };
 //# sourceMappingURL=app-root.js.map

package/dist/demo/js/app-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../../demo/js/app-root.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,gCAAgC,CAAC;AAUxC;;;GAGG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QACI,eAAU,GAAe;YAChC,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,IAAI;YACrB,eAAe,EAAE,IAAI;YACrB,IAAI,EAAE;gBACJ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;aACtE;SACF,CAAC;IAgCJ,CAAC;IA9BC,MAAM;;QACJ,OAAO,IAAI,CAAA;;mBAEI,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;mBACxB,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;2BAChB,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;2BAChC,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;uBACpC,IAAI;gBACX,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI;;;uBAGd,IAAI,CAAC,SAAS;KAChC,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QAC3D,uBAAuB;QACvB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,CAC3C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,CACpC,CAAC;QACF,IAAI,CAAC,UAAU,GAAG;YAChB,OAAO;YACP,OAAO;YACP,eAAe,EAAE,OAAO;YACxB,eAAe,EAAE,OAAO;YACxB,IAAI,EAAE,IAAI;SACX,CAAC;IACJ,CAAC;CACF,CAAA;AAxCU;IAAR,KAAK,EAAE;2CAQN;AATS,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAyCnB","sourcesContent":["import { LitElement, html, TemplateResult } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport '../../src/histogram-date-range';\n\ninterface DataSource {\n  minDate: unknown;\n  maxDate: unknown;\n  minSelectedDate: unknown;\n  maxSelectedDate: unknown;\n  bins: number[];\n}\n\n/**\n * This is mainly to test the histogram-date-range within\n * a lit-element.\n */\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  @state() dataSource: DataSource = {\n    minDate: 1955,\n    maxDate: 2000,\n    minSelectedDate: 1955,\n    maxSelectedDate: 2000,\n    bins: [\n      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n    ],\n  };\n\n  render(): TemplateResult {\n    return html`\n      <histogram-date-range\n        .minDate=${this.dataSource?.minDate}\n        .maxDate=${this.dataSource?.maxDate}\n        .minSelectedDate=${this.dataSource?.minSelectedDate}\n        .maxSelectedDate=${this.dataSource?.maxSelectedDate}\n        .updateDelay=${1000}\n        .bins=${this.dataSource?.bins}\n      ></histogram-date-range>\n\n      <button @click=${this.randomize}>Randomize</button>\n    `;\n  }\n\n  private randomize() {\n    const minDate = Math.round(Math.random() * 1000);\n    const maxDate = minDate + Math.round(Math.random() * 1000);\n    // generate random bins\n    const bins = Array.from({ length: 20 }, () =>\n      Math.floor(Math.random() * minDate)\n    );\n    this.dataSource = {\n      minDate,\n      maxDate,\n      minSelectedDate: minDate,\n      maxSelectedDate: maxDate,\n      bins: bins,\n    };\n  }\n}\n"]}
+{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../../demo/js/app-root.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,gCAAgC,CAAC;AAWxC;;;GAGG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QACI,eAAU,GAAe;YAChC,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,IAAI;YACrB,eAAe,EAAE,IAAI;YACrB,IAAI,EAAE;gBACJ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;aACtE;SACF,CAAC;IAiCJ,CAAC;IA/BC,MAAM;;QACJ,OAAO,IAAI,CAAA;;mBAEI,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;mBACxB,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;2BAChB,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;2BAChC,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;uBACpC,IAAI;gBACX,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI;8BACP,MAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,kBAAkB,mCAAI,OAAO;;;uBAGrD,IAAI,CAAC,SAAS;KAChC,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QAC3D,uBAAuB;QACvB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,CAC3C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,CACpC,CAAC;QACF,IAAI,CAAC,UAAU,GAAG;YAChB,OAAO;YACP,OAAO;YACP,eAAe,EAAE,OAAO;YACxB,eAAe,EAAE,OAAO;YACxB,IAAI,EAAE,IAAI;SACX,CAAC;IACJ,CAAC;CACF,CAAA;AAzCU;IAAR,KAAK,EAAE;uDAQN;AATS,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CA0C/B","sourcesContent":["import { LitElement, html, TemplateResult, nothing } from 'lit';\r\nimport { customElement, state } from 'lit/decorators.js';\r\nimport '../../src/histogram-date-range';\r\n\r\ninterface DataSource {\r\n  minDate: unknown;\r\n  maxDate: unknown;\r\n  minSelectedDate: unknown;\r\n  maxSelectedDate: unknown;\r\n  bins: number[];\r\n  barScalingFunction?: (input: number) => number;\r\n}\r\n\r\n/**\r\n * This is mainly to test the histogram-date-range within\r\n * a lit-element.\r\n */\r\n@customElement('lit-histogram-wrapper')\r\nexport class LitHistogramWrapper extends LitElement {\r\n  @state() dataSource: DataSource = {\r\n    minDate: 1955,\r\n    maxDate: 2000,\r\n    minSelectedDate: 1955,\r\n    maxSelectedDate: 2000,\r\n    bins: [\r\n      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\r\n    ],\r\n  };\r\n\r\n  render(): TemplateResult {\r\n    return html`\r\n      <histogram-date-range\r\n        .minDate=${this.dataSource?.minDate}\r\n        .maxDate=${this.dataSource?.maxDate}\r\n        .minSelectedDate=${this.dataSource?.minSelectedDate}\r\n        .maxSelectedDate=${this.dataSource?.maxSelectedDate}\r\n        .updateDelay=${1000}\r\n        .bins=${this.dataSource?.bins}\r\n        .barScalingFunction=${this.dataSource?.barScalingFunction ?? nothing}\r\n      ></histogram-date-range>\r\n\r\n      <button @click=${this.randomize}>Randomize</button>\r\n    `;\r\n  }\r\n\r\n  private randomize() {\r\n    const minDate = Math.round(Math.random() * 1000);\r\n    const maxDate = minDate + Math.round(Math.random() * 1000);\r\n    // generate random bins\r\n    const bins = Array.from({ length: 20 }, () =>\r\n      Math.floor(Math.random() * minDate)\r\n    );\r\n    this.dataSource = {\r\n      minDate,\r\n      maxDate,\r\n      minSelectedDate: minDate,\r\n      maxSelectedDate: maxDate,\r\n      bins: bins,\r\n    };\r\n  }\r\n}\r\n"]}

package/dist/demo/js/list-histogram-wrapper.d.ts

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

package/dist/demo/js/list-histogram-wrapper.js

@@ -0,0 +1,59 @@
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import '../../src/histogram-date-range';
+/**
+ * This is mainly to test the histogram-date-range within
+ * a lit-element.
+ */
+let LitHistogramWrapper = class LitHistogramWrapper extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.dataSource = {
+            minDate: 1955,
+            maxDate: 2000,
+            minSelectedDate: 1955,
+            maxSelectedDate: 2000,
+            bins: [
+                1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
+            ],
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return html `
+      <histogram-date-range
+        .minDate=${(_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.minDate}
+        .maxDate=${(_b = this.dataSource) === null || _b === void 0 ? void 0 : _b.maxDate}
+        .minSelectedDate=${(_c = this.dataSource) === null || _c === void 0 ? void 0 : _c.minSelectedDate}
+        .maxSelectedDate=${(_d = this.dataSource) === null || _d === void 0 ? void 0 : _d.maxSelectedDate}
+        .updateDelay=${1000}
+        .bins=${(_e = this.dataSource) === null || _e === void 0 ? void 0 : _e.bins}
+        .barScalingFunction=${(_g = (_f = this.dataSource) === null || _f === void 0 ? void 0 : _f.barScalingFunction) !== null && _g !== void 0 ? _g : nothing}
+      ></histogram-date-range>
+
+      <button @click=${this.randomize}>Randomize</button>
+    `;
+    }
+    randomize() {
+        const minDate = Math.round(Math.random() * 1000);
+        const maxDate = minDate + Math.round(Math.random() * 1000);
+        // generate random bins
+        const bins = Array.from({ length: 20 }, () => Math.floor(Math.random() * minDate));
+        this.dataSource = {
+            minDate,
+            maxDate,
+            minSelectedDate: minDate,
+            maxSelectedDate: maxDate,
+            bins: bins,
+        };
+    }
+};
+__decorate([
+    state()
+], LitHistogramWrapper.prototype, "dataSource", void 0);
+LitHistogramWrapper = __decorate([
+    customElement('lit-histogram-wrapper')
+], LitHistogramWrapper);
+export { LitHistogramWrapper };
+//# sourceMappingURL=list-histogram-wrapper.js.map

package/dist/demo/js/list-histogram-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-histogram-wrapper.js","sourceRoot":"","sources":["../../../demo/js/list-histogram-wrapper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,gCAAgC,CAAC;AAWxC;;;GAGG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QACI,eAAU,GAAe;YAChC,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,IAAI;YACrB,eAAe,EAAE,IAAI;YACrB,IAAI,EAAE;gBACJ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;aACtE;SACF,CAAC;IAiCJ,CAAC;IA/BC,MAAM;;QACJ,OAAO,IAAI,CAAA;;mBAEI,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;mBACxB,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;2BAChB,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;2BAChC,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;uBACpC,IAAI;gBACX,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI;8BACP,MAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,kBAAkB,mCAAI,OAAO;;;uBAGrD,IAAI,CAAC,SAAS;KAChC,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QAC3D,uBAAuB;QACvB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,CAC3C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,CACpC,CAAC;QACF,IAAI,CAAC,UAAU,GAAG;YAChB,OAAO;YACP,OAAO;YACP,eAAe,EAAE,OAAO;YACxB,eAAe,EAAE,OAAO;YACxB,IAAI,EAAE,IAAI;SACX,CAAC;IACJ,CAAC;CACF,CAAA;AAzCU;IAAR,KAAK,EAAE;uDAQN;AATS,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CA0C/B","sourcesContent":["import { LitElement, html, TemplateResult, nothing } from 'lit';\r\nimport { customElement, state } from 'lit/decorators.js';\r\nimport '../../src/histogram-date-range';\r\n\r\ninterface DataSource {\r\n  minDate: unknown;\r\n  maxDate: unknown;\r\n  minSelectedDate: unknown;\r\n  maxSelectedDate: unknown;\r\n  bins: number[];\r\n  barScalingFunction?: (input: number) => number;\r\n}\r\n\r\n/**\r\n * This is mainly to test the histogram-date-range within\r\n * a lit-element.\r\n */\r\n@customElement('lit-histogram-wrapper')\r\nexport class LitHistogramWrapper extends LitElement {\r\n  @state() dataSource: DataSource = {\r\n    minDate: 1955,\r\n    maxDate: 2000,\r\n    minSelectedDate: 1955,\r\n    maxSelectedDate: 2000,\r\n    bins: [\r\n      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\r\n    ],\r\n  };\r\n\r\n  render(): TemplateResult {\r\n    return html`\r\n      <histogram-date-range\r\n        .minDate=${this.dataSource?.minDate}\r\n        .maxDate=${this.dataSource?.maxDate}\r\n        .minSelectedDate=${this.dataSource?.minSelectedDate}\r\n        .maxSelectedDate=${this.dataSource?.maxSelectedDate}\r\n        .updateDelay=${1000}\r\n        .bins=${this.dataSource?.bins}\r\n        .barScalingFunction=${this.dataSource?.barScalingFunction ?? nothing}\r\n      ></histogram-date-range>\r\n\r\n      <button @click=${this.randomize}>Randomize</button>\r\n    `;\r\n  }\r\n\r\n  private randomize() {\r\n    const minDate = Math.round(Math.random() * 1000);\r\n    const maxDate = minDate + Math.round(Math.random() * 1000);\r\n    // generate random bins\r\n    const bins = Array.from({ length: 20 }, () =>\r\n      Math.floor(Math.random() * minDate)\r\n    );\r\n    this.dataSource = {\r\n      minDate,\r\n      maxDate,\r\n      minSelectedDate: minDate,\r\n      maxSelectedDate: maxDate,\r\n      bins: bins,\r\n    };\r\n  }\r\n}\r\n"]}

package/dist/demo/js/lit-histogram-wrapper.d.ts

@@ -0,0 +1,21 @@
+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 LitHistogramWrapper extends LitElement {
+    barScaling?: 'linear' | 'logarithmic';
+    dataSource: DataSource;
+    render(): TemplateResult;
+    private randomize;
+    static get styles(): import("lit").CSSResult;
+}
+export {};

package/dist/demo/js/lit-histogram-wrapper.js

@@ -0,0 +1,73 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import '../../src/histogram-date-range';
+const IDENTITY_FN = (x) => x;
+/**
+ * This is mainly to test the histogram-date-range within
+ * a lit-element.
+ */
+let LitHistogramWrapper = class LitHistogramWrapper extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.dataSource = {
+            minDate: 1955,
+            maxDate: 2000,
+            minSelectedDate: 1955,
+            maxSelectedDate: 2000,
+            bins: [
+                1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
+            ],
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        const scalingFn = this.barScaling === 'linear' ? IDENTITY_FN : nothing;
+        return html `
+      <histogram-date-range
+        .minDate=${(_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.minDate}
+        .maxDate=${(_b = this.dataSource) === null || _b === void 0 ? void 0 : _b.maxDate}
+        .minSelectedDate=${(_c = this.dataSource) === null || _c === void 0 ? void 0 : _c.minSelectedDate}
+        .maxSelectedDate=${(_d = this.dataSource) === null || _d === void 0 ? void 0 : _d.maxSelectedDate}
+        .updateDelay=${1000}
+        .bins=${(_e = this.dataSource) === null || _e === void 0 ? void 0 : _e.bins}
+        .barScalingFunction=${scalingFn}
+      ></histogram-date-range>
+
+      <button @click=${this.randomize}>Randomize</button>
+    `;
+    }
+    randomize() {
+        const minDate = Math.round(Math.random() * 1000);
+        const maxDate = minDate + Math.round(Math.random() * 1000);
+        // generate random bins
+        const bins = Array.from({ length: 20 }, () => Math.floor(Math.random() * minDate));
+        this.dataSource = {
+            minDate,
+            maxDate,
+            minSelectedDate: minDate,
+            maxSelectedDate: maxDate,
+            bins: bins,
+        };
+    }
+    static get styles() {
+        return css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], LitHistogramWrapper.prototype, "barScaling", void 0);
+__decorate([
+    state()
+], LitHistogramWrapper.prototype, "dataSource", void 0);
+LitHistogramWrapper = __decorate([
+    customElement('lit-histogram-wrapper')
+], LitHistogramWrapper);
+export { LitHistogramWrapper };
+//# sourceMappingURL=lit-histogram-wrapper.js.map

package/dist/demo/js/lit-histogram-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lit-histogram-wrapper.js","sourceRoot":"","sources":["../../../demo/js/lit-histogram-wrapper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,gCAAgC,CAAC;AAUxC,MAAM,WAAW,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC;AAErC;;;GAGG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QAGI,eAAU,GAAe;YAChC,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,IAAI;YACrB,eAAe,EAAE,IAAI;YACrB,IAAI,EAAE;gBACJ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;aACtE;SACF,CAAC;IA4CJ,CAAC;IA1CC,MAAM;;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC;QACvE,OAAO,IAAI,CAAA;;mBAEI,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;mBACxB,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;2BAChB,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;2BAChC,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;uBACpC,IAAI;gBACX,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI;8BACP,SAAS;;;uBAGhB,IAAI,CAAC,SAAS;KAChC,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QAC3D,uBAAuB;QACvB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,CAC3C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,CACpC,CAAC;QACF,IAAI,CAAC,UAAU,GAAG;YAChB,OAAO;YACP,OAAO;YACP,eAAe,EAAE,OAAO;YACxB,eAAe,EAAE,OAAO;YACxB,IAAI,EAAE,IAAI;SACX,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;CACF,CAAA;AAtD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAuC;AAEzD;IAAR,KAAK,EAAE;uDAQN;AAXS,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CAuD/B","sourcesContent":["import { LitElement, html, css, TemplateResult, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '../../src/histogram-date-range';\n\ninterface DataSource {\n  minDate: unknown;\n  maxDate: unknown;\n  minSelectedDate: unknown;\n  maxSelectedDate: unknown;\n  bins: number[];\n}\n\nconst IDENTITY_FN = (x: number) => x;\n\n/**\n * This is mainly to test the histogram-date-range within\n * a lit-element.\n */\n@customElement('lit-histogram-wrapper')\nexport class LitHistogramWrapper extends LitElement {\n  @property({ type: String }) barScaling?: 'linear' | 'logarithmic';\n\n  @state() dataSource: DataSource = {\n    minDate: 1955,\n    maxDate: 2000,\n    minSelectedDate: 1955,\n    maxSelectedDate: 2000,\n    bins: [\n      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n    ],\n  };\n\n  render(): TemplateResult {\n    const scalingFn = this.barScaling === 'linear' ? IDENTITY_FN : nothing;\n    return html`\n      <histogram-date-range\n        .minDate=${this.dataSource?.minDate}\n        .maxDate=${this.dataSource?.maxDate}\n        .minSelectedDate=${this.dataSource?.minSelectedDate}\n        .maxSelectedDate=${this.dataSource?.maxSelectedDate}\n        .updateDelay=${1000}\n        .bins=${this.dataSource?.bins}\n        .barScalingFunction=${scalingFn}\n      ></histogram-date-range>\n\n      <button @click=${this.randomize}>Randomize</button>\n    `;\n  }\n\n  private randomize() {\n    const minDate = Math.round(Math.random() * 1000);\n    const maxDate = minDate + Math.round(Math.random() * 1000);\n    // generate random bins\n    const bins = Array.from({ length: 20 }, () =>\n      Math.floor(Math.random() * minDate)\n    );\n    this.dataSource = {\n      minDate,\n      maxDate,\n      minSelectedDate: minDate,\n      maxSelectedDate: maxDate,\n      bins: bins,\n    };\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/histogram-date-range.d.ts

@@ -28,6 +28,24 @@ export declare class HistogramDateRange extends LitElement {
      *  - `year`: Same as `month`, but snapping to year boundaries instead of months.
      */
     binSnapping: BinSnappingInterval;
+    /**
+     * What label to use on tooltips to identify the type of data being represented.
+     * Defaults to `'item(s)'`.
+     */
+    tooltipLabel: string;
+    /**
+     * A function mapping bin values to a new value that determines how tall each bar will
+     * be in relation to the others.
+     *
+     * Default sizing function is the logarithm of the bin value, yielding more prominent
+     * bars for smaller values, at the cost of bars not being directly proportional to their
+     * values and having relatively smooth variation among values of a similar magnitude.
+     * This ensures that when the difference between the min and max values is large, small
+     * values are not as liable to completely disappear visually.
+     *
+     * For linearly-scaled bars, set this to the identity function.
+     */
+    barScalingFunction: (binValue: number) => number;
     private _tooltipOffsetX;
     private _tooltipOffsetY;
     private _tooltipContent?;

package/dist/src/histogram-date-range.js

@@ -19,6 +19,9 @@ const TOOLTIP_HEIGHT = 30;
 const DATE_FORMAT = 'YYYY';
 const MISSING_DATA = 'no data';
 const UPDATE_DEBOUNCE_DELAY_MS = 0;
+const TOOLTIP_LABEL = 'item';
+// this function may be overridden only via Lit property expression or direct assignment
+const LOG_BAR_SCALING_FN = (binValue) => Math.log1p(binValue);
 // this constant is not set up to be overridden
 const SLIDER_CORNER_SIZE = 4;
 // these CSS custom props can be overridden from the HTML that is invoking this component
@@ -67,6 +70,24 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
          *  - `year`: Same as `month`, but snapping to year boundaries instead of months.
          */
         this.binSnapping = 'none';
+        /**
+         * What label to use on tooltips to identify the type of data being represented.
+         * Defaults to `'item(s)'`.
+         */
+        this.tooltipLabel = TOOLTIP_LABEL;
+        /**
+         * A function mapping bin values to a new value that determines how tall each bar will
+         * be in relation to the others.
+         *
+         * Default sizing function is the logarithm of the bin value, yielding more prominent
+         * bars for smaller values, at the cost of bars not being directly proportional to their
+         * values and having relatively smooth variation among values of a similar magnitude.
+         * This ensures that when the difference between the min and max values is large, small
+         * values are not as liable to completely disappear visually.
+         *
+         * For linearly-scaled bars, set this to the identity function.
+         */
+        this.barScalingFunction = LOG_BAR_SCALING_FN;
         // internal reactive properties not exposed as attributes
         this._tooltipOffsetX = 0;
         this._tooltipOffsetY = 0;
@@ -232,7 +253,7 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         const maxValue = Math.max(...this.bins);
         // if there is no difference between the min and max values, use a range of
         // 1 because log scaling will fail if the range is 0
-        const valueRange = minValue === maxValue ? 1 : Math.log1p(maxValue);
+        const valueRange = minValue === maxValue ? 1 : this.barScalingFunction(maxValue);
         const valueScale = height / valueRange;
         const dateScale = dateRangeMS / _numBins;
         return bins.map((v, i) => {
@@ -251,7 +272,7 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
                 value: v,
                 // use log scaling for the height of the bar to prevent tall bars from
                 // making the smaller ones too small to see
-                height: Math.floor(Math.log1p(v) * valueScale),
+                height: Math.floor(this.barScalingFunction(v) * valueScale),
                 binStart,
                 binEnd,
                 tooltip,
@@ -379,7 +400,7 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         const target = e.currentTarget;
         const x = target.x.baseVal.value + this.sliderWidth / 2;
         const dataset = target.dataset;
-        const itemsText = `item${dataset.numItems !== '1' ? 's' : ''}`;
+        const itemsText = `${this.tooltipLabel}${dataset.numItems !== '1' ? 's' : ''}`;
         const formattedNumItems = Number(dataset.numItems).toLocaleString();
         const tooltipPadding = 2;
         const bufferHeight = 9;
@@ -676,20 +697,28 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
             const barStyle = `stroke-dasharray: 0 ${barWidth} ${barHeight} ${barWidth} 0 ${barHeight}`;
             const bar = svg `
         <rect
-          class="bar"
-          style=${barStyle}
+          class="bar-pointer-target"
           x=${x}
-          y=${this.height - barHeight}
+          y="0"
           width=${barWidth}
-          height=${barHeight}
+          height=${this.height}
           @pointerenter=${this.showTooltip}
           @pointerleave=${this.hideTooltip}
           @click=${this.handleBarClick}
-          fill=${barFill}
+          fill="transparent"
           data-num-items=${data.value}
           data-bin-start=${data.binStart}
           data-bin-end=${data.binEnd}
           data-tooltip=${data.tooltip}
+        />
+        <rect
+          class="bar"
+          style=${barStyle}
+          x=${x}
+          y=${this.height - barHeight}
+          width=${barWidth}
+          height=${barHeight}
+          fill=${barFill}
         />`;
             x += xScale;
             return bar;
@@ -855,7 +884,8 @@ HistogramDateRange.styles = css `
       -ms-user-select: none; /* Internet Explorer/Edge */
       user-select: none; /* current Chrome, Edge, Opera and Firefox */
     }
-    .bar {
+    .bar,
+    .bar-pointer-target {
       /* create a transparent border around the hist bars to prevent "gaps" and
       flickering when moving around between bars. this also helps with handling
       clicks on the bars, preventing users from being able to click in between
@@ -864,11 +894,15 @@ HistogramDateRange.styles = css `
       /* ensure transparent stroke wide enough to cover gap between bars */
       stroke-width: 2px;
     }
-    .bar:hover {
+    .bar {
+      /* ensure the bar's pointer target receives events, not the bar itself */
+      pointer-events: none;
+    }
+    .bar-pointer-target:hover + .bar {
       /* highlight currently hovered bar */
       fill-opacity: 0.7;
     }
-    .disabled .bar:hover {
+    .disabled .bar-pointer-target:hover + .bar {
       /* ensure no visual hover interaction when disabled */
       fill-opacity: 1;
     }
@@ -985,6 +1019,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], HistogramDateRange.prototype, "binSnapping", void 0);
+__decorate([
+    property({ type: String })
+], HistogramDateRange.prototype, "tooltipLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HistogramDateRange.prototype, "barScalingFunction", void 0);
 __decorate([
     state()
 ], HistogramDateRange.prototype, "_tooltipOffsetX", void 0);