sales analyzer tooltips

This commit is contained in:
HojouFotytu 2024-01-30 18:48:36 +09:00
parent aff5ec85fa
commit 853520d3b0
2 changed files with 56 additions and 83 deletions

View File

@ -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>
} }

View File

@ -493,33 +493,30 @@
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
function attachTooltipRemoval(chartClass) { function attachTooltipRemoval(chartClass) {
d3.selectAll(chartClass).on('mouseleave', function() { d3.selectAll(chartClass).on('mouseleave', function() {
var tooltip = d3.select(this).select('.nvtooltip'); var tooltip = d3.select(this).select('.nvtooltip');
if (!tooltip.empty()) { if (!tooltip.empty()) {
tooltip.style('opacity', 0); 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(chartClass).on('mouseenter', function() { d3.selectAll('.nvtooltip').style('opacity', 0);
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
});
// 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> </script>