1  // import React, { useMemo } from "react";
  2  import Chart from "react-apexcharts";
  3  import { ApexOptions } from "apexcharts";
  4  
  5  export interface SeriesPoint {
  6    x: string[];
  7    y: any;
  8  }
  9  
 10  interface Props {
 11    data: SeriesPoint;
 12    width: number;
 13    height: number;
 14  }
 15  
 16  const margin = { top: 20, right: 20, bottom: 50, left: 60 };
 17  
 18  export default function NamadaSupplyChart({ data, width, height }: Props) {
 19    console.log("NamadaSupplyChart data", data);
 20    const options: ApexOptions = {
 21      legend: {
 22        show: false, // Hide legend
 23        position: "top",
 24        horizontalAlign: "left",
 25      },
 26      colors: ["#465FFF", "#9CB9FF"], // Define line colors
 27      chart: {
 28        fontFamily: "Outfit, sans-serif",
 29        height: 310,
 30        type: "line", // Set the chart type to 'line'
 31        toolbar: {
 32          show: false, // Hide chart toolbar
 33        },
 34      },
 35      stroke: {
 36        curve: "straight", // Define the line style (straight, smooth, or step)
 37        width: [2, 2], // Line width for each dataset
 38      },
 39  
 40      fill: {
 41        type: "gradient",
 42        gradient: {
 43          opacityFrom: 0.55,
 44          opacityTo: 0,
 45        },
 46      },
 47      markers: {
 48        size: 0, // Size of the marker points
 49        strokeColors: "#fff", // Marker border color
 50        strokeWidth: 2,
 51        hover: {
 52          size: 6, // Marker size on hover
 53        },
 54      },
 55      grid: {
 56        xaxis: {
 57          lines: {
 58            show: false, // Hide grid lines on x-axis
 59          },
 60        },
 61        yaxis: {
 62          lines: {
 63            show: true, // Show grid lines on y-axis
 64          },
 65        },
 66      },
 67      dataLabels: {
 68        enabled: false, // Disable data labels
 69      },
 70      tooltip: {
 71        enabled: true, // Enable tooltip
 72        x: {
 73          format: "dd MMM yyyy", // Format for x-axis tooltip
 74        },
 75      },
 76      xaxis: {
 77        type: "category", // Category-based x-axis
 78        categories: data?.x || [],
 79        axisBorder: {
 80          show: false, // Hide x-axis border
 81        },
 82        axisTicks: {
 83          show: false, // Hide x-axis ticks
 84        },
 85        tooltip: {
 86          enabled: false, // Disable tooltip for x-axis points
 87        },
 88      },
 89      yaxis: {
 90        labels: {
 91          style: {
 92            fontSize: "12px", // Adjust font size for y-axis labels
 93            colors: ["#6B7280"], // Color of the labels
 94          },
 95          formatter: (value: number) => {
 96            return value.toLocaleString("en-US", {
 97              minimumFractionDigits: 0,
 98              maximumFractionDigits: 0,
 99            });
100          }, // Format y-axis labels
101        },
102        title: {
103          text: "", // Remove y-axis title
104          style: {
105            fontSize: "0px",
106          },
107        },
108      },
109    };
110  
111    const series = [data?.y || []];
112    return (
113      <div className="max-w-full overflow-x-auto custom-scrollbar">
114        <div id="chartEight" className="w-full">
115          <Chart options={options} series={series} type="area" height={500} />
116        </div>
117      </div>
118    );
119  }