Skip to content

Commit

Permalink
refactor: don't need linearGradient for fills; fix: values of 0 shoul…
Browse files Browse the repository at this point in the history 
…d not be filled underneath
  • Loading branch information
@chrisburnell
chrisburnell committed Feb 19, 2024
1 parent b2174b2 commit 46320e5
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 54 deletions.
32 changes: 16 additions & 16 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
71 changes: 37 additions & 34 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
12 changes: 9 additions & 3 deletions svg-sparkline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,15 +112,21 @@ 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)">
<stop offset="0%" stop-color="${gradientColor}" />
<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}')`}"
Expand Down Expand Up @@ -309,7 +315,7 @@ class SVGSparkline extends HTMLElement {
}

getAdjustedMaxY(values) {
return this.getMaxY(values) + 2
return this.getMaxY(values) + 1
}

makeID(length) {
Expand Down

0 comments on commit 46320e5

Please sign in to comment.