Put RangeBox into its own component

ts/graphs/GraphsPage.svelte

@@ -3,6 +3,7 @@
 </script>
 
 <script lang="typescript">
+    import RangeBox from './RangeBox.svelte'
     import { afterUpdate } from 'svelte';
 
     import type { I18n } from "anki/i18n";
@@ -14,73 +15,24 @@
     export let graphs: any[];
 
     export let search: string;
-    export let revlogRange: RevlogRange;
+    export let days: number;
     export let withRangeBox: boolean;
 
-    let dataPromise;
+    let dataPromise: Promise<pb.backend.GraphsOut>;
-    let days;
+    let revlogRange: RevlogRange;
 
-    enum SearchRange {
+    const refreshWith = (search, days, revlogRange) => {
-        Deck = 1,
+        dataPromise = getGraphData(search, days);
-        Collection = 2,
+        revlogRange = days > 365
-        Custom = 3,
+                ? RevlogRange.All
+                : RevlogRange.Year;
     }
 
-    let displayedSearch = search;
+    const refresh = (event) => {
-    let searchRange: SearchRange = SearchRange.Deck;
+        refreshWith(event.detail.search, event.detail.days)
-
-    let refreshing = true;
-
-    $: {
-        if (refreshing) {
-            dataPromise = getGraphData(search, days);
-            console.log(dataPromise)
-            refreshing = false;
-        }
     }
 
-    $: {
+    refreshWith(search, days)
-        // refresh if either of these change
-        search;
-        days;
-        refreshing = true;
-    }
-
-    $: {
-        switch (searchRange as SearchRange) {
-            case SearchRange.Deck:
-                search = displayedSearch = "deck:current";
-                break;
-            case SearchRange.Collection:
-                search = displayedSearch = "";
-                break;
-            case SearchRange.Custom:
-                break;
-        }
-    }
-
-    $: {
-        switch (revlogRange as RevlogRange) {
-            case RevlogRange.Year:
-                days = 365;
-                break;
-            case RevlogRange.All:
-                days = 0;
-                break;
-        }
-    }
-
-    const searchKeyUp = (e: KeyboardEvent) => {
-        // fetch data on enter
-        if (e.key == "Enter") {
-            const wasSame = search == displayedSearch;
-            search = displayedSearch;
-            if (wasSame) {
-                //  force a refresh (user may have changed current deck, etc)
-                refreshing = true;
-            }
-        }
-    };
 
     let spinner: HTMLDivElement;
     let graphsContainer: HTMLDivElement;
@@ -94,51 +46,10 @@
             graphsContainer.style.minHeight = '';
         }
     })
-
-    const year = i18n.tr(i18n.TR.STATISTICS_RANGE_1_YEAR_HISTORY);
-    const deck = i18n.tr(i18n.TR.STATISTICS_RANGE_DECK);
-    const collection = i18n.tr(i18n.TR.STATISTICS_RANGE_COLLECTION);
-    const searchLabel = i18n.tr(i18n.TR.STATISTICS_RANGE_SEARCH);
-    const all = i18n.tr(i18n.TR.STATISTICS_RANGE_ALL_HISTORY);
 </script>
 
 {#if withRangeBox}
-    <div class="range-box">
+    <RangeBox {i18n} {search} {days} on:update={refresh} />
-        <div class="range-box-inner">
-            <label>
-                <input type="radio" bind:group={searchRange} value={SearchRange.Deck} />
-                {deck}
-            </label>
-            <label>
-                <input
-                    type="radio"
-                    bind:group={searchRange}
-                    value={SearchRange.Collection} />
-                {collection}
-            </label>
-
-            <input
-                type="text"
-                bind:value={displayedSearch}
-                on:keyup={searchKeyUp}
-                on:focus={() => {
-                searchRange = SearchRange.Custom;
-                }}
-                placeholder={searchLabel} />
-        </div>
-
-        <div class="range-box-inner">
-            <label>
-                <input type="radio" bind:group={revlogRange} value={RevlogRange.Year} />
-                {year}
-            </label>
-            <label>
-                <input type="radio" bind:group={revlogRange} value={RevlogRange.All} />
-                {all}
-            </label>
-        </div>
-    </div>
-    <div class="range-box-pad" />
 {/if}
 
 <div bind:this={graphsContainer} tabindex="-1" class="no-focus-outline">

ts/graphs/RangeBox.svelte

@@ -0,0 +1,109 @@
+<script lang="typescript">
+    import { createEventDispatcher } from 'svelte';
+
+    import { RevlogRange } from "./graph-helpers";
+
+    enum SearchRange {
+        Deck = 1,
+        Collection = 2,
+        Custom = 3,
+    }
+
+    export let i18n: I18n;
+
+    const dispatch = createEventDispatcher();
+
+    let revlogRange: RevlogRange = RevlogRange.Year;
+    let searchRange: SearchRange = SearchRange.Deck;
+
+    let days;
+    let search;
+    let displayedSearch = search;
+
+    const update = () => {
+        dispatch('update', {
+            days: days,
+            search: search,
+            searchRange: searchRange,
+        });
+    };
+
+    $: {
+        switch (searchRange as SearchRange) {
+            case SearchRange.Deck:
+                search = displayedSearch = "deck:current";
+                update()
+                break;
+            case SearchRange.Collection:
+                search = displayedSearch = "";
+                update()
+                break;
+        }
+    }
+
+    $: {
+        switch (revlogRange as RevlogRange) {
+            case RevlogRange.Year:
+                days = 365;
+                update()
+                break;
+            case RevlogRange.All:
+                days = 0;
+                update()
+                break;
+        }
+    }
+
+    const searchKeyUp = (e: KeyboardEvent) => {
+        // fetch data on enter
+        if (e.key == "Enter") {
+            search = displayedSearch;
+            update()
+        }
+    };
+
+    const year = i18n.tr(i18n.TR.STATISTICS_RANGE_1_YEAR_HISTORY);
+    const deck = i18n.tr(i18n.TR.STATISTICS_RANGE_DECK);
+    const collection = i18n.tr(i18n.TR.STATISTICS_RANGE_COLLECTION);
+    const searchLabel = i18n.tr(i18n.TR.STATISTICS_RANGE_SEARCH);
+    const all = i18n.tr(i18n.TR.STATISTICS_RANGE_ALL_HISTORY);
+</script>
+
+
+<div class="range-box">
+    <div class="range-box-inner">
+        <label>
+            <input type="radio" bind:group={searchRange} value={SearchRange.Deck} />
+            {deck}
+        </label>
+        <label>
+            <input
+                type="radio"
+                bind:group={searchRange}
+                value={SearchRange.Collection} />
+            {collection}
+        </label>
+
+        <input
+            type="text"
+            bind:value={displayedSearch}
+            on:keyup={searchKeyUp}
+            on:focus={() => {
+            searchRange = SearchRange.Custom;
+            }}
+            placeholder={searchLabel} />
+    </div>
+
+    <div class="range-box-inner">
+        <label>
+            <input type="radio" bind:group={revlogRange} value={RevlogRange.Year} />
+            {year}
+        </label>
+        <label>
+            <input type="radio" bind:group={revlogRange} value={RevlogRange.All} />
+            {all}
+        </label>
+    </div>
+</div>
+
+<div class="range-box-pad" />

ts/graphs/bootstrap.ts

@@ -22,7 +22,7 @@ export function graphs(
     target: HTMLDivElement,
     graphs: any[], {
         search = "deck:current",
-        revlogRange = RevlogRange.Year,
+        days = 365,
         withRangeBox = true,
     } = {},
 ): void {
@@ -36,7 +36,7 @@ export function graphs(
                 graphs,
                 nightMode,
                 search,
-                revlogRange,
+                days,
                 withRangeBox,
             },
         });