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

fix: chart design

Browse Source
This commit is contained in:
MehrdadAdabi 2025-08-29 08:16:15 +03:30
parent 6788024c0d
commit d5f11ec89f
1 changed files with 60 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
app/components/dashboard/project-management/green-innovation-page.tsx
View File

@ -645,7 +645,7 @@ export function GreenInnovationPage() {
<div className="p-6 space-y-4">
{/* Stats Cards */}
<div className="flex gap-6 mb-6">
<div className="flex flex-col gap-11 w-full h-full">
<div className="flex flex-col gap-11 h-full w-1/2">
{/* Stats Grid */}
{loading || statsLoading
? // Loading skeleton for stats cards - matching new design
@ -724,7 +724,7 @@ export function GreenInnovationPage() {
<span>بازیافت و بازیابی منابع</span>
</div>
</div>
<div className="content grid gap-3 h-max p-8 box-border items-center justify-between sm:grid-cols-1 sm:overflow-auto xl:overflow-hidden xl:grid-cols-[30%_70%]">
<div className="content grid gap-6 h-max p-8 box-border items-center justify-between sm:grid-cols-1 sm:overflow-auto xl:overflow-hidden xl:grid-cols-[30%_70%]">
<div className="params flex flex-col gap-3.5">
{Object.entries(recycleParams).map((el, index) => {
return (
@ -746,71 +746,70 @@ export function GreenInnovationPage() {
})}
</div>
<div>
<div className="h-72 w-[32rem]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
<div className="h-72 w-[35rem]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid
stroke="#374151"
strokeDasharray="0"
vertical={false} // خط‌های عمودی (از محور X) بمونه
// horizontal={false} // خط‌های افقی (از محور Y) حذف میشه
/>
<XAxis
dataKey="name"
axisLine={false} // خط اصلی محور X محو میشه
tickLine={false}
tick={{
fill: "#fff",
fontSize: 14,
fontWeight: "normal",
dy: 10, // جابجایی عمودی (مثبت = پایین‌تر، منفی = بالاتر)
}}
>
<CartesianGrid
stroke="#374151"
strokeDasharray="0"
vertical={false} // خط‌های عمودی (از محور X) بمونه
// horizontal={false} // خط‌های افقی (از محور Y) حذف میشه
/>
<XAxis
dataKey="name"
axisLine={false} // خط اصلی محور X محو میشه
tickLine={false}
tick={{
fill: "#fff",
fontSize: 14,
fontWeight: "normal",
dy: 10, // جابجایی عمودی (مثبت = پایین‌تر، منفی = بالاتر)
}}
/>
<YAxis
type="number"
domain={[0, 100]}
axisLine={false}
tickLine={false}
tick={{
fill: "#99a1af", // رنگ متن
fontSize: 14, // سایز فونت
// fontWeight: "bold", // ضخامت
dx: -30, // جابجایی افقی (اعداد نزدیک‌تر یا دورتر از محور)
// dy:-1
}}
tickFormatter={(val) => `${val}%`}
/>
<Bar
dataKey="pv"
fill="#3AEA83"
radius={[20, 20, 0, 0]}
barSize={14}
label={{
position: "top",
fill: "#fff",
fontWeight: "bold",
}}
/>
</BarChart>
</ResponsiveContainer>
</div>
/>
<YAxis
type="number"
domain={[0, 100]}
axisLine={false}
tickLine={false}
tick={{
fill: "#99a1af", // رنگ متن
fontSize: 14, // سایز فونت
// fontWeight: "bold", // ضخامت
dx: -30, // جابجایی افقی (اعداد نزدیک‌تر یا دورتر از محور)
// dy:-1
}}
tickFormatter={(val) => `${val}%`}
/>
<Bar
dataKey="pv"
fill="#3AEA83"
radius={[20, 20, 0, 0]}
barSize={14}
label={{
position: "top",
fill: "#fff",
fontWeight: "bold",
formatter: (value) => `${value}%`
}}
/>
</BarChart>
</ResponsiveContainer>
</div>
</div>
</CardContent>
</Card>
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl w-full overflow-hidden">
<Card className="w-1/3 bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden">
<CardContent className="p-0">
<div className="border-b-2 border-gray-500/20">
<div className="flex flex-row justify-between w-full p-4 px-6">