@internetarchive/histogram-date-range 0.1.0 → 0.1.1-alpha

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

@@ -19,6 +19,8 @@ import {
 import {property, state, customElement} from "../../_snowpack/pkg/lit/decorators.js";
 import {live} from "../../_snowpack/pkg/lit/directives/live.js";
 import dayjs from "../../_snowpack/pkg/dayjs/esm/index.js";
+import customParseFormat from "../../_snowpack/pkg/dayjs/esm/plugin/customParseFormat.js";
+dayjs.extend(customParseFormat);
 import "../../_snowpack/pkg/@internetarchive/ia-activity-indicator/ia-activity-indicator.js";
 const WIDTH = 180;
 const HEIGHT = 40;
@@ -90,11 +92,10 @@ export let HistogramDateRange = class 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));
       }
     };
   }
@@ -112,8 +113,8 @@ export let HistogramDateRange = class 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();
@@ -124,7 +125,8 @@ export let HistogramDateRange = class extends LitElement {
   calculateHistData() {
     const minValue = Math.min(...this.bins);
     const maxValue = Math.max(...this.bins);
-    const valueScale = this.height / Math.log1p(maxValue - minValue);
+    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 {
@@ -152,38 +154,42 @@ export let HistogramDateRange = class extends LitElement {
     this._isLoading = value;
   }
   get minSelectedDate() {
-    return this.formatDate(this._minSelectedDate);
+    return this.formatDate(this.getMSFromString(this._minSelectedDate));
   }
   set minSelectedDate(rawDate) {
     if (!this._minSelectedDate) {
       this._minSelectedDate = rawDate;
+      return;
     }
-    const x = this.translateDateToPosition(rawDate);
-    if (x) {
-      const validX = this.validMinSliderX(x);
-      this._minSelectedDate = this.translatePositionToDate(validX);
+    let ms = this.getMSFromString(rawDate);
+    if (!Number.isNaN(ms)) {
+      ms = Math.min(ms, this.getMSFromString(this._maxSelectedDate));
+      this._minSelectedDate = this.formatDate(ms);
     }
     this.requestUpdate();
   }
   get maxSelectedDate() {
-    return this.formatDate(this._maxSelectedDate);
+    return this.formatDate(this.getMSFromString(this._maxSelectedDate));
   }
   set maxSelectedDate(rawDate) {
     if (!this._maxSelectedDate) {
       this._maxSelectedDate = rawDate;
+      return;
     }
-    const x = this.translateDateToPosition(rawDate);
-    if (x) {
-      const validX = this.validMaxSliderX(x);
-      this._maxSelectedDate = this.translatePositionToDate(validX);
+    let ms = this.getMSFromString(rawDate);
+    if (!Number.isNaN(ms)) {
+      ms = Math.max(this.getMSFromString(this._minSelectedDate), ms);
+      this._maxSelectedDate = this.formatDate(ms);
     }
     this.requestUpdate();
   }
   get minSliderX() {
-    return this.translateDateToPosition(this.minSelectedDate) ?? this.sliderWidth;
+    const x = this.translateDateToPosition(this.minSelectedDate);
+    return this.validMinSliderX(x);
   }
   get maxSliderX() {
-    return this.translateDateToPosition(this.maxSelectedDate) ?? this.width - this.sliderWidth;
+    const x = this.translateDateToPosition(this.maxSelectedDate);
+    return this.validMaxSliderX(x);
   }
   get dateRangeMS() {
     return this._maxDateMS - this._minDateMS;
@@ -196,9 +202,10 @@ export let HistogramDateRange = class 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;
@@ -208,12 +215,16 @@ export let HistogramDateRange = class extends LitElement {
     this._tooltipVisible = false;
   }
   validMinSliderX(newX) {
-    const validX = Math.max(newX, this.sliderWidth);
-    return Math.min(validX, this.maxSliderX);
+    if (Number.isNaN(newX)) {
+      return this.sliderWidth;
+    }
+    return this.clamp(newX, this.sliderWidth, this.translateDateToPosition(this.maxSelectedDate));
   }
   validMaxSliderX(newX) {
-    const validX = Math.max(newX, this.minSliderX);
-    return Math.min(validX, this.width - this.sliderWidth);
+    if (Number.isNaN(newX)) {
+      return this.width - this.sliderWidth;
+    }
+    return this.clamp(newX, this.translateDateToPosition(this.minSelectedDate), this.width - this.sliderWidth);
   }
   addListeners() {
     window.addEventListener("pointermove", this.move);
@@ -263,9 +274,11 @@ export let HistogramDateRange = class extends LitElement {
     return this.formatDate(this._minDateMS + milliseconds);
   }
   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;
+  }
+  clamp(x, minValue, maxValue) {
+    return Math.min(Math.max(x, minValue), maxValue);
   }
   handleMinDateInput(e) {
     const target = e.currentTarget;
@@ -277,23 +290,31 @@ export let HistogramDateRange = class extends LitElement {
     this.maxSelectedDate = target.value;
     this.beginEmitUpdateProcess();
   }
+  handleKeyUp(e) {
+    if (e.key === "Enter") {
+      const target = e.currentTarget;
+      target.blur();
+    }
+  }
   get currentDateRangeString() {
     return `${this.minSelectedDate}:${this.maxSelectedDate}`;
   }
-  get minSelectedDateMS() {
-    return dayjs(this.minSelectedDate).valueOf();
-  }
-  get maxSelectedDateMS() {
-    return dayjs(this.maxSelectedDate).valueOf();
+  getMSFromString(date) {
+    const digitGroupCount = (date.split(/(\d+)/).length - 1) / 2;
+    if (digitGroupCount === 1) {
+      const dateObj = new Date(0, 0);
+      dateObj.setFullYear(Number(date));
+      return dateObj.getTime();
+    }
+    return dayjs(date, [this.dateFormat, DATE_FORMAT]).valueOf();
   }
   handleBarClick(e) {
     const dataset = e.currentTarget.dataset;
-    const binStartDateMS = dayjs(dataset.binStart).valueOf();
-    if (binStartDateMS < this.minSelectedDateMS) {
+    const distanceFromMinSlider = this.getMSFromString(dataset.binStart) - this.getMSFromString(this.minSelectedDate);
+    const distanceFromMaxSlider = this.getMSFromString(this.maxSelectedDate) - this.getMSFromString(dataset.binEnd);
+    if (distanceFromMinSlider < distanceFromMaxSlider) {
       this.minSelectedDate = dataset.binStart;
-    }
-    const binEndDateMS = dayjs(dataset.binEnd).valueOf();
-    if (binEndDateMS > this.maxSelectedDateMS) {
+    } else {
       this.maxSelectedDate = dataset.binEnd;
     }
     this.beginEmitUpdateProcess();
@@ -376,7 +397,7 @@ export let HistogramDateRange = class extends LitElement {
           @pointerenter="${this.showTooltip}"
           @pointerleave="${this.hideTooltip}"
           @click="${this.handleBarClick}"
-          fill="${x >= this.minSliderX && x <= this.maxSliderX ? barIncludedFill : barExcludedFill}"
+          fill="${x + barWidth >= this.minSliderX && x <= this.maxSliderX ? barIncludedFill : barExcludedFill}"
           data-num-items="${data.value}"
           data-bin-start="${data.binStart}"
           data-bin-end="${data.binEnd}"
@@ -385,9 +406,15 @@ export let HistogramDateRange = class 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() < 1e3) {
+      return String(date.year());
+    }
+    return date.format(this.dateFormat);
   }
   get minInputTemplate() {
     return html`
@@ -397,6 +424,7 @@ export let HistogramDateRange = class extends LitElement {
         type="text"
         @focus="${this.cancelPendingUpdateEvent}"
         @blur="${this.handleMinDateInput}"
+        @keyup="${this.handleKeyUp}"
         .value="${live(this.minSelectedDate)}"
         ?disabled="${this.disabled}"
       />
@@ -410,6 +438,7 @@ export let HistogramDateRange = class extends LitElement {
         type="text"
         @focus="${this.cancelPendingUpdateEvent}"
         @blur="${this.handleMaxDateInput}"
+        @keyup="${this.handleKeyUp}"
         .value="${live(this.maxSelectedDate)}"
         ?disabled="${this.disabled}"
       />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/histogram-date-range",
-  "version": "0.1.0",
+  "version": "0.1.1-alpha",
   "description": "Internet Archive histogram date range picker",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",
@@ -16,12 +16,12 @@
     "prepare": "npm run build",
     "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
     "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
-    "test": "tsc && wtr --coverage",
+    "test": "tsc && wtr",
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
     "dayjs": "^1.9.7",
-    "lit": "^2.0.0-rc.2"
+    "lit": "^2.1.1"
   },
   "devDependencies": {
     "@internetarchive/ia-activity-indicator": "^0.0.1",

package/src/histogram-date-range.ts

@@ -11,6 +11,8 @@ import {
 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
@@ -126,8 +128,8 @@ export 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();
@@ -143,11 +145,17 @@ export class HistogramDateRange extends LitElement {
   private calculateHistData(): HistogramItem[] {
     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: number, i: number) => {
       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)}`,
@@ -178,56 +186,60 @@ export class HistogramDateRange extends LitElement {
 
   /** formatted minimum date of selected date range */
   @property() get minSelectedDate(): string {
-    return this.formatDate(this._minSelectedDate);
+    return this.formatDate(this.getMSFromString(this._minSelectedDate));
   }
 
+  /** updates minSelectedDate if new date is valid */
   set minSelectedDate(rawDate: string) {
     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);
+    let ms = this.getMSFromString(rawDate);
+    if (!Number.isNaN(ms)) {
+      ms = Math.min(ms, this.getMSFromString(this._maxSelectedDate));
+      this._minSelectedDate = this.formatDate(ms);
     }
     this.requestUpdate();
   }
 
   /** formatted maximum date of selected date range */
   @property() get maxSelectedDate(): string {
-    return this.formatDate(this._maxSelectedDate);
+    return this.formatDate(this.getMSFromString(this._maxSelectedDate));
   }
 
+  /** updates maxSelectedDate if new date is valid */
   set maxSelectedDate(rawDate: string) {
     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);
+    let ms = this.getMSFromString(rawDate);
+    if (!Number.isNaN(ms)) {
+      ms = Math.max(this.getMSFromString(this._minSelectedDate), ms);
+      this._maxSelectedDate = this.formatDate(ms);
     }
     this.requestUpdate();
   }
+
   /** horizontal position of min date slider */
   get minSliderX(): number {
-    return (
-      // default to leftmost position if missing or invalid min position
-      this.translateDateToPosition(this.minSelectedDate) ?? this.sliderWidth
-    );
+    // default to leftmost position if missing or invalid min position
+    const x = this.translateDateToPosition(this.minSelectedDate);
+    return this.validMinSliderX(x);
   }
 
   /** horizontal position of max date slider */
   get maxSliderX(): number {
-    return (
-      // default to rightmost position if missing or invalid max position
-      this.translateDateToPosition(this.maxSelectedDate) ??
-      this.width - this.sliderWidth
-    );
+    // default to rightmost position if missing or invalid max position
+    const x = this.translateDateToPosition(this.maxSelectedDate);
+    return this.validMaxSliderX(x);
   }
 
   private get dateRangeMS(): number {
@@ -242,12 +254,13 @@ export class HistogramDateRange extends LitElement {
     const x = target.x.baseVal.value + this.sliderWidth / 2;
     const dataset = target.dataset as BarDataset;
     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;
@@ -290,11 +303,14 @@ export class HistogramDateRange extends LitElement {
   private move = (e: PointerEvent): void => {
     const newX = e.offsetX - this._dragOffset;
     const slider = this._currentSlider as SVGRectElement;
-    const date = this.translatePositionToDate(newX);
     if ((slider.id as SliderId) === 'slider-min') {
-      this.minSelectedDate = date;
+      this.minSelectedDate = this.translatePositionToDate(
+        this.validMinSliderX(newX)
+      );
     } else {
-      this.maxSelectedDate = date;
+      this.maxSelectedDate = this.translatePositionToDate(
+        this.validMaxSliderX(newX)
+      );
     }
   };
 
@@ -307,8 +323,14 @@ export class HistogramDateRange extends LitElement {
    * to the position of the max slider
    */
   private validMinSliderX(newX: number): number {
-    const validX = Math.max(newX, this.sliderWidth);
-    return Math.min(validX, this.maxSliderX);
+    if (Number.isNaN(newX)) {
+      return this.sliderWidth;
+    }
+    return this.clamp(
+      newX,
+      this.sliderWidth,
+      this.translateDateToPosition(this.maxSelectedDate)
+    );
   }
 
   /**
@@ -320,8 +342,14 @@ export class HistogramDateRange extends LitElement {
    * then set it to the position of the min slider
    */
   private validMaxSliderX(newX: number): number {
-    const validX = Math.max(newX, this.minSliderX);
-    return Math.min(validX, this.width - this.sliderWidth);
+    if (Number.isNaN(newX)) {
+      return this.width - this.sliderWidth;
+    }
+    return this.clamp(
+      newX,
+      this.translateDateToPosition(this.minSelectedDate),
+      this.width - this.sliderWidth
+    );
   }
 
   private addListeners(): void {
@@ -409,12 +437,17 @@ export class HistogramDateRange extends LitElement {
    * @param date
    * @returns x-position of slider
    */
-  private translateDateToPosition(date: string): number | null {
-    const milliseconds = dayjs(date).valueOf();
-    const xPosition =
+  private translateDateToPosition(date: string): number {
+    const milliseconds = this.getMSFromString(date);
+    return (
       this.sliderWidth +
-      ((milliseconds - this._minDateMS) * this._histWidth) / this.dateRangeMS;
-    return isNaN(milliseconds) || isNaN(xPosition) ? null : xPosition;
+      ((milliseconds - this._minDateMS) * this._histWidth) / this.dateRangeMS
+    );
+  }
+
+  /** ensure that the returned value is between minValue and maxValue */
+  private clamp(x: number, minValue: number, maxValue: number): number {
+    return Math.min(Math.max(x, minValue), maxValue);
   }
 
   private handleMinDateInput(e: InputEvent): void {
@@ -429,28 +462,40 @@ export class HistogramDateRange extends LitElement {
     this.beginEmitUpdateProcess();
   }
 
-  private get currentDateRangeString(): string {
-    return `${this.minSelectedDate}:${this.maxSelectedDate}`;
+  private handleKeyUp(e: KeyboardEvent): void {
+    if (e.key === 'Enter') {
+      const target = e.currentTarget as HTMLInputElement;
+      target.blur();
+    }
   }
 
-  /** minimum selected date in milliseconds */
-  private get minSelectedDateMS(): number {
-    return dayjs(this.minSelectedDate).valueOf();
+  private get currentDateRangeString(): string {
+    return `${this.minSelectedDate}:${this.maxSelectedDate}`;
   }
 
-  /** maximum selected date in milliseconds */
-  private get maxSelectedDateMS(): number {
-    return dayjs(this.maxSelectedDate).valueOf();
+  private getMSFromString(date: string): number {
+    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 (=> 0099-01-01) = 99 CE
+      return dateObj.getTime(); // get time in milliseconds
+    }
+    return dayjs(date, [this.dateFormat, DATE_FORMAT]).valueOf();
   }
 
   private handleBarClick(e: InputEvent): void {
     const dataset = (e.currentTarget as SVGRectElement).dataset as BarDataset;
-    const binStartDateMS = dayjs(dataset.binStart).valueOf();
-    if (binStartDateMS < this.minSelectedDateMS) {
+    const distanceFromMinSlider =
+      this.getMSFromString(dataset.binStart) -
+      this.getMSFromString(this.minSelectedDate);
+    const distanceFromMaxSlider =
+      this.getMSFromString(this.maxSelectedDate) -
+      this.getMSFromString(dataset.binEnd);
+    // update the selection 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();
@@ -561,7 +606,7 @@ export class HistogramDateRange extends LitElement {
           @pointerleave="${this.hideTooltip}"
           @click="${this.handleBarClick}"
           fill="${
-            x >= this.minSliderX && x <= this.maxSliderX
+            x + barWidth >= this.minSliderX && x <= this.maxSliderX
               ? barIncludedFill
               : barExcludedFill
           }"
@@ -574,9 +619,17 @@ export class HistogramDateRange extends LitElement {
     });
   }
 
-  private formatDate(rawDate: string | number): string {
-    const date = dayjs(rawDate);
-    return date.isValid() ? date.format(this.dateFormat) : '';
+  private formatDate(dateMS: number): string {
+    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);
   }
 
   /**
@@ -593,6 +646,7 @@ export class HistogramDateRange extends LitElement {
         type="text"
         @focus="${this.cancelPendingUpdateEvent}"
         @blur="${this.handleMinDateInput}"
+        @keyup="${this.handleKeyUp}"
         .value="${live(this.minSelectedDate)}"
         ?disabled="${this.disabled}"
       />
@@ -607,6 +661,7 @@ export class HistogramDateRange extends LitElement {
         type="text"
         @focus="${this.cancelPendingUpdateEvent}"
         @blur="${this.handleMaxDateInput}"
+        @keyup="${this.handleKeyUp}"
         .value="${live(this.maxSelectedDate)}"
         ?disabled="${this.disabled}"
       />