add HoverColumns.svelte for hoverzone styling

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>

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} />

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>

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" />

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>

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

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

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

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

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