import React, { Component } from 'react'
import { Barchart, Donutchart } from 'd3-charts'
import logo from './logo.svg'
import './App.css'

class App extends Component {
  constructor() {
    super()

    this.bar_options = {
      default_width: 500,
      format_specifier: "f",
      fill: "#61DAFB",
      number_of_ticks: 5,
      tick_size_inner_y: 0
    }

    this.bar_data = [
      { name:"Facebook", score: 2.5 },
      { name:"Google", score: 3 },
      { name:"Apple", score: 4 },
      { name:"Twitter", score: 5 },
      { name:"Microsoft", score:  1}
    ]

    this.donut_data = [{
                        data: [{ cat: "North America",
                                 val: 461.114 },
                               { cat: "South America",
                                 val: 390.7 },
                               { cat: "Europe",
                                 val: 738.6 },
                               { cat: "Asia",
                                 val: 4157.3 },
                               { cat: "Australia",
                                 val: 36.7 },
                               { cat: "Africa",
                                 val: 1030.4 },
                               ],
                        total: 6814.814,
                        type: "Population",
                        unit: "M"
                      }]

    this.donut_options = {
      default_width: 500,
    }
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to D3 Charts</h2>
        </div>
        <Donutchart data={this.donut_data} options={this.donut_options} />
        <Barchart data={this.bar_data} options={this.bar_options}/>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    )
  }
}

export default App
