swimtracker-app/components/Graph.js

38 lines
1.0 KiB
JavaScript

import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import Svg, {Polyline, Polygon, Rect, G} from 'react-native-svg';
const Graph = props => {
const graphHeight = 100;
const data = [];
for(let i=0; i < 300; ++i) {
data.push( Math.random() * 100);
}
const coordStr = data.map((element, i) => `${i*2}, ${element}`);
return (
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Svg height={graphHeight} width="80%" viewbox="0 0 100 100">
<G transform={"translate(0," + graphHeight.toString() + ") scale(1, -1)"}>
<Polyline
points={coordStr.join(" ")}
stroke="black"
strokeWidth="3"
strokeOpacity="0.5"
strokeLinejoin="round"
fill="none"
/>
</G>
</Svg>
</View>
);
};
export default Graph;