Change different Graphs based on drop down selection - reactjs

Question

I'm working on a school project. With Reactjs. I have a side panel that includes a drop down box that gives 2 options
"live" -- display the live graph
"processed" -- show another graph created by importing a certain JSON file.
Here is the SidePanel.js I had. I do have a Graph.js for the graph, and a GraphContainer.js that basically put the SidePanel and Graph together.
I'm new to React so my code isn't good and sloppy.
If this question is a duplicate, please kindly let me know.
I'm also not a frequent on Stackoverflow, so if there's something I can do to improve my post, please let me know!
Thank you for your time!
import React, { Component } from 'react';
import './SidePanel.css'
class SidePanel extends Component {
constructor (props){
super(props)
this.state = {}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
return(
<div className="SideContainer">
<div className="upSide">
<h4>Information</h4>
<ul>
<li>Device: <b>Device 1</b></li>
<li>Status: <b>Connected</b></li>
</ul>
</div>
<div className="downSide">
<form>
<label>
<h4>Options</h4>
<select value={this.state.value} onChange={this.handleChange}>
<option value="live">Live</option>
<option value="processed">Processed</option>
</select>
</label>
</form>
</div>
</div>
);
}
}
export default SidePanel;
So what I'm doing is I'm putting a GraphContainer.js to contain the Graph and the SidePanel, so the GraphContainer.js should not matter that much.
This is my Graph.js:
import React, { Component } from 'react';
import Highcharts from 'highcharts';
import socketIOClient from "socket.io-client";
import {
HighchartsChart, Chart, withHighcharts, XAxis, YAxis, Title, Legend, LineSeries
} from 'react-jsx-highcharts';
import './Graph.css'
var jsonData = import '../jsonData.json'
//pass the json file location
class Graph extends Component {
constructor (props) {
super(props);
this.addDataPoint = this.addDataPoint.bind(this);
const now = Date.now();
this.state = {
data: []
}
}
componentDidMount() {
//GRAPH 1: Here is to somehow put JSONdata
console.log(jsonData)
//GRAPH 2: Here is taking data from socket for testing
var sensorSerial = this.props.match.params.sensorId
const socket = socketIOClient("http://localhost:5001/test");
socket.on("newnumber", data => this.addDataPoint(data));
}
addDataPoint(data){
if(data.sensorSerial == this.props.match.params.sensorId){
var newData = this.state.data.slice(0)
console.log(new Date(data.dateTime.split(' ').join('T')))
newData.push([new Date(data.dateTime.split(' ').join('T')), data.number])
this.setState({
data: newData
})
}
}
render() {
// const {data} = this.state;
// console.log(new Date("2019-04-04T10:55:08.841287" + Z))
const plotOptions = {
series: {
pointStart: new Date("2019-04-04T10:55:08.841287Z")
}
}
return (
<div className="graph">
<HighchartsChart plotOptions={plotOptions}>
<Chart />
<Title>Data</Title>
<Legend layout="vertical" align="right" verticalAlign="middle" >
<Legend.Title>Legend</Legend.Title>
</Legend>
<XAxis type="datetime">
<XAxis.Title>Time</XAxis.Title>
</XAxis>
<YAxis>
<YAxis.Title>Y-axis</YAxis.Title>
<LineSeries name="Channel 1" data={this.state.data}/>
</YAxis>
</HighchartsChart>
</div>
);
}
}
export default withHighcharts(Graph, Highcharts);
And here is the example JSON file I want to test:
{
"data": [
{"datetime": "", "data": [1,2,3,4]},
{"datetime": "", "data": [1,2,3,4]}
]
}

Answer 1

You can use conditional rendering like this (Note // are comments ).
render(){
let {value } = this.state // we are using destructuring here to get the value
// property - if are you using babel , so you can
// use ES6 syntax for your Javascript code ? If not
// just use this.state.value
// from state or you could just use this.state.value
let data = value !== 'live ' ? this.getJSONdata() : this.getLiveData()
// Call functions to get the data depending on the value - see below
return (
// wherever in your jsx you want to display your graph
<Graph data={data} />
)
}
So above the render function you'd want to have the two functions you want to use getJSONdata and getLiveData
They would have the syntax below (again Im using arrow functions (ES6 syntax))
getJSONData = () => // get your data
// or not es6 sytax
getJSONData = function() {}
If you let me know how you are going to get your data I'll help you with how best to get it.