Fix event rendering with various X intervals (#21852)

frontend/src/metabase/visualizations/lib/LineAreaBarPostRender.js

@@ -393,6 +393,7 @@ function onRenderAddTimelineEvents(
   {
     timelineEvents,
     selectedTimelineEventIds,
+    xInterval,
     isTimeseries,
     onHoverChange,
     onOpenTimelines,
@@ -403,6 +404,7 @@ function onRenderAddTimelineEvents(
   renderEvents(chart, {
     events: timelineEvents,
     selectedEventIds: selectedTimelineEventIds,
+    xInterval,
     isTimeseries,
     onHoverChange,
     onOpenTimelines,
@@ -452,6 +454,7 @@ function onRender(
   onRenderAddTimelineEvents(chart, {
     timelineEvents,
     selectedTimelineEventIds,
+    xInterval,
     isTimeseries,
     onHoverChange,
     onOpenTimelines,

frontend/src/metabase/visualizations/lib/timelines.js

@@ -18,13 +18,14 @@ function getScale(chart) {
   return chart.x();
 }
 
-function getEventMapping(events, scale) {
+function getEventMapping({ events, scale, xInterval }) {
   const mapping = new Map();
   let group = [];
   let groupPoint = 0;
 
   events.forEach(event => {
-    const eventPoint = scale(event.timestamp);
+    const eventDate = event.timestamp.clone().startOf(xInterval.interval);
+    const eventPoint = scale(eventDate);
     const groupDistance = eventPoint - groupPoint;
 
     if (!group.length || groupDistance < ICON_SIZE) {
@@ -220,6 +221,7 @@ export function renderEvents(
   {
     events = [],
     selectedEventIds = [],
+    xInterval,
     isTimeseries,
     onHoverChange,
     onOpenTimelines,
@@ -234,7 +236,7 @@ export function renderEvents(
   }
 
   const scale = getScale(chart);
-  const eventMapping = getEventMapping(events, scale);
+  const eventMapping = getEventMapping({ events, scale, xInterval });
   const eventPoints = getEventPoints(eventMapping);
   const eventGroups = getEventGroups(eventMapping);