@genspectrum/dashboard-components 0.3.0 → 0.3.2

package/dist/genspectrum-components.d.ts

@@ -171,7 +171,7 @@ declare type LapisFilter = Record<string, string | number | null | boolean>;
  * Values for the fields `i > K` are considered `undefined`.
  *
  * @fires {CustomEvent<Record<string, string>>} gs-location-changed
- * Fired when the field is submitted with a valid location value.
+ * 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:
@@ -529,6 +529,14 @@ export declare class PrevalenceOverTimeComponent extends PreactLitAdapterWithGri
      * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
+    /**
+     * Required.
+     *
+     * The LAPIS field that the data should be aggregated by.
+     * The values will be used on the x-axis of the diagram.
+     * Must be a field of type `date` in LAPIS.
+     */
+    lapisDateField: string;
     render(): JSX_2.Element;
 }
 
@@ -639,6 +647,14 @@ export declare class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
      * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
+    /**
+     * Required.
+     *
+     * The LAPIS field that the data should be aggregated by.
+     * The values will be used on the x-axis of the diagram.
+     * Must be a field of type `date` in LAPIS.
+     */
+    lapisDateField: string;
     render(): JSX_2.Element;
 }
 

package/dist/style.css

@@ -1246,19 +1246,6 @@ html {
     }
   }
 
-  .btn-outline.btn-primary:hover {
-    --tw-text-opacity: 1;
-    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-  }
-
-  @supports (color: color-mix(in oklab, black, black)) {
-
-    .btn-outline.btn-primary:hover {
-      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-    }
-  }
-
   .btn-disabled:hover,
     .btn[disabled]:hover,
     .btn:disabled:hover {
@@ -1728,34 +1715,12 @@ input.tab:checked + .tab-content,
     background-color: var(--btn-color, var(--fallback-b2));
     border-color: var(--btn-color, var(--fallback-b2));
   }
-
-  .btn-primary {
-    --btn-color: var(--fallback-p);
-  }
-}
-@supports (color: color-mix(in oklab, black, black)) {
-
-  .btn-outline.btn-primary.btn-active {
-    background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-    border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-  }
 }
 .btn:focus-visible {
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
 }
-.btn-primary {
-  --tw-text-opacity: 1;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-  outline-color: var(--fallback-p,oklch(var(--p)/1));
-}
-@supports (color: oklch(0% 0 0)) {
-
-  .btn-primary {
-    --btn-color: var(--p);
-  }
-}
 .btn.glass {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -1780,14 +1745,6 @@ input.tab:checked + .tab-content,
   border-color: transparent;
   background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
 }
-.btn-outline.btn-primary {
-  --tw-text-opacity: 1;
-  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
-}
-.btn-outline.btn-primary.btn-active {
-  --tw-text-opacity: 1;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-}
 .btn.btn-disabled,
   .btn[disabled],
   .btn:disabled {
@@ -2938,9 +2895,6 @@ input.tab:checked + .tab-content,
 .me-1 {
   margin-inline-end: 0.25rem;
 }
-.ml-1 {
-  margin-left: 0.25rem;
-}
 .ml-2 {
   margin-left: 0.5rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.3.0",
+    "version": "0.3.2",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/operator/RenameFieldOperator.spec.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+
+import { MockOperator } from './MockOperator';
+import { RenameFieldOperator } from './RenameFieldOperator';
+
+const mockOperator = new MockOperator([
+    { id: 1, value: 1 },
+    { id: 2, value: 2 },
+    { id: 3, value: 3 },
+    { id: 4, value: 4 },
+    { id: 5, value: 5 },
+]);
+
+describe('RenameFieldOperator', () => {
+    it('should map the keys', async () => {
+        const underTest = new RenameFieldOperator(mockOperator, 'value', 'mappedValue');
+
+        const result = await underTest.evaluate('lapis');
+
+        expect(result.content).deep.equal([
+            { id: 1, value: 1, mappedValue: 1 },
+            { id: 2, value: 2, mappedValue: 2 },
+            { id: 3, value: 3, mappedValue: 3 },
+            { id: 4, value: 4, mappedValue: 4 },
+            { id: 5, value: 5, mappedValue: 5 },
+        ]);
+    });
+});

package/src/operator/RenameFieldOperator.ts

@@ -0,0 +1,19 @@
+import { MapOperator } from './MapOperator';
+import type { Operator } from './Operator';
+
+export class RenameFieldOperator<
+    OldFieldName extends string,
+    NewFieldName extends string,
+    Data extends { [key in OldFieldName]: unknown },
+> extends MapOperator<Data, Data & { [key in NewFieldName]: Data[OldFieldName] }> {
+    constructor(child: Operator<Data>, oldFieldName: OldFieldName, newFieldName: NewFieldName) {
+        super(
+            child,
+            (value) =>
+                ({
+                    ...value,
+                    [newFieldName]: value[oldFieldName],
+                }) as Data & { [key in NewFieldName]: Data[OldFieldName] },
+        );
+    }
+}

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -34,7 +34,7 @@ const meta: Meta<LocationFilterProps> = {
     args: {
         width: '100%',
         fields: ['region', 'country', 'division', 'location'],
-        initialValue: 'United States',
+        initialValue: 'Europe',
     },
     argTypes: {
         fields: {

package/src/preact/locationFilter/location-filter.tsx

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
 import { useContext, useRef, useState } from 'preact/hooks';
+import { type JSXInternal } from 'preact/src/jsx';
 
 import { fetchAutocompletionList } from './fetchAutocompletionList';
 import { LapisUrlContext } from '../LapisUrlContext';
@@ -36,7 +37,7 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
     const [value, setValue] = useState(initialValue ?? '');
     const [unknownLocation, setUnknownLocation] = useState(false);
 
-    const formRef = useRef<HTMLFormElement>(null);
+    const divRef = useRef<HTMLDivElement>(null);
 
     const { data, error, isLoading } = useQuery(() => fetchAutocompletionList(fields, lapis), [fields, lapis]);
 
@@ -47,40 +48,29 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
         return <ErrorDisplay error={error} />;
     }
 
-    const onInput = (event: InputEvent) => {
-        if (event.target instanceof HTMLInputElement) {
-            const inputValue = event.target.value;
-            setValue(inputValue);
-            if (unknownLocation) {
-                const eventDetail = parseLocation(inputValue, fields);
-                if (hasMatchingEntry(data, eventDetail)) {
-                    setUnknownLocation(false);
-                }
-            }
+    const onInput = (event: JSXInternal.TargetedInputEvent<HTMLInputElement>) => {
+        const inputValue = event.currentTarget.value;
+        setValue(inputValue);
+        if (inputValue.trim() === value.trim()) {
+            return;
         }
-    };
-
-    const submit = (event: SubmitEvent) => {
-        event.preventDefault();
-        const eventDetail = parseLocation(value, fields);
-
+        const eventDetail = parseLocation(inputValue, fields);
         if (hasMatchingEntry(data, eventDetail)) {
-            setUnknownLocation(false);
-
-            formRef.current?.dispatchEvent(
+            divRef.current?.dispatchEvent(
                 new CustomEvent('gs-location-changed', {
                     detail: eventDetail,
                     bubbles: true,
                     composed: true,
                 }),
             );
+            setUnknownLocation(false);
         } else {
             setUnknownLocation(true);
         }
     };
 
     return (
-        <form class='flex w-full' onSubmit={submit} ref={formRef}>
+        <div class='flex w-full' ref={divRef}>
             <input
                 type='text'
                 class={`input input-bordered grow ${unknownLocation ? 'border-2 border-error' : ''}`}
@@ -97,10 +87,7 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
                     return <option key={value} value={value} />;
                 })}
             </datalist>
-            <button class='btn btn-primary ml-1' type='submit'>
-                Submit
-            </button>
-        </form>
+        </div>
     );
 };
 

package/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx

@@ -48,6 +48,7 @@ const Template = {
                 width={args.width}
                 height={args.height}
                 headline={args.headline}
+                lapisDateField={args.lapisDateField}
             />
         </LapisUrlContext.Provider>
     ),
@@ -68,6 +69,7 @@ export const TwoVariants = {
         width: '100%',
         height: '700px',
         headline: 'Prevalence over time',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {
@@ -139,6 +141,7 @@ export const OneVariant = {
         width: '100%',
         height: '700px',
         headline: 'Prevalence over time',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -39,6 +39,7 @@ export interface PrevalenceOverTimeInnerProps {
     smoothingWindow: number;
     views: View[];
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
+    lapisDateField: string;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
@@ -51,6 +52,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     width,
     height,
     headline = 'Prevalence over time',
+    lapisDateField,
 }) => {
     const size = { height, width };
 
@@ -65,6 +67,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
                         smoothingWindow={smoothingWindow}
                         views={views}
                         confidenceIntervalMethods={confidenceIntervalMethods}
+                        lapisDateField={lapisDateField}
                     />
                 </Headline>
             </ResizeContainer>
@@ -79,11 +82,12 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerP
     smoothingWindow,
     views,
     confidenceIntervalMethods,
+    lapisDateField,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(
-        () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis),
+        () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis, lapisDateField),
         [lapis, numerator, denominator, granularity, smoothingWindow],
     );
 

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx

@@ -35,6 +35,7 @@ export const Primary = {
                 width={args.width}
                 height={args.height}
                 headline={args.headline}
+                lapisDateField={args.lapisDateField}
             />
         </LapisUrlContext.Provider>
     ),
@@ -46,6 +47,7 @@ export const Primary = {
         width: '100%',
         height: '700px',
         headline: 'Relative growth advantage',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -33,6 +33,7 @@ export interface RelativeGrowthAdvantagePropsInner {
     denominator: LapisFilter;
     generationTime: number;
     views: View[];
+    lapisDateField: string;
 }
 
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
@@ -43,6 +44,7 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
     denominator,
     generationTime,
     headline = 'Relative growth advantage',
+    lapisDateField,
 }) => {
     const size = { height, width };
 
@@ -55,6 +57,7 @@ export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageP
                         numerator={numerator}
                         denominator={denominator}
                         generationTime={generationTime}
+                        lapisDateField={lapisDateField}
                     />
                 </Headline>
             </ResizeContainer>
@@ -67,12 +70,13 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
     denominator,
     generationTime,
     views,
+    lapisDateField,
 }) => {
     const lapis = useContext(LapisUrlContext);
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
     const { data, error, isLoading } = useQuery(
-        () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis),
+        () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis, lapisDateField),
         [lapis, numerator, denominator, generationTime, views],
     );
 

package/src/query/queryPrevalenceOverTime.ts

@@ -3,6 +3,7 @@ import { FetchAggregatedOperator } from '../operator/FetchAggregatedOperator';
 import { FillMissingOperator } from '../operator/FillMissingOperator';
 import { GroupByAndSumOperator } from '../operator/GroupByAndSumOperator';
 import { MapOperator } from '../operator/MapOperator';
+import { RenameFieldOperator } from '../operator/RenameFieldOperator';
 import { SlidingOperator } from '../operator/SlidingOperator';
 import { SortOperator } from '../operator/SortOperator';
 import { type LapisFilter, type NamedLapisFilter, type TemporalGranularity } from '../types';
@@ -27,14 +28,15 @@ export function queryPrevalenceOverTime(
     granularity: TemporalGranularity,
     smoothingWindow: number,
     lapis: string,
+    lapisDateField: string,
     signal?: AbortSignal,
 ): Promise<PrevalenceOverTimeData> {
     const numeratorFilters = makeArray(numeratorFilter);
 
-    const denominatorData = fetchAndPrepare(denominatorFilter, granularity, smoothingWindow);
+    const denominatorData = fetchAndPrepare(denominatorFilter, granularity, smoothingWindow, lapisDateField);
     const subQueries = numeratorFilters.map(async (namedLapisFilter) => {
         const { displayName, lapisFilter } = namedLapisFilter;
-        const numeratorData = fetchAndPrepare(lapisFilter, granularity, smoothingWindow);
+        const numeratorData = fetchAndPrepare(lapisFilter, granularity, smoothingWindow, lapisDateField);
         const divide = new DivisionOperator(
             numeratorData,
             denominatorData,
@@ -60,11 +62,15 @@ function makeArray<T>(arrayOrSingleItem: T | T[]) {
     return [arrayOrSingleItem];
 }
 
-function fetchAndPrepare(filter: LapisFilter, granularity: TemporalGranularity, smoothingWindow: number) {
-    const fetchData = new FetchAggregatedOperator<{
-        date: string | null;
-    }>(filter, ['date']);
-    const mapData = new MapOperator(fetchData, (d) => mapDateToGranularityRange(d, granularity));
+function fetchAndPrepare<LapisDateField extends string>(
+    filter: LapisFilter,
+    granularity: TemporalGranularity,
+    smoothingWindow: number,
+    lapisDateField: LapisDateField,
+) {
+    const fetchData = new FetchAggregatedOperator<{ [key in LapisDateField]: string | null }>(filter, [lapisDateField]);
+    const dataWithFixedDateKey = new RenameFieldOperator(fetchData, lapisDateField, 'date');
+    const mapData = new MapOperator(dataWithFixedDateKey, (d) => mapDateToGranularityRange(d, granularity));
     const groupByData = new GroupByAndSumOperator(mapData, 'dateRange', 'count');
     const fillData = new FillMissingOperator(
         groupByData,

package/src/query/queryRelativeGrowthAdvantage.ts

@@ -1,25 +1,29 @@
 import { FetchAggregatedOperator } from '../operator/FetchAggregatedOperator';
 import { MapOperator } from '../operator/MapOperator';
+import { RenameFieldOperator } from '../operator/RenameFieldOperator';
 import { type LapisFilter } from '../types';
 import { getMinMaxTemporal, TemporalCache, type YearMonthDay } from '../utils/temporal';
 
 export type RelativeGrowthAdvantageData = Awaited<ReturnType<typeof queryRelativeGrowthAdvantage>>;
 
-export async function queryRelativeGrowthAdvantage(
+export async function queryRelativeGrowthAdvantage<LapisDateField extends string>(
     numerator: LapisFilter,
     denominator: LapisFilter,
     generationTime: number,
     lapis: string,
+    lapisDateField: LapisDateField,
     signal?: AbortSignal,
 ) {
     const fetchNumerator = new FetchAggregatedOperator<{
-        date: string | null;
-    }>(numerator, ['date']);
+        [key in LapisDateField]: string | null;
+    }>(numerator, [lapisDateField]);
     const fetchDenominator = new FetchAggregatedOperator<{
-        date: string | null;
-    }>(denominator, ['date']);
-    const mapNumerator = new MapOperator(fetchNumerator, toYearMonthDay);
-    const mapDenominator = new MapOperator(fetchDenominator, toYearMonthDay);
+        [key in LapisDateField]: string | null;
+    }>(denominator, [lapisDateField]);
+    const mapToFixedDateKeyNumerator = new RenameFieldOperator(fetchNumerator, lapisDateField, 'date');
+    const mapToFixedDateKeyDenominator = new RenameFieldOperator(fetchDenominator, lapisDateField, 'date');
+    const mapNumerator = new MapOperator(mapToFixedDateKeyNumerator, toYearMonthDay);
+    const mapDenominator = new MapOperator(mapToFixedDateKeyDenominator, toYearMonthDay);
     const [numeratorData, denominatorData] = await Promise.all([
         mapNumerator.evaluate(lapis, signal),
         mapDenominator.evaluate(lapis, signal),

package/src/web-components/input/gs-location-filter.stories.ts

@@ -169,7 +169,6 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter');
 
-        const submitButton = () => canvas.getByRole('button', { name: 'Submit' });
         const inputField = () => canvas.getByRole('combobox');
 
         const listenerMock = fn();
@@ -185,14 +184,12 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
 
         await step('Input invalid location', async () => {
             await userEvent.type(inputField(), 'Not / A / Location');
-            await userEvent.click(submitButton());
             await expect(listenerMock).not.toHaveBeenCalled();
             await userEvent.type(inputField(), '{backspace>18/}');
         });
 
         await step('Select Asia', async () => {
             await userEvent.type(inputField(), 'Asia');
-            await userEvent.click(submitButton());
             await expect(listenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
                     detail: {
@@ -204,7 +201,6 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
 
         await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => {
             await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj');
-            await userEvent.click(submitButton());
             await expect(listenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
                     detail: {

package/src/web-components/input/gs-location-filter.tsx

@@ -18,7 +18,7 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * Values for the fields `i > K` are considered `undefined`.
  *
  * @fires {CustomEvent<Record<string, string>>} gs-location-changed
- * Fired when the field is submitted with a valid location value.
+ * 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:

package/src/web-components/visualization/gs-prevalence-over-time.stories.ts

@@ -23,8 +23,9 @@ const codeExample = String.raw`
     views='["bar", "line", "bubble", "table"]'
     confidenceIntervalMethods='["wilson"]'
     headline="Prevalence over time"
-    width='100%'
-    height='700px'
+    width="100%"
+    height="700px"
+    lapisDateField="date"
 ></gs-prevalence-over-time>`;
 
 const meta: Meta<Required<PrevalenceOverTimeProps>> = {
@@ -75,6 +76,7 @@ const Template: StoryObj<Required<PrevalenceOverTimeProps>> = {
                 .width=${args.width}
                 .height=${args.height}
                 .headline=${args.headline}
+                .lapisDateField=${args.lapisDateField}
             ></gs-prevalence-over-time>
         </gs-app>
     `,
@@ -95,6 +97,7 @@ export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
         width: '100%',
         height: '700px',
         headline: 'Prevalence over time',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {
@@ -166,6 +169,7 @@ export const OneVariant: StoryObj<Required<PrevalenceOverTimeProps>> = {
         width: '100%',
         height: '700px',
         headline: 'Prevalence over time',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {

package/src/web-components/visualization/gs-prevalence-over-time.tsx

@@ -126,6 +126,16 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     @property({ type: String })
     height: string = '700px';
 
+    /**
+     * Required.
+     *
+     * The LAPIS field that the data should be aggregated by.
+     * The values will be used on the x-axis of the diagram.
+     * Must be a field of type `date` in LAPIS.
+     */
+    @property({ type: String })
+    lapisDateField: string = 'date';
+
     override render() {
         return (
             <PrevalenceOverTime
@@ -138,6 +148,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
                 width={this.width}
                 height={this.height}
                 headline={this.headline}
+                lapisDateField={this.lapisDateField}
             />
         );
     }

package/src/web-components/visualization/gs-relative-growth-advantage.stories.ts

@@ -18,6 +18,7 @@ const codeExample = String.raw`
     width='100%'
     height='700px'
     headline="Relative growth advantage"
+    lapisDateField="date"
 ></gs-relative-growth-advantage>`;
 
 const meta: Meta<RelativeGrowthAdvantageProps> = {
@@ -58,6 +59,7 @@ const Template: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
                 .width=${args.width}
                 .height=${args.height}
                 .headline=${args.headline}
+                .lapisDateField=${args.lapisDateField}
             ></gs-relative-growth-advantage>
         </gs-app>
     `,
@@ -73,6 +75,7 @@ export const Default: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
         width: '100%',
         height: '700px',
         headline: 'Relative growth advantage',
+        lapisDateField: 'date',
     },
     parameters: {
         fetchMock: {

package/src/web-components/visualization/gs-relative-growth-advantage.tsx

@@ -84,6 +84,16 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     @property({ type: String })
     height: string = '700px';
 
+    /**
+     * Required.
+     *
+     * The LAPIS field that the data should be aggregated by.
+     * The values will be used on the x-axis of the diagram.
+     * Must be a field of type `date` in LAPIS.
+     */
+    @property({ type: String })
+    lapisDateField: string = 'date';
+
     override render() {
         return (
             <RelativeGrowthAdvantage
@@ -94,6 +104,7 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
                 width={this.width}
                 height={this.height}
                 headline={this.headline}
+                lapisDateField={this.lapisDateField}
             />
         );
     }