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

4
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"> <Card className="bg-transparent rounded-2xl overflow-hidden">
<CardContent className="p-0"> <CardContent className="p-0">
<div className="relative"> <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> <TableHeader>
<TableRow className="bg-[#3F415A]"> <TableRow className="bg-[#3F415A]">
{columns.map((column) => ( {columns.map((column) => (
@ -729,7 +729,7 @@ export function ProductInnovationPage() {
> >
{column.sortable ? ( {column.sortable ? (
<button <button
onClick={() => handleSort(column.key)} onClick={() => handleSort(column.key)}
className="flex items-center gap-2" className="flex items-center gap-2"
> >
<span>{column.label}</span> <span>{column.label}</span>

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