fix(report): ensure ui matches target frame rate

Author: Almouro

packages/core/web-reporter-ui/ReporterView.tsx

@@ -73,7 +73,7 @@ const Report = ({
               <>
                 <HideSectionIfUndefinedValueFound>
                   <div className="mx-8 p-6 bg-dark-charcoal border border-gray-800 rounded-lg">
-                    <FPSReport results={averagedResults} />
+                    <FPSReport reports={reports} />
                   </div>
                   <div className="h-10" />
                 </HideSectionIfUndefinedValueFound>

packages/core/web-reporter-ui/src/sections/FPSReport.tsx

@@ -1,16 +1,22 @@
-import React from "react";
-import { AveragedTestCaseResult } from "@perf-profiler/types";
+import React, { useMemo } from "react";
+import { Report as ReportModel } from "@perf-profiler/reporter";
 import { buildValueGraph } from "./hideSectionForEmptyValue";
 import { ReportChart } from "../components/Charts/ReportChart";
 
-const fpsAnnotationInterval = [{ y: 57, y2: 60, color: "#158000", label: "Safe Zone" }];
-
-export const FPSReport = ({ results }: { results: AveragedTestCaseResult[] }) => {
+export const FPSReport = ({ reports }: { reports: ReportModel[] }) => {
   const fps = buildValueGraph({
-    results,
+    results: reports.map((report) => report.getAveragedResult()),
     stat: "fps",
   });
 
+  const fpsAnnotationInterval = useMemo(() => {
+    const targetFps = reports[0].getRefreshRate();
+
+    return [
+      { y: Math.floor(0.95 * targetFps), y2: targetFps, color: "#158000", label: "Safe Zone" },
+    ];
+  }, [reports]);
+
   return (
     <ReportChart
       title="Frame rate (FPS)"