martin
/
swimtracker-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Graph cleanup

This commit is contained in:
Martin Bauer 2020-06-30 18:06:37 +02:00
parent a870a0af85
commit 23eb634c30
7 changed files with 84 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
components/Graph.js
View File

@ -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);

2
components/IconCard.js
View File

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

3
components/LiveTrainingView.js
View File

@ -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,
};
};

5
data_processing/DataAnalysis.js
View File

@ -22,10 +22,11 @@ export default class DataAnalysis {
else {
this._resetCache(analysisParameters, sessionId);
newData = allMeasurements;
console.log("cache reset");
}
// peaks
const newPeaks = this.peakDetectorSimple.addVector(newData);
const newPeaks = this.peakDetectorSimple.addVector(newData.toArray());
this.allPeaks = this.allPeaks.concat(List(newPeaks));
// aggregated sum/max
@ -43,7 +44,7 @@ export default class DataAnalysis {
peaks: this.allPeaks,
totalTime: allMeasurements / analysisParameters.numMeasurementsPerSec,
totalMomentum: this.aggregatedMomentum / allMeasurements.size,
totalMomentum: this.aggregatedMomentum,
peakMax: this.peakMax,
momentumWindow: momentumWindow,

1
data_processing/PeakDetection.js
View File

@ -21,6 +21,7 @@ class PeakDetectorSimple {
addVector(vec) {
let result = [];
for (let i = 0; i < vec.length; ++i) {
const res = this.add(vec[i]);
if(res !== null)

2
state/DeviceReduxCoupling.js
View File

@ -126,10 +126,8 @@ export const deviceStateReducer = (state = INITIAL_DEVICE_STATE, action) => {
case DEVICE_DISCONNECT:
return { ...INITIAL_DEVICE_STATE, connState: ConnState.DISCONNECTED };
case SESSION_STARTED:
console.log("session started");
return { ...INITIAL_DEVICE_STATE, connState: ConnState.CONNECTED_RUNNING, sessionId: action.sessionId };
case SESSION_STOPPED:
console.log("session stopped");
return { ...INITIAL_DEVICE_STATE, connState: ConnState.CONNECTED_STOPPED };
case START_SESSION:
if(state.connState === ConnState.SESSION_STARTED)

4
state/Reducer.js
View File

@ -34,10 +34,10 @@ const INITIAL_SETTINGS = {
windowSizeInSecs: 5,
numMeasurementsPerSec: 10,
kgFactor: 1.0 / 1100.0,
kgFactor: 1.0 / 700.0,
peakDetector: 'SIMPLE', // either 'SIMPLE' or 'ZSCORE'
peakDetectorSimpleThreshold: 2500,
peakDetectorSimpleThreshold: 2000,
peakDetectorZScoreLag: 8, // peak detector z-score values
peakDetectorZScoreThreshold: 2,