feat(Chart): add props to charts (formatter, onPointClick)

packages/core/web-reporter-ui/src/components/Charts/Chart.tsx

@@ -1,12 +1,7 @@
-import React, { useMemo, useContext } from "react";
+import React, { useMemo } from "react";
 import ReactApexChart, { Props as ApexChartProps } from "react-apexcharts";
-import { VideoEnabledContext } from "../../../videoCurrentTimeContext";
 import { ApexOptions } from "apexcharts";
-import { getColorPalette } from "../../theme/colors";
 import { POLLING_INTERVAL } from "@perf-profiler/types";
-import { getLastX, useSetVideoTimeOnMouseHover } from "./useSetVideoTimeOnMouseHover";
-import { AnnotationInterval, LineSeriesType } from "./types";
-import { getAnnotations } from "./getAnnotations";
 import { merge } from "lodash";
 
 export const Chart = ({
@@ -81,75 +76,3 @@ export const Chart = ({
 
   return <ReactApexChart options={chartOptions} series={series} type={type} height={height} />;
 };
-
-export const ReportChart = ({
-  title,
-  series,
-  height,
-  timeLimit,
-  maxValue,
-  showLegendForSingleSeries,
-  colors = getColorPalette(),
-  annotationIntervalList = undefined,
-  formatter,
-  onPointClick,
-}: {
-  title: string;
-  series: LineSeriesType;
-  height: number;
-  timeLimit?: number | null;
-  maxValue?: number;
-  showLegendForSingleSeries?: boolean;
-  colors?: string[];
-  annotationIntervalList?: AnnotationInterval[];
-  formatter?: (label: string) => string;
-  onPointClick?: (seriesIndex: number, dataPointIndex: number) => void;
-}) => {
-  const setVideoCurrentTimeOnMouseHover = useSetVideoTimeOnMouseHover({
-    lastX: getLastX(series),
-  });
-
-  const videoEnabled = useContext(VideoEnabledContext);
-
-  const options: ApexOptions = useMemo(
-    () => ({
-      chart: {
-        events: videoEnabled ? setVideoCurrentTimeOnMouseHover : {},
-      },
-      annotations: getAnnotations(annotationIntervalList) || {},
-      stroke: {
-        width: 2,
-      },
-      xaxis: {
-        type: "numeric",
-        max: timeLimit || undefined,
-      },
-      yaxis: {
-        min: 0,
-        max: maxValue,
-      },
-      legend: {
-        showForSingleSeries: showLegendForSingleSeries,
-      },
-    }),
-    [
-      videoEnabled,
-      setVideoCurrentTimeOnMouseHover,
-      annotationIntervalList,
-      timeLimit,
-      maxValue,
-      showLegendForSingleSeries,
-    ]
-  );
-
-  return (
-    <Chart
-      type="line"
-      title={title}
-      series={series}
-      colors={colors}
-      height={height}
-      options={options}
-    />
-  );
-};

packages/core/web-reporter-ui/src/components/Charts/ReportChart.tsx

@@ -0,0 +1,80 @@
+import React, { useMemo, useContext } from "react";
+import { VideoEnabledContext } from "../../../videoCurrentTimeContext";
+import { ApexOptions } from "apexcharts";
+import { getColorPalette } from "../../theme/colors";
+import { getLastX, useSetVideoTimeOnMouseHover } from "./useSetVideoTimeOnMouseHover";
+import { AnnotationInterval, LineSeriesType } from "./types";
+import { getAnnotations } from "./getAnnotations";
+import { Chart } from "./Chart";
+
+export const ReportChart = ({
+  title,
+  series,
+  height,
+  timeLimit,
+  maxValue,
+  showLegendForSingleSeries,
+  colors = getColorPalette(),
+  annotationIntervalList = undefined,
+  formatter,
+  onPointClick,
+}: {
+  title: string;
+  series: LineSeriesType;
+  height: number;
+  timeLimit?: number | null;
+  maxValue?: number;
+  showLegendForSingleSeries?: boolean;
+  colors?: string[];
+  annotationIntervalList?: AnnotationInterval[];
+  formatter?: (label: string) => string;
+  onPointClick?: (seriesIndex: number, dataPointIndex: number) => void;
+}) => {
+  const setVideoCurrentTimeOnMouseHover = useSetVideoTimeOnMouseHover({
+    lastX: getLastX(series),
+  });
+
+  const videoEnabled = useContext(VideoEnabledContext);
+
+  const options: ApexOptions = useMemo(
+    () => ({
+      chart: {
+        events: videoEnabled ? setVideoCurrentTimeOnMouseHover : {},
+      },
+      annotations: getAnnotations(annotationIntervalList) || {},
+      stroke: {
+        width: 2,
+      },
+      xaxis: {
+        type: "numeric",
+        max: timeLimit || undefined,
+      },
+      yaxis: {
+        min: 0,
+        max: maxValue,
+      },
+      legend: {
+        showForSingleSeries: showLegendForSingleSeries,
+      },
+    }),
+    [
+      videoEnabled,
+      setVideoCurrentTimeOnMouseHover,
+      annotationIntervalList,
+      timeLimit,
+      maxValue,
+      showLegendForSingleSeries,
+    ]
+  );
+
+  return (
+    <Chart
+      type="line"
+      title={title}
+      series={series}
+      colors={colors}
+      height={height}
+      options={options}
+    />
+  );
+};

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

@@ -6,11 +6,11 @@ import {
   ThreadNames,
   ThreadNamesIOS,
 } from "@perf-profiler/types";
-import { ReportChart } from "../components/Charts/Chart";
 import { ComparativeThreadTable, ThreadTable } from "../components/ThreadTable";
 import { Collapsible } from "../components/Collapsible";
 import { getColorPalette } from "../theme/colors";
 import { getAverageCpuUsage, roundToDecimal } from "@perf-profiler/reporter";
+import { ReportChart } from "../components/Charts/ReportChart";
 
 const buildSeriesData = (measures: Measure[], calculate: (measure: Measure) => number) =>
   measures

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { AveragedTestCaseResult } from "@perf-profiler/types";
-import { ReportChart } from "../components/Charts/Chart";
 import { buildValueGraph } from "./hideSectionForEmptyValue";
+import { ReportChart } from "../components/Charts/ReportChart";
 
 const fpsAnnotationInterval = [{ y: 57, y2: 60, color: "#158000", label: "Safe Zone" }];
 

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

@@ -1,17 +1,13 @@
 import React from "react";
 import { AveragedTestCaseResult } from "@perf-profiler/types";
-import { ReportChart } from "../components/Charts/Chart";
 import { buildValueGraph } from "./hideSectionForEmptyValue";
+import { ReportChart } from "../components/Charts/ReportChart";
 
 export const RAMReport = ({ results }: { results: AveragedTestCaseResult[] }) => {
   const ram = buildValueGraph({
     results,
     stat: "ram",
   });
 
-  return (
-    <>
-      <ReportChart title="RAM Usage (MB)" height={500} series={ram} />
-    </>
-  );
+  return <ReportChart title="RAM Usage (MB)" height={500} series={ram} />;
 };