feat(components): show unknown date only in bar chart and table in pr…

…evalence-over-time #272
GenSpectrum · Jun 28, 2024 · 956d1a7 · 956d1a7
1 parent b991df7
commit 956d1a7
Show file tree

Hide file tree

Showing 17 changed files with 162 additions and 91 deletions.
diff --git a/components/package-lock.json b/components/package-lock.json
diff --git a/components/package.json b/components/package.json
@@ -87,8 +87,8 @@
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
         "@types/node": "^20.12.7",
-        "@typescript-eslint/eslint-plugin": "^7.7.0",
-        "@typescript-eslint/parser": "^7.7.0",
+        "@typescript-eslint/eslint-plugin": "^7.14.1",
+        "@typescript-eslint/parser": "^7.14.1",
         "autoprefixer": "^10.4.19",
         "daisyui": "^4.10.2",
         "depcheck": "^1.4.7",

diff --git a/components/src/preact/prevalenceOverTime/__mockData__/denominatorFilterOneDataset.json b/components/src/preact/prevalenceOverTime/__mockData__/denominatorFilterOneDataset.json
@@ -25,7 +25,7 @@
             "count": 289
         },
         {
-            "date": "2023-11-24",
+            "date": null,
             "count": 516
         },
         {

diff --git a/components/src/preact/prevalenceOverTime/__mockData__/numeratorFilterOneDataset.json b/components/src/preact/prevalenceOverTime/__mockData__/numeratorFilterOneDataset.json
@@ -25,7 +25,7 @@
             "count": 27
         },
         {
-            "date": "2023-11-24",
+            "date": null,
             "count": 62
         },
         {

diff --git a/components/src/preact/prevalenceOverTime/prevalence-over-time-bar-chart.tsx b/components/src/preact/prevalenceOverTime/prevalence-over-time-bar-chart.tsx
@@ -3,6 +3,7 @@ import { BarWithErrorBar, BarWithErrorBarsController } from 'chartjs-chart-error
 
 import { maxInData } from './prevalence-over-time';
 import { type PrevalenceOverTimeData, type PrevalenceOverTimeVariantData } from '../../query/queryPrevalenceOverTime';
+import type { Temporal } from '../../utils/temporal';
 import GsChart from '../components/chart';
 import { LogitScale } from '../shared/charts/LogitScale';
 import { singleGraphColorRGBAById } from '../shared/charts/colors';
@@ -25,14 +26,24 @@ const PrevalenceOverTimeBarChart = ({
     confidenceIntervalMethod,
     yAxisMaxConfig,
 }: PrevalenceOverTimeBarChartProps) => {
+    const nullFirstData = data.map((variantData) => {
+        return {
+            content: variantData.content.sort(sortNullToBeginningThenByDate),
+            displayName: variantData.displayName,
+        };
+    });
+
+    const datasets = nullFirstData.map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod));
+
     const maxY =
-        yAxisScaleType !== 'logit' ? getYAxisMax(maxInData(data), yAxisMaxConfig?.[yAxisScaleType]) : undefined;
+        yAxisScaleType !== 'logit'
+            ? getYAxisMax(maxInData(nullFirstData), yAxisMaxConfig?.[yAxisScaleType])
+            : undefined;
 
     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)),
+            datasets,
         },
         options: {
             maintainAspectRatio: false,
@@ -52,7 +63,23 @@ const PrevalenceOverTimeBarChart = ({
     return <GsChart configuration={config} />;
 };
 
-const datasets = (
+function sortNullToBeginningThenByDate(
+    a: { count: number; prevalence: number; total: number; dateRange: Temporal | null },
+    b: {
+        count: number;
+        prevalence: number;
+        total: number;
+        dateRange: Temporal | null;
+    },
+) {
+    return a.dateRange === null
+        ? -1
+        : b.dateRange === null
+          ? 1
+          : a.dateRange.toString().localeCompare(b.dateRange.toString());
+}
+
+const getDataset = (
     prevalenceOverTimeVariant: PrevalenceOverTimeVariantData,
     index: number,
     confidenceIntervalMethod: ConfidenceIntervalMethod,
@@ -73,12 +100,15 @@ const datasets = (
                     y: dataPoint.prevalence,
                     yMin: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit,
                     yMax: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit,
+                    x: dataPoint.dateRange?.toString() ?? 'Unknown',
                 })),
             };
         default:
             return {
                 ...generalConfig,
-                data: prevalenceOverTimeVariant.content.map((dataPoint) => dataPoint.prevalence),
+                data: prevalenceOverTimeVariant.content.map((dataPoint) => {
+                    return { y: dataPoint.prevalence, x: dataPoint.dateRange };
+                }),
             };
     }
 };

diff --git a/components/src/preact/prevalenceOverTime/prevalence-over-time-bubble-chart.tsx b/components/src/preact/prevalenceOverTime/prevalence-over-time-bubble-chart.tsx
@@ -23,20 +23,29 @@ const PrevalenceOverTimeBubbleChart = ({
     yAxisScaleType,
     yAxisMaxConfig,
 }: PrevalenceOverTimeBubbleChartProps) => {
-    const firstDate = data[0].content[0].dateRange!;
-    const total = data.map((graphData) => graphData.content.map((dataPoint) => dataPoint.total)).flat();
+    const nonNullDateRangeData = data.map((variantData) => {
+        return {
+            content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
+            displayName: variantData.displayName,
+        };
+    });
+
+    const firstDate = nonNullDateRangeData[0].content[0].dateRange!;
+    const total = nonNullDateRangeData.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 maxY =
-        yAxisScaleType !== 'logit' ? getYAxisMax(maxInData(data), yAxisMaxConfig?.[yAxisScaleType]) : undefined;
+        yAxisScaleType !== 'logit'
+            ? getYAxisMax(maxInData(nonNullDateRangeData), yAxisMaxConfig?.[yAxisScaleType])
+            : undefined;
 
     const config: ChartConfiguration = {
         type: 'bubble',
         data: {
-            datasets: data.map((graphData, index) => ({
+            datasets: nonNullDateRangeData.map((graphData, index) => ({
                 label: graphData.displayName,
                 data: graphData.content
                     .filter((dataPoint) => dataPoint.dateRange !== null)
@@ -71,12 +80,12 @@ const PrevalenceOverTimeBubbleChart = ({
                     intersect: false,
                     callbacks: {
                         title: (context) => {
-                            const dataset = data[context[0].datasetIndex!];
+                            const dataset = nonNullDateRangeData[context[0].datasetIndex!];
                             const dataPoint = dataset.content[context[0].dataIndex!];
                             return dataPoint.dateRange?.toString();
                         },
                         label: (context) => {
-                            const dataset = data[context.datasetIndex!];
+                            const dataset = nonNullDateRangeData[context.datasetIndex!];
                             const dataPoint = dataset.content[context.dataIndex!];
 
                             const percentage = (dataPoint.prevalence * 100).toFixed(2);