text: import React from "react";
  import { connect } from "react-redux";
  import  Chart from "../components/chart";
  import GoogleMap from "../components/google-map";
  
  class WeatherList extends React.Component{
      renderWeather(cityData){
          const temps = cityData.list.map(weather=>weather.main.temp);
          const pressures = cityData.list.map(weather=>weather.main.pressure);
          const humidities = cityData.list.map(weather=>weather.main.humidity);
          const {lon,lat} = cityData.city.coord;
          return (
              <tr key={cityData.city.name}>
                  <td><GoogleMap lat={lat} lon={lon}/></td>
                  <td>
                      <Chart data={temps} color="orange" units="K"/>
                  </td>
                  <td>
                      <Chart data={pressures} color="green" units="hPa"/>
                  </td>
                  <td>
                      <Chart data={humidities} color="black" units="%"/>
                  </td>
              </tr>
          )
      }
      render(){
          return(
              <table className="table table-hover">
                  <thead>
                      <tr>
                          <th>City</th>
                          <th>Temperature (K)</th>
                          <th>Pressure (hPa)</th>
                          <th>Humidity (%)</th>
                      </tr>
                  </thead>
                  <tbody>
                  {this.props.weather.map(this.renderWeather)}
                  </tbody>
              </table>
          )
      }
  }
  
  
  function mapStateToProps(state){
      return { weather: state.weather };
  }
  export default connect(mapStateToProps)(WeatherList)