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

93 lines
2 KiB
JavaScript
Raw Normal View History

2018-06-12 21:56:50 +00:00
import React, { Component } from 'react';
import ms from 'ms';
import { ResponsiveLine } from '@nivo/line';
2018-06-12 21:56:50 +00:00
import './Graph.css';
2018-06-12 21:56:50 +00:00
export default class Graph extends Component {
2018-07-14 02:36:42 +00:00
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: unprocessedData } = this.props;
2018-06-12 21:56:50 +00:00
const data = unprocessedData.map(([timestamp, latency]) => ({
x: timestamp,
y: latency,
})).reverse();
2018-06-12 21:56:50 +00:00
return [
{
id: 'latency',
color: 'hsl(220, 100%, 75%)',
data,
},
];
2018-06-12 21:56:50 +00:00
}
2018-07-13 19:10:00 +00:00
isSmallScreen() {
2018-07-14 02:36:42 +00:00
return this.state.screenWidth < 500;
2018-07-13 19:10:00 +00:00
}
2018-06-12 21:56:50 +00:00
render() {
2018-07-14 02:36:42 +00:00
const leftAxis = {
format: (d) => `${d}ms`,
tickCount: 3,
legend: 'latency',
legendPosition: 'center',
legendOffset: -55,
tickSize: 0,
};
2018-06-12 21:56:50 +00:00
return (
<div className="graph-container">
<ResponsiveLine
data={this.processData()}
2018-07-14 02:36:42 +00:00
margin={{ top: 30, left: this.isSmallScreen() ? 0 : 70, bottom: 50 }}
2018-07-13 21:32:01 +00:00
maxY="auto"
curve="monotoneX"
tooltipFormat={(d) => `${d}ms`}
2018-07-14 02:36:42 +00:00
axisLeft={this.isSmallScreen() ? null : leftAxis}
axisBottom={{
format: (epoch) => {
2018-07-13 19:10:00 +00:00
const interval = this.isSmallScreen() ? 7 : 5;
const minutesAgo = Math.floor((Date.now() - epoch) / (1000 * 60));
2018-07-13 19:10:00 +00:00
if (minutesAgo % interval !== 0 || minutesAgo === 0) {
return undefined;
}
return ms(Date.now() - epoch);
},
tickSize: 0,
legend: 'time ago',
legendPosition: 'center',
legendOffset: 40,
}}
2018-06-12 21:56:50 +00:00
enableDots={false}
enableArea
/>
</div>
2018-06-12 21:56:50 +00:00
);
}
}