From 4b67b7668c10db84287541955b2136c4c0be41ca Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Fri, 7 Sep 2018 18:00:25 -0700
Subject: [PATCH] Use "global" gradients via a clipping mask and a rect w/100%
 height

---
 ui/app/components/line-chart.js            |  4 +++
 ui/app/templates/components/line-chart.hbs | 29 +++++++++++-----------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/ui/app/components/line-chart.js b/ui/app/components/line-chart.js
index 633c33945..e268c49fa 100644
--- a/ui/app/components/line-chart.js
+++ b/ui/app/components/line-chart.js
@@ -48,6 +48,10 @@ export default Component.extend(WindowResizable, {
     return `line-chart-fill-${guidFor(this)}`;
   }),
 
+  maskId: computed(function() {
+    return `line-chart-mask-${guidFor(this)}`;
+  }),
+
   activeDatum: null,
 
   activeDatumLabel: computed('activeDatum', function() {
diff --git a/ui/app/templates/components/line-chart.hbs b/ui/app/templates/components/line-chart.hbs
index a5add6a24..33e8dc19f 100644
--- a/ui/app/templates/components/line-chart.hbs
+++ b/ui/app/templates/components/line-chart.hbs
@@ -1,29 +1,28 @@
 <svg>
   <defs>
-    <clipPath>
-      <linearGradient x1="0" x2="0" y1="0" y2="1" class="{{chartClass}}" id="{{fillId}}">
-        <stop class="start" offset="0%" />
-        <stop class="end" offset="100%" />
-      </linearGradient>
+    <linearGradient x1="0" x2="0" y1="0" y2="1" class="{{chartClass}}" id="{{fillId}}">
+      <stop class="start" offset="0%" />
+      <stop class="end" offset="100%" />
+    </linearGradient>
+    <clipPath id="{{maskId}}">
+      <path class="fill" d="{{area}}" />
     </clipPath>
   </defs>
   <g class="y-gridlines gridlines" transform="translate({{yAxisOffset}}, 0)"></g>
   <g class="canvas {{chartClass}}">
     <path class="line" d="{{line}}" />
-    <path class="fill" d="{{area}}" fill="url(#{{fillId}})" />
+    <rect class="area" x="0" y="0" width="{{yAxisOffset}}" height="{{xAxisOffset}}" fill="url(#{{fillId}})" clip-path="url(#{{maskId}})" />
     <rect class="hover-target" x="0" y="0" width="{{yAxisOffset}}" height="{{xAxisOffset}}" />
   </g>
   <g class="x-axis axis" transform="translate(0, {{xAxisOffset}})"></g>
   <g class="y-axis axis" transform="translate({{yAxisOffset}}, 0)"></g>
 </svg>
 <div class="chart-tooltip is-snappy {{if isActive "active" "inactive"}}" style={{tooltipStyle}}>
-  <ol>
-    <p>
-      <span class="label">
-        <span class="color-swatch {{chartClass}}" />
-        {{activeDatumLabel}}
-      </span>
-      <span class="value">{{activeDatumValue}}</span>
-    </p>
-  </ol>
+  <p>
+    <span class="label">
+      <span class="color-swatch {{chartClass}}" />
+      {{activeDatumLabel}}
+    </span>
+    <span class="value">{{activeDatumValue}}</span>
+  </p>
 </div>