diff --git a/components/FinancialSummary/BarChartComponent.js b/components/FinancialSummary/BarChartComponent.js
index bf180c975c4..970eafb008b 100644
--- a/components/FinancialSummary/BarChartComponent.js
+++ b/components/FinancialSummary/BarChartComponent.js
@@ -1,5 +1,38 @@
import React, { useState, useEffect } from 'react'
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'
+import ExpensesLink from './ExpensesLinkObject'
+
+const CustomTooltip = ({ active, payload }) => {
+ if (active && payload && payload.length) {
+ const data = payload[0].payload;
+ const tooltipStyle = {
+ backgroundColor: 'rgba(255, 255, 255, 0.9)',
+ border: '1px solid #ccc',
+ padding: '10px',
+ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
+ borderRadius: '4px',
+ };
+ const labelStyle = {
+ fontSize: '14px',
+ fontWeight: 'bold',
+ marginBottom: '5px',
+ };
+ const amountStyle = {
+ fontSize: '12px',
+ color: '#555',
+ };
+
+ return (
+
+
{data.Category}
+
${data.Amount.toFixed(2)}
+
+ );
+ }
+ return null;
+};
+
+
const BarChartComponent = ({ data }) => {
// State for selected filters
@@ -108,12 +141,25 @@ const BarChartComponent = ({ data }) => {
{/* Recharts BarChart */}
- {windowWidth > 900 ? : null}
-
+ } />
-
+ {
+ // Get the category from the clicked bar's payload
+ const category = data.payload.Category;
+ // Replace the URL with the external website URL you want to open
+ const matchedLinkObject = ExpensesLink.find(obj => obj.category === category)
+ if (matchedLinkObject) {
+ // Extract the link from the matched object and open it in a new tab/window
+ window.open(matchedLinkObject.link, '_blank');
+ };
+ }}
+ />
+
);
diff --git a/components/FinancialSummary/ExpensesLinkObject.js b/components/FinancialSummary/ExpensesLinkObject.js
new file mode 100644
index 00000000000..088bf40d7e8
--- /dev/null
+++ b/components/FinancialSummary/ExpensesLinkObject.js
@@ -0,0 +1,26 @@
+const ExpensesLink = [
+ {
+ category: "AsyncAPI Ambassador",
+ link: "https://github.com/orgs/asyncapi/discussions/425"
+ }, {
+ category: "Google Season of Docs 2022",
+ link: "https://github.com/orgs/asyncapi/discussions/303"
+ }, {
+ category: "AsyncAPI Mentorship 2022",
+ link: "https://github.com/orgs/asyncapi/discussions/284"
+ }, {
+ category: "AsyncAPI Webstore",
+ link: "https://github.com/orgs/asyncapi/discussions/710"
+ }, {
+ category: "AsyncAPI Bounty",
+ link: "https://github.com/orgs/asyncapi/discussions/541"
+ }, {
+ category: "3rd Party Services",
+ link: "https://github.com/orgs/asyncapi/discussions/295"
+ }, {
+ category: "Community Manager Salary",
+ link: "https://github.com/orgs/asyncapi/discussions/515"
+ }
+]
+
+export default ExpensesLink
\ No newline at end of file