@stickyboard/stickyboard-yahoo-weather/src/YahooWeatherForecastWidget.js

Yahoo weather components for StickyBoard

// src/components/ui/YahooWeatherForecastWidget.js

import React from 'react';
import PropTypes from 'prop-types';

import ApiManager from '../../network/ApiManager';
import StatusCode from '../../network/StatusCode';

import { withStyles } from '@material-ui/core/styles';

import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import { red, lightBlue, amber, grey } from '@material-ui/core/colors';

import Moment from 'moment-timezone';

import { Textfit } from 'react-textfit';

import { AreaChart, Area, XAxis, YAxis, Tooltip, CartesianGrid,
    Line, LineChart, Legend, ResponsiveContainer, PieChart, Pie, Bar,
    BarChart, Sector, Cell, RadarChart, Radar, PolarGrid, PolarAngleAxis,
    PolarRadiusAxis, ComposedChart, RadialBarChart, RadialBar,
    ScatterChart, Scatter, Treemap, ReferenceLine } from 'recharts'

import SimpleDateAxisTick from '../ui/SimpleDateAxisTick';

import DateUtil from '../../utils/DateUtil';

import Const from '../../constants/Const';
import WeatherIconConst from '../../constants/WeatherIconConst';

const styles = theme => ({
    root: {
        // background: '#FFFFFF',
        height: '100%',
        paddingLeft: theme.spacing.unit * 3,
        paddingTop: theme.spacing.unit * 2,
        paddingRight: theme.spacing.unit * 3,
        // paddingBottom: theme.spacing.unit,
    },
    title: {
        margin: 'auto',
        textAlign: 'center',
    },
});

class YahooWeatherForecastWidget extends React.Component {

    constructor (props) {
        super(props)

        this.state = {
            location: undefined,
            weatherForecastList: [],
        }
    }

    componentDidMount () {
        this.getWeatherData(37.504296, 127.024792);
    }

    getWeatherData = (latitude, longitude) => {
        ApiManager.getYahooWeather(latitude, longitude, this.getYahooWeatherCallback);
    }

    getYahooWeatherCallback = (statusCode, response) => {
        switch (statusCode) {
            case StatusCode.OK:
                // console.log(response);

                let location = response.location.city + ', ' + response.location.country;

                let weatherForecastList = response.forecasts;
                weatherForecastList.forEach((weatherForecast) => {
                    weatherForecast.low = parseInt(weatherForecast.low)
                    weatherForecast.high = parseInt(weatherForecast.high)
                    // weatherForecast.date = Moment(weatherForecast.date * 1000, 'DD MMM YYYY').valueOf();
                    weatherForecast.date = Moment(new Date(weatherForecast.date * 1000)).format('YYYY/MM/DD');
                });

                // console.log(weatherForecastList)

                this.setState({
                    location: location,
                    weatherForecastList: weatherForecastList,
                });
                break;
            default:
                break;
        }
    }

    render () {
        const { classes, theme } = this.props;
        const { weatherForecastList } = this.state;

        return (
            <div className={classes.root}>
                <Textfit
                    mode="single"
                    min={16}
                    max={28}
                    forceSingleModeWidth={false}
                    className={classes.title}>
                    {'Yahoo Weather Forecast'}
                </Textfit>

                <ResponsiveContainer>
                    {weatherForecastList &&
                        <BarChart
                            data={weatherForecastList}
                            margin={{top: 20, right: 20, left: -20, bottom: 40}}>
                            <XAxis
                                dataKey='date'
                                tickCount={10}
                                tick={<SimpleDateAxisTick />}/>
                            <YAxis/>
                            <CartesianGrid strokeDasharray="3 3"/>
                            <Tooltip
                                labelFormatter={(label) => { return DateUtil.formatCustom(label, 'MM-DD') }}
                                formatter={(value) => { return value }}/>
                            <Legend />
                            <ReferenceLine y={0} stroke='#000'/>
                            <Bar
                                dataKey="high"
                                name="High"
                                unit={'°C'}
                                fill={red['A200']}/>
                            <Bar
                                dataKey="low"
                                name="Low"
                                unit={'°C'}
                                fill={lightBlue['A200']}/>
                        </BarChart>}
                </ResponsiveContainer>
            </div>
        )
    }
}

YahooWeatherForecastWidget.propTypes = {
    classes: PropTypes.object.isRequired,
    theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(YahooWeatherForecastWidget);