From 46320e5d67cb1dae3ca812400bd85ab1ae7d36ef Mon Sep 17 00:00:00 2001
From: Chris Burnell <me@chrisburnell.com>
Date: Mon, 19 Feb 2024 17:00:57 +0800
Subject: [PATCH] refactor: don't need linearGradient for fills; fix: values of
 0 should not be filled underneath

---
 README.md        | 32 +++++++++++-----------
 demo.html        | 71 +++++++++++++++++++++++++-----------------------
 package.json     |  2 +-
 svg-sparkline.js | 12 ++++++--
 4 files changed, 63 insertions(+), 54 deletions(-)

diff --git a/README.md b/README.md
index 2e85e2c..0d40b1f 100644
--- a/README.md
+++ b/README.md
@@ -15,97 +15,97 @@ A Web Component that builds an SVG Sparkline.
 ```html
 <script type="module" src="svg-sparkline.js"></script>
 
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9"></svg-sparkline>
 ```
 
 ### With curve
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" curve="true"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" curve="true"></svg-sparkline>
 ```
 
 ### Start and End labels
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" start-label="Start" end-label="End"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" start-label="Start" end-label="End"></svg-sparkline>
 ```
 
 ### Animated
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" animate="true"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" animate="true"></svg-sparkline>
 ```
 
 ### Defined Animation Duration
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" animate="true" animation-duration="2s"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" animate="true" animation-duration="2s"></svg-sparkline>
 ```
 
 ### Defined Animation Delay
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" animate="true" animation-delay="2s"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" animate="true" animation-delay="2s"></svg-sparkline>
 ```
 
 ### Defined color
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" color="purple"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" color="purple"></svg-sparkline>
 ```
 
 ### With gradient
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" gradient="true"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" gradient="true"></svg-sparkline>
 ```
 
 ### Defined gradient color
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" gradient="true" gradient-color="rebeccapurple"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" gradient="true" gradient-color="rebeccapurple"></svg-sparkline>
 ```
 
 ### Filled
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" fill="true"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" fill="true"></svg-sparkline>
 ```
 
 ### Defined fill color
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" fill="true" fill-color="rebeccapurple"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" fill="true" fill-color="rebeccapurple"></svg-sparkline>
 ```
 
 ### Defined endpoint color
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" endpoint-color="red"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" endpoint-color="red"></svg-sparkline>
 ```
 
 ### Defined endpoint width
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" endpoint-width="12"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" endpoint-width="12"></svg-sparkline>
 ```
 
 ### Without endpoint
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" endpoint="false"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" endpoint="false"></svg-sparkline>
 ```
 
 ### Defined line width
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" line-width="6"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" line-width="6"></svg-sparkline>
 ```
 
 ### Defined width and height
 
 ```html
-<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" width="300" height="100"></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" width="300" height="100"></svg-sparkline>
 ```
 
 ## Features
diff --git a/demo.html b/demo.html
index cdc52dc..ff99045 100644
--- a/demo.html
+++ b/demo.html
@@ -15,73 +15,76 @@
     <script type="module" src="svg-sparkline.js"></script>
   </head>
   <body>
-    <h2>General usage example</h2>
+    <h2 id="general">General usage example</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9"></svg-sparkline>
     </p>
-    <h2>With curve</h2>
+    <h2 id="curve">With curve</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" curve="true"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" curve="true"></svg-sparkline>
     </p>
-    <h2>Start and End labels</h2>
+    <h2 id="labels">Start and End labels</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" start-label="Start" end-label="End"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" start-label="Start" end-label="End"></svg-sparkline>
     </p>
-    <h2>Animated</h2>
+    <h2 id="animate">Animated</h2>
+    <p>Only animates when the <code>prefers-reduced-motion</code> media query has the value <code>no-preference</code>.</p>
+    <p>Waits until the sparkline is visible in the viewport to initate the animation.</p>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true"></svg-sparkline>
     </p>
-    <h2>Defined Animation Duration</h2>
+    <h2 id="animation-duration">Defined Animation Duration</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true" animation-duration="2s"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true" animation-duration="2s"></svg-sparkline>
     </p>
-    <h2>Defined Animation Delay</h2>
+    <h2 id="animation-delay">Defined Animation Delay</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true" animation-delay="2s"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true" animation-delay="2s"></svg-sparkline>
     </p>
-    <h2>Defined color</h2>
+    <h2 id="color">Defined color</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" color="red"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" color="red"></svg-sparkline>
     </p>
-    <h2>With gradient</h2>
+    <h2 id="gradient">With gradient</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" gradient="true"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" gradient="true"></svg-sparkline>
     </p>
-    <h2>Defined gradient color</h2>
+    <h2 id="gradient-color">Defined gradient color</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" gradient="true" gradient-color="red"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" gradient="true" gradient-color="red"></svg-sparkline>
     </p>
-    <h2>Filled</h2>
+    <h2 id="fill">Filled</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" fill="true"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" fill="true"></svg-sparkline>
     </p>
-    <h2>Defined fill color</h2>
+    <h2 id="fill-color">Defined fill color</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" fill="true" fill-color="red"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" fill="true" fill-color="red"></svg-sparkline>
     </p>
-    <h2>Defined endpoint color</h2>
+    <h2 id="endpoint-color">Defined endpoint color</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" endpoint-color="red"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" endpoint-color="red"></svg-sparkline>
     </p>
-    <h2>Without endpoint</h2>
+    <h2 id="endpoint">Without endpoint</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" endpoint="false"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" endpoint="false"></svg-sparkline>
     </p>
-    <h2>Defined endpoint width</h2>
+    <h2 id="endpoint-width">Defined endpoint width</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" endpoint-width="12"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" endpoint-width="12"></svg-sparkline>
     </p>
-    <h2>Defined line width</h2>
+    <h2 id="line-width">Defined line width</h2>
+    <p>Doesn’t look great when the <code>line-width</code> is greater than the <code>endpoint-width</code>!</p>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" line-width="10"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" line-width="10"></svg-sparkline>
     </p>
-    <h2>Defined width and height</h2>
+    <h2 id="size">Defined width and height</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" width="300" height="100"></svg-sparkline>
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" width="300" height="100"></svg-sparkline>
     </p>
-    <h2>Server-rendered and hydrated</h2>
+    <h2 id="server-rendered">Server-rendered and hydrated</h2>
     <p>
-        <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" start-label="Start" end-label="End">
+        <svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" start-label="Start" end-label="End">
           <span>Start</span>
           <svg width="200px" height="36px" viewBox="0 0 15 12" preserveAspectRatio="none" role="img">
             <title>Sparkline ranging from 1 to 10.</title>
diff --git a/package.json b/package.json
index fc6f01d..c25e681 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chrisburnell/svg-sparkline",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A Web Component that builds an SVG Sparkline.",
   "main": "svg-sparkline.js",
   "scripts": {
diff --git a/svg-sparkline.js b/svg-sparkline.js
index b75da92..9e9bff6 100644
--- a/svg-sparkline.js
+++ b/svg-sparkline.js
@@ -112,8 +112,9 @@ class SVGSparkline extends HTMLElement {
         <title>Sparkline ranging from ${this.getMinY(this.values)} to ${this.getMaxY(this.values)}.</title>
     `)
 
-    if (this.gradient || this.fill) {
-      const gradientID = this.makeID(6)
+    let gradientID
+    if (this.gradient) {
+      gradientID = this.makeID(6)
       content.push(`
         <defs>
           <linearGradient id="svg-sparkline-gradient-${gradientID}" gradientTransform="rotate(90)">
@@ -121,6 +122,11 @@ class SVGSparkline extends HTMLElement {
             <stop offset="100%" stop-color="transparent" />
           </linearGradient>
         </defs>
+      `)
+    }
+
+    if (this.gradient || this.fill) {
+      content.push(`
         <path
             d="${this.getPath(this.values, this.curve)} L ${this.getFinalX(this.values)} ${this.getAdjustedMaxY(this.values)} L 0 ${this.getAdjustedMaxY(this.values)} Z"
             fill="${this.fill ? gradientColor : `url('#svg-sparkline-gradient-${gradientID}')`}"
@@ -309,7 +315,7 @@ class SVGSparkline extends HTMLElement {
   }
 
   getAdjustedMaxY(values) {
-    return this.getMaxY(values) + 2
+    return this.getMaxY(values) + 1
   }
 
   makeID(length) {