From 9f16d3f957425487d827ec6a3a89266de65cfcaf Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Wed, 17 Apr 2024 01:12:45 +0200
Subject: [PATCH] add tooltip formatter

---
 src/frontend/src/components/charts/tooltipFormatter.tsx  | 9 +++++++++
 src/frontend/src/pages/part/pricing/BomPricingPanel.tsx  | 9 +++++++--
 src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx  | 7 ++++++-
 .../src/pages/part/pricing/PricingOverviewPanel.tsx      | 7 ++++++-
 .../src/pages/part/pricing/PurchaseHistoryPanel.tsx      | 5 ++++-
 src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx | 5 ++++-
 .../src/pages/part/pricing/SupplierPricingPanel.tsx      | 5 ++++-
 .../src/pages/part/pricing/VariantPricingPanel.tsx       | 7 ++++++-
 8 files changed, 46 insertions(+), 8 deletions(-)
 create mode 100644 src/frontend/src/components/charts/tooltipFormatter.tsx

diff --git a/src/frontend/src/components/charts/tooltipFormatter.tsx b/src/frontend/src/components/charts/tooltipFormatter.tsx
new file mode 100644
index 0000000000..73b3b97703
--- /dev/null
+++ b/src/frontend/src/components/charts/tooltipFormatter.tsx
@@ -0,0 +1,9 @@
+import { formatCurrency } from '../../defaults/formatters';
+
+export function tooltipFormatter(label: any, currency: string) {
+  return (
+    formatCurrency(label, {
+      currency: currency
+    })?.toString() ?? ''
+  );
+}
diff --git a/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx b/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
index e6ea6ba6d4..b8228b0334 100644
--- a/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
@@ -21,6 +21,7 @@ import {
 } from 'recharts';
 
 import { CHART_COLORS } from '../../../components/charts/colors';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
 import {
   formatCurrency,
   formatDecimal,
@@ -68,7 +69,9 @@ function BomPieChart({ data, currency }: { data: any[]; currency: string }) {
             />
           ))}
         </Pie>
-        <Tooltip />
+        <Tooltip
+          formatter={(label, payload) => tooltipFormatter(label, currency)}
+        />
       </PieChart>
     </ResponsiveContainer>
   );
@@ -87,7 +90,9 @@ function BomBarChart({ data, currency }: { data: any[]; currency: string }) {
             })?.toString() ?? ''
           }
         />
-        <Tooltip />
+        <Tooltip
+          formatter={(label, payload) => tooltipFormatter(label, currency)}
+        />
         <Legend />
         <Bar
           dataKey="total_price_min"
diff --git a/src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx b/src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx
index 3ce9f39fb7..a82f837e41 100644
--- a/src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx
@@ -13,6 +13,7 @@ import {
 
 import { AddItemButton } from '../../../components/buttons/AddItemButton';
 import { CHART_COLORS } from '../../../components/charts/colors';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
 import { ApiFormFieldSet } from '../../../components/forms/fields/ApiFormField';
 import { formatCurrency } from '../../../defaults/formatters';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
@@ -180,7 +181,11 @@ export default function PriceBreakPanel({
                   })?.toString() ?? ''
                 }
               />
-              <Tooltip />
+              <Tooltip
+                formatter={(label, payload) =>
+                  tooltipFormatter(label, currency)
+                }
+              />
               <Legend />
               <Bar
                 dataKey="price"
diff --git a/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx b/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx
index 795b80e9b1..c034793e29 100644
--- a/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx
@@ -30,6 +30,7 @@ import {
 } from 'recharts';
 
 import { CHART_COLORS } from '../../../components/charts/colors';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
 import { formatCurrency, renderDate } from '../../../defaults/formatters';
 import { panelOptions } from '../PartPricingPanel';
 
@@ -197,7 +198,11 @@ export default function PricingOverviewPanel({
                 })?.toString() ?? ''
               }
             />
-            <Tooltip />
+            <Tooltip
+              formatter={(label, payload) =>
+                tooltipFormatter(label, pricing?.currency)
+              }
+            />
             <Legend />
             <Bar
               dataKey="min_value"
diff --git a/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx b/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx
index 889df9012b..ae88a6d7c4 100644
--- a/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx
@@ -12,6 +12,7 @@ import {
 } from 'recharts';
 
 import { CHART_COLORS } from '../../../components/charts/colors';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
 import { formatCurrency, renderDate } from '../../../defaults/formatters';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { useTable } from '../../../hooks/UseTable';
@@ -140,7 +141,9 @@ export default function PurchaseHistoryPanel({
                 })?.toString() ?? ''
               }
             />
-            <Tooltip />
+            <Tooltip
+              formatter={(label, payload) => tooltipFormatter(label, currency)}
+            />
             <Legend />
             <Bar
               dataKey="unit_price"
diff --git a/src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx b/src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx
index 1f44256a09..7a8b823866 100644
--- a/src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx
@@ -12,6 +12,7 @@ import {
 } from 'recharts';
 
 import { CHART_COLORS } from '../../../components/charts/colors';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
 import { formatCurrency, renderDate } from '../../../defaults/formatters';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { useTable } from '../../../hooks/UseTable';
@@ -104,7 +105,9 @@ export default function SaleHistoryPanel({ part }: { part: any }): ReactNode {
                 })?.toString() ?? ''
               }
             />
-            <Tooltip />
+            <Tooltip
+              formatter={(label, payload) => tooltipFormatter(label, currency)}
+            />
             <Legend />
             <Bar
               dataKey="sale_price"
diff --git a/src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx b/src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx
index af297b4d8f..0cae3cb156 100644
--- a/src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx
@@ -11,6 +11,7 @@ import {
 } from 'recharts';
 
 import { CHART_COLORS } from '../../../components/charts/colors';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
 import { formatCurrency } from '../../../defaults/formatters';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { useTable } from '../../../hooks/UseTable';
@@ -73,7 +74,9 @@ export default function SupplierPricingPanel({ part }: { part: any }) {
                 })?.toString() ?? ''
               }
             />
-            <Tooltip />
+            <Tooltip
+              formatter={(label, payload) => tooltipFormatter(label, currency)}
+            />
             <Bar
               dataKey="unit_price"
               fill={CHART_COLORS[0]}
diff --git a/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx b/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx
index aef5038560..b2af8c0bed 100644
--- a/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx
@@ -12,6 +12,7 @@ import {
 } from 'recharts';
 
 import { CHART_COLORS } from '../../../components/charts/colors';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
 import { formatCurrency } from '../../../defaults/formatters';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { ModelType } from '../../../enums/ModelType';
@@ -106,7 +107,11 @@ export default function VariantPricingPanel({
                   })?.toString() ?? ''
                 }
               />
-              <Tooltip />
+              <Tooltip
+                formatter={(label, payload) =>
+                  tooltipFormatter(label, pricing?.currency)
+                }
+              />
               <Legend />
               <Bar
                 dataKey="pmin"