@internetarchive/histogram-date-range 1.2.2-alpha-webdev7377.8 → 1.3.1-alpha-webdev7745.0

package/.github/workflows/ci.yml

@@ -17,10 +17,10 @@ jobs:
         node-version: latest
 
     - name: Install dependencies
-      run: yarn install
+      run: npm install
 
     - name: Run tests
-      run: yarn run test
+      run: npm run test
 
     - name: Upload Codecov reports
       uses: codecov/codecov-action@main

package/demo/index.html

@@ -80,7 +80,7 @@
     </div>
 
     <div class="container">
-      <div class="description">bins rounded to nearest month</div>
+      <div class="description">bins snapped to nearest month</div>
       <histogram-date-range
         width="175"
         tooltipwidth="120"
@@ -95,14 +95,14 @@
     </div>
 
     <div class="container">
-      <div class="description">bins rounded to nearest year</div>
+      <div class="description">bins snapped to nearest year</div>
       <histogram-date-range
         width="175"
         dateFormat="YYYY"
         binSnapping="year"
         minDate="2009"
-        maxDate="2014"
-        bins="[100,5000,2000,100,5000,2000]"
+        maxDate="2018"
+        bins="[100,1000,10000,100,1000,10000,100,1000,10000,100]"
       ></histogram-date-range>
     </div>
 

package/dist/src/dayjs/fix-first-century-years.d.ts

@@ -0,0 +1,2 @@
+import dayjs from 'dayjs/esm';
+export declare function fixFirstCenturyYears(_: unknown, cls: typeof dayjs.Dayjs): void;

package/dist/src/dayjs/fix-first-century-years.js

@@ -0,0 +1,25 @@
+export function fixFirstCenturyYears(_, cls) {
+    const proto = cls.prototype;
+    const oldParse = proto.parse;
+    proto.parse = function (cfg) {
+        this.__lastDate = cfg === null || cfg === void 0 ? void 0 : cfg.date;
+        this.__lastFormat = cfg === null || cfg === void 0 ? void 0 : cfg.args[1];
+        oldParse.call(this, cfg);
+        const isProblemDateRange = this.$y >= 1900 && this.$y < 2000;
+        const isProblemStringFormat = typeof this.__lastFormat === 'string' &&
+            this.__lastFormat.includes('YYYY');
+        const isProblemArrayFormat = Array.isArray(this.__lastFormat) &&
+            typeof this.__lastFormat[1] === 'string' &&
+            this.__lastFormat[1].includes('YYYY');
+        const isProblemFormat = isProblemStringFormat || isProblemArrayFormat;
+        const missingParsedYear = typeof this.__lastDate === 'string' &&
+            !this.__lastDate.includes(`${this.$y}`);
+        if (isProblemDateRange && isProblemFormat && missingParsedYear) {
+            const old = new Date(this.$d);
+            this.$d.setFullYear(this.$y - 1900);
+            this.init();
+            console.log('fixed year', this.__lastDate, this.__lastFormat, old, this.$d);
+        }
+    };
+}
+//# sourceMappingURL=fix-first-century-years.js.map

package/dist/src/dayjs/fix-first-century-years.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fix-first-century-years.js","sourceRoot":"","sources":["../../../src/dayjs/fix-first-century-years.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,oBAAoB,CAAC,CAAU,EAAE,GAAuB;IACtE,MAAM,KAAK,GAAG,GAAG,CAAC,SAAS,CAAC;IAC5B,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;IAC7B,KAAK,CAAC,KAAK,GAAG,UAAU,GAAG;QACzB,IAAI,CAAC,UAAU,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,CAAC;QAC5B,IAAI,CAAC,YAAY,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,CAAC,CAAC,CAAC,CAAC;QACjC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEzB,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,IAAI,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC;QAC7D,MAAM,qBAAqB,GACzB,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ;YACrC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACrC,MAAM,oBAAoB,GACxB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC;YAChC,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,QAAQ;YACxC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACxC,MAAM,eAAe,GAAG,qBAAqB,IAAI,oBAAoB,CAAC;QACtE,MAAM,iBAAiB,GACrB,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ;YACnC,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;QAE1C,IAAI,kBAAkB,IAAI,eAAe,IAAI,iBAAiB,EAAE;YAC9D,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAC9B,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC;YACpC,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;SAC7E;IACH,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import dayjs from 'dayjs/esm';\n\nexport function fixFirstCenturyYears(_: unknown, cls: typeof dayjs.Dayjs) {\n  const proto = cls.prototype;\n  const oldParse = proto.parse;\n  proto.parse = function (cfg) {\n    this.__lastDate = cfg?.date;\n    this.__lastFormat = cfg?.args[1];\n    oldParse.call(this, cfg);\n\n    const isProblemDateRange = this.$y >= 1900 && this.$y < 2000;\n    const isProblemStringFormat =\n      typeof this.__lastFormat === 'string' &&\n      this.__lastFormat.includes('YYYY');\n    const isProblemArrayFormat =\n      Array.isArray(this.__lastFormat) &&\n      typeof this.__lastFormat[1] === 'string' &&\n      this.__lastFormat[1].includes('YYYY');\n    const isProblemFormat = isProblemStringFormat || isProblemArrayFormat;\n    const missingParsedYear = \n      typeof this.__lastDate === 'string' &&\n      !this.__lastDate.includes(`${this.$y}`);\n    \n    if (isProblemDateRange && isProblemFormat && missingParsedYear) {\n      const old = new Date(this.$d);\n      this.$d.setFullYear(this.$y - 1900);\n      this.init();\n      console.log('fixed year', this.__lastDate, this.__lastFormat, old, this.$d);\n    }\n  };\n}"]}

package/dist/src/dayjs/fix-two-digit-dates.d.ts

@@ -0,0 +1,2 @@
+import dayjs from 'dayjs/esm';
+export declare function fixFirstCenturyYears(_: unknown, cls: typeof dayjs.Dayjs): void;

package/dist/src/dayjs/fix-two-digit-dates.js

@@ -0,0 +1,25 @@
+export function fixFirstCenturyYears(_, cls) {
+    const proto = cls.prototype;
+    const oldParse = proto.parse;
+    proto.parse = function (cfg) {
+        this.__lastDate = cfg === null || cfg === void 0 ? void 0 : cfg.date;
+        this.__lastFormat = cfg === null || cfg === void 0 ? void 0 : cfg.args[1];
+        oldParse.call(this, cfg);
+        const isProblemDateRange = this.$y >= 1900 && this.$y < 2000;
+        const isProblemStringFormat = typeof this.__lastFormat === 'string' &&
+            this.__lastFormat.includes('YYYY');
+        const isProblemArrayFormat = Array.isArray(this.__lastFormat) &&
+            typeof this.__lastFormat[1] === 'string' &&
+            this.__lastFormat[1].includes('YYYY');
+        const isProblemFormat = isProblemStringFormat || isProblemArrayFormat;
+        const missingParsedYear = typeof this.__lastDate === 'string' &&
+            !this.__lastDate.includes(`${this.$y}`);
+        if (isProblemDateRange && isProblemFormat && missingParsedYear) {
+            const old = new Date(this.$d);
+            this.$d.setFullYear(this.$y - 1900);
+            this.init();
+            console.log('fixed year', this.__lastDate, this.__lastFormat, old, this.$d);
+        }
+    };
+}
+//# sourceMappingURL=fix-two-digit-dates.js.map

package/dist/src/dayjs/fix-two-digit-dates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fix-two-digit-dates.js","sourceRoot":"","sources":["../../../src/dayjs/fix-two-digit-dates.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,oBAAoB,CAAC,CAAU,EAAE,GAAuB;IACtE,MAAM,KAAK,GAAG,GAAG,CAAC,SAAS,CAAC;IAC5B,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;IAC7B,KAAK,CAAC,KAAK,GAAG,UAAU,GAAG;QACzB,IAAI,CAAC,UAAU,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,CAAC;QAC5B,IAAI,CAAC,YAAY,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,CAAC,CAAC,CAAC,CAAC;QACjC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEzB,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,IAAI,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC;QAC7D,MAAM,qBAAqB,GACzB,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ;YACrC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACrC,MAAM,oBAAoB,GACxB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC;YAChC,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,QAAQ;YACxC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACxC,MAAM,eAAe,GAAG,qBAAqB,IAAI,oBAAoB,CAAC;QACtE,MAAM,iBAAiB,GACrB,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ;YACnC,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;QAE1C,IAAI,kBAAkB,IAAI,eAAe,IAAI,iBAAiB,EAAE;YAC9D,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAC9B,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC;YACpC,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;SAC7E;IACH,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import dayjs from 'dayjs/esm';\n\nexport function fixFirstCenturyYears(_: unknown, cls: typeof dayjs.Dayjs) {\n  const proto = cls.prototype;\n  const oldParse = proto.parse;\n  proto.parse = function (cfg) {\n    this.__lastDate = cfg?.date;\n    this.__lastFormat = cfg?.args[1];\n    oldParse.call(this, cfg);\n\n    const isProblemDateRange = this.$y >= 1900 && this.$y < 2000;\n    const isProblemStringFormat =\n      typeof this.__lastFormat === 'string' &&\n      this.__lastFormat.includes('YYYY');\n    const isProblemArrayFormat =\n      Array.isArray(this.__lastFormat) &&\n      typeof this.__lastFormat[1] === 'string' &&\n      this.__lastFormat[1].includes('YYYY');\n    const isProblemFormat = isProblemStringFormat || isProblemArrayFormat;\n    const missingParsedYear = \n      typeof this.__lastDate === 'string' &&\n      !this.__lastDate.includes(`${this.$y}`);\n    \n    if (isProblemDateRange && isProblemFormat && missingParsedYear) {\n      const old = new Date(this.$d);\n      this.$d.setFullYear(this.$y - 1900);\n      this.init();\n      console.log('fixed year', this.__lastDate, this.__lastFormat, old, this.$d);\n    }\n  };\n}"]}

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

@@ -16,7 +16,17 @@ export declare class HistogramDateRange extends LitElement {
     bins: number[];
     /** If true, update events will not be canceled by the date inputs receiving focus */
     updateWhileFocused: boolean;
-    /** What interval bins should be rounded to for display */
+    /**
+     * 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.
+     */
     binSnapping: BinSnappingInterval;
     private _tooltipOffset;
     private _tooltipContent?;
@@ -76,7 +86,8 @@ export declare class HistogramDateRange extends LitElement {
      */
     private get snapInterval();
     /**
-     * Offset added to the end of each bin to ensure disjoin intervals, if applicable.
+     * Offset added to the end of each bin to ensure disjoint intervals,
+     * depending on whether snapping is enabled and there are multiple bins.
      */
     private get snapEndOffset();
     /**

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

@@ -2,10 +2,13 @@ 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;
@@ -51,7 +54,17 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         this.bins = [];
         /** If true, update events will not be canceled by the date inputs receiving focus */
         this.updateWhileFocused = false;
-        /** What interval bins should be rounded to for display */
+        /**
+         * 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;
@@ -141,7 +154,8 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         }
         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_.
+        // 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;
@@ -166,11 +180,16 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
      * while dates past the 15th are rounded up.
      */
     snapToMonth(timestamp) {
-        const d = new Date(timestamp);
-        const [year, month, day] = [d.getFullYear(), d.getMonth(), d.getDate()];
-        return day < 16 // Obviously only an approximation, but good enough for snapping
-            ? new Date(year, month, 1).getTime()
-            : new Date(year, month + 1, 1).getTime();
+        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,
@@ -178,11 +197,17 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
      * July or later are rounded up.
      */
     snapToYear(timestamp) {
-        const d = new Date(timestamp);
-        const [year, month] = [d.getFullYear(), d.getMonth()];
-        return month < 6 // NB: months are 0-indexed, so 6 = July
-            ? new Date(year, 0, 1).getTime()
-            : new Date(year + 1, 0, 1).getTime();
+        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.
@@ -196,6 +221,7 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
                 return this.snapToMonth(timestamp);
             case 'none':
             default:
+                // We still align it to second boundaries to resolve minor discrepancies
                 return this.snapToNextSecond(timestamp);
         }
     }
@@ -263,7 +289,8 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         }
     }
     /**
-     * Offset added to the end of each bin to ensure disjoin intervals, if applicable.
+     * 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;
@@ -273,8 +300,8 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
      * Falls back to `dateFormat` if not provided.
      */
     get tooltipDateFormat() {
-        var _a, _b;
-        return (_b = (_a = this._tooltipDateFormat) !== null && _a !== void 0 ? _a : this.dateFormat) !== null && _b !== void 0 ? _b : DATE_FORMAT;
+        var _a;
+        return (_a = this._tooltipDateFormat) !== null && _a !== void 0 ? _a : this.dateFormat;
     }
     set tooltipDateFormat(value) {
         this._tooltipDateFormat = value;
@@ -578,13 +605,16 @@ 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;
+        const sliderClasses = classMap({
+            slider: true,
+            draggable: !this.disabled,
+            dragging: this._isDragging,
+        });
         return svg `
     <svg
-      id="${id}"
-      class="
-      ${this.disabled ? '' : 'draggable'}
-      ${this._isDragging ? 'dragging' : ''}"
-      @pointerdown="${this.drag}"
+      id=${id}
+      class=${sliderClasses}
+      @pointerdown=${this.drag}
     >
       <path d="${sliderShape} z" fill="${sliderColor}" />
       <rect
@@ -668,9 +698,12 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         }
         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 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);
     }
@@ -684,13 +717,13 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         return html `
       <input
         id="date-min"
-        placeholder="${this.dateFormat}"
+        placeholder=${this.dateFormat}
         type="text"
-        @focus="${this.handleInputFocus}"
-        @blur="${this.handleMinDateInput}"
-        @keyup="${this.handleKeyUp}"
-        .value="${live(this.minSelectedDate)}"
-        ?disabled="${this.disabled}"
+        @focus=${this.handleInputFocus}
+        @blur=${this.handleMinDateInput}
+        @keyup=${this.handleKeyUp}
+        .value=${live(this.minSelectedDate)}
+        ?disabled=${this.disabled}
       />
     `;
     }
@@ -698,13 +731,13 @@ let HistogramDateRange = class HistogramDateRange extends LitElement {
         return html `
       <input
         id="date-max"
-        placeholder="${this.dateFormat}"
+        placeholder=${this.dateFormat}
         type="text"
-        @focus="${this.handleInputFocus}"
-        @blur="${this.handleMaxDateInput}"
-        @keyup="${this.handleKeyUp}"
-        .value="${live(this.maxSelectedDate)}"
-        ?disabled="${this.disabled}"
+        @focus=${this.handleInputFocus}
+        @blur=${this.handleMaxDateInput}
+        @keyup=${this.handleKeyUp}
+        .value=${live(this.maxSelectedDate)}
+        ?disabled=${this.disabled}
       />
     `;
     }
@@ -854,6 +887,9 @@ HistogramDateRange.styles = css `
         transparent;
     }
     /****** slider ********/
+    .slider {
+      shape-rendering: crispEdges; /* So the slider doesn't get blurry if dragged between pixels */
+    }
     .draggable:hover {
       cursor: grab;
     }