@internetarchive/histogram-date-range 0.1.6-alpha1 → 0.1.7

package/.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: App CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 16.x
+
+    - name: Install dependencies
+      run: yarn install
+
+    - name: Run tests
+      run: yarn run test
+
+    - name: Upload reports
+      run: npx codecov

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

@@ -0,0 +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 {};

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

@@ -0,0 +1,58 @@
+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}
+        .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() {
+        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

@@ -0,0 +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"]}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { HistogramDateRange } from './src/histogram-date-range';

package/dist/index.js

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

package/dist/index.js.map

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

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

@@ -0,0 +1,154 @@
+import { LitElement, PropertyValues, SVGTemplateResult, TemplateResult } from 'lit';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
+export declare class HistogramDateRange 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[];
+    private _tooltipOffset;
+    private _tooltipContent?;
+    private _tooltipVisible;
+    private _isDragging;
+    private _isLoading;
+    private _minSelectedDate;
+    private _maxSelectedDate;
+    private _minDateMS;
+    private _maxDateMS;
+    private _dragOffset;
+    private _histWidth;
+    private _binWidth;
+    private _currentSlider?;
+    private _histData;
+    private _emitUpdatedEventTimer?;
+    private _previousDateRange;
+    disconnectedCallback(): void;
+    updated(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;
+    private calculateHistData;
+    private get hasBinData();
+    private get _numBins();
+    private get histogramLeftEdgeX();
+    private get histogramRightEdgeX();
+    /** 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 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[];
+    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 tooltipTemplate(): TemplateResult;
+    private get noDataTemplate();
+    private get activityIndicatorTemplate();
+    static styles: import("lit").CSSResult;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'histogram-date-range': HistogramDateRange;
+    }
+}