Add India choropleth

Author: PrinceSumberia

package-lock.json

@@ -15,6 +15,8 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
+    "react-simple-maps": "^2.0.0",
+    "react-tooltip": "^4.2.5",
     "recharts": "^1.8.5"
   },
   "scripts": {

package.json

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
-import "./App.css";
 import CovidApp from "./components/CovidApp";
 import Paper from "./components/Paper";
+import "./App.css";
 
 class App extends Component {
   constructor(props) {

src/App.js

@@ -5,6 +5,7 @@ import { withStyles } from "@material-ui/styles";
 import colors from "../colors";
 import "./CodeApp.css";
 import Charts from "./Charts";
+import Map from "./Map/Map";
 
 const styles = {
   root: {
@@ -40,6 +41,18 @@ const styles = {
       marginRight: "1rem",
     },
   },
+  content: {
+    backgroundColor: (props) => (props.isDarkMode ? colors.darkPurple : "#fff"),
+    borderRadius: "2rem",
+    marginTop: "3rem",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  contentArea: {},
+  chartArea: {
+    flex: "1",
+  },
 };
 
 class CovidApp extends Component {
@@ -87,10 +100,17 @@ class CovidApp extends Component {
             getData={this.getData}
             loadingStatus={this.loadingStatus}
           />
-          <Charts
-            data={this.state.completeData}
-            isLoading={this.state.isLoading}
-          />
+
+          <div className={classes.content}>
+            <div className={classes.contentArea}>hello world</div>
+            <div className={classes.chartArea}>
+              <Map completeData={this.state.completeData} />
+              <Charts
+                data={this.state.completeData}
+                isLoading={this.state.isLoading}
+              />
+            </div>
+          </div>
         </div>
       </div>
     );

src/components/CovidApp.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const LinearGradient = (props) => {
+  const { data } = props;
+  const boxStyle = {
+    width: 180,
+    margin: "auto",
+  };
+  const gradientStyle = {
+    backgroundImage: `linear-gradient(to right, ${data.fromColor} , ${data.toColor})`,
+    height: 20,
+  };
+  return (
+    <div>
+      <div style={boxStyle} className="display-flex">
+        <span>{data.min}</span>
+        <span className="fill"></span>
+        <span>{data.max}</span>
+      </div>
+      <div style={{ ...boxStyle, ...gradientStyle }} className="mt8"></div>
+    </div>
+  );
+};
+
+LinearGradient.propTypes = {
+  data: PropTypes.object.isRequired,
+};
+
+export default LinearGradient;