github.com/mandrigin/go-ethereum@v1.7.4-0.20180116162341-02aeb3d76652/dashboard/assets/components/Home.jsx (about)

     1  // @flow
     2  
     3  // Copyright 2017 The go-ethereum Authors
     4  // This file is part of the go-ethereum library.
     5  //
     6  // The go-ethereum library is free software: you can redistribute it and/or modify
     7  // it under the terms of the GNU Lesser General Public License as published by
     8  // the Free Software Foundation, either version 3 of the License, or
     9  // (at your option) any later version.
    10  //
    11  // The go-ethereum library is distributed in the hope that it will be useful,
    12  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    13  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    14  // GNU Lesser General Public License for more details.
    15  //
    16  // You should have received a copy of the GNU Lesser General Public License
    17  // along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
    18  
    19  import React, {Component} from 'react';
    20  
    21  import withTheme from 'material-ui/styles/withTheme';
    22  import {LineChart, AreaChart, Area, YAxis, CartesianGrid, Line} from 'recharts';
    23  
    24  import ChartGrid from './ChartGrid';
    25  import type {ChartEntry} from '../types/content';
    26  
    27  export type Props = {
    28      theme: Object,
    29      memory: Array<ChartEntry>,
    30      traffic: Array<ChartEntry>,
    31  	shouldUpdate: Object,
    32  };
    33  // Home renders the home content.
    34  class Home extends Component<Props> {
    35  	constructor(props: Props) {
    36  		super(props);
    37  		const {theme} = props; // The theme property is injected by withTheme().
    38  		this.memoryColor = theme.palette.primary[300];
    39  		this.trafficColor = theme.palette.secondary[300];
    40  	}
    41  
    42  	shouldComponentUpdate(nextProps) {
    43  		return typeof nextProps.shouldUpdate.home !== 'undefined';
    44  	}
    45  
    46  	memoryColor: Object;
    47  	trafficColor: Object;
    48  
    49  	render() {
    50  		let {memory, traffic} = this.props;
    51  		memory = memory.map(({value}) => (value || 0));
    52  		traffic = traffic.map(({value}) => (value || 0));
    53  
    54  		return (
    55  			<ChartGrid spacing={24}>
    56  				<AreaChart xs={6} height={300} values={memory}>
    57  					<YAxis />
    58  					<Area type="monotone" dataKey="value" stroke={this.memoryColor} fill={this.memoryColor} />
    59  				</AreaChart>
    60  				<LineChart xs={6} height={300} values={traffic}>
    61  					<Line type="monotone" dataKey="value" stroke={this.trafficColor} dot={false} />
    62  				</LineChart>
    63  				<LineChart xs={6} height={300} values={memory}>
    64  					<YAxis />
    65  					<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
    66  					<Line type="monotone" dataKey="value" stroke={this.memoryColor} dot={false} />
    67  				</LineChart>
    68  				<AreaChart xs={6} height={300} values={traffic}>
    69  					<CartesianGrid stroke="#eee" strokeDasharray="5 5" vertical={false} />
    70  					<Area type="monotone" dataKey="value" stroke={this.trafficColor} fill={this.trafficColor} />
    71  				</AreaChart>
    72  			</ChartGrid>
    73  		);
    74  	}
    75  }
    76  
    77  export default withTheme()(Home);