fix css for bar graph and main screen

src/App.css

@@ -289,7 +289,7 @@ body {
   }
 
   .cards-container {
-    height: 80vh;
+    height: 90vh;
     justify-content: center;
     align-items: center;
     display: flex;
@@ -356,7 +356,7 @@ body {
   }
 
   .cards-container {
-    height: 80vh;
+    height: 90vh;
     justify-content: center;
     align-items: center;
     display: flex;

src/components/TestAnalyticsGraph.css

@@ -58,4 +58,18 @@
    font-size: x-small;
    font-weight: 400;
    padding: 0.5em;
+}
+
+div#tests-count-graph {
+   height: 180px;
+   width: 430px;
+   /* border: 2px solid #000; */
+   overflow-y: auto;
+}
+
+svg#bargraph {
+   height: 180px; /* 500px; */
+   width: 700px; /* 1100px; */
+   /* border: 1px dotted #ccc; */
+   /* background-color: #ccc; */
 }

src/components/TestAnalyticsGraph.js

@@ -25,11 +25,12 @@ class TestAnalyticsGraph extends Component {
 
         data.reverse();
 
-        var margin = { top: 60, right: 20, bottom: 30, left: 10 },
-            width = 520 - margin.left - margin.right,
-            height = 220 - margin.top - margin.bottom;
+        var margin = { top: 30, right: 20, bottom: 50, left: 15 },
+            width = 700 - margin.left - margin.right,
+            height = 180 - margin.top - margin.bottom;
 
         var svg = d3.select("#tests-count-graph").append('svg')
+            .attr("id", "bargraph")
             .attr("width", width + margin.left + margin.right)
             .attr("height", height + margin.top + margin.bottom)
             .append("g").attr("transform",

src/components/TestAnalyticsPie.js

@@ -24,7 +24,7 @@ class TestAnalyticsPie extends Component {
     drawChart(data) {
         if (!data) return;
 
-        var margin = { top: 15, right: 10, bottom: 25, left: 10 },
+        var margin = { top: 15, right: 10, bottom: 45, left: 10 },
             width = 480 - margin.left - margin.right,
             height = 250 - margin.top - margin.bottom,
             radius = Math.min(width, height) / 2;