revenuechart
This commit is contained in:
hamid zarghami
@@ -1,224 +1,192 @@
|
|||||||
import { ArrowUp, DocumentDownload, ArrowDown } from 'iconsax-react'
|
import Button from "@/components/Button";
|
||||||
import { type FC, useState, useMemo } from 'react'
|
import DatePicker from "@/components/DatePicker";
|
||||||
import {
|
import PageLoading from "@/components/PageLoading";
|
||||||
Area,
|
import { formatPrice } from "@/helpers/func";
|
||||||
AreaChart,
|
import { ArrowDown, ArrowUp, DocumentDownload } from "iconsax-react";
|
||||||
CartesianGrid,
|
import moment from "moment-jalaali";
|
||||||
ResponsiveContainer,
|
import { type FC, useMemo, useState } from "react";
|
||||||
Tooltip,
|
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
||||||
XAxis,
|
import { useGetPaymentsChart } from "../hooks/useStatsData";
|
||||||
YAxis
|
|
||||||
} from 'recharts'
|
|
||||||
import DatePicker from '@/components/DatePicker'
|
|
||||||
import Button from '@/components/Button'
|
|
||||||
import { useGetPaymentsChart } from '../hooks/useStatsData'
|
|
||||||
import { formatPrice } from '@/helpers/func'
|
|
||||||
import PageLoading from '@/components/PageLoading'
|
|
||||||
import moment from 'moment-jalaali'
|
|
||||||
|
|
||||||
const RevenueChart: FC = () => {
|
const RevenueChart: FC = () => {
|
||||||
const [selectedTab] = useState<
|
const [selectedTab] = useState<"daily" | "monthly" | "yearly">("monthly");
|
||||||
'daily' | 'monthly' | 'yearly'
|
const [startDate, setStartDate] = useState<string>("");
|
||||||
>('monthly')
|
const [endDate, setEndDate] = useState<string>("");
|
||||||
const [startDate, setStartDate] = useState<string>('')
|
|
||||||
const [endDate, setEndDate] = useState<string>('')
|
|
||||||
|
|
||||||
const convertToPersian = (gregorianDate: string | null | undefined): string | undefined => {
|
const convertToPersian = (gregorianDate: string | null | undefined): string | undefined => {
|
||||||
if (!gregorianDate) return undefined
|
if (!gregorianDate) return undefined;
|
||||||
const persianDate = moment(gregorianDate, 'YYYY-MM-DD').format('jYYYY-jMM-jDD')
|
const persianDate = moment(gregorianDate, "YYYY-MM-DD").format("jYYYY-jMM-jDD");
|
||||||
return persianDate
|
return persianDate;
|
||||||
|
};
|
||||||
|
|
||||||
|
const apiParams = useMemo(() => {
|
||||||
|
const params: {
|
||||||
|
period?: "daily" | "monthly" | "yearly";
|
||||||
|
startDate?: string;
|
||||||
|
endDate?: string;
|
||||||
|
} = {};
|
||||||
|
// فقط اگر تاریخ انتخاب شده باشد ارسال شود
|
||||||
|
if (startDate && startDate.trim() !== "") params.startDate = startDate;
|
||||||
|
if (endDate && endDate.trim() !== "") params.endDate = endDate;
|
||||||
|
return params;
|
||||||
|
}, [startDate, endDate]);
|
||||||
|
|
||||||
|
const { data: paymentsChartData, isLoading } = useGetPaymentsChart(apiParams);
|
||||||
|
|
||||||
|
const formatDateLabel = (dateString: string, period: "daily" | "monthly" | "yearly"): string => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
const options: Intl.DateTimeFormatOptions = {
|
||||||
|
year: "numeric",
|
||||||
|
};
|
||||||
|
if (period === "monthly") {
|
||||||
|
options.month = "long";
|
||||||
|
} else if (period === "daily") {
|
||||||
|
options.month = "short";
|
||||||
|
options.day = "numeric";
|
||||||
|
}
|
||||||
|
const persianDate = new Intl.DateTimeFormat("fa-IR", options).format(date);
|
||||||
|
return persianDate;
|
||||||
|
};
|
||||||
|
|
||||||
|
const chartData = useMemo(() => {
|
||||||
|
if (!paymentsChartData?.data) return [];
|
||||||
|
return paymentsChartData.data.map((item) => ({
|
||||||
|
month: formatDateLabel(item.date, selectedTab),
|
||||||
|
online: item.online,
|
||||||
|
cash: item.cash,
|
||||||
|
}));
|
||||||
|
}, [paymentsChartData?.data, selectedTab]);
|
||||||
|
|
||||||
|
const xAxisInterval = useMemo(() => {
|
||||||
|
const dataLength = chartData.length;
|
||||||
|
if (dataLength <= 7) return 0;
|
||||||
|
if (dataLength <= 15) return 1;
|
||||||
|
if (dataLength <= 30) return 2;
|
||||||
|
if (dataLength <= 60) return 4;
|
||||||
|
return Math.floor(dataLength / 12);
|
||||||
|
}, [chartData.length]);
|
||||||
|
|
||||||
|
const totalRevenue = useMemo(() => {
|
||||||
|
return chartData.reduce((sum, item) => sum + item.online + item.cash, 0);
|
||||||
|
}, [chartData]);
|
||||||
|
|
||||||
|
const revenueChange = useMemo(() => {
|
||||||
|
if (chartData.length < 2) return null;
|
||||||
|
const currentPeriod = chartData[chartData.length - 1];
|
||||||
|
const previousPeriod = chartData[chartData.length - 2];
|
||||||
|
const currentTotal = currentPeriod.online + currentPeriod.cash;
|
||||||
|
const previousTotal = previousPeriod.online + previousPeriod.cash;
|
||||||
|
if (previousTotal === 0) return null;
|
||||||
|
const change = ((currentTotal - previousTotal) / previousTotal) * 100;
|
||||||
|
return change;
|
||||||
|
}, [chartData]);
|
||||||
|
|
||||||
|
const formatYAxis = (value: number) => {
|
||||||
|
if (value === 0) return "۰";
|
||||||
|
if (value >= 1000000) {
|
||||||
|
const millions = value / 1000000;
|
||||||
|
const formatted = millions.toFixed(1).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[parseInt(d)]);
|
||||||
|
return `${formatted} میلیون`;
|
||||||
|
}
|
||||||
|
return value.toLocaleString("fa-IR");
|
||||||
|
};
|
||||||
|
|
||||||
|
const CustomTooltip = (props: {
|
||||||
|
active?: boolean;
|
||||||
|
payload?: Array<{
|
||||||
|
dataKey?: string;
|
||||||
|
value?: number;
|
||||||
|
color?: string;
|
||||||
|
payload?: {
|
||||||
|
cash?: number;
|
||||||
|
online?: number;
|
||||||
|
month?: string;
|
||||||
|
};
|
||||||
|
}>;
|
||||||
|
label?: string;
|
||||||
|
}) => {
|
||||||
|
const { active, payload, label } = props;
|
||||||
|
if (!active || !payload || payload.length === 0 || !label) {
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const apiParams = useMemo(() => {
|
// استفاده از paymentsChartData.data مستقیم برای دریافت دادههای واقعی
|
||||||
const params: {
|
// پیدا کردن آخرین آیتمی که label آن با formatDateLabel match میکند
|
||||||
period?: 'daily' | 'monthly' | 'yearly';
|
let dataPoint: { cash: number; online: number } | null = null;
|
||||||
startDate?: string;
|
|
||||||
endDate?: string;
|
|
||||||
} = {}
|
|
||||||
// فقط اگر تاریخ انتخاب شده باشد ارسال شود
|
|
||||||
if (startDate && startDate.trim() !== '') params.startDate = startDate
|
|
||||||
if (endDate && endDate.trim() !== '') params.endDate = endDate
|
|
||||||
return params
|
|
||||||
}, [startDate, endDate])
|
|
||||||
|
|
||||||
const { data: paymentsChartData, isLoading } = useGetPaymentsChart(apiParams)
|
if (paymentsChartData?.data) {
|
||||||
|
// پیدا کردن همه آیتمهای match شده و استفاده از آخرین
|
||||||
const formatDateLabel = (dateString: string, period: 'daily' | 'monthly' | 'yearly'): string => {
|
const matchingItems: Array<{ cash: number; online: number }> = [];
|
||||||
const date = new Date(dateString)
|
for (const item of paymentsChartData.data) {
|
||||||
const options: Intl.DateTimeFormatOptions = {
|
const formattedLabel = formatDateLabel(item.date, selectedTab);
|
||||||
year: 'numeric',
|
if (formattedLabel === label) {
|
||||||
|
matchingItems.push({ cash: item.cash, online: item.online });
|
||||||
}
|
}
|
||||||
if (period === 'monthly') {
|
}
|
||||||
options.month = 'long'
|
if (matchingItems.length > 0) {
|
||||||
} else if (period === 'daily') {
|
dataPoint = matchingItems[matchingItems.length - 1];
|
||||||
options.month = 'short'
|
}
|
||||||
options.day = 'numeric'
|
|
||||||
}
|
|
||||||
const persianDate = new Intl.DateTimeFormat('fa-IR', options).format(date)
|
|
||||||
return persianDate
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const chartData = useMemo(() => {
|
// اگر پیدا نکردیم، از chartData استفاده میکنیم
|
||||||
if (!paymentsChartData?.data) return []
|
if (!dataPoint) {
|
||||||
return paymentsChartData.data.map((item) => ({
|
const matchingItems = chartData.filter((item) => item.month === label);
|
||||||
month: formatDateLabel(item.date, selectedTab),
|
if (matchingItems.length > 0) {
|
||||||
online: item.online,
|
dataPoint = matchingItems[matchingItems.length - 1];
|
||||||
cash: item.cash,
|
}
|
||||||
}))
|
|
||||||
}, [paymentsChartData?.data, selectedTab])
|
|
||||||
|
|
||||||
const xAxisInterval = useMemo(() => {
|
|
||||||
const dataLength = chartData.length
|
|
||||||
if (dataLength <= 7) return 0
|
|
||||||
if (dataLength <= 15) return 1
|
|
||||||
if (dataLength <= 30) return 2
|
|
||||||
if (dataLength <= 60) return 4
|
|
||||||
return Math.floor(dataLength / 12)
|
|
||||||
}, [chartData.length])
|
|
||||||
|
|
||||||
const totalRevenue = useMemo(() => {
|
|
||||||
return chartData.reduce((sum, item) => sum + item.online + item.cash, 0)
|
|
||||||
}, [chartData])
|
|
||||||
|
|
||||||
const revenueChange = useMemo(() => {
|
|
||||||
if (chartData.length < 2) return null
|
|
||||||
const currentPeriod = chartData[chartData.length - 1]
|
|
||||||
const previousPeriod = chartData[chartData.length - 2]
|
|
||||||
const currentTotal = currentPeriod.online + currentPeriod.cash
|
|
||||||
const previousTotal = previousPeriod.online + previousPeriod.cash
|
|
||||||
if (previousTotal === 0) return null
|
|
||||||
const change = ((currentTotal - previousTotal) / previousTotal) * 100
|
|
||||||
return change
|
|
||||||
}, [chartData])
|
|
||||||
|
|
||||||
const formatYAxis = (value: number) => {
|
|
||||||
if (value === 0) return '۰'
|
|
||||||
if (value >= 1000000) {
|
|
||||||
const millions = value / 1000000
|
|
||||||
const formatted = millions
|
|
||||||
.toFixed(1)
|
|
||||||
.replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[parseInt(d)])
|
|
||||||
return `${formatted} میلیون`
|
|
||||||
}
|
|
||||||
return value.toLocaleString('fa-IR')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const CustomTooltip = (props: {
|
if (!dataPoint) {
|
||||||
active?: boolean
|
return null;
|
||||||
payload?: Array<{
|
|
||||||
dataKey?: string
|
|
||||||
value?: number
|
|
||||||
color?: string
|
|
||||||
payload?: {
|
|
||||||
cash?: number
|
|
||||||
online?: number
|
|
||||||
month?: string
|
|
||||||
}
|
|
||||||
}>
|
|
||||||
label?: string
|
|
||||||
}) => {
|
|
||||||
const { active, payload, label } = props
|
|
||||||
if (!active || !payload || payload.length === 0 || !label) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
// استفاده از paymentsChartData.data مستقیم برای دریافت دادههای واقعی
|
|
||||||
// پیدا کردن آخرین آیتمی که label آن با formatDateLabel match میکند
|
|
||||||
let dataPoint: { cash: number; online: number } | null = null
|
|
||||||
|
|
||||||
if (paymentsChartData?.data) {
|
|
||||||
// پیدا کردن همه آیتمهای match شده و استفاده از آخرین
|
|
||||||
const matchingItems: Array<{ cash: number; online: number }> = []
|
|
||||||
for (const item of paymentsChartData.data) {
|
|
||||||
const formattedLabel = formatDateLabel(item.date, selectedTab)
|
|
||||||
if (formattedLabel === label) {
|
|
||||||
matchingItems.push({ cash: item.cash, online: item.online })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (matchingItems.length > 0) {
|
|
||||||
dataPoint = matchingItems[matchingItems.length - 1]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// اگر پیدا نکردیم، از chartData استفاده میکنیم
|
|
||||||
if (!dataPoint) {
|
|
||||||
const matchingItems = chartData.filter((item) => item.month === label)
|
|
||||||
if (matchingItems.length > 0) {
|
|
||||||
dataPoint = matchingItems[matchingItems.length - 1]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!dataPoint) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const cashValue = dataPoint.cash
|
|
||||||
const onlineValue = dataPoint.online
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='bg-white p-3 rounded-xl shadow-lg border border-gray-200'>
|
|
||||||
<p className='text-sm font-medium text-gray-900 mb-2'>{label}</p>
|
|
||||||
<div className='space-y-1'>
|
|
||||||
<div className='flex items-center gap-2'>
|
|
||||||
<div className='w-2 h-2 rounded-full bg-[#B0BAC9]' />
|
|
||||||
<span className='text-xs text-gray-600'>پرداخت نقدی:</span>
|
|
||||||
<span className='text-xs font-medium text-gray-900'>
|
|
||||||
{cashValue.toLocaleString('fa-IR')} تومان
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className='flex items-center gap-2'>
|
|
||||||
<div className='w-2 h-2 rounded-full bg-[#6B7FED]' />
|
|
||||||
<span className='text-xs text-gray-600'>پرداخت آنلاین:</span>
|
|
||||||
<span className='text-xs font-medium text-gray-900'>
|
|
||||||
{onlineValue.toLocaleString('fa-IR')} تومان
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className='pt-1 mt-1 border-t border-gray-100'>
|
|
||||||
<span className='text-xs text-gray-600'>جمع:</span>
|
|
||||||
<span className='text-xs font-medium text-gray-900 mr-2'>
|
|
||||||
{(cashValue + onlineValue).toLocaleString('fa-IR')} تومان
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const cashValue = dataPoint.cash;
|
||||||
|
const onlineValue = dataPoint.online;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='bg-white rounded-3xl p-6 shadow-sm h-full overflow-visible'>
|
<div className="bg-white p-3 rounded-xl shadow-lg border border-gray-200">
|
||||||
{/* Header */}
|
<p className="text-sm font-medium text-gray-900 mb-2">{label}</p>
|
||||||
<div className='flex items-start justify-between my-5'>
|
<div className="space-y-1">
|
||||||
<h3 className='text-base font-bold'>مجموع درآمد</h3>
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-2 h-2 rounded-full bg-[#B0BAC9]" />
|
||||||
|
<span className="text-xs text-gray-600">پرداخت نقدی:</span>
|
||||||
|
<span className="text-xs font-medium text-gray-900">{cashValue.toLocaleString("fa-IR")} تومان</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-2 h-2 rounded-full bg-[#6B7FED]" />
|
||||||
|
<span className="text-xs text-gray-600">پرداخت آنلاین:</span>
|
||||||
|
<span className="text-xs font-medium text-gray-900">{onlineValue.toLocaleString("fa-IR")} تومان</span>
|
||||||
|
</div>
|
||||||
|
<div className="pt-1 mt-1 border-t border-gray-100">
|
||||||
|
<span className="text-xs text-gray-600">جمع:</span>
|
||||||
|
<span className="text-xs font-medium text-gray-900 mr-2">{(cashValue + onlineValue).toLocaleString("fa-IR")} تومان</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-3xl p-6 shadow-sm h-full overflow-visible">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start justify-between my-5">
|
||||||
|
<h3 className="text-base font-bold">مجموع درآمد</h3>
|
||||||
|
{formatPrice(totalRevenue)}
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
<div className="flex items-end gap-2">
|
||||||
|
<DatePicker label="تاریخ شروع" placeholder="انتخاب تاریخ شروع" defaulValue={convertToPersian(startDate)} onChange={setStartDate} />
|
||||||
|
<DatePicker label="تاریخ پایان" placeholder="انتخاب تاریخ پایان" defaulValue={convertToPersian(endDate)} onChange={setEndDate} />
|
||||||
|
<Button className="">
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<DocumentDownload size={18} color="#fff" />
|
||||||
|
<span>گرفتن گزارش</span>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className='flex items-end gap-2'>
|
{/* Tabs */}
|
||||||
<DatePicker
|
{/* <div className='flex items-center gap-2 mt-5 mb-5'>
|
||||||
label='تاریخ شروع'
|
|
||||||
placeholder='انتخاب تاریخ شروع'
|
|
||||||
defaulValue={convertToPersian(startDate)}
|
|
||||||
onChange={setStartDate}
|
|
||||||
/>
|
|
||||||
<DatePicker
|
|
||||||
label='تاریخ پایان'
|
|
||||||
placeholder='انتخاب تاریخ پایان'
|
|
||||||
defaulValue={convertToPersian(endDate)}
|
|
||||||
onChange={setEndDate}
|
|
||||||
/>
|
|
||||||
<Button className=''>
|
|
||||||
<div className='flex gap-3'>
|
|
||||||
<DocumentDownload
|
|
||||||
size={18}
|
|
||||||
color='#fff'
|
|
||||||
/>
|
|
||||||
<span>گرفتن گزارش</span>
|
|
||||||
</div>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Tabs */}
|
|
||||||
{/* <div className='flex items-center gap-2 mt-5 mb-5'>
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setSelectedTab('yearly')}
|
onClick={() => setSelectedTab('yearly')}
|
||||||
className={`px-4 py-1.5 rounded-full text-xs transition-all border ${selectedTab === 'yearly'
|
className={`px-4 py-1.5 rounded-full text-xs transition-all border ${selectedTab === 'yearly'
|
||||||
@@ -248,165 +216,74 @@ const RevenueChart: FC = () => {
|
|||||||
</button>
|
</button>
|
||||||
</div> */}
|
</div> */}
|
||||||
|
|
||||||
{/* مبلغ و درصد */}
|
{/* مبلغ و درصد */}
|
||||||
|
|
||||||
<div>
|
<div className="flex items-center justify-between mb-5 mt-5">
|
||||||
<span className='text-sm text-gray-500'>مجموع درآمد</span>
|
<div className="flex items-center gap-3">
|
||||||
|
{revenueChange !== null && (
|
||||||
|
<div className={`flex items-center gap-1 px-2 py-0.5 rounded-full ${revenueChange >= 0 ? "bg-green-50" : "bg-red-50"}`}>
|
||||||
|
{revenueChange >= 0 ? <ArrowUp size={12} color="#10b981" /> : <ArrowDown size={12} color="#ef4444" />}
|
||||||
|
<span className={`text-xs font-medium ${revenueChange >= 0 ? "text-green-600" : "text-red-600"}`}>{Math.abs(revenueChange).toFixed(1)}%</span>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex items-center justify-between mb-5'>
|
)}
|
||||||
<div className='flex items-center gap-3'>
|
|
||||||
<p className='text-2xl font-bold'>
|
|
||||||
{formatPrice(totalRevenue)}
|
|
||||||
</p>
|
|
||||||
{revenueChange !== null && (
|
|
||||||
<div
|
|
||||||
className={`flex items-center gap-1 px-2 py-0.5 rounded-full ${revenueChange >= 0
|
|
||||||
? 'bg-green-50'
|
|
||||||
: 'bg-red-50'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{revenueChange >= 0 ? (
|
|
||||||
<ArrowUp
|
|
||||||
size={12}
|
|
||||||
color='#10b981'
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<ArrowDown
|
|
||||||
size={12}
|
|
||||||
color='#ef4444'
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<span
|
|
||||||
className={`text-xs font-medium ${revenueChange >= 0
|
|
||||||
? 'text-green-600'
|
|
||||||
: 'text-red-600'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{Math.abs(revenueChange).toFixed(1)}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='flex items-center gap-3'>
|
|
||||||
<div className='flex items-center gap-2'>
|
|
||||||
<div className='w-2 h-2 rounded-full bg-[#6B7FED]' />
|
|
||||||
<span className='text-xs text-gray-500'>
|
|
||||||
پرداخت آنلاین
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className='flex items-center gap-2'>
|
|
||||||
<div className='w-2 h-2 rounded-full bg-[#B0BAC9]' />
|
|
||||||
<span className='text-xs text-gray-500'>
|
|
||||||
پرداخت نقدی
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* نمودار */}
|
|
||||||
{isLoading ? (
|
|
||||||
<div className='w-full h-[400px] min-h-[400px] flex items-center justify-center'>
|
|
||||||
<PageLoading />
|
|
||||||
</div>
|
|
||||||
) : chartData.length === 0 ? (
|
|
||||||
<div className='w-full h-[400px] min-h-[400px] flex items-center justify-center text-gray-500'>
|
|
||||||
دادهای برای نمایش وجود ندارد
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className='w-full h-[400px] min-h-[400px]'>
|
|
||||||
<ResponsiveContainer width='100%' height='100%'>
|
|
||||||
<AreaChart
|
|
||||||
data={chartData}
|
|
||||||
margin={{ top: 10, right: 10, left: 10, bottom: 40 }}
|
|
||||||
>
|
|
||||||
<defs>
|
|
||||||
<linearGradient
|
|
||||||
id='colorOnline'
|
|
||||||
x1='0'
|
|
||||||
y1='0'
|
|
||||||
x2='0'
|
|
||||||
y2='1'
|
|
||||||
>
|
|
||||||
<stop
|
|
||||||
offset='5%'
|
|
||||||
stopColor='#6B7FED'
|
|
||||||
stopOpacity={0.3}
|
|
||||||
/>
|
|
||||||
<stop
|
|
||||||
offset='95%'
|
|
||||||
stopColor='#6B7FED'
|
|
||||||
stopOpacity={0}
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id='colorCash'
|
|
||||||
x1='0'
|
|
||||||
y1='0'
|
|
||||||
x2='0'
|
|
||||||
y2='1'
|
|
||||||
>
|
|
||||||
<stop
|
|
||||||
offset='5%'
|
|
||||||
stopColor='#B0BAC9'
|
|
||||||
stopOpacity={0.2}
|
|
||||||
/>
|
|
||||||
<stop
|
|
||||||
offset='95%'
|
|
||||||
stopColor='#B0BAC9'
|
|
||||||
stopOpacity={0}
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<CartesianGrid
|
|
||||||
strokeDasharray='0'
|
|
||||||
stroke='#f0f0f0'
|
|
||||||
vertical={false}
|
|
||||||
/>
|
|
||||||
<XAxis
|
|
||||||
dataKey='month'
|
|
||||||
axisLine={false}
|
|
||||||
tickLine={false}
|
|
||||||
tick={{ fill: '#9CA3AF', fontSize: 11 }}
|
|
||||||
reversed
|
|
||||||
interval={xAxisInterval}
|
|
||||||
angle={chartData.length > 15 ? -45 : 0}
|
|
||||||
textAnchor={chartData.length > 15 ? 'end' : 'middle'}
|
|
||||||
height={chartData.length > 15 ? 60 : 40}
|
|
||||||
minTickGap={10}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
orientation='right'
|
|
||||||
axisLine={false}
|
|
||||||
tickLine={false}
|
|
||||||
tick={{ fill: '#9CA3AF', fontSize: 10 }}
|
|
||||||
tickFormatter={formatYAxis}
|
|
||||||
domain={[0, 'dataMax + 2000000']}
|
|
||||||
tickMargin={50}
|
|
||||||
/>
|
|
||||||
<Tooltip content={<CustomTooltip />} />
|
|
||||||
<Area
|
|
||||||
type='natural'
|
|
||||||
dataKey='cash'
|
|
||||||
stroke='#B0BAC9'
|
|
||||||
strokeWidth={2}
|
|
||||||
fillOpacity={1}
|
|
||||||
fill='url(#colorCash)'
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
type='natural'
|
|
||||||
dataKey='online'
|
|
||||||
stroke='#6B7FED'
|
|
||||||
strokeWidth={2}
|
|
||||||
fillOpacity={1}
|
|
||||||
fill='url(#colorOnline)'
|
|
||||||
/>
|
|
||||||
</AreaChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RevenueChart
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-2 h-2 rounded-full bg-[#6B7FED]" />
|
||||||
|
<span className="text-xs text-gray-500">پرداخت آنلاین</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-2 h-2 rounded-full bg-[#B0BAC9]" />
|
||||||
|
<span className="text-xs text-gray-500">پرداخت نقدی</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* نمودار */}
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="w-full h-[400px] min-h-[400px] flex items-center justify-center">
|
||||||
|
<PageLoading />
|
||||||
|
</div>
|
||||||
|
) : chartData.length === 0 ? (
|
||||||
|
<div className="w-full h-[400px] min-h-[400px] flex items-center justify-center text-gray-500">دادهای برای نمایش وجود ندارد</div>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-[400px] min-h-[400px]">
|
||||||
|
<ResponsiveContainer width="100%" height="100%">
|
||||||
|
<AreaChart data={chartData} margin={{ top: 10, right: 10, left: 10, bottom: 40 }}>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="colorOnline" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="5%" stopColor="#6B7FED" stopOpacity={0.3} />
|
||||||
|
<stop offset="95%" stopColor="#6B7FED" stopOpacity={0} />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="colorCash" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="5%" stopColor="#B0BAC9" stopOpacity={0.2} />
|
||||||
|
<stop offset="95%" stopColor="#B0BAC9" stopOpacity={0} />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<CartesianGrid strokeDasharray="0" stroke="#f0f0f0" vertical={false} />
|
||||||
|
<XAxis
|
||||||
|
dataKey="month"
|
||||||
|
axisLine={false}
|
||||||
|
tickLine={false}
|
||||||
|
tick={{ fill: "#9CA3AF", fontSize: 11 }}
|
||||||
|
reversed
|
||||||
|
interval={xAxisInterval}
|
||||||
|
angle={chartData.length > 15 ? -45 : 0}
|
||||||
|
textAnchor={chartData.length > 15 ? "end" : "middle"}
|
||||||
|
height={chartData.length > 15 ? 60 : 40}
|
||||||
|
minTickGap={10}
|
||||||
|
/>
|
||||||
|
<YAxis orientation="right" axisLine={false} tickLine={false} tick={{ fill: "#9CA3AF", fontSize: 10 }} tickFormatter={formatYAxis} domain={[0, "dataMax + 2000000"]} tickMargin={50} />
|
||||||
|
<Tooltip content={<CustomTooltip />} />
|
||||||
|
<Area type="natural" dataKey="cash" stroke="#B0BAC9" strokeWidth={2} fillOpacity={1} fill="url(#colorCash)" />
|
||||||
|
<Area type="natural" dataKey="online" stroke="#6B7FED" strokeWidth={2} fillOpacity={1} fill="url(#colorOnline)" />
|
||||||
|
</AreaChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RevenueChart;
|
||||||
|
|||||||
Reference in New Issue
Block a user