diff --git a/ts/src/stats/GraphsPage.svelte b/ts/src/stats/GraphsPage.svelte
index e207c17ed..633a6adba 100644
--- a/ts/src/stats/GraphsPage.svelte
+++ b/ts/src/stats/GraphsPage.svelte
@@ -14,14 +14,38 @@
 
     let data: pb.BackendProto.GraphsOut | null = null;
 
-    let search = "deck:current";
+    enum SearchRange {
+        Deck = 1,
+        Collection = 2,
+        Custom = 3,
+    }
+
+    let searchRange: SearchRange = SearchRange.Deck;
     let range: GraphRange = GraphRange.Month;
     let days: number = 31;
 
+    let search = "deck:current";
+
     const refresh = async () => {
+        console.log(`search is ${search}`);
         data = await getGraphData(search, days);
     };
 
+    $: {
+        switch (searchRange as SearchRange) {
+            case SearchRange.Deck:
+                search = "deck:current";
+                refresh();
+                break;
+            case SearchRange.Collection:
+                search = "";
+                refresh();
+                break;
+            case SearchRange.Custom:
+                break;
+        }
+    }
+
     $: {
         const rangeTmp = range as GraphRange; // ts workaround
         switch (rangeTmp) {
@@ -47,6 +71,25 @@
 </script>
 
 <div class="range-box">
+    <label>
+        <input type="radio" bind:group={searchRange} value={SearchRange.Deck} />
+        Deck
+    </label>
+    <label>
+        <input type="radio" bind:group={searchRange} value={SearchRange.Collection} />
+        Collection
+    </label>
+    <label>
+        <input type="radio" bind:group={searchRange} value={SearchRange.Custom} />
+        Custom
+    </label>
+
+    <input type="text" bind:value={search} on:input={scheduleRefresh} />
+
+</div>
+
+<div class="range-box">
+    Review history:
     <label>
         <input type="radio" bind:group={range} value={GraphRange.Month} />
         Month
@@ -61,6 +104,4 @@
     </label>
 </div>
 
-<input type="text" bind:value={search} on:input={scheduleRefresh} />
-
 <IntervalsGraph {data} />