@internetarchive/histogram-date-range 1.3.1 → 1.3.2

package/demo/index.css

@@ -10,6 +10,12 @@ body {
   display: grid;
   justify-content: center;
 }
+.clipped {
+  overflow: hidden;
+}
+.text-centered {
+  text-align: center;
+}
 .description {
   margin: 10px auto;
 }

package/demo/index.html

@@ -106,6 +106,21 @@
       ></histogram-date-range>
     </div>
 
+    <div class="container">
+      <div class="clipped text-centered">
+        <div class="description">inside clipping container</div>
+        <histogram-date-range
+          width="175"
+          dateFormat="MM/YYYY"
+          binSnapping="month"
+          minDate="01/2000"
+          maxDate="12/2005"
+          bins="[1,12,2,11,3,10,4,9,5,8,6,7]"
+          style="--histogramDateRangeInputWidth: 50px;"
+        ></histogram-date-range>
+      </div>
+    </div>
+
     <div class="container">
       <div class="description">
         default range with custom styling and date format

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

@@ -1,19 +1,19 @@
-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 AppRoot extends LitElement {
-    dataSource: DataSource;
-    render(): TemplateResult;
-    private randomize;
-}
-export {};
+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 AppRoot extends LitElement {
+    dataSource: DataSource;
+    render(): TemplateResult;
+    private randomize;
+}
+export {};

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

@@ -1,26 +1,26 @@
-import { __decorate } from "tslib";
-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 AppRoot = class AppRoot 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;
+import { __decorate } from "tslib";
+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 AppRoot = class AppRoot 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;
         return html `
       <histogram-date-range
         .minDate=${(_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.minDate}
@@ -32,27 +32,27 @@ let AppRoot = class AppRoot extends LitElement {
       ></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()
-], AppRoot.prototype, "dataSource", void 0);
-AppRoot = __decorate([
-    customElement('app-root')
-], AppRoot);
-export { AppRoot };
+    `;
+    }
+    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()
+], 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,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,gCAAgC,CAAC;AAUxC;;;GAGG;AAEH,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;QACW,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;SAzCY,OAAO","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,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, } from './src/histogram-date-range';

package/dist/index.js

@@ -1,2 +1,2 @@
-export { HistogramDateRange, } from './src/histogram-date-range';
+export { HistogramDateRange, } from './src/histogram-date-range';
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,214 @@
+import '@internetarchive/ia-activity-indicator';
+import { LitElement, PropertyValues, SVGTemplateResult, TemplateResult } from 'lit';
+export type BinSnappingInterval = 'none' | 'month' | 'year';
+export declare class HistogramDateRange1 extends LitElement {
+    width: number;
+    height: number;
+    sliderWidth: number;
+    tooltipWidth: number;
+    tooltipHeight: number;
+    updateDelay: number;
+    dateFormat: string;
+    missingDataMessage: string;
+    minDate: string;
+    maxDate: string;
+    disabled: boolean;
+    bins: number[];
+    /** If true, update events will not be canceled by the date inputs receiving focus */
+    updateWhileFocused: boolean;
+    /**
+     * What interval bins should be snapped to for determining their time ranges.
+     *  - `none` (default): Bins should each represent an identical duration of time,
+     *     without regard for the actual dates represented.
+     *  - `month`: Bins should each represent one or more full, non-overlapping months.
+     *     The bin ranges will be "snapped" to the nearest month boundaries, which can
+     *     result in bins that represent different amounts of time, particularly if the
+     *     provided bins do not evenly divide the provided date range, or if the months
+     *     represented are of different lengths.
+     *  - `year`: Same as `month`, but snapping to year boundaries instead of months.
+     */
+    binSnapping: BinSnappingInterval;
+    private _tooltipOffset;
+    private _tooltipContent?;
+    private _tooltipVisible;
+    private _tooltipDateFormat?;
+    private _isDragging;
+    private _isLoading;
+    private _tooltip;
+    private _minSelectedDate;
+    private _maxSelectedDate;
+    private _minDateMS;
+    private _maxDateMS;
+    private _dragOffset;
+    private _histWidth;
+    private _binWidth;
+    private _currentSlider?;
+    private _histData;
+    private _emitUpdatedEventTimer?;
+    private _previousDateRange;
+    disconnectedCallback(): void;
+    willUpdate(changedProps: PropertyValues): void;
+    /**
+     * Set private properties that depend on the attribute bin data
+     *
+     * We're caching these values and not using getters to avoid recalculating all
+     * of the hist data every time the user drags a slider or hovers over a bar
+     * creating a tooltip.
+     */
+    private handleDataUpdate;
+    /**
+     * Rounds the given timestamp to the next full second.
+     */
+    private snapToNextSecond;
+    /**
+     * Rounds the given timestamp to the (approximate) nearest start of a month,
+     * such that dates up to and including the 15th of the month are rounded down,
+     * while dates past the 15th are rounded up.
+     */
+    private snapToMonth;
+    /**
+     * Rounds the given timestamp to the (approximate) nearest start of a year,
+     * such that dates up to the end of June are rounded down, while dates in
+     * July or later are rounded up.
+     */
+    private snapToYear;
+    /**
+     * Rounds the given timestamp according to the `binSnapping` property.
+     * Default is simply to snap to the nearest full second.
+     */
+    private snapTimestamp;
+    private calculateHistData;
+    private get hasBinData();
+    private get _numBins();
+    private get histogramLeftEdgeX();
+    private get histogramRightEdgeX();
+    /**
+     * Approximate size in ms of the interval to which bins are snapped.
+     */
+    private get snapInterval();
+    /**
+     * Offset added to the end of each bin to ensure disjoint intervals,
+     * depending on whether snapping is enabled and there are multiple bins.
+     */
+    private get snapEndOffset();
+    /**
+     * Optional date format to use for tooltips only.
+     * Falls back to `dateFormat` if not provided.
+     */
+    get tooltipDateFormat(): string;
+    set tooltipDateFormat(value: string);
+    /** component's loading (and disabled) state */
+    get loading(): boolean;
+    set loading(value: boolean);
+    /** formatted minimum date of selected date range */
+    get minSelectedDate(): string;
+    /** updates minSelectedDate if new date is valid */
+    set minSelectedDate(rawDate: string);
+    /** formatted maximum date of selected date range */
+    get maxSelectedDate(): string;
+    /** updates maxSelectedDate if new date is valid */
+    set maxSelectedDate(rawDate: string);
+    /** horizontal position of min date slider */
+    get minSliderX(): number;
+    /** horizontal position of max date slider */
+    get maxSliderX(): number;
+    private get dateRangeMS();
+    private showTooltip;
+    private hideTooltip;
+    private drag;
+    private drop;
+    /**
+     * Adjust the date range based on slider movement
+     *
+     * @param e PointerEvent from the slider being moved
+     */
+    private move;
+    /**
+     * Constrain a proposed value for the minimum (left) slider
+     *
+     * If the value is less than the leftmost valid position, then set it to the
+     * left edge of the histogram (ie the slider width). If the value is greater
+     * than the rightmost valid position (the position of the max slider), then
+     * set it to the position of the max slider
+     */
+    private validMinSliderX;
+    /**
+     * Constrain a proposed value for the maximum (right) slider
+     *
+     * If the value is greater than the rightmost valid position, then set it to
+     * the right edge of the histogram (ie histogram width - slider width). If the
+     * value is less than the leftmost valid position (the position of the min
+     * slider), then set it to the position of the min slider
+     */
+    private validMaxSliderX;
+    private addListeners;
+    private removeListeners;
+    /**
+     * start a timer to emit an update event. this timer can be canceled (and the
+     * event not emitted) if user drags a slider or focuses a date input within
+     * the update delay
+     */
+    private beginEmitUpdateProcess;
+    private cancelPendingUpdateEvent;
+    /**
+     * find position of pointer in relation to the current slider
+     */
+    private setDragOffset;
+    /**
+     * @param x horizontal position of slider
+     * @returns string representation of date
+     */
+    private translatePositionToDate;
+    /**
+     * Returns slider x-position corresponding to given date
+     *
+     * @param date
+     * @returns x-position of slider
+     */
+    private translateDateToPosition;
+    /** ensure that the returned value is between minValue and maxValue */
+    private clamp;
+    private handleInputFocus;
+    private handleMinDateInput;
+    private handleMaxDateInput;
+    private handleKeyUp;
+    private get currentDateRangeString();
+    private getMSFromString;
+    /**
+     * expand or narrow the selected range by moving the slider nearest the
+     * clicked bar to the outer edge of the clicked bar
+     *
+     * @param e Event click event from a histogram bar
+     */
+    private handleBarClick;
+    private get minSliderTemplate();
+    private get maxSliderTemplate();
+    private generateSliderSVG;
+    get selectedRangeTemplate(): SVGTemplateResult;
+    get histogramTemplate(): SVGTemplateResult[];
+    /** Whether the first arg represents a date strictly before the second arg */
+    private isBefore;
+    /** Whether the first arg represents a date strictly after the second arg */
+    private isAfter;
+    private formatDate;
+    /**
+     * NOTE: we are relying on the lit `live` directive in the template to
+     * ensure that the change to minSelectedDate is noticed and the input value
+     * gets properly re-rendered. see
+     * https://lit.dev/docs/templates/directives/#live
+     */
+    get minInputTemplate(): TemplateResult;
+    get maxInputTemplate(): TemplateResult;
+    get minLabelTemplate(): TemplateResult;
+    get maxLabelTemplate(): TemplateResult;
+    get tooltipTemplate(): TemplateResult;
+    private get noDataTemplate();
+    private get activityIndicatorTemplate();
+    static styles: import("lit").CSSResult;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'histogram-date-range1': HistogramDateRange1;
+    }
+}