@internetarchive/histogram-date-range 1.3.1 → 1.3.2

package/src/histogram-date-range.ts

@@ -12,9 +12,10 @@ import {
   SVGTemplateResult,
   TemplateResult,
 } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+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);
@@ -100,13 +101,15 @@ export class HistogramDateRange extends LitElement {
   @property({ type: String }) binSnapping: BinSnappingInterval = 'none';
 
   // internal reactive properties not exposed as attributes
-  @state() private _tooltipOffset = 0;
+  @state() private _tooltipOffsetX = 0;
+  @state() private _tooltipOffsetY = 0;
   @state() private _tooltipContent?: TemplateResult;
-  @state() private _tooltipVisible = false;
   @state() private _tooltipDateFormat?: string;
   @state() private _isDragging = false;
   @state() private _isLoading = false;
 
+  @query('#tooltip') private _tooltip!: HTMLDivElement;
+
   // non-reactive properties (changes don't auto-trigger re-rendering)
   private _minSelectedDate = '';
   private _maxSelectedDate = '';
@@ -412,25 +415,39 @@ export class HistogramDateRange extends LitElement {
     if (this._isDragging || this.disabled) {
       return;
     }
+
     const target = e.currentTarget as SVGRectElement;
     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;
+    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;
+    this._tooltip.showPopover?.();
   }
 
   private hideTooltip(): void {
     this._tooltipContent = undefined;
-    this._tooltipVisible = false;
+    this._tooltip.hidePopover?.();
   }
 
   // use arrow functions (rather than standard JS class instance methods) so
@@ -898,20 +915,15 @@ export class HistogramDateRange extends LitElement {
   }
 
   get tooltipTemplate(): TemplateResult {
+    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>
+      <div id="tooltip" style=${styles} popover>${this._tooltipContent}</div>
     `;
   }
 
@@ -982,6 +994,8 @@ export class HistogramDateRange extends LitElement {
     #tooltip {
       position: absolute;
       background: ${tooltipBackgroundColor};
+      margin: 0;
+      border: 0;
       color: ${tooltipTextColor};
       text-align: center;
       border-radius: 3px;
@@ -990,12 +1004,14 @@ export class HistogramDateRange extends LitElement {
       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

package/src/plugins/fix-first-century-years.ts

@@ -1,52 +1,52 @@
-import type dayjs from 'dayjs/esm';
-
-/**
- * As with the Date(y, m, ...) constructor, dayjs interprets years 0-99 as offsets
- * from the year 1900 instead of the actual first-century years.
- * We don't want that weird legacy behavior; we want years parsed literally.
- *
- * The maintainer of dayjs apparently refuses to address this:
- *  - https://github.com/iamkun/dayjs/pull/548#issuecomment-477660947
- *  - https://github.com/iamkun/dayjs/issues/1237
- *
- * So this plugin tries to detect the anomalous cases where the date format
- * contains a YYYY block and the parsed date has a year in the 1900-1999 range,
- * by checking whether the parsed year actually occurred in the original string.
- * If not, then we assume it was parsed incorrectly as an offset, and adjust.
- *
- * In practice this assumption could fail if the input date is invalid in some
- * way (e.g. having overflow, like a YYYY-MM-DD of "1950-22-33", which might be
- * converted to 1951-11-02 and produce a false positive). Essentially, we trade away
- * leniency for overflow dates to ensure that we handle all valid ones correctly.
- * This seems a reasonable tradeoff for our present use cases. But realistically we
- * should probably explore moving to a date lib that handles these cases properly.
- */
-export default function fixFirstCenturyYears(
-  _: unknown,
-  dayjsClass: typeof dayjs.Dayjs
-) {
-  const proto = dayjsClass.prototype;
-  const oldParse = proto.parse;
-  proto.parse = function (cfg) {
-    const inputDate = cfg.date;
-    const format = cfg.args[1];
-    oldParse.call(this, cfg);
-
-    const year = this.year();
-    const isProblemDateRange = year >= 1900 && year < 2000;
-    const isProblemStringFormat =
-      typeof format === 'string' && format.includes('YYYY');
-    const isProblemArrayFormat =
-      Array.isArray(format) &&
-      typeof format[0] === 'string' &&
-      format[0].includes('YYYY');
-    const isProblemFormat = isProblemStringFormat || isProblemArrayFormat;
-    const missingParsedYear =
-      typeof inputDate === 'string' && !inputDate.includes(`${year}`);
-
-    if (isProblemDateRange && isProblemFormat && missingParsedYear) {
-      this.$d.setFullYear(year - 1900);
-      this.init(); // Re-initialize with the new date
-    }
-  };
-}
+import type dayjs from 'dayjs/esm';
+
+/**
+ * As with the Date(y, m, ...) constructor, dayjs interprets years 0-99 as offsets
+ * from the year 1900 instead of the actual first-century years.
+ * We don't want that weird legacy behavior; we want years parsed literally.
+ *
+ * The maintainer of dayjs apparently refuses to address this:
+ *  - https://github.com/iamkun/dayjs/pull/548#issuecomment-477660947
+ *  - https://github.com/iamkun/dayjs/issues/1237
+ *
+ * So this plugin tries to detect the anomalous cases where the date format
+ * contains a YYYY block and the parsed date has a year in the 1900-1999 range,
+ * by checking whether the parsed year actually occurred in the original string.
+ * If not, then we assume it was parsed incorrectly as an offset, and adjust.
+ *
+ * In practice this assumption could fail if the input date is invalid in some
+ * way (e.g. having overflow, like a YYYY-MM-DD of "1950-22-33", which might be
+ * converted to 1951-11-02 and produce a false positive). Essentially, we trade away
+ * leniency for overflow dates to ensure that we handle all valid ones correctly.
+ * This seems a reasonable tradeoff for our present use cases. But realistically we
+ * should probably explore moving to a date lib that handles these cases properly.
+ */
+export default function fixFirstCenturyYears(
+  _: unknown,
+  dayjsClass: typeof dayjs.Dayjs
+) {
+  const proto = dayjsClass.prototype;
+  const oldParse = proto.parse;
+  proto.parse = function (cfg) {
+    const inputDate = cfg.date;
+    const format = cfg.args[1];
+    oldParse.call(this, cfg);
+
+    const year = this.year();
+    const isProblemDateRange = year >= 1900 && year < 2000;
+    const isProblemStringFormat =
+      typeof format === 'string' && format.includes('YYYY');
+    const isProblemArrayFormat =
+      Array.isArray(format) &&
+      typeof format[0] === 'string' &&
+      format[0].includes('YYYY');
+    const isProblemFormat = isProblemStringFormat || isProblemArrayFormat;
+    const missingParsedYear =
+      typeof inputDate === 'string' && !inputDate.includes(`${year}`);
+
+    if (isProblemDateRange && isProblemFormat && missingParsedYear) {
+      this.$d.setFullYear(year - 1900);
+      this.init(); // Re-initialize with the new date
+    }
+  };
+}

package/test/histogram-date-range.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { html, fixture, expect, oneEvent, aTimeout } from '@open-wc/testing';
 
 import { HistogramDateRange } from '../src/histogram-date-range';

package/types/dayjs.d.ts

@@ -1,10 +1,10 @@
-export { default } from 'dayjs/esm';
-
-declare module 'dayjs/esm' {
-  // Widening the Dayjs interface so that we can properly extend it via plugin
-  interface Dayjs {
-    $d: Date;
-    parse(cfg: { date: unknown; args: unknown[] }): void;
-    init(): void;
-  }
-}
+export { default } from 'dayjs/esm';
+
+declare module 'dayjs/esm' {
+  // Widening the Dayjs interface so that we can properly extend it via plugin
+  interface Dayjs {
+    $d: Date;
+    parse(cfg: { date: unknown; args: unknown[] }): void;
+    init(): void;
+  }
+}