@internetarchive/histogram-date-range 1.4.0-alpha-webdev7756.0 → 1.4.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/lit-histogram-wrapper.js';
+    import '../dist/demo/js/app-root.js';
     // listen to events from the component and display the data received from them
     document.addEventListener('histogramDateRangeUpdated', e => {
       document.querySelector('.received-events').innerHTML =
@@ -22,14 +22,7 @@
       <div class="description">
         histogram inside a lit element
       </div>
-      <lit-histogram-wrapper></lit-histogram-wrapper>
-
-      <div class="description">
-        bars scaled linearly (not logarithmic)
-      </div>
-      <lit-histogram-wrapper
-        barScaling="linear"
-      ></lit-histogram-wrapper>
+      <app-root></app-root>
 
       <div class="description">
         pre-selected range with 1000ms debounce delay
@@ -79,6 +72,26 @@
       </histogram-date-range>
     </div>
 
+    <div class="container">
+      <div class="description">
+        as above, but with linear scaled bars
+      </div>
+      <histogram-date-range
+        width="175"
+        tooltipwidth="120"
+        dateFormat="YYYY"
+        updateDelay="1000"
+        missingDataMessage="..."
+        barScaling="linear"
+        minSelectedDate="1987"
+        maxSelectedDate="2016"
+        minDate="1987"
+        maxDate="2016"
+        bins="[1519,1643,1880,2046,1973,2085,2148,2152,2349,2304,2314,2484,2590,2450,2495,2475,2392,2631,2504,2619,2519,2552,2462,2217,2171,2132,2127,2041,1638,1441]"
+      >
+      </histogram-date-range>
+    </div>
+
     <div class="container">
       <div class="description">small year range and few bins</div>
       <histogram-date-range width="175" tooltipwidth="120"

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

@@ -1,5 +1,5 @@
-import { LitElement, html, css, TemplateResult, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { LitElement, html, TemplateResult } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
 import '../../src/histogram-date-range';
 
 interface DataSource {
@@ -10,16 +10,12 @@ interface DataSource {
   bins: number[];
 }
 
-const IDENTITY_FN = (x: number) => x;
-
 /**
  * This is mainly to test the histogram-date-range within
  * a lit-element.
  */
-@customElement('lit-histogram-wrapper')
-export class LitHistogramWrapper extends LitElement {
-  @property({ type: String }) barScaling?: 'linear' | 'logarithmic';
-
+@customElement('app-root')
+export class AppRoot extends LitElement {
   @state() dataSource: DataSource = {
     minDate: 1955,
     maxDate: 2000,
@@ -31,7 +27,6 @@ export class LitHistogramWrapper extends LitElement {
   };
 
   render(): TemplateResult {
-    const scalingFn = this.barScaling === 'linear' ? IDENTITY_FN : nothing;
     return html`
       <histogram-date-range
         .minDate=${this.dataSource?.minDate}
@@ -40,7 +35,6 @@ export class LitHistogramWrapper extends LitElement {
         .maxSelectedDate=${this.dataSource?.maxSelectedDate}
         .updateDelay=${1000}
         .bins=${this.dataSource?.bins}
-        .barScalingFunction=${scalingFn}
       ></histogram-date-range>
 
       <button @click=${this.randomize}>Randomize</button>
@@ -62,14 +56,4 @@ export class LitHistogramWrapper 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,13 +6,12 @@ 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 LitHistogramWrapper extends LitElement {
+export declare class AppRoot 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, nothing } from 'lit';
+import { LitElement, html } 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 {
+let AppRoot = class AppRoot extends LitElement {
     constructor() {
         super(...arguments);
         this.dataSource = {
@@ -20,19 +20,18 @@ let LitHistogramWrapper = class LitHistogramWrapper extends LitElement {
         };
     }
     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>
+        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>
     `;
     }
     randomize() {
@@ -51,9 +50,9 @@ let LitHistogramWrapper = class LitHistogramWrapper extends LitElement {
 };
 __decorate([
     state()
-], LitHistogramWrapper.prototype, "dataSource", void 0);
-LitHistogramWrapper = __decorate([
-    customElement('lit-histogram-wrapper')
-], LitHistogramWrapper);
-export { LitHistogramWrapper };
+], AppRoot.prototype, "dataSource", void 0);
+AppRoot = __decorate([
+    customElement('app-root')
+], AppRoot);
+export { AppRoot };
 //# 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,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"]}
+{"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"]}

package/dist/index.d.ts

@@ -1 +1 @@
-export { HistogramDateRange, BinSnappingInterval, } from './src/histogram-date-range';
+export { HistogramDateRange, BinSnappingInterval, BarScalingPreset, BarScalingFunction, BarScalingOption, } from './src/histogram-date-range';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,GAEnB,MAAM,4BAA4B,CAAC","sourcesContent":["export {\n  HistogramDateRange,\n  BinSnappingInterval,\n} from './src/histogram-date-range';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,GAKnB,MAAM,4BAA4B,CAAC","sourcesContent":["export {\r\n  HistogramDateRange,\r\n  BinSnappingInterval,\r\n  BarScalingPreset,\r\n  BarScalingFunction,\r\n  BarScalingOption,\r\n} from './src/histogram-date-range';\r\n"]}

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

@@ -1,6 +1,9 @@
 import '@internetarchive/ia-activity-indicator';
 import { LitElement, PropertyValues, SVGTemplateResult, TemplateResult } from 'lit';
 export type BinSnappingInterval = 'none' | 'month' | 'year';
+export type BarScalingPreset = 'linear' | 'logarithmic';
+export type BarScalingFunction = (binValue: number) => number;
+export type BarScalingOption = BarScalingPreset | BarScalingFunction;
 export declare class HistogramDateRange extends LitElement {
     width: number;
     height: number;
@@ -34,18 +37,20 @@ export declare class HistogramDateRange extends LitElement {
      */
     tooltipLabel: string;
     /**
-     * A function mapping bin values to a new value that determines how tall each bar will
-     * be in relation to the others.
+     * A function or preset value indicating how the height of each bar relates to its
+     * corresponding bin value. Current presets available are 'logarithmic' and 'linear',
+     * but a custom function may be provided instead if other behavior is desired.
      *
-     * 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.
+     * The default scaling (`'logarithmic'`) uses the logarithm of each bin value, yielding
+     * more prominent bars for smaller values. This ensures that even when the difference
+     * between the min & max values is large, small values are unlikely to completely disappear
+     * visually. However, the cost is that bars have less noticeable variation among values of
+     * a similar magnitude, and their heights are not a direct representation of the bin values.
      *
-     * For linearly-scaled bars, set this to the identity function.
+     * The `'linear'` preset option instead sizes the bars in linear proportion to their bin
+     * values.
      */
-    barScalingFunction: (binValue: number) => number;
+    barScaling: BarScalingOption;
     private _tooltipOffsetX;
     private _tooltipOffsetY;
     private _tooltipContent?;
@@ -95,6 +100,10 @@ export declare class HistogramDateRange extends LitElement {
      * Default is simply to snap to the nearest full second.
      */
     private snapTimestamp;
+    /**
+     * Function to scale bin values, whether from a preset or a provided custom function.
+     */
+    private get barScalingFunction();
     private calculateHistData;
     private get hasBinData();
     private get _numBins();