import React from 'react';
import {Bar,HorizontalBar,progressBar} from 'react-chartjs-2';
import barchartjson from './BarChart.json';
import axios from 'axios';
import {chart,defaults} from 'chartjs-plugin-datalabels';


class App extends React.Component { 
        constructor(props){
            super(props);  
let data = barchartjson;
    let labelsset = [];
    let datasetvalue = [];
    let color=[];
    for (let i = 0; i < data.Details.length; i++) {
        let obj = data.Details[i];   
        labelsset.push([obj.Day]);
        datasetvalue.push([obj.Cost]);
        if(obj.Country==='India'){
            color.push('#00bfff')
        }else if(obj.Country==='USA'){
            color.push('#2F4F4F')
        }    
    }
            this.state= { 
                width: 500,  
                chartData:{
                   labels:labelsset,
                    datasets:[
                        {
                            label:'Winter',
                            data:datasetvalue,
                            backgroundColor:color 
                        },
                    ],
                },
                options: {
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: false,
                                drawBorder: false
                            },
                            ticks: {
                                display: false
                            }
                            
                        }],
                        yAxes: [{
                            barThickness: 15,
                            gridLines: {
                                display: false,
                                drawBorder: false,
                                barPercentage:0.0,
                                categoryPercentage:0.0
                            },
                            ticks: {
                                display: true,
                                 mirror: true,
                                 fontSize: 20,
                                 padding:0 ,
                                labelOffset: -20,
                               
                            }
                            
                        }]
                    },
                    tooltips: {
                        enabled:false 
                    },
                    legend: {
                        display:false //for winter and summer
                    },
                    layout: {
                        padding: {
                            left: 100,
                            right: 0,
                            top: 0,
                            bottom: 0
                        }
                    },
                    plugins: {
                        datalabels: {
                          color: 'black',
                          anchor:'end',
                          align:'top',
                          offset:4 ,
						  font:{
                            family:'Helvetica, Arial, sans-serif',
                            size:'50',
                            lineHeight:'2' 
                        },
						formatter:function(value){
							return "$"+value;
                        }
                        
                      }
                  }
               
            }
            
        }      
        render() {     
           return (    
            <div style={{width: '50%'}}> 
                <HorizontalBar 
                  width={this.state.width}
                  height={500}
                  data={this.state.chartData}
                  options={this.state.options}
                 />
            </div>
           );
        }
     }
     export default App;