From d27167ce8681b9687e18a7d63112ab3b8aaf379c Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 21 Jan 2021 01:51:00 +0100
Subject: [PATCH] Add first GraphPreferences which are not hooked to backend
 yet

---
 ts/graphs/BUILD.bazel                     |  1 +
 ts/graphs/CardCounts.svelte               |  6 +++---
 ts/graphs/SeparateInactiveCheckbox.svelte |  7 +++++--
 ts/graphs/preferences.ts                  | 15 +++++++++++++++
 4 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 ts/graphs/preferences.ts

diff --git a/ts/graphs/BUILD.bazel b/ts/graphs/BUILD.bazel
index 0db44c94d..34d8083bc 100644
--- a/ts/graphs/BUILD.bazel
+++ b/ts/graphs/BUILD.bazel
@@ -71,6 +71,7 @@ ts_library(
         "@npm//d3-transition",
         "@npm//lodash.debounce",
         "@npm//lodash.throttle",
+        "@npm//svelte",
     ],
 )
 
diff --git a/ts/graphs/CardCounts.svelte b/ts/graphs/CardCounts.svelte
index 3a8489632..5f6675138 100644
--- a/ts/graphs/CardCounts.svelte
+++ b/ts/graphs/CardCounts.svelte
@@ -5,11 +5,11 @@
     import type pb from "anki/backend_proto";
     import type { I18n } from "anki/i18n";
     import SeparateInactiveCheckbox from "./SeparateInactiveCheckbox.svelte";
+    import { cardCountsSeparateInactive } from "./preferences";
 
     export let sourceData: pb.BackendProto.GraphsOut;
     export let i18n: I18n;
 
-    let separateInactive = true;
     let svg = null as HTMLElement | SVGElement | null;
 
     let bounds = defaultGraphBounds();
@@ -20,7 +20,7 @@
     let tableData = (null as unknown) as TableDatum[];
 
     $: {
-        graphData = gatherData(sourceData, separateInactive, i18n);
+        graphData = gatherData(sourceData, $cardCountsSeparateInactive, i18n);
         tableData = renderCards(svg as any, bounds, graphData);
     }
 
@@ -56,7 +56,7 @@
     <h1>{graphData.title}</h1>
 
     <div class="range-box-inner">
-        <SeparateInactiveCheckbox bind:separateInactive {i18n} />
+        <SeparateInactiveCheckbox {i18n} />
     </div>
 
     <div class="counts-outer">
diff --git a/ts/graphs/SeparateInactiveCheckbox.svelte b/ts/graphs/SeparateInactiveCheckbox.svelte
index 24fac6072..405a58f83 100644
--- a/ts/graphs/SeparateInactiveCheckbox.svelte
+++ b/ts/graphs/SeparateInactiveCheckbox.svelte
@@ -1,10 +1,13 @@
 <script lang="typescript">
     import type { I18n } from "anki/i18n";
+    import { cardCountsSeparateInactive } from "./preferences";
 
     export let i18n: I18n;
-    export let separateInactive: boolean = true;
 
     const label = i18n.tr(i18n.TR.STATISTICS_COUNTS_SEPARATE_SUSPENDED_BURIED_CARDS);
 </script>
 
-<label> <input type="checkbox" bind:checked={separateInactive} /> {label} </label>
+<label>
+    <input type="checkbox" bind:checked={$cardCountsSeparateInactive} />
+    {label}
+</label>
diff --git a/ts/graphs/preferences.ts b/ts/graphs/preferences.ts
new file mode 100644
index 000000000..8d03bfe59
--- /dev/null
+++ b/ts/graphs/preferences.ts
@@ -0,0 +1,15 @@
+import { writable } from "svelte/store";
+
+function createPreference(initialValue: unknown) {
+    const { subscribe, set } = writable(initialValue);
+
+    return {
+        subscribe,
+        set: (v: unknown) => {
+            set(v);
+        },
+    };
+}
+
+export const calendarFirstDayOfWeek = createPreference(0);
+export const cardCountsSeparateInactive = createPreference(false);