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

package/demo/index.html

@@ -72,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/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/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 {\n  HistogramDateRange,\n  BinSnappingInterval,\n  BarScalingPreset,\n  BarScalingFunction,\n  BarScalingOption,\n} from './src/histogram-date-range';\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;
@@ -28,6 +31,26 @@ 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 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.
+     *
+     * 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.
+     *
+     * The `'linear'` preset option instead sizes the bars in linear proportion to their bin
+     * values.
+     */
+    barScaling: BarScalingOption;
     private _tooltipOffsetX;
     private _tooltipOffsetY;
     private _tooltipContent?;
@@ -77,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();