Adds timeseries

app/src/components/FlexibleGraph.js

@@ -81,7 +81,6 @@ export class FlexibleGraph extends Component{
 		const mappedValues = _.map(this.props.tagDescriptions, (desc, key) => {
 			return {title: desc, value: _.round(values[key].y, 1) + ` ${this.props.units[key]}`};
 		});
-		console.log(mappedValues, this.props.tagDescriptions);
 		return mappedValues;
 	}
 

app/src/components/Main.js

@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 
 import { LiquidGauge } from "./LiquidGauge";
 import { FlexibleGraph } from "./FlexibleGraph";
+import { TimeSeriesGraph } from "./TimeSeriesGraph";
 
 // const graphColors = ["#d7191c", "#fdae61", "#ffffbf", "#abd9e9", "#2c7bb6"];
 
@@ -103,6 +104,22 @@ export class Main extends Component {
 					]}
 					round={[1, 2, 1, 1, 1]}
 				/>
+				<TimeSeriesGraph tagHistory={[
+					this.props.tagHistory.val_FluidLevel,
+					// this.props.tagHistory.val_Flowmeter,
+					// this.props.tagHistory.val_IntakePressure,
+					// this.props.tagHistory.val_IntakeTemperature,
+					// this.props.tagHistory.val_TubingPressure
+				]}
+
+				tagDescriptions={[
+					"Level",
+					"Flow Rate",
+					"Intake Pres",
+					"Intake Temp",
+					"Tubing Pres"
+				]}
+				/>
 				<hr />
 
 				<h3>VFD Data</h3>

app/src/components/TimeSeriesGraph.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { TimeSeries } from "pondjs";
+import _ from "lodash";
+
+import { Charts, ChartContainer, ChartRow, YAxis, LineChart } from "react-timeseries-charts";
+
+export function TimeSeriesGraph(props) {
+
+	const series = _.map(props.tagHistory, (tag, key) => {
+		const points = _.reverse(_.map(tag, ({timestamp, value}) => {
+			return [timestamp.getTime(), parseFloat(value)];
+		}));
+		return new TimeSeries({
+			name: props.tagDescriptions[key],
+			columns: ["time", props.tagDescriptions[key]],
+			points: points
+		});
+	});
+
+	// const lineCharts = _.map(props.tagHistory, (tag, key) => {
+	// 	return <LineChart key={key} axis="axis1" series={series[key]} column={[props.tagDescriptions[key]]} />;
+	// });
+	
+	
+	return(
+		<ChartContainer timeRange={series[0].timerange()} width={800}>
+			<ChartRow height="200">
+				<YAxis id="axis1" min={0} max={500} width="60" type="linear"/>
+				<Charts>
+					<LineChart axis="axis1" series={series[0]} column={[props.tagDescriptions[0]]} />;
+				</Charts>
+			</ChartRow>
+		</ChartContainer>
+	);
+}
+