swimtracker-app/components/Graph.js

84 lines
2.8 KiB
JavaScript
Raw Normal View History

2019-09-17 20:24:01 +02:00
import React from 'react';
2020-06-28 22:10:54 +02:00
import { View, StyleSheet } from 'react-native';
2019-09-17 20:24:01 +02:00
2020-06-02 17:19:09 +02:00
//import Svg, {Polyline, Polygon, Rect, G} from 'react-native-svg-web';
2020-06-28 22:10:54 +02:00
import Svg, { Polyline, Polygon, Rect, G, Text } from 'react-native-svg';
import { connect } from 'react-redux';
2019-09-17 20:24:01 +02:00
2020-06-28 22:10:54 +02:00
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
}
2019-09-17 20:24:01 +02:00
const Graph = props => {
const graphHeight = 100;
2020-06-28 22:10:54 +02:00
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;
}
2019-09-17 20:24:01 +02:00
return (
2020-06-28 22:10:54 +02:00
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Svg height={graphHeight} width="80%" viewbox="0 0 300 100">
2019-09-17 20:24:01 +02:00
<Polyline
points={coordStr.join(" ")}
stroke="black"
strokeWidth="3"
strokeOpacity="0.5"
strokeLinejoin="round"
2020-06-28 22:10:54 +02:00
fill="none"
2019-09-17 20:24:01 +02:00
/>
2020-06-28 22:10:54 +02:00
{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>
)
)}
2019-09-17 20:24:01 +02:00
</Svg>
</View>
);
};
2020-06-28 22:10:54 +02:00
const mapStateToProps = (state) => {
return {
data: state.deviceState.measurements,
kgFactor: state.settings.analysis.kgFactor
};
};
export default connect(mapStateToProps)(Graph);