@genspectrum/dashboard-components 0.6.18 → 0.7.0

package/src/web-components/input/gs-date-range-selector.stories.ts

@@ -9,29 +9,21 @@ import { type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date
 import './gs-date-range-selector';
 import '../app';
 import { toYYYYMMDD } from '../../preact/dateRangeSelector/dateConversion';
-import {
-    PRESET_VALUE_ALL_TIMES,
-    PRESET_VALUE_CUSTOM,
-    PRESET_VALUE_LAST_2_MONTHS,
-    PRESET_VALUE_LAST_2_WEEKS,
-    PRESET_VALUE_LAST_3_MONTHS,
-    PRESET_VALUE_LAST_6_MONTHS,
-    PRESET_VALUE_LAST_MONTH,
-} from '../../preact/dateRangeSelector/selectableOptions';
+import { dateRangeOptionPresets } from '../../preact/dateRangeSelector/dateRangeOption';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
 <gs-date-range-selector
-    customSelectOptions='[{ "label": "Year 2021", "dateFrom": "2021-01-01", "dateTo": "2021-12-31" }]'
+    dateRangeOptions='[{ "label": "Year 2021", "dateFrom": "2021-01-01", "dateTo": "2021-12-31" }]'
     earliestDate="1970-01-01"
-    initialValue="${PRESET_VALUE_LAST_6_MONTHS}"
+    initialValue="Year 2021"
     initialDateFrom="2020-01-01"
     initialDateTo="2021-01-01"
     width="100%"
     dateColumn="myDateColumn"
 ></gs-date-range-selector>`;
 
-const meta: Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
+const meta: Meta<Required<DateRangeSelectorProps>> = {
     title: 'Input/DateRangeSelector',
     component: 'gs-date-range-selector',
     parameters: withComponentDocs({
@@ -50,19 +42,10 @@ const meta: Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
             control: {
                 type: 'select',
             },
-            options: [
-                PRESET_VALUE_CUSTOM,
-                PRESET_VALUE_ALL_TIMES,
-                PRESET_VALUE_LAST_2_WEEKS,
-                PRESET_VALUE_LAST_MONTH,
-                PRESET_VALUE_LAST_2_MONTHS,
-                PRESET_VALUE_LAST_3_MONTHS,
-                PRESET_VALUE_LAST_6_MONTHS,
-                'CustomDateRange',
-            ],
+            options: [dateRangeOptionPresets.lastMonth.label, dateRangeOptionPresets.allTimes.label, 'CustomDateRange'],
         },
         dateColumn: { control: { type: 'text' } },
-        customSelectOptions: {
+        dateRangeOptions: {
             control: {
                 type: 'object',
             },
@@ -79,9 +62,14 @@ const meta: Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
         },
     },
     args: {
-        customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
+        dateRangeOptions: [
+            dateRangeOptionPresets.lastMonth,
+            dateRangeOptionPresets.last3Months,
+            dateRangeOptionPresets.allTimes,
+            { label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' },
+        ],
         earliestDate: '1970-01-01',
-        initialValue: PRESET_VALUE_LAST_6_MONTHS,
+        initialValue: dateRangeOptionPresets.lastMonth.label,
         dateColumn: 'aDateColumn',
         width: '100%',
         initialDateFrom: '',
@@ -92,12 +80,12 @@ const meta: Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
 
 export default meta;
 
-export const DateRangeSelectorStory: StoryObj<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
+export const DateRangeSelectorStory: StoryObj<Required<DateRangeSelectorProps>> = {
     render: (args) =>
         html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
                 <gs-date-range-selector
-                    .customSelectOptions=${args.customSelectOptions}
+                    .dateRangeOptions=${args.dateRangeOptions}
                     .earliestDate=${args.earliestDate}
                     .initialValue=${args.initialValue}
                     .initialDateFrom=${args.initialDateFrom}
@@ -112,7 +100,7 @@ export const DateRangeSelectorStory: StoryObj<Required<DateRangeSelectorProps<'C
         const dateTo = () => canvas.getByPlaceholderText('Date to');
 
         await step('Expect last 6 months to be selected', async () => {
-            await expect(canvas.getByRole('combobox')).toHaveValue('last6Months');
+            await expect(canvas.getByRole('combobox')).toHaveValue('Last month');
             await waitFor(() => {
                 expect(dateTo()).toHaveValue(toYYYYMMDD(new Date()));
             });

package/src/web-components/input/gs-date-range-selector.tsx

@@ -37,13 +37,14 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
 @customElement('gs-date-range-selector')
 export class DateRangeSelectorComponent extends PreactLitAdapter {
     /**
-     * An array of custom options that the select field should provide,
-     * in addition to the predefined options.
+     * An array of date range options that the select field should provide.
      * The `label` will be shown to the user, and it will be available as `initialValue`.
      * The dates must be in the format `YYYY-MM-DD`.
+     *
+     * If dateFrom or dateTo is not set, the component will default to the `earliestDate` or the current date.
      */
     @property({ type: Array })
-    customSelectOptions: { label: string; dateFrom: string; dateTo: string }[] = [];
+    dateRangeOptions: { label: string; dateFrom?: string; dateTo?: string }[] = [];
 
     /**
      * The `dateFrom` value to use in the `allTimes` preset in the format `YYYY-MM-DD`.
@@ -51,26 +52,18 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
     @property({ type: String })
     earliestDate: string = '1900-01-01';
 
-    // prettier-ignore
-    // The multiline union type must not start with `| 'custom'` - Storybook will list "" as the first type which is wrong
     /**
      * The initial value to use for this date range selector.
-     * Must be a valid label from the preset labels or a `label` given in the `customSelectOptions`.
+     * Must be a valid label from the `dateRangeOptions`.
      *
-     * If the value is invalid, the component will default to `'last6Months'`.
+     * If the value is not set, the component will default to the range `earliestDate` until today.
      *
      * It will be overwritten if `initialDateFrom` or `initialDateTo` is set.
+     *
+     * We provide some options in `dateRangeOptionPresets` for convenience.
      */
     @property()
-    initialValue:
-        'custom'
-        | 'allTimes'
-        | 'last2Weeks'
-        | 'lastMonth'
-        | 'last2Months'
-        | 'last3Months'
-        | 'last6Months'
-        | string = 'last6Months';
+    initialValue: string | undefined = undefined;
 
     /**
      * A date string in the format `YYYY-MM-DD`.
@@ -105,7 +98,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
     override render() {
         return (
             <DateRangeSelector
-                customSelectOptions={this.customSelectOptions}
+                dateRangeOptions={this.dateRangeOptions}
                 earliestDate={this.earliestDate}
                 initialValue={this.initialValue}
                 initialDateFrom={this.initialDateFrom}
@@ -138,30 +131,22 @@ declare global {
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type CustomSelectOptionsMatches = Expect<
-    Equals<
-        typeof DateRangeSelectorComponent.prototype.customSelectOptions,
-        DateRangeSelectorProps<string>['customSelectOptions']
-    >
+    Equals<typeof DateRangeSelectorComponent.prototype.dateRangeOptions, DateRangeSelectorProps['dateRangeOptions']>
 >;
 type EarliestDateMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.earliestDate, DateRangeSelectorProps<string>['earliestDate']>
+    Equals<typeof DateRangeSelectorComponent.prototype.earliestDate, DateRangeSelectorProps['earliestDate']>
 >;
 type InitialValueMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.initialValue, DateRangeSelectorProps<string>['initialValue']>
+    Equals<typeof DateRangeSelectorComponent.prototype.initialValue, DateRangeSelectorProps['initialValue']>
 >;
 type InitialDateFromMatches = Expect<
-    Equals<
-        typeof DateRangeSelectorComponent.prototype.initialDateFrom,
-        DateRangeSelectorProps<string>['initialDateFrom']
-    >
+    Equals<typeof DateRangeSelectorComponent.prototype.initialDateFrom, DateRangeSelectorProps['initialDateFrom']>
 >;
 type InitialDateToMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.initialDateTo, DateRangeSelectorProps<string>['initialDateTo']>
->;
-type WidthMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.width, DateRangeSelectorProps<string>['width']>
+    Equals<typeof DateRangeSelectorComponent.prototype.initialDateTo, DateRangeSelectorProps['initialDateTo']>
 >;
+type WidthMatches = Expect<Equals<typeof DateRangeSelectorComponent.prototype.width, DateRangeSelectorProps['width']>>;
 type DateColumnMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.dateColumn, DateRangeSelectorProps<string>['dateColumn']>
+    Equals<typeof DateRangeSelectorComponent.prototype.dateColumn, DateRangeSelectorProps['dateColumn']>
 >;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/introduction.mdx

@@ -4,6 +4,21 @@ import { Meta } from '@storybook/blocks';
 
 # Introduction
 
+<a
+    style={{ display: 'flex', 'align-items': 'center', 'justify-content': 'right' }}
+    href='https://github.com/GenSpectrum/dashboard-components'
+>
+    <svg style={{ width: '3%', height: '3%' }} viewBox='0 0 98 96' xmlns='http://www.w3.org/2000/svg'>
+        <path
+            fill-rule='evenodd'
+            clip-rule='evenodd'
+            d='M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z'
+            fill='#24292f'
+        />
+    </svg>
+    <span style={{ 'margin-left': '4px' }}>Visit on GitHub</span>
+</a>
+
 This package provides a collection of web components to build interactive dashboards that visualize
 data of a specific instance of [LAPIS](https://github.com/GenSpectrum/LAPIS).
 
@@ -13,3 +28,34 @@ We primarily provide two kinds of components:
     Those components fetch data from the LAPIS instance and visualize it.
 -   Input components that let you specify sequence filters for the LAPIS requests.
     Input changes will fire events that can be listened to by the visualization components. It is the responsibility of the dashbaord maintainer to listen to those events and to wire the data correctly into the visualization components.
+
+## Installation
+
+```bash
+npm i @genspectrum/dashboard-components
+```
+
+## Usage
+
+All components must be children of a `gs-app` element.
+
+```html
+<gs-app lapis="https://url.to.lapis">
+    <gs-location-filter
+        fields='["region", "country"]'
+        initialValue="Europe / Switzerland"
+        width="100%"
+        placeholderText="Enter a location"
+    ></gs-location-filter>
+    <gs-aggregate
+        fields='["division", "host"]'
+        filter='{"country": "USA"}'
+        views='["table"]'
+        width="100%"
+        height="700px"
+        initialSortField="count"
+        initialSortDirection="descending"
+        pageSize="10"
+    ></gs-aggregate>
+</gs-app>
+```