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

change tooltip

Browse Source
This commit is contained in:
Pritimay Sarkar
2023-08-17 21:41:30 +05:30
parent c4040961c8
commit 82c90abf80
2 changed files with 41 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/TestAnalyticsPie.css
View File

@@ -54,4 +54,38 @@
font-size: x-small; font-size: x-small;
font-weight: 400; font-weight: 400;
padding: 0.5em; padding: 0.5em;
}
.category-tooltip {
max-width: 200px;
/* padding: 0.5rem 0.75rem; */
color: #fff;
text-align: center;
background-color: #000;
border-radius: 0.25rem;
line-height: 1rem;
font-weight: 400;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
word-wrap: break-word;
/* position: absolute; */
/* will-change: transform; */
/* top: 0px; */
/* left: 0px; */
/* transform: translate3d(590px, 403px, 0px); */
font-family: "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-style: normal;
line-height: 1.5;
/* text-align: left; */
/* text-align: start; */
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
white-space: normal;
word-spacing: normal;
line-break: auto;
font-size: 0.75rem;
} }

14
src/components/TestAnalyticsPie.js
View File

@@ -64,26 +64,26 @@ class TestAnalyticsPie extends Component {
.style("position", "absolute") .style("position", "absolute")
.style("z-index", "10") .style("z-index", "10")
.style("visibility", "hidden") .style("visibility", "hidden")
.style("background", "#fff") // .style("background", "#fff")
.text("a simple tooltip"); .text("a simple tooltip");
arc.append("path") arc.append("path")
.attr("d", path) .attr("d", path)
.attr("fill", function (d) { return color(d.data.category); }) .attr("fill", function (d) { return color(d.data.category); })
.on('mouseover', (event, d) => { .on('mouseover', (event, d) => {
tooltip.text(`${d.data.category}: ${d.data.count}, ${Math.floor(100 * d.data.count / data.reduce((a, c) => a + c.count, 0)).toFixed(2)}%`); tooltip.text(`${d.data.category} => count: ${d.data.count}, percent: ${Math.floor(100 * d.data.count / data.reduce((a, c) => a + c.count, 0)).toFixed(2)}%`);
return tooltip return tooltip
.style("visibility", "visible") .style("visibility", "visible")
.style("font-size", "0.65em") // .style("font-size", "0.65em")
.style("font-weight", "600") .style("font-weight", "600")
.style("z-index", "9999") .style("z-index", "9999")
.style("width", "200px") // .style("width", "200px")
.style("height", "50px") // .style("height", "50px")
.style("display", "flex") .style("display", "flex")
.style("align-items", "center") .style("align-items", "center")
.style("justify-content", "center") .style("justify-content", "center")
.style("border-radius", "3px") // .style("border-radius", "3px")
.style("box-shadow", "1px 1px 1px 1px #888888"); // .style("box-shadow", "1px 1px 1px 1px #888888");
}) })
.on('mouseout', (event, d) => { .on('mouseout', (event, d) => {
return tooltip return tooltip