@genspectrum/dashboard-components 0.5.5 → 0.5.7

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

@@ -1775,7 +1775,7 @@ const MutationComparisonTabs = ({
     {
       tabs,
       toolbar: /* @__PURE__ */ u$1(
-        Toolbar$3,
+        Toolbar$4,
         {
           displayedSegments,
           setDisplayedSegments,
@@ -1789,7 +1789,7 @@ const MutationComparisonTabs = ({
     }
   );
 };
-const Toolbar$3 = ({
+const Toolbar$4 = ({
   displayedSegments,
   setDisplayedSegments,
   displayedMutationTypes,
@@ -5042,7 +5042,7 @@ const MutationsTabs = ({ mutationsData, sequenceType, views, pageSize }) => {
   };
   const tabs = views.map((view) => getTab(view));
   const toolbar = (activeTab) => /* @__PURE__ */ u$1(
-    Toolbar$2,
+    Toolbar$3,
     {
       activeTab,
       displayedSegments,
@@ -5056,7 +5056,7 @@ const MutationsTabs = ({ mutationsData, sequenceType, views, pageSize }) => {
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
 };
-const Toolbar$2 = ({
+const Toolbar$3 = ({
   activeTab,
   displayedSegments,
   setDisplayedSegments,
@@ -5089,7 +5089,7 @@ const Toolbar$2 = ({
         {
           className: "mx-1 btn btn-xs",
           getData: () => getMutationsTableData(filteredData.tableData, proportionInterval),
-          filename: "substitutionsAndDeletions.csv"
+          filename: "substitutions_and_deletions.csv"
         }
       )
     ] }),
@@ -6732,16 +6732,20 @@ const ConfidenceIntervalSelector = ({
     }
   );
 };
+const scaleTypeItem = [
+  { label: "Linear", value: "linear" },
+  { label: "Logarithmic", value: "logarithmic" },
+  { label: "Logit", value: "logit" }
+];
 const ScalingSelector = ({
   yAxisScaleType,
   setYAxisScaleType,
-  className
+  className,
+  enabledTypes
 }) => {
   const items = [
     { label: "y axis scaling type", value: "none", disabled: true },
-    { label: "Linear", value: "linear" },
-    { label: "Logarithmic", value: "logarithmic" },
-    { label: "Logit", value: "logit" }
+    ...scaleTypeItem.filter((item) => enabledTypes === void 0 || enabledTypes.includes(item.value))
   ];
   return /* @__PURE__ */ u$1(
     Select,
@@ -6871,7 +6875,7 @@ const PrevalenceOverTimeTabs = ({
   };
   const tabs = views.map((view) => getTab(view));
   const toolbar = (activeTab) => /* @__PURE__ */ u$1(
-    Toolbar$1,
+    Toolbar$2,
     {
       activeTab,
       yAxisScaleType,
@@ -6885,7 +6889,7 @@ const PrevalenceOverTimeTabs = ({
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
 };
-const Toolbar$1 = ({
+const Toolbar$2 = ({
   activeTab,
   yAxisScaleType,
   setYAxisScaleType,
@@ -6910,7 +6914,7 @@ const Toolbar$1 = ({
       {
         className: "mx-1 btn btn-xs",
         getData: () => getPrevalenceOverTimeTableData(data, granularity),
-        filename: "prevalence-over-time.csv"
+        filename: "prevalence_over_time.csv"
       }
     ),
     /* @__PURE__ */ u$1(PrevalenceOverTimeInfo, {})
@@ -7506,9 +7510,9 @@ const AggregatedDataTabs = ({ data, views, fields, pageSize }) => {
     }
   };
   const tabs = views.map((view) => getTab(view));
-  return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar: /* @__PURE__ */ u$1(Toolbar, { data }) });
+  return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar: /* @__PURE__ */ u$1(Toolbar$1, { data }) });
 };
-const Toolbar = ({ data }) => {
+const Toolbar$1 = ({ data }) => {
   return /* @__PURE__ */ u$1("div", { class: "flex flex-row", children: [
     /* @__PURE__ */ u$1(CsvDownloadButton, { className: "mx-1 btn btn-xs", getData: () => data, filename: "aggregate.csv" }),
     /* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for aggregate" })
@@ -7615,16 +7619,67 @@ const getNumberOfSequencesOverTimeTableData = (data, dateRangeKey) => {
   });
 };
 Chart.register(...registerables);
-const NumberSequencesOverTimeBarChart = ({ data }) => {
+const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }) => {
   const config = T(
     () => ({
       type: "bar",
+      data: {
+        datasets: getDatasets$1(data)
+      },
+      options: {
+        maintainAspectRatio: false,
+        animation: false,
+        scales: {
+          y: {
+            type: getYAxisScale(yAxisScaleType).type
+          }
+        },
+        plugins: {
+          legend: {
+            display: false
+          },
+          tooltip: {
+            mode: "index",
+            intersect: false
+          }
+        }
+      }
+    }),
+    [data, yAxisScaleType]
+  );
+  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, yAxisScaleType }) => {
+  const config = T(
+    () => ({
+      type: "line",
       data: {
         datasets: getDatasets(data)
       },
       options: {
         maintainAspectRatio: false,
         animation: false,
+        scales: {
+          y: {
+            type: getYAxisScale(yAxisScaleType).type
+          }
+        },
         plugins: {
           legend: {
             display: false
@@ -7636,7 +7691,7 @@ const NumberSequencesOverTimeBarChart = ({ data }) => {
         }
       }
     }),
-    [data]
+    [data, yAxisScaleType]
   );
   return /* @__PURE__ */ u$1(GsChart, { configuration: config });
 };
@@ -7645,6 +7700,7 @@ const getDatasets = (data) => {
   return data.map(
     ({ displayName }, index) => ({
       borderWidth: 1,
+      pointRadius: 0,
       label: displayName,
       backgroundColor: singleGraphColorRGBAById(index, 0.3),
       borderColor: singleGraphColorRGBAById(index),
@@ -7716,12 +7772,19 @@ const NumberSequencesOverTimeInner = ({
   return /* @__PURE__ */ u$1(NumberSequencesOverTimeTabs, { views, data, granularity, pageSize });
 };
 const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }) => {
+  const [yAxisScaleType, setYAxisScaleType] = h("linear");
   const getTab = (view) => {
     switch (view) {
       case "bar":
-        return { title: "Bar", content: /* @__PURE__ */ u$1(NumberSequencesOverTimeBarChart, { data }) };
+        return {
+          title: "Bar",
+          content: /* @__PURE__ */ u$1(NumberSequencesOverTimeBarChart, { data, yAxisScaleType })
+        };
       case "line":
-        return { title: "Line", content: /* @__PURE__ */ u$1("div", { children: "not implemented, TODO #317" }) };
+        return {
+          title: "Line",
+          content: /* @__PURE__ */ u$1(NumberSequencesOverTimeLineChart, { data, yAxisScaleType })
+        };
       case "table":
         return {
           title: "Table",
@@ -7731,8 +7794,48 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }) =>
         throw new Error(`Unknown view: ${view}`);
     }
   };
-  return /* @__PURE__ */ u$1(Tabs, { tabs: views.map((view) => getTab(view)) });
+  return /* @__PURE__ */ u$1(
+    Tabs,
+    {
+      tabs: views.map((view) => getTab(view)),
+      toolbar: (activeTab) => /* @__PURE__ */ u$1(
+        Toolbar,
+        {
+          activeTab,
+          data,
+          granularity,
+          yAxisScaleType,
+          setYAxisScaleType
+        }
+      )
+    }
+  );
+};
+const Toolbar = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleType }) => {
+  return /* @__PURE__ */ u$1(Fragment, { children: [
+    activeTab !== "Table" && /* @__PURE__ */ u$1(
+      ScalingSelector,
+      {
+        yAxisScaleType,
+        setYAxisScaleType,
+        enabledTypes: ["linear", "logarithmic"]
+      }
+    ),
+    /* @__PURE__ */ u$1(
+      CsvDownloadButton,
+      {
+        className: "mx-1 btn btn-xs",
+        getData: () => getNumberOfSequencesOverTimeTableData(data, granularity),
+        filename: "number_of_sequences_over_time.csv"
+      }
+    ),
+    /* @__PURE__ */ u$1(NumberSequencesOverTimeInfo, {})
+  ] });
 };
+const NumberSequencesOverTimeInfo = () => /* @__PURE__ */ u$1(Info, { height: "100px", children: [
+  /* @__PURE__ */ u$1(InfoHeadline1, { children: "Number of sequences over time" }),
+  /* @__PURE__ */ u$1(InfoParagraph, { children: /* @__PURE__ */ u$1("a", { href: "https://github.com/GenSpectrum/dashboard-components/issues/315", children: "TODO" }) })
+] });
 var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
 var __decorateClass$4 = (decorators, target, key, kind) => {