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