Merge branch 'master' of https://git.caspianoxin.ir/MamadAriaKia/CoffeeJoo_Panel_kafeDar
This commit is contained in:
Mohammadreza
commit
4e4f9685a4
|
|
@ -23,6 +23,12 @@ const SIDEBAR = {
|
|||
icon: PiCoffee,
|
||||
label: 'مدیریت کافه ها',
|
||||
},
|
||||
{
|
||||
id: 'users-management',
|
||||
path: '/users-management',
|
||||
icon: PiCoffee,
|
||||
label: 'مدیریت کاربران',
|
||||
},
|
||||
{
|
||||
id: 'stats',
|
||||
path: '/stats',
|
||||
|
|
|
|||
|
|
@ -7,11 +7,14 @@ import toggleTheme from "../ToggleTheme";
|
|||
import { CgDarkMode } from "react-icons/cg";
|
||||
|
||||
const HEADER_PATHS = [
|
||||
{ route: "/cafe-management", title: "مدیریت کافه ها" },
|
||||
{ route: "/dashboard", title: "داشبورد" },
|
||||
{ route: "/stats", title: "آمار و تحلیل" },
|
||||
{ route: "/edit-cafe/", title: "ویرایش کافه" },
|
||||
|
||||
"/management",
|
||||
"/management/",
|
||||
"/management/cafes",
|
||||
"/edit-cafe",
|
||||
"/edit-cafe/",
|
||||
"/cafe",
|
||||
"/cafes",
|
||||
"/admin",
|
||||
];
|
||||
|
||||
export default function Layout() {
|
||||
|
|
|
|||
|
|
@ -68,82 +68,65 @@ const CafeManagement = () => {
|
|||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* جدول دسکتاپ */}
|
||||
<div className="hidden lg:block mt-10 overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-thead">
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">
|
||||
لوگو
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">
|
||||
اسم
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">
|
||||
آدرس
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">
|
||||
ریتینگ
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">
|
||||
ساعت کاری
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">
|
||||
ادیت
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{cafes.map((cafe) => (
|
||||
<tr
|
||||
key={cafe._id}
|
||||
className="border-b border-[#EFEEEE] hover:bg-hover transition-colors"
|
||||
>
|
||||
<td className="px-4 py-4 text-right">
|
||||
<img
|
||||
src={cafe.photo || Pic1}
|
||||
alt={cafe.Name}
|
||||
className="w-10 h-10 rounded-full object-cover"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right text-[#402E32] font-medium text-sm whitespace-nowrap">
|
||||
{cafe.Name}
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right text-[#402E32] text-sm max-w-xs overflow-hidden text-ellipsis">
|
||||
{cafe.address}
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right">
|
||||
<div className="flex items-center gap-2">
|
||||
<img src={Star1} alt="rating" className="w-5 h-5" />
|
||||
<span className="text-[#402E32] text-sm">
|
||||
{cafe.rating || 0}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right">
|
||||
<div className="flex items-center gap-2">
|
||||
<img src={Group} alt="time" className="w-5 h-5" />
|
||||
<span className="text-[#402E32] text-sm whitespace-nowrap">
|
||||
{cafe.openinghour || "نامشخص"}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-4 text-center">
|
||||
<Link
|
||||
to={`/edit-cafe/${cafe._id}`}
|
||||
className="inline-flex items-center justify-center gap-2 border-2 border-[#BB8F70] px-6 py-2 rounded-3xl text-sm font-light text-text1 hover:bg-button1 hover:border-button1 transition-all duration-300"
|
||||
>
|
||||
<span>ادیت</span>
|
||||
<BiEdit className="w-4 h-4" />
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
return (
|
||||
<>
|
||||
{/* جدول دسکتاپ */}
|
||||
<div className="hidden lg:block mt-10 overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-thead">
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">لوگو</th>
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">اسم</th>
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">آدرس</th>
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">ریتینگ</th>
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">ساعت کاری</th>
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">ادیت</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{cafes.map((cafe) => (
|
||||
<tr key={cafe._id} className="border-b border-[#EFEEEE] hover:bg-hover transition-colors">
|
||||
<td className="px-4 py-4 text-right">
|
||||
<img
|
||||
src={cafe.photo || Pic1}
|
||||
alt={cafe.Name}
|
||||
className="w-10 h-10 rounded-full object-cover"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right text-[#402E32] font-medium text-sm whitespace-nowrap">
|
||||
{cafe.Name}
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right text-[#402E32] text-sm max-w-xs overflow-hidden text-ellipsis">
|
||||
{cafe.address}
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right">
|
||||
<div className="flex items-center gap-2">
|
||||
<img src={Star1} alt="rating" className="w-5 h-5" />
|
||||
<span className="text-[#402E32] text-sm">{cafe.rating || 0}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right">
|
||||
<div className="flex items-center gap-2">
|
||||
<img src={Group} alt="time" className="w-5 h-5" />
|
||||
<span className="text-[#402E32] text-sm whitespace-nowrap">
|
||||
{cafe.openinghour || "نامشخص"}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-4 text-center">
|
||||
<Link
|
||||
to={`/edit-cafe/${cafe._id}`}
|
||||
className="inline-flex items-center justify-center gap-2 border-2 border-[#BB8F70] px-6 py-2 rounded-3xl text-sm font-light text-text1 hover:bg-button1 hover:border-button1 transition-all duration-300"
|
||||
>
|
||||
<span>ادیت</span>
|
||||
<BiEdit className="w-4 h-4" />
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* کارت موبایل */}
|
||||
<div className="lg:hidden mt-6 space-y-4">
|
||||
|
|
@ -181,29 +164,29 @@ const CafeManagement = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
to={`/edit-cafe/${cafe._id}`}
|
||||
className="flex justify-center items-center gap-2 w-full border-2 border-[#BB8F70] py-2 rounded-full text-sm font-medium text-text1 hover:bg-button1 hover:border-button1 transition-all duration-300"
|
||||
>
|
||||
<span className="">ادیت کافه</span>
|
||||
<BiEdit className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
<Link
|
||||
to={`/edit-cafe/${cafe._id}`}
|
||||
className="flex justify-center items-center gap-2 w-full border-2 border-[#BB8F70] py-2 rounded-full text-sm font-medium text-text1 hover:bg-button1 hover:border-button1 transition-all duration-300"
|
||||
>
|
||||
<span className="">ادیت کافه</span>
|
||||
<BiEdit className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<section dir="rtl" className="w-full pt-24 max-w-full overflow-x-hidden">
|
||||
{/* بخش دکمه اضافه کردن */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<button className="flex items-center justify-center gap-3 px-6 py-3 bg-button1 text-white rounded-3xl text-sm lg:text-base font-medium hover:bg-hover2 transition-all duration-300 cursor-pointer">
|
||||
<span>افزودن شعبه جدید</span>
|
||||
<img src={Vector9} alt="افزودن" className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
return (
|
||||
<section dir="rtl" className="w-full pt-24 max-w-full overflow-x-hidden">
|
||||
{/* بخش دکمه اضافه کردن */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<button className="flex items-center justify-center gap-3 px-6 py-3 bg-button1 text-white rounded-3xl text-sm lg:text-base font-medium hover:bg-hover2 transition-all duration-300 cursor-pointer">
|
||||
<span>افزودن شعبه جدید</span>
|
||||
<img src={Vector9} alt="افزودن" className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* عنوان */}
|
||||
<h1 className="text-[#402E32] font-bold text-lg lg:text-xl mb-6">
|
||||
|
|
|
|||
|
|
@ -1,58 +1,106 @@
|
|||
import React from "react";
|
||||
import VisitorsChart from "./components/viewstats";
|
||||
import CafePopularity from "./components/popular";
|
||||
import CafeVisitPie from "./components/mostView";
|
||||
import { RiArrowLeftSLine } from "react-icons/ri";
|
||||
import { RiArrowDownSLine } from "react-icons/ri";
|
||||
import { useState } from "react";
|
||||
|
||||
|
||||
export default function Stats() {
|
||||
const [dropDownOpen, setDropdownOpen] = useState(false);
|
||||
return (
|
||||
<section dir="rtl" className="w-full h-full flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-2 border-2 border-border rounded-2xl p-6 md:p-8">
|
||||
<div className="flex gap-5">
|
||||
<h4 className="font-bold text-md">آمار بازدید کننده ها</h4>
|
||||
<button className="ps-5 pe-10 bg-hover text-text1 rounded-lg text-sm lg:text-base font-medium hover:bg-hover2 transition-all duration-300 cursor-pointer">
|
||||
آبان
|
||||
</button>
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setDropdownOpen(prev => !prev)}
|
||||
className=" flex gap-2 justify-between items-center py-1 pe-5 ps-3 w-40 bg-hover text-text1 rounded-lg text-sm lg:text-base font-medium hover:bg-hover2 cursor-pointer">
|
||||
<span>این هفته</span>
|
||||
<RiArrowDownSLine size={20} className={`${dropDownOpen ? 'rotate-180' : ''} transition-all duration-200`} />
|
||||
</button>
|
||||
{dropDownOpen && (
|
||||
<div className="absolute mt-2 bg-background text-text1 hover:text-text1 border-2 border-border rounded-lg shadow-lg w-40 z-10">
|
||||
<ul className="flex flex-col">
|
||||
<li className="px-4 py-2 hover:bg-hover2 cursor-pointer">امروز</li>
|
||||
<li className="px-4 py-2 hover:bg-hover2 cursor-pointer">این هفته</li>
|
||||
<li className="px-4 py-2 hover:bg-hover2 cursor-pointer">این ماه</li>
|
||||
<li className="px-4 py-2 hover:bg-hover2 cursor-pointer">این سال</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="self-end">
|
||||
مجموع فروش: 0 تومان
|
||||
<div className="flex flex-col lg:flex-row gap-2">
|
||||
<div className="self-end lg:pb-10 lg:me-10 flex lg:flex-col gap-2 justify-center items-start">
|
||||
<div className="flex gap-2 justify-center items-center">
|
||||
<span className="w-4 h-4 bg-red-500 rounded-sm" />
|
||||
<span>راهنما</span>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-center items-center">
|
||||
<span className="w-4 h-4 bg-blue-500 rounded-sm" />
|
||||
<span>راهنما</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<VisitorsChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-5 rounded-2xl">
|
||||
<div className="flex flex-col lg:flex-row gap-5 rounded-2xl">
|
||||
|
||||
<div className="flex flex-col w-1/2 gap-2 border-2 border-border rounded-2xl p-6 md:p-8">
|
||||
<div className="flex gap-5">
|
||||
<div className="flex flex-col w-full lg:w-1/2 gap-2 border-2 border-border rounded-2xl p-6 md:p-8">
|
||||
<div className="flex justify-between gap-5">
|
||||
<h4 className="font-bold text-md">آمار بازدید کننده ها</h4>
|
||||
<button className="ps-5 pe-10 bg-hover text-text1 rounded-lg text-sm lg:text-base font-medium hover:bg-hover2 transition-all duration-300 cursor-pointer">
|
||||
آبان
|
||||
</button>
|
||||
<span className="flex gap-2 justify-center items-center px-2 text-text1 rounded-lg text-sm lg:text-base font-medium transition-all duration-300 cursor-pointer">
|
||||
<span>همه</span>
|
||||
<RiArrowLeftSLine />
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="self-end">
|
||||
مجموع فروش: 0 تومان
|
||||
<div className="flex flex-col lg:flex-row gap-2">
|
||||
<div className="self-end lg:pb-10 lg:me-10 flex lg:flex-col gap-2 justify-center items-start">
|
||||
<div className="flex gap-2 justify-center items-center">
|
||||
<span className="w-4 h-4 bg-red-500 rounded-sm" />
|
||||
<span>راهنما</span>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-center items-center">
|
||||
<span className="w-4 h-4 bg-blue-500 rounded-sm" />
|
||||
<span>راهنما</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<VisitorsChart />
|
||||
<CafeVisitPie />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex flex-col gap-2 w-1/2 border-2 border-border rounded-2xl p-6 md:p-8">
|
||||
<div className="flex gap-5">
|
||||
<div className="flex flex-col gap-2 w-full lg:w-1/2 border-2 border-border rounded-2xl p-6 md:p-8">
|
||||
<div className="flex justify-between gap-5">
|
||||
<h4 className="font-bold text-md">آمار بازدید کننده ها</h4>
|
||||
<button className="ps-5 pe-10 bg-hover text-text1 rounded-lg text-sm lg:text-base font-medium hover:bg-hover2 transition-all duration-300 cursor-pointer">
|
||||
آبان
|
||||
</button>
|
||||
<span className="flex gap-2 justify-center items-center px-2 text-text1 rounded-lg text-sm lg:text-base font-medium transition-all duration-300 cursor-pointer">
|
||||
<span>همه</span>
|
||||
<RiArrowLeftSLine />
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="self-end">
|
||||
مجموع فروش: 0 تومان
|
||||
<div className="flex flex-col lg:flex-row gap-2">
|
||||
<div className="self-end lg:pb-10 lg:me-10 flex lg:flex-col gap-2 justify-center items-start">
|
||||
<div className="flex gap-2 justify-center items-center">
|
||||
<span className="w-4 h-4 bg-red-500 rounded-sm" />
|
||||
<span>راهنما</span>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-center items-center">
|
||||
<span className="w-4 h-4 bg-blue-500 rounded-sm" />
|
||||
<span>راهنما</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<VisitorsChart />
|
||||
<CafePopularity />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
|
||||
|
||||
import {
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
} from "recharts";
|
||||
|
||||
const data = [
|
||||
{ name: "دان", value: 48, color: "#b52424" },
|
||||
{ name: "وی", value: 38, color: "#C0BCBC" },
|
||||
{ name: "آنی", value: 19, color: "#7f7376" },
|
||||
];
|
||||
|
||||
export default function CafeVisitPie() {
|
||||
return (
|
||||
<div dir="ltr" className="w-full h-62 p-6 pb-0 pl-0">
|
||||
{/* <p className="text-sm font-medium mb-3 text-right">پربازدیدترین کافهها</p> */}
|
||||
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
background: "var(--bg-primary)",
|
||||
border: "1px solid var(--border-color)",
|
||||
color: "var(--text-primary)",
|
||||
}}
|
||||
/>
|
||||
<Pie
|
||||
data={data}
|
||||
dataKey="value"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
// innerRadius={50}
|
||||
outerRadius={80}
|
||||
label={({ value }) => `${value}%`}
|
||||
>
|
||||
{data.map((item, i) => (
|
||||
<Cell key={i} fill={item.color} />
|
||||
))}
|
||||
</Pie>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
Cell,
|
||||
} from "recharts";
|
||||
|
||||
const data = [
|
||||
{ name: "وی", value: 120 },
|
||||
{ name: "پل", value: 90 },
|
||||
{ name: "دولت", value: 60 },
|
||||
{ name: "و", value: 180 },
|
||||
{ name: "تریح", value: 100 },
|
||||
{ name: "دان", value: 110 },
|
||||
];
|
||||
|
||||
const colors = ["#efecec", "#efecec", "#efecec", "#7f7376", "#efecec", "#efecec"];
|
||||
|
||||
export default function CafePopularity() {
|
||||
return (
|
||||
<div className="w-full h-72 p-6">
|
||||
{/* <p className="text-sm font-medium mb-3 text-right">محبوبترین کافهها</p> */}
|
||||
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={data}>
|
||||
<XAxis dataKey="name" />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "var(--color-text1)",
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="value"
|
||||
radius={[20, 20, 20, 20]}
|
||||
cursor="default"
|
||||
>
|
||||
{data.map((entry, i) => (
|
||||
<Cell key={i} fill={colors[i]} />
|
||||
))}
|
||||
</Bar>
|
||||
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,65 +1,88 @@
|
|||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
ComposedChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
Area
|
||||
} from "recharts";
|
||||
|
||||
const data = [
|
||||
{ name: "هفته اول", a: 200000, b: 250000 },
|
||||
{ name: "هفته دوم", a: 450000, b: 380000 },
|
||||
{ name: "هفته سوم", a: 350000, b: 600000 },
|
||||
{ name: "هفته چهارم", a: 150000, b: 500000 },
|
||||
{ name: "هفته پنجم", a: 500000, b: 700000 },
|
||||
{ name: "هفته ششم", a: 600000, b: 800000 },
|
||||
{ name: "هفته هفتم", a: 700000, b: 900000 },
|
||||
{ name: "هفته هشتم", a: 800000, b: 950000 },
|
||||
{ name: "هفته نهم", a: 900000, b: 1000000 },
|
||||
{ name: "هفته اول", a: 200000, b: 250000 },
|
||||
{ name: "هفته دوم", a: 450000, b: 380000 },
|
||||
{ name: "هفته سوم", a: 350000, b: 600000 },
|
||||
{ name: "هفته چهارم", a: 150000, b: 500000 },
|
||||
{ name: "هفته پنجم", a: 500000, b: 700000 },
|
||||
{ name: "هفته ششم", a: 600000, b: 800000 },
|
||||
{ name: "هفته هفتم", a: 700000, b: 900000 },
|
||||
{ name: "هفته هشتم", a: 800000, b: 950000 },
|
||||
{ name: "هفته نهم", a: 900000, b: 1000000 },
|
||||
];
|
||||
|
||||
export default function VisitorsChart() {
|
||||
return (
|
||||
<div dir="ltr" className="w-full h-72 rounded-xl bg-white shadow-sm p-6">
|
||||
<p className="text-sm font-medium mb-3 text-right">آمار بازدید کنندهها</p>
|
||||
return (
|
||||
<div dir="ltr" className="w-full h-96 p-6 pb-0 pl-0">
|
||||
<ResponsiveContainer width="100%" height="90%">
|
||||
<ComposedChart data={data}>
|
||||
|
||||
<ResponsiveContainer width="100%" height="90%">
|
||||
<LineChart data={data}>
|
||||
{/* گرادیانتها */}
|
||||
<defs>
|
||||
<linearGradient id="gradA" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#C2574E" stopOpacity={0.4} />
|
||||
<stop offset="100%" stopColor="#C2574E" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
<defs>
|
||||
<linearGradient id="gradA" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#b52424" stopOpacity={0.4} />
|
||||
<stop offset="100%" stopColor="#b52424" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="gradB" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#6B432B" stopOpacity={0.4} />
|
||||
<stop offset="100%" stopColor="#6B432B" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<linearGradient id="gradB" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#7f7376" stopOpacity={0.4} />
|
||||
<stop offset="100%" stopColor="#7f7376" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<XAxis dataKey="name" tick={{ fontSize: 12 }} />
|
||||
<YAxis tick={{ fontSize: 12 }} />
|
||||
<Tooltip />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="a"
|
||||
stroke="#C2574E"
|
||||
strokeWidth={3}
|
||||
fill="url(#gradA)"
|
||||
dot={false}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="b"
|
||||
stroke="#6B432B"
|
||||
strokeWidth={3}
|
||||
fill="url(#gradB)"
|
||||
dot={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="a"
|
||||
stroke="none"
|
||||
fill="url(#gradA)"
|
||||
fillOpacity={1}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="b"
|
||||
stroke="none"
|
||||
fill="url(#gradB)"
|
||||
fillOpacity={1}
|
||||
/>
|
||||
|
||||
<XAxis dataKey="name" tick={{ fontSize: 12 }} />
|
||||
<YAxis tick={{ fontSize: 12 }} />
|
||||
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
background: "var(--bg-primary)",
|
||||
border: "1px solid var(--border-color)",
|
||||
color: "var(--text-primary)",
|
||||
}}
|
||||
/>
|
||||
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="a"
|
||||
stroke="#b52424"
|
||||
strokeWidth={3}
|
||||
fill="url(#gradA)"
|
||||
dot={false}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="b"
|
||||
stroke="#7f7376"
|
||||
strokeWidth={3}
|
||||
fill="url(#gradB)"
|
||||
dot={false}
|
||||
/>
|
||||
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,6 +72,10 @@ select:-webkit-autofill {
|
|||
-webkit-text-fill-color: inherit !important;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: var(--color-primary);
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
|
|
@ -104,7 +108,7 @@ div:hover
|
|||
}
|
||||
|
||||
.dark div:hover {
|
||||
color: var(--color-text2) !important;
|
||||
color: var(--color-text1);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -179,4 +183,30 @@ svg {
|
|||
/* بکگراند انتخاب */
|
||||
color: var(--color-text1);
|
||||
/* رنگ متن انتخاب */
|
||||
}
|
||||
}
|
||||
|
||||
/* جلوگیری کامل از رینگ / بوردر فوکوس در Recharts */
|
||||
.recharts-wrapper:focus,
|
||||
.recharts-wrapper:focus-visible,
|
||||
.recharts-surface:focus,
|
||||
.recharts-surface:focus-visible,
|
||||
.recharts-responsive-container:focus,
|
||||
.recharts-responsive-container:focus-visible,
|
||||
.recharts-layer:focus,
|
||||
.recharts-layer:focus-visible,
|
||||
svg:focus,
|
||||
svg:focus-visible,
|
||||
g:focus,
|
||||
g:focus-visible {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* برای اطمینان بیشتر روی کل پروژه */
|
||||
*:focus,
|
||||
*:focus-visible {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue