84 lines
2.8 KiB
JavaScript
84 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import { View, StyleSheet } 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 { 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(-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 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) }`}
|
|
alignmentBaseline="center"
|
|
strokeOpacity="0.5"
|
|
fillOpacity="0.5"
|
|
fontSize="9pt">{tick} kg </Text>
|
|
</React.Fragment>
|
|
)
|
|
)}
|
|
</Svg>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
data: state.deviceState.measurements,
|
|
kgFactor: state.settings.analysis.kgFactor
|
|
};
|
|
};
|
|
|
|
|
|
export default connect(mapStateToProps)(Graph);
|