From 9dc6e059f232ebe3bb68abbc3da0d7f869d21a29 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Sun, 21 Mar 2021 19:58:39 +1000
Subject: [PATCH] add HoverColumns.svelte for hoverzone styling

---
 ts/graphs/ButtonsGraph.svelte   |  3 ++-
 ts/graphs/HistogramGraph.svelte |  4 +++-
 ts/graphs/HourGraph.svelte      |  3 ++-
 ts/graphs/HoverColumns.svelte   | 19 +++++++++++++++++++
 ts/graphs/ReviewsGraph.svelte   |  3 ++-
 ts/graphs/buttons.ts            |  2 +-
 ts/graphs/graphs_shared.scss    | 10 ----------
 ts/graphs/histogram-graph.ts    |  2 +-
 ts/graphs/hours.ts              |  2 +-
 ts/graphs/reviews.ts            |  2 +-
 10 files changed, 32 insertions(+), 18 deletions(-)
 create mode 100644 ts/graphs/HoverColumns.svelte

diff --git a/ts/graphs/ButtonsGraph.svelte b/ts/graphs/ButtonsGraph.svelte
index 2c9eafddf..d84194125 100644
--- a/ts/graphs/ButtonsGraph.svelte
+++ b/ts/graphs/ButtonsGraph.svelte
@@ -6,6 +6,7 @@
     import type { I18n } from "anki/i18n";
     import NoDataOverlay from "./NoDataOverlay.svelte";
     import GraphRangeRadios from "./GraphRangeRadios.svelte";
+    import HoverColumns from "./HoverColumns.svelte";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     export let i18n: I18n;
@@ -36,7 +37,7 @@
 
     <svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
         <g class="bars" />
-        <g class="hoverzone" />
+        <HoverColumns />
         <AxisTicks {bounds} />
         <NoDataOverlay {bounds} {i18n} />
     </svg>
diff --git a/ts/graphs/HistogramGraph.svelte b/ts/graphs/HistogramGraph.svelte
index 479e6a807..e8b11894d 100644
--- a/ts/graphs/HistogramGraph.svelte
+++ b/ts/graphs/HistogramGraph.svelte
@@ -5,6 +5,8 @@
     import { defaultGraphBounds } from "./graph-helpers";
     import NoDataOverlay from "./NoDataOverlay.svelte";
     import CumulativeOverlay from "./CumulativeOverlay.svelte";
+    import HoverColumns from "./HoverColumns.svelte";
+
     import type { I18n } from "anki/i18n";
 
     export let data: HistogramData | null = null;
@@ -18,7 +20,7 @@
 
 <svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
     <g class="bars" />
-    <g class="hoverzone" />
+    <HoverColumns />
     <CumulativeOverlay />
     <AxisTicks {bounds} />
     <NoDataOverlay {bounds} {i18n} />
diff --git a/ts/graphs/HourGraph.svelte b/ts/graphs/HourGraph.svelte
index 7711bb129..642f55934 100644
--- a/ts/graphs/HourGraph.svelte
+++ b/ts/graphs/HourGraph.svelte
@@ -7,6 +7,7 @@
     import NoDataOverlay from "./NoDataOverlay.svelte";
     import GraphRangeRadios from "./GraphRangeRadios.svelte";
     import CumulativeOverlay from "./CumulativeOverlay.svelte";
+    import HoverColumns from "./HoverColumns.svelte";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     export let i18n: I18n;
@@ -37,7 +38,7 @@
     <svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
         <g class="bars" />
         <CumulativeOverlay />
-        <g class="hoverzone" />
+        <HoverColumns />
         <AxisTicks {bounds} />
         <NoDataOverlay {bounds} {i18n} />
     </svg>
diff --git a/ts/graphs/HoverColumns.svelte b/ts/graphs/HoverColumns.svelte
new file mode 100644
index 000000000..652ea568a
--- /dev/null
+++ b/ts/graphs/HoverColumns.svelte
@@ -0,0 +1,19 @@
+<!--
+    Copyright: Ankitects Pty Ltd and contributors
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<style lang="scss">
+    .hover-columns {
+        :global(rect) {
+            fill: none;
+            pointer-events: all;
+
+            &:hover {
+                fill: grey;
+                opacity: 0.05;
+            }
+        }
+    }
+</style>
+
+<g class="hover-columns" />
diff --git a/ts/graphs/ReviewsGraph.svelte b/ts/graphs/ReviewsGraph.svelte
index b64a4337c..7e2361dbe 100644
--- a/ts/graphs/ReviewsGraph.svelte
+++ b/ts/graphs/ReviewsGraph.svelte
@@ -10,6 +10,7 @@
     import CumulativeOverlay from "./CumulativeOverlay.svelte";
     import GraphRangeRadios from "./GraphRangeRadios.svelte";
     import TableData from "./TableData.svelte";
+    import HoverColumns from "./HoverColumns.svelte";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     export let revlogRange: RevlogRange;
@@ -65,7 +66,7 @@
             <g class="bars{i}" />
         {/each}
         <CumulativeOverlay />
-        <g class="hoverzone" />
+        <HoverColumns />
         <AxisTicks {bounds} />
         <NoDataOverlay {bounds} {i18n} />
     </svg>
diff --git a/ts/graphs/buttons.ts b/ts/graphs/buttons.ts
index 88d9a734c..07408fdcf 100644
--- a/ts/graphs/buttons.ts
+++ b/ts/graphs/buttons.ts
@@ -248,7 +248,7 @@ export function renderButtons(
         return `${button}: ${d.buttonNum}<br>${timesPressed}: ${d.count}<br>${correctStr}`;
     }
 
-    svg.select("g.hoverzone")
+    svg.select("g.hover-columns")
         .selectAll("rect")
         .data(data)
         .join("rect")
diff --git a/ts/graphs/graphs_shared.scss b/ts/graphs/graphs_shared.scss
index 65d9143d4..c81a61966 100644
--- a/ts/graphs/graphs_shared.scss
+++ b/ts/graphs/graphs_shared.scss
@@ -104,16 +104,6 @@
     padding-right: 0.5em;
 }
 
-.hoverzone rect {
-    fill: none;
-    pointer-events: all;
-}
-
-.hoverzone rect:hover {
-    fill: grey;
-    opacity: 0.05;
-}
-
 @keyframes spin {
     0% {
         -webkit-transform: rotate(0deg);
diff --git a/ts/graphs/histogram-graph.ts b/ts/graphs/histogram-graph.ts
index fa8ee1b14..ff2dc6bcf 100644
--- a/ts/graphs/histogram-graph.ts
+++ b/ts/graphs/histogram-graph.ts
@@ -161,7 +161,7 @@ export function histogramGraph(
 
     // hover/tooltip
     const hoverzone = svg
-        .select("g.hoverzone")
+        .select("g.hover-columns")
         .selectAll("rect")
         .data(hoverData)
         .join("rect")
diff --git a/ts/graphs/hours.ts b/ts/graphs/hours.ts
index 9d4903c1a..c8918f66b 100644
--- a/ts/graphs/hours.ts
+++ b/ts/graphs/hours.ts
@@ -202,7 +202,7 @@ export function renderHours(
     }
 
     // hover/tooltip
-    svg.select("g.hoverzone")
+    svg.select("g.hover-columns")
         .selectAll("rect")
         .data(data)
         .join("rect")
diff --git a/ts/graphs/reviews.ts b/ts/graphs/reviews.ts
index 0a5df12cd..353a700d2 100644
--- a/ts/graphs/reviews.ts
+++ b/ts/graphs/reviews.ts
@@ -367,7 +367,7 @@ export function renderReviews(
     ]);
 
     // hover/tooltip
-    svg.select("g.hoverzone")
+    svg.select("g.hover-columns")
         .selectAll("rect")
         .data(hoverData)
         .join("rect")