From 7bc41366e84efe8363cb868f7750aacb53653bb8 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Sun, 21 Mar 2021 19:50:35 +1000
Subject: [PATCH] add CumulativeOverlay.svelte for area styling

---
 ts/graphs/CumulativeOverlay.svelte | 15 +++++++++++++++
 ts/graphs/HistogramGraph.svelte    |  3 ++-
 ts/graphs/HourGraph.svelte         |  3 ++-
 ts/graphs/ReviewsGraph.svelte      |  3 ++-
 ts/graphs/graphs_shared.scss       |  8 --------
 ts/graphs/histogram-graph.ts       |  2 +-
 ts/graphs/hours.ts                 |  2 +-
 ts/graphs/reviews.ts               |  2 +-
 8 files changed, 24 insertions(+), 14 deletions(-)
 create mode 100644 ts/graphs/CumulativeOverlay.svelte

diff --git a/ts/graphs/CumulativeOverlay.svelte b/ts/graphs/CumulativeOverlay.svelte
new file mode 100644
index 000000000..333b7b49d
--- /dev/null
+++ b/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" />
diff --git a/ts/graphs/HistogramGraph.svelte b/ts/graphs/HistogramGraph.svelte
index d178d33af..479e6a807 100644
--- a/ts/graphs/HistogramGraph.svelte
+++ b/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>
diff --git a/ts/graphs/HourGraph.svelte b/ts/graphs/HourGraph.svelte
index 63406dd3f..7711bb129 100644
--- a/ts/graphs/HourGraph.svelte
+++ b/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} />
diff --git a/ts/graphs/ReviewsGraph.svelte b/ts/graphs/ReviewsGraph.svelte
index 78f3b7fbf..b64a4337c 100644
--- a/ts/graphs/ReviewsGraph.svelte
+++ b/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} />
diff --git a/ts/graphs/graphs_shared.scss b/ts/graphs/graphs_shared.scss
index bc75c3206..65d9143d4 100644
--- a/ts/graphs/graphs_shared.scss
+++ b/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;
diff --git a/ts/graphs/histogram-graph.ts b/ts/graphs/histogram-graph.ts
index 9f2e4e409..fa8ee1b14 100644
--- a/ts/graphs/histogram-graph.ts
+++ b/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",
diff --git a/ts/graphs/hours.ts b/ts/graphs/hours.ts
index 3c3e34542..9d4903c1a 100644
--- a/ts/graphs/hours.ts
+++ b/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",
diff --git a/ts/graphs/reviews.ts b/ts/graphs/reviews.ts
index ee2f7a343..0a5df12cd 100644
--- a/ts/graphs/reviews.ts
+++ b/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",