progress, top bar

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

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>
+    <div class="spin {refreshing ? 'active' : ''}">◐</div>
-        <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 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-pad" />
-<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>
 
 <TodayStats {sourceData} />
 <CardCounts {sourceData} />

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

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);

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;
+}

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);