Graph & android fixes

components/Graph.js

@@ -1,34 +1,83 @@
 import React from 'react';
-import {View, StyleSheet, Text} from 'react-native';
+import { View, StyleSheet } from 'react-native';
 
 //import Svg, {Polyline, Polygon, Rect, G} from 'react-native-svg-web';
-import Svg, {Polyline, Polygon, Rect, G} from 'react-native-svg';
+import Svg, { Polyline, Polygon, Rect, G, Text } from 'react-native-svg';
+import { connect } from 'react-redux';
 
 
+function computeTickMark(largest, mostTicks) {
+    const minimum = largest / mostTicks
+    const magnitude = 10 ** Math.floor(Math.log10(minimum))
+    const residual = minimum / magnitude
+    if (residual > 5)
+        return 10 * magnitude
+    else if (residual > 2)
+        return 5 * magnitude
+    else if (residual > 1)
+        return 2 * magnitude
+    else
+        return magnitude
+}
+
 const Graph = props => {
     const graphHeight = 100;
 
-    const data = props.data.slice(-600);
-    
-    const coordStr = data.map((element, i) => `${i}, ${element / 2}`);
+    const data = props.data.slice(-300);
+    const maxElement = data.reduce((running, x) => Math.max(x, running), 2 / props.kgFactor);
+
+    const coordStr = data.map((element, i) => `${i}, ${100 - (element * 100 / maxElement)}`);
+
+    const tick = computeTickMark(maxElement * props.kgFactor * 0.6, 4);
+    let ticks = [];
+    let nextTick = tick;
+    while (nextTick < maxElement * props.kgFactor) {
+        ticks.push(nextTick);
+        nextTick += tick;
+    }
 
     return (
-        <View style={{justifyContent: 'center', alignItems: 'center'}}>
-            <Svg height={graphHeight} width="80%" viewbox="0 0 100 100">
-                <G transform={"translate(0," + graphHeight.toString() + ") scale(1, -1)"}>
+        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+            <Svg height={graphHeight} width="80%" viewbox="0 0 300 100">
                     <Polyline
                         points={coordStr.join(" ")}
                         stroke="black"
                         strokeWidth="3"
                         strokeOpacity="0.5"
                         strokeLinejoin="round"
-                        fill="none" 
+                        fill="none"
                     />
-                </G>
+                    {ticks.map(tick => (
+                        <React.Fragment>
+                            <Polyline
+                                points={`40,  ${100 - (tick / props.kgFactor * 100 / maxElement)} 300, ${100 - (tick / props.kgFactor * 100 / maxElement)}`}
+                                stroke="black"
+                                strokeWidth="1"
+                                strokeDasharray="5,5"
+                                strokeOpacity="0.5"
+                                strokeLinejoin="round"
+                                fill="none"
+                            />
+                            <Text x="5" y={`${100 - (tick / props.kgFactor * 100 / maxElement - 4) }`} 
+                            alignmentBaseline="center"
+                            strokeOpacity="0.5" 
+                            fillOpacity="0.5" 
+                            fontSize="9pt">{tick} kg </Text>
+                        </React.Fragment>
+                    )
+                    )}
             </Svg>
         </View>
     );
 };
 
 
-export default Graph;
+const mapStateToProps = (state) => {
+    return {
+        data: state.deviceState.measurements,
+        kgFactor: state.settings.analysis.kgFactor
+    };
+};
+
+
+export default connect(mapStateToProps)(Graph);

components/HomeView.js

@@ -50,7 +50,7 @@ function HomeView(props) {
 }
 
 const mapStateToProps = (state) => {
-    return { running: state.deviceState.connState == ConnState.CONNECTED_STARTING };
+    return { running: state.deviceState.connState === ConnState.CONNECTED_RUNNING };
 };
 
 export default connect(mapStateToProps)(HomeView);

components/LiveTrainingView.js

@@ -31,6 +31,7 @@ function LiveTrainingView(props) {
                 <IconCard label="BAHNEN" value={laps} iconName="retweet" iconType="AntDesign" />
                 <IconCard label="ZÜGE" value={analysis.peaks.size} iconName="dashboard" iconType="AntDesign" />
                 <IconCard label="KRAFT" value={totalMomentum} iconName="ruler" iconType="Entypo" />
+                <Graph></Graph>
                 {/*
                     <IconCard label="ZÜGE" value={this.state.numPeaks} iconName="dashboard" iconType="AntDesign" />
                     <IconCard label="BAHNEN" value={this.state.numLaps} iconName="retweet" iconType="AntDesign" />