Completes main page

2018-04-17 16:05:48 -05:00
parent 9f97e05a22
commit 75b0a49ce1
14 changed files with 2005 additions and 281 deletions
--- a/tests/components/FlexibleGraph.test.js
+++ b/tests/components/FlexibleGraph.test.js
@@ -0,0 +1,70 @@
+import React from "react";
+import { shallow, configure } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import { findClosestXValue, mapTimestampAndValuePropToXY, FlexibleGraph } from "../../app/src/components/FlexibleGraph";
+configure({ adapter: new Adapter() });
+
+describe("FlexibleGraph", () => {
+	let testData = {
+		tags: [
+			{name: "test1", value: 100},
+			{name: "test2", value: 120}
+		],
+
+		tagHistory: [
+			[{value: 101.1, timestamp: new Date(0)}, {value: 102.2, timestamp: new Date(10)}, {value: 103.3, timestamp: new Date(25)}, {value: 104.4, timestamp:new Date(37)}],
+			[{value: 202.2, timestamp: new Date(0)}, {value: 203.3, timestamp: new Date(10)}, {value: 204.4, timestamp: new Date(25)}, {value: 205.5, timestamp:new Date(37)}]
+		],
+		tagDescriptions: [
+			"Test 1",
+			"Test 2"
+		],
+		units: [
+			"unit1",
+			"unit2"
+		],
+		round: [2, 4]
+	};
+
+	it("should find the closest X value", () => {
+		expect(findClosestXValue(testData.tagHistory[0], 11)).toEqual({x: 11, y: 102.2});
+	});
+
+	it("should map timestamp and value to x and y", () => {
+		const expected = [
+			{y: 101.1, x: 0},
+			{y: 102.2, x: 10},
+			{y: 103.3, x: 25},
+			{y: 104.4, x: 37}
+		];
+		expect(mapTimestampAndValuePropToXY(testData.tagHistory[0])).toEqual(expected);
+	});
+
+	it("should render an empty div with no tags", () => {
+		const wrapper = shallow(<FlexibleGraph />);
+		expect(wrapper.find(".flexible-graph-notags")).toHaveLength(1);
+	});
+
+	describe("rendered FlexibleGraph", () => {
+		let wrapper;
+		beforeEach(() => {
+			wrapper = shallow(<FlexibleGraph 
+				tags={testData.tags} 
+				tagHistory={testData.tagHistory} 
+				tagDescriptions={testData.tagDescriptions}
+				units={testData.units}
+				round={testData.round}
+			/>);
+		});
+
+		it("should render a flexible-graph class", () => {
+			expect(wrapper.find(".flexible-graph")).toHaveLength(1);
+		});
+
+	});
+
+	
+
+
+
+});
--- a/tests/components/LiquidGauge.test.js
+++ b/tests/components/LiquidGauge.test.js
@@ -0,0 +1,41 @@
+import React from "react";
+import { shallow, configure } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+configure({ adapter: new Adapter() });
+
+import { LiquidGauge, renderLabel } from "../../app/src/components/LiquidGauge";
+
+describe("LiquidGauge", () => {
+
+	it("should render an empty span if no tags", () => {
+		const wrapper = shallow(<LiquidGauge tag={undefined} />);
+		expect(wrapper.find(".liquidgauge-no-tags")).toHaveLength(1);
+	});
+
+	describe("rendered LiquidGauge", () => {
+		let wrapper;
+		beforeEach(() => {
+			wrapper = shallow(<LiquidGauge tag={{name: "tag", value: 95.0}} maxValue={100} units="LBS" label="Label" />);
+		});
+
+		it("should have a div with liquidfill class", () => {
+			expect(wrapper.find(".liquidfill")).toHaveLength(1);
+		});
+
+		it("should show a LiquidFillGauge instance", () => {
+			expect(wrapper.find("LiquidFillGauge")).toHaveLength(1);
+		});
+	});
+
+	describe("renderLabel function", () => {
+		let label;
+		beforeEach(() => {
+			label = renderLabel({height: 100.0, width: 100.0, percent: "units", textSize: 1, tag: {value: 101.0}}, 101.0);
+		});
+
+		it("should show the value", () => {
+			expect(shallow(label).find(".value").text()).toMatch("101");
+		});
+	});
+
+});
--- a/tests/components/Main.test.js
+++ b/tests/components/Main.test.js
@@ -10,16 +10,28 @@ describe("Main", () => {
 		val_FluidLevel: { name: "val_FluidLevel", value: 100.0 },
 		val_Flowmeter_BarrelsPerDay: { name: "val_Flowmeter_BarrelsPerDay", value: 200.0 },
 		val_TubingPressure: { name: "val_TubingPressure", value: 150.0 },
+		val_Flowmeter: { name: "val_Flowmeter", value: 150.0 },
+		val_IntakePressure: { name: "val_IntakePressure", value: 150.0 },
+		val_IntakeTemperature: { name: "val_IntakeTemperature", value: 150.0 },
+
 		VFD_OutCurrent: { name: "VFD_OutCurrent", value: 30.0 },
-		VFD_SpeedFdbk: { name: "VFD_SpeedFdbk", value: 60.0 }
+		VFD_SpeedFdbk: { name: "VFD_SpeedFdbk", value: 60.0 },
+		VFD_OutPower: { name: "VFD_OutPower", value: 60.0 },
+		VFD_Temp: { name: "VFD_Temp", value: 60.0 },
 	};

 	const tagHistory = {
 		val_FluidLevel: [{ timestamp: 0, value: 100.0 }],
 		val_Flowmeter_BarrelsPerDay: [{ timestamp: 0, value: 200.0 }],
 		val_TubingPressure: [{ timestamp: 0, value: 150.0 }],
+		val_Flowmeter: [{ timestamp: 0, value: 150.0 }],
+		val_IntakePressure: [{ timestamp: 0, value: 150.0 }],
+		val_IntakeTemperature: [{ timestamp: 0, value: 150.0 }],
+		
 		VFD_OutCurrent: [{ timestamp: 0, value: 30.0 }],
-		VFD_SpeedFdbk: [{ timestamp: 0, value: 60.0 }]
+		VFD_SpeedFdbk: [{ timestamp: 0, value: 60.0 }],
+		VFD_OutPower: [{ timestamp: 0, value: 60.0 }],
+		VFD_Temp: [{ timestamp: 0, value: 60.0 }]
 	};

 	it("should render loading div if no tag history", () =>{
@@ -28,12 +40,12 @@ describe("Main", () => {
 	});

 	it("should render plc error class if PLC error", () => {
-		const wrapper = shallow(<Main tagHistory={{}} plc={{ error: true }} />);
+		const wrapper = shallow(<Main tagHistory={{a:1, b:2}} plc={{ error: true }} />);
 		expect(wrapper.find(".plc-error").text()).toMatch("PLC Error");
 	});

 	it("should render waiting if no tags yet", () => {
-		const wrapper = shallow(<Main tagHistory={{}} plc={{}} tags={{}} />);
+		const wrapper = shallow(<Main tagHistory={{a:1, b:2}} plc={{}} tags={{}} />);
 		expect(wrapper.find(".waiting").text()).toMatch("Waiting for data");
 	});

@@ -42,37 +54,37 @@ describe("Main", () => {
 		expect(wrapper.find(".main")).toHaveLength(1);
 	});

-	describe("tag current values", () => {
-		let wrapper;
-		beforeEach(() => {
-			wrapper = shallow(<Main tagHistory={tagHistory} plc={{}} tags={tags} />);
-		});
+	// describe("tag current values", () => {
+	// 	let wrapper;
+	// 	beforeEach(() => {
+	// 		wrapper = shallow(<Main tagHistory={tagHistory} plc={{}} tags={tags} />);
+	// 	});

-		it("should render a liquid fill gauge for all gauges", () => {
-			expect(wrapper.find(".liquidfill")).toHaveLength(5);
-		});
+	// 	it("should render a liquid fill gauge for all gauges", () => {
+	// 		expect(wrapper.find(".liquidfill")).toHaveLength(5);
+	// 	});

-		it("should render a liquidfill gauge for val_FluidLevel", () => {
-			expect(wrapper.find(".lqdfill-val_FluidLevel")).toHaveLength(1);
-		});
+	// 	it("should render a liquidfill gauge for val_FluidLevel", () => {
+	// 		expect(wrapper.find(".lqdfill-val_FluidLevel")).toHaveLength(1);
+	// 	});

-		it("should render a liquidfill gauge for val_Flowmeter_BarrelsPerDay", () => {
-			expect(wrapper.find(".lqdfill-val_Flowmeter_BarrelsPerDay")).toHaveLength(1);
-		});
+	// 	it("should render a liquidfill gauge for val_Flowmeter_BarrelsPerDay", () => {
+	// 		expect(wrapper.find(".lqdfill-val_Flowmeter_BarrelsPerDay")).toHaveLength(1);
+	// 	});

-		it("should render a liquidfill gauge for val_TubingPressure", () => {
-			expect(wrapper.find(".lqdfill-val_TubingPressure")).toHaveLength(1);
-		});
+	// 	it("should render a liquidfill gauge for val_TubingPressure", () => {
+	// 		expect(wrapper.find(".lqdfill-val_TubingPressure")).toHaveLength(1);
+	// 	});

-		it("should render a liquidfill gauge for VFD_OutCurrent", () => {
-			expect(wrapper.find(".lqdfill-VFD_OutCurrent")).toHaveLength(1);
-		});
+	// 	it("should render a liquidfill gauge for VFD_OutCurrent", () => {
+	// 		expect(wrapper.find(".lqdfill-VFD_OutCurrent")).toHaveLength(1);
+	// 	});

-		it("should render a liquidfill gauge for VFD_SpeedFdbk", () => {
-			expect(wrapper.find(".lqdfill-VFD_SpeedFdbk")).toHaveLength(1);
-		});
+	// 	it("should render a liquidfill gauge for VFD_SpeedFdbk", () => {
+	// 		expect(wrapper.find(".lqdfill-VFD_SpeedFdbk")).toHaveLength(1);
+	// 	});

-	});
+	// });
 	


--- a/tests/components/Settings.test.js
+++ b/tests/components/Settings.test.js
@@ -50,6 +50,10 @@ describe("Settings", () => {
 		expect(container.find(".settings")).toHaveLength(1);
 	});

+	it("should set the ip address into state", () => {
+		expect(container.state().ipAddress).toEqual("192.168.1.10");
+	});
+
 	describe("ip address field", () => {
 		it("should update state when ip address changed", () => {
 			container.find(".ip-address-field").simulate("change", {target: {value: "1.1.1.1"}});
--- a/tests/reducers/reducer_taghistory.test.js
+++ b/tests/reducers/reducer_taghistory.test.js
@@ -6,7 +6,7 @@ configure({ adapter: new Adapter() });
 import TagHistoryReducer from "../../app/src/reducers/reducer_taghistory";
 import { IPC_TAGUPDATE } from "../../app/src/actions/actions_tags";

-describe("PlcReducer", () => {
+describe("TagHistory", () => {
 	it("should not change state on unused type", () => {
 		expect(TagHistoryReducer({test: "test"}, "test")).toEqual({test: "test"});
 	});
--- a/app/build/bundle.js
+++ b/app/build/bundle.js
--- a/app/src/components/FlexibleGraph.js
+++ b/app/src/components/FlexibleGraph.js
@@ -0,0 +1,154 @@
+import React, { Component } from "react";
+import _ from "lodash";
+import moment from "moment";
+import { FlexibleWidthXYPlot, LineSeries, VerticalGridLines, HorizontalGridLines, XAxis, YAxis, DiscreteColorLegend, Crosshair} from "react-vis";
+import "../../../node_modules/react-vis/dist/style.css";
+
+
+
+export function findClosestXValue(tagHistory, xval){
+	const mapped = _.map(tagHistory, ({timestamp, value}) => {
+		const timeInt = timestamp.getTime();
+		return { dist: Math.abs(xval - timeInt), x: xval, y: value };
+	});
+	const sorted = _.orderBy(mapped, "dist", "asc");
+	return(_.omit(sorted[0], "dist"));
+}
+
+
+
+/**
+ * Map an array of objects to a graph-usable array of objects
+ * 
+ * @param  {Array} values - list of objects with timestame and value properties
+ * 
+ * @returns {Array} list of objects with x and y properties
+ */
+export const mapTimestampAndValuePropToXY = (values) => {
+	return _.map(values, ({timestamp, value}) => {
+		return {x: (new Date(timestamp)).getTime(), y: value};
+	});
+};
+
+
+export class FlexibleGraph extends Component{
+	constructor(props){
+		super(props);
+		// props.tagHistory
+		// props.tags
+		// props.tagDescriptions
+		// props.units
+		// props.round
+
+		this.state = {
+			crosshairValues: []
+		};
+	}
+
+	tagsExist = () => {
+		if (!this.props.tags){
+			return false;
+		}
+
+		_.forEach(this.props.tags, (tag) =>{
+			if (!tag || !tag.value){
+				return false;
+			}
+		});
+
+		_.forEach(this.props.tagHistory, (tag) => {
+			if( !tag || !tag.value) {
+				return false;
+			}
+		});
+		return true;
+	}
+	
+	renderLegendData = () =>{
+		
+		if (!this.tagsExist()){
+			return _.map(this.props.tagDescriptions, (desc) => {
+				return {title: desc};
+			});
+		} else {
+			return _.map(this.props.tagDescriptions, (desc, key) => {
+				return {title: `${desc}: ${_.round(this.props.tags[key].value, this.props.round[key])} ${this.props.units[key]}`};
+			});
+		}
+	}
+
+	renderCrossHairData = (values) => {
+		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;
+	}
+
+	renderTitleData = (values) => {
+		return {title: "Time", value: moment(values[0].x).format("hh:mm A")};
+	}
+
+	/**
+	 * Event handler for onMouseLeave.
+	 * @private
+	 */
+	_onMouseLeave = ()  => {
+		this.setState({crosshairValues: []});
+	}
+
+	/**
+	 * Event handler for onNearestX.
+	 * @param {Object} value Selected value.
+	 * @param {index} index Index of the value in the data array.
+	 * @private
+	 */
+	_onNearestX = (value) => {
+		this.setState({
+			crosshairValues: _.map(this.props.tagHistory, (tagHist) => {
+				return findClosestXValue(tagHist, value.x);
+			})
+		});
+	}
+	
+	render(){
+
+		const lineSeries = _.map(this.props.tagHistory, (tag, key) => {
+			if(key === 0){
+				return <LineSeries key={key} data={mapTimestampAndValuePropToXY(tag)} onNearestX={this._onNearestX} />;
+			} else {
+				return <LineSeries key={key} data={mapTimestampAndValuePropToXY(tag)} />;
+			}
+			
+		});
+
+		if(!this.tagsExist()){
+			return <span className="flexible-graph-notags"></span>;
+		}
+
+		return(
+			<div className="flexible-graph">
+				<FlexibleWidthXYPlot 
+					height={300} 
+					xType="time"
+					onMouseLeave={this._onMouseLeave}
+				>
+					<VerticalGridLines />
+					<HorizontalGridLines />
+					<XAxis />
+					<YAxis />
+					{lineSeries}
+					<Crosshair 
+						values={this.state.crosshairValues} 
+						titleFormat={this.renderTitleData} 
+						itemsFormat = {this.renderCrossHairData}
+					/>
+				</FlexibleWidthXYPlot>
+				<DiscreteColorLegend 
+					items={this.renderLegendData()}
+					orientation="horizontal"
+				/>
+			</div>
+		);
+	}
+}
--- a/app/src/components/LiquidGauge.js
+++ b/app/src/components/LiquidGauge.js
@@ -0,0 +1,86 @@
+import React from "react";
+import { color } from "d3-color";
+import { interpolateRgb } from "d3-interpolate";
+import LiquidFillGauge from "react-liquid-gauge";
+
+
+export function renderLabel(props, inputVal){
+	const value = Math.round(parseFloat(inputVal));
+	const radius = Math.min(props.height / 2, props.width / 2);
+	const textPixels = (props.textSize * radius / 2);
+	const valueStyle = {
+		fontSize: textPixels
+	};
+	const percentStyle = {
+		fontSize: textPixels * 0.6
+	};
+
+	return (
+		<tspan>
+			<tspan className="value" style={valueStyle}>{value}</tspan>
+			<tspan style={percentStyle}>{props.percent}</tspan>
+		</tspan>
+	);
+}
+
+
+export function LiquidGauge(props){
+	// tag, units, maxValue, label
+	if (!props.tag){
+		return <span className="liquidgauge-no-tags"></span>;
+	}
+	const tagValue = props.tag.value;
+	const endColor = "#1F4788";
+	const startColor = "#dc143c";
+	
+	const radius = 100;
+	const interpolate = interpolateRgb(startColor, endColor);
+	const fillColor = interpolate(tagValue / props.maxValue);
+	const gradientStops = [
+		{
+			key: "0%",
+			stopColor: color(fillColor).darker(0.5).toString(),
+			stopOpacity: 1,
+			offset: "0%"
+		},
+		{
+			key: "50%",
+			stopColor: fillColor,
+			stopOpacity: 0.75,
+			offset: "50%"
+		},
+		{
+			key: "100%",
+			stopColor: color(fillColor).brighter(0.5).toString(),
+			stopOpacity: 0.5,
+			offset: "100%"
+		}
+	];
+
+	return (
+		<div className={"col liquidfill lqdfill-" + props.tag.name} style={{textAlign: "center"}}>
+			<h3>{props.label}</h3>
+			<LiquidFillGauge
+				style={{ margin: "0 auto" }}
+				width={radius * 2}
+				height={radius * 2}
+				value={tagValue / props.maxValue * 100}
+				percent={props.units}
+				textSize={1}
+				textOffsetX={0}
+				textOffsetY={0}
+				textRenderer={(props) => renderLabel(props, tagValue)}
+				riseAnimation
+				waveAnimation
+				waveFrequency={3}
+				waveAmplitude={2}
+				gradient
+				gradientStops={gradientStops}
+				circleStyle={{fill: fillColor}}
+				waveStyle={{fill: fillColor}}
+				textStyle={{fill: color("#444").toString(), fontFamily: "Arial"}}
+				waveTextStyle={{fill: color("#fff").toString(), fontFamily: "Arial"}}
+			/>
+		</div>
+	);
+}
--- a/app/src/components/Main.js
+++ b/app/src/components/Main.js
@@ -1,128 +1,16 @@
 import React, { Component } from "react";
-import _ from "lodash";
 import { connect } from "react-redux";
-import { FlexibleWidthXYPlot, LineSeries, VerticalGridLines, HorizontalGridLines, XAxis, YAxis, DiscreteColorLegend } from "react-vis";
-import "../../../node_modules/react-vis/dist/style.css";

-import { color } from "d3-color";
-import { interpolateRgb } from "d3-interpolate";
-import LiquidFillGauge from "react-liquid-gauge";
+import { LiquidGauge } from "./LiquidGauge";
+import { FlexibleGraph } from "./FlexibleGraph";
+
+// const graphColors = ["#d7191c", "#fdae61", "#ffffbf", "#abd9e9", "#2c7bb6"];

 /** Class for Main Page 
 *
 * @extends React.Component 
 */
 export class Main extends Component {
-
-	/**
-	 * Map an array of objects to a graph-usable array of objects
-	 * 
-	 * @param  {Array} values - list of objects with timestame and value properties
-	 * 
-	 * @returns {Array} list of objects with x and y properties
-	 */
-	mapTimestampAndValuePropToXY(values){
-		return _.map(values, (val) => {
-			return {x: val.timestamp, y: val.value};
-		});
-	}
-	
-	/**
-	 * Renders a Liquid Gauge.
-	 * 
-	 * @param  {object} tag - the tag structure
-	 * @param  {string} units - units for the tag
-	 * @param  {number} maxValue - maximum value to be displayed
-	 * @param  {number} label - label for the value (typically the tag name)
-	 * @returns {ReactElement} liquidGauge
-	 */
-	renderLiquidGauge(tag, units, maxValue, label){
-		if (!tag){
-			return <span></span>;
-		}
-		const tagValue = tag.value;
-		const endColor = "#1F4788";
-		const startColor = "#dc143c";
-		
-		const radius = 100;
-		const interpolate = interpolateRgb(startColor, endColor);
-		const fillColor = interpolate(tagValue / maxValue);
-		const gradientStops = [
-			{
-				key: "0%",
-				stopColor: color(fillColor).darker(0.5).toString(),
-				stopOpacity: 1,
-				offset: "0%"
-			},
-			{
-				key: "50%",
-				stopColor: fillColor,
-				stopOpacity: 0.75,
-				offset: "50%"
-			},
-			{
-				key: "100%",
-				stopColor: color(fillColor).brighter(0.5).toString(),
-				stopOpacity: 0.5,
-				offset: "100%"
-			}
-		];
-
-		return (
-			<div className={"col liquidfill lqdfill-" + tag.name} style={{textAlign: "center"}}>
-				<h3>{label}</h3>
-				<LiquidFillGauge
-					style={{ margin: "0 auto" }}
-					width={radius * 2}
-					height={radius * 2}
-					value={tagValue / maxValue * 100}
-					percent={units}
-					textSize={1}
-					textOffsetX={0}
-					textOffsetY={0}
-					textRenderer={(props) => {
-						const value = Math.round(tagValue);
-						const radius = Math.min(props.height / 2, props.width / 2);
-						const textPixels = (props.textSize * radius / 2);
-						const valueStyle = {
-							fontSize: textPixels
-						};
-						const percentStyle = {
-							fontSize: textPixels * 0.6
-						};
-
-						return (
-							<tspan>
-								<tspan className="value" style={valueStyle}>{value}</tspan>
-								<tspan style={percentStyle}>{props.percent}</tspan>
-							</tspan>
-						);
-					}}
-					riseAnimation
-					waveAnimation
-					waveFrequency={3}
-					waveAmplitude={2}
-					gradient
-					gradientStops={gradientStops}
-					circleStyle={{
-						fill: fillColor
-					}}
-					waveStyle={{
-						fill: fillColor
-					}}
-					textStyle={{
-						fill: color("#444").toString(),
-						fontFamily: "Arial"
-					}}
-					waveTextStyle={{
-						fill: color("#fff").toString(),
-						fontFamily: "Arial"
-					}}
-				/>
-			</div>
-		);
-	}
-
 	
 	/**
 	 * render
@@ -130,7 +18,8 @@ export class Main extends Component {
 	 * @returns {ReactElement} markup
 	 */
 	render(){
-		if (!this.props.tagHistory){
+		
+		if (!this.props.tagHistory || Object.keys(this.props.tagHistory).length === 0){
 			return(
 				<div className="container loading">
 					<h1>Loading...</h1>
@@ -147,7 +36,25 @@ export class Main extends Component {
 			);
 		}

-		if (Object.keys(this.props.tags).length === 0){
+		if (!this.props.tags || 
+			!this.props.tagHistory || 
+			!this.props.tags.val_FluidLevel ||
+			!this.props.tags.val_Flowmeter_BarrelsPerDay ||
+			!this.props.tags.val_TubingPressure || 
+			!this.props.tags.VFD_SpeedFdbk ||
+			!this.props.tags.VFD_OutCurrent ||
+			!this.props.tags.VFD_OutPower ||
+			!this.props.tags.VFD_Temp ||
+			!this.props.tagHistory.val_FluidLevel ||
+			!this.props.tagHistory.val_Flowmeter_BarrelsPerDay ||
+			!this.props.tagHistory.val_IntakePressure ||
+			!this.props.tagHistory.val_IntakeTemperature ||
+			!this.props.tagHistory.val_TubingPressure ||
+			!this.props.tagHistory.VFD_SpeedFdbk ||
+			!this.props.tagHistory.VFD_OutCurrent ||
+			!this.props.tagHistory.VFD_OutPower ||
+			!this.props.tagHistory.VFD_Temp
+		){
 			return(
 				<div className="container waiting">
 					<h1>Waiting for data...</h1>
@@ -155,69 +62,81 @@ export class Main extends Component {
 			);
 		}

-
+		
 		return (
 			<div className="container main">
 				<h3>Process Values</h3>
 				<div className="row" style={{marginBottom: "20px"}}>
-					{this.renderLiquidGauge(this.props.tags.val_FluidLevel, "ft.", 500, "Level")}
-					{this.renderLiquidGauge(this.props.tags.val_Flowmeter_BarrelsPerDay, "BPD", 5000, "Flow Rate")}
-					{this.renderLiquidGauge(this.props.tags.val_TubingPressure, "PSI", 400, "Tubing Pressure")}
+					<LiquidGauge tag={this.props.tags.val_FluidLevel} units="ft." maxValue={500} label="Level" />
+					<LiquidGauge tag={this.props.tags.val_Flowmeter_BarrelsPerDay} units="BPD" maxValue={5000} label="Flow Rate" />
+					<LiquidGauge tag={this.props.tags.val_TubingPressure} units="PSI" maxValue={400} label="Tubing Pressure" />
 				</div>
 				
-				<FlexibleWidthXYPlot 
-					height={300} 
-					xType="time"
-				>
-					<VerticalGridLines />
-					<HorizontalGridLines />
-					<XAxis />
-					<YAxis />
-					<LineSeries data={this.mapTimestampAndValuePropToXY(this.props.tagHistory.val_IntakePressure)} />
-					<LineSeries data={this.mapTimestampAndValuePropToXY(this.props.tagHistory.val_Flowmeter)} />
-					<LineSeries data={this.mapTimestampAndValuePropToXY(this.props.tagHistory.val_FluidLevel)} />
-					<LineSeries data={this.mapTimestampAndValuePropToXY(this.props.tagHistory.val_IntakeTemperature)} />
-					<LineSeries data={this.mapTimestampAndValuePropToXY(this.props.tagHistory.val_TubingPressure)} />
-				</FlexibleWidthXYPlot>
-				<DiscreteColorLegend 
-					items={[
-						{title: "Intake Pressure"},
-						{title: "Flowmeter"},
-						{title: "Fluid Level"},
-						{title: "Intake Temp"},
-						{title: "Tubing Pressure"}
+				<FlexibleGraph
+					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
 					]}
-					orientation="horizontal"
+					tags={[
+						this.props.tags.val_FluidLevel,
+						this.props.tags.val_Flowmeter,
+						this.props.tags.val_IntakePressure,
+						this.props.tags.val_IntakeTemperature,
+						this.props.tags.val_TubingPressure
+					]}
+					tagDescriptions={[
+						"Level",
+						"Flow Rate",
+						"Intake Pres",
+						"Intake Temp",
+						"Tubing Pres"
+					]}
+					units={[
+						"Ft.",
+						"GPM",
+						"PSI",
+						"deg F",
+						"PSI"
+					]}
+					round={[1, 2, 1, 1, 1]}
 				/>
 				<hr />

 				<h3>VFD Data</h3>
 				<div className="row" style={{marginBottom: "20px"}}>
-					{this.renderLiquidGauge(this.props.tags.VFD_OutCurrent, "A.", 100, "Current")}
-					{this.renderLiquidGauge(this.props.tags.VFD_SpeedFdbk, "Hz", 60, "Frequency")}
+					<LiquidGauge tag={this.props.tags.VFD_OutCurrent} units="A." maxValue={100} label="Current" />
+					<LiquidGauge tag={this.props.tags.VFD_SpeedFdbk} units="Hz" maxValue={60} label="Frequency" />
 				</div>
-				<FlexibleWidthXYPlot 
-					height={300} 
-					xType="time"
-				>
-					<VerticalGridLines />
-					<HorizontalGridLines />
-					<XAxis />
-					<YAxis />
-					<LineSeries data={this.mapTimestampAndValuePropToXY(this.props.tagHistory.VFD_OutCurrent)} />
-					<LineSeries data={this.mapTimestampAndValuePropToXY(this.props.tagHistory.VFD_SpeedFdbk)} />
-					<LineSeries data={this.mapTimestampAndValuePropToXY(this.props.tagHistory.VFD_OutPower)} />
-					<LineSeries data={this.mapTimestampAndValuePropToXY(this.props.tagHistory.VFD_Temp)} />
-				</FlexibleWidthXYPlot>
-				<DiscreteColorLegend 
-					items={[
-						{title: "VFD Current"},
-						{title: "VFD Speed Feedback"},
-						{title: "VFD Output Power"},
-						{title: "VFD Temp"}
+				<FlexibleGraph
+					tagHistory={[
+						this.props.tagHistory.VFD_SpeedFdbk,
+						this.props.tagHistory.VFD_OutCurrent,
+						this.props.tagHistory.VFD_OutPower,
+						this.props.tagHistory.VFD_Temp
 					]}
-					orientation="horizontal"
-				/>	
+					tags={[
+						this.props.tags.VFD_SpeedFdbk,
+						this.props.tags.VFD_OutCurrent,
+						this.props.tags.VFD_OutPower,
+						this.props.tags.VFD_Temp
+					]}
+					tagDescriptions={[
+						"Speed",
+						"Current",
+						"Power",
+						"Temp"
+					]}
+					units={[
+						"Hz",
+						"Amps",
+						"kW",
+						"deg C"
+					]}
+					round={[2, 2, 1, 1]}
+				/>
 			</div>
 		);
 	}
--- a/app/src/components/Settings.js
+++ b/app/src/components/Settings.js
@@ -77,18 +77,18 @@ export class Settings extends Component {
 		return (
 			<div className="container settings">
 				<h1>Settings</h1>
-				<form className="form-inline mb-2">
+				<form className="form-inline">
 					<div className="form-group">
 						<label htmlFor="ipAddress">IP Address</label>
 						<input
 							id="ipAddress"
-							className="form-control	ip-address-field"
+							className="form-control	ip-address-field m-2"
 							value={this.state.ipAddress}
 							placeholder="PLC IP Address"
 							onChange={this.onIpAddressInputChange}
 						/>
 						<button
-							className={ipAddressBtnClass + " btn btn-primary ip-submit-button"}
+							className={ipAddressBtnClass + " btn btn-primary ip-submit-button  m-2"}
 							onClick={(e) => this.sendIpAddress(e)}>
 						Set IP Address
 						</button>
@@ -100,23 +100,35 @@ export class Settings extends Component {
 				<ul className="list-group tag-list">
 					{this.getTagList()}
 				</ul>
-				<form>
-					<input
-						value={this.state.newTag}
-						onChange={this.onNewTagChange}
-						placeholder="New Tag Name..."
-						className="tag-name-input"
-					/>
-					<button
-						className="btn btn-success float-right add-tag-button"
-						onClick={(e) => this.onNewTagSubmit(e)}
-					>Add Tag</button>

+				<hr />
+				
+				<form className="form-inline">
+					<div className="form-group">
+						<label htmlFor="tag-name-input">New Tag</label>
+						<input
+							value={this.state.newTag}
+							onChange={this.onNewTagChange}
+							placeholder="New Tag Name..."
+							className="tag-name-input form-control m-2"
+							id="tag-name-input"
+						/>
+						<button
+							className="btn btn-success float-right add-tag-button  m-2"
+							onClick={(e) => this.onNewTagSubmit(e)}
+						>Add Tag</button>
+					</div>
+				</form>
+				<hr />
+				<div>
 					<button
 						className={initializeBtnClass + " btn btn-success save-button"}
 						onClick={(e) => this.onSave(e)}
 					>Save</button>
-				</form>
+				</div>
+				
+				<hr />
+
 			</div>
 		);
 	}
--- a/app/src/reducers/reducer_taghistory.js
+++ b/app/src/reducers/reducer_taghistory.js
@@ -2,6 +2,8 @@ import _ from "lodash";
 import { IPC_TAGUPDATE } from "../actions/actions_tags";
 import {history_tags as historyTags} from "../../../tagList.json";

+const historyPoints = 50000;
+

 export default function(state = {}, action){
 	switch (action.type) {
@@ -14,7 +16,7 @@ export default function(state = {}, action){
 			};
 			let tagHistory = [ thisEntry ]; 
 			if (state[name]){
-				tagHistory = _.take(_.concat(tagHistory, state[name]), 500);
+				tagHistory = _.take(_.concat(tagHistory, state[name]), historyPoints);
 			}
 			return { ...state, [name]: tagHistory};

--- a/app/src/renderer_process.js
+++ b/app/src/renderer_process.js
@@ -20,6 +20,8 @@ import { ipcTagUpdate } from "./actions/actions_tags";
 import { ipcPlcDetailsReceived, ipcPlcErrorReceived } from "./actions/actions_plc";

 export const { history_tags: historyTags, event_tags: eventTags } = require("../../tagList.json");
+export const historyPoints = 5000;
+

 const ipc = createIpc({
 	"tag:valueupdate": ipcTagUpdate,
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
    "esdoc": "^1.0.4",
    "ethernet-ip": "^1.1.4",
    "lodash": "^4.17.5",
+    "moment": "^2.22.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-event-timeline": "^1.5.1",
@@ -70,8 +71,7 @@
    "react-vis": "^1.9.2",
    "redux": "^3.7.2",
    "redux-electron-ipc": "^1.1.12",
-    "redux-persist": "^5.9.1",
-    "victory": "^0.25.7"
+    "redux-persist": "^5.9.1"
  },
  "build": {
    "appId": "com.henrypump.maxwatersystem",
--- a/yarn.lock
+++ b/yarn.lock
@@ -1714,10 +1714,6 @@ caniuse-lite@^1.0.30000792:
  version "1.0.30000828"
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000828.tgz#048f98de213f7a3c047bf78a9523c611855d4fdd"

-canvas-gauges@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/canvas-gauges/-/canvas-gauges-2.1.4.tgz#4b54ecbf3b1a94b41e01a4a9ecd0e4bacad1f13a"
-
 capture-stack-trace@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
@@ -1733,6 +1729,10 @@ center-align@^0.1.1:
    align-text "^0.1.3"
    lazy-cache "^1.0.3"

+chain-function@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
+
 chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -1882,6 +1882,10 @@ class-utils@^0.3.5:
    isobject "^3.0.0"
    static-extend "^0.1.1"

+classnames@2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 cli-boxes@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
@@ -2137,6 +2141,10 @@ copy-descriptor@^0.1.0:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"

+core-js@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
+
 core-js@^1.0.0:
  version "1.2.7"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
@@ -2367,7 +2375,7 @@ d3-dispatch@1:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.3.tgz#46e1491eaa9b58c358fce5be4e8bed626e7871f8"

-d3-ease@1, d3-ease@^1.0.0, d3-ease@^1.0.2:
+d3-ease@1, d3-ease@^1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.3.tgz#68bfbc349338a380c44d8acc4fbc3304aa2d8c0e"

@@ -2385,7 +2393,7 @@ d3-hierarchy@^1.1.4:
  version "1.1.5"
  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.5.tgz#a1c845c42f84a206bcf1c01c01098ea4ddaa7a26"

-d3-interpolate@1, d3-interpolate@^1.1.1, d3-interpolate@^1.1.4, d3-interpolate@^1.1.5, d3-interpolate@^1.1.6:
+d3-interpolate@1, d3-interpolate@^1.1.4, d3-interpolate@^1.1.5, d3-interpolate@^1.1.6:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.1.6.tgz#2cf395ae2381804df08aa1bf766b7f97b5f68fb6"
  dependencies:
@@ -2403,7 +2411,19 @@ d3-sankey@^0.7.1:
    d3-collection "1"
    d3-shape "^1.2.0"

-d3-scale@^1.0.0, d3-scale@^1.0.5, d3-scale@^1.0.6:
+d3-scale@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.6.tgz#bce19da80d3a0cf422c9543ae3322086220b34ed"
+  dependencies:
+    d3-array "^1.2.0"
+    d3-collection "1"
+    d3-color "1"
+    d3-format "1"
+    d3-interpolate "1"
+    d3-time "1"
+    d3-time-format "2"
+
+d3-scale@^1.0.5, d3-scale@^1.0.6:
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.7.tgz#fa90324b3ea8a776422bd0472afab0b252a0945d"
  dependencies:
@@ -2419,7 +2439,7 @@ d3-selection@^1.1.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.3.0.tgz#d53772382d3dc4f7507bfb28bcd2d6aed2a0ad6d"

-d3-shape@^1.0.0, d3-shape@^1.1.0, d3-shape@^1.2.0:
+d3-shape@1.2.0, d3-shape@^1.1.0, d3-shape@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.2.0.tgz#45d01538f064bafd05ea3d6d2cb748fd8c41f777"
  dependencies:
@@ -2435,7 +2455,7 @@ d3-time@1:
  version "1.0.8"
  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.8.tgz#dbd2d6007bf416fe67a76d17947b784bffea1e84"

-d3-timer@1, d3-timer@^1.0.0, d3-timer@^1.0.3:
+d3-timer@1, d3-timer@^1.0.3:
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.7.tgz#df9650ca587f6c96607ff4e60cc38229e8dd8531"

@@ -2638,6 +2658,10 @@ doctrine@^2.0.2, doctrine@^2.1.0:
  dependencies:
    esutils "^2.0.2"

+dom-helpers@^3.2.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
+
 dom-serializer@0, dom-serializer@~0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -3328,7 +3352,7 @@ extsprintf@^1.2.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"

-fast-deep-equal@^1.0.0, fast-deep-equal@^1.1.0:
+fast-deep-equal@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"

@@ -5345,7 +5369,7 @@ lodash.uniq@^4.5.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"

-lodash@^4.1.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
+lodash@^4.1.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@~4.17.4:
  version "4.17.5"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"

@@ -5656,6 +5680,10 @@ mkdirp@0.5.0:
  dependencies:
    minimist "0.0.8"

+moment@^2.22.0:
+  version "2.22.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.0.tgz#7921ade01017dd45186e7fee5f424f0b8663a730"
+
 move-concurrently@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -6663,7 +6691,7 @@ promise@^7.1.1:
  dependencies:
    asap "~2.0.3"

-prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0:
  version "15.6.1"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
  dependencies:
@@ -6757,7 +6785,7 @@ querystring@0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"

-raf@^3.1.0, raf@^3.4.0:
+raf@^3.1.0, raf@^3.2.0, raf@^3.4.0:
  version "3.4.0"
  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
  dependencies:
@@ -6803,12 +6831,6 @@ rc@^1.0.1, rc@^1.1.2, rc@^1.1.6, rc@^1.1.7, rc@^1.2.1:
    minimist "^1.2.0"
    strip-json-comments "~2.0.1"

-react-canvas-gauges@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/react-canvas-gauges/-/react-canvas-gauges-1.2.1.tgz#0bbf77f5f6418978e130693f6344d4450417d98d"
-  dependencies:
-    canvas-gauges "^2.1.4"
-
 react-dom@^16.2.0:
  version "16.3.1"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.1.tgz#6a3c90a4fb62f915bdbcf6204422d93a7d4ca573"
@@ -6824,10 +6846,6 @@ react-event-timeline@^1.5.1:
  dependencies:
    prop-types "^15.6.0"

-react-gauge-test@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/react-gauge-test/-/react-gauge-test-0.1.2.tgz#40019d4a5226d8a06255ff176cba7ed13d444ea7"
-
 react-is@^16.3.1:
  version "16.3.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.1.tgz#ee66e6d8283224a83b3030e110056798488359ba"
@@ -6874,6 +6892,12 @@ react-redux@^5.0.7:
    loose-envify "^1.1.0"
    prop-types "^15.6.0"

+react-resize-detector@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-1.1.0.tgz#4a9831fa3caad32230478dd0185cbd2aa91a5ebf"
+  dependencies:
+    prop-types "^15.5.10"
+
 react-router-dom@^4.2.2:
  version "4.2.2"
  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"
@@ -6897,9 +6921,14 @@ react-router@^4.2.0:
    prop-types "^15.5.4"
    warning "^3.0.0"

-react-svg-gauge@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/react-svg-gauge/-/react-svg-gauge-1.0.8.tgz#d4a168b093be7dbb8e69d29abcd88cac0b2545b4"
+react-smooth@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-1.0.0.tgz#b29dbebddddb06d21b5b08962167fb9eac1897d8"
+  dependencies:
+    lodash "~4.17.4"
+    prop-types "^15.6.0"
+    raf "^3.2.0"
+    react-transition-group "^2.2.1"

 react-test-renderer@^16.0.0-0:
  version "16.3.1"
@@ -6910,6 +6939,16 @@ react-test-renderer@^16.0.0-0:
    prop-types "^15.6.0"
    react-is "^16.3.1"

+react-transition-group@^2.2.1:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.3.0.tgz#8dd1af58f6af284b19fd057f512e74f20438ad31"
+  dependencies:
+    chain-function "^1.0.0"
+    dom-helpers "^3.2.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.5.8"
+    warning "^3.0.0"
+
 react-vis@^1.9.2:
  version "1.9.2"
  resolved "https://registry.yarnpkg.com/react-vis/-/react-vis-1.9.2.tgz#4dbd5d91ac820fd39fa7ad1c892198495194f6e3"
@@ -7055,6 +7094,26 @@ recast@^0.14.1:
    private "~0.1.5"
    source-map "~0.6.1"

+recharts-scale@0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.3.2.tgz#dac7621714a4765d152cb2adbc30c73b831208c9"
+
+recharts@^1.0.0-beta.10:
+  version "1.0.0-beta.10"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-1.0.0-beta.10.tgz#d3cd15df6b7879d5968da3c942b5fcdaf2504fe1"
+  dependencies:
+    classnames "2.2.5"
+    core-js "2.5.1"
+    d3-interpolate "^1.1.5"
+    d3-scale "1.0.6"
+    d3-shape "1.2.0"
+    lodash "~4.17.4"
+    prop-types "^15.6.0"
+    react-resize-detector "1.1.0"
+    react-smooth "1.0.0"
+    recharts-scale "0.3.2"
+    reduce-css-calc "1.3.0"
+
 rechoir@^0.6.2:
  version "0.6.2"
  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@@ -7068,7 +7127,7 @@ redent@^1.0.0:
    indent-string "^2.1.0"
    strip-indent "^1.0.1"

-reduce-css-calc@^1.2.6:
+reduce-css-calc@1.3.0, reduce-css-calc@^1.2.6:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
  dependencies:
@@ -8365,42 +8424,6 @@ verror@1.10.0:
    core-util-is "1.0.2"
    extsprintf "^1.2.0"

-victory-chart@^25.2.0:
-  version "25.2.3"
-  resolved "https://registry.yarnpkg.com/victory-chart/-/victory-chart-25.2.3.tgz#7b4ee628ea380e99f229df044f39e386f2501dbe"
-  dependencies:
-    d3-voronoi "^1.1.2"
-    lodash "^4.17.5"
-    victory-core "^21.1.2"
-
-victory-core@^21.1.0, victory-core@^21.1.1, victory-core@^21.1.2:
-  version "21.1.8"
-  resolved "https://registry.yarnpkg.com/victory-core/-/victory-core-21.1.8.tgz#4d7d99d111eb325b83b598fcc2ed5118a5a8e7b2"
-  dependencies:
-    d3-ease "^1.0.0"
-    d3-interpolate "^1.1.1"
-    d3-scale "^1.0.0"
-    d3-shape "^1.2.0"
-    d3-timer "^1.0.0"
-    fast-deep-equal "^1.1.0"
-    lodash "^4.17.5"
-
-victory-pie@^14.0.2:
-  version "14.0.2"
-  resolved "https://registry.yarnpkg.com/victory-pie/-/victory-pie-14.0.2.tgz#fc284febf9c505b5de852e34891492d607145c39"
-  dependencies:
-    d3-shape "^1.0.0"
-    lodash "^4.17.5"
-    victory-core "^21.1.0"
-
-victory@^0.25.7:
-  version "0.25.7"
-  resolved "https://registry.yarnpkg.com/victory/-/victory-0.25.7.tgz#7de7532ba5514f9703da880ffa06c998d86a98fb"
-  dependencies:
-    victory-chart "^25.2.0"
-    victory-core "^21.1.1"
-    victory-pie "^14.0.2"
-
 vinyl-file@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/vinyl-file/-/vinyl-file-2.0.0.tgz#a7ebf5ffbefda1b7d18d140fcb07b223efb6751a"