From 194a5128203000d7c44a971200d247cec9373833 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Fri, 26 Jun 2020 15:34:21 +1000
Subject: [PATCH] progress, top bar

---
 ts/src/stats/AddedGraph.svelte     |  2 +-
 ts/src/stats/GraphsPage.svelte     | 69 +++++++++++++++++-------------
 ts/src/stats/IntervalsGraph.svelte |  2 +-
 ts/src/stats/buttons.ts            |  2 -
 ts/src/stats/graphs.css            | 37 ++++++++++++++++
 ts/src/stats/hours.ts              |  2 -
 6 files changed, 78 insertions(+), 36 deletions(-)

diff --git a/ts/src/stats/AddedGraph.svelte b/ts/src/stats/AddedGraph.svelte
index 84aefdeeb..9b8b222c3 100644
--- a/ts/src/stats/AddedGraph.svelte
+++ b/ts/src/stats/AddedGraph.svelte
@@ -26,7 +26,7 @@
     <div class="graph">
         <h1>Added</h1>
 
-        <div class="range-box">
+        <div class="range-box-inner">
             <label>
                 <input type="radio" bind:group={range} value={AddedRange.Month} />
                 Month
diff --git a/ts/src/stats/GraphsPage.svelte b/ts/src/stats/GraphsPage.svelte
index f5a0324a1..e935fe545 100644
--- a/ts/src/stats/GraphsPage.svelte
+++ b/ts/src/stats/GraphsPage.svelte
@@ -27,13 +27,15 @@
     let searchRange: SearchRange = SearchRange.Deck;
     let range: GraphRange = GraphRange.Month;
     let days: number = 31;
+    let refreshing = false;
 
     let search = "deck:current";
     let displayedSearch = search;
 
     const refresh = async () => {
-        console.log(`search is ${search}`);
+        refreshing = true;
         sourceData = await getGraphData(search, days);
+        refreshing = false;
     };
 
     $: {
@@ -79,38 +81,45 @@
 </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>
+    <div class="spin {refreshing ? 'active' : ''}">◐</div>
 
-    <input type="text" bind:value={displayedSearch} on:keyup={searchKeyUp} />
+    <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>
+        <label>
+            <input type="radio" bind:group={searchRange} value={SearchRange.Custom} />
+            Custom
+        </label>
 
+        <input type="text" bind:value={displayedSearch} on:keyup={searchKeyUp} />
+    </div>
+
+    <div class="range-box-inner">
+        Review history:
+        <label>
+            <input type="radio" bind:group={range} value={GraphRange.Month} />
+            Month
+        </label>
+        <label>
+            <input type="radio" bind:group={range} value={GraphRange.Year} />
+            Year
+        </label>
+        <label>
+            <input type="radio" bind:group={range} value={GraphRange.All} />
+            All
+        </label>
+    </div>
 </div>
-
-<div class="range-box">
-    Review history:
-    <label>
-        <input type="radio" bind:group={range} value={GraphRange.Month} />
-        Month
-    </label>
-    <label>
-        <input type="radio" bind:group={range} value={GraphRange.Year} />
-        Year
-    </label>
-    <label>
-        <input type="radio" bind:group={range} value={GraphRange.All} />
-        All
-    </label>
-</div>
+<div class="range-box-pad" />
 
 <TodayStats {sourceData} />
 <CardCounts {sourceData} />
diff --git a/ts/src/stats/IntervalsGraph.svelte b/ts/src/stats/IntervalsGraph.svelte
index 079c48139..e6ef075d2 100644
--- a/ts/src/stats/IntervalsGraph.svelte
+++ b/ts/src/stats/IntervalsGraph.svelte
@@ -31,7 +31,7 @@
     <div class="graph intervals">
         <h1>Review Intervals</h1>
 
-        <div class="range-box">
+        <div class="range-box-inner">
             <label>
                 <input type="radio" bind:group={range} value={IntervalRange.Month} />
                 Month
diff --git a/ts/src/stats/buttons.ts b/ts/src/stats/buttons.ts
index 8a4d9822d..11e55b974 100644
--- a/ts/src/stats/buttons.ts
+++ b/ts/src/stats/buttons.ts
@@ -100,8 +100,6 @@ export function renderButtons(
         }),
     ];
 
-    console.log(data);
-
     const yMax = Math.max(...data.map((d) => d.count));
 
     const svg = select(svgElem);
diff --git a/ts/src/stats/graphs.css b/ts/src/stats/graphs.css
index 82fc26560..4fa20c420 100644
--- a/ts/src/stats/graphs.css
+++ b/ts/src/stats/graphs.css
@@ -47,6 +47,19 @@
 }
 
 .range-box {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 4em;
+    background: white;
+    padding: 0.5em;
+}
+
+.range-box-pad {
+    height: 4em;
+}
+
+.range-box-inner {
     display: flex;
     justify-content: center;
 }
@@ -71,3 +84,27 @@
     fill: none;
     pointer-events: all;
 }
+
+@keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+.spin {
+    position: absolute;
+    animation: spin;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    display: inline-block;
+    font-size: 2em;
+    opacity: 0;
+}
+
+.spin.active {
+    opacity: 1;
+    transition: opacity 1s;
+}
diff --git a/ts/src/stats/hours.ts b/ts/src/stats/hours.ts
index 22bc1aaed..818898506 100644
--- a/ts/src/stats/hours.ts
+++ b/ts/src/stats/hours.ts
@@ -63,8 +63,6 @@ export function renderHours(
 ): void {
     const data = sourceData.hours;
 
-    console.log(data);
-
     const yMax = Math.max(...data.map((d) => d.totalCount));
 
     const svg = select(svgElem);