diff --git a/App.js b/App.js
index 6d12ee2..3588bce 100644
--- a/App.js
+++ b/App.js
@@ -31,7 +31,7 @@ export default class App extends React.Component {
...Ionicons.font,
});
this.setState({ isReady: true });
- this.device = new DeviceReduxCoupling(store);
+ this.device = new DeviceReduxCoupling(store);
}
render() {
@@ -41,7 +41,7 @@ export default class App extends React.Component {
return (
-
+
);
}
diff --git a/components/CycleView.js b/components/CycleView.js
new file mode 100644
index 0000000..f24b906
--- /dev/null
+++ b/components/CycleView.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import { Animated, TouchableWithoutFeedback } from 'react-native';
+import { View } from 'native-base';
+import PropTypes from 'prop-types';
+
+
+export default class CycleView extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ activeView: props.initialView
+ };
+
+ this.opacityArr = React.Children.map(props.children,
+ (c, i) => { console.log("iter", c, i); return new Animated.Value(i === props.initialView ? 1 : 0); });
+
+ this.fadeInAnimations = this.opacityArr.map(a => Animated.timing(a, {
+ toValue: 1,
+ duration: props.fadeDuration,
+ useNativeDriver: true
+ }));
+ this.fadeOutAnimations = this.opacityArr.map(a => Animated.timing(a, {
+ toValue: 0,
+ duration: props.fadeDuration,
+ useNativeDriver: true
+ }));
+
+ console.log("opacity arr length", this.opacityArr.length, React.Children.count(props.children));
+ }
+
+ _onTouch = () => {
+ const currentViewIdx = this.state.activeView;
+ const nextViewIdx = (currentViewIdx + 1) % React.Children.count(this.props.children);
+ this.fadeOutAnimations[currentViewIdx].start();
+ this.fadeInAnimations[nextViewIdx].start();
+ this.setState({ activeView: nextViewIdx });
+ this.props.onViewChange(nextViewIdx);
+ }
+
+ render() {
+ const children = React.Children.map(this.props.children, (c, i) => c);
+
+ return (
+
+
+ {
+ React.Children.map(this.props.children, (c, i) => {
+ return
+ {c}
+
+ })
+ }
+
+
+ );
+ }
+}
+
+CycleView.propTypes = {
+ initialView: PropTypes.number,
+ fadeDuration: PropTypes.number,
+ minScaleOnFade: PropTypes.number,
+ onViewChange: PropTypes.func,
+}
+
+CycleView.defaultProps = {
+ initialView: 0,
+ fadeDuration: 600,
+ minScaleOnFade: 0.4,
+ onViewChange: viewIdx => null,
+}
\ No newline at end of file
diff --git a/components/Graph.js b/components/Graph.js
index e24487b..d3f8dcf 100644
--- a/components/Graph.js
+++ b/components/Graph.js
@@ -1,9 +1,6 @@
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, Circle } from 'react-native-svg';
+import Svg, { Polyline, Text, Circle } from 'react-native-svg';
import { connect } from 'react-redux';
@@ -30,35 +27,33 @@ function computeTickMarks(largest, mostTicks) {
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 minKgScale = 4; // scale such that upper graph value is n kg
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 dataInDeviceCoordToSvgCoordX = x => yLabelSpace + x;
- const dataInDeviceCoordToSvgCoordY = y => graphHeight - (y * 100 / maxValueDeviceCoord);
- const dataInKgToSvgCoordX = dataInDeviceCoordToSvgCoordX;
- const dataInKgToSvgCoordY = y => dataInDeviceCoordToSvgCoordY(y / props.kgFactor);
+ const devCoordToSvgX = x => yLabelSpace + x;
+ const devCoordToSvgY = y => graphHeight - (y * 100 / maxValueDeviceCoord);
+ const dataInKgToSvgCoordX = devCoordToSvgX;
+ const dataInKgToSvgCoordY = y => devCoordToSvgY(y / props.kgFactor);
- const coordStr = data.map((element, i) => `${dataInDeviceCoordToSvgCoordX(i)}, ${dataInDeviceCoordToSvgCoordY(element)}`).join(" ");
+ const coordStr = data.map((element, i) => `${devCoordToSvgX(i)}, ${devCoordToSvgY(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)));
+ const peaksXCoords = peaksToDisplay.map(p => devCoordToSvgX(p - cutOffIndex));
+ const peaksYCoords = peaksToDisplay.map(p => devCoordToSvgY(props.data.get(p)));
return (
-
+