minor changes

Author: PrinceSumberia

src/components/Charts.js

@@ -44,7 +44,6 @@ export default class Charts extends Component {
             <Tooltip />
             <Legend
               wrapperStyle={{
-                // padding: "5rem",
                 margin: "-3rem 1rem",
               }}
             />
@@ -54,24 +53,9 @@ export default class Charts extends Component {
               stroke={colors.red}
               activeDot={{ r: 8 }}
             />
-            <Line
-              type="monotone"
-              dataKey="active"
-              stroke={colors.orange}
-              // activeDot={{ r: 8 }}
-            />
-            <Line
-              type="monotone"
-              dataKey="discharged"
-              stroke={colors.green}
-              // activeDot={{ r: 8 }}
-            />
-            <Line
-              type="monotone"
-              dataKey="deaths"
-              stroke={colors.purple}
-              // activeDot={{ r: 8 }}
-            />
+            <Line type="monotone" dataKey="active" stroke={colors.orange} />
+            <Line type="monotone" dataKey="discharged" stroke={colors.green} />
+            <Line type="monotone" dataKey="deaths" stroke={colors.purple} />
           </LineChart>
         )}
       </div>

src/components/CovidApp.js

@@ -50,9 +50,12 @@ const styles = {
     alignItems: "center",
     padding: "4rem",
   },
-  contentArea: {},
+  contentArea: {
+    width: "30vw",
+  },
   chartArea: {
     flex: "1",
+    minWidth: "50vw",
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
@@ -182,7 +185,9 @@ class CovidApp extends Component {
           />
           {!this.state.isLoading && (
             <div className={classes.content}>
-              <div className={classes.contentArea}></div>
+              <div className={classes.contentArea}>
+                <h1>Hello World</h1>
+              </div>
               <div className={classes.chartArea}>
                 <Map mapData={mapData} />
                 <Charts

src/components/Map/LinearGradient.css

@@ -0,0 +1,15 @@
+.display-flex {
+  display: flex;
+}
+
+.fill {
+  flex: 1;
+}
+
+.center {
+  text-align: center;
+}
+
+.mt16 {
+  margin-top: 16px;
+}

src/components/Map/LinearGradient.js

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import "./LinearGradient.css";
 
 const LinearGradient = (props) => {
   const { data } = props;

src/components/Map/Map.css

@@ -0,0 +1,5 @@
+.container {
+  background-color: rgba(129, 124, 155, 0.05);
+  padding: 3rem;
+  border-radius: 2.5rem;
+}

src/components/Map/Map.js

@@ -4,6 +4,7 @@ import { scaleQuantile } from "d3-scale";
 import ReactTooltip from "react-tooltip";
 import LinearGradient from "./LinearGradient.js";
 import INDIA_TOPO_JSON from "./india.topo.json";
+import "./Map.css";
 
 /**
  * Courtesy: https://rawgit.com/Anujarya300/bubble_maps/master/data/geography-data/india.topo.json
@@ -31,10 +32,6 @@ const COLOR_RANGE = [
 
 const DEFAULT_COLOR = "#EEE";
 
-const getRandomInt = () => {
-  return parseInt(Math.random() * 100);
-};
-
 const geographyStyle = {
   default: {
     outline: "none",
@@ -55,8 +52,8 @@ class Map extends Component {
     this.state = {
       tooltipContent: "",
       data: [
-        { id: "AP", state: "Andhra Pradesh", value: getRandomInt() },
-        { id: "AR", state: "Arunachal Pradesh", value: getRandomInt() },
+        { id: "AP", state: "Andhra Pradesh", value: 5 },
+        { id: "AR", state: "Arunachal Pradesh", value: 2 },
       ],
     };
   }
@@ -87,7 +84,7 @@ class Map extends Component {
       .range(COLOR_RANGE);
 
     return (
-      <div className="full-width-height container">
+      <div className="container">
         <ReactTooltip>{this.state.tooltipContent}</ReactTooltip>
         <ComposableMap
           projectionConfig={PROJECTION_CONFIG}