Fix x coords for any number of datapoints. Close #1.

fnando · fnando · commit 18b9c1d2569b · 2017-11-27T20:00:33.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 23.2 7.67 L 42.4 18.67 L 61.599999999999994 11.33 L 80.8 4\" fill=\"none\"></path><path d=\"M4 26 L 4 26 L 23.2 7.67 L 42.4 18.67 L 61.599999999999994 11.33 L 80.8 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 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 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 36 15 L 68 4\" fill=\"none\"></path><path d=\"M4 26 L 4 26 L 36 15 L 68 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 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['updates interactive svg when mouse moves 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 26 L 4 26 L 36 15 L 68 4\" fill=\"none\"></path><path d=\"M4 26 L 4 26 L 36 15 L 68 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"68\" x2=\"68\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"68\" 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 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['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 52 4\" fill=\"none\"></path><path d=\"M4 15 L 4 15 L 52 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"52\" x2=\"52\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"52\" 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 2'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 15 L 4 15 L 52 4\" fill=\"none\"></path><path d=\"M4 15 L 4 15 L 52 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"52\" x2=\"52\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"52\" 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 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 svg with custom cursor 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 15 L 4 15 L 52 4\" fill=\"none\"></path><path d=\"M4 15 L 4 15 L 52 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"52\" x2=\"52\" y1=\"0\" y2=\"30\" stroke-width=\"3\"></line><circle class=\"sparkline--spot\" cx=\"52\" 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 spot 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M6 15 L 6 15 L 53 5\" fill=\"none\"></path><path d=\"M6 15 L 6 15 L 53 5 V 30 L 6 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"53\" x2=\"53\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"53\" cy=\"5\" 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 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>"
 
diff --git a/src/sparkline.js b/src/sparkline.js
@@ -80,20 +80,17 @@ export function sparkline(svg, entries, options) {
 
   // The maximum value. This is used to calculate the Y coord of
   // each sparkline datapoint.
-  const max = Math.max.apply(Math, values);
+  const max = Math.max(...values);
 
   // Some arbitrary value to remove the cursor and spot out of
   // the viewing canvas.
   const offscreen = -1000;
 
-  // Cache the values size.
-  const entriesCount = values.length;
-
   // Cache the last item index.
-  const lastItemIndex = entriesCount - 1;
+  const lastItemIndex = values.length - 1;
 
   // Calculate the X coord base step.
-  const offset = width / entriesCount;
+  const offset = width / lastItemIndex;
 
   // Hold all datapoints, which is whatever we got as the entry plus
   // x/y coords and the index.
