Made sparkline component responsive by default for #49

Author: codecounselor

README.md

@@ -41,7 +41,11 @@ data - the data set used to build the sparkline
 
 limit - optional, how many data points to display at once
 
-width, height - dimensions of the component
+width, height - dimensions of the generated sparkline in the SVG viewbox.  This will be automatically scaled (i.e. responsive) inside the parent container by default.
+
+svgWidth, svgHeight - If you want absolute dimensions instead of a responsive component set these attributes.
+
+[preserveAspectRatio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) - default: 'none', set this to modify how the sparkline should scale 
 
 margin - optional, offset the chart
 

demo/demo.js

@@ -249,7 +249,7 @@ const RealWorld1 = () =>
     </Sparklines>
 
 const RealWorld2 = () =>
-    <Sparklines data={sampleData100} width={200}>
+    <Sparklines data={sampleData100} svgWidth={200}>
         <SparklinesLine style={{ stroke: "#2991c8", fill: "none"}} />
         <SparklinesSpots />
         <SparklinesNormalBand style={{ fill: "#2991c8", fillOpacity: .1 }} />

demo/index.html

@@ -67,6 +67,7 @@
         }
         .row > div {
             flex: 1;
+            margin-right: 5px;
         }
         .row > pre {
             flex: 2;
@@ -347,7 +348,7 @@ <h2>Real world examples</h2>
         <div class="row">
             <div id="realworld2"></div>
             <pre class="prettyprint"><xmp>
-<Sparklines data={sampleData100} width={200}>
+<Sparklines data={sampleData100} svgWidth={200}>
     <SparklinesLine style={{ stroke: "#2991c8", fill: "none"}} />
     <SparklinesSpots />
     <SparklinesNormalBand style={{ fill: "#2991c8", fillOpacity: .1 }} />

src/Sparklines.js

@@ -14,6 +14,9 @@ class Sparklines extends React.Component {
         limit: React.PropTypes.number,
         width: React.PropTypes.number,
         height: React.PropTypes.number,
+        svgWidth: React.PropTypes.number,
+        svgHeight: React.PropTypes.number,
+        preserveAspectRatio: React.PropTypes.string,
         margin: React.PropTypes.number,
         style: React.PropTypes.object,
         min: React.PropTypes.number,
@@ -24,6 +27,8 @@ class Sparklines extends React.Component {
         data: [],
         width: 240,
         height: 60,
+        //Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle.
+        preserveAspectRatio: 'none', //https://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
         margin: 2
     };
 
@@ -34,6 +39,9 @@ class Sparklines extends React.Component {
     shouldComponentUpdate(nextProps) {
         return nextProps.width != this.props.width ||
             nextProps.height != this.props.height ||
+            nextProps.svgWidth != this.props.svgWidth ||
+            nextProps.svgHeight != this.props.svgHeight ||
+            nextProps.preserveAspectRatio != this.props.preserveAspectRatio ||
             nextProps.margin != this.props.margin ||
             nextProps.min != this.props.min ||
             nextProps.max != this.props.max ||
@@ -43,14 +51,18 @@ class Sparklines extends React.Component {
     }
 
     render() {
-        const { data, limit, width, height, margin, style, max, min } = this.props;
+        const { data, limit, width, height, svgWidth, svgHeight, preserveAspectRatio, margin, style, max, min } = this.props;
 
         if (data.length === 0) return null;
 
         const points = DataProcessor.dataToPoints(data, limit, width, height, margin, max, min);
 
+        const svgOpts = { style: style, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: preserveAspectRatio };
+        if( svgWidth > 0 ) svgOpts.width = svgWidth;
+        if( svgHeight > 0 ) svgOpts.height = svgHeight;
+
         return (
-            <svg width={width} height={height} style={style} viewBox={`0 0 ${width} ${height}`}>
+            <svg {...svgOpts} >
                 {
                     React.Children.map(this.props.children, function(child) {
                         return React.cloneElement(child, { points, width, height, margin });