diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..46a6d6d --- /dev/null +++ b/.npmignore @@ -0,0 +1,2 @@ +.github +demo.html \ No newline at end of file diff --git a/demo.html b/demo.html index ae04143..cdc52dc 100644 --- a/demo.html +++ b/demo.html @@ -5,7 +5,6 @@ svg-sparkline Web Component Demo - diff --git a/package.json b/package.json index 214f360..fc6f01d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@chrisburnell/svg-sparkline", - "version": "1.0.5", + "version": "1.0.6", "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 1e8cc8b..b75da92 100644 --- a/svg-sparkline.js +++ b/svg-sparkline.js @@ -122,7 +122,7 @@ class SVGSparkline extends HTMLElement { @@ -131,7 +131,7 @@ class SVGSparkline extends HTMLElement { content.push(` { - if (entries[0].intersectionRatio > threshold) { - this.setAttribute("visible", true) - observer.unobserve(this) - } - }, { threshold: threshold }) + const observer = new IntersectionObserver( + (entries, observer) => { + if (entries[0].intersectionRatio > threshold) { + this.setAttribute("visible", true) + observer.unobserve(this) + } + }, + { threshold: threshold } + ) observer.observe(this) } } @@ -228,42 +231,41 @@ class SVGSparkline extends HTMLElement { this.setCSS() } - static maxDecimals(value, decimals = 2) { + maxDecimals(value, decimals = 2) { return +value.toFixed(decimals) } getViewBox(values) { - return `0 0 ${values.length - 1} ${Math.max(...values) + 2}` + return `0 0 ${values.length - 1} ${this.getAdjustedMaxY(values)}` } lineCommand(point, i) { return `L ${i},${point}` } - static line(ax, ay, bx, by) { + line(ax, ay, bx, by) { const lengthX = bx - ax const lengthY = by - ay return { length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)), - angle: Math.atan2(lengthY, lengthX) + angle: Math.atan2(lengthY, lengthX), } } - static controlPoint(cx, cy, px, py, nx, ny, reverse) { - // When the current is the first or last point of the array, previous and - // next don't exist. Replace with current. + controlPoint(cx, cy, px, py, nx, ny, reverse) { + // When the current X,Y are the first or last point of the array, + // previous or next X,Y don't exist. Replace with current X,Y. px = px || cx py = py || cy nx = nx || cx ny = ny || cy - const smoothing = 0.2 - - const o = SVGSparkline.line(px, py, nx, ny) + const line = this.line(px, py, nx, ny) - const angle = o.angle + (reverse ? Math.PI : 0) - const length = o.length * smoothing + const smoothing = 0.2 + const angle = line.angle + (reverse ? Math.PI : 0) + const length = line.length * smoothing const x = cx + Math.cos(angle) * length const y = cy + Math.sin(angle) * length @@ -272,20 +274,22 @@ class SVGSparkline extends HTMLElement { } bezierCommand(point, i, a) { - const [csx, csy] = SVGSparkline.controlPoint(i-1, a[i-1], i-2, a[i-2], i, point) - const [cex, cey] = SVGSparkline.controlPoint(i, point, i-1, a[i-1], i+1, a[i+1], true) + 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 ${SVGSparkline.maxDecimals(csx)},${SVGSparkline.maxDecimals(csy)} ${SVGSparkline.maxDecimals(cex)},${SVGSparkline.maxDecimals(cey)} ${i},${point}` + return `C ${this.maxDecimals(csx)},${this.maxDecimals(csy)} ${this.maxDecimals(cex)},${this.maxDecimals(cey)} ${i},${point}` } - getPath(values, command = this.lineCommand) { - return values - // flips each point in the vertical range - .map((point) => Math.max(...values) - point + 1) - // generate a string - .reduce((acc, point, i, a) => { - return i < 1 ? `M 0,${point}` : `${acc} ${command(point, i, a)}` - }, "") + getPath(values, curve) { + return ( + values + // flips each point in the vertical range + .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)}` + }, "") + ) } getFinalX(values) {