Fix overlapping x-tick labels on static viz timeseries charts (#33707)

* Fix overlapping x-tick labels on static viz timeseries charts

* Address review: make the condition easier to understand + fix failed cases

* Update frontend/src/metabase/static-viz/components/XYChart/utils/ticks.ts

Co-authored-by: Jesse Devaney <22608765+JesseSDevaney@users.noreply.github.com>

* Add a comment to explain why we have to fix timeseries ticks

---------

Co-authored-by: Jesse Devaney <22608765+JesseSDevaney@users.noreply.github.com>

frontend/src/metabase/static-viz/components/XYChart/utils/ticks.ts

@@ -159,6 +159,14 @@ export const getYTickWidths = (
   };
 };
 
+/**
+ * The reason this function exists in the first place is because of
+ * a bug in visx's `getTicks` function. It's supposed to ensure that
+ * the result ticks array has a length less than or equal to `numTicks`,
+ * but sometimes it returns an array with a length greater than `numTicks`.
+ *
+ * If this bug is fixed in visx, this function can be removed.
+ */
 export function fixTimeseriesTicksExceedXTickCount(
   xScaleType: XAxisType,
   xScale: XScale["scale"],
@@ -181,7 +189,13 @@ export function fixTimeseriesTicksExceedXTickCount(
         }
       });
 
-    return minLengthTicks;
+    if (numTicks == null || minLengthTicks.length <= numTicks) {
+      return minLengthTicks;
+    }
+
+    return minLengthTicks.filter(
+      (_, index, ticks) => index % Math.ceil(ticks.length / numTicks) === 0,
+    );
   }
 
   return defaultTicks;