Pass in graphs as arguments into graphs()

ts/graphs/GraphsPage.svelte

@@ -6,19 +6,10 @@
     import type { I18n } from "anki/i18n";
     import type pb from "anki/backend_proto";
     import { getGraphData, RevlogRange } from "./graph-helpers";
-    import IntervalsGraph from "./IntervalsGraph.svelte";
-    import EaseGraph from "./EaseGraph.svelte";
-    import AddedGraph from "./AddedGraph.svelte";
-    import TodayStats from "./TodayStats.svelte";
-    import ButtonsGraph from "./ButtonsGraph.svelte";
-    import CardCounts from "./CardCounts.svelte";
-    import HourGraph from "./HourGraph.svelte";
-    import FutureDue from "./FutureDue.svelte";
-    import ReviewsGraph from "./ReviewsGraph.svelte";
-    import CalendarGraph from "./CalendarGraph.svelte";
 
     export let i18n: I18n;
     export let nightMode: boolean;
+    export let graphs: any[];
 
     let sourceData: pb.BackendProto.GraphsOut | null = null;
 
@@ -144,15 +135,8 @@
 
 <div tabindex="-1" class="no-focus-outline">
     {#if sourceData}
-        <TodayStats {sourceData} {i18n} />
-        <FutureDue {sourceData} {i18n} />
-        <CalendarGraph {sourceData} {revlogRange} {i18n} {nightMode} />
-        <ReviewsGraph {sourceData} {revlogRange} {i18n} />
-        <CardCounts {sourceData} {i18n} />
-        <IntervalsGraph {sourceData} {i18n} />
-        <EaseGraph {sourceData} {i18n} />
-        <HourGraph {sourceData} {revlogRange} {i18n} />
-        <ButtonsGraph {sourceData} {revlogRange} {i18n} />
-        <AddedGraph {sourceData} {i18n} />
+        {#each graphs as Graph}
+            <Graph {sourceData} {revlogRange} {i18n} {nightMode} />
+        {/each}
     {/if}
 </div>

ts/graphs/bootstrap.ts

@@ -5,11 +5,28 @@ import { setupI18n } from "anki/i18n";
 import GraphsPage from "./GraphsPage.svelte";
 import { checkNightMode } from "anki/nightmode";
 
-export function graphs(target: HTMLDivElement): void {
+export { default as IntervalsGraph } from "./IntervalsGraph.svelte";
+export { default as EaseGraph } from "./EaseGraph.svelte";
+export { default as AddedGraph } from "./AddedGraph.svelte";
+export { default as TodayStats } from "./TodayStats.svelte";
+export { default as ButtonsGraph } from "./ButtonsGraph.svelte";
+export { default as CardCounts } from "./CardCounts.svelte";
+export { default as HourGraph } from "./HourGraph.svelte";
+export { default as FutureDue } from "./FutureDue.svelte";
+export { default as ReviewsGraph } from "./ReviewsGraph.svelte";
+export { default as CalendarGraph } from "./CalendarGraph.svelte";
+
+export function graphs(target: HTMLDivElement, graphs: any[]): void {
+    const nightMode = checkNightMode();
+
     setupI18n().then((i18n) => {
         new GraphsPage({
             target,
-            props: { i18n, nightMode: checkNightMode() },
+            props: {
+                i18n,
+                graphs,
+                nightMode,
+            },
         });
     });
 }

ts/graphs/graphs.html

@@ -11,6 +11,19 @@
     <script src="../js/vendor/protobuf.min.js"></script>
     <script src="graphs.js"></script>
     <script>
-        anki.graphs(document.getElementById("main"));
+        anki.graphs(
+            document.getElementById("main"), [
+                anki.TodayStats,
+                anki.FutureDue,
+                anki.CalendarGraph,
+                anki.ReviewsGraph,
+                anki.CardCounts,
+                anki.IntervalsGraph,
+                anki.EaseGraph,
+                anki.HourGraph,
+                anki.ButtonsGraph,
+                anki.AddedGraph,
+            ],
+        );
     </script>
 </html>