1  import React, { useState } from "react";
 2  import { Portal, Dialog } from "@radix-ui/react";
 3  import { Bar, Pie } from "react-chartjs-2";
 4  
 5  const OverviewPage = () => {
 6    const [userData, setUserData] = useState({
 7      currencyTotal: 1000000,
 8      currencyPrimary: "USD",
 9      averageInterestRate: 5.2,
10      distressedDebt: 15,
11      fundingRate: 8,
12      investmentPerCountry: {
13        USA: 400000,
14        UK: 300000,
15        Germany: 200000,
16      },
17      currencyDistribution: {
18        USD: 60,
19        EUR: 30,
20        GBP: 10,
21      },
22    });
23  
24    const barChartData = {
25      labels: Object.keys(userData.investmentPerCountry),
26      datasets: [
27        {
28          label: "Investment per Country",
29          data: Object.values(userData.investmentPerCountry),
30          backgroundColor: "rgba(75,192,192,0.4)",
31          borderColor: "rgba(75,192,192,1)",
32          borderWidth: 1,
33        },
34      ],
35    };
36  
37    const pieChartData = {
38      labels: Object.keys(userData.currencyDistribution),
39      datasets: [
40        {
41          data: Object.values(userData.currencyDistribution),
42          backgroundColor: [
43            "rgba(255,99,132,0.6)",
44            "rgba(54,162,235,0.6)",
45            "rgba(255,206,86,0.6)",
46          ],
47          hoverBackgroundColor: [
48            "rgba(255,99,132,0.8)",
49            "rgba(54,162,235,0.8)",
50            "rgba(255,206,86,0.8)",
51          ],
52        },
53      ],
54    };
55  
56    return (
57      <div>
58        <div>
59          <h2>Currency Overview</h2>
60          <p>Currency Total: {userData.currencyTotal}</p>
61          <p>Currency Primary: {userData.currencyPrimary}</p>
62          <p>Average Interest Rate: {userData.averageInterestRate}%</p>
63          <p>Distressed Debt: {userData.distressedDebt}%</p>
64        </div>
65  
66        <div>
67          <h2>Funding Rate</h2>
68          <Bar data={barChartData} />
69        </div>
70  
71        <div>
72          <h2>Investment per Country</h2>
73          <Pie data={pieChartData} />
74        </div>
75      </div>
76    );
77  };
78  
79  export default OverviewPage;