SGPT/src/shared/components/home/TokenomicsSection.tsx

import { useSpring, animated } from "@react-spring/web";
import { useEffect, useState } from "react";
import { Pie } from "react-chartjs-2";
import "chart.js/auto";
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
  ChartData,
} from "chart.js";
import ChartDataLabels from "chartjs-plugin-datalabels";
import { Context } from "chartjs-plugin-datalabels";
import tokenomicChart from "../../../assets/images/tokenomic-chart.png";

import "animate.css";
type Props = {};
ChartJS.register(ArcElement, Tooltip, Legend);
const tokenomics = [
  {
    name: "Liquidity",
    title: "Liquidity - 5% 1,000,000 SGPT",
    precent: "5",
    description: " ",
    color: "#86eae9",
    bgcolor: "bg-[#86eae9]",
  },
  {
    name: "Private Sale",
    title: "Private Sale - 17% 3,400,000 SGPT",
    description: " ",
    precent: "17",
    color: "#5dbdd3",
    bgcolor: "bg-[#5dbdd3]",
  },
  {
    name: "Stacking & Farming",
    title: "Stacking & Farming - 15% 3,000,000 SGPT",
    description: " ",
    precent: "15",
    color: "#4591b8",
    bgcolor: "bg-[#4591b8]",
  },
  {
    name: "Marketing & Promotion",
    title: "Marketing & Promotion - 15% 3,000,000 SGPT",
    description: " ",
    precent: "15",
    color: "#3b6696",
    bgcolor: "bg-[#3b6696]",
  },
  {
    name: "Public Sale",
    title: "Public Sale - 14% 2,800,000 SGPT",
    description: " ",
    precent: "14",
    color: "#353c6e",
    bgcolor: "bg-[#353c6e]",
  },
  {
    name: "Reward & Q&A",
    title: "Reward & Q&A - 10% 2,000,000 SGPT",
    description: " ",
    precent: "10",
    color: "#705788",
    bgcolor: "bg-[#705788]",
  },
  {
    name: "Advisor",
    title: "Advisor - 10% 2,000,000 SGPT",
    description: " ",
    precent: "10",
    color: "#a5769e",
    bgcolor: "bg-[#a5769e]",
  },
  {
    name: "Treasury",
    title: "Treasury - 14% 2,800,000 SGPT",
    description: " ",
    precent: "14",
    color: "#d59ab3",
    bgcolor: "bg-[#d59ab3]",
  },
];
const TokenomicsSection = (props: Props) => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const section = document.getElementById("tokenomics");
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsVisible(entry.isIntersecting);
      },
      { threshold: 0.4 }
    );

    if (!section) {
      return;
    }
    observer.observe(section);

    return () => {
      observer.unobserve(section);
    };
  }, []);

  useEffect(() => {
    console.log("isVisible", isVisible);
  }, [isVisible]);

  const styles = useSpring({
    opacity: isVisible ? 1 : 0,
    transform: isVisible ? "scaleX(1)" : "scaleX(0.5)",
    config: {
      duration: 300,
    },
  });


  const plugins = {
    id: "textCenter",
    datalabels: {},
    // beforeDatasetsDraw(chart: any, arg: any, pluginsOptions: any) {
    //   const { ctx, data } = chart;
    //   ctx.save();
    //   ctx.fillStyle = "#fff";
    //   ctx.font = "bolder 30px sen";
    //   ctx.textAlign = "center";
    //   ctx.textBaseline = "middle";
    //   ctx.fillText(
    //     `TOTAL SUPPLE`,
    //     chart.getDatasetMeta(0).data[0].x,
    //     chart.getDatasetMeta(0).data[0].y - 20
    //   );
    //   ctx.fillText(
    //     `20,000,000 SGPT`,
    //     chart.getDatasetMeta(0).data[0].x,
    //     chart.getDatasetMeta(0).data[0].y + 25
    //   );
    // },
  };
  const [userData, setUserData] = useState({
    labels: tokenomics.map((data) => data.name),
    datasets: [
      {
        label: "text",
        data: tokenomics.map((data) => data.precent),
        backgroundColor: tokenomics.map((data) => data.color),
        // cutout: "40%",
        borderWidth: 1,
        datalabels: {
          font: {
            weight: "bold",
          },
          anchor: "center", //start, center, end
          rotation: function (ctx: any) {
            const valuesBefore = ctx.dataset.data
              .slice(0, ctx.dataIndex)
              .reduce(
                (a: number, b: number) => Number(a) + Number(b),
                1 as number
              );
            const sum = ctx.dataset.data.reduce(
              (a: number, b: number) => Number(a) + Number(b),
              1 as number
            );
            const rotation =
              ((valuesBefore + ctx.dataset.data[ctx.dataIndex] / 2) / sum) *
              360;
            return rotation < 180 ? rotation - 95 : rotation + 90;
          },
          // formatter: function (value: any, context: any) {
          //   return context.chart.data.labels[context.dataIndex];
          // },
          // anchor: "end",
          align: "center",
          offset: -30,
        },
      },
    ],
  });
  const options = {
    layout: {},
    hoverBorderWidth: 4,
    plugins: {
      legend: {
        display: false,
      },
      datalabels: {
        font: {
          
          size: window.innerWidth > 1024 ? 20 : window.innerWidth > 768 ? 16 : 10,
        },
        color: "#fff",
        formatter: (context: any, agrs: any) => {
          const index = agrs.dataIndex;
          return agrs.chart.data.labels[index];
        },
      },
      tooltip: {
        callbacks: {
          label: (context: any) => {
            return ` ${tokenomics[context.dataIndex].title}`;
          },
        },
      },
    },
  };
  ChartJS.register(ChartDataLabels);
  return (
    <div className="w-full pb-24" id="tokenomics">
      <div className="container mx-auto">
        <h1 className="text-4xl text-white font-bold text-center mb-20  hover:text-orange-400">
          Tokenomics
        </h1>
        <div className="w-full flex justify-center items-center lg:justify-between lg:flex-row">
          <div className="w-full  flex justify-center">
            <animated.div
              style={{ ...styles }}
              className="w-[300px] sm:w-[350px] md:w-[500px]  lg:w-[700px]"
            >
              <Pie
                data={userData as any}
                plugins={[plugins]}
                options={options}
              />
            </animated.div>
          </div>

          {/* <div className="w-full justify-center">
            <ul className="flex flex-col items-end justify-center h-full gap-3 px-3 max-sm:pt-10 cursor-pointer">
              {tokenomics.map((item, index) => {
                return (
                  <animated.li
                    key={index}
                    className={`text-center w-full lg:w-3/4 bg-slate-200 py-3 relative animate__backInDown`}
                    style={{ ...styles1 }}
                  >
                    <div
                      className={`absolute h-full top-0 w-2 ${item.bgcolor}`}
                    ></div>
                    <h4 className="text-xl font-bold text-gray-700">
                      {item.title}
                    </h4>
                    <p className="text-gray-500">{item.description}</p>
                  </animated.li>
                );
              })}
            </ul>
          </div> */}
        </div>
      </div>
    </div>
  );
};

export default TokenomicsSection;