Skip to content

Commit

Permalink
design updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@vishvamsinh28
vishvamsinh28 committed Sep 3, 2023
1 parent ac5f32b commit 5ef718f
Show file tree
Hide file tree
Showing 17 changed files with 192 additions and 392 deletions.
36 changes: 13 additions & 23 deletions components/FinancialSummary/AsyncAPISummary.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
import Button from '../buttons/Button'
import Heading from "../typography/Heading"
import Heading from '../typography/Heading'
import Paragraph from '../typography/Paragraph'

function AsyncAPISummary() {
return (
<>
<div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center my-8">
<div>
<div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center my-8 mx-4">
<div className="col-start-3 col-span-5">
<div id="fin">
<Heading level="h2" typeStyle="heading-md my-3 mx-3">
<h1 style={{ fontSize: '42px'}}>AsyncAPI Financial Summary</h1>
<Heading level="h2" className="text-5xl my-3 mx-3">
AsyncAPI Financial Summary
</Heading>
<Paragraph typeStyle="body-md" className="my-4 max-w-4xl " style={{ color: "#212526" }}>
<Paragraph typeStyle="body-md" className="my-4 max-w-4xl text-[#212526]">
To help improve the current state of Event-Driven Architectures and their tooling, you can show your support for
the AsyncAPI Initiative by making a financial contribution. We offer three donation options: <strong>Open Collective, GitHub
Sponsors, and Linux Foundation Crowdfunding</strong>. Our expenses are managed through Open Collective and GitHub Sponsors,
while Linux Foundation Crowdfunding operates separately.
</Paragraph>
</div>
</div>
</div>
<div className="flex justify-center my-1">
Expand All @@ -29,37 +27,29 @@ function AsyncAPISummary() {
</div>
<hr className="my-12 border-t border-gray-300" />
<div className="text-center text-sm">
<Heading level="h1" typeStyle="heading-md" style={{ fontSize: '32px' }}>
<Heading level="h1" typeStyle="heading-md" className="4xl">
Ways to Support Us?
</Heading>
</div>
<div className="text-center my-4 text-sm max-width" style={{ color: '#212526' }}>
<Paragraph typeStyle="body-md" className="my-4" style={{ fontSize: '16px' }}>
<div className="text-center my-4 text-sm max-width text-[#212526]">
<Paragraph typeStyle="body-sm" className="my-4">
The easiest way to support AsyncAPI is by becoming a financial sponsor. While <br />there are alternative options,
they may involve greater effort. Contribute <br />monetarily using the following channels.
</Paragraph>
</div>

<div className="text-center">
<a href="https://opencollective.com/asyncapi" target='_blank'>
<img className="mx-2 inline" src="/img/finance/OpenCollective.webp" alt="Open Collective" width="65px" height="65px" />
<img className="mx-2 inline w-15 h-10" src="/img/finance/OpenCollective.webp" alt="Open Collective" />
</a>
<a href="https://crowdfunding.lfx.linuxfoundation.org/projects/445898e9-42a2-4965-9e0a-c2a714f381bc" target='_blank'>
<img className="mx-2 inline" src="/img/finance/LFX.webp" alt="Linux Foundation" width="50px" height="50px" />
<img className="mx-2 inline w-15 h-10" src="/img/finance/LFX.webp" alt="Linux Foundation" />
</a>
<a href="https://github.com/sponsors/asyncapi" target='_blank'>
<img className="mx-2 inline" src="/img/finance/GitHub.webp" alt="Github" width="60px" height="60px" />
<img className="mx-2 inline w-15 h-10" src="/img/finance/GitHub.webp" alt="Github" />
</a>
</div>
<style>
{`
@media (max-width: 768px) {
#fin{
margin:7px;
}
`}
</style>
</>
</div>
);
}

Expand Down
143 changes: 10 additions & 133 deletions components/FinancialSummary/BarChartComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,10 @@ import Expenses from '../../config/finance/json-data/2023/Expenses.json'
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 (
<div className="custom-tooltip" style={tooltipStyle}>
<p className="tooltip-label" style={labelStyle}>{data.Category}</p>
<p className="tooltip-amount" style={amountStyle}>${data.Amount.toFixed(2)}</p>
<div className="bg-opacity-90 bg-white border border-gray-300 p-2 shadow-md rounded-md">
<p className="text-14 font-bold mb-1">{data.Category}</p>
<p className="text-12 text-gray-900">${data.Amount.toFixed(2)}</p>
<p>Click on the bar to know more</p>
</div>
);
Expand All @@ -49,107 +32,11 @@ const getUniqueCategories = () => {
const months = Object.keys(Expenses);
const categories = getUniqueCategories();

const ExpensesTable = ({ expensesData }) => {
// Function to total the amount for each category in a given month
const calculateCategoryTotal = (month, category) => {
const monthExpenses = expensesData[month];
if (!monthExpenses) return 0;

const categoryExpenses = monthExpenses.filter(entry => entry.Category === category);
return categoryExpenses.reduce((total, entry) => total + parseFloat(entry.Amount), 0);
};

// Create a mapping of month and unique categories with their totals
const monthCategoryTotals = {};
Object.entries(expensesData).forEach(([month, entries]) => {
monthCategoryTotals[month] = {};
entries.forEach(entry => {
if (!monthCategoryTotals[month][entry.Category]) {
monthCategoryTotals[month][entry.Category] = parseFloat(entry.Amount);
} else {
monthCategoryTotals[month][entry.Category] += parseFloat(entry.Amount);
}
});
});

const openLink = (link) => {
window.open(link, '_blank');
};

return (
<div className="expenses-table-container">
<table className="expenses-table">
<thead>
<tr>
<th>Month</th>
<th>Category</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
{Object.entries(monthCategoryTotals).map(([month, categories]) =>
Object.entries(categories).map(([category, totalAmount], index) => (
<tr key={`${month}-${category}`}>
{index === 0 && <td rowSpan={Object.keys(categories).length}>{month}</td>}
<td><button onClick={(data) => {
// 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');
}
}}>{category}</button></td>
<td>${totalAmount.toFixed(2)}</td>
</tr>
))
)}
</tbody>
</table>
<style>{`
.expenses-table-container {
max-width: 800px;
margin: 0 auto;
overflow-x: auto;
}
.expenses-table {
border-collapse: collapse;
width: 100%;
}
.expenses-table th,
.expenses-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.expenses-table th {
background-color: #f2f2f2;
}
.expenses-table th.empty-cell,
.expenses-table td.month-cell {
background-color: #e0e0e0;
font-weight: bold;
}
.expenses-table td.expense-cell {
color: #333;
}
.expenses-table td.expense-cell:hover {
background-color: #f7f7f7;
}
`}</style>
</div>
);
};

const BarChartComponent = () => {
// State for selected filters
const [selectedCategory, setSelectedCategory] = useState("All Categories");
const [selectedMonth, setSelectedMonth] = useState("All Months");
const [windowWidth, setWindowWidth] = useState(null);

// Get unique categories and months from the Expenses data
const categories = getUniqueCategories();
Expand Down Expand Up @@ -182,8 +69,6 @@ const BarChartComponent = () => {
Amount: categoryAmounts[category],
}));

const [windowWidth, setWindowWidth] = useState(null);

const handleResize = () => {
setWindowWidth(window.innerWidth);
};
Expand All @@ -196,28 +81,20 @@ const BarChartComponent = () => {
};
}, []);

const hash = window.location.hash;
if (hash) {
const targetElement = document.querySelector(hash);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth' });
}
}

const barWidth = windowWidth < 900 ? null : 800;
const barHeight = windowWidth < 900 ? null : 400;

return (
<div className="flex justify-center items-center mt-8">
<div className="w-full lg:w-2/3 px-4 text-center">
<div style={{ marginBottom: '20px' }}>
<div className='mb-5'>
<h1 id="budget-analysis" className="text-4xl font-semibold mb-4 my-2">Budget Analysis</h1>
<p>Gain insights into the allocation of funds across different categories through our Budget Analysis</p>
<h4 className="text-sm font-semibold mb-2 my-4">Total Expenses: ${totalAmount.toFixed(2)}</h4>
{/* Select for category filter */}
<select
className="w-full p-2 border border-gray-300 rounded-md"
style={{ color: "gray", backgroundColor: "#f9f7f3", fontWeight: 600 }}
className="w-full p-2 border text-gray-600 font-semibold border-gray-300 rounded-md bg-[#f9f7f3]"
value={selectedCategory}
onChange={(e) => setSelectedCategory(e.target.value)}
>
Expand All @@ -229,8 +106,7 @@ const BarChartComponent = () => {

{/* Select for month filter */}
<select
className="w-full mt-2 p-2 border border-gray-300 rounded-md"
style={{ color: "gray", backgroundColor: "#f9f7f3", fontWeight: 600 }}
className="w-full mt-2 p-2 border border-gray-300 rounded-md text-gray-600 bg-[#f9f7f3] font-semibold"
value={selectedMonth}
onChange={(e) => setSelectedMonth(e.target.value)}
>
Expand All @@ -248,7 +124,7 @@ const BarChartComponent = () => {
<Legend />
<Bar
dataKey="Amount"
fill="rgba(123, 93, 211, 1)"
fill="#7B5DD3FF"
onClick={(data) => {
// Get the category from the clicked bar's payload
const category = data.payload.Category;
Expand All @@ -261,7 +137,8 @@ const BarChartComponent = () => {
}}
/>
</BarChart>
{windowWidth < 900 ? (<ExpensesTable expensesData={Expenses} />) : null}
{/* replace null with cards for mobile deivces */}
{windowWidth < 900 ? null : null}
</div>
</div>
);
Expand Down
25 changes: 5 additions & 20 deletions components/FinancialSummary/ContactUs.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,17 @@
import Button from '../buttons/Button'
import Heading from "../typography/Heading"
import Heading from '../typography/Heading'
import Paragraph from '../typography/Paragraph'

function ContactUs() {
const hash = window.location.hash;
if (hash) {
const targetElement = document.querySelector(hash);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth' });
}
}
return (
<>
<div>
<div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center my-16">
<div className="col-start-3 col-span-5">
<div id="contact">
<div className="mx-2">
<Heading level="h1" typeStyle="heading-md"><h1 id="contact-us">Interested in getting in touch?</h1></Heading>
<Paragraph typeStyle="body-sm" className="my-2 max-w-4xl">
Feel free to contact us if you need more explanation. We are happy to hop on a call and help with
onboarding to the project as a sponsor. Write email to <span><a style={{ color: "#8054F2", fontWeight: 900 }} href="mailto:[email protected]" target='_blank'>[email protected]</a></span>
onboarding to the project as a sponsor. Write email to <span><a className="text-[#8054F2] font-black" href="mailto:[email protected]" target='_blank'>[email protected]</a></span>
</Paragraph>
</div>
</div>
Expand All @@ -30,15 +23,7 @@ function ContactUs() {
target='_blank'
/>
</div>
<style>
{`
@media (max-width: 768px) {
#contact{
margin-left:10px;
}
`}
</style>
</>
</div>
)
}

Expand Down
Loading

0 comments on commit 5ef718f

Please sign in to comment.