fix(ui): prevent findings timeline axis overflow (#11545)

ui/changelog.d/findings-timeline-y-axis.fixed.md

@@ -0,0 +1 @@
+Findings Severity Over Time chart Y-axis labels no longer overflow for large findings counts

ui/components/graphs/line-chart.test.tsx

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+
+import { formatYAxisTick } from "./line-chart.utils";
+
+describe("formatYAxisTick", () => {
+  describe("when findings counts are large", () => {
+    it("should compact six-digit values so Y-axis labels do not overflow", () => {
+      // Given
+      const tickValue = 150000;
+
+      // When
+      const formattedValue = formatYAxisTick(tickValue);
+
+      // Then
+      expect(formattedValue).toBe("150K");
+    });
+
+    it("should compact million-scale values", () => {
+      // Given
+      const tickValue = 1200000;
+
+      // When
+      const formattedValue = formatYAxisTick(tickValue);
+
+      // Then
+      expect(formattedValue).toBe("1.2M");
+    });
+  });
+
+  describe("when findings counts are small", () => {
+    it("should keep values below 1000 readable without compact notation", () => {
+      // Given
+      const tickValue = 999;
+
+      // When
+      const formattedValue = formatYAxisTick(tickValue);
+
+      // Then
+      expect(formattedValue).toBe("999");
+    });
+  });
+});

ui/components/graphs/line-chart.tsx

@@ -17,6 +17,7 @@ import {
   ChartTooltip,
 } from "@/components/shadcn/chart/Chart";
 
+import { formatYAxisTick } from "./line-chart.utils";
 import { AlertPill } from "./shared/alert-pill";
 import { ChartLegend } from "./shared/chart-legend";
 import { CustomActiveDot, PointClickData } from "./shared/custom-active-dot";
@@ -222,6 +223,8 @@ export function LineChart({
             tickLine={false}
             axisLine={false}
             tickMargin={8}
+            tickFormatter={formatYAxisTick}
+            width={56}
             padding={{ top: 20 }}
             tick={{
               fill: "var(--color-text-neutral-secondary)",

ui/components/graphs/line-chart.utils.ts

@@ -0,0 +1,8 @@
+const Y_AXIS_TICK_FORMATTER = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+export function formatYAxisTick(value: number) {
+  return Y_AXIS_TICK_FORMATTER.format(value);
+}