elstat/priv/frontend/src/components/Graph.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import ms from 'ms'
import {
  ResponsiveContainer,
  AreaChart,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Area,
  ReferenceLine,
} from 'recharts'

import './Graph.css'

export default class Graph extends Component {
  static propTypes = {
    data: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired,
  }

  state = {
    screenWidth: window.innerWidth,
  }

  componentDidMount () {
    window.addEventListener('resize', this.handleScreenChange)
  }

  componentWillUnmount () {
    window.removeEventListener('resize', this.handleScreenChange)
  }

  handleScreenChange = () => {
    this.setState({
      screenWidth: window.innerWidth,
    })
  }

  processData () {
    const { data } = this.props

    const objects = data.map(([timestamp, latency]) => ({
      timestamp,
      latency,
    }))

    // sort so that new entries are first
    return objects.sort(({ timestamp: a }, { timestamp: b }) => a - b)
  }

  isSmallScreen () {
    return this.state.screenWidth < 500
  }

  render () {
    const yAxis = this.isSmallScreen()
      ? null
      : (
        <YAxis
          dataKey="latency"
          tickLine={false}
          tickFormatter={(tick) => `${tick}ms`}
        />
      )

    return (
      <div className="graph-container">
        <ResponsiveContainer width="100%" height={175}>
          <AreaChart
            data={this.processData()}
          >
            <XAxis
              dataKey="timestamp"
              tickFormatter={(tick) => ms(Date.now() - tick)}
              tickLine={false}
            />
            {yAxis}

            <CartesianGrid strokeDasharray="1 1"/>
            <Tooltip
              isAnimationActive={false}
              formatter={(value) => `${value}ms`}
              label="DAB"
              separator=": "
              labelFormatter={() => null}
            />
            <ReferenceLine
              y={1000}
              label="1s"
              stroke="pink"
            />
            <Area
              type="monotone"
              dataKey="latency"
              stroke="hsla(200, 100%, 55%, 1)"
              fill="hsl(200, 100%, 85%)"
              isAnimationActive={false}
            />
          </AreaChart>
        </ResponsiveContainer>
      </div>
    )
  }
}