From d7d908b74ff72e28aca38985c62b7f1b8e6ee6d8 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 19 Aug 2024 16:33:02 +1000
Subject: [PATCH] Fix for BOM pricing donut chart (#7917)

- Mantine charts tooltip can't handle '.' character.
---
 .../pages/part/pricing/BomPricingPanel.tsx    | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx b/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
index 4584c394a6..3b992db87e 100644
--- a/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
@@ -32,13 +32,18 @@ function BomPieChart({
 }) {
   // Construct donut data
   const maxPricing = useMemo(() => {
-    return data.map((entry, index) => {
-      return {
-        name: entry.name,
-        value: entry.total_price_max,
-        color: CHART_COLORS[index % CHART_COLORS.length] + '.5'
-      };
-    });
+    return (
+      data
+        ?.filter((el: any) => !!el.total_price_max)
+        .map((entry, index) => {
+          return {
+            // Note: Replace '.' in name to avoid issues with tooltip
+            name: entry?.name?.replace('.', '') ?? '',
+            value: entry?.total_price_max,
+            color: CHART_COLORS[index % CHART_COLORS.length] + '.5'
+          };
+        }) ?? []
+    );
   }, [data]);
 
   return (
@@ -170,8 +175,8 @@ export default function BomPricingPanel({
   const [chartType, setChartType] = useState<string>('pie');
 
   const hasData: boolean = useMemo(() => {
-    return !table.isLoading && bomPricingData.length > 0;
-  }, [table.isLoading, bomPricingData.length]);
+    return !table.isLoading && bomPricingData && bomPricingData.length > 0;
+  }, [table.isLoading, bomPricingData]);
 
   return (
     <Stack gap="xs">