AllSpiceMirrors/ThunderScope
7
Fork 0
mirror of https://github.com/EEVengers/ThunderScope.git synced 2025-04-08 06:25:30 +00:00
Files Issues Releases Activity

removed channelList and added redux to graph

Browse Source
This commit is contained in:
Jason Bonnell 2021-03-20 20:25:40 -04:00
parent 10a41006e2
commit 4177d47404
2 changed files with 62 additions and 70 deletions
Software/waveview/src
App.tsx
components/graph
graph.tsx

11
Software/waveview/src/App.tsx
View File

@ -17,22 +17,12 @@ class App extends React.Component {
timerID: number = 0;
generator: TestPoints;
conf: TestConf;
channelList: {
color: string,
className:string
}[];
constructor(props: any) {
super(props);
this.state = initialState;
this.generator = new TestPoints(1000, 30);
this.conf = new TestConf();
this.channelList = [
{color: "#EBFF00", className: "Channel1"},
{color: "#00FF19", className: "Channel2"},
{color: "#0075FF", className: "Channel3"},
{color: "#FF0000", className: "Channel4"}
]
}
componentDidMount() {
@ -67,7 +57,6 @@ class App extends React.Component {
yDomain={this.generator.y.getDomain()}
xDomain={this.generator.x.getDomain()}
dataSeries={this.generator.getData()}
colorSeries={this.channelList.map((c, i) => c.color)}
/>
<BottomBar />
<Sidebar />

121
Software/waveview/src/components/graph/graph.tsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import { connect } from 'react-redux';
import './../../css/graph/graph.css';
import {
FlexibleXYPlot,
@ -9,67 +10,69 @@ import {
LineSeries
} from 'react-vis';
interface IGraphProps {
yDomain: number[],
xDomain: number[],
dataSeries: any[][],
colorSeries: string[]
}
class Graph extends React.Component<any, any> {
function Graph(props: IGraphProps) {
return (
<div className="graph_view">
<div
className="graph_sidebar"
>
<p
className = "graph_arrow"
render() {
return (
<div className="graph_view">
<div
className="graph_sidebar"
>
&#x21b3;
</p>
<p
className = "graph_arrow"
>
&#x21b3;
</p>
</div>
<FlexibleXYPlot
yDomain={this.props.yDomain}
xDomain={this.props.xDomain}
margin={{right:0, bottom:0}}
>
<HorizontalGridLines
style={{stroke: '#4D4D4D'}}
left={0}
top={0}
width={10000}
height={10000}
tickTotal={12}
/>
<VerticalGridLines
style={{stroke: '#4D4D4D'}}
left={0}
top={0}
width={10000}
height={10000}
tickTotal={10}
/>
<XAxis
title=""
hideTicks
/>
<YAxis
title=""
hideTicks
/>
{
this.props.dataSeries.map((data: any, index: any) => {
return <LineSeries
className="data-series"
data={data}
style={{fill:"none", transform: "translate(0,0)"}}
color={this.props.settings.colors.channel[index]}
/>
})
}
</FlexibleXYPlot>
</div>
<FlexibleXYPlot
yDomain={props.yDomain}
xDomain={props.xDomain}
margin={{right:0, bottom:0}}
>
<HorizontalGridLines
style={{stroke: '#4D4D4D'}}
left={0}
top={0}
width={10000}
height={10000}
tickTotal={12}
/>
<VerticalGridLines
style={{stroke: '#4D4D4D'}}
left={0}
top={0}
width={10000}
height={10000}
tickTotal={10}
/>
<XAxis
title=""
hideTicks
/>
<YAxis
title=""
hideTicks
/>
{
props.dataSeries.map((data, index) => {
return <LineSeries
className="data-series"
data={data}
style={{fill:"none", transform: "translate(0,0)"}}
color={props.colorSeries[index]}
/>
})
}
</FlexibleXYPlot>
</div>
)
)
}
}
export default Graph;
function mapStateToProps(state: { settings: any }) {
return {
settings: state.settings
};
}
export default connect(mapStateToProps)(Graph);