add CumulativeOverlay.svelte for area styling

ts/graphs/CumulativeOverlay.svelte

@@ -0,0 +1,15 @@
+<!--
+    Copyright: Ankitects Pty Ltd and contributors
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<style lang="scss">
+    .cumulative-overlay {
+        pointer-events: none;
+        fill: var(--area-fill);
+        fill-opacity: var(--area-fill-opacity);
+        stroke: var(--area-stroke);
+        stroke-opacity: var(--area-stroke-opacity);
+    }
+</style>
+
+<path class="cumulative-overlay" />

ts/graphs/HistogramGraph.svelte

@@ -4,6 +4,7 @@
     import AxisTicks from "./AxisTicks.svelte";
     import { defaultGraphBounds } from "./graph-helpers";
     import NoDataOverlay from "./NoDataOverlay.svelte";
+    import CumulativeOverlay from "./CumulativeOverlay.svelte";
     import type { I18n } from "anki/i18n";
 
     export let data: HistogramData | null = null;
@@ -18,7 +19,7 @@
 <svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
     <g class="bars" />
     <g class="hoverzone" />
-    <path class="area" />
+    <CumulativeOverlay />
     <AxisTicks {bounds} />
     <NoDataOverlay {bounds} {i18n} />
 </svg>

ts/graphs/HourGraph.svelte

@@ -6,6 +6,7 @@
     import type { I18n } from "anki/i18n";
     import NoDataOverlay from "./NoDataOverlay.svelte";
     import GraphRangeRadios from "./GraphRangeRadios.svelte";
+    import CumulativeOverlay from "./CumulativeOverlay.svelte";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     export let i18n: I18n;
@@ -35,7 +36,7 @@
 
     <svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
         <g class="bars" />
-        <path class="area" />
+        <CumulativeOverlay />
         <g class="hoverzone" />
         <AxisTicks {bounds} />
         <NoDataOverlay {bounds} {i18n} />

ts/graphs/ReviewsGraph.svelte

@@ -7,6 +7,7 @@
     import type pb from "anki/backend_proto";
     import type { I18n } from "anki/i18n";
     import NoDataOverlay from "./NoDataOverlay.svelte";
+    import CumulativeOverlay from "./CumulativeOverlay.svelte";
     import GraphRangeRadios from "./GraphRangeRadios.svelte";
     import TableData from "./TableData.svelte";
 
@@ -63,7 +64,7 @@
         {#each [4, 3, 2, 1, 0] as i}
             <g class="bars{i}" />
         {/each}
-        <path class="area" />
+        <CumulativeOverlay />
         <g class="hoverzone" />
         <AxisTicks {bounds} />
         <NoDataOverlay {bounds} {i18n} />

ts/graphs/graphs_shared.scss

@@ -104,14 +104,6 @@
     padding-right: 0.5em;
 }
 
-.graph .area {
-    pointer-events: none;
-    fill: var(--area-fill);
-    fill-opacity: var(--area-fill-opacity);
-    stroke: var(--area-stroke);
-    stroke-opacity: var(--area-stroke-opacity);
-}
-
 .hoverzone rect {
     fill: none;
     pointer-events: all;

ts/graphs/histogram-graph.ts

@@ -133,7 +133,7 @@ export function histogramGraph(
                     .tickSizeOuter(0)
             );
 
-        svg.select("path.area")
+        svg.select("path.cumulative-overlay")
             .datum(areaData as any)
             .attr(
                 "d",

ts/graphs/hours.ts

@@ -171,7 +171,7 @@ export function renderHours(
                 .tickSizeOuter(0)
         );
 
-    svg.select("path.area")
+    svg.select("path.cumulative-overlay")
         .datum(data)
         .attr(
             "d",

ts/graphs/reviews.ts

@@ -340,7 +340,7 @@ export function renderReviews(
                     .tickSizeOuter(0)
             );
 
-        svg.select("path.area")
+        svg.select("path.cumulative-overlay")
             .datum(areaData as any)
             .attr(
                 "d",