format ticks using currency

src/frontend/src/pages/part/pricing/BomPricingPanel.tsx

@@ -21,7 +21,11 @@ import {
 } from 'recharts';
 
 import { CHART_COLORS } from '../../../components/charts/colors';
-import { formatDecimal, formatPriceRange } from '../../../defaults/formatters';
+import {
+  formatCurrency,
+  formatDecimal,
+  formatPriceRange
+} from '../../../defaults/formatters';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { ModelType } from '../../../enums/ModelType';
 import { useTable } from '../../../hooks/UseTable';
@@ -32,7 +36,7 @@ import { InvenTreeTable } from '../../../tables/InvenTreeTable';
 import { NoPricingData } from './PricingPanel';
 
 // Display BOM data as a pie chart
-function BomPieChart({ data }: { data: any[] }) {
+function BomPieChart({ data, currency }: { data: any[]; currency: string }) {
   return (
     <ResponsiveContainer width="100%" height={500}>
       <PieChart>
@@ -71,12 +75,18 @@ function BomPieChart({ data }: { data: any[] }) {
 }
 
 // Display BOM data as a bar chart
-function BomBarChart({ data }: { data: any[] }) {
+function BomBarChart({ data, currency }: { data: any[]; currency: string }) {
   return (
     <ResponsiveContainer width="100%" height={500}>
       <BarChart data={data}>
         <XAxis dataKey="name" />
-        <YAxis />
+        <YAxis
+          tickFormatter={(value, index) =>
+            formatCurrency(value, {
+              currency: currency
+            })?.toString() ?? ''
+          }
+        />
         <Tooltip />
         <Legend />
         <Bar
@@ -202,8 +212,12 @@ export default function BomPricingPanel({
         />
         {bomPricingData.length > 0 ? (
           <Stack spacing="xs">
-            {chartType == 'bar' && <BomBarChart data={bomPricingData} />}
+            {chartType == 'bar' && (
-            {chartType == 'pie' && <BomPieChart data={bomPricingData} />}
+              <BomBarChart data={bomPricingData} currency={pricing?.currency} />
+            )}
+            {chartType == 'pie' && (
+              <BomPieChart data={bomPricingData} currency={pricing?.currency} />
+            )}
             <SegmentedControl
               value={chartType}
               onChange={setChartType}

src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { Alert, SimpleGrid } from '@mantine/core';
+import { SimpleGrid } from '@mantine/core';
 import { useCallback, useMemo, useState } from 'react';
 import {
   Bar,
@@ -144,6 +144,13 @@ export default function PriceBreakPanel({
     [user]
   );
 
+  const currency: string = useMemo(() => {
+    if (table.records.length === 0) {
+      return '';
+    }
+    return table.records[0].currency;
+  }, [table.records]);
+
   return (
     <>
       {newPriceBreak.modal}
@@ -166,7 +173,13 @@ export default function PriceBreakPanel({
           <ResponsiveContainer width="100%" height={500}>
             <BarChart data={table.records}>
               <XAxis dataKey="quantity" />
-              <YAxis />
+              <YAxis
+                tickFormatter={(value, index) =>
+                  formatCurrency(value, {
+                    currency: currency
+                  })?.toString() ?? ''
+                }
+              />
               <Tooltip />
               <Legend />
               <Bar

src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx

@@ -190,7 +190,13 @@ export default function PricingOverviewPanel({
         <ResponsiveContainer width="100%" height={500}>
           <BarChart data={overviewData}>
             <XAxis dataKey="title" />
-            <YAxis />
+            <YAxis
+              tickFormatter={(value, index) =>
+                formatCurrency(value, {
+                  currency: pricing?.currency
+                })?.toString() ?? ''
+              }
+            />
             <Tooltip />
             <Legend />
             <Bar

src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx

@@ -95,6 +95,13 @@ export default function PurchaseHistoryPanel({
     ];
   }, []);
 
+  const currency: string = useMemo(() => {
+    if (table.records.length === 0) {
+      return '';
+    }
+    return table.records[0].purchase_price_currency;
+  }, [table.records]);
+
   const purchaseHistoryData = useMemo(() => {
     return table.records.map((record: any) => {
       return {
@@ -126,7 +133,13 @@ export default function PurchaseHistoryPanel({
         <ResponsiveContainer width="100%" height={500}>
           <BarChart data={purchaseHistoryData}>
             <XAxis dataKey="name" />
-            <YAxis />
+            <YAxis
+              tickFormatter={(value, index) =>
+                formatCurrency(value, {
+                  currency: currency
+                })?.toString() ?? ''
+              }
+            />
             <Tooltip />
             <Legend />
             <Bar

src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx

@@ -60,6 +60,13 @@ export default function SaleHistoryPanel({ part }: { part: any }): ReactNode {
     ];
   }, []);
 
+  const currency: string = useMemo(() => {
+    if (table.records.length === 0) {
+      return '';
+    }
+    return table.records[0].sale_price_currency;
+  }, [table.records]);
+
   const saleHistoryData = useMemo(() => {
     return table.records.map((record: any) => {
       return {
@@ -90,7 +97,13 @@ export default function SaleHistoryPanel({ part }: { part: any }): ReactNode {
         <ResponsiveContainer width="100%" height={500}>
           <BarChart data={saleHistoryData}>
             <XAxis dataKey="name" />
-            <YAxis />
+            <YAxis
+              tickFormatter={(value, index) =>
+                formatCurrency(value, {
+                  currency: currency
+                })?.toString() ?? ''
+              }
+            />
             <Tooltip />
             <Legend />
             <Bar

src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx

@@ -11,6 +11,7 @@ import {
 } from 'recharts';
 
 import { CHART_COLORS } from '../../../components/charts/colors';
+import { formatCurrency } from '../../../defaults/formatters';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { useTable } from '../../../hooks/UseTable';
 import { apiUrl } from '../../../states/ApiState';
@@ -29,6 +30,13 @@ export default function SupplierPricingPanel({ part }: { part: any }) {
     return SupplierPriceBreakColumns();
   }, []);
 
+  const currency: string = useMemo(() => {
+    if (table.records.length === 0) {
+      return '';
+    }
+    return table.records[0].currency;
+  }, [table.records]);
+
   const supplierPricingData = useMemo(() => {
     return table.records.map((record: any) => {
       return {
@@ -58,7 +66,13 @@ export default function SupplierPricingPanel({ part }: { part: any }) {
         <ResponsiveContainer width="100%" height={500}>
           <BarChart data={supplierPricingData}>
             <XAxis dataKey="name" />
-            <YAxis />
+            <YAxis
+              tickFormatter={(value, index) =>
+                formatCurrency(value, {
+                  currency: currency
+                })?.toString() ?? ''
+              }
+            />
             <Tooltip />
             <Bar
               dataKey="unit_price"

src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx

@@ -99,7 +99,13 @@ export default function VariantPricingPanel({
           <ResponsiveContainer width="100%" height={500}>
             <BarChart data={variantPricingData}>
               <XAxis dataKey="name" />
-              <YAxis />
+              <YAxis
+                tickFormatter={(value, index) =>
+                  formatCurrency(value, {
+                    currency: pricing?.currency
+                  })?.toString() ?? ''
+                }
+              />
               <Tooltip />
               <Legend />
               <Bar