@internetarchive/histogram-date-range 1.1.1-alpha.3 → 1.2.0

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/index.js.map

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

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

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues, SVGTemplateResult, TemplateResult } from 'lit';
-import '@internetarchive/ia-activity-indicator';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
 export declare class HistogramDateRange extends LitElement {
     width: number;
     height: number;

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

@@ -2,17 +2,17 @@ import { __decorate } from "tslib";
 import { css, html, nothing, LitElement, svg, } from 'lit';
 import { property, state, customElement } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
-import '@internetarchive/ia-activity-indicator';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
 /* eslint-disable-next-line */
 /* @ts-ignore Import module -- JS, so no types */
-//import dayjs from 'dayjs';
+import dayjs from 'https://esm.archive.org/dayjs@1.11.10';
 /* eslint-disable-next-line */
 /* @ts-ignore Import module -- JS, so no types */
-//import customParseFormat from 'dayjs/plugin/customParseFormat.js';
+import customParseFormat from 'https://esm.archive.org/dayjs@1.9.4/esm/plugin/customParseFormat';
 // NOTE: using a specific *earlier* pegged commit for the plugin ^, because esm.archive.org has a
 // problem creating later versions where the `export` of an included `utils.js` gets mangled.  Eg:
 // https://github.com/internetarchive/esbuild_es5/commit/ce19e8b841282c0e94d2b8e6830fd7744b2216c2#diff-4b2ed47327851d566740a30ce5f60271c059ae67eff2006bc07bb7c4fcee8b50L296
-//dayjs.extend(customParseFormat);
+dayjs.extend(customParseFormat);
 // these values can be overridden via the component's HTML (camelCased) attributes
 const WIDTH = 180;
 const HEIGHT = 40;
@@ -262,9 +262,9 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         const formattedNumItems = Number(dataset.numItems).toLocaleString();
         this._tooltipOffset =
             x + (this._binWidth - this.sliderWidth - this.tooltipWidth) / 2;
-        this._tooltipContent = html `
-      ${formattedNumItems} ${itemsText}<br />
-      ${dataset.binStart} - ${dataset.binEnd}
+        this._tooltipContent = html `
+      ${formattedNumItems} ${itemsText}<br />
+      ${dataset.binStart} - ${dataset.binEnd}
     `;
         this._tooltipVisible = true;
     }
@@ -421,17 +421,14 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         // 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 dateObj = new Date(0, 0);
-        dateObj.setFullYear(Number(stringified));
-        return dateObj.getTime();
-        /*const digitGroupCount = (stringified.split(/(\d+)/).length - 1) / 2;
+        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
+            // 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();*/
+        return dayjs(stringified, [this.dateFormat, DATE_FORMAT]).valueOf();
     }
     /**
      * expand or narrow the selected range by moving the slider nearest the
@@ -462,25 +459,25 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         // 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}
-            q-${cs},0 -${cs},${cs}
-            v${this.height - cs * 2}
-            q0,${cs} ${cs},${cs}
-            h${this.sliderWidth - cs}
+        const sliderShape = `
+            M${this.minSliderX},0
+            h-${this.sliderWidth - cs}
+            q-${cs},0 -${cs},${cs}
+            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;
-        const sliderShape = `
-            M${this.maxSliderX},0
-            h${this.sliderWidth - cs}
-            q${cs},0 ${cs},${cs}
-            v${this.height - cs * 2}
-            q0,${cs} -${cs},${cs}
-            h-${this.sliderWidth - cs}
+        const sliderShape = `
+            M${this.maxSliderX},0
+            h${this.sliderWidth - cs}
+            q${cs},0 ${cs},${cs}
+            v${this.height - cs * 2}
+            q0,${cs} -${cs},${cs}
+            h-${this.sliderWidth - cs}
           `;
         return this.generateSliderSVG(this.maxSliderX, 'slider-max', sliderShape);
     }
@@ -488,40 +485,40 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         // 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;
-        return svg `
-    <svg
-      id="${id}"
-      class="
-      ${this.disabled ? '' : 'draggable'}
-      ${this._isDragging ? 'dragging' : ''}"
-      @pointerdown="${this.drag}"
-    >
-      <path d="${sliderShape} z" fill="${sliderColor}" />
-      <rect
-        x="${sliderPositionX - this.sliderWidth * k + this.sliderWidth * 0.4 * k}"
-        y="${this.height / 3}"
-        width="1"
-        height="${this.height / 3}"
-        fill="white"
-      />
-      <rect
-        x="${sliderPositionX - this.sliderWidth * k + this.sliderWidth * 0.6 * k}"
-        y="${this.height / 3}"
-        width="1"
-        height="${this.height / 3}"
-        fill="white"
-      />
-    </svg>
+        return svg `
+    <svg
+      id="${id}"
+      class="
+      ${this.disabled ? '' : 'draggable'}
+      ${this._isDragging ? 'dragging' : ''}"
+      @pointerdown="${this.drag}"
+    >
+      <path d="${sliderShape} z" fill="${sliderColor}" />
+      <rect
+        x="${sliderPositionX - this.sliderWidth * k + this.sliderWidth * 0.4 * k}"
+        y="${this.height / 3}"
+        width="1"
+        height="${this.height / 3}"
+        fill="white"
+      />
+      <rect
+        x="${sliderPositionX - this.sliderWidth * k + this.sliderWidth * 0.6 * k}"
+        y="${this.height / 3}"
+        width="1"
+        height="${this.height / 3}"
+        fill="white"
+      />
+    </svg>
     `;
     }
     get selectedRangeTemplate() {
-        return svg `
-      <rect
-        x="${this.minSliderX}"
-        y="0"
-        width="${this.maxSliderX - this.minSliderX}"
-        height="${this.height}"
-        fill="${selectedRangeColor}"
+        return svg `
+      <rect
+        x="${this.minSliderX}"
+        y="0"
+        width="${this.maxSliderX - this.minSliderX}"
+        height="${this.height}"
+        fill="${selectedRangeColor}"
       />`;
     }
     get histogramTemplate() {
@@ -533,23 +530,23 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         // between adjacent bars (eg when viewing the tooltips or when trying to
         // extend the range by clicking on a bar)
         return this._histData.map(data => {
-            const bar = svg `
-        <rect
-          class="bar"
-          style='stroke-dasharray: 0 ${barWidth} ${data.height} ${barWidth} 0 ${data.height};'
-          x="${x}"
-          y="${this.height - data.height}"
-          width="${barWidth}"
-          height="${data.height}"
-          @pointerenter="${this.showTooltip}"
-          @pointerleave="${this.hideTooltip}"
-          @click="${this.handleBarClick}"
+            const bar = svg `
+        <rect
+          class="bar"
+          style='stroke-dasharray: 0 ${barWidth} ${data.height} ${barWidth} 0 ${data.height};'
+          x="${x}"
+          y="${this.height - data.height}"
+          width="${barWidth}"
+          height="${data.height}"
+          @pointerenter="${this.showTooltip}"
+          @pointerleave="${this.hideTooltip}"
+          @click="${this.handleBarClick}"
           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}"
+                : barExcludedFill}"
+          data-num-items="${data.value}"
+          data-bin-start="${data.binStart}"
+          data-bin-end="${data.binEnd}"
         />`;
             x += xScale;
             return bar;
@@ -559,14 +556,13 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         if (Number.isNaN(dateMS)) {
             return '';
         }
-        return String(new Date(dateMS).getFullYear());
-        /*const date = dayjs(dateMS);
+        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());
+            // 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);*/
+        return date.format(this.dateFormat);
     }
     /**
      * NOTE: we are relying on the lit `live` directive in the template to
@@ -575,31 +571,31 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
      * https://lit.dev/docs/templates/directives/#live
      */
     get minInputTemplate() {
-        return html `
-      <input
-        id="date-min"
-        placeholder="${this.dateFormat}"
-        type="text"
-        @focus="${this.handleInputFocus}"
-        @blur="${this.handleMinDateInput}"
-        @keyup="${this.handleKeyUp}"
-        .value="${live(this.minSelectedDate)}"
-        ?disabled="${this.disabled}"
-      />
+        return html `
+      <input
+        id="date-min"
+        placeholder="${this.dateFormat}"
+        type="text"
+        @focus="${this.handleInputFocus}"
+        @blur="${this.handleMinDateInput}"
+        @keyup="${this.handleKeyUp}"
+        .value="${live(this.minSelectedDate)}"
+        ?disabled="${this.disabled}"
+      />
     `;
     }
     get maxInputTemplate() {
-        return html `
-      <input
-        id="date-max"
-        placeholder="${this.dateFormat}"
-        type="text"
-        @focus="${this.handleInputFocus}"
-        @blur="${this.handleMaxDateInput}"
-        @keyup="${this.handleKeyUp}"
-        .value="${live(this.maxSelectedDate)}"
-        ?disabled="${this.disabled}"
-      />
+        return html `
+      <input
+        id="date-max"
+        placeholder="${this.dateFormat}"
+        type="text"
+        @focus="${this.handleInputFocus}"
+        @blur="${this.handleMaxDateInput}"
+        @keyup="${this.handleKeyUp}"
+        .value="${live(this.maxSelectedDate)}"
+        ?disabled="${this.disabled}"
+      />
     `;
     }
     get minLabelTemplate() {
@@ -609,184 +605,184 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         return html `<label for="date-max" class="sr-only">Maximum date:</label>`;
     }
     get tooltipTemplate() {
-        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>
+        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() {
-        return html `
-      <div class="missing-data-message">${this.missingDataMessage}</div>
+        return html `
+      <div class="missing-data-message">${this.missingDataMessage}</div>
     `;
     }
     get activityIndicatorTemplate() {
         if (!this.loading) {
             return nothing;
         }
-        return html `
-      <ia-activity-indicator mode="processing"> </ia-activity-indicator>
+        return html `
+      <ia-activity-indicator mode="processing"> </ia-activity-indicator>
     `;
     }
     render() {
         if (!this.hasBinData) {
             return this.noDataTemplate;
         }
-        return html `
-      <div
-        id="container"
-        class="
-          noselect
-          ${this._isDragging ? 'dragging' : ''}
-        "
-        style="width: ${this.width}px"
-      >
-        ${this.activityIndicatorTemplate} ${this.tooltipTemplate}
-        <div
-          class="inner-container
-          ${this.disabled ? 'disabled' : ''}"
-        >
-          <svg
-            width="${this.width}"
-            height="${this.height}"
-            @pointerleave="${this.drop}"
-          >
-            ${this.selectedRangeTemplate}
-            <svg id="histogram">${this.histogramTemplate}</svg>
-            ${this.minSliderTemplate} ${this.maxSliderTemplate}
-          </svg>
-          <div id="inputs">
-            ${this.minLabelTemplate} ${this.minInputTemplate}
-            <div class="dash">-</div>
-            ${this.maxLabelTemplate} ${this.maxInputTemplate}
-            <slot name="inputs-right-side"></slot>
-          </div>
-        </div>
-      </div>
+        return html `
+      <div
+        id="container"
+        class="
+          noselect
+          ${this._isDragging ? 'dragging' : ''}
+        "
+        style="width: ${this.width}px"
+      >
+        ${this.activityIndicatorTemplate} ${this.tooltipTemplate}
+        <div
+          class="inner-container
+          ${this.disabled ? 'disabled' : ''}"
+        >
+          <svg
+            width="${this.width}"
+            height="${this.height}"
+            @pointerleave="${this.drop}"
+          >
+            ${this.selectedRangeTemplate}
+            <svg id="histogram">${this.histogramTemplate}</svg>
+            ${this.minSliderTemplate} ${this.maxSliderTemplate}
+          </svg>
+          <div id="inputs">
+            ${this.minLabelTemplate} ${this.minInputTemplate}
+            <div class="dash">-</div>
+            ${this.maxLabelTemplate} ${this.maxInputTemplate}
+            <slot name="inputs-right-side"></slot>
+          </div>
+        </div>
+      </div>
     `;
     }
 };
-HistogramDateRange.styles = css `
-    .missing-data-message {
-      text-align: center;
-    }
-    #container {
-      margin: 0;
-      touch-action: none;
-      position: relative;
-    }
-    .disabled {
-      opacity: 0.3;
-    }
-    ia-activity-indicator {
-      position: absolute;
-      left: calc(50% - 10px);
-      top: 10px;
-      width: 20px;
-      height: 20px;
-      --activityIndicatorLoadingDotColor: rgba(0, 0, 0, 0);
-      --activityIndicatorLoadingRingColor: ${activityIndicatorColor};
-    }
-
-    /* prevent selection from interfering with tooltip, especially on mobile */
-    /* https://stackoverflow.com/a/4407335/1163042 */
-    .noselect {
-      -webkit-touch-callout: none; /* iOS Safari */
-      -webkit-user-select: none; /* Safari */
-      -moz-user-select: none; /* Old versions of Firefox */
-      -ms-user-select: none; /* Internet Explorer/Edge */
-      user-select: none; /* current Chrome, Edge, Opera and Firefox */
-    }
-    .bar {
-      /* create a transparent border around the hist bars to prevent "gaps" and
-      flickering when moving around between bars. this also helps with handling
-      clicks on the bars, preventing users from being able to click in between
-      bars */
-      stroke: rgba(0, 0, 0, 0);
-      /* ensure transparent stroke wide enough to cover gap between bars */
-      stroke-width: 2px;
-    }
-    .bar:hover {
-      /* highlight currently hovered bar */
-      fill-opacity: 0.7;
-    }
-    .disabled .bar:hover {
-      /* ensure no visual hover interaction when disabled */
-      fill-opacity: 1;
-    }
-    /****** histogram ********/
-    #tooltip {
-      position: absolute;
-      background: ${tooltipBackgroundColor};
-      color: ${tooltipTextColor};
-      text-align: center;
-      border-radius: 3px;
-      padding: 2px;
-      font-size: ${tooltipFontSize};
-      font-family: ${tooltipFontFamily};
-      touch-action: none;
-      pointer-events: none;
-    }
-    #tooltip:after {
-      content: '';
-      position: absolute;
-      margin-left: -5px;
-      top: 100%;
-      /* arrow */
-      border: 5px solid ${tooltipTextColor};
-      border-color: ${tooltipBackgroundColor} transparent transparent
-        transparent;
-    }
-    /****** slider ********/
-    .draggable:hover {
-      cursor: grab;
-    }
-    .dragging {
-      cursor: grabbing !important;
-    }
-    /****** inputs ********/
-    #inputs {
-      display: flex;
-      justify-content: center;
-      margin: ${inputRowMargin};
-    }
-    #inputs .dash {
-      position: relative;
-      bottom: -1px;
-      align-self: center; /* Otherwise the dash sticks to the top while the inputs grow */
-    }
-    input {
-      width: ${inputWidth};
-      margin: 0 3px;
-      border: ${inputBorder};
-      border-radius: 2px !important;
-      text-align: center;
-      font-size: ${inputFontSize};
-      font-family: ${inputFontFamily};
-    }
-    .sr-only {
-      position: absolute !important;
-      width: 1px !important;
-      height: 1px !important;
-      margin: 0 !important;
-      padding: 0 !important;
-      border: 0 !important;
-      overflow: hidden !important;
-      white-space: nowrap !important;
-      clip: rect(1px, 1px, 1px, 1px) !important;
-      -webkit-clip-path: inset(50%) !important;
-      clip-path: inset(50%) !important;
-    }
+HistogramDateRange.styles = css `
+    .missing-data-message {
+      text-align: center;
+    }
+    #container {
+      margin: 0;
+      touch-action: none;
+      position: relative;
+    }
+    .disabled {
+      opacity: 0.3;
+    }
+    ia-activity-indicator {
+      position: absolute;
+      left: calc(50% - 10px);
+      top: 10px;
+      width: 20px;
+      height: 20px;
+      --activityIndicatorLoadingDotColor: rgba(0, 0, 0, 0);
+      --activityIndicatorLoadingRingColor: ${activityIndicatorColor};
+    }
+
+    /* prevent selection from interfering with tooltip, especially on mobile */
+    /* https://stackoverflow.com/a/4407335/1163042 */
+    .noselect {
+      -webkit-touch-callout: none; /* iOS Safari */
+      -webkit-user-select: none; /* Safari */
+      -moz-user-select: none; /* Old versions of Firefox */
+      -ms-user-select: none; /* Internet Explorer/Edge */
+      user-select: none; /* current Chrome, Edge, Opera and Firefox */
+    }
+    .bar {
+      /* create a transparent border around the hist bars to prevent "gaps" and
+      flickering when moving around between bars. this also helps with handling
+      clicks on the bars, preventing users from being able to click in between
+      bars */
+      stroke: rgba(0, 0, 0, 0);
+      /* ensure transparent stroke wide enough to cover gap between bars */
+      stroke-width: 2px;
+    }
+    .bar:hover {
+      /* highlight currently hovered bar */
+      fill-opacity: 0.7;
+    }
+    .disabled .bar:hover {
+      /* ensure no visual hover interaction when disabled */
+      fill-opacity: 1;
+    }
+    /****** histogram ********/
+    #tooltip {
+      position: absolute;
+      background: ${tooltipBackgroundColor};
+      color: ${tooltipTextColor};
+      text-align: center;
+      border-radius: 3px;
+      padding: 2px;
+      font-size: ${tooltipFontSize};
+      font-family: ${tooltipFontFamily};
+      touch-action: none;
+      pointer-events: none;
+    }
+    #tooltip:after {
+      content: '';
+      position: absolute;
+      margin-left: -5px;
+      top: 100%;
+      /* arrow */
+      border: 5px solid ${tooltipTextColor};
+      border-color: ${tooltipBackgroundColor} transparent transparent
+        transparent;
+    }
+    /****** slider ********/
+    .draggable:hover {
+      cursor: grab;
+    }
+    .dragging {
+      cursor: grabbing !important;
+    }
+    /****** inputs ********/
+    #inputs {
+      display: flex;
+      justify-content: center;
+      margin: ${inputRowMargin};
+    }
+    #inputs .dash {
+      position: relative;
+      bottom: -1px;
+      align-self: center; /* Otherwise the dash sticks to the top while the inputs grow */
+    }
+    input {
+      width: ${inputWidth};
+      margin: 0 3px;
+      border: ${inputBorder};
+      border-radius: 2px !important;
+      text-align: center;
+      font-size: ${inputFontSize};
+      font-family: ${inputFontFamily};
+    }
+    .sr-only {
+      position: absolute !important;
+      width: 1px !important;
+      height: 1px !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      border: 0 !important;
+      overflow: hidden !important;
+      white-space: nowrap !important;
+      clip: rect(1px, 1px, 1px, 1px) !important;
+      -webkit-clip-path: inset(50%) !important;
+      clip-path: inset(50%) !important;
+    }
   `;
 __decorate([
     property({ type: Number })