Added sparkline chart

domwashburn · Jan 3, 2016 · 9932469 · 9932469
1 parent 09d4d3f
commit 9932469
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/weather/package.json b/weather/package.json
@@ -24,6 +24,7 @@
     "react": "^0.14.3",
     "react-dom": "^0.14.3",
     "react-redux": "^4.0.0",
+    "react-sparklines": "^1.4.2",
     "redux": "^3.0.4",
     "redux-promise": "^0.5.0"
   }

diff --git a/weather/src/containers/weather_list.js b/weather/src/containers/weather_list.js
@@ -1,7 +1,24 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { Sparklines, SparklinesLine } from 'react-sparklines';
 
 class WeatherList extends Component {
+  renderWeather(cityData) {
+    const name = cityData.city.name;
+    const temps = cityData.list.map(weather => weather.main.temp);
+
+    return (
+      <tr key={name}>
+        <td>{name}</td>
+        <td>
+          <Sparklines height={120} width={180} data={temps}>
+            <SparklinesLine color="red" />
+          </Sparklines>
+        </td>
+      </tr>
+    );
+  }
+
   render() {
     return (
       <table className="table table-hover">
@@ -14,6 +31,7 @@ class WeatherList extends Component {
           </tr>
         </thead>
         <tbody>
+          {this.props.weather.map(this.renderWeather)}
         </tbody>
       </table>
     );