May 24th 2019
Today I worked more on the project for Sirius I wrote about yesterday. We will be using React as well as Recharts for React which uses d3 to create modular components for charts and graphs. Today I created a fake set of data to use as a test for tank levels, and tank levelhistory. I also created a random level updater to mock when we would recieve data from the server that levels have changed. Heres what it looks like (very basic.)
Here is a bit of the code:
Main App
import React from 'react';
import {Component} from 'react';
import Tank from './components/Tank';
import TankData from './data/TankData'
import Chart from './components/Chart'
import './app.css'
class App extends Component {
constructor(props) {
super(props)
this.state = {
TankData: [...TankData]
}
this.generateRandomLevels = this.generateRandomLevels.bind(this)
this.JSONify = this.JSONify.bind(this);
}
generateRandomLevels() {
let tanks = this.state.TankData;
let newTimeStamp = new Date().toString().split(' ').splice(0,5).join(' ');
tanks.forEach((tank) => {
//save history of current water levels
tank.history.push({water: tank.currentH20Percent, oil: tank.currentOilPercent, timeStamp: tank.timeStamp});
//randomize water levels
let randomWater = Math.floor(Math.random()*7)
if (Math.random() > .5) {
if (tank.currentH20Percent + randomWater <= 10) {
tank.currentH20Percent += randomWater;
}
} else {
if (tank.currentH20Percent - randomWater >= 1) {
tank.currentH20Percent -= randomWater;
}
}
//randomize oil levels
let randomOil = Math.floor(Math.random()*10);
if (Math.random() > .5) {
if (tank.currentOilPercent + randomOil <= 85) {
tank.currentOilPercent += randomOil
}
} else {
if (tank.currentOilPercent - randomOil >= 10) {
tank.currentOilPercent -= randomOil;
}
}
//save new date to 'tank.date'
tank.timeStamp = newTimeStamp;
});
//save state of water levels
this.setState({
TankData: [...tanks]
})
}
JSONify(){
let dataJSON = JSON.stringify(this.state.TankData[0].history);
console.log(dataJSON)
}
render() {
let tanks = this.state.TankData.map((tank) => {
return <Tank tankInfo={tank} key={tank.tankName} />
})
return (
<div className="App">
<div className="tank-container">
{tanks}
<button onClick={this.generateRandomLevels}>Random</button>
<button onClick={this.JSONify}>JSONIFY</button>
</div>
<Chart chartData={this.state.TankData[0].history} />
</div>
)
}
}
export default App;
Tank Component
const Tank = props => {
let t = props.tankInfo
let waterStyles = {
backgroundColor: 'blue',
color: 'white',
textAlign: 'center',
height: (250*(t.currentH20Percent/100)),
width: "200px",
}
let oilHeight = (250*(t.currentOilPercent/100))
let oilStyles = {
backgroundColor: 'grey',
color: 'white',
textAlign: 'center',
height: oilHeight,
width: "200px",
marginTop: 250-oilHeight-(250*(t.currentH20Percent/100)),
}
return (
<div>
<div id={t.tankName} className="outer-tank">
<div className="oil-tank" style={oilStyles}>
</div>
<div className="water-tank" style={waterStyles}>
</div>
</div>
<h2>{t.tankName}</h2>
<p>{t.time}</p>
</div>
)
}
export default Tank
Chart Component
import React from 'react';
import {
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts';
import './chart.css'
const Chart = props => {
//important to distribute the data from the array into the array, not sure why it works like this
let propTankData = [...props.chartData];
return (
<LineChart width={800} height={300} data={propTankData}
margin=>
<XAxis dataKey="timeStamp"/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Line type="monotone" dataKey="oil" stroke="#82ca9d" />
<Line type="monotone" dataKey="water" stroke="blue" />
</LineChart>
)
}
export default Chart