import './App.css';
import * as d3 from 'd3'
import {useEffect, useState} from 'react'

function App() {
  
  useEffect(() => {

      // Create a dataset of pets and the amount of people that own them
      let dataSet = [
        {subject: "Dogs", count: 150},
        {subject: "Fish", count: 75},
        {subject: "Cats", count: 135},
        {subject: "Bunnies", count: 240},
      ]
      // Generate a p tag for each element in the dataSet with the text: Subject: Count 
      d3.select('#pgraphs').selectAll('p').data(dataSet).enter().append('p').text(dt => dt.subject + ": " + dt.count)
      
      // Bar Chart:
        const getMax = () => { // Calculate the maximum value in the DataSet
          let max = 0
          dataSet.forEach((dt) => {
              if(dt.count > max) {max = dt.count}
          })
          return max
        }
     
        
        // Create each of the bars and then set them all to have the same height(Which is the max value)
        d3.select('#BarChart').selectAll('div').data(dataSet) 
        .enter().append('div').classed('bar', true).style('height', `${getMax()}px`)
    
        //Transition the bars into having a height based on their corresponding count value
        d3.select('#BarChart').selectAll('.bar')
        .transition().duration(1000).style('height', bar => `${bar.count}px`)
          .style('width', '80px').style('margin-right', '10px').delay(300) // Fix their width and margin
        
        
         // Generate random data for our line where x is [0,15) and y is between 0 and 100
         let lineData = []
         for(let i = 0; i < 15; i++) {
            lineData.push({x: i + 1, y: Math.round(Math.random() * 100)})
         }
    
         // Create our scales to map our data values(domain) to coordinate values(range)
         let xScale = d3.scaleLinear().domain([0,15]).range([0, 300])
         let yScale = d3.scaleLinear().domain([0,100]).range([300, 0]) // Since the SVG y starts at the top, we are inverting the 0 and 300.
         
         // Generate a path with D3 based on the scaled data values
         let line = d3.line()
          .x(dt => xScale(dt.x))
          .y(dt => yScale(dt.y))
         
         // Generate the x and y Axis based on these scales
         let xAxis = d3.axisBottom(xScale)
         let yAxis = d3.axisLeft(yScale)
         
         // Create the horizontal base line
         d3.select('#LineChart').selectAll('path').datum(lineData) // Bind our data to the path element
        .attr('d', d3.line().x(dt => xScale(dt.x)) // Set the path to our line function, but where x is the corresponding x
        .y(yScale(0))).attr("stroke", "blue").attr('fill', 'none') // Set the y to always be 0 and set stroke and fill color
    
    
        
         d3.select('#LineChart').selectAll('path').transition().duration(1000) // Transition the line over 1 sec
         .attr('d', line) // Set the path to our line variable (Which corresponds the actual path of the data)
         
         // Append the Axis to our LineChart svg
         d3.select('#LineChart').append("g")
         .attr("transform", "translate(0, " + 300 + ")").call(xAxis)
    
         d3.select('#LineChart').append("g")
         .attr("transform", "translate(0, 0)").call(yAxis)
    }, [])

  return (
    <div className = "App">
      <div id="pgraphs"></div> // Create a div to house our p tags
      <div id="BarChart"></div> // Create a div to house our BarChart
      <svg id="LineChart" width = {350} height = {350}><path/></svg> // Create an SVG and path for our LineChart
    </div>
  );
}

export default App;