github.com/SmartMeshFoundation/Spectrum@v0.0.0-20220621030607-452a266fee1e/dashboard/assets/components/Home.jsx (about)

     1  // @flow
     2  
     3  // Copyright 2017 The Spectrum Authors
     4  // This file is part of the Spectrum library.
     5  //
     6  // The Spectrum 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 Spectrum 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 Spectrum 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/message';
    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 nextProps.shouldUpdate.has('memory') || nextProps.shouldUpdate.has('traffic');
    44  	}
    45  
    46  	render() {
    47  		const {memory, traffic} = this.props;
    48  
    49  		return (
    50  			<ChartGrid spacing={24}>
    51  				<AreaChart xs={6} height={300} values={memory}>
    52  					<YAxis />
    53  					<Area type="monotone" dataKey="value" stroke={this.memoryColor} fill={this.memoryColor} />
    54  				</AreaChart>
    55  				<LineChart xs={6} height={300} values={traffic}>
    56  					<Line type="monotone" dataKey="value" stroke={this.trafficColor} dot={false} />
    57  				</LineChart>
    58  				<LineChart xs={6} height={300} values={memory}>
    59  					<YAxis />
    60  					<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
    61  					<Line type="monotone" dataKey="value" stroke={this.memoryColor} dot={false} />
    62  				</LineChart>
    63  				<AreaChart xs={6} height={300} values={traffic}>
    64  					<CartesianGrid stroke="#eee" strokeDasharray="5 5" vertical={false} />
    65  					<Area type="monotone" dataKey="value" stroke={this.trafficColor} fill={this.trafficColor} />
    66  				</AreaChart>
    67  			</ChartGrid>
    68  		);
    69  	}
    70  }
    71  
    72  export default withTheme()(Home);