Graph cleanup

components/Graph.js

@@ -1,71 +1,101 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
+import { useWindowDimensions } from 'react-native';
 
 //import Svg, {Polyline, Polygon, Rect, G} from 'react-native-svg-web';
-import Svg, { Polyline, Polygon, Rect, G, Text } from 'react-native-svg';
+import Svg, { Polyline, Polygon, Rect, G, Text, Circle } from 'react-native-svg';
 import { connect } from 'react-redux';
 
 
-function computeTickMark(largest, mostTicks) {
+function computeTickMarks(largest, mostTicks) {
     const minimum = largest / mostTicks
     const magnitude = 10 ** Math.floor(Math.log10(minimum))
     const residual = minimum / magnitude
+    let tickInterval = 0;
     if (residual > 5)
-        return 10 * magnitude
+        tickInterval = 10 * magnitude;
     else if (residual > 2)
-        return 5 * magnitude
+        tickInterval = 5 * magnitude;
     else if (residual > 1)
-        return 2 * magnitude
+        tickInterval = 2 * magnitude;
     else
-        return magnitude
+        tickInterval = magnitude;
+
+    let result = [];
+    let nextTick = tickInterval;
+    while (nextTick < largest) {
+        result.push(nextTick);
+        nextTick += tickInterval;
+    }
+    return result;
 }
 
+let isFirstRender = true;
+
 const Graph = props => {
     const graphHeight = 100;
+    const numPoints = 300;
+    const yLabelSpace = 40;
+    const graphWidth = numPoints + yLabelSpace;
+    const minKgScale = 3; // scale such that upper graph value is n kg
 
-    const data = props.data.slice(-300);
-    const maxElement = data.reduce((running, x) => Math.max(x, running), 2 / props.kgFactor);
+    const data = props.data.slice(-numPoints);
+    const maxValueDeviceCoord = data.reduce((running, x) => Math.max(x, running), minKgScale / props.kgFactor);
+    const maxValueKg = Math.max(maxValueDeviceCoord * props.kgFactor, minKgScale);
 
-    const coordStr = data.map((element, i) => `${i}, ${100 - (element * 100 / maxElement)}`);
+    const dataInDeviceCoordToSvgCoordX = x => yLabelSpace + x;
+    const dataInDeviceCoordToSvgCoordY = y => graphHeight - (y * 100 / maxValueDeviceCoord);
+    const dataInKgToSvgCoordX = dataInDeviceCoordToSvgCoordX;
+    const dataInKgToSvgCoordY = y => dataInDeviceCoordToSvgCoordY(y / props.kgFactor);
 
-    const tick = computeTickMark(maxElement * props.kgFactor * 0.6, 4);
-    let ticks = [];
-    let nextTick = tick;
-    while (nextTick < maxElement * props.kgFactor) {
-        ticks.push(nextTick);
-        nextTick += tick;
-    }
+    const coordStr = data.map((element, i) => `${dataInDeviceCoordToSvgCoordX(i)}, ${dataInDeviceCoordToSvgCoordY(element)}`).join(" ");
+    const ticks = computeTickMarks(maxValueKg * 0.9, 4);
+    let viewBox = `0 0 ${graphWidth} ${graphHeight}`;
+
+    const cutOffIndex = Math.max(0, props.data.size - numPoints);
+    const peaksToDisplay = props.peaks.filter(p => p > cutOffIndex)
+    const peaksXCoords = peaksToDisplay.map(p => dataInDeviceCoordToSvgCoordX(p - cutOffIndex));
+    const peaksYCoords = peaksToDisplay.map(p => dataInDeviceCoordToSvgCoordY(props.data.get(p)));
 
     return (
-        <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"
-                    />
-                    {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) }`} 
+        <View style={{ aspectRatio: 3.4 }}>
+            <Svg height="100%" width="100%" viewBox={viewBox} preserveAspectRatio="none" >
+                <Polyline
+                    points={coordStr}
+                    stroke="black"
+                    strokeWidth="2"
+                    strokeLinejoin="round"
+                    fill="none"
+                />
+                {ticks.map(tick => (
+                    <React.Fragment key={`fragment${tick}`} >
+                        <Polyline
+                            points={`${yLabelSpace},  ${dataInKgToSvgCoordY(tick)} ${graphWidth}, ${dataInKgToSvgCoordY(tick)}`}
+                            stroke="black"
+                            key={`line${tick}`}
+                            strokeWidth="1"
+                            strokeDasharray="5,5"
+                            strokeLinejoin="round"
+                            fill="none"
+                        />
+                        <Text x="5" y={`${dataInKgToSvgCoordY(tick)}`}
                             alignmentBaseline="center"
-                            strokeOpacity="0.5" 
-                            fillOpacity="0.5" 
+                            key={`label${tick}`}
                             fontSize="9pt">{tick} kg </Text>
-                        </React.Fragment>
-                    )
-                    )}
+                    </React.Fragment>
+                )
+                )}
+                {peaksXCoords.zip(peaksYCoords).map(peak => (
+                    <Circle
+                        cx={peak[0]}
+                        key={`peak${peak[0]}`}
+                        stroke="black"
+                        fill="black"
+                        //cy={dataInDeviceCoordToSvgCoord(0, props.data[peak])[1]}
+                        cy={peak[1]}
+                        r="3"
+                    />
+                ))}
             </Svg>
         </View>
     );
@@ -75,9 +105,9 @@ const Graph = props => {
 const mapStateToProps = (state) => {
     return {
         data: state.deviceState.measurements,
-        kgFactor: state.settings.analysis.kgFactor
+        kgFactor: state.settings.analysis.kgFactor,
+        peaks: state.deviceState.analysis.peaks,
     };
 };
 
-
 export default connect(mapStateToProps)(Graph);

components/IconCard.js

@@ -30,7 +30,7 @@ const styles = StyleSheet.create({
 });
 
 IconCard.defaultProps = {
-    fontSize: 85,
+    fontSize: 65,
     flex: 1
 };
 

components/LiveTrainingView.js

@@ -16,7 +16,7 @@ function LiveTrainingView(props) {
         props.navigation.navigate('Home');
     };
     const laps = (analysis.peaks.size / props.peaksPerLap).toFixed(1);
-    const totalMomentum = Math.trunc(analysis.totalMomentum / 10000);
+    const totalMomentum = Math.trunc(analysis.totalMomentum * props.kgFactor / 10 / 60);
 
     useKeepAwake();
 
@@ -70,6 +70,7 @@ const mapStateToProps = (state) => {
         session: state.deviceState,
         peaksPerLap: state.settings.analysis.peaksPerLap,
         theme: state.settings.theme,
+        kgFactor: state.settings.analysis.kgFactor,
     };
 };