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

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

@@ -33,7 +33,7 @@ const COLORS = [
] ]
const renderActiveShape = (props: any) => { 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 // Split vendor name into words and create lines of max 12 chars
const words = vendor.split(' '); const words = vendor.split(' ');
@@ -52,6 +52,24 @@ const renderActiveShape = (props: any) => {
return ( return (
<g> <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) => ( {lines.map((line, i) => (
<text <text
key={i} key={i}
@@ -75,7 +93,6 @@ const renderActiveShape = (props: any) => {
> >
{formatCurrency(cost)} {formatCurrency(cost)}
</text> </text>
{props.children}
</g> </g>
); );
}; };
@@ -149,9 +166,9 @@ export function PurchaseMetrics() {
</div> </div>
</div> </div>
<div className="flex-1"> <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="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%"> <ResponsiveContainer width="100%" height="100%">
<PieChart> <PieChart>
<Pie <Pie
@@ -162,7 +179,7 @@ export function PurchaseMetrics() {
cy="50%" cy="50%"
innerRadius={60} innerRadius={60}
outerRadius={80} outerRadius={80}
paddingAngle={2} paddingAngle={1}
activeIndex={activeIndex} activeIndex={activeIndex}
activeShape={renderActiveShape} activeShape={renderActiveShape}
onMouseEnter={(_, index) => setActiveIndex(index)} onMouseEnter={(_, index) => setActiveIndex(index)}
@@ -171,7 +188,7 @@ export function PurchaseMetrics() {
{data?.vendorOrders?.map((entry, index) => ( {data?.vendorOrders?.map((entry, index) => (
<Cell <Cell
key={entry.vendor} key={entry.vendor}
fill={COLORS[index % COLORS.length]} fill={COLORS[index % COLORS.length]}
/> />
))} ))}
</Pie> </Pie>

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

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