Give more room to spots on the edges.

fnando · fnando · commit 30a44725328a · 2017-11-27T20:28:27.000-08:00
diff --git a/__snapshots__/sparkline_test.js.snap-shot b/__snapshots__/sparkline_test.js.snap-shot
@@ -1,18 +1,18 @@
-exports['renders svg with array of numbers and default options 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 26 L 4 26 L 28 7.67 L 52 18.67 L 76 11.33 L 100 4\" fill=\"none\"></path><path d=\"M4 26 L 4 26 L 28 7.67 L 52 18.67 L 76 11.33 L 100 4 V 30 L 4 30 Z\" stroke=\"none\"></path></svg>"
+exports['renders svg with array of numbers and default options 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 26 L 4 26 L 27 7.67 L 50 18.67 L 73 11.33 L 96 4\" fill=\"none\"></path><path d=\"M4 26 L 4 26 L 27 7.67 L 50 18.67 L 73 11.33 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path></svg>"
 
 exports['renders svg for empty values array 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"></svg>"
 
 exports['renders svg for 1-item array 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"></svg>"
 
-exports['renders interactive svg 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 26 L 4 26 L 52 15 L 100 4\" fill=\"none\"></path><path d=\"M4 26 L 4 26 L 52 15 L 100 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"-1000\" x2=\"-1000\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"-1000\" cy=\"-1000\" r=\"2\"></circle></svg>"
+exports['renders interactive svg 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 26 L 4 26 L 50 15 L 96 4\" fill=\"none\"></path><path d=\"M4 26 L 4 26 L 50 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"-1000\" x2=\"-1000\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"-1000\" cy=\"-1000\" r=\"2\"></circle></svg>"
 
-exports['updates interactive svg when mouse moves 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 26 L 4 26 L 52 15 L 100 4\" fill=\"none\"></path><path d=\"M4 26 L 4 26 L 52 15 L 100 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"100\" x2=\"100\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"100\" cy=\"4\" r=\"2\"></circle></svg>"
+exports['updates interactive svg when mouse moves 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 26 L 4 26 L 50 15 L 96 4\" fill=\"none\"></path><path d=\"M4 26 L 4 26 L 50 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"96\" x2=\"96\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"96\" cy=\"4\" r=\"2\"></circle></svg>"
 
-exports['renders interactive svg based on the nearest edge 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 15 L 4 15 L 100 4\" fill=\"none\"></path><path d=\"M4 15 L 4 15 L 100 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"4\" x2=\"4\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"4\" cy=\"15\" r=\"2\"></circle></svg>"
+exports['renders interactive svg based on the nearest edge 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 15 L 4 15 L 96 4\" fill=\"none\"></path><path d=\"M4 15 L 4 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"4\" x2=\"4\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"4\" cy=\"15\" r=\"2\"></circle></svg>"
 
-exports['renders interactive svg based on the nearest edge 2'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 15 L 4 15 L 100 4\" fill=\"none\"></path><path d=\"M4 15 L 4 15 L 100 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"100\" x2=\"100\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"100\" cy=\"4\" r=\"2\"></circle></svg>"
+exports['renders interactive svg based on the nearest edge 2'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 15 L 4 15 L 96 4\" fill=\"none\"></path><path d=\"M4 15 L 4 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"96\" x2=\"96\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"96\" cy=\"4\" r=\"2\"></circle></svg>"
 
-exports['renders svg with custom cursor 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 15 L 4 15 L 100 4\" fill=\"none\"></path><path d=\"M4 15 L 4 15 L 100 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"4\" x2=\"4\" y1=\"0\" y2=\"30\" stroke-width=\"3\"></line><circle class=\"sparkline--spot\" cx=\"4\" cy=\"15\" r=\"2\"></circle></svg>"
+exports['renders svg with custom cursor 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 15 L 4 15 L 96 4\" fill=\"none\"></path><path d=\"M4 15 L 4 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"4\" x2=\"4\" y1=\"0\" y2=\"30\" stroke-width=\"3\"></line><circle class=\"sparkline--spot\" cx=\"4\" cy=\"15\" r=\"2\"></circle></svg>"
 
-exports['renders svg with custom spot 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M6 15 L 6 15 L 100 5\" fill=\"none\"></path><path d=\"M6 15 L 6 15 L 100 5 V 30 L 6 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"6\" x2=\"6\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"6\" cy=\"15\" r=\"3\"></circle></svg>"
+exports['renders svg with custom spot 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M6 15 L 6 15 L 94 5\" fill=\"none\"></path><path d=\"M6 15 L 6 15 L 94 5 V 30 L 6 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"6\" x2=\"6\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"6\" cy=\"15\" r=\"3\"></circle></svg>"
 
diff --git a/src/sparkline.js b/src/sparkline.js
@@ -69,7 +69,7 @@ export function sparkline(svg, entries, options) {
   const values = entries.map(entry => fetch(entry));
 
   // The rendering width will account for the spot size.
-  const width = parseFloat(svg.attributes.width.value) - spotDiameter;
+  const width = parseFloat(svg.attributes.width.value) - spotDiameter * 2;
 
   // Get the SVG element's full height.
   // This is used
