diff --git a/src/components/charts/timeline.js b/src/components/charts/timeline.js index ee347c899..78ab2aea0 100644 --- a/src/components/charts/timeline.js +++ b/src/components/charts/timeline.js @@ -4,39 +4,78 @@ import React, { Component } from 'react'; import C3 from 'c3'; import moment from 'moment'; import _ from 'lodash'; +import Rx from 'rxjs'; import Config from '../../common/config'; import './chart.css'; +const SLIDING_WINDOW_SIZE = 300; + class Timeline extends Component { + constructor(props) { super(props); - this.state = { - timeline: {} - }; + this.chart = {}; + // The chartDataQueue + this.chartDataQueue = []; } componentDidMount() { - this.setState({ timeline: C3.generate({ ...this.props.chartConfig }) }); + // Temp Fix: Pending issues https://github.com/c3js/c3/issues/2057 & https://github.com/c3js/c3/issues/1097 + // Every five minutes, rebuild the chart to avoid a memory leak in the chart library + // TODO: Remove these hacks when the D3 chart is fixed + this.subscription = Rx.Observable.interval(1000*60*5) + .startWith(0) + .subscribe(_ => { + if (this.chart.unload) { + const generateProps = { + ...this.props.chartConfig, + data: { + ...this.props.chartConfig.data, + json: this.chartDataQueue + } + }; + this.chart.unload({ + done: () => this.createChart(generateProps) + }); + } else { + this.createChart(this.props.chartConfig); + } + }); + } + + componentWillUnmount() { + this.subscription.unsubscribe(); + this.chart.destroy(); + } + + createChart(generateProps) { + this.chart = C3.generate(generateProps); } destroyChart() { - this.state.timeline.unload(); + this.chart.unload(); } switchChart(props) { - this.state.timeline.load({ ...props, unload: true }); + this.chart.load({ ...props, unload: true }); + this.chartDataQueue = props.json; } updateChart(props) { const startTime = moment() .subtract(Config.INTERVALS.TELEMETRY_SLIDE_WINDOW_MIN, 'minutes') .toISOString(); - this.state.timeline.flow({ + this.chart.flow({ ...props, duration: Config.INTERVALS.TELEMETRY_FLOW_DURATION_MS, to: startTime }); + // Update the chart data queue with new data and prune it if it gets too large + this.chartDataQueue = [ ...this.chartDataQueue, ...props.json ]; + while(this.chartDataQueue.length > SLIDING_WINDOW_SIZE) { + this.chartDataQueue.shift(); + } } componentWillReceiveProps(nextProps) {