Move graph logic out of App.tsx, add tickCounts to Redux

Software/waveview/src/App.tsx

@@ -3,57 +3,15 @@ import './App.css';
 import Graph from './components/graph/graph';
 import BottomBar from './components/bottombar/bottombar';
 import Sidebar from './components/sidebar/sidebar';
-import TestPoints from './util/testpoints';
-
-interface IAppState {
-  tickCount: number;
-}
-
-let initialState: IAppState = {tickCount: 0};
 
 class App extends React.Component {
-  state: IAppState;
-  timerID: number = 0;
-  generator: TestPoints;
-
-  constructor(props: any) {
-    super(props);
-    this.state = initialState;
-    this.generator = new TestPoints(50, 50);
-  }
-
-  componentDidMount() {
-    this.timerID = window.setInterval(
-      () => this.tick(),
-      16.67
-    );
-    this.generator.mountCalls();
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.timerID)
-  }
-
-  tick() {
-    let tickCount = this.state.tickCount + 1;
-    this.generator.update();
-    if(tickCount % 100 === 0) {
-      console.log(tickCount);
-    }
-    this.setState({tickCount: tickCount});
-  }
-
   render() {
     return (
       <div className="App">
         <header
           className="App-header">
         </header>
-        <Graph
-          yDomain={this.generator.y.getDomain()}
-          xDomain={this.generator.x.getDomain()}
-          dataSeries={this.generator.getData()}
-          />
+        <Graph />
         <BottomBar />
         <Sidebar />
       </div>

Software/waveview/src/components/graph/graph.tsx

@@ -10,36 +10,57 @@ import {
   LineSeries
 } from 'react-vis';
 
-class Graph extends React.Component<any, any> { 
+import TestPoints from '../../util/testpoints';
+
+class Graph extends React.Component<any, any> {
+  timerID: number = 0;
+  generator: TestPoints = new TestPoints(50, 50);
+
+  componentDidMount() {
+    this.timerID = window.setInterval(
+      () => this.tick(),
+      16.67
+    );
+    this.generator.mountCalls();
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timerID)
+  }
+
+  tick() {
+    this.props.dispatch({type: 'graph/tick'});
+    this.generator.update();
+  }
 
   render() {
     return (
       <div className="graph_view">
-        <div 
+        <div
           className="graph_sidebar"
         >
-          <p 
+          <p
             className = "graph_arrow"
           >
             &#x21b3;
           </p>
         </div>
         <FlexibleXYPlot
-          yDomain={this.props.yDomain}
-          xDomain={this.props.xDomain}
+          yDomain={this.generator.y.getDomain()}
+          xDomain={this.generator.x.getDomain()}
           margin={{right:0, bottom:0}}
         >
-          <HorizontalGridLines 
+          <HorizontalGridLines
             style={{stroke: '#4D4D4D'}}
-            left={0} 
+            left={0}
             top={0}
             width={10000}
             height={10000}
             tickTotal={12}
           />
-          <VerticalGridLines 
+          <VerticalGridLines
             style={{stroke: '#4D4D4D'}}
-            left={0} 
+            left={0}
             top={0}
             width={10000}
             height={10000}
@@ -49,12 +70,12 @@ class Graph extends React.Component<any, any> {
             title=""
             hideTicks
           />
-          <YAxis 
-            title="" 
+          <YAxis
+            title=""
             hideTicks
           />
           {
-            this.props.dataSeries.map((data: any, index: any) => {
+            this.generator.getData().map((data: any, index: any) => {
               return <LineSeries
                 className="data-series"
                 data={data}

Software/waveview/src/components/sidebar/widgets/measurementsWidget.tsx

@@ -10,15 +10,18 @@ class MeasurementsWidget extends React.Component<any, any> {
 
   componentDidMount() {
     this.timerID = window.setInterval(
-      () => {
-        if(!this.props.graph.singleMode) {
-          this.update();
-        }
-      },
+      () => this.tick(),
       1000
     );
   }
 
+  tick() {
+    this.props.dispatch({type: 'measurements/tick'});
+    if(!this.props.graph.singleMode) {
+      this.update();
+    }
+  }
+
   update() {
     //TODO: unit analysis
     let channels = this.props.measurementsWidget.displayChannel as boolean[];

Software/waveview/src/redux/initialStates/graphInitialState.tsx

@@ -4,7 +4,8 @@ const GraphInitialState = {
   currentStatus: GraphStatus.On,
   singleMode: false,
   xDomain: [0,0],
-  yDomain: [0,0]
+  yDomain: [0,0],
+  tickCount: 0
 };
 
 export default GraphInitialState;

Software/waveview/src/redux/initialStates/measurementsWidgetInitialState.tsx

@@ -30,27 +30,28 @@ const MeasurementsWidgetInitialState = {
     }
   ],
   min: [
-    { 
+    {
       value: 10,
       unit: VoltageUnit.MicroVolt,
       display: false
     },
-    { 
+    {
       value: 20,
       unit: VoltageUnit.NanoVolt,
       display: false
     },
-    { 
+    {
       value: 30,
       unit: VoltageUnit.MilliVolt,
       display: false
     },
-    { 
+    {
       value: 40,
       unit: VoltageUnit.Volt,
       display: false
     }
-  ]
+  ],
+  tickCount: 0
 };
 
 export default MeasurementsWidgetInitialState;

Software/waveview/src/redux/reducers/graphReducer.tsx

@@ -16,6 +16,11 @@ export default function(state = GraphInitialState, action: {type: any, payload:
         currentStatus: GraphStatus.Off,
         singleMode: !state.singleMode
       };
+    case "graph/tick":
+      return {
+        ...state,
+        tickCount: state.tickCount + 1
+      }
     default:
       return state;
   }

Software/waveview/src/redux/reducers/widgets/measurementsWidgetReducer.tsx

@@ -35,6 +35,11 @@ export default function(state = MeasurementsWidgetInitialState, action: {type: a
         ...state,
         min: tmp
       }
+    case "measurements/tick":
+      return {
+        ...state,
+        tickCount: state.tickCount + 1
+      }
     default:
       return state;
   }

Software/waveview/src/util/testpoints.ts

@@ -111,6 +111,7 @@ class TestPoints {
 
   getData() {
     var chMax = this.effectiveChCount();
+    console.log(this.scope_data);
     return this.scope_data.slice(0, chMax);
   }
 }