remove graph y axis on small devices
This commit is contained in:
parent
3bddbaa15d
commit
a3eeef15eb
|
@ -6,6 +6,24 @@ import { ResponsiveLine } from '@nivo/line';
|
||||||
import './Graph.css';
|
import './Graph.css';
|
||||||
|
|
||||||
export default class Graph extends Component {
|
export default class Graph extends Component {
|
||||||
|
state = {
|
||||||
|
screenWidth: window.innerWidth,
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
window.addEventListener('resize', this.handleScreenChange);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
window.removeEventListener('resize', this.handleScreenChange);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleScreenChange = () => {
|
||||||
|
this.setState({
|
||||||
|
screenWidth: window.innerWidth,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
processData() {
|
processData() {
|
||||||
const { data: unprocessedData } = this.props;
|
const { data: unprocessedData } = this.props;
|
||||||
|
|
||||||
|
@ -24,28 +42,30 @@ export default class Graph extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
isSmallScreen() {
|
isSmallScreen() {
|
||||||
return window.innerWidth < 500;
|
return this.state.screenWidth < 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
const leftAxis = {
|
||||||
<div className="graph-container">
|
|
||||||
<ResponsiveLine
|
|
||||||
data={this.processData()}
|
|
||||||
margin={{ top: 30, left: 70, bottom: 50 }}
|
|
||||||
maxY="auto"
|
|
||||||
curve="monotoneX"
|
|
||||||
|
|
||||||
tooltipFormat={(d) => `${d}ms`}
|
|
||||||
|
|
||||||
axisLeft={{
|
|
||||||
format: (d) => `${d}ms`,
|
format: (d) => `${d}ms`,
|
||||||
tickCount: 3,
|
tickCount: 3,
|
||||||
legend: 'latency',
|
legend: 'latency',
|
||||||
legendPosition: 'center',
|
legendPosition: 'center',
|
||||||
legendOffset: -55,
|
legendOffset: -55,
|
||||||
tickSize: 0,
|
tickSize: 0,
|
||||||
}}
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="graph-container">
|
||||||
|
<ResponsiveLine
|
||||||
|
data={this.processData()}
|
||||||
|
margin={{ top: 30, left: this.isSmallScreen() ? 0 : 70, bottom: 50 }}
|
||||||
|
maxY="auto"
|
||||||
|
curve="monotoneX"
|
||||||
|
|
||||||
|
tooltipFormat={(d) => `${d}ms`}
|
||||||
|
|
||||||
|
axisLeft={this.isSmallScreen() ? null : leftAxis}
|
||||||
|
|
||||||
axisBottom={{
|
axisBottom={{
|
||||||
format: (epoch) => {
|
format: (epoch) => {
|
||||||
|
|
Loading…
Reference in New Issue