AmirReza Jamali
deb8b85d45
- Updated the PaymentsOverviewChart component to improve responsiveness by enabling redraw on parent and window resize. - Adjusted chart options for better label handling and grid padding. - Modified the container div to ensure full width and height for the chart display.
120 lines
2.1 KiB
TypeScript
120 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { useIsMobile } from "@/hooks/use-mobile";
|
|
import type { ApexOptions } from "apexcharts";
|
|
import dynamic from "next/dynamic";
|
|
|
|
type PropsType = {
|
|
data: {
|
|
received: { x: unknown; y: number }[];
|
|
due: { x: unknown; y: number }[];
|
|
};
|
|
};
|
|
|
|
const Chart = dynamic(() => import("react-apexcharts"), {
|
|
ssr: false,
|
|
});
|
|
|
|
export function PaymentsOverviewChart({ data }: PropsType) {
|
|
const isMobile = useIsMobile();
|
|
|
|
const options: ApexOptions = {
|
|
legend: {
|
|
show: false,
|
|
},
|
|
colors: ["#5750F1", "#0ABEF9"],
|
|
chart: {
|
|
type: "area",
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
fontFamily: "inherit",
|
|
redrawOnParentResize: true,
|
|
redrawOnWindowResize: true,
|
|
},
|
|
fill: {
|
|
gradient: {
|
|
opacityFrom: 0.55,
|
|
opacityTo: 0,
|
|
},
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 1024,
|
|
options: {
|
|
chart: {
|
|
height: 300,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 1366,
|
|
options: {
|
|
chart: {
|
|
height: 320,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
stroke: {
|
|
curve: "smooth",
|
|
width: isMobile ? 2 : 3,
|
|
},
|
|
grid: {
|
|
strokeDashArray: 5,
|
|
padding: {
|
|
right: 8,
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
tooltip: {
|
|
marker: {
|
|
show: true,
|
|
},
|
|
},
|
|
xaxis: {
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
rotate: -45,
|
|
rotateAlways: false,
|
|
hideOverlappingLabels: true,
|
|
...(isMobile && { maxHeight: 60 }),
|
|
},
|
|
tickAmount: isMobile ? 4 : undefined,
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div className="h-[310px] w-full overflow-hidden sm:-ml-4 sm:-mr-5">
|
|
<Chart
|
|
options={options}
|
|
series={[
|
|
{
|
|
name: "Received",
|
|
data: data.received,
|
|
},
|
|
{
|
|
name: "Due",
|
|
data: data.due,
|
|
},
|
|
]}
|
|
type="area"
|
|
width="100%"
|
|
height="100%"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|