import React, { Component } from 'react'  

import axios from 'axios';  

import { Line } from 'react-chartjs-2';  
import Chart from "react-apexcharts";

export class Linechart extends Component {  

    constructor(props) {  
        super(props);  
        this.state = {
            options: {
        
            },
            series: [
              
            ]
        };  
    }  

    componentDidMount() {  

        axios.get(`http://localhost:3030/?data=4`)  
            .then(res => {  
                
                const ipl = res.data.vehicle_class;  
                let hour = Object.keys(ipl);  
                let number = Object.values(ipl);  
                console.log("in react js!",ipl);  

                this.setState({
                    options:{
                        chart: {
                            id: "basic-bar"
                        },
                        xaxis: {
                            categories: hour
                        }
                    },
                    series:[{
                        name: "series-1",
                        data: number
                    }]
                });

                
        }).catch(er =>{
            console.log(er);
        });  

    }  

    render() {  
        return (  
            <div>  
                
            <Chart
              options={this.state.options}
              series={this.state.series}
              type="line"
              width="500"
            />
                
            </div>  

        )  
    }  
}  
 

export default Linechart;