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;