From 9bbcaaf156b195c2a65d46a34c261219de33d668 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 20 Nov 2024 12:13:46 +0800
Subject: [PATCH] memoize calculations in SVG gauge

---
 Client/src/Components/Charts/CustomGauge/index.jsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/Client/src/Components/Charts/CustomGauge/index.jsx b/Client/src/Components/Charts/CustomGauge/index.jsx
index 387efc64f..f3ad15b0b 100644
--- a/Client/src/Components/Charts/CustomGauge/index.jsx
+++ b/Client/src/Components/Charts/CustomGauge/index.jsx
@@ -1,5 +1,5 @@
 import { useTheme } from "@emotion/react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import { Box, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import "./index.css";
@@ -31,9 +31,14 @@ const CustomGauge = ({
 	strokeWidth = 15,
 }) => {
 	// Calculate the length of the stroke for the circle
-	const circumference = 2 * Math.PI * radius;
-	const totalSize = radius * 2 + strokeWidth * 2; // This is the total size of the SVG, needed for the viewBox
-	const strokeLength = (progress / 100) * circumference;
+	const { circumference, totalSize, strokeLength } = useMemo(
+		() => ({
+			circumference: 2 * Math.PI * radius,
+			totalSize: radius * 2 + strokeWidth * 2,
+			strokeLength: (progress / 100) * (2 * Math.PI * radius),
+		}),
+		[radius, strokeWidth, progress]
+	);
 	const [offset, setOffset] = useState(circumference);
 	const theme = useTheme();