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