add firebase hosting, add 2 more data card

.firebase/hosting.YnVpbGQ.cache

+asset-manifest.json,1564734803559,87eae226f8cad78180dca70015a66e5ce960f58d9cf49a455cded3f5b65f2b83
+precache-manifest.518ad0f94ed7461ea694a7a52c60f996.js,1564734803559,51effd56d83e3177c94f8f84b36355f216de61a194290849db6fc3b5e240dfdd
+service-worker.js,1564734803559,099ca762e35240c106d5300813e8bef7f4b1ecb283f21d36b96ea8796d54650a
+index.html,1564734803559,c3ce9aceff37773cd8250b735033e3564efad99f35ec5ad6f9aa89591e07baf9
+static/css/2.6edff5b1.chunk.css,1564734803619,d22696c87c057d6462105312ce53dc1dda6a6df0d2a5152df235b068360b1ed4
+static/css/2.6edff5b1.chunk.css.map,1564734803620,756daca795dac6b39811b15d55bd0d5ed0c7b27f065fb9cff5d1b23504658401
+static/js/main.bcf73a9d.chunk.js,1564734803622,e048fb9d589ccfd12640a6bf1a405b8206a2ce5227f0f6be71f3cd84b0d0b93e
+static/js/runtime~main.a8a9905a.js,1564734803619,e1af5f94fdd13901b2e433d0d7607e27c01458151c35b1fe4b7feda2a32b7aa9
+static/js/runtime~main.a8a9905a.js.map,1564734803619,c337bf8b58896da637a6e50ab8cfc779eb1ec42c55f8ec429030a03454a549db
+favicon.ico,1564734751463,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
+manifest.json,1564734751464,6aaf3d87dd9bb1e96f9c691c50d0ed378ed98a120a76dea78291281834cd36e9
+static/js/main.bcf73a9d.chunk.js.map,1564734803619,ec34eae181a258e2188c72ce064cc3b6ea3bec15100305288e33fb3104d5b831
+static/css/main.892270f9.chunk.css,1564734803560,9b1083842a65b521a1aacf4e2c412c9555e58ac8ebb0f7d668afb5567de2357a
+static/css/main.892270f9.chunk.css.map,1564734803620,985b0f0a0430978ddc9ba1c30a63c13fa83de2bb7881256e38fb6d3eeb5d80f9
+static/js/2.364d8d85.chunk.js,1564734803620,67cbdf0d57ffe7d48d011dfc2725381231c173ef21cb471247c558bd9cdc7be0
+static/js/2.364d8d85.chunk.js.map,1564734803622,4741349fe551a262ded62946bb03eaadeb1afe63d6853bbc3f9f51b414cf93f2

.firebaserc

+{
+  "projects": {
+    "default": "toiletcoin-91fcc"
+  }
+}

firebase.json

+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

src/Pages/Home.js

@@ -43,6 +43,26 @@ const Data = [
 			{ smtitle: 'Min. Remote', smnumber: 0, iconType: 'min' },
 		],
 	},
+	{
+		title: 'Fingerprint chart',
+		backgroundColor: '#5E73F6',
+		detail: [
+			{ smtitle: 'Total Fingerprint', smnumber: 1105.0 },
+			{ smtitle: 'Avg. Fingerprint', smnumber: 3320.53 },
+			{ smtitle: 'Max. Fingerprint', smnumber: 4635.0, iconType: 'max' },
+			{ smtitle: 'Min. Fingerprint', smnumber: 0, iconType: 'min' },
+		],
+	},
+	{
+		title: 'Keycard chart',
+		backgroundColor: '#5E73F6',
+		detail: [
+			{ smtitle: 'Total Keycard', smnumber: 0 },
+			{ smtitle: 'Avg. Keycard', smnumber: 0 },
+			{ smtitle: 'Max. Keycard', smnumber: 0, iconType: 'max' },
+			{ smtitle: 'Min. Keycard', smnumber: 0, iconType: 'min' },
+		],
+	},
 ];
 
 class Home extends Component {

src/components/Mapbox.js

@@ -25,7 +25,7 @@ export default class Mapbox extends React.Component {
 		return (
 			<Col>
 				<Map
-					style="mapbox://styles/mapbox/streets-v9"
+					style="mapbox://styles/mapbox/streets-v11"
 					containerStyle={{
 						height: '50vh',
 						width: '100%',
@@ -49,6 +49,11 @@ export default class Mapbox extends React.Component {
 							<Feature
 								key={item}
 								coordinates={Data[item].position}
+								onMouseEnter={() =>
+									this.setState({
+										active: Data[item],
+									})
+								}
 								onClick={() =>
 									this.setState({
 										center: Data[item].position,
@@ -60,13 +65,17 @@ export default class Mapbox extends React.Component {
 						))}
 					</Layer>
 					{active && (
-						<Popup key={active.id} coordinates={active.position}>
+						<Popup
+							key={active.id}
+							coordinates={active.position}
+							onClick={() => console.log('change to ' + active.name)}
+							style={{ cursor: 'pointer' }}
+						>
 							<div
 								style={{
 									background: 'white',
 									color: '#3f618c',
 									fontWeight: 400,
-									padding: 5,
 									borderRadius: 2,
 								}}
 							>