sales analyzer tooltips
This commit is contained in:
parent
aff5ec85fa
commit
853520d3b0
|
@ -394,20 +394,7 @@
|
||||||
.transition().duration(0)
|
.transition().duration(0)
|
||||||
.call(salesChart);
|
.call(salesChart);
|
||||||
|
|
||||||
// Add mouseleave, and mousemove event listeners to hide tooltip
|
|
||||||
d3.select('.sales-chart').on('mouseleave', function() {
|
|
||||||
d3.select('.nvtooltip').remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
d3.select('body').on('mousemove', function() {
|
|
||||||
var chartBounds = d3.select('.sales-chart')[0][0].getBoundingClientRect();
|
|
||||||
var mouseX = d3.event.clientX;
|
|
||||||
var mouseY = d3.event.clientY;
|
|
||||||
|
|
||||||
if (mouseX < chartBounds.left || mouseX > chartBounds.right || mouseY < chartBounds.top || mouseY > chartBounds.bottom) {
|
|
||||||
d3.select('.nvtooltip').remove();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
nv.utils.windowResize(salesChart.update);
|
nv.utils.windowResize(salesChart.update);
|
||||||
return salesChart;
|
return salesChart;
|
||||||
});
|
});
|
||||||
|
@ -442,20 +429,7 @@
|
||||||
.transition().duration(0)
|
.transition().duration(0)
|
||||||
.call(cumulativeProfitChart);
|
.call(cumulativeProfitChart);
|
||||||
|
|
||||||
// Add mouseleave, and mousemove event listeners to hide tooltip
|
|
||||||
d3.select('.cumulative-profit-chart').on('mouseleave', function() {
|
|
||||||
d3.select('.nvtooltip').remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
d3.select('body').on('mousemove', function() {
|
|
||||||
var chartBounds = d3.select('.cumulative-profit-chart')[0][0].getBoundingClientRect();
|
|
||||||
var mouseX = d3.event.clientX;
|
|
||||||
var mouseY = d3.event.clientY;
|
|
||||||
|
|
||||||
if (mouseX < chartBounds.left || mouseX > chartBounds.right || mouseY < chartBounds.top || mouseY > chartBounds.bottom) {
|
|
||||||
d3.select('.nvtooltip').remove();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
nv.utils.windowResize(cumulativeProfitChart.update);
|
nv.utils.windowResize(cumulativeProfitChart.update);
|
||||||
return cumulativeProfitChart;
|
return cumulativeProfitChart;
|
||||||
});
|
});
|
||||||
|
@ -490,20 +464,6 @@
|
||||||
.transition().duration(0)
|
.transition().duration(0)
|
||||||
.call(TCVChart);
|
.call(TCVChart);
|
||||||
|
|
||||||
// Add mouseleave, and mousemove event listeners to hide tooltip
|
|
||||||
d3.select('.TCV-chart').on('mouseleave', function() {
|
|
||||||
d3.select('.nvtooltip').remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
d3.select('body').on('mousemove', function() {
|
|
||||||
var chartBounds = d3.select('.TCV-chart')[0][0].getBoundingClientRect();
|
|
||||||
var mouseX = d3.event.clientX;
|
|
||||||
var mouseY = d3.event.clientY;
|
|
||||||
|
|
||||||
if (mouseX < chartBounds.left || mouseX > chartBounds.right || mouseY < chartBounds.top || mouseY > chartBounds.bottom) {
|
|
||||||
d3.select('.nvtooltip').remove();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
nv.utils.windowResize(TCVChart.update);
|
nv.utils.windowResize(TCVChart.update);
|
||||||
return TCVChart;
|
return TCVChart;
|
||||||
});
|
});
|
||||||
|
@ -561,20 +521,6 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// Add mouseleave, and mousemove event listeners to hide tooltip
|
|
||||||
d3.select('.profit-chart').on('mouseleave', function() {
|
|
||||||
d3.select('.nvtooltip').remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
d3.select('body').on('mousemove', function() {
|
|
||||||
var chartBounds = d3.select('.profit-chart')[0][0].getBoundingClientRect();
|
|
||||||
var mouseX = d3.event.clientX;
|
|
||||||
var mouseY = d3.event.clientY;
|
|
||||||
|
|
||||||
if (mouseX < chartBounds.left || mouseX > chartBounds.right || mouseY < chartBounds.top || mouseY > chartBounds.bottom) {
|
|
||||||
d3.select('.nvtooltip').remove();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
nv.utils.windowResize(profitChart.update);
|
nv.utils.windowResize(profitChart.update);
|
||||||
return profitChart;
|
return profitChart;
|
||||||
});
|
});
|
||||||
|
@ -582,4 +528,34 @@
|
||||||
}
|
}
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
function attachTooltipRemoval(chartClass) {
|
||||||
|
d3.selectAll(chartClass).on('mouseleave', function() {
|
||||||
|
var tooltip = d3.select(this).select('.nvtooltip');
|
||||||
|
if (!tooltip.empty()) {
|
||||||
|
tooltip.style('opacity', 0);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
d3.selectAll(chartClass).on('mouseenter', function() {
|
||||||
|
var tooltip = d3.select(this).select('.nvtooltip');
|
||||||
|
if (!tooltip.empty()) {
|
||||||
|
tooltip.style('opacity', 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
$(document).ready(function () {
|
||||||
|
// Hide all tooltips when the page is loaded
|
||||||
|
d3.selectAll('.nvtooltip').style('opacity', 0);
|
||||||
|
|
||||||
|
// Call the function for each chart
|
||||||
|
attachTooltipRemoval('.asset-distribution svg');
|
||||||
|
attachTooltipRemoval('.trend-chart svg');
|
||||||
|
attachTooltipRemoval('.profit-chart svg');
|
||||||
|
attachTooltipRemoval('.TCVLive-chart svg');
|
||||||
|
// Add other charts as needed
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -508,8 +508,6 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
// Hide all tooltips when the page is loaded
|
// Hide all tooltips when the page is loaded
|
||||||
d3.selectAll('.nvtooltip').style('opacity', 0);
|
d3.selectAll('.nvtooltip').style('opacity', 0);
|
||||||
|
@ -521,5 +519,4 @@
|
||||||
attachTooltipRemoval('.TCVLive-chart svg');
|
attachTooltipRemoval('.TCVLive-chart svg');
|
||||||
// Add other charts as needed
|
// Add other charts as needed
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue