@genspectrum/dashboard-components 0.3.1 → 0.4.0

package/custom-elements.json

@@ -268,7 +268,7 @@
           "type": {
             "text": "Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>>"
           },
-          "default": "{ title: 'Input/DateRangeSelector', component: 'gs-date-range-selector', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-changed'], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { 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', ], }, dateColumn: { control: { type: 'text' } }, customSelectOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }], earliestDate: '1970-01-01', initialValue: PRESET_VALUE_LAST_6_MONTHS, dateColumn: 'aDateColumn', width: '100%', }, decorators: [withActions], tags: ['autodocs'], }"
+          "default": "{ title: 'Input/DateRangeSelector', component: 'gs-date-range-selector', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-changed'], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { 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', ], }, dateColumn: { control: { type: 'text' } }, customSelectOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }], earliestDate: '1970-01-01', initialValue: PRESET_VALUE_LAST_6_MONTHS, dateColumn: 'aDateColumn', width: '100%', initialDateFrom: '', initialDateTo: '', }, decorators: [withActions], tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -276,7 +276,7 @@
           "type": {
             "text": "StoryObj<Required<DateRangeSelectorProps<'CustomDateRange'>>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-selector .customSelectOptions=${args.customSelectOptions} .earliestDate=${args.earliestDate} .initialValue=${args.initialValue} .width=${args.width} .dateColumn=${args.dateColumn} ></gs-date-range-selector> </div> </gs-app>`, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector'); const dateTo = () => canvas.getByPlaceholderText('Date to'); await step('Expect last 6 months to be selected', async () => { await expect(canvas.getByRole('combobox')).toHaveValue('last6Months'); await waitFor(() => { expect(dateTo()).toHaveValue(toYYYYMMDD(new Date())); }); }); // Due to the limitations of storybook testing which does not fire an event, // when selecting a value from the dropdown we can't test the fired event here. // An e2e test (using playwright) for that can be found in tests/dateRangeSelector.spec.ts }, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-selector .customSelectOptions=${args.customSelectOptions} .earliestDate=${args.earliestDate} .initialValue=${args.initialValue} .initialDateFrom=${args.initialDateFrom} .initialDateTo=${args.initialDateTo} .width=${args.width} .dateColumn=${args.dateColumn} ></gs-date-range-selector> </div> </gs-app>`, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector'); const dateTo = () => canvas.getByPlaceholderText('Date to'); await step('Expect last 6 months to be selected', async () => { await expect(canvas.getByRole('combobox')).toHaveValue('last6Months'); await waitFor(() => { expect(dateTo()).toHaveValue(toYYYYMMDD(new Date())); }); }); // Due to the limitations of storybook testing which does not fire an event, // when selecting a value from the dropdown we can't test the fired event here. // An e2e test (using playwright) for that can be found in tests/dateRangeSelector.spec.ts }, }"
         }
       ],
       "exports": [
@@ -334,9 +334,29 @@
                 "text": "'custom'\n        | 'allTimes'\n        | 'last2Weeks'\n        | 'lastMonth'\n        | 'last2Months'\n        | 'last3Months'\n        | 'last6Months'\n        | string"
               },
               "default": "'last6Months'",
-              "description": "The initial value to use for this date range selector.\nMust be a valid label from the preset labels or a `label` given in the `customSelectOptions`.\n\nIf the value is invalid, the component will default to `'last6Months'`.",
+              "description": "The initial value to use for this date range selector.\nMust be a valid label from the preset labels or a `label` given in the `customSelectOptions`.\n\nIf the value is invalid, the component will default to `'last6Months'`.\n\nIt will be overwritten if `initialDateFrom` or `initialDateTo` is set.",
               "attribute": "initialValue"
             },
+            {
+              "kind": "field",
+              "name": "initialDateFrom",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A date string in the format `YYYY-MM-DD`.\nIf set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).\nIf `initialDateTo` is set, but this is unset, it will default to `earliestDate`.",
+              "attribute": "initialDateFrom"
+            },
+            {
+              "kind": "field",
+              "name": "initialDateTo",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A date string in the format `YYYY-MM-DD`.\nIf set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).\nIf `initialDateFrom` is set, but this is unset, it will default to the current date.",
+              "attribute": "initialDateTo"
+            },
             {
               "kind": "field",
               "name": "width",
@@ -392,9 +412,27 @@
                 "text": "'custom'\n        | 'allTimes'\n        | 'last2Weeks'\n        | 'lastMonth'\n        | 'last2Months'\n        | 'last3Months'\n        | 'last6Months'\n        | string"
               },
               "default": "'last6Months'",
-              "description": "The initial value to use for this date range selector.\nMust be a valid label from the preset labels or a `label` given in the `customSelectOptions`.\n\nIf the value is invalid, the component will default to `'last6Months'`.",
+              "description": "The initial value to use for this date range selector.\nMust be a valid label from the preset labels or a `label` given in the `customSelectOptions`.\n\nIf the value is invalid, the component will default to `'last6Months'`.\n\nIt will be overwritten if `initialDateFrom` or `initialDateTo` is set.",
               "fieldName": "initialValue"
             },
+            {
+              "name": "initialDateFrom",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A date string in the format `YYYY-MM-DD`.\nIf set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).\nIf `initialDateTo` is set, but this is unset, it will default to `earliestDate`.",
+              "fieldName": "initialDateFrom"
+            },
+            {
+              "name": "initialDateTo",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A date string in the format `YYYY-MM-DD`.\nIf set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).\nIf `initialDateFrom` is set, but this is unset, it will default to the current date.",
+              "fieldName": "initialDateTo"
+            },
             {
               "name": "width",
               "type": {
@@ -483,7 +521,7 @@
           "type": {
             "text": "StoryObj<LocationFilterProps>"
           },
-          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); const inputField = () => canvas.getByRole('combobox'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-location-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Input invalid location', async () => { await userEvent.type(inputField(), 'Not / A / Location'); await expect(listenerMock).not.toHaveBeenCalled(); await userEvent.type(inputField(), '{backspace>18/}'); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', }, }), ); }); await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => { await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }, }), ); }); }, }"
+          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); const inputField = () => canvas.getByRole('combobox'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-location-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Input invalid location', async () => { await userEvent.type(inputField(), 'Not / A / Location'); await expect(listenerMock).not.toHaveBeenCalled(); await userEvent.type(inputField(), '{backspace>18/}'); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); await expect(listenerMock.mock.calls.at(-1)[0].detail).toStrictEqual({ region: 'Asia', country: undefined, division: undefined, location: undefined, }); }); await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => { await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }, }), ); }); }, }"
         }
       ],
       "exports": [
@@ -574,7 +612,7 @@
               "type": {
                 "text": "CustomEvent<Record<string, string>>"
               },
-              "description": "Fired when a value from the datalist is selected or when a valid value is typed into the field. The `details` of this event contain an object with all `fields` as keys and the corresponding values as values, if they are not `undefined`. Example: ``` { continent: \"Asia\", country: \"China\", city: \"Beijing\" } ```",
+              "description": "Fired when a value from the datalist is selected or when a valid value is typed into the field. The `details` of this event contain an object with all `fields` as keys and the corresponding values as values, even if they are `undefined`. Example: ``` { continent: \"Asia\", country: \"China\", city: \"Beijing\", district: undefined, } ```",
               "name": "gs-location-changed"
             }
           ],
@@ -644,7 +682,7 @@
           "type": {
             "text": "Meta<MutationFilterProps>"
           },
-          "default": "{ title: 'Input/Mutation filter', component: 'gs-mutation-filter', parameters: withComponentDocs({ actions: { handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur'], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'object', }, }, width: { control: 'text' }, height: { control: 'text' }, }, decorators: [withActions], tags: ['autodocs'], }"
+          "default": "{ title: 'Input/Mutation filter', component: 'gs-mutation-filter', parameters: withComponentDocs({ actions: { handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur'], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'object', }, }, width: { control: 'text' }, }, decorators: [withActions], tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -734,16 +772,6 @@
               "default": "'100%'",
               "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "width"
-            },
-            {
-              "kind": "field",
-              "name": "height",
-              "type": {
-                "text": "string"
-              },
-              "default": "'6.5rem'",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
-              "attribute": "height"
             }
           ],
           "events": [
@@ -780,15 +808,6 @@
               "default": "'100%'",
               "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "width"
-            },
-            {
-              "name": "height",
-              "type": {
-                "text": "string"
-              },
-              "default": "'6.5rem'",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
-              "fieldName": "height"
             }
           ],
           "superclass": {
@@ -1740,7 +1759,7 @@
           "type": {
             "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { numerator: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], denominator: { country: 'USA', dateFrom: '2023-01-01' }, granularity: 'month', smoothingWindow: 0, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorEG, }, }, { matcher: { name: 'numeratorJN1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorJN1, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: denominator, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { numerator: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], denominator: { country: 'USA', dateFrom: '2023-01-01' }, granularity: 'month', smoothingWindow: 0, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', lapisDateField: 'date', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorEG, }, }, { matcher: { name: 'numeratorJN1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: numeratorJN1, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: denominator, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -1748,7 +1767,7 @@
           "type": {
             "text": "StoryObj<Required<PrevalenceOverTimeProps>>"
           },
-          "default": "{ ...Template, args: { numerator: { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' }, }, denominator: { country: 'USA', dateFrom: '2023-10-01' }, granularity: 'day', smoothingWindow: 7, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorOneVariant', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: numeratorOneVariant, }, }, { matcher: { name: 'denominatorOneVariant', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: denominatorOneVariant, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { numerator: { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' }, }, denominator: { country: 'USA', dateFrom: '2023-10-01' }, granularity: 'day', smoothingWindow: 7, views: ['bar', 'line', 'bubble', 'table'], confidenceIntervalMethods: ['wilson'], width: '100%', height: '700px', headline: 'Prevalence over time', lapisDateField: 'date', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numeratorOneVariant', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: numeratorOneVariant, }, }, { matcher: { name: 'denominatorOneVariant', url: AGGREGATED_ENDPOINT, body: { country: 'USA', dateFrom: '2023-10-01', fields: ['date'], }, }, response: { status: 200, body: denominatorOneVariant, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -1924,6 +1943,16 @@
               "default": "'700px'",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
+            },
+            {
+              "kind": "field",
+              "name": "lapisDateField",
+              "type": {
+                "text": "string"
+              },
+              "default": "'date'",
+              "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
+              "attribute": "lapisDateField"
             }
           ],
           "attributes": [
@@ -2007,6 +2036,15 @@
               "default": "'700px'",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
+            },
+            {
+              "name": "lapisDateField",
+              "type": {
+                "text": "string"
+              },
+              "default": "'date'",
+              "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
+              "fieldName": "lapisDateField"
             }
           ],
           "superclass": {
@@ -2054,7 +2092,7 @@
           "type": {
             "text": "StoryObj<Required<RelativeGrowthAdvantageProps>>"
           },
-          "default": "{ ...Template, args: { numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, generationTime: 7, views: ['line'], width: '100%', height: '700px', headline: 'Relative growth advantage', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numerator', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: numerator, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: denominator, }, }, ], }, }, }"
+          "default": "{ ...Template, args: { numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' }, generationTime: 7, views: ['line'], width: '100%', height: '700px', headline: 'Relative growth advantage', lapisDateField: 'date', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'numerator', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: numerator, }, }, { matcher: { name: 'denominator', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01', fields: ['date'], }, }, response: { status: 200, body: denominator, }, }, ], }, }, }"
         }
       ],
       "exports": [
@@ -2154,6 +2192,16 @@
               "default": "'700px'",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
+            },
+            {
+              "kind": "field",
+              "name": "lapisDateField",
+              "type": {
+                "text": "string"
+              },
+              "default": "'date'",
+              "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
+              "attribute": "lapisDateField"
             }
           ],
           "attributes": [
@@ -2219,6 +2267,15 @@
               "default": "'700px'",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
+            },
+            {
+              "name": "lapisDateField",
+              "type": {
+                "text": "string"
+              },
+              "default": "'date'",
+              "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
+              "fieldName": "lapisDateField"
             }
           ],
           "superclass": {