Commit 5cb9dc99 by David Kaltschmidt

Explore: resize graph on window resize

parent 1a6b0adb
import $ from 'jquery'; import $ from 'jquery';
import _ from 'lodash';
import React, { Component } from 'react'; import React, { Component } from 'react';
import moment from 'moment'; import moment from 'moment';
...@@ -68,7 +69,7 @@ const FLOT_OPTIONS = { ...@@ -68,7 +69,7 @@ const FLOT_OPTIONS = {
// }, // },
}; };
class Graph extends Component<any, any> { class Graph extends Component<any, { showAllTimeSeries: boolean }> {
state = { state = {
showAllTimeSeries: false, showAllTimeSeries: false,
}; };
...@@ -81,6 +82,7 @@ class Graph extends Component<any, any> { ...@@ -81,6 +82,7 @@ class Graph extends Component<any, any> {
componentDidMount() { componentDidMount() {
this.draw(); this.draw();
window.addEventListener('resize', this.debouncedDraw);
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
...@@ -94,6 +96,10 @@ class Graph extends Component<any, any> { ...@@ -94,6 +96,10 @@ class Graph extends Component<any, any> {
} }
} }
componentWillUnmount() {
window.removeEventListener('resize', this.debouncedDraw);
}
onShowAllTimeSeries = () => { onShowAllTimeSeries = () => {
this.setState( this.setState(
{ {
...@@ -103,6 +109,8 @@ class Graph extends Component<any, any> { ...@@ -103,6 +109,8 @@ class Graph extends Component<any, any> {
); );
}; };
debouncedDraw = _.debounce(() => this.draw(), 100);
draw() { draw() {
const { options: userOptions } = this.props; const { options: userOptions } = this.props;
const data = this.getGraphData(); const data = this.getGraphData();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment