@genspectrum/dashboard-components 0.1.1

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

@@ -0,0 +1,105 @@
+import { Chart, type ChartConfiguration, registerables, type TooltipItem } from 'chart.js';
+import { BarWithErrorBar, BarWithErrorBarsController } from 'chartjs-chart-error-bars';
+
+import { type PrevalenceOverTimeData, type PrevalenceOverTimeVariantData } from '../../query/queryPrevalenceOverTime';
+import GsChart from '../components/chart';
+import { LogitScale } from '../shared/charts/LogitScale';
+import { singleGraphColorRGBAById } from '../shared/charts/colors';
+import { type ConfidenceIntervalMethod, wilson95PercentConfidenceInterval } from '../shared/charts/confideceInterval';
+import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
+
+interface PrevalenceOverTimeBarChartProps {
+    data: PrevalenceOverTimeData;
+    yAxisScaleType: ScaleType;
+    confidenceIntervalMethod: ConfidenceIntervalMethod;
+}
+
+Chart.register(...registerables, LogitScale, BarWithErrorBarsController, BarWithErrorBar);
+
+const PrevalenceOverTimeBarChart = ({
+    data,
+    yAxisScaleType,
+    confidenceIntervalMethod,
+}: PrevalenceOverTimeBarChartProps) => {
+    const config: ChartConfiguration = {
+        type: BarWithErrorBarsController.id,
+        data: {
+            labels: data[0]?.content.map((dateRange) => dateRange.dateRange?.toString() ?? 'Unknown') || [],
+            datasets: data.map((graphData, index) => datasets(graphData, index, confidenceIntervalMethod)),
+        },
+        options: {
+            animation: false,
+            scales: {
+                y: getYAxisScale(yAxisScaleType),
+            },
+            plugins: {
+                legend: {
+                    display: false,
+                },
+                tooltip: tooltip(confidenceIntervalMethod),
+            },
+        },
+    };
+
+    return <GsChart configuration={config} />;
+};
+
+const datasets = (
+    prevalenceOverTimeVariant: PrevalenceOverTimeVariantData,
+    index: number,
+    confidenceIntervalMethod: ConfidenceIntervalMethod,
+) => {
+    const generalConfig = {
+        borderWidth: 1,
+        pointRadius: 0,
+        label: prevalenceOverTimeVariant.displayName,
+        backgroundColor: singleGraphColorRGBAById(index, 0.3),
+        borderColor: singleGraphColorRGBAById(index),
+    };
+
+    switch (confidenceIntervalMethod) {
+        case 'wilson':
+            return {
+                ...generalConfig,
+                data: prevalenceOverTimeVariant.content.map((dataPoint) => ({
+                    y: dataPoint.prevalence,
+                    yMin: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit,
+                    yMax: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit,
+                })),
+            };
+        default:
+            return {
+                ...generalConfig,
+                data: prevalenceOverTimeVariant.content.map((dataPoint) => dataPoint.prevalence),
+            };
+    }
+};
+
+const tooltip = (confidenceIntervalMethod: ConfidenceIntervalMethod) => {
+    const generalConfig = {
+        mode: 'index' as const,
+        intersect: false,
+    };
+
+    switch (confidenceIntervalMethod) {
+        case 'wilson':
+            return {
+                ...generalConfig,
+                callbacks: {
+                    label: (context: TooltipItem<'barWithErrorBars'>) => {
+                        const value = context.dataset.data[context.dataIndex] as {
+                            y: number;
+                            yMin: number;
+                            yMax: number;
+                        };
+
+                        return `${context.dataset.label}: ${value.y.toFixed(3)} (${value.yMin.toFixed(3)} - ${value.yMax.toFixed(3)})`;
+                    },
+                },
+            };
+        default:
+            return generalConfig;
+    }
+};
+
+export default PrevalenceOverTimeBarChart;

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

@@ -0,0 +1,86 @@
+import { Chart, type ChartConfiguration, registerables } from 'chart.js';
+
+import { type PrevalenceOverTimeData } from '../../query/queryPrevalenceOverTime';
+import { addUnit, minusTemporal } from '../../utils/temporal';
+import { getMinMaxNumber } from '../../utils/utils';
+import GsChart from '../components/chart';
+import { LogitScale } from '../shared/charts/LogitScale';
+import { singleGraphColorRGBAById } from '../shared/charts/colors';
+import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
+
+interface PrevalenceOverTimeBubbleChartProps {
+    data: PrevalenceOverTimeData;
+    yAxisScaleType: ScaleType;
+}
+
+Chart.register(...registerables, LogitScale);
+
+const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }: PrevalenceOverTimeBubbleChartProps) => {
+    const firstDate = data[0].content[0].dateRange!;
+    const total = data.map((graphData) => graphData.content.map((dataPoint) => dataPoint.total)).flat();
+    const [minTotal, maxTotal] = getMinMaxNumber(total)!;
+    const scaleBubble = (value: number) => {
+        return ((value - minTotal) / (maxTotal - minTotal)) * 4.5 + 0.5;
+    };
+
+    const config: ChartConfiguration = {
+        type: 'bubble',
+        data: {
+            datasets: data.map((graphData, index) => ({
+                label: graphData.displayName,
+                data: graphData.content
+                    .filter((dataPoint) => dataPoint.dateRange !== null)
+                    .map((dataPoint) => ({
+                        x: minusTemporal(dataPoint.dateRange!, firstDate),
+                        y: dataPoint.prevalence,
+                        r: scaleBubble(dataPoint.total),
+                    })),
+                borderWidth: 1,
+                pointRadius: 0,
+                backgroundColor: singleGraphColorRGBAById(index, 0.3),
+                borderColor: singleGraphColorRGBAById(index),
+            })),
+        },
+        options: {
+            animation: false,
+            scales: {
+                x: {
+                    ticks: {
+                        callback: (value) => addUnit(firstDate, value as number).toString(),
+                    },
+                },
+                y: getYAxisScale(yAxisScaleType),
+            },
+            plugins: {
+                legend: {
+                    display: false,
+                },
+                tooltip: {
+                    mode: 'index',
+                    intersect: false,
+                    callbacks: {
+                        title: (context) => {
+                            const dataset = data[context[0].datasetIndex!];
+                            const dataPoint = dataset.content[context[0].dataIndex!];
+                            return dataPoint.dateRange?.toString();
+                        },
+                        label: (context) => {
+                            const dataset = data[context.datasetIndex!];
+                            const dataPoint = dataset.content[context.dataIndex!];
+
+                            const percentage = (dataPoint.prevalence * 100).toFixed(2);
+                            const count = dataPoint.count.toFixed(0);
+                            const total = dataPoint.total.toFixed(0);
+
+                            return `${dataset.displayName}: ${percentage}%, ${count}/${total} samples`;
+                        },
+                    },
+                },
+            },
+        },
+    };
+
+    return <GsChart configuration={config} />;
+};
+
+export default PrevalenceOverTimeBubbleChart;

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

@@ -0,0 +1,141 @@
+import { Chart, type ChartConfiguration, registerables } from 'chart.js';
+import { type TooltipItem } from 'chart.js/dist/types';
+
+import { type PrevalenceOverTimeData, type PrevalenceOverTimeVariantData } from '../../query/queryPrevalenceOverTime';
+import GsChart from '../components/chart';
+import { LogitScale } from '../shared/charts/LogitScale';
+import { singleGraphColorRGBAById } from '../shared/charts/colors';
+import {
+    confidenceIntervalDataLabel,
+    type ConfidenceIntervalMethod,
+    wilson95PercentConfidenceInterval,
+} from '../shared/charts/confideceInterval';
+import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
+
+interface PrevalenceOverTimeLineChartProps {
+    data: PrevalenceOverTimeData;
+    yAxisScaleType: ScaleType;
+    confidenceIntervalMethod: ConfidenceIntervalMethod;
+}
+
+Chart.register(...registerables, LogitScale);
+
+const PrevalenceOverTimeLineChart = ({
+    data,
+    yAxisScaleType,
+    confidenceIntervalMethod,
+}: PrevalenceOverTimeLineChartProps) => {
+    const datasets = data.map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod)).flat();
+    const labels = data[0]?.content.map((dateRange) => dateRange.dateRange?.toString() ?? 'Unknown') || [];
+
+    const config: ChartConfiguration = {
+        type: 'line',
+        data: {
+            labels,
+            datasets,
+        },
+        options: {
+            animation: false,
+            scales: {
+                y: getYAxisScale(yAxisScaleType),
+            },
+            plugins: {
+                legend: {
+                    display: false,
+                },
+                tooltip: tooltip(confidenceIntervalMethod),
+            },
+        },
+    };
+
+    return <GsChart configuration={config} />;
+};
+
+const getDataset = (
+    prevalenceOverTimeVariant: PrevalenceOverTimeVariantData,
+    dataIndex: number,
+    confidenceIntervalMethod: ConfidenceIntervalMethod,
+) => {
+    switch (confidenceIntervalMethod) {
+        case 'wilson':
+            return [
+                getDatasetCIUpper(prevalenceOverTimeVariant, dataIndex),
+                getDatasetLine(prevalenceOverTimeVariant, dataIndex),
+                getDatasetCILower(prevalenceOverTimeVariant, dataIndex),
+            ].flat();
+        default:
+            return getDatasetLine(prevalenceOverTimeVariant, dataIndex);
+    }
+};
+
+const getDatasetCIUpper = (prevalenceOverTimeVariant: PrevalenceOverTimeVariantData, dataIndex: number) => ({
+    label: `${prevalenceOverTimeVariant.displayName} CI upper`,
+    data: prevalenceOverTimeVariant.content.map(
+        (dataPoint) => wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit,
+    ),
+    borderWidth: 0,
+    pointRadius: 0,
+    fill: '+1',
+    backgroundColor: singleGraphColorRGBAById(dataIndex, 0.3),
+});
+
+const getDatasetCILower = (prevalenceOverTimeVariant: PrevalenceOverTimeVariantData, dataIndex: number) => ({
+    label: `${prevalenceOverTimeVariant.displayName} CI lower`,
+    data: prevalenceOverTimeVariant.content.map(
+        (dataPoint) => wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit,
+    ),
+    borderWidth: 0,
+    pointRadius: 0,
+    fill: '-1',
+    backgroundColor: singleGraphColorRGBAById(dataIndex, 0.3),
+});
+
+const getDatasetLine = (prevalenceOverTimeVariant: PrevalenceOverTimeVariantData, dataIndex: number) => ({
+    label: prevalenceOverTimeVariant.displayName,
+    data: prevalenceOverTimeVariant.content.map((dataPoint) => dataPoint.prevalence),
+    borderWidth: 1,
+    pointRadius: 0,
+    borderColor: singleGraphColorRGBAById(dataIndex),
+    backgroundColor: singleGraphColorRGBAById(dataIndex),
+});
+
+const tooltip = (confidenceIntervalMethod?: ConfidenceIntervalMethod) => {
+    const generalConfig = {
+        mode: 'index' as const,
+        intersect: false,
+    };
+
+    switch (confidenceIntervalMethod) {
+        case 'wilson':
+            return {
+                ...generalConfig,
+                filter: ({ datasetIndex }: TooltipItem<'line'>) => {
+                    return datasetIndex % 3 === 1;
+                },
+                callbacks: {
+                    label: (context: TooltipItem<'line'>) => {
+                        if (context.datasetIndex % 3 === 1) {
+                            const value = context.dataset.data[context.dataIndex];
+                            const ciLower = context.dataset.data[context.dataIndex - 1];
+                            const ciUpper = context.dataset.data[context.dataIndex + 1];
+
+                            if (
+                                typeof value !== 'number' ||
+                                typeof ciLower !== 'number' ||
+                                typeof ciUpper !== 'number'
+                            ) {
+                                return '';
+                            }
+
+                            return confidenceIntervalDataLabel(value, ciLower, ciUpper, context.dataset.label);
+                        }
+                        return context.dataset.label;
+                    },
+                },
+            };
+        default:
+            return generalConfig;
+    }
+};
+
+export default PrevalenceOverTimeLineChart;

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

@@ -0,0 +1,46 @@
+import { getPrevalenceOverTimeTableData } from './getPrevalenceOverTimeTableData';
+import { type PrevalenceOverTimeData } from '../../query/queryPrevalenceOverTime';
+import { type TemporalGranularity } from '../../types';
+import { Table } from '../components/table';
+import { formatProportion } from '../shared/table/formatProportion';
+
+interface PrevalenceOverTimeTableProps {
+    data: PrevalenceOverTimeData;
+    granularity: TemporalGranularity;
+}
+
+const PrevalenceOverTimeTable = ({ data, granularity }: PrevalenceOverTimeTableProps) => {
+    const getSplitColumns = (data: PrevalenceOverTimeData) => {
+        return data.map((dataset) => ({
+            name: dataset.displayName,
+            columns: [
+                {
+                    name: 'prevalence',
+                    sort: true,
+                    formatter: (cell: number) => formatProportion(cell),
+                },
+                {
+                    name: 'count',
+                    sort: true,
+                },
+            ],
+        }));
+    };
+
+    const getColumns = (data: PrevalenceOverTimeData) => [
+        {
+            name: granularity,
+            sort: true,
+        },
+        ...getSplitColumns(data),
+    ];
+
+    const getData = (data: PrevalenceOverTimeData, granularity: TemporalGranularity) => {
+        const dataByHeader = getPrevalenceOverTimeTableData(data, granularity);
+        return Object.values(dataByHeader).map((row) => Object.values(row));
+    };
+
+    return <Table data={getData(data, granularity)} columns={getColumns(data)} pagination={false} />;
+};
+
+export default PrevalenceOverTimeTable;

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

@@ -0,0 +1,165 @@
+import denominator from './__mockData__/denominator.json';
+import denominatorOneVariant from './__mockData__/denominatorOneVariant.json';
+import numeratorEG from './__mockData__/numeratorEG.json';
+import numeratorJN1 from './__mockData__/numeratorJN1.json';
+import numeratorOneVariant from './__mockData__/numeratorOneVariant.json';
+import { PrevalenceOverTime, type PrevalenceOverTimeProps } from './prevalence-over-time';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import { LapisUrlContext } from '../LapisUrlContext';
+
+export default {
+    title: 'Visualization/PrevalenceOverTime',
+    component: PrevalenceOverTime,
+    parameters: {
+        fetchMock: {},
+    },
+    argTypes: {
+        numerator: { control: 'object' },
+        denominator: { control: 'object' },
+        granularity: {
+            options: ['day', 'week', 'month', 'year'],
+            control: { type: 'radio' },
+        },
+        smoothingWindow: { control: 'number' },
+        views: {
+            options: ['bar', 'line', 'bubble', 'table'],
+            control: { type: 'check' },
+        },
+        confidenceIntervalMethods: {
+            options: ['wilson'],
+            control: { type: 'check' },
+        },
+    },
+};
+
+const Template = {
+    render: (args: PrevalenceOverTimeProps) => (
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <PrevalenceOverTime
+                numerator={args.numerator}
+                denominator={args.denominator}
+                granularity={args.granularity}
+                smoothingWindow={args.smoothingWindow}
+                views={args.views}
+                confidenceIntervalMethods={args.confidenceIntervalMethods}
+            />
+        </LapisUrlContext.Provider>
+    ),
+};
+
+export const TwoVariants = {
+    ...Template,
+    args: {
+        numerator: [
+            { displayName: 'EG', country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' },
+            { displayName: 'JN.1', 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'],
+    },
+    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,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const OneVariant = {
+    ...Template,
+    args: {
+        numerator: { displayName: 'EG', 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'],
+    },
+    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,
+                    },
+                },
+            ],
+        },
+    },
+};