format ticks using currency

This commit is contained in:
Matthias Mair 2024-04-17 00:45:04 +02:00
parent 91dbb135f8
commit f1bc66e353
No known key found for this signature in database
GPG Key ID: A593429DDA23B66A
7 changed files with 92 additions and 13 deletions

View File

@ -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 == 'pie' && <BomPieChart data={bomPricingData} />}
{chartType == 'bar' && (
<BomBarChart data={bomPricingData} currency={pricing?.currency} />
)}
{chartType == 'pie' && (
<BomPieChart data={bomPricingData} currency={pricing?.currency} />
)}
<SegmentedControl
value={chartType}
onChange={setChartType}

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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"

View File

@ -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