@genspectrum/dashboard-components 0.5.5 → 0.5.6

package/dist/genspectrum-components.d.ts

@@ -876,14 +876,14 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 

package/package.json

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

package/src/preact/numberSequencesOverTime/number-sequences-over-time-line-chart.tsx

@@ -0,0 +1,59 @@
+import { Chart, type ChartConfiguration, type ChartDataset, registerables } from 'chart.js';
+import { useMemo } from 'preact/hooks';
+
+import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData';
+import { type NumberOfSequencesDatasets } from '../../query/queryNumberOfSequencesOverTime';
+import GsChart from '../components/chart';
+import { singleGraphColorRGBAById } from '../shared/charts/colors';
+
+interface NumberSequencesOverBarChartProps {
+    data: NumberOfSequencesDatasets;
+}
+
+Chart.register(...registerables);
+
+export const NumberSequencesOverTimeLineChart = ({ data }: NumberSequencesOverBarChartProps) => {
+    const config: ChartConfiguration = useMemo(
+        () => ({
+            type: 'line',
+            data: {
+                datasets: getDatasets(data),
+            },
+            options: {
+                maintainAspectRatio: false,
+                animation: false,
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                    tooltip: {
+                        mode: 'index',
+                        intersect: false,
+                    },
+                },
+            },
+        }),
+        [data],
+    );
+
+    return <GsChart configuration={config} />;
+};
+
+const getDatasets = (data: NumberOfSequencesDatasets) => {
+    const tableData = getNumberOfSequencesOverTimeTableData(data, 'date');
+
+    return data.map(
+        ({ displayName }, index) =>
+            ({
+                borderWidth: 1,
+                pointRadius: 0,
+                label: displayName,
+                backgroundColor: singleGraphColorRGBAById(index, 0.3),
+                borderColor: singleGraphColorRGBAById(index),
+                data: tableData.map((row) => ({
+                    x: row.date,
+                    y: row[displayName],
+                })),
+            }) as ChartDataset<'line', { x: string; y: number }[]>,
+    );
+};

package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -1,6 +1,7 @@
 import { useContext } from 'preact/hooks';
 
 import { NumberSequencesOverTimeBarChart } from './number-sequences-over-time-bar-chart';
+import { NumberSequencesOverTimeLineChart } from './number-sequences-over-time-line-chart';
 import { NumberSequencesOverTimeTable } from './number-sequences-over-time-table';
 import {
     type NumberOfSequencesDatasets,
@@ -90,7 +91,7 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }: Num
             case 'bar':
                 return { title: 'Bar', content: <NumberSequencesOverTimeBarChart data={data} /> };
             case 'line':
-                return { title: 'Line', content: <div>not implemented, TODO #317</div> };
+                return { title: 'Line', content: <NumberSequencesOverTimeLineChart data={data} /> };
             case 'table':
                 return {
                     title: 'Table',

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

@@ -116,6 +116,17 @@ export const OneDatasetBarChart: StoryObj<NumberSequencesOverTimeProps> = {
     },
 };
 
+export const OneDatasetLineChart: StoryObj<NumberSequencesOverTimeProps> = {
+    ...Template,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-number-sequences-over-time');
+
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Line' })).toBeVisible());
+
+        await fireEvent.click(canvas.getByRole('button', { name: 'Line' }));
+    },
+};
+
 export const OneDatasetTable: StoryObj<NumberSequencesOverTimeProps> = {
     ...Template,
     play: async ({ canvasElement }) => {