assetx/components/transparency/AssetDistribution.tsx

"use client";

import { useApp } from "@/contexts/AppContext";
import { useEffect, useRef } from "react";
import * as echarts from "echarts";

export default function AssetDistribution() {
  const { t } = useApp();
  const chartRef = useRef<HTMLDivElement>(null);

  const legends = [
    { nameKey: "transparency.fixedIncome", color: "bg-[#1447e6]" },
    { nameKey: "transparency.alternativeAssets", color: "bg-[#10b981]" },
    { nameKey: "transparency.alternativeCredit", color: "bg-[#ff6900]" },
  ];

  useEffect(() => {
    if (!chartRef.current) return;

    const chart = echarts.init(chartRef.current, null, {
      renderer: "svg",
    });

    const option = {
      series: [
        {
          type: "pie",
          radius: ["45%", "70%"],
          center: ["50%", "50%"],
          avoidLabelOverlap: true,
          itemStyle: {
            borderRadius: 0,
            borderColor: "transparent",
            borderWidth: 0,
          },
          label: {
            show: true,
            position: "outside",
            alignTo: "none",
            formatter: (params: any) => {
              return `{name|${params.name}}\n{line|}\n{value|${params.data.displayValue}}`;
            },
            rich: {
              name: {
                fontSize: 14,
                fontWeight: "bold",
                color: "#0f172b",
                lineHeight: 20,
              },
              line: {
                height: 1,
                width: 100,
                backgroundColor: "transparent",
              },
              value: {
                fontSize: 12,
                fontWeight: "500",
                lineHeight: 18,
              },
            },
          },
          labelLine: {
            show: true,
            length: 20,
            length2: 60,
            lineStyle: {
              width: 1,
            },
          },
          emphasis: {
            disabled: true,
          },
          data: [
            {
              value: 52.7,
              name: t("transparency.usTreasuryBills"),
              displayValue: "$140M (30.1%)",
              itemStyle: {
                color: "#1447e6",
              },
              label: {
                rich: {
                  value: {
                    color: "#1447e6",
                  },
                },
              },
              labelLine: {
                lineStyle: {
                  color: "#1447e6",
                },
              },
            },
            {
              value: 30.1,
              name: t("transparency.realEstate"),
              displayValue: "$140M (30.1%)",
              itemStyle: {
                color: "#10b981",
              },
              label: {
                rich: {
                  value: {
                    color: "#10b981",
                  },
                },
              },
              labelLine: {
                lineStyle: {
                  color: "#10b981",
                },
              },
            },
            {
              value: 17.2,
              name: t("transparency.privateCredit"),
              displayValue: "$80M (17.2%)",
              itemStyle: {
                color: "#ff6900",
              },
              label: {
                rich: {
                  value: {
                    color: "#ff6900",
                  },
                },
              },
              labelLine: {
                lineStyle: {
                  color: "#ff6900",
                },
              },
            },
          ],
          animationType: "expansion",
          animationEasing: "cubicOut",
          animationDuration: 1000,
        },
      ],
    };

    chart.setOption(option);

    const handleResize = () => {
      chart.resize();
    };
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
      chart.dispose();
    };
  }, [t]);

  return (
    <div className="flex-1 bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6 flex flex-col gap-6">
      {/* Header */}
      <div className="flex flex-col gap-0">
        <h3 className="text-[20px] font-bold text-text-primary dark:text-white leading-[140%]">
          {t("transparency.assetDistribution")}
        </h3>
        <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
          {t("transparency.distributionSubtitle")}
        </p>
      </div>

      {/* Pie Chart Section */}
      <div className="flex flex-col gap-3">
        {/* ECharts Pie Chart */}
        <div className="relative h-[210px] w-full">
          <div ref={chartRef} className="w-full h-full" />
          {/* Center 100 */}
          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[40px] font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em] pointer-events-none">
            100
          </div>
        </div>

        {/* Legends */}
        <div className="flex items-center justify-center gap-6">
          {legends.map((legend, index) => (
            <div key={index} className="flex items-center gap-2">
              <div className={`w-3 h-3 rounded-full ${legend.color}`} />
              <span className="text-body-small font-regular text-text-primary dark:text-white leading-[150%]">
                {t(legend.nameKey)}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}