mirror of
https://github.com/apache/superset.git
synced 2024-09-19 12:09:42 -04:00
add tooltips to big number vis (#2599)
This commit is contained in:
parent
0479118efc
commit
09f407f553
@ -28,3 +28,12 @@
|
|||||||
stroke: black;
|
stroke: black;
|
||||||
stroke-width: 1;
|
stroke-width: 1;
|
||||||
}
|
}
|
||||||
|
.line-tooltip {
|
||||||
|
position: absolute;
|
||||||
|
text-align: left;
|
||||||
|
padding: 10px;
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 2px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
@ -55,7 +55,7 @@ function bigNumberVis(slice, payload) {
|
|||||||
.y(function (d) {
|
.y(function (d) {
|
||||||
return scaleY(d[1]);
|
return scaleY(d[1]);
|
||||||
})
|
})
|
||||||
.interpolate('basis');
|
.interpolate('cardinal');
|
||||||
|
|
||||||
let y = height / 2;
|
let y = height / 2;
|
||||||
let g = svg.append('g');
|
let g = svg.append('g');
|
||||||
@ -146,6 +146,46 @@ function bigNumberVis(slice, payload) {
|
|||||||
g.selectAll('text')
|
g.selectAll('text')
|
||||||
.style('font-size', '10px');
|
.style('font-size', '10px');
|
||||||
|
|
||||||
|
// Define the div for the tooltip
|
||||||
|
const tooltipEl =
|
||||||
|
d3.select('body')
|
||||||
|
.append('div')
|
||||||
|
.attr('class', 'line-tooltip')
|
||||||
|
.attr('width', 200)
|
||||||
|
.attr('height', 200)
|
||||||
|
.style('opacity', 0);
|
||||||
|
|
||||||
|
const renderTooltip = (d) => {
|
||||||
|
const date = formatDate(d[0]);
|
||||||
|
const value = f(d[1]);
|
||||||
|
return `
|
||||||
|
<div>
|
||||||
|
<span style="float: left; margin-right: 20px;"><strong>${date}</strong></span>
|
||||||
|
<span style="float: right">${value}</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add the scatterplot and trigger the mouse events for the tooltips
|
||||||
|
svg
|
||||||
|
.selectAll('dot')
|
||||||
|
.data(data)
|
||||||
|
.enter()
|
||||||
|
.append('circle')
|
||||||
|
.attr('r', 10)
|
||||||
|
.attr('cx', d => scaleX(d[0]))
|
||||||
|
.attr('cy', d => scaleY(d[1]))
|
||||||
|
.attr('fill-opacity', '0')
|
||||||
|
.on('mouseover', (d) => {
|
||||||
|
tooltipEl.html(renderTooltip(d))
|
||||||
|
.style('left', (d3.event.pageX) + 'px')
|
||||||
|
.style('top', (d3.event.pageY) + 'px');
|
||||||
|
tooltipEl.transition().duration(200).style('opacity', 0.9);
|
||||||
|
})
|
||||||
|
.on('mouseout', () => {
|
||||||
|
tooltipEl.transition().duration(500).style('opacity', 0);
|
||||||
|
});
|
||||||
|
|
||||||
div.on('mouseover', function () {
|
div.on('mouseover', function () {
|
||||||
const el = d3.select(this);
|
const el = d3.select(this);
|
||||||
el.selectAll('path')
|
el.selectAll('path')
|
||||||
|
Loading…
Reference in New Issue
Block a user