| 1 |
import { Card } from '@/components/ui/card'; |
| 2 |
import { selectDateRangeParams } from '@/features/dateRange/dateRangeSlice'; |
| 3 |
import { useGetRevenueChartQuery } from '@/features/summary/summaryApi'; |
| 4 |
import { cn, fmt, formatXAxisDate } from '@/lib/utils'; |
| 5 |
import { __ } from '@wordpress/i18n'; |
| 6 |
import { useSelector } from 'react-redux'; |
| 7 |
import { |
| 8 |
CartesianGrid, |
| 9 |
Legend, |
| 10 |
Line, |
| 11 |
LineChart, |
| 12 |
ResponsiveContainer, |
| 13 |
Tooltip, |
| 14 |
XAxis, |
| 15 |
YAxis, |
| 16 |
} from 'recharts'; |
| 17 |
import CustomTooltipByRevenueChart from './CustomTooltipByRevenueChart'; |
| 18 |
|
| 19 |
const RevenueChart = ({ className }) => { |
| 20 |
const dateParams = useSelector(selectDateRangeParams); |
| 21 |
const { data: res, isLoading } = useGetRevenueChartQuery(dateParams); |
| 22 |
const data = res?.data ?? []; |
| 23 |
const interval = res?.interval ?? 'day'; |
| 24 |
|
| 25 |
const daysDiff = |
| 26 |
(new Date(dateParams.date_to) - new Date(dateParams.date_from)) / |
| 27 |
(1000 * 60 * 60 * 24); |
| 28 |
const isLongRange = daysDiff > 90; |
| 29 |
|
| 30 |
return ( |
| 31 |
<Card |
| 32 |
className={cn( |
| 33 |
'disco-ring-0 disco-border-2 disco-border-[#e5e7eb] disco-rounded-[10px] disco-p-4 disco-gap-2', |
| 34 |
className |
| 35 |
)} |
| 36 |
> |
| 37 |
<div> |
| 38 |
<h3 className="disco-text-base disco-font-semibold disco-text-[#1f2937]"> |
| 39 |
{__('Revenue over time', 'disco')} |
| 40 |
</h3> |
| 41 |
<p className="disco-text-xs disco-text-[#9ca3af]"> |
| 42 |
{__('Net revenue vs disco', 'disco')} |
| 43 |
</p> |
| 44 |
</div> |
| 45 |
|
| 46 |
{isLoading ? ( |
| 47 |
<div className="disco-h-[280px] disco-animate-pulse disco-rounded-lg disco-bg-[#f3f4f6]" /> |
| 48 |
) : ( |
| 49 |
<ResponsiveContainer width="100%" height={280}> |
| 50 |
<LineChart |
| 51 |
data={data} |
| 52 |
margin={{ top: 8, right: 8, left: -16, bottom: 0 }} |
| 53 |
> |
| 54 |
<CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" /> |
| 55 |
<XAxis |
| 56 |
dataKey="date" |
| 57 |
tick={{ fontSize: 9, fill: '#637381' }} |
| 58 |
tickLine={false} |
| 59 |
axisLine={false} |
| 60 |
tickFormatter={(v) => |
| 61 |
formatXAxisDate(v, isLongRange) |
| 62 |
} |
| 63 |
/> |
| 64 |
<YAxis |
| 65 |
tick={{ fontSize: 9, fill: '#637381' }} |
| 66 |
tickLine={false} |
| 67 |
axisLine={false} |
| 68 |
tickFormatter={(v) => `${fmt(v)}`} |
| 69 |
/> |
| 70 |
<Tooltip |
| 71 |
content={ |
| 72 |
<CustomTooltipByRevenueChart |
| 73 |
interval={interval} |
| 74 |
/> |
| 75 |
} |
| 76 |
/> |
| 77 |
<Legend |
| 78 |
iconType="circle" |
| 79 |
iconSize={8} |
| 80 |
wrapperStyle={{ |
| 81 |
fontSize: '11px', |
| 82 |
color: '#6b7280', |
| 83 |
}} |
| 84 |
formatter={(value) => |
| 85 |
value === 'net_sales' |
| 86 |
? 'Net Sale' |
| 87 |
: 'Discount Sale' |
| 88 |
} |
| 89 |
/> |
| 90 |
<Line |
| 91 |
type="monotone" |
| 92 |
dataKey="net_sales" |
| 93 |
stroke="#47cd89" |
| 94 |
strokeWidth={2} |
| 95 |
dot={false} |
| 96 |
name="net_sales" |
| 97 |
/> |
| 98 |
<Line |
| 99 |
type="monotone" |
| 100 |
dataKey="discount_sales" |
| 101 |
stroke="#f59e0b" |
| 102 |
strokeWidth={2} |
| 103 |
dot={false} |
| 104 |
name="discount_sales" |
| 105 |
/> |
| 106 |
</LineChart> |
| 107 |
</ResponsiveContainer> |
| 108 |
)} |
| 109 |
</Card> |
| 110 |
); |
| 111 |
}; |
| 112 |
|
| 113 |
export default RevenueChart; |
| 114 |
|
