import React from 'react';
import {View, StyleSheet, Text} from 'react-native';

//import Svg, {Polyline, Polygon, Rect, G} from 'react-native-svg-web';
import Svg, {Polyline, Polygon, Rect, G} from 'react-native-svg';


const Graph = props => {
    const graphHeight = 100;

    const data = props.data.slice(-600);
    
    const coordStr = data.map((element, i) => `${i}, ${element / 2}`);

    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;