Skip to content

Commit

Permalink
fix: overflow for curved sparklines + bezierCommand Y limit
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisburnell
chrisburnell committed Feb 19, 2024
1 parent 78e30d2 commit 45d8dce
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 38 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,0,10,3,8,2,7,1,9"></svg-sparkline>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9"></svg-sparkline>
```

### With curve

```html
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" curve="true"></svg-sparkline>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,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,0,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,0,10,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,0,10,3,8,2,7,1,9" animate="true"></svg-sparkline>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,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,0,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,0,10,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,0,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,0,10,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,0,10,3,8,2,7,1,9" color="purple"></svg-sparkline>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,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,0,10,3,8,2,7,1,9" gradient="true"></svg-sparkline>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,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,0,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,0,10,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,0,10,3,8,2,7,1,9" fill="true"></svg-sparkline>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,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,0,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,0,10,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,0,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,0,10,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,0,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,0,10,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,0,10,3,8,2,7,1,9" endpoint="false"></svg-sparkline>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,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,0,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,0,10,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,0,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,0,10,10,3,8,2,7,1,9" width="300" height="100"></svg-sparkline>
```

## Features
Expand Down
34 changes: 17 additions & 17 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,74 +17,74 @@
<body>
<h2 id="general">General usage example</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9"></svg-sparkline>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9"></svg-sparkline>
</p>
<h2 id="curve">With curve</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" curve="true"></svg-sparkline>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" curve="true"></svg-sparkline>
</p>
<h2 id="labels">Start and End labels</h2>
<p>
<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>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End"></svg-sparkline>
</p>
<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,0,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,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true"></svg-sparkline>
</p>
<h2 id="animation-duration">Defined Animation Duration</h2>
<p>
<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>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true" animation-duration="2s"></svg-sparkline>
</p>
<h2 id="animation-delay">Defined Animation Delay</h2>
<p>
<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>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true" animation-delay="2s"></svg-sparkline>
</p>
<h2 id="color">Defined color</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" color="red"></svg-sparkline>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" color="red"></svg-sparkline>
</p>
<h2 id="gradient">With gradient</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" gradient="true"></svg-sparkline>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" gradient="true"></svg-sparkline>
</p>
<h2 id="gradient-color">Defined gradient color</h2>
<p>
<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>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" gradient="true" gradient-color="red"></svg-sparkline>
</p>
<h2 id="fill">Filled</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" fill="true"></svg-sparkline>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" fill="true"></svg-sparkline>
</p>
<h2 id="fill-color">Defined fill color</h2>
<p>
<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>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" fill="true" fill-color="red"></svg-sparkline>
</p>
<h2 id="endpoint-color">Defined endpoint color</h2>
<p>
<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>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" endpoint-color="red"></svg-sparkline>
</p>
<h2 id="endpoint">Without endpoint</h2>
<p>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,10,3,8,2,7,1,9" endpoint="false"></svg-sparkline>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" endpoint="false"></svg-sparkline>
</p>
<h2 id="endpoint-width">Defined endpoint width</h2>
<p>
<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>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" endpoint-width="12"></svg-sparkline>
</p>
<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,0,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,0,10,10,3,8,2,7,1,9" line-width="10"></svg-sparkline>
</p>
<h2 id="size">Defined width and height</h2>
<p>
<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>
<svg-sparkline values="8,3,2,7,9,1,5,6,4,0,0,10,10,3,8,2,7,1,9" width="300" height="100"></svg-sparkline>
</p>
<h2 id="server-rendered">Server-rendered and hydrated</h2>
<p>
<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 values="8,3,2,7,9,1,5,6,4,0,0,10,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.8",
"version": "1.0.9",
"description": "A Web Component that builds an SVG Sparkline.",
"main": "svg-sparkline.js",
"scripts": {
Expand Down
9 changes: 5 additions & 4 deletions svg-sparkline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ class SVGSparkline extends HTMLElement {
padding: var(--svg-sparkline-padding, 0.375rem);
overflow: visible;
}
svg:has(title) {
:host(:not([curve])) svg:has(title),
:host(:not([curve="true"])) svg:has(title) {
overflow-y: hidden;
}
svg[aria-hidden] {
Expand Down Expand Up @@ -282,11 +283,11 @@ class SVGSparkline extends HTMLElement {
return [x, y]
}

bezierCommand(point, i, a) {
bezierCommand(point, i, a, maxY) {
const [csx, csy] = this.controlPoint(i - 1, a[i - 1], i - 2, a[i - 2], i, point)
const [cex, cey] = this.controlPoint(i, point, i - 1, a[i - 1], i + 1, a[i + 1], true)

return `C ${this.maxDecimals(csx)},${this.maxDecimals(csy)} ${this.maxDecimals(cex)},${this.maxDecimals(cey)} ${i},${point}`
return `C ${this.maxDecimals(csx)},${Math.min(maxY, this.maxDecimals(csy))} ${this.maxDecimals(cex)},${Math.min(maxY, this.maxDecimals(cey))} ${i},${point}`
}

getPath(values, curve) {
Expand All @@ -296,7 +297,7 @@ class SVGSparkline extends HTMLElement {
.map((point) => Math.max(...values) - point + 1)
// generate a string
.reduce((acc, point, i, a) => {
return i < 1 ? `M 0,${point}` : `${acc} ${curve ? this.bezierCommand(point, i, a) : this.lineCommand(point, i)}`
return i < 1 ? `M 0,${point}` : `${acc} ${curve ? this.bezierCommand(point, i, a, this.getAdjustedMaxY(values)) : this.lineCommand(point, i)}`
}, "")
)
}
Expand Down

0 comments on commit 45d8dce

Please sign in to comment.