matt/inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More tweaks to stock and purchases components

Browse Source
This commit is contained in:
Matt
2025-01-17 21:30:30 -05:00
parent f38174ca2a
commit b6e95aada9
2 changed files with 46 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
inventory/src/components/dashboard/PurchaseMetrics.tsx
View File

@@ -33,7 +33,7 @@ const COLORS = [
]
const renderActiveShape = (props: any) => {
const { cx, cy, innerRadius, vendor, cost } = props;
const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill, vendor, cost } = props;
// Split vendor name into words and create lines of max 12 chars
const words = vendor.split(' ');
@@ -52,6 +52,24 @@ const renderActiveShape = (props: any) => {
return (
<g>
<Sector
cx={cx}
cy={cy}
innerRadius={innerRadius}
outerRadius={outerRadius}
startAngle={startAngle}
endAngle={endAngle}
fill={fill}
/>
<Sector
cx={cx}
cy={cy}
startAngle={startAngle}
endAngle={endAngle}
innerRadius={outerRadius - 1}
outerRadius={outerRadius + 4}
fill={fill}
/>
{lines.map((line, i) => (
<text
key={i}
@@ -75,7 +93,6 @@ const renderActiveShape = (props: any) => {
>
{formatCurrency(cost)}
</text>
{props.children}
</g>
);
};
@@ -149,9 +166,9 @@ export function PurchaseMetrics() {
</div>
</div>
<div className="flex-1">
<div className="flex flex-col">
<div className="flex flex-col gap-1">
<div className="text-md flex justify-center font-medium">Purchase Orders By Vendor</div>
<div className="h-[200px]">
<div className="h-[180px]">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
@@ -162,7 +179,7 @@ export function PurchaseMetrics() {
cy="50%"
innerRadius={60}
outerRadius={80}
paddingAngle={2}
paddingAngle={1}
activeIndex={activeIndex}
activeShape={renderActiveShape}
onMouseEnter={(_, index) => setActiveIndex(index)}

28
inventory/src/components/dashboard/StockMetrics.tsx
View File

@@ -33,7 +33,7 @@ const COLORS = [
]
const renderActiveShape = (props: any) => {
const { cx, cy, innerRadius, brand, retail } = props;
const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill, brand, retail } = props;
// Split brand name into words and create lines of max 12 chars
const words = brand.split(' ');
@@ -52,6 +52,24 @@ const renderActiveShape = (props: any) => {
return (
<g>
<Sector
cx={cx}
cy={cy}
innerRadius={innerRadius}
outerRadius={outerRadius}
startAngle={startAngle}
endAngle={endAngle}
fill={fill}
/>
<Sector
cx={cx}
cy={cy}
startAngle={startAngle}
endAngle={endAngle}
innerRadius={outerRadius - 1}
outerRadius={outerRadius + 4}
fill={fill}
/>
{lines.map((line, i) => (
<text
key={i}
@@ -75,7 +93,6 @@ const renderActiveShape = (props: any) => {
>
{formatCurrency(retail)}
</text>
{props.children}
</g>
);
};
@@ -149,9 +166,9 @@ export function StockMetrics() {
</div>
</div>
<div className="flex-1">
<div className="flex flex-col">
<div className="flex flex-col gap-1">
<div className="text-md flex justify-center font-medium">Stock Retail By Brand</div>
<div className="h-[200px]">
<div className="h-[180px]">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
@@ -162,7 +179,7 @@ export function StockMetrics() {
cy="50%"
innerRadius={60}
outerRadius={80}
paddingAngle={2}
paddingAngle={1}
activeIndex={activeIndex}
activeShape={renderActiveShape}
onMouseEnter={(_, index) => setActiveIndex(index)}
@@ -172,7 +189,6 @@ export function StockMetrics() {
<Cell
key={entry.brand}
fill={COLORS[index % COLORS.length]}
style={{ filter: activeIndex === index ? 'brightness(1.2)' : undefined }}
/>
))}
</Pie>