diff --git a/src/components/TestAnalytics.css b/src/components/TestAnalytics.css
index 9ac6ae4..378174a 100644
--- a/src/components/TestAnalytics.css
+++ b/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;
}
\ No newline at end of file
diff --git a/src/components/TestAnalytics.js b/src/components/TestAnalytics.js
index 89d83b6..002a151 100644
--- a/src/components/TestAnalytics.js
+++ b/src/components/TestAnalytics.js
@@ -114,8 +114,11 @@ const TestAnalytics = () => {
{dailyCategoryCounts && }
{dailyResults && }
+
+
+
)
}
diff --git a/src/components/TestAnalyticsGraph.css b/src/components/TestAnalyticsGraph.css
index 2d1fcee..80e1a3d 100644
--- a/src/components/TestAnalyticsGraph.css
+++ b/src/components/TestAnalyticsGraph.css
@@ -5,8 +5,8 @@
}
.tests-count-card {
- width: 80vw;
- height: 80vh;
+ width: 40vw;
+ height: 45vh;
background-color: white;
margin: 10px;
}
diff --git a/src/components/TestAnalyticsGraph.js b/src/components/TestAnalyticsGraph.js
index 5d57cea..a0b282e 100644
--- a/src/components/TestAnalyticsGraph.js
+++ b/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()
diff --git a/src/components/TestAnalyticsPie.css b/src/components/TestAnalyticsPie.css
index b258b6c..4a30da5 100644
--- a/src/components/TestAnalyticsPie.css
+++ b/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 {
diff --git a/src/components/TestAnalyticsPie.js b/src/components/TestAnalyticsPie.js
index a188b85..33504dc 100644
--- a/src/components/TestAnalyticsPie.js
+++ b/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 + ")")
diff --git a/src/components/WorldMap.js b/src/components/WorldMap.js
index 9087c05..12120a2 100644
--- a/src/components/WorldMap.js
+++ b/src/components/WorldMap.js
@@ -65,7 +65,7 @@ const WorldMap = () => {
}
return (
-