@internetarchive/histogram-date-range 1.4.0-alpha-webdev7756.1 → 1.4.1-alpha1

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

@@ -984,6 +984,27 @@ export class HistogramDateRange extends LitElement {
     `;
   }
 
+  private get histogramAccessibility(): TemplateResult {
+    let rangeText: string;
+    if (this.minSelectedDate && this.maxSelectedDate) {
+      rangeText = `from ${this.minSelectedDate} to ${this.maxSelectedDate}`;
+    } else if (this.minSelectedDate) {
+      rangeText = `from ${this.minSelectedDate}`;
+    } else if (this.maxSelectedDate) {
+      rangeText = `up to ${this.maxSelectedDate}`;
+    } else {
+      rangeText = 'for all available dates';
+    }
+
+    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();
+
+    return html`<title id="histogram-title">${titleText}</title
+      ><desc id="histogram-desc">${descText}</desc>`;
+  }
+
   private get noDataTemplate(): TemplateResult {
     return html`
       <div class="missing-data-message">${this.missingDataMessage}</div>
@@ -1145,9 +1166,10 @@ export class HistogramDateRange extends LitElement {
           <svg
             width="${this.width}"
             height="${this.height}"
+            aria-labelledby="histogram-title histogram-desc"
             @pointerleave="${this.drop}"
           >
-            ${this.selectedRangeTemplate}
+            ${this.histogramAccessibility} ${this.selectedRangeTemplate}
             <svg id="histogram">${this.histogramTemplate}</svg>
             ${this.minSliderTemplate} ${this.maxSliderTemplate}
           </svg>

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

@@ -989,4 +989,71 @@ describe('HistogramDateRange', () => {
     ) as HTMLInputElement;
     expect(maxDateInput.value).to.eq('2019');
   });
+
+  it('SVG accessbility - dynamic title for MIN and MAX date', async () => {
+    const el = await fixture<HistogramDateRange>(
+      html`
+        <histogram-date-range
+          minDate="1900"
+          maxDate="2020"
+          .bins=${[33, 1, 100]}
+        >
+        </histogram-date-range>
+      `
+    );
+    const svg = el.shadowRoot?.querySelector('svg') as SVGElement;
+    expect(svg.querySelector('title')?.textContent).to.equal(
+      'Filter results distribution from 1900 to 2020'
+    );
+  });
+
+  it('SVG accessbility - dynamic title for MIN date', async () => {
+    const el = await fixture<HistogramDateRange>(
+      html`
+        <histogram-date-range minDate="1900" .bins=${[33, 1, 100]}>
+        </histogram-date-range>
+      `
+    );
+    const svg = el.shadowRoot?.querySelector('svg') as SVGElement;
+    expect(svg.querySelector('title')?.textContent).to.equal(
+      'Filter results distribution from 1900'
+    );
+  });
+
+  it('SVG accessbility - dynamic title for MAX date', async () => {
+    const el = await fixture<HistogramDateRange>(
+      html`
+        <histogram-date-range maxDate="2020" .bins=${[33, 1, 100]}>
+        </histogram-date-range>
+      `
+    );
+    const svg = el.shadowRoot?.querySelector('svg') as SVGElement;
+    expect(svg.querySelector('title')?.textContent).to.equal(
+      'Filter results distribution up to 2020'
+    );
+  });
+
+  it('SVG accessbility - dynamic title for all dates', async () => {
+    const el = await fixture<HistogramDateRange>(
+      html`
+        <histogram-date-range .bins=${[33, 1, 100]}> </histogram-date-range>
+      `
+    );
+    const svg = el.shadowRoot?.querySelector('svg') as SVGElement;
+    expect(svg.querySelector('title')?.textContent).to.equal(
+      'Filter results distribution for all available dates'
+    );
+  });
+
+  it('SVG accessibility - dynamic desc', async () => {
+    const el = await fixture<HistogramDateRange>(
+      html`
+        <histogram-date-range .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.'
+    );
+  });
 });

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
+});

package/dist/demo/js/list-histogram-wrapper.d.ts

@@ -1,20 +0,0 @@
-import { LitElement, TemplateResult } from 'lit';
-import '../../src/histogram-date-range';
-interface DataSource {
-    minDate: unknown;
-    maxDate: unknown;
-    minSelectedDate: unknown;
-    maxSelectedDate: unknown;
-    bins: number[];
-    barScalingFunction?: (input: number) => number;
-}
-/**
- * This is mainly to test the histogram-date-range within
- * a lit-element.
- */
-export declare class LitHistogramWrapper extends LitElement {
-    dataSource: DataSource;
-    render(): TemplateResult;
-    private randomize;
-}
-export {};

package/dist/demo/js/list-histogram-wrapper.js

@@ -1,59 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html, nothing } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import '../../src/histogram-date-range';
-/**
- * This is mainly to test the histogram-date-range within
- * a lit-element.
- */
-let LitHistogramWrapper = class LitHistogramWrapper extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.dataSource = {
-            minDate: 1955,
-            maxDate: 2000,
-            minSelectedDate: 1955,
-            maxSelectedDate: 2000,
-            bins: [
-                1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
-            ],
-        };
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        return html `
-      <histogram-date-range
-        .minDate=${(_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.minDate}
-        .maxDate=${(_b = this.dataSource) === null || _b === void 0 ? void 0 : _b.maxDate}
-        .minSelectedDate=${(_c = this.dataSource) === null || _c === void 0 ? void 0 : _c.minSelectedDate}
-        .maxSelectedDate=${(_d = this.dataSource) === null || _d === void 0 ? void 0 : _d.maxSelectedDate}
-        .updateDelay=${1000}
-        .bins=${(_e = this.dataSource) === null || _e === void 0 ? void 0 : _e.bins}
-        .barScalingFunction=${(_g = (_f = this.dataSource) === null || _f === void 0 ? void 0 : _f.barScalingFunction) !== null && _g !== void 0 ? _g : nothing}
-      ></histogram-date-range>
-
-      <button @click=${this.randomize}>Randomize</button>
-    `;
-    }
-    randomize() {
-        const minDate = Math.round(Math.random() * 1000);
-        const maxDate = minDate + Math.round(Math.random() * 1000);
-        // generate random bins
-        const bins = Array.from({ length: 20 }, () => Math.floor(Math.random() * minDate));
-        this.dataSource = {
-            minDate,
-            maxDate,
-            minSelectedDate: minDate,
-            maxSelectedDate: maxDate,
-            bins: bins,
-        };
-    }
-};
-__decorate([
-    state()
-], LitHistogramWrapper.prototype, "dataSource", void 0);
-LitHistogramWrapper = __decorate([
-    customElement('lit-histogram-wrapper')
-], LitHistogramWrapper);
-export { LitHistogramWrapper };
-//# sourceMappingURL=list-histogram-wrapper.js.map

package/dist/demo/js/list-histogram-wrapper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"list-histogram-wrapper.js","sourceRoot":"","sources":["../../../demo/js/list-histogram-wrapper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,gCAAgC,CAAC;AAWxC;;;GAGG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QACI,eAAU,GAAe;YAChC,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,IAAI;YACrB,eAAe,EAAE,IAAI;YACrB,IAAI,EAAE;gBACJ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;aACtE;SACF,CAAC;IAiCJ,CAAC;IA/BC,MAAM;;QACJ,OAAO,IAAI,CAAA;;mBAEI,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;mBACxB,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;2BAChB,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;2BAChC,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;uBACpC,IAAI;gBACX,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI;8BACP,MAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,kBAAkB,mCAAI,OAAO;;;uBAGrD,IAAI,CAAC,SAAS;KAChC,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QAC3D,uBAAuB;QACvB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,CAC3C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,CACpC,CAAC;QACF,IAAI,CAAC,UAAU,GAAG;YAChB,OAAO;YACP,OAAO;YACP,eAAe,EAAE,OAAO;YACxB,eAAe,EAAE,OAAO;YACxB,IAAI,EAAE,IAAI;SACX,CAAC;IACJ,CAAC;CACF,CAAA;AAzCU;IAAR,KAAK,EAAE;uDAQN;AATS,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CA0C/B","sourcesContent":["import { LitElement, html, TemplateResult, nothing } from 'lit';\r\nimport { customElement, state } from 'lit/decorators.js';\r\nimport '../../src/histogram-date-range';\r\n\r\ninterface DataSource {\r\n  minDate: unknown;\r\n  maxDate: unknown;\r\n  minSelectedDate: unknown;\r\n  maxSelectedDate: unknown;\r\n  bins: number[];\r\n  barScalingFunction?: (input: number) => number;\r\n}\r\n\r\n/**\r\n * This is mainly to test the histogram-date-range within\r\n * a lit-element.\r\n */\r\n@customElement('lit-histogram-wrapper')\r\nexport class LitHistogramWrapper extends LitElement {\r\n  @state() dataSource: DataSource = {\r\n    minDate: 1955,\r\n    maxDate: 2000,\r\n    minSelectedDate: 1955,\r\n    maxSelectedDate: 2000,\r\n    bins: [\r\n      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\r\n    ],\r\n  };\r\n\r\n  render(): TemplateResult {\r\n    return html`\r\n      <histogram-date-range\r\n        .minDate=${this.dataSource?.minDate}\r\n        .maxDate=${this.dataSource?.maxDate}\r\n        .minSelectedDate=${this.dataSource?.minSelectedDate}\r\n        .maxSelectedDate=${this.dataSource?.maxSelectedDate}\r\n        .updateDelay=${1000}\r\n        .bins=${this.dataSource?.bins}\r\n        .barScalingFunction=${this.dataSource?.barScalingFunction ?? nothing}\r\n      ></histogram-date-range>\r\n\r\n      <button @click=${this.randomize}>Randomize</button>\r\n    `;\r\n  }\r\n\r\n  private randomize() {\r\n    const minDate = Math.round(Math.random() * 1000);\r\n    const maxDate = minDate + Math.round(Math.random() * 1000);\r\n    // generate random bins\r\n    const bins = Array.from({ length: 20 }, () =>\r\n      Math.floor(Math.random() * minDate)\r\n    );\r\n    this.dataSource = {\r\n      minDate,\r\n      maxDate,\r\n      minSelectedDate: minDate,\r\n      maxSelectedDate: maxDate,\r\n      bins: bins,\r\n    };\r\n  }\r\n}\r\n"]}

package/dist/demo/js/lit-histogram-wrapper.d.ts

@@ -1,21 +0,0 @@
-import { LitElement, TemplateResult } from 'lit';
-import '../../src/histogram-date-range';
-interface DataSource {
-    minDate: unknown;
-    maxDate: unknown;
-    minSelectedDate: unknown;
-    maxSelectedDate: unknown;
-    bins: number[];
-}
-/**
- * This is mainly to test the histogram-date-range within
- * a lit-element.
- */
-export declare class LitHistogramWrapper extends LitElement {
-    barScaling?: 'linear' | 'logarithmic';
-    dataSource: DataSource;
-    render(): TemplateResult;
-    private randomize;
-    static get styles(): import("lit").CSSResult;
-}
-export {};

package/dist/demo/js/lit-histogram-wrapper.js

@@ -1,73 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import '../../src/histogram-date-range';
-const IDENTITY_FN = (x) => x;
-/**
- * This is mainly to test the histogram-date-range within
- * a lit-element.
- */
-let LitHistogramWrapper = class LitHistogramWrapper extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.dataSource = {
-            minDate: 1955,
-            maxDate: 2000,
-            minSelectedDate: 1955,
-            maxSelectedDate: 2000,
-            bins: [
-                1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
-            ],
-        };
-    }
-    render() {
-        var _a, _b, _c, _d, _e;
-        const scalingFn = this.barScaling === 'linear' ? IDENTITY_FN : nothing;
-        return html `
-      <histogram-date-range
-        .minDate=${(_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.minDate}
-        .maxDate=${(_b = this.dataSource) === null || _b === void 0 ? void 0 : _b.maxDate}
-        .minSelectedDate=${(_c = this.dataSource) === null || _c === void 0 ? void 0 : _c.minSelectedDate}
-        .maxSelectedDate=${(_d = this.dataSource) === null || _d === void 0 ? void 0 : _d.maxSelectedDate}
-        .updateDelay=${1000}
-        .bins=${(_e = this.dataSource) === null || _e === void 0 ? void 0 : _e.bins}
-        .barScalingFunction=${scalingFn}
-      ></histogram-date-range>
-
-      <button @click=${this.randomize}>Randomize</button>
-    `;
-    }
-    randomize() {
-        const minDate = Math.round(Math.random() * 1000);
-        const maxDate = minDate + Math.round(Math.random() * 1000);
-        // generate random bins
-        const bins = Array.from({ length: 20 }, () => Math.floor(Math.random() * minDate));
-        this.dataSource = {
-            minDate,
-            maxDate,
-            minSelectedDate: minDate,
-            maxSelectedDate: maxDate,
-            bins: bins,
-        };
-    }
-    static get styles() {
-        return css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], LitHistogramWrapper.prototype, "barScaling", void 0);
-__decorate([
-    state()
-], LitHistogramWrapper.prototype, "dataSource", void 0);
-LitHistogramWrapper = __decorate([
-    customElement('lit-histogram-wrapper')
-], LitHistogramWrapper);
-export { LitHistogramWrapper };
-//# sourceMappingURL=lit-histogram-wrapper.js.map

package/dist/demo/js/lit-histogram-wrapper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"lit-histogram-wrapper.js","sourceRoot":"","sources":["../../../demo/js/lit-histogram-wrapper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,gCAAgC,CAAC;AAUxC,MAAM,WAAW,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC;AAErC;;;GAGG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QAGI,eAAU,GAAe;YAChC,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,IAAI;YACrB,eAAe,EAAE,IAAI;YACrB,IAAI,EAAE;gBACJ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;aACtE;SACF,CAAC;IA4CJ,CAAC;IA1CC,MAAM;;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC;QACvE,OAAO,IAAI,CAAA;;mBAEI,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;mBACxB,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO;2BAChB,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;2BAChC,MAAA,IAAI,CAAC,UAAU,0CAAE,eAAe;uBACpC,IAAI;gBACX,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI;8BACP,SAAS;;;uBAGhB,IAAI,CAAC,SAAS;KAChC,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;QAC3D,uBAAuB;QACvB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,CAC3C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,CACpC,CAAC;QACF,IAAI,CAAC,UAAU,GAAG;YAChB,OAAO;YACP,OAAO;YACP,eAAe,EAAE,OAAO;YACxB,eAAe,EAAE,OAAO;YACxB,IAAI,EAAE,IAAI;SACX,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;CACF,CAAA;AAtD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAuC;AAEzD;IAAR,KAAK,EAAE;uDAQN;AAXS,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CAuD/B","sourcesContent":["import { LitElement, html, css, TemplateResult, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '../../src/histogram-date-range';\n\ninterface DataSource {\n  minDate: unknown;\n  maxDate: unknown;\n  minSelectedDate: unknown;\n  maxSelectedDate: unknown;\n  bins: number[];\n}\n\nconst IDENTITY_FN = (x: number) => x;\n\n/**\n * This is mainly to test the histogram-date-range within\n * a lit-element.\n */\n@customElement('lit-histogram-wrapper')\nexport class LitHistogramWrapper extends LitElement {\n  @property({ type: String }) barScaling?: 'linear' | 'logarithmic';\n\n  @state() dataSource: DataSource = {\n    minDate: 1955,\n    maxDate: 2000,\n    minSelectedDate: 1955,\n    maxSelectedDate: 2000,\n    bins: [\n      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n    ],\n  };\n\n  render(): TemplateResult {\n    const scalingFn = this.barScaling === 'linear' ? IDENTITY_FN : nothing;\n    return html`\n      <histogram-date-range\n        .minDate=${this.dataSource?.minDate}\n        .maxDate=${this.dataSource?.maxDate}\n        .minSelectedDate=${this.dataSource?.minSelectedDate}\n        .maxSelectedDate=${this.dataSource?.maxSelectedDate}\n        .updateDelay=${1000}\n        .bins=${this.dataSource?.bins}\n        .barScalingFunction=${scalingFn}\n      ></histogram-date-range>\n\n      <button @click=${this.randomize}>Randomize</button>\n    `;\n  }\n\n  private randomize() {\n    const minDate = Math.round(Math.random() * 1000);\n    const maxDate = minDate + Math.round(Math.random() * 1000);\n    // generate random bins\n    const bins = Array.from({ length: 20 }, () =>\n      Math.floor(Math.random() * minDate)\n    );\n    this.dataSource = {\n      minDate,\n      maxDate,\n      minSelectedDate: minDate,\n      maxSelectedDate: maxDate,\n      bins: bins,\n    };\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n    `;\n  }\n}\n"]}