Untitled

import { Box, Text, VStack } from "@chakra-ui/react";
import React from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  Dot,
} from "recharts";

const SiteAnalyserLineChart = (props: { data: any; bgTeal?: boolean }) => {
  const { bgTeal = false, data } = props;

  const CustomTooltip = ({ active, payload, coordinate }: any) => {
    if (active && payload && payload.length) {
      return (
        <Box
          style={{
            backgroundColor: bgTeal ? "#fff" : "#478F96",
            padding: "10px",

            position: "absolute",
            left: `${coordinate.x - 64}px`, // Custom calculation might be needed
            top: `${coordinate.y - 100}px`, // Adjust positioning manually
            borderRadius: "12px",

            fontSize: "14px",
            color: bgTeal ? "#478F96" : "#fff",
            fontFamily: "sans-serif",
          }}
        >
          <VStack paddingX={"24px"} gap={0}>
            <Text>{`${payload[0].value} search`}</Text>
            <Text>
              {`${payload[0].payload.month} ${payload[0].payload.year}`}
            </Text>
          </VStack>
          <div className={bgTeal ? "arrowLabelTealColor" : "arrowLabel"}></div>
        </Box>
      );
    } else {
      return null;
    }
  };

  const CustomActiveDot = (props) => {
    const { cx, cy, payload } = props;

    return (
      <Dot
        cx={cx}
        cy={cy}
        r={8} // Customize the radius of the dot
        fill={bgTeal ? "#fff" : "#000"} // Customize the fill color of the dot
      />
    );
  };

  return (
    <ResponsiveContainer width={"100%"} height={"100%"}>
      <LineChart
        height={400}
        width={1200}
        data={data}
        margin={{
          top: 5,
          right: 10,
          left: -28,
          bottom: 2,
        }}
      >
        <XAxis
          axisLine={false}
          tickLine={false}
          dataKey="month"
          padding={{ left: 30, right: 20 }}
          tick={{ fill: bgTeal ? "#fff" : "#A3AED0" }}
        />
        <YAxis
          tickLine={false}
          axisLine={false}
          padding={{ top: 20, bottom: 40 }}
          tick={{ fill: bgTeal ? "#fff" : "#A3AED0" }}
        />
        <Tooltip
          content={<CustomTooltip />}
          contentStyle={
            bgTeal
              ? {
                  backgroundColor: "#fff",
                  border: "none",
                  borderRadius: "16px",
                  color: "#478F96",
                }
              : {
                  backgroundColor: "#478F96",
                  border: "none",
                  borderRadius: "16px",
                  color: "#fff",
                }
          }
          cursor={false}
        />
        <Legend />

        <Line
          width={100}
          dot={false}
          type="monotone"
          dataKey="value"
          stroke={bgTeal ? "#fff" : "#478F96"}
          strokeWidth={4}
          activeDot={<CustomActiveDot />}
        />
      </LineChart>
    </ResponsiveContainer>
  );
};

export default SiteAnalyserLineChart;