@internetarchive/histogram-date-range 1.4.1-alpha1 → 1.4.2-alpha-webdev8495.0

package/snowpack.config.js

@@ -1,10 +1,10 @@
-module.exports = {
-  buildOptions: {
-    out: 'docs',
-  },
-  mount: {
-    'demo/js': { url: '/dist/demo/js' },
-    demo: { url: '/demo' },
-    src: { url: '/dist/src' },
-  },
-};
+module.exports = {
+  buildOptions: {
+    out: 'docs',
+  },
+  mount: {
+    'demo/js': { url: '/dist/demo/js' },
+    demo: { url: '/demo' },
+    src: { url: '/dist/src' },
+  },
+};

package/src/histogram-date-range.ts

@@ -204,7 +204,6 @@ export class HistogramDateRange extends LitElement {
       ) + this.snapEndOffset;
 
     this._binWidth = this._histWidth / this._numBins;
-    this._previousDateRange = this.currentDateRangeString;
     this._histData = this.calculateHistData();
     this.minSelectedDate = this.minSelectedDate
       ? this.minSelectedDate
@@ -984,22 +983,18 @@ export class HistogramDateRange extends LitElement {
     `;
   }
 
-  private get histogramAccessibility(): TemplateResult {
-    let rangeText: string;
+  private get histogramAccessibilityTemplate(): TemplateResult {
+    let rangeText: string = '';
     if (this.minSelectedDate && this.maxSelectedDate) {
-      rangeText = `from ${this.minSelectedDate} to ${this.maxSelectedDate}`;
+      rangeText = ` from ${this.minSelectedDate} to ${this.maxSelectedDate}`;
     } else if (this.minSelectedDate) {
-      rangeText = `from ${this.minSelectedDate}`;
+      rangeText = ` from ${this.minSelectedDate}`;
     } else if (this.maxSelectedDate) {
-      rangeText = `up to ${this.maxSelectedDate}`;
-    } else {
-      rangeText = 'for all available dates';
+      rangeText = ` up to ${this.maxSelectedDate}`;
     }
 
-    const titleText = `Filter results distribution ${rangeText}`;
-
-    const descText =
-      `This chart shows the distribution of search results ${rangeText}. The bars represent result counts for each time period within the selected date range.`.trim();
+    const titleText = `Filter results for dates${rangeText}`;
+    const descText = `This histogram shows the distribution of dates${rangeText}`;
 
     return html`<title id="histogram-title">${titleText}</title
       ><desc id="histogram-desc">${descText}</desc>`;
@@ -1169,7 +1164,7 @@ export class HistogramDateRange extends LitElement {
             aria-labelledby="histogram-title histogram-desc"
             @pointerleave="${this.drop}"
           >
-            ${this.histogramAccessibility} ${this.selectedRangeTemplate}
+            ${this.histogramAccessibilityTemplate} ${this.selectedRangeTemplate}
             <svg id="histogram">${this.histogramTemplate}</svg>
             ${this.minSliderTemplate} ${this.maxSliderTemplate}
           </svg>

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

@@ -436,6 +436,25 @@ describe('HistogramDateRange', () => {
     expect(eventCount).to.equal(1); // only one event was fired
   });
 
+  it('emits a custom event when sliders are dragged to a new range', async () => {
+    const el = await createCustomElementInHTMLContainer();
+    el.updateDelay = 0;
+    await el.updateComplete;
+
+    const minSlider = el.shadowRoot?.querySelector('#slider-min') as SVGElement;
+
+    const updateEventPromise = oneEvent(el, 'histogramDateRangeUpdated');
+
+    // simulate dragging the min slider to the right and releasing
+    minSlider.dispatchEvent(new PointerEvent('pointerdown'));
+    window.dispatchEvent(new PointerEvent('pointermove', { clientX: 75 }));
+    window.dispatchEvent(new PointerEvent('pointerup'));
+
+    const { detail } = await updateEventPromise;
+    expect(detail.minDate).to.equal('5/21/1950');
+    expect(detail.maxDate).to.equal('12/4/2020');
+  });
+
   it('shows/hides tooltip when hovering over (or pointing at) a bar', async () => {
     const el = await createCustomElementInHTMLContainer();
     // include a number which will require commas (1,000,000)
@@ -1003,7 +1022,7 @@ describe('HistogramDateRange', () => {
     );
     const svg = el.shadowRoot?.querySelector('svg') as SVGElement;
     expect(svg.querySelector('title')?.textContent).to.equal(
-      'Filter results distribution from 1900 to 2020'
+      'Filter results for dates from 1900 to 2020'
     );
   });
 
@@ -1016,7 +1035,7 @@ describe('HistogramDateRange', () => {
     );
     const svg = el.shadowRoot?.querySelector('svg') as SVGElement;
     expect(svg.querySelector('title')?.textContent).to.equal(
-      'Filter results distribution from 1900'
+      'Filter results for dates from 1900'
     );
   });
 
@@ -1029,7 +1048,7 @@ describe('HistogramDateRange', () => {
     );
     const svg = el.shadowRoot?.querySelector('svg') as SVGElement;
     expect(svg.querySelector('title')?.textContent).to.equal(
-      'Filter results distribution up to 2020'
+      'Filter results for dates up to 2020'
     );
   });
 
@@ -1041,19 +1060,20 @@ describe('HistogramDateRange', () => {
     );
     const svg = el.shadowRoot?.querySelector('svg') as SVGElement;
     expect(svg.querySelector('title')?.textContent).to.equal(
-      'Filter results distribution for all available dates'
+      'Filter results for dates'
     );
   });
 
   it('SVG accessibility - dynamic desc', async () => {
     const el = await fixture<HistogramDateRange>(
       html`
-        <histogram-date-range .bins=${[33, 1, 100]}> </histogram-date-range>
+        <histogram-date-range maxDate="2020" .bins=${[33, 1, 100]}>
+        </histogram-date-range>
       `
     );
     const svg = el.shadowRoot?.querySelector('svg') as SVGElement;
     expect(svg.querySelector('desc')?.textContent).to.equal(
-      'This chart shows the distribution of search results for all available dates. The bars represent result counts for each time period within the selected date range.'
+      'This histogram shows the distribution of dates up to 2020'
     );
   });
 });

package/tsconfig.json

@@ -1,21 +1,21 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true
-  },
-  "include": ["**/*.ts"],
-  "exclude": ["node_modules", "dist"]
-}
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}

package/web-dev-server.config.mjs

@@ -1,28 +1,28 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  nodeResolve: true,
-  open: '/demo/',
-  watch: !hmr,
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  /** Confgure bare import resolve plugin */
-  // nodeResolve: {
-  //   exportConditions: ['browser', 'development']
-  // },
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  nodeResolve: true,
+  open: '/demo/',
+  watch: !hmr,
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  /** Confgure bare import resolve plugin */
+  // nodeResolve: {
+  //   exportConditions: ['browser', 'development']
+  // },
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.mjs

@@ -1,29 +1,29 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  files: 'dist/test/**/*.test.js',
-  nodeResolve: true,
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Confgure bare import resolve plugin */
-  // nodeResolve: {
-  //   exportConditions: ['browser', 'development']
-  // },
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  files: 'dist/test/**/*.test.js',
+  nodeResolve: true,
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Confgure bare import resolve plugin */
+  // nodeResolve: {
+  //   exportConditions: ['browser', 'development']
+  // },
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});