ui(report): allow for React component in Chart title

This removes the toolbar on the right side to download chart as png, svg.. but I don't think this was widely used
bamlab · Mar 4, 2024 · abade33 · abade33
1 parent 1b0bb2d
commit abade33
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 15 deletions.
diff --git a/packages/commands/measure/src/__tests__/__snapshots__/measure.test.tsx.snap b/packages/commands/measure/src/__tests__/__snapshots__/measure.test.tsx.snap
@@ -41,6 +41,9 @@ It’s worth noting that results might be higher than expected since we measure
  
 here for more details
 )
+Frame rate (FPS)
+Total CPU Usage (%)
+CPU Usage per thread (%)
 Threads
 Thread
 Average CPU Usage (%)
@@ -174,7 +177,8 @@ Binder #5
 0
 JITWorker
 0
-0"
+0
+RAM Usage (MB)"
 `;
 
 exports[`flashlight measure interactive it displays measures: Web app with measures and threads opened - 2. FULL 1`] = `
@@ -735,6 +739,11 @@ exports[`flashlight measure interactive it displays measures: Web app with measu
         <div
           class="mx-8 p-6 bg-dark-charcoal border border-gray-800 rounded-lg"
         >
+          <div
+            class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+          >
+            Frame rate (FPS)
+          </div>
           <apex-charts
             height="500"
             options="[object Object]"
@@ -748,12 +757,22 @@ exports[`flashlight measure interactive it displays measures: Web app with measu
         <div
           class="mx-8 p-6 bg-dark-charcoal border border-gray-800 rounded-lg"
         >
+          <div
+            class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+          >
+            Total CPU Usage (%)
+          </div>
           <apex-charts
             height="500"
             options="[object Object]"
             series="[object Object]"
             type="line"
           />
+          <div
+            class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+          >
+            CPU Usage per thread (%)
+          </div>
           <apex-charts
             height="500"
             options="[object Object]"
@@ -3155,6 +3174,11 @@ exports[`flashlight measure interactive it displays measures: Web app with measu
         <div
           class="mx-8 p-6 bg-dark-charcoal border border-gray-800 rounded-lg"
         >
+          <div
+            class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+          >
+            RAM Usage (MB)
+          </div>
           <apex-charts
             height="500"
             options="[object Object]"

diff --git a/packages/core/web-reporter-ui/__tests__/__snapshots__/ReporterView.test.tsx.snap b/packages/core/web-reporter-ui/__tests__/__snapshots__/ReporterView.test.tsx.snap
@@ -352,6 +352,9 @@ Coefficient of variation :
 
 2.7
  %
+Frame rate (FPS)
+Total CPU Usage (%)
+CPU Usage per thread (%)
 Threads
 Thread
 1-before-memo.apk
@@ -909,6 +912,7 @@ Binder:4646_5
 Binder:3978_4
 0
 0
+RAM Usage (MB)
 Showing average of 10 test iterations"
 `;
 
@@ -2302,6 +2306,11 @@ exports[`<ReporterView /> renders the comparison view 2`] = `
       <div
         class="mx-8 p-6 bg-dark-charcoal border border-gray-800 rounded-lg"
       >
+        <div
+          class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+        >
+          Frame rate (FPS)
+        </div>
         <apex-charts
           height="500"
           options="[object Object]"
@@ -2315,12 +2324,22 @@ exports[`<ReporterView /> renders the comparison view 2`] = `
       <div
         class="mx-8 p-6 bg-dark-charcoal border border-gray-800 rounded-lg"
       >
+        <div
+          class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+        >
+          Total CPU Usage (%)
+        </div>
         <apex-charts
           height="500"
           options="[object Object]"
           series="[object Object],[object Object]"
           type="line"
         />
+        <div
+          class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+        >
+          CPU Usage per thread (%)
+        </div>
         <apex-charts
           height="500"
           options="[object Object]"
@@ -12054,6 +12073,11 @@ exports[`<ReporterView /> renders the comparison view 2`] = `
       <div
         class="mx-8 p-6 bg-dark-charcoal border border-gray-800 rounded-lg"
       >
+        <div
+          class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+        >
+          RAM Usage (MB)
+        </div>
         <apex-charts
           height="500"
           options="[object Object]"
@@ -12178,6 +12202,9 @@ It’s worth noting that results might be higher than expected since we measure
 
 here for more details
 )
+Frame rate (FPS)
+Total CPU Usage (%)
+CPU Usage per thread (%)
 Threads
 Thread
 1-before-memo.apk
@@ -12444,6 +12471,7 @@ Binder:9067_4
 pool-47-thread-
 0
 0
+RAM Usage (MB)
 Iteration 
 10
 /
@@ -13354,6 +13382,11 @@ exports[`<ReporterView /> renders the comparison view 4`] = `
       <div
         class="mx-8 p-6 bg-dark-charcoal border border-gray-800 rounded-lg"
       >
+        <div
+          class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+        >
+          Frame rate (FPS)
+        </div>
         <apex-charts
           height="500"
           options="[object Object]"
@@ -13367,12 +13400,22 @@ exports[`<ReporterView /> renders the comparison view 4`] = `
       <div
         class="mx-8 p-6 bg-dark-charcoal border border-gray-800 rounded-lg"
       >
+        <div
+          class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+        >
+          Total CPU Usage (%)
+        </div>
         <apex-charts
           height="500"
           options="[object Object]"
           series="[object Object],[object Object]"
           type="line"
         />
+        <div
+          class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+        >
+          CPU Usage per thread (%)
+        </div>
         <apex-charts
           height="500"
           options="[object Object]"
@@ -18062,6 +18105,11 @@ exports[`<ReporterView /> renders the comparison view 4`] = `
       <div
         class="mx-8 p-6 bg-dark-charcoal border border-gray-800 rounded-lg"
       >
+        <div
+          class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+        >
+          RAM Usage (MB)
+        </div>
         <apex-charts
           height="500"
           options="[object Object]"
@@ -18596,7 +18644,11 @@ Coefficient of variation :
 
 0.8
  %
+Frame rate (FPS)
+Total CPU Usage (%)
+CPU Usage per thread (%)
 Threads
+RAM Usage (MB)
 Reset
 Play all
 RN0720RC1_true_thousandtexts (com.rn0720rc1_true_thousandtexts)
@@ -20123,6 +20175,11 @@ exports[`<ReporterView /> renders the comparison view with videos 2`] = `
       <div
         class="mx-8 p-6 bg-dark-charcoal border border-gray-800 rounded-lg"
       >
+        <div
+          class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+        >
+          Frame rate (FPS)
+        </div>
         <apex-charts
           height="500"
           options="[object Object]"
@@ -20136,12 +20193,22 @@ exports[`<ReporterView /> renders the comparison view with videos 2`] = `
       <div
         class="mx-8 p-6 bg-dark-charcoal border border-gray-800 rounded-lg"
       >
+        <div
+          class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+        >
+          Total CPU Usage (%)
+        </div>
         <apex-charts
           height="500"
           options="[object Object]"
           series="[object Object],[object Object]"
           type="line"
         />
+        <div
+          class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+        >
+          CPU Usage per thread (%)
+        </div>
         <apex-charts
           height="500"
           options="[object Object]"
@@ -20191,6 +20258,11 @@ exports[`<ReporterView /> renders the comparison view with videos 2`] = `
       <div
         class="mx-8 p-6 bg-dark-charcoal border border-gray-800 rounded-lg"
       >
+        <div
+          class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
+        >
+          RAM Usage (MB)
+        </div>
         <apex-charts
           height="500"
           options="[object Object]"

diff --git a/packages/core/web-reporter-ui/src/components/Charts/Chart.tsx b/packages/core/web-reporter-ui/src/components/Charts/Chart.tsx
@@ -40,7 +40,7 @@ export const Chart = ({
   visibleSeriesNames,
 }: {
   type: Exclude<ApexChartProps["type"], undefined>;
-  title: string;
+  title: string | React.ReactNode;
   series: ApexAxisChartSeries;
   options?: ApexOptions;
   height: number;
@@ -50,7 +50,6 @@ export const Chart = ({
   const commonOptions: ApexOptions = useMemo(
     () => ({
       chart: {
-        id: title,
         animations: {
           enabled: true,
           easing: "linear",
@@ -61,15 +60,8 @@ export const Chart = ({
         zoom: {
           enabled: false,
         },
-      },
-      title: {
-        text: title,
-        align: "left",
-        style: {
-          color: "#FFFFFF",
-          fontSize: "24px",
-          fontFamily: "Inter, sans-serif",
-          fontWeight: 500,
+        toolbar: {
+          show: false,
         },
       },
       dataLabels: {
@@ -97,7 +89,7 @@ export const Chart = ({
         strokeDashArray: 3,
       },
     }),
-    [colors, title]
+    [colors]
   );
 
   const chartOptions = useMemo(() => merge(commonOptions, options), [commonOptions, options]);
@@ -119,6 +111,17 @@ export const Chart = ({
   }, [visibleSeriesNames]);
 
   return (
-    <ReactApexChart ref={ref} options={chartOptions} series={series} type={type} height={height} />
+    <>
+      <div className="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium">
+        {title}
+      </div>
+      <ReactApexChart
+        ref={ref}
+        options={chartOptions}
+        series={series}
+        type={type}
+        height={height}
+      />
+    </>
   );
 };
diff --git a/packages/core/web-reporter-ui/src/components/Charts/ReportChart.tsx b/packages/core/web-reporter-ui/src/components/Charts/ReportChart.tsx
@@ -19,7 +19,7 @@ export const ReportChart = ({
   formatter,
   onPointClick,
 }: {
-  title: string;
+  title: string | React.ReactNode;
   series: LineSeriesType;
   height: number;
   timeLimit?: number | null;