smiuser/hpos-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix dounut chart tooltip

Browse Source 
- add constants
	- add container row in analytics page to reduce scroll
This commit is contained in:
Pritimay Sarkar
2023-07-31 17:24:07 +05:30
parent af54d53f8f
commit fb602e56d7
8 changed files with 53 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/TestAnalyticsPie.js
View File

@@ -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 + ")")