From fb602e56d73650015521c92b2776f3cdb1c45af1 Mon Sep 17 00:00:00 2001 From: Pritimay Sarkar Date: Mon, 31 Jul 2023 17:24:07 +0530 Subject: [PATCH] fix dounut chart tooltip - add constants - add container row in analytics page to reduce scroll --- src/components/TestAnalytics.css | 3 ++- src/components/TestAnalytics.js | 3 +++ src/components/TestAnalyticsGraph.css | 4 +-- src/components/TestAnalyticsGraph.js | 10 ++++---- src/components/TestAnalyticsPie.css | 5 ++-- src/components/TestAnalyticsPie.js | 37 +++++++++++++++++++-------- src/components/WorldMap.js | 2 +- src/constants.js | 11 ++++++++ 8 files changed, 53 insertions(+), 22 deletions(-) create mode 100644 src/constants.js 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 ( - + { geographies.map((d,i) => ( diff --git a/src/constants.js b/src/constants.js new file mode 100644 index 0000000..d6514d3 --- /dev/null +++ b/src/constants.js @@ -0,0 +1,11 @@ +const constants = { + categoryshortname: { + "SICKLECELLTRAIT": "Trait", + "SICKLECELLDISEASE": "Disease", + "NEGATIVEBORDERLINE": "-Borderline", + "POSITIVEBORDERLINE": "+Borderline", + "NORMAL": "Normal", + }, +}; + +export default constants; \ No newline at end of file