Add class name to both line and fill area.

fnando · fnando · commit 9af1e74e36f5 · 2018-04-02T12:59:53.000-03:00
diff --git a/README.md b/README.md
@@ -70,6 +70,15 @@ You can change the colors by either setting the attributes directly to the SVG e
 .sparkline--cursor {
   stroke: orange;
 }
+
+/* style fill area and line colors using specific class name */
+.sparkline--fill {
+  fill: rgba(255, 0, 0, .3);
+}
+
+.sparkline--line {
+  stroke: red;
+}
 ```
 
 ## Examples
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 27 7.67 L 50 18.67 L 73 11.33 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><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></svg>"
+exports['renders svg with array of numbers and default options 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path class=\"sparkline--fill\" 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><path class=\"sparkline--line\" d=\"M4 26 L 4 26 L 27 7.67 L 50 18.67 L 73 11.33 L 96 4\" fill=\"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 50 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><path d=\"M4 26 L 4 26 L 50 15 L 96 4\" fill=\"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><rect width=\"100\" height=\"30\" style=\"fill: transparent; stroke: transparent\" class=\"sparkline--interaction-layer\"></rect></svg>"
+exports['renders interactive svg 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path class=\"sparkline--fill\" d=\"M4 26 L 4 26 L 50 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><path class=\"sparkline--line\" d=\"M4 26 L 4 26 L 50 15 L 96 4\" fill=\"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><rect width=\"100\" height=\"30\" style=\"fill: transparent; stroke: transparent\" class=\"sparkline--interaction-layer\"></rect></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 V 30 L 4 30 Z\" stroke=\"none\"></path><path d=\"M4 15 L 4 15 L 96 4\" fill=\"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><rect width=\"100\" height=\"30\" style=\"fill: transparent; stroke: transparent\" class=\"sparkline--interaction-layer\"></rect></svg>"
+exports['renders svg with custom cursor 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path class=\"sparkline--fill\" d=\"M4 15 L 4 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><path class=\"sparkline--line\" d=\"M4 15 L 4 15 L 96 4\" fill=\"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><rect width=\"100\" height=\"30\" style=\"fill: transparent; stroke: transparent\" class=\"sparkline--interaction-layer\"></rect></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 V 30 L 6 30 Z\" stroke=\"none\"></path><path d=\"M6 15 L 6 15 L 94 5\" fill=\"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><rect width=\"100\" height=\"30\" style=\"fill: transparent; stroke: transparent\" class=\"sparkline--interaction-layer\"></rect></svg>"
+exports['renders svg with custom spot 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path class=\"sparkline--fill\" d=\"M6 15 L 6 15 L 94 5 V 30 L 6 30 Z\" stroke=\"none\"></path><path class=\"sparkline--line\" d=\"M6 15 L 6 15 L 94 5\" fill=\"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><rect width=\"100\" height=\"30\" style=\"fill: transparent; stroke: transparent\" class=\"sparkline--interaction-layer\"></rect></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 V 30 L 4 30 Z\" stroke=\"none\"></path><path d=\"M4 26 L 4 26 L 50 15 L 96 4\" fill=\"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><rect width=\"100\" height=\"30\" style=\"fill: transparent; stroke: transparent\" class=\"sparkline--interaction-layer\"></rect></svg>"
+exports['updates interactive svg when mouse moves 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path class=\"sparkline--fill\" d=\"M4 26 L 4 26 L 50 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><path class=\"sparkline--line\" d=\"M4 26 L 4 26 L 50 15 L 96 4\" fill=\"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><rect width=\"100\" height=\"30\" style=\"fill: transparent; stroke: transparent\" class=\"sparkline--interaction-layer\"></rect></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 V 30 L 4 30 Z\" stroke=\"none\"></path><path d=\"M4 15 L 4 15 L 96 4\" fill=\"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><rect width=\"100\" height=\"30\" style=\"fill: transparent; stroke: transparent\" class=\"sparkline--interaction-layer\"></rect></svg>"
+exports['renders interactive svg based on the nearest edge 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path class=\"sparkline--fill\" d=\"M4 15 L 4 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><path class=\"sparkline--line\" d=\"M4 15 L 4 15 L 96 4\" fill=\"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><rect width=\"100\" height=\"30\" style=\"fill: transparent; stroke: transparent\" class=\"sparkline--interaction-layer\"></rect></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 V 30 L 4 30 Z\" stroke=\"none\"></path><path d=\"M4 15 L 4 15 L 96 4\" fill=\"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><rect width=\"100\" height=\"30\" style=\"fill: transparent; stroke: transparent\" class=\"sparkline--interaction-layer\"></rect></svg>"
+exports['renders interactive svg based on the nearest edge 2'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path class=\"sparkline--fill\" d=\"M4 15 L 4 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><path class=\"sparkline--line\" d=\"M4 15 L 4 15 L 96 4\" fill=\"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><rect width=\"100\" height=\"30\" style=\"fill: transparent; stroke: transparent\" class=\"sparkline--interaction-layer\"></rect></svg>"
 
diff --git a/src/sparkline.js b/src/sparkline.js
@@ -114,13 +114,15 @@ export function sparkline(svg, entries, options) {
   });
 
   const path = buildElement("path", {
+    class: "sparkline--line",
     d: pathCoords,
     fill: "none"
   });
 
   let fillCoords = `${pathCoords} V ${fullHeight} L ${spotDiameter} ${fullHeight} Z`;
 
   const fill = buildElement("path", {
+    class: "sparkline--fill",
     d: fillCoords,
     stroke: "none"
   });
