WEBDEV-7756 Linear scaling & updated labels for TV date histograms (#490)

* Upgrade to alpha date picker

* Add props to expanded-date-picker

* Select correct scaling fn and tooltip label based on context

* Upgrade alpha version

* Rename some props of the expanded date picker

* Simplify & clean up histogram prop logic

* Upgrade off alpha date picker

* Fix template typo

Author: latonv

package.json

@@ -26,7 +26,7 @@
     "@internetarchive/analytics-manager": "^0.1.4",
     "@internetarchive/feature-feedback": "^1.0.0",
     "@internetarchive/field-parsers": "^1.0.0",
-    "@internetarchive/histogram-date-range": "^1.3.2",
+    "@internetarchive/histogram-date-range": "^1.4.0",
     "@internetarchive/ia-activity-indicator": "^0.0.6",
     "@internetarchive/ia-dropdown": "^1.3.10",
     "@internetarchive/iaux-item-metadata": "^1.0.5",

src/collection-browser.ts

@@ -1252,7 +1252,7 @@ export class CollectionBrowser
             <h2>${msg('Filters')}</h2>
           </summary>
           ${facets}
-        </button>
+        </details>
       `;
     }
     // Otherwise, just render the facets component bare

src/collection-facets.ts

@@ -29,7 +29,10 @@ import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-f
 import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
 import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
 import type { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';
-import type { BinSnappingInterval } from '@internetarchive/histogram-date-range';
+import type {
+  BarScalingOption,
+  BinSnappingInterval,
+} from '@internetarchive/histogram-date-range';
 import chevronIcon from './assets/img/icons/chevron';
 import expandIcon from './assets/img/icons/expand';
 import {
@@ -258,23 +261,36 @@ export class CollectionFacets extends LitElement {
 
     const zeroPadMonth = (month: number) => month.toString().padStart(2, '0');
 
-    // Format the min/max dates appropriately
-    const minDate = this.isTvSearch
-      ? `${firstYear}-${zeroPadMonth(firstMonth)}`
-      : `${firstYear}`;
-
-    const maxDate = this.isTvSearch
-      ? `${lastYear}-${zeroPadMonth(lastMonth + monthInterval - 1)}`
-      : `${lastYear + yearInterval - 1}`;
+    // The date picker is configured differently for TV search, allowing month-level resolution
+    if (this.isTvSearch) {
+      // Whether the bucket interval is less than a year
+      // (i.e., requires individual months to be handled & labeled)
+      const mustHandleMonths = monthInterval < 12;
+
+      return {
+        buckets: aggregation.buckets as number[],
+        dateFormat: 'YYYY-MM',
+        tooltipDateFormat: mustHandleMonths ? 'MMM YYYY' : 'YYYY',
+        tooltipLabel: 'broadcast',
+        binSnapping: (mustHandleMonths
+          ? 'month'
+          : 'year') as BinSnappingInterval,
+        barScaling: 'linear' as BarScalingOption,
+        minDate: `${firstYear}-${zeroPadMonth(firstMonth)}`,
+        maxDate: `${lastYear}-${zeroPadMonth(lastMonth + monthInterval - 1)}`,
+      };
+    }
 
-    const hasMonths = this.isTvSearch && monthInterval < 12;
+    // All other search types use the same configuration
     return {
       buckets: aggregation.buckets as number[],
-      dateFormat: this.isTvSearch ? 'YYYY-MM' : 'YYYY',
-      tooltipDateFormat: hasMonths ? 'MMM YYYY' : 'YYYY',
-      binSnapping: (hasMonths ? 'month' : 'year') as BinSnappingInterval,
-      minDate,
-      maxDate,
+      dateFormat: 'YYYY',
+      tooltipDateFormat: 'YYYY',
+      tooltipLabel: 'item',
+      binSnapping: 'year' as BinSnappingInterval,
+      barScaling: 'logarithmic' as BarScalingOption,
+      minDate: `${firstYear}`,
+      maxDate: `${lastYear + yearInterval - 1}`,
     };
   }
 
@@ -289,7 +305,9 @@ export class CollectionFacets extends LitElement {
       buckets,
       dateFormat,
       tooltipDateFormat,
+      tooltipLabel,
       binSnapping,
+      barScaling,
       minDate,
       maxDate,
     } = histogramProps;
@@ -317,9 +335,11 @@ export class CollectionFacets extends LitElement {
         .maxDate=${maxDate}
         .minSelectedDate=${this.minSelectedDate}
         .maxSelectedDate=${this.maxSelectedDate}
-        .dateFormat=${dateFormat}
-        .tooltipDateFormat=${tooltipDateFormat}
+        .customDateFormat=${dateFormat}
+        .customTooltipDateFormat=${tooltipDateFormat}
+        .customTooltipLabel=${tooltipLabel}
         .binSnapping=${binSnapping}
+        .barScaling=${barScaling}
         .buckets=${buckets}
         .modalManager=${this.modalManager}
         .analyticsHandler=${this.analyticsHandler}
@@ -396,7 +416,9 @@ export class CollectionFacets extends LitElement {
       buckets,
       dateFormat,
       tooltipDateFormat,
+      tooltipLabel,
       binSnapping,
+      barScaling,
       minDate,
       maxDate,
     } = histogramProps;
@@ -411,7 +433,9 @@ export class CollectionFacets extends LitElement {
         .updateDelay=${100}
         .dateFormat=${dateFormat}
         .tooltipDateFormat=${tooltipDateFormat}
+        .tooltipLabel=${tooltipLabel}
         .binSnapping=${binSnapping}
+        .barScaling=${barScaling}
         .bins=${buckets}
         missingDataMessage="..."
         .width=${this.collapsableFacets && this.contentWidth

src/expanded-date-picker.ts

@@ -1,10 +1,20 @@
-import { css, html, LitElement, CSSResultGroup, TemplateResult } from 'lit';
+import {
+  css,
+  html,
+  LitElement,
+  CSSResultGroup,
+  TemplateResult,
+  nothing,
+} from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { msg } from '@lit/localize';
 import type { ModalManagerInterface } from '@internetarchive/modal-manager';
 import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
-import { BinSnappingInterval } from '@internetarchive/histogram-date-range';
+import {
+  BarScalingOption,
+  BinSnappingInterval,
+} from '@internetarchive/histogram-date-range';
 import {
   analyticsActions,
   analyticsCategories,
@@ -24,11 +34,15 @@ export class ExpandedDatePicker extends LitElement {
 
   @property({ type: Array }) buckets?: number[];
 
-  @property({ type: String }) dateFormat: string = 'YYYY';
+  @property({ type: String }) customDateFormat?: string;
+
+  @property({ type: String }) customTooltipDateFormat?: string;
+
+  @property({ type: String }) customTooltipLabel?: string;
 
-  @property({ type: String }) tooltipDateFormat?: string;
+  @property({ type: String }) binSnapping: BinSnappingInterval = 'none';
 
-  @property({ type: String }) binSnapping?: BinSnappingInterval;
+  @property({ type: String }) barScaling: BarScalingOption = 'logarithmic';
 
   @property({ type: Object, attribute: false })
   modalManager?: ModalManagerInterface;
@@ -45,9 +59,11 @@ export class ExpandedDatePicker extends LitElement {
           .maxDate=${this.maxDate}
           .minSelectedDate=${this.minSelectedDate ?? this.minDate}
           .maxSelectedDate=${this.maxSelectedDate ?? this.maxDate}
-          .dateFormat=${this.dateFormat}
-          tooltipDateFormat=${ifDefined(this.tooltipDateFormat)}
-          binSnapping=${ifDefined(this.binSnapping)}
+          dateFormat=${ifDefined(this.customDateFormat)}
+          tooltipDateFormat=${ifDefined(this.customTooltipDateFormat)}
+          tooltipLabel=${ifDefined(this.customTooltipLabel)}
+          .binSnapping=${this.binSnapping}
+          .barScaling=${this.barScaling ?? nothing}
           .updateDelay=${0}
           updateWhileFocused
           missingDataMessage="..."

yarn.lock

@@ -318,10 +318,10 @@
   resolved "https://registry.npmjs.org/@internetarchive/field-parsers/-/field-parsers-1.0.0.tgz"
   integrity sha512-cbD0FtJOjzBm7exxFrzrkHnqbmalKbEXA4i7KrwhUGBojF/QTTLAvaIRXH/bfoiTyCh6YT1/E/mULAQPdB6yvQ==
 
-"@internetarchive/histogram-date-range@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.npmjs.org/@internetarchive/histogram-date-range/-/histogram-date-range-1.3.2.tgz"
-  integrity sha512-bsKBB+A1ldTtE3cdgQBoMLKBOP4gqyfWPfw6M0ezXY9r+camFdwXoTmOvABSug68USTE4fB9TFNF8KRm5JosmQ==
+"@internetarchive/histogram-date-range@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@internetarchive/histogram-date-range/-/histogram-date-range-1.4.0.tgz#3e1a97094a988acdedad3999632a919833d935fd"
+  integrity sha512-pE7QuMHaueKjy9FXicFdBq8sjhyWgWNPfsPb5wM1qyyoeqgDRnZnlld3/yXTd8VaKM5IoZG9X8nhiPPbN6YBUA==
   dependencies:
     "@internetarchive/ia-activity-indicator" "^0.0.6"
     dayjs "^1.11.13"