import React from 'react';
import ReactDOM from 'react-dom';
import { csv } from 'd3';
import BarChart from './BarChart';
import { useData } from './useData';

const width = 960;
const height = 500;
const margin = { top: 20, right: 30, bottom: 65, left: 220 };

const csvUrl =
  'https://gist.githubusercontent.com/pjdhungana/3b0586b95c83ce5da58719c128392524/raw/8d9bcbaa9f095d62537b3a6d001f72fbb589077c/weapon_exporter_2017.csv';

const App = () => {
  const data = useData();

  if (!data) {
    return <pre>Loading...</pre>;
  }

  return (
    <BarChart data={data} width={width} height={height} margin={margin} />
  );
};

ReactDOM.render(<App />, document.getElementById('root'));