Added new analytics and added animations to the ecosystem page ENCODE CLUB

[sambitsargam]

Overview:
This PR introduces several enhancements to the analytics dashboard, along with style and animation improvements to the Ecosystem page.

Key Changes:

1. Additional Analytics:

   • Average Transaction Value (ATV): Added a metric card for the Average Transaction Value, calculated by dividing the Total Value Locked (TVL) by the Daily Transactions (TRX). This provides insight into the average value per transaction.
   • Growth Rate Calculations: Added growth rate percentage indicators for the following metrics:
     • TVL (Total Value Locked): The percentage change between the current and previous day's TVL.
     • DAU (Daily Active Users): The percentage change in the number of daily active users.
     • TRX (Daily Transactions): The percentage change in the number of transactions.
   • Pie Chart for Metric Distribution: Introduced a pie chart displaying the distribution of DAU across different timestamps, offering a visual breakdown of daily active users over time.

2. Chart Enhancements:

   • Line Chart Animations: Added smooth transition animations to the line charts, improving the visual experience when switching between tabs or updating data.
   • Bar Chart Styling: Improved the bar chart with additional styling, including custom colors for the bars and enhanced tooltip styling.
   • Chart Colors: Enhanced the chart line and bar colors based on the active tab (e.g., green for TVL, red for DAU, blue for TRX).

3. Ecosystem Page Styling & Animations:

   • Card Hover Animations: Cards now have subtle hover effects, making the user interface more interactive and dynamic.
   • Gradient Backgrounds: Added gradient backgrounds to cards to make the ecosystem metrics visually appealing.
   • Smooth Transitions: Applied smooth transitions to elements like cards and charts, providing a more polished user experience when interacting with the page.

Benefits:

• These enhancements allow users to gain deeper insights into key metrics, such as Average Transaction Value and Growth Rate percentages, directly from the dashboard.
• The updated pie chart provides a quick, high-level view of DAU distribution, making it easier for users to assess trends.
• The new style and animations add a modern, interactive feel to the page, improving the user experience and overall aesthetic.

Video:

Screen.Recording.2024-11-12.at.3.41.16.PM.mov

Testing:

• Verified that the line and bar charts display correctly and reflect real-time data updates.
• Checked the responsiveness of the layout across various screen sizes.
• Confirmed that animations are smooth and enhance the user interaction without affecting performance.

Notes:

• Ensure that the data sources for ATV and Growth Rate calculations are being updated correctly in the backend, as these metrics rely on historical data for comparison.