@genspectrum/dashboard-components 0.5.5 → 0.5.6

package/custom-elements.json

@@ -1891,6 +1891,14 @@
           },
           "default": "{ ...Template, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-number-sequences-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Bar' })).toBeVisible()); await fireEvent.click(canvas.getByRole('button', { name: 'Bar' })); }, }"
         },
+        {
+          "kind": "variable",
+          "name": "OneDatasetLineChart",
+          "type": {
+            "text": "StoryObj<NumberSequencesOverTimeProps>"
+          },
+          "default": "{ ...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' })); }, }"
+        },
         {
           "kind": "variable",
           "name": "OneDatasetTable",
@@ -1933,6 +1941,14 @@
             "module": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "OneDatasetLineChart",
+          "declaration": {
+            "name": "OneDatasetLineChart",
+            "module": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "OneDatasetTable",

package/dist/dashboard-components.js

@@ -7619,6 +7619,47 @@ const NumberSequencesOverTimeBarChart = ({ data }) => {
   const config = T(
     () => ({
       type: "bar",
+      data: {
+        datasets: getDatasets$1(data)
+      },
+      options: {
+        maintainAspectRatio: false,
+        animation: false,
+        plugins: {
+          legend: {
+            display: false
+          },
+          tooltip: {
+            mode: "index",
+            intersect: false
+          }
+        }
+      }
+    }),
+    [data]
+  );
+  return /* @__PURE__ */ u$1(GsChart, { configuration: config });
+};
+const getDatasets$1 = (data) => {
+  const tableData = getNumberOfSequencesOverTimeTableData(data, "date");
+  return data.map(
+    ({ displayName }, index) => ({
+      borderWidth: 1,
+      label: displayName,
+      backgroundColor: singleGraphColorRGBAById(index, 0.3),
+      borderColor: singleGraphColorRGBAById(index),
+      data: tableData.map((row) => ({
+        x: row.date,
+        y: row[displayName]
+      }))
+    })
+  );
+};
+Chart.register(...registerables);
+const NumberSequencesOverTimeLineChart = ({ data }) => {
+  const config = T(
+    () => ({
+      type: "line",
       data: {
         datasets: getDatasets(data)
       },
@@ -7645,6 +7686,7 @@ const getDatasets = (data) => {
   return data.map(
     ({ displayName }, index) => ({
       borderWidth: 1,
+      pointRadius: 0,
       label: displayName,
       backgroundColor: singleGraphColorRGBAById(index, 0.3),
       borderColor: singleGraphColorRGBAById(index),
@@ -7721,7 +7763,7 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }) =>
       case "bar":
         return { title: "Bar", content: /* @__PURE__ */ u$1(NumberSequencesOverTimeBarChart, { data }) };
       case "line":
-        return { title: "Line", content: /* @__PURE__ */ u$1("div", { children: "not implemented, TODO #317" }) };
+        return { title: "Line", content: /* @__PURE__ */ u$1(NumberSequencesOverTimeLineChart, { data }) };
       case "table":
         return {
           title: "Table",