From 2bad774f2b9c0e647fe64e9800e609b96f04c5a0 Mon Sep 17 00:00:00 2001 From: AntoineThibi Date: Fri, 26 May 2023 17:07:10 +0200 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E2=9C=A8=20Add=20danger=20and=20sa?= =?UTF-8?q?fe=20zone=20to=20charts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web-reporter-ui/src/components/Chart.tsx | 32 +++++++++++++++++++ .../src/sections/CPUReport.tsx | 10 ++++++ .../src/sections/FPSReport.tsx | 5 +++ 3 files changed, 47 insertions(+) diff --git a/packages/web-reporter-ui/src/components/Chart.tsx b/packages/web-reporter-ui/src/components/Chart.tsx index 17ff0487..a71337de 100644 --- a/packages/web-reporter-ui/src/components/Chart.tsx +++ b/packages/web-reporter-ui/src/components/Chart.tsx @@ -8,6 +8,34 @@ import { ApexOptions } from "apexcharts"; import { getColorPalette } from "../theme/colors"; import { POLLING_INTERVAL } from "@perf-profiler/types"; +type AnnotationInterval = { + y: number; + y2: number; + label: string; + color: string; +}; + +const getAnnotationInterval = ( + annotationIntervalList: AnnotationInterval[] +) => { + const layout = annotationIntervalList.map(({ y, y2, label, color }) => ({ + y, + y2, + borderColor: color, + fillColor: color, + opacity: 0.2, + label: { + borderColor: color, + style: { + color: "#fff", + background: color, + }, + text: label, + }, + })); + return layout; +}; + const getVideoCurrentTimeAnnotation = () => { const palette = getColorPalette(); const lastColor = palette[palette.length - 1]; @@ -72,6 +100,7 @@ export const Chart = ({ maxValue, showLegendForSingleSeries, colors = getColorPalette(), + annotationIntervalList = [], }: { title: string; series: { name: string; data: { x: number; y: number }[] }[]; @@ -81,6 +110,7 @@ export const Chart = ({ maxValue?: number; showLegendForSingleSeries?: boolean; colors?: string[]; + annotationIntervalList?: AnnotationInterval[]; }) => { const setVideoCurrentTimeOnMouseHover = useSetVideoTimeOnMouseHover({ series, @@ -107,6 +137,7 @@ export const Chart = ({ }, annotations: { xaxis: videoEnabled ? [getVideoCurrentTimeAnnotation()] : [], + yaxis: getAnnotationInterval(annotationIntervalList), }, title: { text: title, @@ -154,6 +185,7 @@ export const Chart = ({ interval, videoEnabled, setVideoCurrentTimeOnMouseHover, + annotationIntervalList, timeLimit, maxValue, colors, diff --git a/packages/web-reporter-ui/src/sections/CPUReport.tsx b/packages/web-reporter-ui/src/sections/CPUReport.tsx index 4cbf75c1..213691b0 100644 --- a/packages/web-reporter-ui/src/sections/CPUReport.tsx +++ b/packages/web-reporter-ui/src/sections/CPUReport.tsx @@ -28,6 +28,14 @@ const buildAverageCpuSeriesData = (measures: Measure[]) => const buildCpuPerThreadSeriesData = (measures: Measure[], threadName: string) => buildSeriesData(measures, (measure) => measure.cpu.perName[threadName]); +const totalCpuAnnotationInterval = [ + { y: 180, y2: 1000, color: "#E62E2E", label: "Danger Zone" }, +]; + +const perThreadCpuAnnotationInterval = [ + { y: 90, y2: 100, color: "#E62E2E", label: "Danger Zone" }, +]; + export const CPUReport = ({ results, }: { @@ -61,6 +69,7 @@ export const CPUReport = ({ height={500} interval={POLLING_INTERVAL} series={totalCPUUsage} + annotationIntervalList={totalCpuAnnotationInterval} /> ); }; From 99a047b1283c3798298780abb50c07b6b49bf01a Mon Sep 17 00:00:00 2001 From: AntoineThibi Date: Fri, 26 May 2023 17:10:29 +0200 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E2=9C=A8=20Make=20it=20undefined?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/web-reporter-ui/src/components/Chart.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/web-reporter-ui/src/components/Chart.tsx b/packages/web-reporter-ui/src/components/Chart.tsx index a71337de..18c2a16d 100644 --- a/packages/web-reporter-ui/src/components/Chart.tsx +++ b/packages/web-reporter-ui/src/components/Chart.tsx @@ -16,9 +16,9 @@ type AnnotationInterval = { }; const getAnnotationInterval = ( - annotationIntervalList: AnnotationInterval[] + annotationIntervalList: AnnotationInterval[] | undefined ) => { - const layout = annotationIntervalList.map(({ y, y2, label, color }) => ({ + const layout = annotationIntervalList?.map(({ y, y2, label, color }) => ({ y, y2, borderColor: color, @@ -100,7 +100,7 @@ export const Chart = ({ maxValue, showLegendForSingleSeries, colors = getColorPalette(), - annotationIntervalList = [], + annotationIntervalList = undefined, }: { title: string; series: { name: string; data: { x: number; y: number }[] }[]; From d7d8bda177b24edd76dfbb8903d77278a416da5d Mon Sep 17 00:00:00 2001 From: AntoineThibi Date: Wed, 31 May 2023 09:54:25 +0200 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E2=9C=A8=20(CPUReport)=20display?= =?UTF-8?q?=20danger=20Zone=20when=20using=203=20CPU?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/web-reporter-ui/src/sections/CPUReport.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-reporter-ui/src/sections/CPUReport.tsx b/packages/web-reporter-ui/src/sections/CPUReport.tsx index 213691b0..87fa7a8d 100644 --- a/packages/web-reporter-ui/src/sections/CPUReport.tsx +++ b/packages/web-reporter-ui/src/sections/CPUReport.tsx @@ -29,7 +29,7 @@ const buildCpuPerThreadSeriesData = (measures: Measure[], threadName: string) => buildSeriesData(measures, (measure) => measure.cpu.perName[threadName]); const totalCpuAnnotationInterval = [ - { y: 180, y2: 1000, color: "#E62E2E", label: "Danger Zone" }, + { y: 300, y2: 1000, color: "#E62E2E", label: "Danger Zone" }, ]; const perThreadCpuAnnotationInterval = [