mirror of
https://github.com/apache/superset.git
synced 2024-09-18 19:49:37 -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-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) {
|
||||
return scaleY(d[1]);
|
||||
})
|
||||
.interpolate('basis');
|
||||
.interpolate('cardinal');
|
||||
|
||||
let y = height / 2;
|
||||
let g = svg.append('g');
|
||||
@ -146,6 +146,46 @@ function bigNumberVis(slice, payload) {
|
||||
g.selectAll('text')
|
||||
.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 () {
|
||||
const el = d3.select(this);
|
||||
el.selectAll('path')
|
||||
|
Loading…
Reference in New Issue
Block a user