mirror of
https://github.com/inventree/InvenTree
synced 2024-08-30 18:33:04 +00:00
format ticks using currency
This commit is contained in:
parent
91dbb135f8
commit
f1bc66e353
@ -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}
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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"
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user