@internetarchive/histogram-date-range 0.1.3-alpha → 0.1.6

package/dist/src/HistogramDateRange.js

@@ -1,447 +0,0 @@
-import { __decorate } from "tslib";
-import { html, svg, css, internalProperty, LitElement, property, query, } from 'lit-element';
-import dayjs from 'dayjs/esm/index.js';
-// these values can be overridden via the component's HTML (camelCased) attributes
-const WIDTH = 180;
-const HEIGHT = 40;
-const SLIDER_WIDTH = 10;
-const TOOLTIP_WIDTH = 125;
-const TOOLTIP_HEIGHT = 30;
-const DATE_FORMAT = 'M/D/YYYY';
-// 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 = 'var(--histogramDateRangeSliderFill, #4B65FE)';
-const selectedRangeFill = 'var(--histogramDateRangeSelectedRangeFill, #DBE0FF)';
-const barIncludedFill = 'var(--histogramDateRangeBarIncludedFill, #2C2C2C)';
-const barExcludedFill = 'var(--histogramDateRangeBarExcludedFill, #CCCCCC)';
-const inputBorder = css `var(--histogramDateRangeInputBorder, 0.5px solid #2C2C2C)`;
-const inputWidth = css `var(--histogramDateRangeInputWidth, 70px)`;
-const inputFontSize = css `var(--histogramDateRangeInputFontSize, 1.2rem)`;
-const tooltipBackgroundColor = css `var(--histogramDateRangeTooltipBackgroundColor, #2C2C2C)`;
-const tooltipTextColor = css `var(--histogramDateRangeTooltipTextColor, #FFFFFF)`;
-const tooltipFontSize = css `var(--histogramDateRangeTooltipFontSize, 1.1rem)`;
-export class HistogramDateRange extends LitElement {
-    constructor() {
-        /* eslint-disable lines-between-class-members */
-        super(...arguments);
-        // these properties are intended to be passed in as attributes
-        this.width = WIDTH;
-        this.height = HEIGHT;
-        this.sliderWidth = SLIDER_WIDTH;
-        this.tooltipWidth = TOOLTIP_WIDTH;
-        this.tooltipHeight = TOOLTIP_HEIGHT;
-        this.dateFormat = DATE_FORMAT;
-        this.minSliderX = 0;
-        this.maxSliderX = 0;
-        this.tooltipOffset = 0;
-        this.tooltipContent = '';
-        this.tooltipDisplay = 'none';
-        // these properties don't need to be tracked for changes
-        this._minDate = 0;
-        this._maxDate = 0;
-        this._dragOffset = 0;
-        this._histWidth = 0;
-        this._numBins = 0;
-        this._binWidth = 0;
-        this._histData = [];
-        // use arrow functions (rather than standard JS class instance methods) so
-        // that `this` is bound to the histogramDateRange object and not the event
-        // target. for more info see
-        // https://lit-element.polymer-project.org/guide/events#using-this-in-event-listeners
-        this.drag = (e) => {
-            // prevent selecting text or other ranges while dragging, especially in Safari
-            e.preventDefault();
-            this.setDragOffset(e);
-            this.container.classList.add('dragging');
-            window.addEventListener('pointermove', this.move);
-            window.addEventListener('pointerup', this.drop);
-            window.addEventListener('pointercancel', this.drop);
-        };
-        this.drop = () => {
-            this.container.classList.remove('dragging');
-            window.removeEventListener('pointermove', this.move);
-            window.removeEventListener('pointerup', this.drop);
-            window.removeEventListener('pointercancel', this.drop);
-        };
-        this.move = (e) => {
-            const newX = e.offsetX - this._dragOffset;
-            const slider = this._currentSlider;
-            return slider.id === 'slider-min'
-                ? this.setMinSlider(newX)
-                : this.setMaxSlider(newX);
-        };
-    }
-    /* eslint-enable lines-between-class-members */
-    firstUpdated() {
-        var _a, _b, _c, _d, _e;
-        this.minSliderX = this.sliderWidth;
-        this.maxSliderX = this.width - this.sliderWidth;
-        this._minDate = dayjs((_a = this.data) === null || _a === void 0 ? void 0 : _a.minDate).valueOf();
-        this._maxDate = dayjs((_b = this.data) === null || _b === void 0 ? void 0 : _b.maxDate).valueOf();
-        this._histWidth = this.width - this.sliderWidth * 2;
-        this._numBins = (_e = (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.bins) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 1;
-        this._binWidth = this._histWidth / this._numBins;
-        this._histData = this.generateHistData();
-    }
-    generateHistData() {
-        if (!this.data) {
-            return [];
-        }
-        const minValue = Math.min(...this.data.bins);
-        const maxValue = Math.max(...this.data.bins);
-        const valueScale = this.height / Math.log1p(maxValue - minValue);
-        const dateScale = this.dateRange / this._numBins;
-        return this.data.bins.map((v, i) => {
-            return {
-                value: v,
-                height: Math.floor(Math.log1p(v) * valueScale),
-                binStart: `${dayjs(i * dateScale + this._minDate).format(this.dateFormat)}`,
-                binEnd: `${dayjs((i + 1) * dateScale + this._minDate).format(this.dateFormat)}`,
-            };
-        });
-    }
-    get dateRange() {
-        return this._maxDate - this._minDate;
-    }
-    showTooltip(e) {
-        if (Array.from(this.container.classList).includes('dragging')) {
-            return;
-        }
-        const target = e.currentTarget;
-        const x = target.x.baseVal.value + this.sliderWidth / 2;
-        const data = target.dataset;
-        const itemsText = `item${data.numItems !== '1' ? 's' : ''}`;
-        this.tooltipOffset =
-            x + (this._binWidth - this.sliderWidth - this.tooltipWidth) / 2;
-        this.tooltipContent = html `
-      ${data.numItems} ${itemsText}<br />
-      ${data.binStart} - ${data.binEnd}
-    `;
-        this.tooltipDisplay = 'block';
-    }
-    hideTooltip() {
-        this.tooltipContent = '';
-        this.tooltipDisplay = 'none';
-    }
-    // find position of pointer in relation to the current slider
-    setDragOffset(e) {
-        this._currentSlider = e.currentTarget;
-        const sliderX = this._currentSlider.id === 'slider-min'
-            ? this.minSliderX
-            : this.maxSliderX;
-        this._dragOffset = e.offsetX - sliderX;
-        // work around Firefox issue where e.offsetX seems to be not based on current
-        // element but on background element
-        if (this._dragOffset > this.sliderWidth ||
-            this._dragOffset < -this.sliderWidth) {
-            this._dragOffset = 0;
-        }
-    }
-    setMinSlider(newX) {
-        const toSet = Math.max(newX, this.sliderWidth);
-        this.minSliderX = Math.min(toSet, this.maxSliderX);
-    }
-    setMaxSlider(newX) {
-        const toSet = Math.max(newX, this.minSliderX);
-        this.maxSliderX = Math.min(toSet, this.width - this.sliderWidth);
-    }
-    translatePositionToDate(x) {
-        const milliseconds = ((x - this.sliderWidth) * this.dateRange) / this._histWidth;
-        const date = dayjs(this._minDate + milliseconds);
-        return date.format(this.dateFormat);
-    }
-    translateDateToPosition(date) {
-        const milliseconds = dayjs(date).valueOf();
-        if (!milliseconds) {
-            return null;
-        }
-        // translate where we are within the date range into what the new x-position
-        // of the slider should be
-        return (this.sliderWidth +
-            ((milliseconds - this._minDate) * this._histWidth) / this.dateRange);
-    }
-    handleMinDateInput(e) {
-        const target = e.currentTarget;
-        const newX = this.translateDateToPosition(target.value);
-        if (newX) {
-            this.setMinSlider(newX);
-        }
-        target.value = this.minInputValue;
-    }
-    handleMaxDateInput(e) {
-        const target = e.currentTarget;
-        const newX = this.translateDateToPosition(target.value);
-        if (newX) {
-            this.setMaxSlider(newX);
-        }
-        target.value = this.maxInputValue;
-    }
-    get minInputValue() {
-        return this.translatePositionToDate(this.minSliderX);
-    }
-    get maxInputValue() {
-        return this.translatePositionToDate(this.maxSliderX);
-    }
-    get minSliderTemplate() {
-        // width/height in pixels of curved part of the sliders (like
-        // 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 c = SLIDER_CORNER_SIZE;
-        const sliderShape = `
-            M${this.minSliderX},0
-            h-${this.sliderWidth - c}
-            q-${c},0 -${c},${c}
-            v${this.height - c * 2}
-            q0,${c} ${c},${c}
-            h${this.sliderWidth - c}
-          `;
-        return this.generateSliderSVG(this.minSliderX, 'slider-min', sliderShape);
-    }
-    get maxSliderTemplate() {
-        const c = SLIDER_CORNER_SIZE;
-        const sliderShape = `
-            M${this.maxSliderX},0
-            h${this.sliderWidth - c}
-            q${c},0 ${c},${c}
-            v${this.height - c * 2}
-            q0,${c} -${c},${c}
-            h-${this.sliderWidth - c}
-          `;
-        return this.generateSliderSVG(this.maxSliderX, 'slider-max', sliderShape);
-    }
-    generateSliderSVG(sliderPositionX, id, sliderShape) {
-        // 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}"
-      @pointerdown="${this.drag}"
-    >
-      <path d="${sliderShape} z" fill="${sliderFill}" />
-      <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="${selectedRangeFill}"
-      />`;
-    }
-    get histogramTemplate() {
-        const xScale = this._histWidth / this._numBins;
-        const barWidth = xScale - 1;
-        let x = this.sliderWidth; // start at the left edge of the histogram
-        return this._histData.map(data => {
-            const bar = svg `
-        <rect
-          class="bar"
-          x="${x}"
-          y="${this.height - data.height}"
-          width="${barWidth}"
-          height="${data.height}"
-          @pointerenter="${this.showTooltip}"
-          @pointerleave="${this.hideTooltip}"
-          fill="${x >= this.minSliderX && x <= this.maxSliderX
-                ? barIncludedFill
-                : barExcludedFill}"
-          data-num-items="${data.value}"
-          data-bin-start="${data.binStart}"
-          data-bin-end="${data.binEnd}"
-        />`;
-            x += xScale;
-            return bar;
-        });
-    }
-    get minInputTemplate() {
-        return html `
-      <input
-        id="date-min"
-        placeholder="${DATE_FORMAT}"
-        type="text"
-        @change="${this.handleMinDateInput}"
-        .value="${this.minInputValue}"
-      />
-    `;
-    }
-    get maxInputTemplate() {
-        return html `
-      <input
-        id="date-max"
-        placeholder="${DATE_FORMAT}"
-        type="text"
-        @change="${this.handleMaxDateInput}"
-        .value="${this.maxInputValue}"
-      />
-    `;
-    }
-    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.tooltipDisplay};
-        }
-        #tooltip:after {
-          left: ${this.tooltipWidth / 2}px;
-        }
-      </style>
-      <div id="tooltip">${this.tooltipContent}</div>
-    `;
-    }
-    render() {
-        if (!this.data || !this._histData) {
-            return html `no data`;
-        }
-        return html `
-      <div id="container" class="noselect" style="width: ${this.width}px">
-        ${this.tooltipTemplate}
-        <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.minInputTemplate}
-          <div class="dash">-</div>
-          ${this.maxInputTemplate}
-        </div>
-      </div>
-    `;
-    }
-}
-HistogramDateRange.styles = css `
-    #container {
-      margin: 0;
-      touch-action: none;
-      position: relative;
-    }
-    /* 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:hover {
-      fill-opacity: 0.7;
-    }
-    /****** histogram ********/
-    #tooltip {
-      position: absolute;
-      background: ${tooltipBackgroundColor};
-      color: ${tooltipTextColor};
-      text-align: center;
-      border-radius: 3px;
-      padding: 2px;
-      font-size: ${tooltipFontSize};
-      font-family: sans-serif;
-      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;
-    }
-    #inputs .dash {
-      position: relative;
-      bottom: -1px;
-    }
-    input {
-      width: ${inputWidth};
-      margin: 0 3px;
-      border: ${inputBorder};
-      border-radius: 2px !important;
-      text-align: center;
-      font-size: ${inputFontSize};
-    }
-  `;
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "width", void 0);
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "height", void 0);
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "sliderWidth", void 0);
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "tooltipWidth", void 0);
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "tooltipHeight", void 0);
-__decorate([
-    property({ type: String })
-], HistogramDateRange.prototype, "dateFormat", void 0);
-__decorate([
-    property({ type: Object })
-], HistogramDateRange.prototype, "data", void 0);
-__decorate([
-    internalProperty()
-], HistogramDateRange.prototype, "minSliderX", void 0);
-__decorate([
-    internalProperty()
-], HistogramDateRange.prototype, "maxSliderX", void 0);
-__decorate([
-    internalProperty()
-], HistogramDateRange.prototype, "tooltipOffset", void 0);
-__decorate([
-    internalProperty()
-], HistogramDateRange.prototype, "tooltipContent", void 0);
-__decorate([
-    internalProperty()
-], HistogramDateRange.prototype, "tooltipDisplay", void 0);
-__decorate([
-    query('#tooltip')
-], HistogramDateRange.prototype, "tooltip", void 0);
-__decorate([
-    query('#container')
-], HistogramDateRange.prototype, "container", void 0);
-//# sourceMappingURL=HistogramDateRange.js.map

package/dist/src/HistogramDateRange.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HistogramDateRange.js","sourceRoot":"","sources":["../../src/HistogramDateRange.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  html,\n  svg,\n  css,\n  internalProperty,\n  LitElement,\n  TemplateResult,\n  SVGTemplateResult,\n  property,\n  query,\n} from 'lit-element';\nimport dayjs from 'dayjs/esm/index.js';\n\n// these values can be overridden via the component's HTML (camelCased) attributes\nconst WIDTH = 180;\nconst HEIGHT = 40;\nconst SLIDER_WIDTH = 10;\nconst TOOLTIP_WIDTH = 125;\nconst TOOLTIP_HEIGHT = 30;\nconst DATE_FORMAT = 'M/D/YYYY';\n\n// this constant is not set up to be overridden\nconst SLIDER_CORNER_SIZE = 4;\n\n// these CSS custom props can be overridden from the HTML that is invoking this component\nconst sliderFill = 'var(--histogramDateRangeSliderFill, #4B65FE)';\nconst selectedRangeFill = 'var(--histogramDateRangeSelectedRangeFill, #DBE0FF)';\nconst barIncludedFill = 'var(--histogramDateRangeBarIncludedFill, #2C2C2C)';\nconst barExcludedFill = 'var(--histogramDateRangeBarExcludedFill, #CCCCCC)';\nconst inputBorder = css`var(--histogramDateRangeInputBorder, 0.5px solid #2C2C2C)`;\nconst inputWidth = css`var(--histogramDateRangeInputWidth, 70px)`;\nconst inputFontSize = css`var(--histogramDateRangeInputFontSize, 1.2rem)`;\nconst tooltipBackgroundColor = css`var(--histogramDateRangeTooltipBackgroundColor, #2C2C2C)`;\nconst tooltipTextColor = css`var(--histogramDateRangeTooltipTextColor, #FFFFFF)`;\nconst tooltipFontSize = css`var(--histogramDateRangeTooltipFontSize, 1.1rem)`;\n\ntype SliderIds = 'slider-min' | 'slider-max';\n\ninterface HistogramInputData {\n  minDate: string;\n  maxDate: string;\n  bins: number[];\n}\n\ninterface HistogramItem {\n  value: number;\n  height: number;\n  binStart: string;\n  binEnd: string;\n}\n\nexport class HistogramDateRange extends LitElement {\n  /* eslint-disable lines-between-class-members */\n\n  // these properties are intended to be passed in as attributes\n  @property({ type: Number }) width = WIDTH;\n  @property({ type: Number }) height = HEIGHT;\n  @property({ type: Number }) sliderWidth = SLIDER_WIDTH;\n  @property({ type: Number }) tooltipWidth = TOOLTIP_WIDTH;\n  @property({ type: Number }) tooltipHeight = TOOLTIP_HEIGHT;\n  @property({ type: String }) dateFormat = DATE_FORMAT;\n  @property({ type: Object }) data?: HistogramInputData;\n\n  @internalProperty() minSliderX: number = 0;\n  @internalProperty() maxSliderX: number = 0;\n  @internalProperty() tooltipOffset = 0;\n  @internalProperty() tooltipContent: TemplateResult | '' = '';\n  @internalProperty() tooltipDisplay: 'block' | 'none' = 'none';\n\n  @query('#tooltip') tooltip!: HTMLDivElement;\n  @query('#container') container!: HTMLDivElement;\n\n  // these properties don't need to be tracked for changes\n  private _minDate: number = 0;\n  private _maxDate: number = 0;\n  private _dragOffset: number = 0;\n  private _histWidth: number = 0;\n  private _numBins: number = 0;\n  private _binWidth: number = 0;\n  private _currentSlider?: SVGRectElement;\n  private _histData: HistogramItem[] = [];\n\n  /* eslint-enable lines-between-class-members */\n\n  firstUpdated(): void {\n    this.minSliderX = this.sliderWidth;\n    this.maxSliderX = this.width - this.sliderWidth;\n    this._minDate = dayjs(this.data?.minDate).valueOf();\n    this._maxDate = dayjs(this.data?.maxDate).valueOf();\n    this._histWidth = this.width - this.sliderWidth * 2;\n    this._numBins = this.data?.bins?.length ?? 1;\n    this._binWidth = this._histWidth / this._numBins;\n    this._histData = this.generateHistData();\n  }\n\n  private generateHistData(): HistogramItem[] {\n    if (!this.data) {\n      return [];\n    }\n    const minValue = Math.min(...this.data.bins);\n    const maxValue = Math.max(...this.data.bins);\n    const valueScale = this.height / Math.log1p(maxValue - minValue);\n    const dateScale = this.dateRange / this._numBins;\n    return this.data.bins.map((v: number, i: number) => {\n      return {\n        value: v,\n        height: Math.floor(Math.log1p(v) * valueScale),\n        binStart: `${dayjs(i * dateScale + this._minDate).format(\n          this.dateFormat\n        )}`,\n        binEnd: `${dayjs((i + 1) * dateScale + this._minDate).format(\n          this.dateFormat\n        )}`,\n      };\n    });\n  }\n\n  private get dateRange(): number {\n    return this._maxDate - this._minDate;\n  }\n\n  private showTooltip(e: PointerEvent): void {\n    if (Array.from(this.container.classList).includes('dragging')) {\n      return;\n    }\n    const target = e.currentTarget as SVGRectElement;\n    const x = target.x.baseVal.value + this.sliderWidth / 2;\n    const data = target.dataset;\n    const itemsText = `item${data.numItems !== '1' ? 's' : ''}`;\n\n    this.tooltipOffset =\n      x + (this._binWidth - this.sliderWidth - this.tooltipWidth) / 2;\n\n    this.tooltipContent = html`\n      ${data.numItems} ${itemsText}<br />\n      ${data.binStart} - ${data.binEnd}\n    `;\n    this.tooltipDisplay = 'block';\n  }\n\n  private hideTooltip(): void {\n    this.tooltipContent = '';\n    this.tooltipDisplay = 'none';\n  }\n\n  // use arrow functions (rather than standard JS class instance methods) so\n  // that `this` is bound to the histogramDateRange object and not the event\n  // target. for more info see\n  // https://lit-element.polymer-project.org/guide/events#using-this-in-event-listeners\n  private drag = (e: PointerEvent): void => {\n    // prevent selecting text or other ranges while dragging, especially in Safari\n    e.preventDefault();\n\n    this.setDragOffset(e);\n    this.container.classList.add('dragging');\n\n    window.addEventListener('pointermove', this.move);\n    window.addEventListener('pointerup', this.drop);\n    window.addEventListener('pointercancel', this.drop);\n  };\n\n  private drop = (): void => {\n    this.container.classList.remove('dragging');\n\n    window.removeEventListener('pointermove', this.move);\n    window.removeEventListener('pointerup', this.drop);\n    window.removeEventListener('pointercancel', this.drop);\n  };\n\n  private move = (e: PointerEvent): void => {\n    const newX = e.offsetX - this._dragOffset;\n    const slider = this._currentSlider as SVGRectElement;\n    return (slider.id as SliderIds) === 'slider-min'\n      ? this.setMinSlider(newX)\n      : this.setMaxSlider(newX);\n  };\n\n  // find position of pointer in relation to the current slider\n  private setDragOffset(e: PointerEvent): void {\n    this._currentSlider = e.currentTarget as SVGRectElement;\n    const sliderX =\n      (this._currentSlider.id as SliderIds) === 'slider-min'\n        ? this.minSliderX\n        : this.maxSliderX;\n    this._dragOffset = e.offsetX - sliderX;\n    // work around Firefox issue where e.offsetX seems to be not based on current\n    // element but on background element\n    if (\n      this._dragOffset > this.sliderWidth ||\n      this._dragOffset < -this.sliderWidth\n    ) {\n      this._dragOffset = 0;\n    }\n  }\n\n  private setMinSlider(newX: number): void {\n    const toSet = Math.max(newX, this.sliderWidth);\n    this.minSliderX = Math.min(toSet, this.maxSliderX);\n  }\n\n  private setMaxSlider(newX: number): void {\n    const toSet = Math.max(newX, this.minSliderX);\n    this.maxSliderX = Math.min(toSet, this.width - this.sliderWidth);\n  }\n\n  private translatePositionToDate(x: number): string {\n    const milliseconds =\n      ((x - this.sliderWidth) * this.dateRange) / this._histWidth;\n    const date = dayjs(this._minDate + milliseconds);\n    return date.format(this.dateFormat);\n  }\n\n  private translateDateToPosition(date: string): number | null {\n    const milliseconds: number | undefined = dayjs(date).valueOf();\n    if (!milliseconds) {\n      return null;\n    }\n    // translate where we are within the date range into what the new x-position\n    // of the slider should be\n    return (\n      this.sliderWidth +\n      ((milliseconds - this._minDate) * this._histWidth) / this.dateRange\n    );\n  }\n\n  private handleMinDateInput(e: InputEvent): void {\n    const target = e.currentTarget as HTMLInputElement;\n    const newX = this.translateDateToPosition(target.value);\n    if (newX) {\n      this.setMinSlider(newX);\n    }\n    target.value = this.minInputValue;\n  }\n\n  private handleMaxDateInput(e: InputEvent): void {\n    const target = e.currentTarget as HTMLInputElement;\n    const newX = this.translateDateToPosition(target.value);\n    if (newX) {\n      this.setMaxSlider(newX);\n    }\n    target.value = this.maxInputValue;\n  }\n\n  private get minInputValue() {\n    return this.translatePositionToDate(this.minSliderX);\n  }\n\n  private get maxInputValue() {\n    return this.translatePositionToDate(this.maxSliderX);\n  }\n\n  private get minSliderTemplate(): SVGTemplateResult {\n    // width/height in pixels of curved part of the sliders (like\n    // border-radius); used as part of a SVG quadratic curve. see\n    // https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#curve_commands\n    const c = SLIDER_CORNER_SIZE;\n\n    const sliderShape = `\n            M${this.minSliderX},0\n            h-${this.sliderWidth - c}\n            q-${c},0 -${c},${c}\n            v${this.height - c * 2}\n            q0,${c} ${c},${c}\n            h${this.sliderWidth - c}\n          `;\n    return this.generateSliderSVG(this.minSliderX, 'slider-min', sliderShape);\n  }\n\n  private get maxSliderTemplate(): SVGTemplateResult {\n    const c = SLIDER_CORNER_SIZE;\n    const sliderShape = `\n            M${this.maxSliderX},0\n            h${this.sliderWidth - c}\n            q${c},0 ${c},${c}\n            v${this.height - c * 2}\n            q0,${c} -${c},${c}\n            h-${this.sliderWidth - c}\n          `;\n    return this.generateSliderSVG(this.maxSliderX, 'slider-max', sliderShape);\n  }\n\n  private generateSliderSVG(\n    sliderPositionX: number,\n    id: SliderIds,\n    sliderShape: string\n  ): SVGTemplateResult {\n    // whether the curved part of the slider is facing towards the left (1), ie\n    // minimum, or facing towards the right (-1), ie maximum\n    const k = id === 'slider-min' ? 1 : -1;\n\n    return svg`\n    <svg\n      id=\"${id}\"\n      @pointerdown=\"${this.drag}\"\n    >\n      <path d=\"${sliderShape} z\" fill=\"${sliderFill}\" />\n      <rect\n        x=\"${\n          sliderPositionX - this.sliderWidth * k + this.sliderWidth * 0.4 * k\n        }\"\n        y=\"${this.height / 3}\"\n        width=\"1\"\n        height=\"${this.height / 3}\"\n        fill=\"white\"\n      />\n      <rect\n        x=\"${\n          sliderPositionX - this.sliderWidth * k + this.sliderWidth * 0.6 * k\n        }\"\n        y=\"${this.height / 3}\"\n        width=\"1\"\n        height=\"${this.height / 3}\"\n        fill=\"white\"\n      />\n    </svg>\n    `;\n  }\n\n  get selectedRangeTemplate(): SVGTemplateResult {\n    return svg`\n      <rect\n        x=\"${this.minSliderX}\"\n        y=\"0\"\n        width=\"${this.maxSliderX - this.minSliderX}\"\n        height=\"${this.height}\"\n        fill=\"${selectedRangeFill}\"\n      />`;\n  }\n\n  get histogramTemplate(): SVGTemplateResult[] {\n    const xScale = this._histWidth / this._numBins;\n    const barWidth = xScale - 1;\n    let x = this.sliderWidth; // start at the left edge of the histogram\n    return this._histData.map(data => {\n      const bar = svg`\n        <rect\n          class=\"bar\"\n          x=\"${x}\"\n          y=\"${this.height - data.height}\"\n          width=\"${barWidth}\"\n          height=\"${data.height}\"\n          @pointerenter=\"${this.showTooltip}\"\n          @pointerleave=\"${this.hideTooltip}\"\n          fill=\"${\n            x >= this.minSliderX && x <= this.maxSliderX\n              ? barIncludedFill\n              : barExcludedFill\n          }\"\n          data-num-items=\"${data.value}\"\n          data-bin-start=\"${data.binStart}\"\n          data-bin-end=\"${data.binEnd}\"\n        />`;\n      x += xScale;\n      return bar;\n    });\n  }\n\n  get minInputTemplate(): TemplateResult {\n    return html`\n      <input\n        id=\"date-min\"\n        placeholder=\"${DATE_FORMAT}\"\n        type=\"text\"\n        @change=\"${this.handleMinDateInput}\"\n        .value=\"${this.minInputValue}\"\n      />\n    `;\n  }\n\n  get maxInputTemplate(): TemplateResult {\n    return html`\n      <input\n        id=\"date-max\"\n        placeholder=\"${DATE_FORMAT}\"\n        type=\"text\"\n        @change=\"${this.handleMaxDateInput}\"\n        .value=\"${this.maxInputValue}\"\n      />\n    `;\n  }\n\n  get tooltipTemplate(): TemplateResult {\n    return html`\n      <style>\n        #tooltip {\n          width: ${this.tooltipWidth}px;\n          height: ${this.tooltipHeight}px;\n          top: ${-9 - this.tooltipHeight}px;\n          left: ${this.tooltipOffset}px;\n          display: ${this.tooltipDisplay};\n        }\n        #tooltip:after {\n          left: ${this.tooltipWidth / 2}px;\n        }\n      </style>\n      <div id=\"tooltip\">${this.tooltipContent}</div>\n    `;\n  }\n\n  static styles = css`\n    #container {\n      margin: 0;\n      touch-action: none;\n      position: relative;\n    }\n    /* prevent selection from interfering with tooltip, especially on mobile */\n    /* https://stackoverflow.com/a/4407335/1163042 */\n    .noselect {\n      -webkit-touch-callout: none; /* iOS Safari */\n      -webkit-user-select: none; /* Safari */\n      -moz-user-select: none; /* Old versions of Firefox */\n      -ms-user-select: none; /* Internet Explorer/Edge */\n      user-select: none; /* current Chrome, Edge, Opera and Firefox */\n    }\n    .bar:hover {\n      fill-opacity: 0.7;\n    }\n    /****** histogram ********/\n    #tooltip {\n      position: absolute;\n      background: ${tooltipBackgroundColor};\n      color: ${tooltipTextColor};\n      text-align: center;\n      border-radius: 3px;\n      padding: 2px;\n      font-size: ${tooltipFontSize};\n      font-family: sans-serif;\n      touch-action: none;\n      pointer-events: none;\n    }\n    #tooltip:after {\n      content: '';\n      position: absolute;\n      margin-left: -5px;\n      top: 100%;\n      /* arrow */\n      border: 5px solid ${tooltipTextColor};\n      border-color: ${tooltipBackgroundColor} transparent transparent\n        transparent;\n    }\n    /****** slider ********/\n    .draggable:hover {\n      cursor: grab;\n    }\n    .dragging {\n      cursor: grabbing !important;\n    }\n    /****** inputs ********/\n    #inputs {\n      display: flex;\n      justify-content: center;\n    }\n    #inputs .dash {\n      position: relative;\n      bottom: -1px;\n    }\n    input {\n      width: ${inputWidth};\n      margin: 0 3px;\n      border: ${inputBorder};\n      border-radius: 2px !important;\n      text-align: center;\n      font-size: ${inputFontSize};\n    }\n  `;\n\n  render(): TemplateResult {\n    if (!this.data || !this._histData) {\n      return html`no data`;\n    }\n    return html`\n      <div id=\"container\" class=\"noselect\" style=\"width: ${this.width}px\">\n        ${this.tooltipTemplate}\n        <svg\n          width=\"${this.width}\"\n          height=\"${this.height}\"\n          @pointerleave=\"${this.drop}\"\n        >\n          ${this.selectedRangeTemplate}\n          <svg id=\"histogram\">${this.histogramTemplate}</svg>\n          ${this.minSliderTemplate} ${this.maxSliderTemplate}\n        </svg>\n        <div id=\"inputs\">\n          ${this.minInputTemplate}\n          <div class=\"dash\">-</div>\n          ${this.maxInputTemplate}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}