@internetarchive/histogram-date-range 1.3.1 → 1.3.2

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

@@ -1,584 +1,599 @@
-import { __decorate } from "tslib";
-import '@internetarchive/ia-activity-indicator';
-import dayjs from 'dayjs/esm';
-import customParseFormat from 'dayjs/esm/plugin/customParseFormat';
-import fixFirstCenturyYears from './plugins/fix-first-century-years';
-import { css, html, LitElement, nothing, svg, } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { live } from 'lit/directives/live.js';
-import { classMap } from 'lit/directives/class-map.js';
-dayjs.extend(customParseFormat);
-dayjs.extend(fixFirstCenturyYears);
-// these values can be overridden via the component's HTML (camelCased) attributes
-const WIDTH = 180;
-const HEIGHT = 40;
-const SLIDER_WIDTH = 10;
-const TOOLTIP_WIDTH = 125;
-const TOOLTIP_HEIGHT = 30;
-const DATE_FORMAT = 'YYYY';
-const MISSING_DATA = 'no data';
-const UPDATE_DEBOUNCE_DELAY_MS = 0;
-// 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
-const sliderColor = css `var(--histogramDateRangeSliderColor, #4B65FE)`;
-const selectedRangeColor = css `var(--histogramDateRangeSelectedRangeColor, #DBE0FF)`;
-const barIncludedFill = css `var(--histogramDateRangeBarIncludedFill, #2C2C2C)`;
-const activityIndicatorColor = css `var(--histogramDateRangeActivityIndicator, #2C2C2C)`;
-const barExcludedFill = css `var(--histogramDateRangeBarExcludedFill, #CCCCCC)`;
-const inputRowMargin = css `var(--histogramDateRangeInputRowMargin, 0)`;
-const inputBorder = css `var(--histogramDateRangeInputBorder, 0.5px solid #2C2C2C)`;
-const inputWidth = css `var(--histogramDateRangeInputWidth, 35px)`;
-const inputFontSize = css `var(--histogramDateRangeInputFontSize, 1.2rem)`;
-const inputFontFamily = css `var(--histogramDateRangeInputFontFamily, sans-serif)`;
-const tooltipBackgroundColor = css `var(--histogramDateRangeTooltipBackgroundColor, #2C2C2C)`;
-const tooltipTextColor = css `var(--histogramDateRangeTooltipTextColor, #FFFFFF)`;
-const tooltipFontSize = css `var(--histogramDateRangeTooltipFontSize, 1.1rem)`;
-const tooltipFontFamily = css `var(--histogramDateRangeTooltipFontFamily, sans-serif)`;
-let HistogramDateRange = class HistogramDateRange extends LitElement {
-    constructor() {
-        /* eslint-disable lines-between-class-members */
-        super(...arguments);
-        // public reactive properties that can be set via HTML attributes
-        this.width = WIDTH;
-        this.height = HEIGHT;
-        this.sliderWidth = SLIDER_WIDTH;
-        this.tooltipWidth = TOOLTIP_WIDTH;
-        this.tooltipHeight = TOOLTIP_HEIGHT;
-        this.updateDelay = UPDATE_DEBOUNCE_DELAY_MS;
-        this.dateFormat = DATE_FORMAT;
-        this.missingDataMessage = MISSING_DATA;
-        this.minDate = '';
-        this.maxDate = '';
-        this.disabled = false;
-        this.bins = [];
-        /** If true, update events will not be canceled by the date inputs receiving focus */
-        this.updateWhileFocused = false;
-        /**
-         * 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.
-         */
-        this.binSnapping = 'none';
-        // internal reactive properties not exposed as attributes
-        this._tooltipOffset = 0;
-        this._tooltipVisible = false;
-        this._isDragging = false;
-        this._isLoading = false;
-        // non-reactive properties (changes don't auto-trigger re-rendering)
-        this._minSelectedDate = '';
-        this._maxSelectedDate = '';
-        this._minDateMS = 0;
-        this._maxDateMS = 0;
-        this._dragOffset = 0;
-        this._histWidth = 0;
-        this._binWidth = 0;
-        this._histData = [];
-        this._previousDateRange = '';
-        // use arrow functions (rather than standard JS class instance methods) so
-        // that `this` is bound to the histogramDateRange object and not the event
-        // target. for more info see
-        // https://lit-element.polymer-project.org/guide/events#using-this-in-event-listeners
-        this.drag = (e) => {
-            // prevent selecting text or other ranges while dragging, especially in Safari
-            e.preventDefault();
-            if (this.disabled) {
-                return;
-            }
-            this.setDragOffset(e);
-            this._isDragging = true;
-            this.addListeners();
-            this.cancelPendingUpdateEvent();
-        };
-        this.drop = () => {
-            if (this._isDragging) {
-                this.removeListeners();
-                this.beginEmitUpdateProcess();
-            }
-            this._isDragging = false;
-        };
-        /**
-         * Adjust the date range based on slider movement
-         *
-         * @param e PointerEvent from the slider being moved
-         */
-        this.move = (e) => {
-            const histogramClientX = this.getBoundingClientRect().x;
-            const newX = e.clientX - histogramClientX - this._dragOffset;
-            const slider = this._currentSlider;
-            if (slider.id === 'slider-min') {
-                this.minSelectedDate = this.translatePositionToDate(this.validMinSliderX(newX));
-            }
-            else {
-                this.maxSelectedDate = this.translatePositionToDate(this.validMaxSliderX(newX));
-                if (this.getMSFromString(this.maxSelectedDate) > this._maxDateMS) {
-                    this.maxSelectedDate = this.maxDate;
-                }
-            }
-        };
-    }
-    /* eslint-enable lines-between-class-members */
-    disconnectedCallback() {
-        this.removeListeners();
-        super.disconnectedCallback();
-    }
-    willUpdate(changedProps) {
-        // check for changes that would affect bin data calculations
-        if (changedProps.has('bins') ||
-            changedProps.has('minDate') ||
-            changedProps.has('maxDate') ||
-            changedProps.has('minSelectedDate') ||
-            changedProps.has('maxSelectedDate') ||
-            changedProps.has('width') ||
-            changedProps.has('height') ||
-            changedProps.has('binSnapping')) {
-            this.handleDataUpdate();
-        }
-    }
-    /**
-     * 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.
-     */
-    handleDataUpdate() {
-        if (!this.hasBinData) {
-            return;
-        }
-        this._histWidth = this.width - this.sliderWidth * 2;
-        this._minDateMS = this.snapTimestamp(this.getMSFromString(this.minDate));
-        // NB: The max date string, converted as-is to ms, represents the *start* of the
-        // final date interval; we want the *end*, so we add any snap interval/offset.
-        this._maxDateMS =
-            this.snapTimestamp(this.getMSFromString(this.maxDate) + this.snapInterval) + this.snapEndOffset;
-        this._binWidth = this._histWidth / this._numBins;
-        this._previousDateRange = this.currentDateRangeString;
-        this._histData = this.calculateHistData();
-        this.minSelectedDate = this.minSelectedDate
-            ? this.minSelectedDate
-            : this.minDate;
-        this.maxSelectedDate = this.maxSelectedDate
-            ? this.maxSelectedDate
-            : this.maxDate;
-    }
-    /**
-     * Rounds the given timestamp to the next full second.
-     */
-    snapToNextSecond(timestamp) {
-        return Math.ceil(timestamp / 1000) * 1000;
-    }
-    /**
-     * 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.
-     */
-    snapToMonth(timestamp) {
-        const d = dayjs(timestamp);
-        const monthsToAdd = d.date() < 16 ? 0 : 1;
-        const snapped = d
-            .add(monthsToAdd, 'month')
-            .date(1)
-            .hour(0)
-            .minute(0)
-            .second(0)
-            .millisecond(0); // First millisecond of the month
-        return snapped.valueOf();
-    }
-    /**
-     * 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.
-     */
-    snapToYear(timestamp) {
-        const d = dayjs(timestamp);
-        const yearsToAdd = d.month() < 6 ? 0 : 1;
-        const snapped = d
-            .add(yearsToAdd, 'year')
-            .month(0)
-            .date(1)
-            .hour(0)
-            .minute(0)
-            .second(0)
-            .millisecond(0); // First millisecond of the year
-        return snapped.valueOf();
-    }
-    /**
-     * Rounds the given timestamp according to the `binSnapping` property.
-     * Default is simply to snap to the nearest full second.
-     */
-    snapTimestamp(timestamp) {
-        switch (this.binSnapping) {
-            case 'year':
-                return this.snapToYear(timestamp);
-            case 'month':
-                return this.snapToMonth(timestamp);
-            case 'none':
-            default:
-                // We still align it to second boundaries to resolve minor discrepancies
-                return this.snapToNextSecond(timestamp);
-        }
-    }
-    calculateHistData() {
-        const { bins, height, dateRangeMS, _numBins, _minDateMS } = this;
-        const minValue = Math.min(...this.bins);
-        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 valueScale = height / valueRange;
-        const dateScale = dateRangeMS / _numBins;
-        return bins.map((v, i) => {
-            const binStartMS = this.snapTimestamp(i * dateScale + _minDateMS);
-            const binStart = this.formatDate(binStartMS);
-            const binEndMS = this.snapTimestamp((i + 1) * dateScale + _minDateMS) +
-                this.snapEndOffset;
-            const binEnd = this.formatDate(binEndMS);
-            const tooltipStart = this.formatDate(binStartMS, this.tooltipDateFormat);
-            const tooltipEnd = this.formatDate(binEndMS, this.tooltipDateFormat);
-            // If start/end are the same, just render a single value
-            const tooltip = tooltipStart === tooltipEnd
-                ? tooltipStart
-                : `${tooltipStart} - ${tooltipEnd}`;
-            return {
-                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),
-                binStart,
-                binEnd,
-                tooltip,
-            };
-        });
-    }
-    get hasBinData() {
-        return this._numBins > 0;
-    }
-    get _numBins() {
-        if (!this.bins || !this.bins.length) {
-            return 0;
-        }
-        return this.bins.length;
-    }
-    get histogramLeftEdgeX() {
-        return this.sliderWidth;
-    }
-    get histogramRightEdgeX() {
-        return this.width - this.sliderWidth;
-    }
-    /**
-     * Approximate size in ms of the interval to which bins are snapped.
-     */
-    get snapInterval() {
-        const yearMS = 31536000000; // A 365-day approximation of ms in a year
-        const monthMS = 2592000000; // A 30-day approximation of ms in a month
-        switch (this.binSnapping) {
-            case 'year':
-                return yearMS;
-            case 'month':
-                return monthMS;
-            case 'none':
-            default:
-                return 0;
-        }
-    }
-    /**
-     * Offset added to the end of each bin to ensure disjoint intervals,
-     * depending on whether snapping is enabled and there are multiple bins.
-     */
-    get snapEndOffset() {
-        return this.binSnapping !== 'none' && this._numBins > 1 ? -1 : 0;
-    }
-    /**
-     * Optional date format to use for tooltips only.
-     * Falls back to `dateFormat` if not provided.
-     */
-    get tooltipDateFormat() {
-        var _a;
-        return (_a = this._tooltipDateFormat) !== null && _a !== void 0 ? _a : this.dateFormat;
-    }
-    set tooltipDateFormat(value) {
-        this._tooltipDateFormat = value;
-    }
-    /** component's loading (and disabled) state */
-    get loading() {
-        return this._isLoading;
-    }
-    set loading(value) {
-        this.disabled = value;
-        this._isLoading = value;
-    }
-    /** formatted minimum date of selected date range */
-    get minSelectedDate() {
-        return this.formatDate(this.getMSFromString(this._minSelectedDate));
-    }
-    /** updates minSelectedDate if new date is valid */
-    set minSelectedDate(rawDate) {
-        if (!this._minSelectedDate) {
-            // because the values needed to calculate valid max/min values are not
-            // available during the lit init when it's populating properties from
-            // attributes, fall back to just the raw date if nothing is already set
-            this._minSelectedDate = rawDate;
-            return;
-        }
-        const proposedDateMS = this.getMSFromString(rawDate);
-        const isValidDate = !Number.isNaN(proposedDateMS);
-        const isNotTooRecent = proposedDateMS <= this.getMSFromString(this.maxSelectedDate);
-        if (isValidDate && isNotTooRecent) {
-            this._minSelectedDate = this.formatDate(proposedDateMS);
-        }
-        this.requestUpdate();
-    }
-    /** formatted maximum date of selected date range */
-    get maxSelectedDate() {
-        return this.formatDate(this.getMSFromString(this._maxSelectedDate));
-    }
-    /** updates maxSelectedDate if new date is valid */
-    set maxSelectedDate(rawDate) {
-        if (!this._maxSelectedDate) {
-            // because the values needed to calculate valid max/min values are not
-            // available during the lit init when it's populating properties from
-            // attributes, fall back to just the raw date if nothing is already set
-            this._maxSelectedDate = rawDate;
-            return;
-        }
-        const proposedDateMS = this.getMSFromString(rawDate);
-        const isValidDate = !Number.isNaN(proposedDateMS);
-        const isNotTooOld = proposedDateMS >= this.getMSFromString(this.minSelectedDate);
-        if (isValidDate && isNotTooOld) {
-            this._maxSelectedDate = this.formatDate(proposedDateMS);
-        }
-        this.requestUpdate();
-    }
-    /** horizontal position of min date slider */
-    get minSliderX() {
-        const x = this.translateDateToPosition(this.minSelectedDate);
-        return this.validMinSliderX(x);
-    }
-    /** horizontal position of max date slider */
-    get maxSliderX() {
-        const maxSelectedDateMS = this.snapTimestamp(this.getMSFromString(this.maxSelectedDate) + this.snapInterval);
-        const x = this.translateDateToPosition(this.formatDate(maxSelectedDateMS));
-        return this.validMaxSliderX(x);
-    }
-    get dateRangeMS() {
-        return this._maxDateMS - this._minDateMS;
-    }
-    showTooltip(e) {
-        if (this._isDragging || this.disabled) {
-            return;
-        }
-        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 formattedNumItems = Number(dataset.numItems).toLocaleString();
-        this._tooltipOffset =
-            x + (this._binWidth - this.sliderWidth - this.tooltipWidth) / 2;
+import { __decorate } from "tslib";
+import '@internetarchive/ia-activity-indicator';
+import dayjs from 'dayjs/esm';
+import customParseFormat from 'dayjs/esm/plugin/customParseFormat';
+import fixFirstCenturyYears from './plugins/fix-first-century-years';
+import { css, html, LitElement, nothing, svg, } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+dayjs.extend(customParseFormat);
+dayjs.extend(fixFirstCenturyYears);
+// these values can be overridden via the component's HTML (camelCased) attributes
+const WIDTH = 180;
+const HEIGHT = 40;
+const SLIDER_WIDTH = 10;
+const TOOLTIP_WIDTH = 125;
+const TOOLTIP_HEIGHT = 30;
+const DATE_FORMAT = 'YYYY';
+const MISSING_DATA = 'no data';
+const UPDATE_DEBOUNCE_DELAY_MS = 0;
+// 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
+const sliderColor = css `var(--histogramDateRangeSliderColor, #4B65FE)`;
+const selectedRangeColor = css `var(--histogramDateRangeSelectedRangeColor, #DBE0FF)`;
+const barIncludedFill = css `var(--histogramDateRangeBarIncludedFill, #2C2C2C)`;
+const activityIndicatorColor = css `var(--histogramDateRangeActivityIndicator, #2C2C2C)`;
+const barExcludedFill = css `var(--histogramDateRangeBarExcludedFill, #CCCCCC)`;
+const inputRowMargin = css `var(--histogramDateRangeInputRowMargin, 0)`;
+const inputBorder = css `var(--histogramDateRangeInputBorder, 0.5px solid #2C2C2C)`;
+const inputWidth = css `var(--histogramDateRangeInputWidth, 35px)`;
+const inputFontSize = css `var(--histogramDateRangeInputFontSize, 1.2rem)`;
+const inputFontFamily = css `var(--histogramDateRangeInputFontFamily, sans-serif)`;
+const tooltipBackgroundColor = css `var(--histogramDateRangeTooltipBackgroundColor, #2C2C2C)`;
+const tooltipTextColor = css `var(--histogramDateRangeTooltipTextColor, #FFFFFF)`;
+const tooltipFontSize = css `var(--histogramDateRangeTooltipFontSize, 1.1rem)`;
+const tooltipFontFamily = css `var(--histogramDateRangeTooltipFontFamily, sans-serif)`;
+let HistogramDateRange = class HistogramDateRange extends LitElement {
+    constructor() {
+        /* eslint-disable lines-between-class-members */
+        super(...arguments);
+        // public reactive properties that can be set via HTML attributes
+        this.width = WIDTH;
+        this.height = HEIGHT;
+        this.sliderWidth = SLIDER_WIDTH;
+        this.tooltipWidth = TOOLTIP_WIDTH;
+        this.tooltipHeight = TOOLTIP_HEIGHT;
+        this.updateDelay = UPDATE_DEBOUNCE_DELAY_MS;
+        this.dateFormat = DATE_FORMAT;
+        this.missingDataMessage = MISSING_DATA;
+        this.minDate = '';
+        this.maxDate = '';
+        this.disabled = false;
+        this.bins = [];
+        /** If true, update events will not be canceled by the date inputs receiving focus */
+        this.updateWhileFocused = false;
+        /**
+         * 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.
+         */
+        this.binSnapping = 'none';
+        // internal reactive properties not exposed as attributes
+        this._tooltipOffsetX = 0;
+        this._tooltipOffsetY = 0;
+        this._isDragging = false;
+        this._isLoading = false;
+        // non-reactive properties (changes don't auto-trigger re-rendering)
+        this._minSelectedDate = '';
+        this._maxSelectedDate = '';
+        this._minDateMS = 0;
+        this._maxDateMS = 0;
+        this._dragOffset = 0;
+        this._histWidth = 0;
+        this._binWidth = 0;
+        this._histData = [];
+        this._previousDateRange = '';
+        // use arrow functions (rather than standard JS class instance methods) so
+        // that `this` is bound to the histogramDateRange object and not the event
+        // target. for more info see
+        // https://lit-element.polymer-project.org/guide/events#using-this-in-event-listeners
+        this.drag = (e) => {
+            // prevent selecting text or other ranges while dragging, especially in Safari
+            e.preventDefault();
+            if (this.disabled) {
+                return;
+            }
+            this.setDragOffset(e);
+            this._isDragging = true;
+            this.addListeners();
+            this.cancelPendingUpdateEvent();
+        };
+        this.drop = () => {
+            if (this._isDragging) {
+                this.removeListeners();
+                this.beginEmitUpdateProcess();
+            }
+            this._isDragging = false;
+        };
+        /**
+         * Adjust the date range based on slider movement
+         *
+         * @param e PointerEvent from the slider being moved
+         */
+        this.move = (e) => {
+            const histogramClientX = this.getBoundingClientRect().x;
+            const newX = e.clientX - histogramClientX - this._dragOffset;
+            const slider = this._currentSlider;
+            if (slider.id === 'slider-min') {
+                this.minSelectedDate = this.translatePositionToDate(this.validMinSliderX(newX));
+            }
+            else {
+                this.maxSelectedDate = this.translatePositionToDate(this.validMaxSliderX(newX));
+                if (this.getMSFromString(this.maxSelectedDate) > this._maxDateMS) {
+                    this.maxSelectedDate = this.maxDate;
+                }
+            }
+        };
+    }
+    /* eslint-enable lines-between-class-members */
+    disconnectedCallback() {
+        this.removeListeners();
+        super.disconnectedCallback();
+    }
+    willUpdate(changedProps) {
+        // check for changes that would affect bin data calculations
+        if (changedProps.has('bins') ||
+            changedProps.has('minDate') ||
+            changedProps.has('maxDate') ||
+            changedProps.has('minSelectedDate') ||
+            changedProps.has('maxSelectedDate') ||
+            changedProps.has('width') ||
+            changedProps.has('height') ||
+            changedProps.has('binSnapping')) {
+            this.handleDataUpdate();
+        }
+    }
+    /**
+     * 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.
+     */
+    handleDataUpdate() {
+        if (!this.hasBinData) {
+            return;
+        }
+        this._histWidth = this.width - this.sliderWidth * 2;
+        this._minDateMS = this.snapTimestamp(this.getMSFromString(this.minDate));
+        // NB: The max date string, converted as-is to ms, represents the *start* of the
+        // final date interval; we want the *end*, so we add any snap interval/offset.
+        this._maxDateMS =
+            this.snapTimestamp(this.getMSFromString(this.maxDate) + this.snapInterval) + this.snapEndOffset;
+        this._binWidth = this._histWidth / this._numBins;
+        this._previousDateRange = this.currentDateRangeString;
+        this._histData = this.calculateHistData();
+        this.minSelectedDate = this.minSelectedDate
+            ? this.minSelectedDate
+            : this.minDate;
+        this.maxSelectedDate = this.maxSelectedDate
+            ? this.maxSelectedDate
+            : this.maxDate;
+    }
+    /**
+     * Rounds the given timestamp to the next full second.
+     */
+    snapToNextSecond(timestamp) {
+        return Math.ceil(timestamp / 1000) * 1000;
+    }
+    /**
+     * 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.
+     */
+    snapToMonth(timestamp) {
+        const d = dayjs(timestamp);
+        const monthsToAdd = d.date() < 16 ? 0 : 1;
+        const snapped = d
+            .add(monthsToAdd, 'month')
+            .date(1)
+            .hour(0)
+            .minute(0)
+            .second(0)
+            .millisecond(0); // First millisecond of the month
+        return snapped.valueOf();
+    }
+    /**
+     * 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.
+     */
+    snapToYear(timestamp) {
+        const d = dayjs(timestamp);
+        const yearsToAdd = d.month() < 6 ? 0 : 1;
+        const snapped = d
+            .add(yearsToAdd, 'year')
+            .month(0)
+            .date(1)
+            .hour(0)
+            .minute(0)
+            .second(0)
+            .millisecond(0); // First millisecond of the year
+        return snapped.valueOf();
+    }
+    /**
+     * Rounds the given timestamp according to the `binSnapping` property.
+     * Default is simply to snap to the nearest full second.
+     */
+    snapTimestamp(timestamp) {
+        switch (this.binSnapping) {
+            case 'year':
+                return this.snapToYear(timestamp);
+            case 'month':
+                return this.snapToMonth(timestamp);
+            case 'none':
+            default:
+                // We still align it to second boundaries to resolve minor discrepancies
+                return this.snapToNextSecond(timestamp);
+        }
+    }
+    calculateHistData() {
+        const { bins, height, dateRangeMS, _numBins, _minDateMS } = this;
+        const minValue = Math.min(...this.bins);
+        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 valueScale = height / valueRange;
+        const dateScale = dateRangeMS / _numBins;
+        return bins.map((v, i) => {
+            const binStartMS = this.snapTimestamp(i * dateScale + _minDateMS);
+            const binStart = this.formatDate(binStartMS);
+            const binEndMS = this.snapTimestamp((i + 1) * dateScale + _minDateMS) +
+                this.snapEndOffset;
+            const binEnd = this.formatDate(binEndMS);
+            const tooltipStart = this.formatDate(binStartMS, this.tooltipDateFormat);
+            const tooltipEnd = this.formatDate(binEndMS, this.tooltipDateFormat);
+            // If start/end are the same, just render a single value
+            const tooltip = tooltipStart === tooltipEnd
+                ? tooltipStart
+                : `${tooltipStart} - ${tooltipEnd}`;
+            return {
+                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),
+                binStart,
+                binEnd,
+                tooltip,
+            };
+        });
+    }
+    get hasBinData() {
+        return this._numBins > 0;
+    }
+    get _numBins() {
+        if (!this.bins || !this.bins.length) {
+            return 0;
+        }
+        return this.bins.length;
+    }
+    get histogramLeftEdgeX() {
+        return this.sliderWidth;
+    }
+    get histogramRightEdgeX() {
+        return this.width - this.sliderWidth;
+    }
+    /**
+     * Approximate size in ms of the interval to which bins are snapped.
+     */
+    get snapInterval() {
+        const yearMS = 31536000000; // A 365-day approximation of ms in a year
+        const monthMS = 2592000000; // A 30-day approximation of ms in a month
+        switch (this.binSnapping) {
+            case 'year':
+                return yearMS;
+            case 'month':
+                return monthMS;
+            case 'none':
+            default:
+                return 0;
+        }
+    }
+    /**
+     * Offset added to the end of each bin to ensure disjoint intervals,
+     * depending on whether snapping is enabled and there are multiple bins.
+     */
+    get snapEndOffset() {
+        return this.binSnapping !== 'none' && this._numBins > 1 ? -1 : 0;
+    }
+    /**
+     * Optional date format to use for tooltips only.
+     * Falls back to `dateFormat` if not provided.
+     */
+    get tooltipDateFormat() {
+        var _a;
+        return (_a = this._tooltipDateFormat) !== null && _a !== void 0 ? _a : this.dateFormat;
+    }
+    set tooltipDateFormat(value) {
+        this._tooltipDateFormat = value;
+    }
+    /** component's loading (and disabled) state */
+    get loading() {
+        return this._isLoading;
+    }
+    set loading(value) {
+        this.disabled = value;
+        this._isLoading = value;
+    }
+    /** formatted minimum date of selected date range */
+    get minSelectedDate() {
+        return this.formatDate(this.getMSFromString(this._minSelectedDate));
+    }
+    /** updates minSelectedDate if new date is valid */
+    set minSelectedDate(rawDate) {
+        if (!this._minSelectedDate) {
+            // because the values needed to calculate valid max/min values are not
+            // available during the lit init when it's populating properties from
+            // attributes, fall back to just the raw date if nothing is already set
+            this._minSelectedDate = rawDate;
+            return;
+        }
+        const proposedDateMS = this.getMSFromString(rawDate);
+        const isValidDate = !Number.isNaN(proposedDateMS);
+        const isNotTooRecent = proposedDateMS <= this.getMSFromString(this.maxSelectedDate);
+        if (isValidDate && isNotTooRecent) {
+            this._minSelectedDate = this.formatDate(proposedDateMS);
+        }
+        this.requestUpdate();
+    }
+    /** formatted maximum date of selected date range */
+    get maxSelectedDate() {
+        return this.formatDate(this.getMSFromString(this._maxSelectedDate));
+    }
+    /** updates maxSelectedDate if new date is valid */
+    set maxSelectedDate(rawDate) {
+        if (!this._maxSelectedDate) {
+            // because the values needed to calculate valid max/min values are not
+            // available during the lit init when it's populating properties from
+            // attributes, fall back to just the raw date if nothing is already set
+            this._maxSelectedDate = rawDate;
+            return;
+        }
+        const proposedDateMS = this.getMSFromString(rawDate);
+        const isValidDate = !Number.isNaN(proposedDateMS);
+        const isNotTooOld = proposedDateMS >= this.getMSFromString(this.minSelectedDate);
+        if (isValidDate && isNotTooOld) {
+            this._maxSelectedDate = this.formatDate(proposedDateMS);
+        }
+        this.requestUpdate();
+    }
+    /** horizontal position of min date slider */
+    get minSliderX() {
+        const x = this.translateDateToPosition(this.minSelectedDate);
+        return this.validMinSliderX(x);
+    }
+    /** horizontal position of max date slider */
+    get maxSliderX() {
+        const maxSelectedDateMS = this.snapTimestamp(this.getMSFromString(this.maxSelectedDate) + this.snapInterval);
+        const x = this.translateDateToPosition(this.formatDate(maxSelectedDateMS));
+        return this.validMaxSliderX(x);
+    }
+    get dateRangeMS() {
+        return this._maxDateMS - this._minDateMS;
+    }
+    showTooltip(e) {
+        var _a, _b;
+        if (this._isDragging || this.disabled) {
+            return;
+        }
+        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 formattedNumItems = Number(dataset.numItems).toLocaleString();
+        const tooltipPadding = 2;
+        const bufferHeight = 9;
+        const heightAboveHistogram = bufferHeight + this.tooltipHeight;
+        const histogramBounds = this.getBoundingClientRect();
+        const barX = histogramBounds.x + x;
+        const histogramY = histogramBounds.y;
+        // Center the tooltip horizontally along the bar
+        this._tooltipOffsetX =
+            barX -
+                tooltipPadding +
+                (this._binWidth - this.sliderWidth - this.tooltipWidth) / 2 +
+                window.scrollX;
+        // Place the tooltip (with arrow) just above the top of the histogram bars
+        this._tooltipOffsetY = histogramY - heightAboveHistogram + window.scrollY;
         this._tooltipContent = html `
       ${formattedNumItems} ${itemsText}<br />
       ${dataset.tooltip}
-    `;
-        this._tooltipVisible = true;
-    }
-    hideTooltip() {
-        this._tooltipContent = undefined;
-        this._tooltipVisible = false;
-    }
-    /**
-     * 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
-     */
-    validMinSliderX(newX) {
-        // allow the left slider to go right only to the right slider, even if the
-        // max selected date is out of range
-        const rightLimit = Math.min(this.translateDateToPosition(this.maxSelectedDate), this.histogramRightEdgeX);
-        newX = this.clamp(newX, this.histogramLeftEdgeX, rightLimit);
-        const isInvalid = Number.isNaN(newX) || rightLimit < this.histogramLeftEdgeX;
-        return isInvalid ? this.histogramLeftEdgeX : newX;
-    }
-    /**
-     * 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
-     */
-    validMaxSliderX(newX) {
-        // allow the right slider to go left only to the left slider, even if the
-        // min selected date is out of range
-        const leftLimit = Math.max(this.histogramLeftEdgeX, this.translateDateToPosition(this.minSelectedDate));
-        newX = this.clamp(newX, leftLimit, this.histogramRightEdgeX);
-        const isInvalid = Number.isNaN(newX) || leftLimit > this.histogramRightEdgeX;
-        return isInvalid ? this.histogramRightEdgeX : newX;
-    }
-    addListeners() {
-        window.addEventListener('pointermove', this.move);
-        window.addEventListener('pointerup', this.drop);
-        window.addEventListener('pointercancel', this.drop);
-    }
-    removeListeners() {
-        window.removeEventListener('pointermove', this.move);
-        window.removeEventListener('pointerup', this.drop);
-        window.removeEventListener('pointercancel', this.drop);
-    }
-    /**
-     * 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
-     */
-    beginEmitUpdateProcess() {
-        this.cancelPendingUpdateEvent();
-        this._emitUpdatedEventTimer = setTimeout(() => {
-            if (this.currentDateRangeString === this._previousDateRange) {
-                // don't emit duplicate event if no change since last emitted event
-                return;
-            }
-            this._previousDateRange = this.currentDateRangeString;
-            const options = {
-                detail: {
-                    minDate: this.minSelectedDate,
-                    maxDate: this.maxSelectedDate,
-                },
-                bubbles: true,
-                composed: true,
-            };
-            this.dispatchEvent(new CustomEvent('histogramDateRangeUpdated', options));
-        }, this.updateDelay);
-    }
-    cancelPendingUpdateEvent() {
-        if (this._emitUpdatedEventTimer === undefined) {
-            return;
-        }
-        clearTimeout(this._emitUpdatedEventTimer);
-        this._emitUpdatedEventTimer = undefined;
-    }
-    /**
-     * find position of pointer in relation to the current slider
-     */
-    setDragOffset(e) {
-        this._currentSlider = e.currentTarget;
-        const sliderX = this._currentSlider.id === 'slider-min'
-            ? this.minSliderX
-            : this.maxSliderX;
-        const histogramClientX = this.getBoundingClientRect().x;
-        this._dragOffset = e.clientX - histogramClientX - sliderX;
-    }
-    /**
-     * @param x horizontal position of slider
-     * @returns string representation of date
-     */
-    translatePositionToDate(x) {
-        // Snap to the nearest second, fixing the case where input like 1/1/2010
-        // would get translated to 12/31/2009 due to slight discrepancies from
-        // pixel boundaries and floating point error.
-        const milliseconds = this.snapToNextSecond(((x - this.sliderWidth) * this.dateRangeMS) / this._histWidth);
-        return this.formatDate(this._minDateMS + milliseconds);
-    }
-    /**
-     * Returns slider x-position corresponding to given date
-     *
-     * @param date
-     * @returns x-position of slider
-     */
-    translateDateToPosition(date) {
-        const milliseconds = this.getMSFromString(date);
-        return (this.sliderWidth +
-            ((milliseconds - this._minDateMS) * this._histWidth) / this.dateRangeMS);
-    }
-    /** ensure that the returned value is between minValue and maxValue */
-    clamp(x, minValue, maxValue) {
-        return Math.min(Math.max(x, minValue), maxValue);
-    }
-    handleInputFocus() {
-        if (!this.updateWhileFocused) {
-            this.cancelPendingUpdateEvent();
-        }
-    }
-    handleMinDateInput(e) {
-        const target = e.currentTarget;
-        if (target.value !== this.minSelectedDate) {
-            this.minSelectedDate = target.value;
-            this.beginEmitUpdateProcess();
-        }
-    }
-    handleMaxDateInput(e) {
-        const target = e.currentTarget;
-        if (target.value !== this.maxSelectedDate) {
-            this.maxSelectedDate = target.value;
-            this.beginEmitUpdateProcess();
-        }
-    }
-    handleKeyUp(e) {
-        if (e.key === 'Enter') {
-            const target = e.currentTarget;
-            target.blur();
-            if (target.id === 'date-min') {
-                this.handleMinDateInput(e);
-            }
-            else if (target.id === 'date-max') {
-                this.handleMaxDateInput(e);
-            }
-        }
-    }
-    get currentDateRangeString() {
-        return `${this.minSelectedDate}:${this.maxSelectedDate}`;
-    }
-    getMSFromString(date) {
-        // It's possible that `date` is not a string in certain situations.
-        // For instance if you use LitElement bindings and the date is `2000`,
-        // it will be treated as a number instead of a string. This just makes sure
-        // we're dealing with a string.
-        const stringified = typeof date === 'string' ? date : String(date);
-        const digitGroupCount = (stringified.split(/(\d+)/).length - 1) / 2;
-        if (digitGroupCount === 1) {
-            // if there's just a single set of digits, assume it's a year
-            const dateObj = new Date(0, 0); // start at January 1, 1900
-            dateObj.setFullYear(Number(stringified)); // override year
-            return dateObj.getTime(); // get time in milliseconds
-        }
-        return dayjs(stringified, [this.dateFormat, DATE_FORMAT]).valueOf();
-    }
-    /**
-     * 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
-     */
-    handleBarClick(e) {
-        const dataset = e.currentTarget.dataset;
-        // use the midpoint of the width of the clicked bar to determine which is
-        // the nearest slider
-        const clickPosition = (this.getMSFromString(dataset.binStart) +
-            this.getMSFromString(dataset.binEnd)) /
-            2;
-        const distanceFromMinSlider = Math.abs(clickPosition - this.getMSFromString(this.minSelectedDate));
-        const distanceFromMaxSlider = Math.abs(clickPosition - this.getMSFromString(this.maxSelectedDate));
-        // update the selected range by moving the nearer slider
-        if (distanceFromMinSlider < distanceFromMaxSlider) {
-            this.minSelectedDate = dataset.binStart;
-        }
-        else {
-            this.maxSelectedDate = dataset.binEnd;
-        }
-        this.beginEmitUpdateProcess();
-    }
-    get minSliderTemplate() {
-        // width/height in pixels of curved part of the sliders (like
-        // border-radius); used as part of a SVG quadratic curve. see
-        // https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#curve_commands
-        const cs = SLIDER_CORNER_SIZE;
+    `;
+        (_b = (_a = this._tooltip).showPopover) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    hideTooltip() {
+        var _a, _b;
+        this._tooltipContent = undefined;
+        (_b = (_a = this._tooltip).hidePopover) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    /**
+     * 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
+     */
+    validMinSliderX(newX) {
+        // allow the left slider to go right only to the right slider, even if the
+        // max selected date is out of range
+        const rightLimit = Math.min(this.translateDateToPosition(this.maxSelectedDate), this.histogramRightEdgeX);
+        newX = this.clamp(newX, this.histogramLeftEdgeX, rightLimit);
+        const isInvalid = Number.isNaN(newX) || rightLimit < this.histogramLeftEdgeX;
+        return isInvalid ? this.histogramLeftEdgeX : newX;
+    }
+    /**
+     * 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
+     */
+    validMaxSliderX(newX) {
+        // allow the right slider to go left only to the left slider, even if the
+        // min selected date is out of range
+        const leftLimit = Math.max(this.histogramLeftEdgeX, this.translateDateToPosition(this.minSelectedDate));
+        newX = this.clamp(newX, leftLimit, this.histogramRightEdgeX);
+        const isInvalid = Number.isNaN(newX) || leftLimit > this.histogramRightEdgeX;
+        return isInvalid ? this.histogramRightEdgeX : newX;
+    }
+    addListeners() {
+        window.addEventListener('pointermove', this.move);
+        window.addEventListener('pointerup', this.drop);
+        window.addEventListener('pointercancel', this.drop);
+    }
+    removeListeners() {
+        window.removeEventListener('pointermove', this.move);
+        window.removeEventListener('pointerup', this.drop);
+        window.removeEventListener('pointercancel', this.drop);
+    }
+    /**
+     * 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
+     */
+    beginEmitUpdateProcess() {
+        this.cancelPendingUpdateEvent();
+        this._emitUpdatedEventTimer = setTimeout(() => {
+            if (this.currentDateRangeString === this._previousDateRange) {
+                // don't emit duplicate event if no change since last emitted event
+                return;
+            }
+            this._previousDateRange = this.currentDateRangeString;
+            const options = {
+                detail: {
+                    minDate: this.minSelectedDate,
+                    maxDate: this.maxSelectedDate,
+                },
+                bubbles: true,
+                composed: true,
+            };
+            this.dispatchEvent(new CustomEvent('histogramDateRangeUpdated', options));
+        }, this.updateDelay);
+    }
+    cancelPendingUpdateEvent() {
+        if (this._emitUpdatedEventTimer === undefined) {
+            return;
+        }
+        clearTimeout(this._emitUpdatedEventTimer);
+        this._emitUpdatedEventTimer = undefined;
+    }
+    /**
+     * find position of pointer in relation to the current slider
+     */
+    setDragOffset(e) {
+        this._currentSlider = e.currentTarget;
+        const sliderX = this._currentSlider.id === 'slider-min'
+            ? this.minSliderX
+            : this.maxSliderX;
+        const histogramClientX = this.getBoundingClientRect().x;
+        this._dragOffset = e.clientX - histogramClientX - sliderX;
+    }
+    /**
+     * @param x horizontal position of slider
+     * @returns string representation of date
+     */
+    translatePositionToDate(x) {
+        // Snap to the nearest second, fixing the case where input like 1/1/2010
+        // would get translated to 12/31/2009 due to slight discrepancies from
+        // pixel boundaries and floating point error.
+        const milliseconds = this.snapToNextSecond(((x - this.sliderWidth) * this.dateRangeMS) / this._histWidth);
+        return this.formatDate(this._minDateMS + milliseconds);
+    }
+    /**
+     * Returns slider x-position corresponding to given date
+     *
+     * @param date
+     * @returns x-position of slider
+     */
+    translateDateToPosition(date) {
+        const milliseconds = this.getMSFromString(date);
+        return (this.sliderWidth +
+            ((milliseconds - this._minDateMS) * this._histWidth) / this.dateRangeMS);
+    }
+    /** ensure that the returned value is between minValue and maxValue */
+    clamp(x, minValue, maxValue) {
+        return Math.min(Math.max(x, minValue), maxValue);
+    }
+    handleInputFocus() {
+        if (!this.updateWhileFocused) {
+            this.cancelPendingUpdateEvent();
+        }
+    }
+    handleMinDateInput(e) {
+        const target = e.currentTarget;
+        if (target.value !== this.minSelectedDate) {
+            this.minSelectedDate = target.value;
+            this.beginEmitUpdateProcess();
+        }
+    }
+    handleMaxDateInput(e) {
+        const target = e.currentTarget;
+        if (target.value !== this.maxSelectedDate) {
+            this.maxSelectedDate = target.value;
+            this.beginEmitUpdateProcess();
+        }
+    }
+    handleKeyUp(e) {
+        if (e.key === 'Enter') {
+            const target = e.currentTarget;
+            target.blur();
+            if (target.id === 'date-min') {
+                this.handleMinDateInput(e);
+            }
+            else if (target.id === 'date-max') {
+                this.handleMaxDateInput(e);
+            }
+        }
+    }
+    get currentDateRangeString() {
+        return `${this.minSelectedDate}:${this.maxSelectedDate}`;
+    }
+    getMSFromString(date) {
+        // It's possible that `date` is not a string in certain situations.
+        // For instance if you use LitElement bindings and the date is `2000`,
+        // it will be treated as a number instead of a string. This just makes sure
+        // we're dealing with a string.
+        const stringified = typeof date === 'string' ? date : String(date);
+        const digitGroupCount = (stringified.split(/(\d+)/).length - 1) / 2;
+        if (digitGroupCount === 1) {
+            // if there's just a single set of digits, assume it's a year
+            const dateObj = new Date(0, 0); // start at January 1, 1900
+            dateObj.setFullYear(Number(stringified)); // override year
+            return dateObj.getTime(); // get time in milliseconds
+        }
+        return dayjs(stringified, [this.dateFormat, DATE_FORMAT]).valueOf();
+    }
+    /**
+     * 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
+     */
+    handleBarClick(e) {
+        const dataset = e.currentTarget.dataset;
+        // use the midpoint of the width of the clicked bar to determine which is
+        // the nearest slider
+        const clickPosition = (this.getMSFromString(dataset.binStart) +
+            this.getMSFromString(dataset.binEnd)) /
+            2;
+        const distanceFromMinSlider = Math.abs(clickPosition - this.getMSFromString(this.minSelectedDate));
+        const distanceFromMaxSlider = Math.abs(clickPosition - this.getMSFromString(this.maxSelectedDate));
+        // update the selected range by moving the nearer slider
+        if (distanceFromMinSlider < distanceFromMaxSlider) {
+            this.minSelectedDate = dataset.binStart;
+        }
+        else {
+            this.maxSelectedDate = dataset.binEnd;
+        }
+        this.beginEmitUpdateProcess();
+    }
+    get minSliderTemplate() {
+        // width/height in pixels of curved part of the sliders (like
+        // border-radius); used as part of a SVG quadratic curve. see
+        // https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#curve_commands
+        const cs = SLIDER_CORNER_SIZE;
         const sliderShape = `
             M${this.minSliderX},0
             h-${this.sliderWidth - cs}
@@ -586,11 +601,11 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
             v${this.height - cs * 2}
             q0,${cs} ${cs},${cs}
             h${this.sliderWidth - cs}
-          `;
-        return this.generateSliderSVG(this.minSliderX, 'slider-min', sliderShape);
-    }
-    get maxSliderTemplate() {
-        const cs = SLIDER_CORNER_SIZE;
+          `;
+        return this.generateSliderSVG(this.minSliderX, 'slider-min', sliderShape);
+    }
+    get maxSliderTemplate() {
+        const cs = SLIDER_CORNER_SIZE;
         const sliderShape = `
             M${this.maxSliderX},0
             h${this.sliderWidth - cs}
@@ -598,18 +613,18 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
             v${this.height - cs * 2}
             q0,${cs} -${cs},${cs}
             h-${this.sliderWidth - cs}
-          `;
-        return this.generateSliderSVG(this.maxSliderX, 'slider-max', sliderShape);
-    }
-    generateSliderSVG(sliderPositionX, id, sliderShape) {
-        // whether the curved part of the slider is facing towards the left (1), ie
-        // minimum, or facing towards the right (-1), ie maximum
-        const k = id === 'slider-min' ? 1 : -1;
-        const sliderClasses = classMap({
-            slider: true,
-            draggable: !this.disabled,
-            dragging: this._isDragging,
-        });
+          `;
+        return this.generateSliderSVG(this.maxSliderX, 'slider-max', sliderShape);
+    }
+    generateSliderSVG(sliderPositionX, id, sliderShape) {
+        // whether the curved part of the slider is facing towards the left (1), ie
+        // minimum, or facing towards the right (-1), ie maximum
+        const k = id === 'slider-min' ? 1 : -1;
+        const sliderClasses = classMap({
+            slider: true,
+            draggable: !this.disabled,
+            dragging: this._isDragging,
+        });
         return svg `
     <svg
       id=${id}
@@ -632,9 +647,9 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         fill="white"
       />
     </svg>
-    `;
-    }
-    get selectedRangeTemplate() {
+    `;
+    }
+    get selectedRangeTemplate() {
         return svg `
       <rect
         x="${this.minSliderX}"
@@ -642,23 +657,23 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         width="${this.maxSliderX - this.minSliderX}"
         height="${this.height}"
         fill="${selectedRangeColor}"
-      />`;
-    }
-    get histogramTemplate() {
-        const xScale = this._histWidth / this._numBins;
-        const barWidth = xScale - 1;
-        let x = this.sliderWidth; // start at the left edge of the histogram
-        return this._histData.map(data => {
-            const { minSelectedDate, maxSelectedDate } = this;
-            const barHeight = data.height;
-            const binIsBeforeMin = this.isBefore(data.binEnd, minSelectedDate);
-            const binIsAfterMax = this.isAfter(data.binStart, maxSelectedDate);
-            const barFill = binIsBeforeMin || binIsAfterMax ? barExcludedFill : barIncludedFill;
-            // the stroke-dasharray style below creates a transparent border around the
-            // right edge of the bar, which prevents user from encountering a gap
-            // between adjacent bars (eg when viewing the tooltips or when trying to
-            // extend the range by clicking on a bar)
-            const barStyle = `stroke-dasharray: 0 ${barWidth} ${barHeight} ${barWidth} 0 ${barHeight}`;
+      />`;
+    }
+    get histogramTemplate() {
+        const xScale = this._histWidth / this._numBins;
+        const barWidth = xScale - 1;
+        let x = this.sliderWidth; // start at the left edge of the histogram
+        return this._histData.map(data => {
+            const { minSelectedDate, maxSelectedDate } = this;
+            const barHeight = data.height;
+            const binIsBeforeMin = this.isBefore(data.binEnd, minSelectedDate);
+            const binIsAfterMax = this.isAfter(data.binStart, maxSelectedDate);
+            const barFill = binIsBeforeMin || binIsAfterMax ? barExcludedFill : barIncludedFill;
+            // the stroke-dasharray style below creates a transparent border around the
+            // right edge of the bar, which prevents user from encountering a gap
+            // between adjacent bars (eg when viewing the tooltips or when trying to
+            // extend the range by clicking on a bar)
+            const barStyle = `stroke-dasharray: 0 ${barWidth} ${barHeight} ${barWidth} 0 ${barHeight}`;
             const bar = svg `
         <rect
           class="bar"
@@ -675,45 +690,45 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
           data-bin-start=${data.binStart}
           data-bin-end=${data.binEnd}
           data-tooltip=${data.tooltip}
-        />`;
-            x += xScale;
-            return bar;
-        });
-    }
-    /** Whether the first arg represents a date strictly before the second arg */
-    isBefore(date1, date2) {
-        const date1MS = this.getMSFromString(date1);
-        const date2MS = this.getMSFromString(date2);
-        return date1MS < date2MS;
-    }
-    /** Whether the first arg represents a date strictly after the second arg */
-    isAfter(date1, date2) {
-        const date1MS = this.getMSFromString(date1);
-        const date2MS = this.getMSFromString(date2);
-        return date1MS > date2MS;
-    }
-    formatDate(dateMS, format = this.dateFormat) {
-        if (Number.isNaN(dateMS)) {
-            return '';
-        }
-        const date = dayjs(dateMS);
-        if (date.year() < 1000) {
-            // years before 1000 don't play well with dayjs custom formatting, so work around dayjs
-            // by setting the year to a sentinel value and then replacing it instead.
-            // this is a bit hacky but it does the trick for essentially all reasonable cases
-            // until such time as we replace dayjs.
-            const tmpDate = date.year(199999);
-            return tmpDate.format(format).replace(/199999/g, date.year().toString());
-        }
-        return date.format(format);
-    }
-    /**
-     * 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() {
+        />`;
+            x += xScale;
+            return bar;
+        });
+    }
+    /** Whether the first arg represents a date strictly before the second arg */
+    isBefore(date1, date2) {
+        const date1MS = this.getMSFromString(date1);
+        const date2MS = this.getMSFromString(date2);
+        return date1MS < date2MS;
+    }
+    /** Whether the first arg represents a date strictly after the second arg */
+    isAfter(date1, date2) {
+        const date1MS = this.getMSFromString(date1);
+        const date2MS = this.getMSFromString(date2);
+        return date1MS > date2MS;
+    }
+    formatDate(dateMS, format = this.dateFormat) {
+        if (Number.isNaN(dateMS)) {
+            return '';
+        }
+        const date = dayjs(dateMS);
+        if (date.year() < 1000) {
+            // years before 1000 don't play well with dayjs custom formatting, so work around dayjs
+            // by setting the year to a sentinel value and then replacing it instead.
+            // this is a bit hacky but it does the trick for essentially all reasonable cases
+            // until such time as we replace dayjs.
+            const tmpDate = date.year(199999);
+            return tmpDate.format(format).replace(/199999/g, date.year().toString());
+        }
+        return date.format(format);
+    }
+    /**
+     * 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() {
         return html `
       <input
         id="date-min"
@@ -725,9 +740,9 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         .value=${live(this.minSelectedDate)}
         ?disabled=${this.disabled}
       />
-    `;
-    }
-    get maxInputTemplate() {
+    `;
+    }
+    get maxInputTemplate() {
         return html `
       <input
         id="date-max"
@@ -739,48 +754,42 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         .value=${live(this.maxSelectedDate)}
         ?disabled=${this.disabled}
       />
-    `;
-    }
-    get minLabelTemplate() {
-        return html `<label for="date-min" class="sr-only">Minimum date:</label>`;
-    }
-    get maxLabelTemplate() {
-        return html `<label for="date-max" class="sr-only">Maximum date:</label>`;
-    }
-    get tooltipTemplate() {
+    `;
+    }
+    get minLabelTemplate() {
+        return html `<label for="date-min" class="sr-only">Minimum date:</label>`;
+    }
+    get maxLabelTemplate() {
+        return html `<label for="date-max" class="sr-only">Maximum date:</label>`;
+    }
+    get tooltipTemplate() {
+        const styles = styleMap({
+            width: `${this.tooltipWidth}px`,
+            height: `${this.tooltipHeight}px`,
+            top: `${this._tooltipOffsetY}px`,
+            left: `${this._tooltipOffsetX}px`,
+        });
         return html `
-      <style>
-        #tooltip {
-          width: ${this.tooltipWidth}px;
-          height: ${this.tooltipHeight}px;
-          top: ${-9 - this.tooltipHeight}px;
-          left: ${this._tooltipOffset}px;
-          display: ${this._tooltipVisible ? 'block' : 'none'};
-        }
-        #tooltip:after {
-          left: ${this.tooltipWidth / 2}px;
-        }
-      </style>
-      <div id="tooltip">${this._tooltipContent}</div>
-    `;
-    }
-    get noDataTemplate() {
+      <div id="tooltip" style=${styles} popover>${this._tooltipContent}</div>
+    `;
+    }
+    get noDataTemplate() {
         return html `
       <div class="missing-data-message">${this.missingDataMessage}</div>
-    `;
-    }
-    get activityIndicatorTemplate() {
-        if (!this.loading) {
-            return nothing;
-        }
+    `;
+    }
+    get activityIndicatorTemplate() {
+        if (!this.loading) {
+            return nothing;
+        }
         return html `
       <ia-activity-indicator mode="processing"> </ia-activity-indicator>
-    `;
-    }
-    render() {
-        if (!this.hasBinData) {
-            return this.noDataTemplate;
-        }
+    `;
+    }
+    render() {
+        if (!this.hasBinData) {
+            return this.noDataTemplate;
+        }
         return html `
       <div
         id="container"
@@ -812,9 +821,9 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
           </div>
         </div>
       </div>
-    `;
-    }
-};
+    `;
+    }
+};
 HistogramDateRange.styles = css `
     .missing-data-message {
       text-align: center;
@@ -867,6 +876,8 @@ HistogramDateRange.styles = css `
     #tooltip {
       position: absolute;
       background: ${tooltipBackgroundColor};
+      margin: 0;
+      border: 0;
       color: ${tooltipTextColor};
       text-align: center;
       border-radius: 3px;
@@ -875,12 +886,14 @@ HistogramDateRange.styles = css `
       font-family: ${tooltipFontFamily};
       touch-action: none;
       pointer-events: none;
+      overflow: visible;
     }
     #tooltip:after {
       content: '';
       position: absolute;
       margin-left: -5px;
       top: 100%;
+      left: 50%;
       /* arrow */
       border: 5px solid ${tooltipTextColor};
       border-color: ${tooltipBackgroundColor} transparent transparent
@@ -929,81 +942,84 @@ HistogramDateRange.styles = css `
       -webkit-clip-path: inset(50%) !important;
       clip-path: inset(50%) !important;
     }
-  `;
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "width", void 0);
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "height", void 0);
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "sliderWidth", void 0);
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "tooltipWidth", void 0);
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "tooltipHeight", void 0);
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "updateDelay", void 0);
-__decorate([
-    property({ type: String })
-], HistogramDateRange.prototype, "dateFormat", void 0);
-__decorate([
-    property({ type: String })
-], HistogramDateRange.prototype, "missingDataMessage", void 0);
-__decorate([
-    property({ type: String })
-], HistogramDateRange.prototype, "minDate", void 0);
-__decorate([
-    property({ type: String })
-], HistogramDateRange.prototype, "maxDate", void 0);
-__decorate([
-    property({ type: Boolean })
-], HistogramDateRange.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Array })
-], HistogramDateRange.prototype, "bins", void 0);
-__decorate([
-    property({ type: Boolean })
-], HistogramDateRange.prototype, "updateWhileFocused", void 0);
-__decorate([
-    property({ type: String })
-], HistogramDateRange.prototype, "binSnapping", void 0);
-__decorate([
-    state()
-], HistogramDateRange.prototype, "_tooltipOffset", void 0);
-__decorate([
-    state()
-], HistogramDateRange.prototype, "_tooltipContent", void 0);
-__decorate([
-    state()
-], HistogramDateRange.prototype, "_tooltipVisible", void 0);
-__decorate([
-    state()
-], HistogramDateRange.prototype, "_tooltipDateFormat", void 0);
-__decorate([
-    state()
-], HistogramDateRange.prototype, "_isDragging", void 0);
-__decorate([
-    state()
-], HistogramDateRange.prototype, "_isLoading", void 0);
-__decorate([
-    property({ type: String })
-], HistogramDateRange.prototype, "tooltipDateFormat", null);
-__decorate([
-    property({ type: Boolean })
-], HistogramDateRange.prototype, "loading", null);
-__decorate([
-    property()
-], HistogramDateRange.prototype, "minSelectedDate", null);
-__decorate([
-    property()
-], HistogramDateRange.prototype, "maxSelectedDate", null);
-HistogramDateRange = __decorate([
-    customElement('histogram-date-range')
-], HistogramDateRange);
-export { HistogramDateRange };
+  `;
+__decorate([
+    property({ type: Number })
+], HistogramDateRange.prototype, "width", void 0);
+__decorate([
+    property({ type: Number })
+], HistogramDateRange.prototype, "height", void 0);
+__decorate([
+    property({ type: Number })
+], HistogramDateRange.prototype, "sliderWidth", void 0);
+__decorate([
+    property({ type: Number })
+], HistogramDateRange.prototype, "tooltipWidth", void 0);
+__decorate([
+    property({ type: Number })
+], HistogramDateRange.prototype, "tooltipHeight", void 0);
+__decorate([
+    property({ type: Number })
+], HistogramDateRange.prototype, "updateDelay", void 0);
+__decorate([
+    property({ type: String })
+], HistogramDateRange.prototype, "dateFormat", void 0);
+__decorate([
+    property({ type: String })
+], HistogramDateRange.prototype, "missingDataMessage", void 0);
+__decorate([
+    property({ type: String })
+], HistogramDateRange.prototype, "minDate", void 0);
+__decorate([
+    property({ type: String })
+], HistogramDateRange.prototype, "maxDate", void 0);
+__decorate([
+    property({ type: Boolean })
+], HistogramDateRange.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Array })
+], HistogramDateRange.prototype, "bins", void 0);
+__decorate([
+    property({ type: Boolean })
+], HistogramDateRange.prototype, "updateWhileFocused", void 0);
+__decorate([
+    property({ type: String })
+], HistogramDateRange.prototype, "binSnapping", void 0);
+__decorate([
+    state()
+], HistogramDateRange.prototype, "_tooltipOffsetX", void 0);
+__decorate([
+    state()
+], HistogramDateRange.prototype, "_tooltipOffsetY", void 0);
+__decorate([
+    state()
+], HistogramDateRange.prototype, "_tooltipContent", void 0);
+__decorate([
+    state()
+], HistogramDateRange.prototype, "_tooltipDateFormat", void 0);
+__decorate([
+    state()
+], HistogramDateRange.prototype, "_isDragging", void 0);
+__decorate([
+    state()
+], HistogramDateRange.prototype, "_isLoading", void 0);
+__decorate([
+    query('#tooltip')
+], HistogramDateRange.prototype, "_tooltip", void 0);
+__decorate([
+    property({ type: String })
+], HistogramDateRange.prototype, "tooltipDateFormat", null);
+__decorate([
+    property({ type: Boolean })
+], HistogramDateRange.prototype, "loading", null);
+__decorate([
+    property()
+], HistogramDateRange.prototype, "minSelectedDate", null);
+__decorate([
+    property()
+], HistogramDateRange.prototype, "maxSelectedDate", null);
+HistogramDateRange = __decorate([
+    customElement('histogram-date-range')
+], HistogramDateRange);
+export { HistogramDateRange };
 //# sourceMappingURL=histogram-date-range.js.map