diff --git a/src/containers/Sensors/SensorGraph.js b/src/containers/Sensors/SensorGraph.js index 950f2550a2479db409902e814f3097b16902ed28..29aa3eea9074a5a2834a2baba4fd2633b5bb8b4d 100644 --- a/src/containers/Sensors/SensorGraph.js +++ b/src/containers/Sensors/SensorGraph.js @@ -21,7 +21,7 @@ import { GRAPH_COLORS } from './colors'; export class SensorGraph extends Component { - NUM_DAYS = 4; // eslint-disable-line + NUM_DAYS = 20; // eslint-disable-line constructor(props) { super(props); @@ -78,7 +78,6 @@ export class SensorGraph extends Component { if (nodes.length === 0) { return; } - const styles = {}; nodes.forEach((line, index) => { styles[line.name()] = this.generateLineStyle(line, index); @@ -157,11 +156,29 @@ export class SensorGraph extends Component { let spaceOfNode = null; // Get all points + let prevPoint = null; const points = sensorNode.data.reduce((acc, i) => { + if (prevPoint) { + const curDate = new Date(i.ts); + const prevDate = new Date(prevPoint.ts); + const diffSeconds = (curDate.getTime() - prevDate.getTime()) / 1000; + // If no data for more than 10 minutes, add null values + if (diffSeconds > 600) { + // Create a new date object 5 minutes ahead of the previous date + let newDate = new Date(prevDate.getTime() + (300 * 1000)); + while (newDate.getTime() < curDate.getTime()) { + acc.push([newDate, NaN]); + newDate = new Date(newDate.getTime() + (300 * 1000)); + } + } + } acc.push([new Date(i.ts), i.value]); + + prevPoint = i; return acc; }, []); + spaceOfNode = this.findNodeLocation(sensorNode); nodeName = spaceOfNode.nodeName ? spaceOfNode.nodeName : nodeName; @@ -229,6 +246,7 @@ export class SensorGraph extends Component { series={line} columns={[line.name()]} style={styler([this.state.lineStyles[line.name()]])} + breakLine /> ));