fix dounut chart tooltip

- add constants
	- add container row in analytics page to reduce scroll

src/components/TestAnalytics.css

@@ -1,6 +1,7 @@
 .container {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
+    height: 50vh;
 }

src/components/TestAnalytics.js

@@ -114,8 +114,11 @@ const TestAnalytics = () => {
             <div className='container'>
                 {dailyCategoryCounts && <TestAnalyticsPie data={dailyCategoryCounts} />}
                 {dailyResults && <TestAnalyticsGraph data={dailyResults} />}
+            </div>
+            <div className='container'>
                 <WorldMap />
             </div>
+
         </div>
     )
 }

src/components/TestAnalyticsGraph.css

@@ -5,8 +5,8 @@
  }
 
  .tests-count-card {
-    width: 80vw;
-    height: 80vh;
+    width: 40vw;
+    height: 45vh;
     background-color: white;
     margin: 10px;
  }

src/components/TestAnalyticsGraph.js

@@ -21,8 +21,8 @@ class TestAnalyticsGraph extends Component {
         data.reverse();
 
         var margin = { top: 20, right: 20, bottom: 30, left: 50 },
-            width = 900 - margin.left - margin.right,
-            height = 500 - margin.top - margin.bottom;
+            width = 450 - margin.left - margin.right,
+            height = 200 - margin.top - margin.bottom;
 
         var svg = d3.select("#tests-count-graph").append('svg')
             .attr("width", width + margin.left + margin.right)
@@ -38,7 +38,7 @@ class TestAnalyticsGraph extends Component {
             .attr("transform", "translate(" + 10 + "," + 10 + ")");
 
 
-        xScale.domain(data.map(function (d) { return d.date; }));
+        xScale.domain(data.map(function (d) { return moment(d.date).format("MM-DD"); }));
         yScale.domain([0, d3.max(data, function (d) { return d.count; })]);
 
 
@@ -72,7 +72,7 @@ class TestAnalyticsGraph extends Component {
                 g.append("text")
                     .attr('class', 'val') // add class to text label
                     .attr('x', function () {
-                        return xScale(d.date);
+                        return xScale(moment(d.date).format("MM-DD"));
                     })
                     .attr('y', function () {
                         return yScale(d.count) - 15;
@@ -93,7 +93,7 @@ class TestAnalyticsGraph extends Component {
                 d3.selectAll('.val')
                     .remove()
             })
-            .attr("x", function (d) { return xScale(d.date); })
+            .attr("x", function (d) { return xScale(moment(d.date).format("MM-DD")); })
             .attr("y", function (d) { return yScale(d.count); })
             .attr("width", xScale.bandwidth())
             .transition()

src/components/TestAnalyticsPie.css

@@ -5,8 +5,8 @@
  }
 
  .graph-card {
-    width: 80vw;
-    height: 80vh;
+    width: 40vw;
+    height: 45vh;
     background-color: white;
     margin: 10px;
  }
@@ -15,6 +15,7 @@
     text-align: center;
     font-weight: 600;
     padding: 15px;
+    top: -10;
  }
 
  .title {

src/components/TestAnalyticsPie.js

@@ -5,6 +5,7 @@ import axios from 'axios';
 import moment from 'moment';
 
 import './TestAnalyticsPie.css';
+import constants from '../constants';
 
 class TestAnalyticsPie extends Component {
     constructor(props) {
@@ -18,9 +19,9 @@ class TestAnalyticsPie extends Component {
     drawChart(data) {
         if (!data) return;
 
-        var margin = { top: 60, right: 20, bottom: 30, left: 50 },
-            width = 960 - margin.left - margin.right,
-            height = 500 - margin.top - margin.bottom,
+        var margin = { top: 30, right: 10, bottom: 15, left: 25 },
+            width = 480 - margin.left - margin.right,
+            height = 250 - margin.top - margin.bottom,
             radius = Math.min(width, height) / 2;
 
         var svg = d3.select("#category-diagram").append('svg')
@@ -41,11 +42,11 @@ class TestAnalyticsPie extends Component {
         var path = d3.arc()
             .outerRadius(radius - 10)
             // .innerRadius(0);
-            .innerRadius(130);
+            .innerRadius(50);
 
         var label = d3.arc()
             .outerRadius(radius)
-            .innerRadius(radius - 80);
+            .innerRadius(radius - 40);
 
         var arc = g.selectAll(".arc")
             .data(pie(data))
@@ -63,17 +64,31 @@ class TestAnalyticsPie extends Component {
         arc.append("path")
             .attr("d", path)
             .attr("fill", function (d) { return color(d.data.category); })
-            .on('mouseover', (event, d) => { tooltip.text(`${d.data.category} (${d.data.count})`); console.log(d.data.count); return tooltip.style("visibility", "visible"); });
-
-        console.log(arc)
-
-
+            .on('mouseover', (event, d) => {
+                tooltip.text(`${d.data.category}: ${d.data.count}`);
+                return tooltip
+                    .style("visibility", "visible")
+                    .style("font-size", "0.75em")
+                    .style("z-index", "9999")
+                    .style("width", "200px")
+                    .style("height", "50px")
+                    .style("display", "flex")
+                    .style("align-items", "center")
+                    .style("justify-content", "center")
+                    .style("border-radius", "3px")
+                    .style("box-shadow", "1px 1px 1px 1px #888888");
+            })
+            .on('mouseout', (event, d) => {
+                return tooltip
+                    .style("visibility", "hidden");
+            });
 
         arc.append("text")
             .attr("transform", function (d) {
                 return "translate(" + label.centroid(d) + ")";
             })
-            .text(function (d) { return `${d.data.category} (${d.data.count})`; });
+            .style("font-size", "0.75em")
+            .text(function (d) { return constants.categoryshortname[d.data.category]; });
 
         // svg.append("g")
         //     .attr("transform", "translate(" + (width / 2 - 170) + "," + 1 + ")")

src/components/WorldMap.js

@@ -65,7 +65,7 @@ const WorldMap = () => {
   }
 
   return (
-    <svg width={ 800 } height={ 450 } viewBox="0 0 800 450">
+    <svg width={ '40vw' } height={ '50vh' } viewBox="0 0 800 450">
       <g className="countries">
         {
           geographies.map((d,i) => (

src/constants.js

@@ -0,0 +1,11 @@
+const constants = {
+    categoryshortname: {
+        "SICKLECELLTRAIT": "Trait",
+        "SICKLECELLDISEASE": "Disease",
+        "NEGATIVEBORDERLINE": "-Borderline",
+        "POSITIVEBORDERLINE": "+Borderline",
+        "NORMAL": "Normal",
+    },
+};
+
+export default constants;