Fix label bud

Author: PrinceSumberia

src/components/Charts.js

@@ -27,12 +27,27 @@ export default class Charts extends Component {
     return (
       <div className="charts">
         {!isLoading && (
-          <LineChart width={700} height={500} data={result}>
+          <LineChart
+            width={600}
+            height={300}
+            data={result}
+            margin={{
+              top: 5,
+              right: 30,
+              left: 20,
+              bottom: 5,
+            }}
+          >
             <XAxis dataKey="date" />
             <YAxis />
             <CartesianGrid strokeDasharray="3 3" />
             <Tooltip />
-            <Legend />
+            <Legend
+              wrapperStyle={{
+                // padding: "5rem",
+                margin: "-3rem 1rem",
+              }}
+            />
             <Line
               type="monotone"
               dataKey="confirmed"
@@ -43,19 +58,19 @@ export default class Charts extends Component {
               type="monotone"
               dataKey="active"
               stroke={colors.orange}
-              activeDot={{ r: 8 }}
+              // activeDot={{ r: 8 }}
             />
             <Line
               type="monotone"
               dataKey="discharged"
               stroke={colors.green}
-              activeDot={{ r: 8 }}
+              // activeDot={{ r: 8 }}
             />
             <Line
               type="monotone"
               dataKey="deaths"
               stroke={colors.purple}
-              activeDot={{ r: 8 }}
+              // activeDot={{ r: 8 }}
             />
           </LineChart>
         )}

src/components/CovidApp.js

@@ -48,10 +48,15 @@ const styles = {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
+    padding: "4rem",
   },
   contentArea: {},
   chartArea: {
     flex: "1",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    // alignItems: "center",
   },
 };
 
@@ -175,17 +180,18 @@ class CovidApp extends Component {
             getData={this.getData}
             loadingStatus={this.loadingStatus}
           />
-
-          <div className={classes.content}>
-            <div className={classes.contentArea}>hello world</div>
-            <div className={classes.chartArea}>
-              <Map mapData={mapData} />
-              <Charts
-                data={this.state.completeData}
-                isLoading={this.state.isLoading}
-              />
+          {!this.state.isLoading && (
+            <div className={classes.content}>
+              <div className={classes.contentArea}></div>
+              <div className={classes.chartArea}>
+                <Map mapData={mapData} />
+                <Charts
+                  data={this.state.completeData}
+                  isLoading={this.state.isLoading}
+                />
+              </div>
             </div>
-          </div>
+          )}
         </div>
       </div>
     );

src/components/Map/Map.js

@@ -3,13 +3,13 @@ import { ComposableMap, Geographies, Geography } from "react-simple-maps";
 import { scaleQuantile } from "d3-scale";
 import ReactTooltip from "react-tooltip";
 import LinearGradient from "./LinearGradient.js";
+import INDIA_TOPO_JSON from "./india.topo.json";
 
 /**
  * Courtesy: https://rawgit.com/Anujarya300/bubble_maps/master/data/geography-data/india.topo.json
  * Looking topojson for other countries/world?
  * Visit: https://github.com/markmarkoh/datamaps
  */
-const INDIA_TOPO_JSON = require("./india.topo.json");
 
 const PROJECTION_CONFIG = {
   scale: 350,
@@ -73,10 +73,6 @@ class Map extends Component {
     this.setState({ tooltipContent: "" });
   };
 
-  onChangeButtonClick = () => {
-    this.setState({ data: this.formatData(this.props.completeData) });
-  };
-
   render() {
     const data = this.props.mapData;
     const gradientData = {