AmirReza Jamali
efbdb82535
- Implemented CmsContext and CmsProvider for global state management of CMS data. - Created a custom hook `useGetCms` to fetch CMS data using React Query. - Defined TypeScript interfaces for CMS response and its related data structures. - Added error handling for data fetching in both the service and context.
92 lines
2.0 KiB
TypeScript
92 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { CmsData } from "@/types/TCms";
|
|
import { ApexOptions } from "apexcharts";
|
|
import dynamic from "next/dynamic";
|
|
import { useEffect, useState } from "react";
|
|
const ReactApexChart = dynamic(() => import("react-apexcharts"), {
|
|
ssr: false,
|
|
});
|
|
|
|
interface ChartState {
|
|
series: {
|
|
name: string;
|
|
data: number[];
|
|
}[];
|
|
options: ApexOptions;
|
|
}
|
|
|
|
const ApexChart = ({ cmsData }: { cmsData?: CmsData }) => {
|
|
const [state, setState] = useState<ChartState | null>(null);
|
|
|
|
useEffect(() => {
|
|
const initialState: ChartState = {
|
|
series: [
|
|
{
|
|
name: "Sales",
|
|
data: cmsData?.chart.data.map((item) => item.value) || [10, 10, 10],
|
|
},
|
|
],
|
|
options: {
|
|
chart: {
|
|
toolbar: { show: false },
|
|
height: 350,
|
|
type: "line",
|
|
},
|
|
forecastDataPoints: {
|
|
count: 0,
|
|
},
|
|
stroke: {
|
|
width: 6,
|
|
curve: "smooth",
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shade: "dark",
|
|
type: "horizontal",
|
|
shadeIntensity: 0.5,
|
|
gradientToColors: ["#99DDE5"],
|
|
inverseColors: false,
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [0, 100],
|
|
},
|
|
},
|
|
colors: ["#0164FF"],
|
|
xaxis: {
|
|
type: "datetime",
|
|
categories: cmsData?.chart.data.map((item) => item.key),
|
|
tickAmount: 0,
|
|
labels: {
|
|
formatter: function (value: any, timestamp: any, opts: any) {
|
|
return opts.dateFormatter(new Date(timestamp), "dd MMM");
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
setState(initialState);
|
|
}, []);
|
|
|
|
if (!state) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div id="chart">
|
|
<ReactApexChart
|
|
options={state.options}
|
|
series={state.series}
|
|
type="line"
|
|
height={350}
|
|
/>
|
|
</div>
|
|
<div id="html-dist"></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ApexChart;
|