@genspectrum/dashboard-components 0.1.1

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

@@ -0,0 +1,202 @@
+import { type FunctionComponent } from 'preact';
+import { useContext, useState } from 'preact/hooks';
+
+import { getPrevalenceOverTimeTableData } from './getPrevalenceOverTimeTableData';
+import PrevalenceOverTimeBarChart from './prevalence-over-time-bar-chart';
+import PrevalenceOverTimeBubbleChart from './prevalence-over-time-bubble-chart';
+import PrevalenceOverTimeLineChart from './prevalence-over-time-line-chart';
+import PrevalenceOverTimeTable from './prevalence-over-time-table';
+import { type PrevalenceOverTimeData, queryPrevalenceOverTime } from '../../query/queryPrevalenceOverTime';
+import { type NamedLapisFilter, type TemporalGranularity } from '../../types';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { ConfidenceIntervalSelector } from '../components/confidence-interval-selector';
+import { CsvDownloadButton } from '../components/csv-download-button';
+import { ErrorDisplay } from '../components/error-display';
+import Headline from '../components/headline';
+import Info from '../components/info';
+import { LoadingDisplay } from '../components/loading-display';
+import { NoDataDisplay } from '../components/no-data-display';
+import { ScalingSelector } from '../components/scaling-selector';
+import Tabs from '../components/tabs';
+import { type ConfidenceIntervalMethod } from '../shared/charts/confideceInterval';
+import { type ScaleType } from '../shared/charts/getYAxisScale';
+import { useQuery } from '../useQuery';
+
+export type View = 'bar' | 'line' | 'bubble' | 'table';
+
+export interface PrevalenceOverTimeProps {
+    numerator: NamedLapisFilter | NamedLapisFilter[];
+    denominator: NamedLapisFilter;
+    granularity: TemporalGranularity;
+    smoothingWindow: number;
+    views: View[];
+    confidenceIntervalMethods: ConfidenceIntervalMethod[];
+}
+
+export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
+    numerator,
+    denominator,
+    granularity,
+    smoothingWindow,
+    views,
+    confidenceIntervalMethods,
+}) => {
+    const lapis = useContext(LapisUrlContext);
+
+    const { data, error, isLoading } = useQuery(
+        () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis),
+        [lapis, numerator, denominator, granularity, smoothingWindow],
+    );
+
+    const headline = 'Prevalence over time';
+
+    if (isLoading) {
+        return (
+            <Headline heading={headline}>
+                <LoadingDisplay />
+            </Headline>
+        );
+    }
+
+    if (error !== null) {
+        return (
+            <Headline heading={headline}>
+                <ErrorDisplay error={error} />
+            </Headline>
+        );
+    }
+
+    if (data === null) {
+        return (
+            <Headline heading={headline}>
+                <NoDataDisplay />
+            </Headline>
+        );
+    }
+
+    return (
+        <Headline heading={headline}>
+            <PrevalenceOverTimeTabs
+                views={views}
+                data={data}
+                granularity={granularity}
+                confidenceIntervalMethods={confidenceIntervalMethods}
+            />
+        </Headline>
+    );
+};
+
+type PrevalenceOverTimeTabsProps = {
+    views: View[];
+    data: PrevalenceOverTimeData;
+    granularity: TemporalGranularity;
+    confidenceIntervalMethods: ConfidenceIntervalMethod[];
+};
+
+const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = ({
+    views,
+    data,
+    granularity,
+    confidenceIntervalMethods,
+}) => {
+    const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
+    const [confidenceIntervalMethod, setConfidenceIntervalMethod] = useState<ConfidenceIntervalMethod>(
+        confidenceIntervalMethods.length > 0 ? confidenceIntervalMethods[0] : 'none',
+    );
+
+    const getTab = (view: View) => {
+        switch (view) {
+            case 'bar':
+                return {
+                    title: 'Bar',
+                    content: (
+                        <PrevalenceOverTimeBarChart
+                            data={data}
+                            yAxisScaleType={yAxisScaleType}
+                            confidenceIntervalMethod={confidenceIntervalMethod}
+                        />
+                    ),
+                };
+            case 'line':
+                return {
+                    title: 'Line',
+                    content: (
+                        <PrevalenceOverTimeLineChart
+                            data={data}
+                            yAxisScaleType={yAxisScaleType}
+                            confidenceIntervalMethod={confidenceIntervalMethod}
+                        />
+                    ),
+                };
+            case 'bubble':
+                return {
+                    title: 'Bubble',
+                    content: <PrevalenceOverTimeBubbleChart data={data} yAxisScaleType={yAxisScaleType} />,
+                };
+            case 'table':
+                return { title: 'Table', content: <PrevalenceOverTimeTable data={data} granularity={granularity} /> };
+        }
+    };
+
+    const tabs = views.map((view) => getTab(view));
+
+    const toolbar = (activeTab: string) => (
+        <Toolbar
+            activeTab={activeTab}
+            yAxisScaleType={yAxisScaleType}
+            setYAxisScaleType={setYAxisScaleType}
+            data={data}
+            granularity={granularity}
+            confidenceIntervalMethods={confidenceIntervalMethods}
+            confidenceIntervalMethod={confidenceIntervalMethod}
+            setConfidenceIntervalMethod={setConfidenceIntervalMethod}
+        />
+    );
+
+    return <Tabs tabs={tabs} toolbar={toolbar} />;
+};
+
+type ToolbarProps = {
+    activeTab: string;
+    data: PrevalenceOverTimeData;
+    granularity: TemporalGranularity;
+    yAxisScaleType: ScaleType;
+    setYAxisScaleType: (scaleType: ScaleType) => void;
+    confidenceIntervalMethods: ConfidenceIntervalMethod[];
+    confidenceIntervalMethod: ConfidenceIntervalMethod;
+    setConfidenceIntervalMethod: (confidenceIntervalMethod: ConfidenceIntervalMethod) => void;
+};
+
+const Toolbar: FunctionComponent<ToolbarProps> = ({
+    activeTab,
+    yAxisScaleType,
+    setYAxisScaleType,
+    confidenceIntervalMethods,
+    confidenceIntervalMethod,
+    setConfidenceIntervalMethod,
+    data,
+    granularity,
+}) => {
+    return (
+        <div class='flex'>
+            {activeTab !== 'Table' && (
+                <ScalingSelector yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
+            )}
+            {(activeTab === 'Bar' || activeTab === 'Line') && (
+                <ConfidenceIntervalSelector
+                    confidenceIntervalMethods={confidenceIntervalMethods}
+                    confidenceIntervalMethod={confidenceIntervalMethod}
+                    setConfidenceIntervalMethod={setConfidenceIntervalMethod}
+                />
+            )}
+            <CsvDownloadButton
+                className='mx-1 btn btn-xs'
+                getData={() => getPrevalenceOverTimeTableData(data, granularity)}
+                filename='prevalence-over-time.csv'
+            />
+            <Info className='ml-1' content='Info for prevalence over time' />
+        </div>
+    );
+};
+
+export default PrevalenceOverTime;

package/src/preact/relativeGrowthAdvantage/__mockData__/denominator.json

@@ -0,0 +1,376 @@
+{
+    "errors": [],
+    "info": {
+        "apiVersion": 1,
+        "dataVersion": 1709685650,
+        "deprecationDate": null,
+        "deprecationInfo": null,
+        "acknowledgement": null
+    },
+    "data": [
+        {
+            "date": "2021-01-30",
+            "count": 179
+        },
+        {
+            "date": "2021-01-31",
+            "count": 132
+        },
+        {
+            "date": "2021-02-01",
+            "count": 314
+        },
+        {
+            "date": "2021-02-02",
+            "count": 210
+        },
+        {
+            "date": "2021-02-03",
+            "count": 168
+        },
+        {
+            "date": "2021-02-04",
+            "count": 168
+        },
+        {
+            "date": "2021-02-05",
+            "count": 236
+        },
+        {
+            "date": "2021-02-06",
+            "count": 133
+        },
+        {
+            "date": "2021-02-07",
+            "count": 111
+        },
+        {
+            "date": "2021-02-08",
+            "count": 136
+        },
+        {
+            "date": "2021-02-09",
+            "count": 133
+        },
+        {
+            "date": "2021-02-10",
+            "count": 87
+        },
+        {
+            "date": "2021-02-11",
+            "count": 133
+        },
+        {
+            "date": "2021-02-12",
+            "count": 115
+        },
+        {
+            "date": "2021-02-13",
+            "count": 136
+        },
+        {
+            "date": "2021-02-14",
+            "count": 88
+        },
+        {
+            "date": "2021-02-15",
+            "count": 121
+        },
+        {
+            "date": "2021-02-16",
+            "count": 133
+        },
+        {
+            "date": "2021-02-17",
+            "count": 157
+        },
+        {
+            "date": "2021-02-18",
+            "count": 75
+        },
+        {
+            "date": "2021-02-19",
+            "count": 114
+        },
+        {
+            "date": "2021-02-20",
+            "count": 68
+        },
+        {
+            "date": "2021-02-21",
+            "count": 97
+        },
+        {
+            "date": "2021-02-22",
+            "count": 154
+        },
+        {
+            "date": "2021-02-23",
+            "count": 153
+        },
+        {
+            "date": "2021-02-24",
+            "count": 118
+        },
+        {
+            "date": "2021-02-25",
+            "count": 93
+        },
+        {
+            "date": "2021-02-26",
+            "count": 53
+        },
+        {
+            "date": "2021-02-27",
+            "count": 61
+        },
+        {
+            "date": "2021-02-28",
+            "count": 48
+        },
+        {
+            "date": "2021-03-01",
+            "count": 145
+        },
+        {
+            "date": "2020-12-01",
+            "count": 84
+        },
+        {
+            "date": "2020-12-02",
+            "count": 172
+        },
+        {
+            "date": "2020-12-03",
+            "count": 134
+        },
+        {
+            "date": "2020-12-04",
+            "count": 48
+        },
+        {
+            "date": "2020-12-05",
+            "count": 25
+        },
+        {
+            "date": "2020-12-06",
+            "count": 35
+        },
+        {
+            "date": "2020-12-07",
+            "count": 250
+        },
+        {
+            "date": "2020-12-08",
+            "count": 101
+        },
+        {
+            "date": "2020-12-09",
+            "count": 128
+        },
+        {
+            "date": "2020-12-10",
+            "count": 25
+        },
+        {
+            "date": "2020-12-11",
+            "count": 28
+        },
+        {
+            "date": "2020-12-12",
+            "count": 116
+        },
+        {
+            "date": "2020-12-13",
+            "count": 110
+        },
+        {
+            "date": "2020-12-14",
+            "count": 252
+        },
+        {
+            "date": "2020-12-15",
+            "count": 189
+        },
+        {
+            "date": "2020-12-16",
+            "count": 299
+        },
+        {
+            "date": "2020-12-17",
+            "count": 281
+        },
+        {
+            "date": "2020-12-18",
+            "count": 228
+        },
+        {
+            "date": "2020-12-19",
+            "count": 243
+        },
+        {
+            "date": "2020-12-20",
+            "count": 128
+        },
+        {
+            "date": "2020-12-21",
+            "count": 148
+        },
+        {
+            "date": "2020-12-22",
+            "count": 144
+        },
+        {
+            "date": "2020-12-23",
+            "count": 289
+        },
+        {
+            "date": "2020-12-24",
+            "count": 245
+        },
+        {
+            "date": "2020-12-25",
+            "count": 180
+        },
+        {
+            "date": "2020-12-26",
+            "count": 213
+        },
+        {
+            "date": "2020-12-27",
+            "count": 212
+        },
+        {
+            "date": "2020-12-28",
+            "count": 423
+        },
+        {
+            "date": "2020-12-29",
+            "count": 290
+        },
+        {
+            "date": "2020-12-30",
+            "count": 292
+        },
+        {
+            "date": "2020-12-31",
+            "count": 174
+        },
+        {
+            "date": "2021-01-01",
+            "count": 243
+        },
+        {
+            "date": "2021-01-02",
+            "count": 200
+        },
+        {
+            "date": "2021-01-03",
+            "count": 200
+        },
+        {
+            "date": "2021-01-04",
+            "count": 360
+        },
+        {
+            "date": "2021-01-05",
+            "count": 283
+        },
+        {
+            "date": "2021-01-06",
+            "count": 146
+        },
+        {
+            "date": "2021-01-07",
+            "count": 190
+        },
+        {
+            "date": "2021-01-08",
+            "count": 287
+        },
+        {
+            "date": "2021-01-09",
+            "count": 228
+        },
+        {
+            "date": "2021-01-10",
+            "count": 218
+        },
+        {
+            "date": "2021-01-11",
+            "count": 360
+        },
+        {
+            "date": "2021-01-12",
+            "count": 236
+        },
+        {
+            "date": "2021-01-13",
+            "count": 248
+        },
+        {
+            "date": "2021-01-14",
+            "count": 216
+        },
+        {
+            "date": "2021-01-15",
+            "count": 267
+        },
+        {
+            "date": "2021-01-16",
+            "count": 199
+        },
+        {
+            "date": "2021-01-17",
+            "count": 131
+        },
+        {
+            "date": "2021-01-18",
+            "count": 392
+        },
+        {
+            "date": "2021-01-19",
+            "count": 257
+        },
+        {
+            "date": "2021-01-20",
+            "count": 302
+        },
+        {
+            "date": "2021-01-21",
+            "count": 258
+        },
+        {
+            "date": "2021-01-22",
+            "count": 255
+        },
+        {
+            "date": "2021-01-23",
+            "count": 150
+        },
+        {
+            "date": "2021-01-24",
+            "count": 149
+        },
+        {
+            "date": "2021-01-25",
+            "count": 315
+        },
+        {
+            "date": "2021-01-26",
+            "count": 250
+        },
+        {
+            "date": "2021-01-27",
+            "count": 278
+        },
+        {
+            "date": "2021-01-28",
+            "count": 166
+        },
+        {
+            "date": "2021-01-29",
+            "count": 222
+        }
+    ]
+}