npm - @internetarchive/histogram-date-range - Versions diffs - 0.1.0-beta → 0.1.3-alpha - Mend

@internetarchive/histogram-date-range 0.1.0-beta → 0.1.3-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/demo/index.css +23 -0
package/demo/index.html +51 -42
package/dist/src/histogram-date-range.d.ts +22 -13
package/dist/src/histogram-date-range.js +131 -65
package/dist/src/histogram-date-range.js.map +1 -1
package/dist/test/histogram-date-range.test.js +76 -17
package/dist/test/histogram-date-range.test.js.map +1 -1
package/docs/_snowpack/pkg/@internetarchive/ia-activity-indicator/ia-activity-indicator.js +9 -2534
package/docs/_snowpack/pkg/common/lit-element-3254fb50.js +22 -0
package/docs/_snowpack/pkg/common/lit-html-1d707ff6.js +8 -0
package/docs/_snowpack/pkg/dayjs/esm/index.js +3 -3
package/docs/_snowpack/pkg/dayjs/esm/plugin/customParseFormat.js +342 -0
package/docs/_snowpack/pkg/import-map.json +1 -0
package/docs/_snowpack/pkg/lit/decorators.js +8 -2
package/docs/_snowpack/pkg/lit/directives/live.js +4 -4
package/docs/_snowpack/pkg/lit.js +2 -23
package/docs/demo/index.css +23 -0
package/docs/demo/index.html +51 -42
package/docs/dist/src/histogram-date-range.js +94 -47
package/package.json +20 -19
package/src/histogram-date-range.ts +164 -72
package/test/histogram-date-range.test.ts +107 -23
package/docs/_snowpack/env.js +0 -3
package/docs/_snowpack/pkg/common/lit-html-e67c9f49.js +0 -8
package/types/static.d.ts +0 -4

package/demo/index.css ADDED Viewed

@@ -0,0 +1,23 @@
+html {
+  font-size: 10px;
+  font-family: sans-serif;
+}
+body {
+  background: white;
+}
+.container {
+  margin-top: 20px;
+  display: grid;
+  justify-content: center;
+}
+.description {
+  margin: 10px auto;
+}
+.received-events {
+  position: absolute;
+  top: 0;
+}
+button {
+  font-size: 100%;
+  margin: 10px auto;
+}

package/demo/index.html CHANGED Viewed

@@ -3,49 +3,29 @@
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta charset="utf-8" />
-    <style>
-      html {
-        font-size: 10px;
-        font-family: sans-serif;
-      }
-      body {
-        background: white;
-      }
-      .container {
-        margin-top: 50px;
-        display: grid;
-        justify-content: center;
-      }
-      .description {
-        margin: 10px auto;
-      }
-      .received-events {
-        position: absolute;
-        top: 0;
-      }
-      button {
-        font-size: 100%;
-        margin: 10px auto;
-      }
-    </style>
+    <link rel="stylesheet" href="index.css">
   </head>
   <script type="module">
     import '../dist/src/histogram-date-range.js';
+    let eventCount = 0;
     // listen to events from the component and display the data received from them
     document.addEventListener('histogramDateRangeUpdated', e => {
-      document.querySelector('.received-events').innerHTML +=
-        '\n' + JSON.stringify(e.detail);
+      document.querySelector('.received-events').innerHTML =
+      ++eventCount + ': ' + JSON.stringify(e.detail);
     });
   </script>
   <body>
     <pre class="received-events"></pre>
     <div class="container">
-      <div class="description">pre-selected range with default date format</div>
+      <div class="description">
+        pre-selected range with 1000ms debounce delay
+      </div>
       <histogram-date-range
         minDate="1400"
         maxDate="2021"
+        updateDelay="1000"
         minSelectedDate="1800"
         maxSelectedDate="1900"
         bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
@@ -57,19 +37,45 @@
     </div>
     <div class="container">
-      <div class="description">default range with custom date format</div>
+      <div class="description">range spanning negative to positive years</div>
+      <histogram-date-range
+        mindate="-1050" maxdate="2200"
+        bins="[ 74, 67, 17, 66, 49, 93, 47, 61, 32, 46, 53, 2,
+                13, 45, 28, 1, 8, 70, 37, 74, 67, 17, 66, 49, 93,
+                47, 61, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32,
+                32, 70, 37, 74, 67, 17, 66, 49, 93, 47, 61, 32
+              ]"
+      ></histogram-date-range>
+    </div>
+    <div class="container">
+      <div class="description">small year range and few bins</div>
+      <histogram-date-range width="175" tooltipwidth="120"
+        mindate="2008" maxdate="2016" bins="[76104,866978,1151617,986331,218672,107410,3324]">
+      </histogram-date-range>
+    </div>
+    <div class="container">
+      <div class="description">
+        default range with custom styling and date format
+      </div>
       <histogram-date-range
         width="300"
         height="50"
         tooltipWidth="140"
-        updateDelay="2000"
         dateFormat="DD MMM YYYY"
         style="
+          --histogramDateRangeSliderColor: #d8b384;
+          --histogramDateRangeSelectedRangeColor: #f3f0d7;
+          --histogramDateRangeTooltipFontFamily: serif;
+          --histogramDateRangeInputFontFamily: serif;
           --histogramDateRangeTooltipFontSize: 1rem;
           --histogramDateRangeInputWidth: 85px;
         "
-        minDate="May 1, 1972"
-        maxDate="12/21/1980"
+        minDate="05 May 1972"
+        maxDate="21 Dec 1980"
         bins="[ 85, 25, 200, 0, 0, 34, 0, 2, 5, 10, 0, 56, 10, 45, 100, 70, 50 ]"
       ></histogram-date-range>
     </div>
@@ -99,11 +105,8 @@
     </script>
     <div class="container">
-      <div class="description">data set up with js; no debounce delay</div>
-      <histogram-date-range
-        id="js-setup"
-        updateDelay="0"
-      ></histogram-date-range>
+      <div class="description">data set up with js</div>
+      <histogram-date-range id="js-setup"></histogram-date-range>
     </div>
     <script>
       document.addEventListener('DOMContentLoaded', function () {
@@ -112,17 +115,23 @@
         );
         histogram.minDate = '1950';
         histogram.maxDate = '2000';
-        // generate an array like [0, 1, 2, ... 49]
+        // generate array of [0, 1, 2, ... 49]
         histogram.bins = [...Array(50).keys()];
       });
     </script>
+    <div class="container">
+      <div class="description">
+        single bin
+      </div>
+      <histogram-date-range mindate="1926" maxdate="1926" bins="[8]">
+      </histogram-date-range>
+    </div>
     <div class="container">
       <div class="description">empty data</div>
-      <histogram-date-range
-        bins=""
-        missingDataMessage="no data..."
-      ></histogram-date-range>
+      <histogram-date-range missingDataMessage="no data..."></histoghistogram-date-range>
     </div>
   </body>
 </html>

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

@@ -42,14 +42,18 @@ export declare class HistogramDateRange extends LitElement {
     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;
@@ -70,18 +74,18 @@ export declare class HistogramDateRange extends LitElement {
      * 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 widget (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
+     * 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 widget (ie widget 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
+     * 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;
@@ -103,20 +107,25 @@ export declare class HistogramDateRange extends LitElement {
      */
     private translatePositionToDate;
     /**
-     * Returns slider x-position corresponding to given date (or null if invalid
-     * date)
+     * 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();
-    /** minimum selected date in milliseconds */
-    private get minSelectedDateMS();
-    /** maximum selected date in milliseconds */
-    private get maxSelectedDateMS();
+    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();
@@ -135,7 +144,7 @@ export declare class HistogramDateRange extends LitElement {
     get tooltipTemplate(): TemplateResult;
     private get noDataTemplate();
     private get activityIndicatorTemplate();
-    static styles: import("lit").CSSResultGroup;
+    static styles: import("lit").CSSResult;
     render(): TemplateResult;
 }
 declare global {

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

@@ -1,8 +1,10 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement, svg, } from 'lit';
+import { css, html, nothing, LitElement, svg, } from 'lit';
 import { property, state, customElement } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import dayjs from 'dayjs/esm/index.js';
+import customParseFormat from 'dayjs/esm/plugin/customParseFormat';
+dayjs.extend(customParseFormat);
 import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
 // these values can be overridden via the component's HTML (camelCased) attributes
 const WIDTH = 180;
@@ -12,21 +14,23 @@ const TOOLTIP_WIDTH = 125;
 const TOOLTIP_HEIGHT = 30;
 const DATE_FORMAT = 'YYYY';
 const MISSING_DATA = 'no data';
-const UPDATE_DEBOUNCE_DELAY_MS = 1000;
+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 sliderFill = css `var(--histogramDateRangeSliderFill, #4B65FE)`;
-const selectedRangeFill = css `var(--histogramDateRangeSelectedRangeFill, #DBE0FF)`;
+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 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 */
@@ -89,12 +93,11 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         this.move = (e) => {
             const newX = e.offsetX - this._dragOffset;
             const slider = this._currentSlider;
-            const date = this.translatePositionToDate(newX);
             if (slider.id === 'slider-min') {
-                this.minSelectedDate = date;
+                this.minSelectedDate = this.translatePositionToDate(this.validMinSliderX(newX));
             }
             else {
-                this.maxSelectedDate = date;
+                this.maxSelectedDate = this.translatePositionToDate(this.validMaxSliderX(newX));
             }
         };
     }
@@ -125,8 +128,8 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
             return;
         }
         this._histWidth = this.width - this.sliderWidth * 2;
-        this._minDateMS = dayjs(this.minDate).valueOf();
-        this._maxDateMS = dayjs(this.maxDate).valueOf();
+        this._minDateMS = this.getMSFromString(this.minDate);
+        this._maxDateMS = this.getMSFromString(this.maxDate);
         this._binWidth = this._histWidth / this._numBins;
         this._previousDateRange = this.currentDateRangeString;
         this._histData = this.calculateHistData();
@@ -141,11 +144,16 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
     calculateHistData() {
         const minValue = Math.min(...this.bins);
         const maxValue = Math.max(...this.bins);
-        const valueScale = this.height / Math.log1p(maxValue - minValue);
+        // 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 - minValue);
+        const valueScale = this.height / valueRange;
         const dateScale = this.dateRangeMS / this._numBins;
         return this.bins.map((v, i) => {
             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: `${this.formatDate(i * dateScale + this._minDateMS)}`,
                 binEnd: `${this.formatDate((i + 1) * dateScale + this._minDateMS)}`,
@@ -161,6 +169,12 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         }
         return this.bins.length;
     }
+    get histogramLeftEdgeX() {
+        return this.sliderWidth;
+    }
+    get histogramRightEdgeX() {
+        return this.width - this.sliderWidth;
+    }
     /** component's loading (and disabled) state */
     get loading() {
         return this._isLoading;
@@ -171,51 +185,55 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
     }
     /** formatted minimum date of selected date range */
     get minSelectedDate() {
-        return this.formatDate(this._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 x = this.translateDateToPosition(rawDate);
-        if (x) {
-            const validX = this.validMinSliderX(x);
-            this._minSelectedDate = this.translatePositionToDate(validX);
+        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._maxSelectedDate);
+        return this.formatDate(this.getMSFromString(this._maxSelectedDate));
     }
+    /** updates maxSelectedDate if new date is valid */
     set maxSelectedDate(rawDate) {
         if (!this._maxSelectedDate) {
-            // see comment above in the minSelectedDate setter
+            // 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 x = this.translateDateToPosition(rawDate);
-        if (x) {
-            const validX = this.validMaxSliderX(x);
-            this._maxSelectedDate = this.translatePositionToDate(validX);
+        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() {
-        var _a;
-        return (
-        // default to leftmost position if missing or invalid min position
-        (_a = this.translateDateToPosition(this.minSelectedDate)) !== null && _a !== void 0 ? _a : this.sliderWidth);
+        const x = this.translateDateToPosition(this.minSelectedDate);
+        return this.validMinSliderX(x);
     }
     /** horizontal position of max date slider */
     get maxSliderX() {
-        var _a;
-        return (
-        // default to rightmost position if missing or invalid max position
-        (_a = this.translateDateToPosition(this.maxSelectedDate)) !== null && _a !== void 0 ? _a : this.width - this.sliderWidth);
+        const x = this.translateDateToPosition(this.maxSelectedDate);
+        return this.validMaxSliderX(x);
     }
     get dateRangeMS() {
         return this._maxDateMS - this._minDateMS;
@@ -228,10 +246,11 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         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;
         this._tooltipContent = html `
-      ${dataset.numItems} ${itemsText}<br />
+      ${formattedNumItems} ${itemsText}<br />
       ${dataset.binStart} - ${dataset.binEnd}
     `;
         this._tooltipVisible = true;
@@ -244,25 +263,33 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
      * 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 widget (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
+     * 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) {
-        const validX = Math.max(newX, this.sliderWidth);
-        return Math.min(validX, this.maxSliderX);
+        // 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 widget (ie widget 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
+     * 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) {
-        const validX = Math.max(newX, this.minSliderX);
-        return Math.min(validX, this.width - this.sliderWidth);
+        // 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);
@@ -332,17 +359,19 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         return this.formatDate(this._minDateMS + milliseconds);
     }
     /**
-     * Returns slider x-position corresponding to given date (or null if invalid
-     * date)
+     * Returns slider x-position corresponding to given date
      *
      * @param date
      * @returns x-position of slider
      */
     translateDateToPosition(date) {
-        const milliseconds = dayjs(date).valueOf();
-        const xPosition = this.sliderWidth +
-            ((milliseconds - this._minDateMS) * this._histWidth) / this.dateRangeMS;
-        return isNaN(milliseconds) || isNaN(xPosition) ? null : xPosition;
+        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);
     }
     handleMinDateInput(e) {
         const target = e.currentTarget;
@@ -354,25 +383,51 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         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}`;
     }
-    /** minimum selected date in milliseconds */
-    get minSelectedDateMS() {
-        return dayjs(this.minSelectedDate).valueOf();
-    }
-    /** maximum selected date in milliseconds */
-    get maxSelectedDateMS() {
-        return dayjs(this.maxSelectedDate).valueOf();
+    getMSFromString(date) {
+        const digitGroupCount = (date.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(date)); // override year
+            return dateObj.getTime(); // get time in milliseconds
+        }
+        return dayjs(date, [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;
-        const binStartDateMS = dayjs(dataset.binStart).valueOf();
-        if (binStartDateMS < this.minSelectedDateMS) {
+        // 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;
         }
-        const binEndDateMS = dayjs(dataset.binEnd).valueOf();
-        if (binEndDateMS > this.maxSelectedDateMS) {
+        else {
             this.maxSelectedDate = dataset.binEnd;
         }
         this.beginEmitUpdateProcess();
@@ -416,7 +471,7 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
       ${this._isDragging ? 'dragging' : ''}"
       @pointerdown="${this.drag}"
     >
-      <path d="${sliderShape} z" fill="${sliderFill}" />
+      <path d="${sliderShape} z" fill="${sliderColor}" />
       <rect
         x="${sliderPositionX - this.sliderWidth * k + this.sliderWidth * 0.4 * k}"
         y="${this.height / 3}"
@@ -441,7 +496,7 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         y="0"
         width="${this.maxSliderX - this.minSliderX}"
         height="${this.height}"
-        fill="${selectedRangeFill}"
+        fill="${selectedRangeColor}"
       />`;
     }
     get histogramTemplate() {
@@ -464,7 +519,7 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
           @pointerenter="${this.showTooltip}"
           @pointerleave="${this.hideTooltip}"
           @click="${this.handleBarClick}"
-          fill="${x >= this.minSliderX && x <= this.maxSliderX
+          fill="${x + barWidth >= this.minSliderX && x <= this.maxSliderX
                 ? barIncludedFill
                 : barExcludedFill}"
           data-num-items="${data.value}"
@@ -475,9 +530,17 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
             return bar;
         });
     }
-    formatDate(rawDate) {
-        const date = dayjs(rawDate);
-        return date.isValid() ? date.format(this.dateFormat) : '';
+    formatDate(dateMS) {
+        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 fall
+            // back to displaying only the year
+            return String(date.year());
+        }
+        return date.format(this.dateFormat);
     }
     /**
      * NOTE: we are relying on the lit `live` directive in the template to
@@ -493,6 +556,7 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         type="text"
         @focus="${this.cancelPendingUpdateEvent}"
         @blur="${this.handleMinDateInput}"
+        @keyup="${this.handleKeyUp}"
         .value="${live(this.minSelectedDate)}"
         ?disabled="${this.disabled}"
       />
@@ -506,6 +570,7 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         type="text"
         @focus="${this.cancelPendingUpdateEvent}"
         @blur="${this.handleMaxDateInput}"
+        @keyup="${this.handleKeyUp}"
         .value="${live(this.maxSelectedDate)}"
         ?disabled="${this.disabled}"
       />
@@ -535,7 +600,7 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
     }
     get activityIndicatorTemplate() {
         if (!this.loading) {
-            return html ``;
+            return nothing;
         }
         return html `
       <ia-activity-indicator mode="processing"> </ia-activity-indicator>
@@ -635,7 +700,7 @@ HistogramDateRange.styles = css `
       border-radius: 3px;
       padding: 2px;
       font-size: ${tooltipFontSize};
-      font-family: sans-serif;
+      font-family: ${tooltipFontFamily};
       touch-action: none;
       pointer-events: none;
     }
@@ -672,6 +737,7 @@ HistogramDateRange.styles = css `
       border-radius: 2px !important;
       text-align: center;
       font-size: ${inputFontSize};
+      font-family: ${inputFontFamily};
     }
   `;
 __decorate([