CalvinBackup/phishingclub
1
0
Fork 0
mirror of https://github.com/phishingclub/phishingclub.git synced 2026-08-21 01:47:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix better event box position on campaign trendline

Browse Source 
Signed-off-by: Ronni Skansing <rskansing@gmail.com>
This commit is contained in:
Ronni Skansing
2025-10-16 13:12:18 +02:00
parent 60f71564f2
commit 886b804082
1 changed files with 7 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/CampaignTrendChart.svelte
+7 -37
View File
@@ -567,23 +567,6 @@
circle.setAttribute('data-metric', metric.key);
circle.style.filter = 'drop-shadow(0 2px 4px rgba(0,0,0,0.15))';
svg.appendChild(circle);
// Add value label above each point
const value = point[metric.key] || 0;
if (value > 0) {
const valueLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
valueLabel.setAttribute('x', x.toString());
valueLabel.setAttribute('y', (y - 12).toString());
valueLabel.setAttribute('text-anchor', 'middle');
valueLabel.setAttribute('font-size', '9');
valueLabel.setAttribute('font-weight', '600');
valueLabel.setAttribute('fill', metric.color);
valueLabel.setAttribute('opacity', '0');
valueLabel.setAttribute('class', `value-label value-label-${metric.key}-${i}`);
valueLabel.textContent = `${Math.round(value)}`;
valueLabel.style.transition = 'opacity 0.3s ease';
svg.appendChild(valueLabel);
}
});
}
@@ -739,6 +722,7 @@
// show tooltip
tooltip.style.display = 'block';
tooltip.style.width = '320px';
// use requestAnimationFrame for positioning similar to EventTimeline
requestAnimationFrame(() => {
@@ -747,33 +731,26 @@
const x = event.clientX - containerRect.left;
const y = event.clientY - containerRect.top;
const tooltipWidth = 250;
const tooltipWidth = 320;
const containerWidth = chartContainer.offsetWidth;
const leftPosition = x + 10;
const leftPosition = x + 25; // increased offset to avoid cursor
const rightEdge = leftPosition + tooltipWidth;
// better positioning logic - more balanced positioning
let adjustedLeft;
if (rightEdge > containerWidth - 20) {
// position to the left with some offset, not too far
adjustedLeft = x - tooltipWidth + 40;
adjustedLeft = x - tooltipWidth - 15; // position to left of cursor
} else {
adjustedLeft = leftPosition;
}
tooltip.style.left = `${Math.max(10, adjustedLeft)}px`;
tooltip.style.top = `${Math.max(10, y - 10)}px`;
tooltip.style.top = `${Math.max(10, y - 40)}px`; // position above cursor
// update tooltip content
updateTooltipContent(data, metricKey);
});
// show value label for hovered metric
const svg = chartContainer.querySelector('svg');
const valueLabel = svg?.querySelector(`.value-label-${metricKey}-${index}`);
if (valueLabel) {
valueLabel.setAttribute('opacity', '1');
}
}
function hideTooltip(index, metricKey) {
@@ -783,13 +760,6 @@
tooltip.style.display = 'none';
}
}, 150);
// hide value label
const svg = chartContainer.querySelector('svg');
const valueLabel = svg?.querySelector(`.value-label-${metricKey}-${index}`);
if (valueLabel) {
valueLabel.setAttribute('opacity', '0');
}
}
function updateTooltipContent(data, hoveredMetric) {
@@ -877,11 +847,11 @@
metricDot.style.backgroundColor = metric.color;
const metricLabel = document.createElement('span');
metricLabel.className = 'text-sm text-gray-700 dark:text-gray-300';
metricLabel.className = 'text-sm text-gray-700 dark:text-gray-300 flex-1 pr-4';
metricLabel.textContent = metric.label;
const metricValue = document.createElement('span');
metricValue.className = 'text-sm font-semibold';
metricValue.className = 'text-sm font-semibold ml-auto';
metricValue.style.color = metric.color;
metricValue.textContent = Math.round(data[metric.key] || 0).toString();