tm-landing/app/_components/ApexChart.tsx

"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: {
          categories: cmsData?.chart.data.map((item) => item.key),
        },
      },
    };
    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;