@@ -608,21 +608,11 @@ const chart{{ metricName|replace({'-': '_', '.': '_'}) }} = new Chart(ctx{{ metr
document.body.appendChild(tooltipEl);
}
- // Прячем если курсор ушел с графика
+ // Если нет активного элемента - прячем тултип
if (!context.tooltip._active || context.tooltip._active.length === 0) {
- tooltipEl.style.opacity = 0;
+ tooltipEl.style.opacity = '0';
return;
}
-
- // Проверка: курсор внутри chartArea (все 4 границы)
- var chartArea = context.chart.chartArea;
- if (chartArea && context.tooltip.caretX !== undefined && context.tooltip.caretY !== undefined) {
- if (context.tooltip.caretX < chartArea.left || context.tooltip.caretX > chartArea.right ||
- context.tooltip.caretY < chartArea.top || context.tooltip.caretY > chartArea.bottom) {
- tooltipEl.style.opacity = 0;
- return;
- }
- }
var dataIndex = context.tooltip._active[0].index;
var time = labels{{ metricName }}[dataIndex];
@@ -758,40 +748,19 @@ function loadDetailedMetrics{{ metricName|replace({'-': '_', '.': '_'}) }}(start
});
}
-// Скрывать tooltip при уходе курсора с canvas в любую сторону
+// Скрывать tooltip при уходе курсора с canvas
chart{{ metricName|replace({'-': '_', '.': '_'}) }}.canvas.addEventListener('mouseleave', function() {
var tooltipEl = document.getElementById('chartjs-tooltip-{{ server.id }}-{{ metricName }}');
if (tooltipEl) {
- tooltipEl.style.opacity = 0;
+ tooltipEl.style.opacity = '0';
}
chart{{ metricName|replace({'-': '_', '.': '_'}) }}.tooltip._active = [];
- chart{{ metricName|replace({'-': '_', '.': '_'}) }}.draw();
+ chart{{ metricName|replace({'-': '_', '.': '_'}) }}.update();
});
{% endif %}
{% endfor %}
-
-// Глобальный обработчик mousemove для скрытия тултипов при уходе курсора за пределы canvas
-// Глобальный обработчик для скрытия тултипов при уходе курсора за пределы canvas
-document.addEventListener('mousemove', function(e) {
-{% set visibleMetrics = displayMetrics %}
-{% for metricName, metricData in metrics %}
-{% if metricName in visibleMetrics and metricName != 'uptime' %}
- (function() {
- var canvas = chart{{ metricName|replace({'-': '_', '.': '_'}) }}.canvas;
- var rect = canvas.getBoundingClientRect();
- var isOverCanvas = (e.clientX >= rect.left && e.clientX <= rect.right &&
- e.clientY >= rect.top && e.clientY <= rect.bottom);
- if (!isOverCanvas) {
- var tooltipEl = document.getElementById('chartjs-tooltip-{{ server.id }}-{{ metricName }}');
- if (tooltipEl && tooltipEl.style.opacity !== '0') {
- tooltipEl.style.opacity = 0;
- chart{{ metricName|replace({'-': '_', '.': '_'}) }}.tooltip._active = [];
- chart{{ metricName|replace({'-': '_', '.': '_'}) }}.draw();
- }
- }
- })();
-{% endif %}
+});
{% endfor %}
});