feat(components): number of sequences over time: implement line chart…

… view

closes #317

components/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 }[]>,
+    );
+};

components/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',

components/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 }) => {

components/tests/visualizationStories.ts

@@ -31,6 +31,7 @@ export const visualizationStories = [
     { id: 'visualization-mutation-comparison--venn-diagram', title: 'Mutation comparison' },
     { id: 'visualization-aggregate--table', title: 'Aggregate', testDownloadWithFilename: 'aggregate.csv' },
     { id: 'visualization-number-sequences-over-time--one-dataset-bar-chart', title: 'Number of sequences over time' },
+    { id: 'visualization-number-sequences-over-time--one-dataset-line-chart', title: 'Number of sequences over time' },
     { id: 'visualization-number-sequences-over-time--one-dataset-table', title: 'Number of sequences over time' },
     { id: 'visualization-number-sequences-over-time--two-datasets', title: 'Number of sequences over time' },
     {