Saeed0920/inogen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix the funel chart

Browse Source
This commit is contained in:
Saeed AB 2025-09-11 07:32:37 +03:30
parent 8525f2ff97
commit b63166873d
2 changed files with 8 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/dashboard/project-management/product-innovation-page.tsx
View File

@ -718,7 +718,7 @@ export function ProductInnovationPage() {
<Card className="bg-transparent rounded-2xl overflow-hidden">
<CardContent className="p-0">
<div className="relative">
<Table containerClassName="overflow-auto custom-scrollbar backdrop max-h-[calc(90vh-100px)]">
<Table containerClassName="overflow-auto custom-scrollbar backdrop max-h-[calc(100vh-200px)]">
<TableHeader>
<TableRow className="bg-[#3F415A]">
{columns.map((column) => (

15
app/components/ui/funnel-chart.tsx
View File

@ -49,26 +49,21 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
const barWidth = Math.max(20, widthPercentage); // Minimum 20% width
return (
<div key={index} className="flex items-center justify-center w-full">
<div className="flex items-center gap-10 w-full">
{/* Right side label (RTL) */}
<div className="text-lg text-white font-thin min-w-[max-content] text-center">
<div key={index} className="grid grid-cols-[6rem_1fr] gap-2 w-full">
<div className="text-lg text-white cols-start-1 justify-self-start font-thin min-w-[max-content] text-center">
{item.label}
</div>
{/* Centered bar with equal side spacers so that numbers align on a vertical axis */}
<div className="flex items-center gap-10 w-full cols-start-2 flex items-center justify-center w-full">
<div className="flex items-center w-full">
{/* Left spacer */}
<div style={{ width: `${(100 - barWidth) / 2}%` }} />
{/* Bar */}
<div
className="bg-[#3BC47A] h-8 rounded-2xl flex items-center justify-center text-lg relative"
style={{ width: `${barWidth}%` }}
>
<span className="text-gray-900 text-[#3F415A] font-semibold">
<span className="text-[#3F415A] font-semibold">
{item.value.toLocaleString('fa-IR')}
</span>
</div>
{/* Right spacer */}
<div style={{ width: `${(100 - barWidth) / 2}%` }} />
</div>
</div>
@ -78,7 +73,7 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
</div>
{/* End Process Line */}
<div className="flex items-center w-full gap-10 mt-6">
<div className="flex items-center w-full gap-10">
<div className="text-lg text-gray-600 min-w-[max-content]">انتها فرآیند</div>
<div className="flex items-center w-full gap-4">
{(() => {