From ebc1a86b2ee5ba26c961770bffb30d011b4643d3 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 22 Dec 2020 22:36:39 +0100
Subject: [PATCH] Make showing of rangeBox based on parameter

---
 ts/graphs/GraphsPage.svelte | 69 +++++++++++++++++++------------------
 ts/graphs/bootstrap.ts      |  2 ++
 2 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte
index 2312d825c..5419d4cc5 100644
--- a/ts/graphs/GraphsPage.svelte
+++ b/ts/graphs/GraphsPage.svelte
@@ -13,6 +13,7 @@
 
     export let search: string;
     export let days: number;
+    export let withRangeBox: boolean;
 
     let sourceData: pb.BackendProto.GraphsOut | null = null;
 
@@ -95,44 +96,46 @@
     }
 </style>
 
-<div class="range-box">
-    <div class="spin {refreshing ? 'active' : ''}">◐</div>
+{#if withRangeBox}
+    <div class="range-box">
+        <div class="spin {refreshing ? 'active' : ''}">◐</div>
+
+        <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>
 
-    <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={() => {
+                type="text"
+                bind:value={displayedSearch}
+                on:keyup={searchKeyUp}
+                on:focus={() => {
                 searchRange = SearchRange.Custom;
-            }}
-            placeholder={searchLabel} />
-    </div>
+                }}
+                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 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>
-<div class="range-box-pad" />
+    <div class="range-box-pad" />
+{/if}
 
 <div tabindex="-1" class="no-focus-outline">
     {#if sourceData}
diff --git a/ts/graphs/bootstrap.ts b/ts/graphs/bootstrap.ts
index 2877fe8e2..86ecc42d6 100644
--- a/ts/graphs/bootstrap.ts
+++ b/ts/graphs/bootstrap.ts
@@ -21,6 +21,7 @@ export function graphs(
     graphs: any[], {
         search = "deck:current",
         days = 31,
+        withRangeBox = true,
     } = {},
 ): void {
     const nightMode = checkNightMode();
@@ -34,6 +35,7 @@ export function graphs(
                 nightMode,
                 search,
                 days,
+                withRangeBox,
             },
         });
     });