Skip to content

Conversation

@fulleni
Copy link
Member

@fulleni fulleni commented Dec 21, 2025

Status

READY

Description

This pull request significantly enhances the dashboard's analytical capabilities by introducing a robust system for displaying key performance metrics, trends, and ranked lists. It centralizes data fetching and caching through a new service, ensuring performance and consistency. The changes also include a set of flexible and responsive UI components that seamlessly integrate analytics into existing management pages and a dedicated overview dashboard, providing users with a clearer, data-driven understanding of application performance.

Type of Change

  • ✨ New feature (non-breaking change which adds functionality)
  • 🛠️ Bug fix (non-breaking change which fixes an issue)
  • ❌ Breaking change (fix or feature that would cause existing functionality to change)
  • 🧹 Code refactor
  • ✅ Build configuration change
  • 📝 Documentation
  • 🗑️ Chore

- Add time frame labels (day, week, month, year)
- Add strings for "no data available" and "vs previous period"
- Include new descriptions for analytics events
- Add KPI cards, chart cards, and ranked list cards data repositories
- Implement AnalyticsService using new data repositories
- Update bootstrap process to include new services and repositories
- Add fixtures data for demo environment
- Add AnalyticsService to App class constructor and properties
- Provide AnalyticsService through RepositoryProvider in app build method
- Remove unused imports related to pending deletions and updates services
- Implement a service responsible for fetching, caching, and managing analytics data
- Provide in-memory caching for fetched data to prevent redundant network calls
- Implement request deduplication to merge simultaneous requests for the same resource
- Support fetching KPI, Chart, and Ranked List card data with cache bypass option
- Include method to clear all cached data
- Create a consistent container for analytics cards
- Include standard styling, padding, and a header with title and optional action widgets
- Use in KPI, Chart, and Ranked List cards
- Create a new widget `AnalyticsCardSlot` to manage multiple analytics cards
- Implement functionality to switch between different analytics cards
- Integrate with `AnalyticsService` to fetch and display KPI and chart data
- Add navigation dots for card switching when multiple cards are present
- Implement ChartCard widget to display bar or line charts with time frame toggles
- Add ChartCardData model to hold chart data
- Include time frame toggle functionality using SegmentedButton
- Ensure responsive design with LayoutBuilder
- Add localization support for time frame labels
- Implement KpiCard StatefulWidget to display Key Performance Indicator
- Add _KpiCardState class to manage time frame selection and UI rendering
- Create _TimeFrameToggle widget for switching between different time frames
- Implement localization support for time frame labels and no data message
- Add trend indication with dynamic icon and color based on positive/negative trend
- Format numbers for display in the KPI value
- Implement RankedListCard StatefulWidget for displaying ranked lists
- Add _RankedListCardState with time frame toggle functionality
- Create _TimeFrameToggle widget for selecting time frames
- Integrate AnalyticsCardShell for consistent styling
- Support localization for various time frame labels
- Updated AnalyticsCardSlot to support RankedListCardId
- Added logic to fetch and display RankedListCard data
- Improved type documentation to include new card type support
- Refactored UI layout for better readability
- Import OverviewBloc from the overview/bloc/overview_bloc.dart file
- Add BlocProvider for OverviewBloc in the app's state management
- Implement AnalyticsCardSlot widget for displaying KPI and chart cards
- Add user-related analytics cards (total registered, new registrations, active users)
- Include charts for user registrations over time, active users over time, and role distribution
- Refactor OverviewPage from StatefulWidget to StatelessWidget
- Add AppBar with localized title
- Implement fixed grid layout for displaying KPIs, trends, and ranked lists
- Use AnalyticsCardSlot for displaying different types of cards
- Add spacing between elements using SizedBox
- Create a new widget for displaying a standard "Dashboard Strip" configuration
- Consists of two side-by-side AnalyticsCardSlot widgets for KPI and Chart cards
- Ensure consistent layout and behavior across management pages
…with strip

- Remove AnalyticsCardSlot usage for KPI and chart cards
- Replace with AnalyticsDashboardStrip widget for better consistency
- Simplify the code structure and improve readability
- Add fl_chart package to pubspec.yaml for creating charts and dashboards
…ews page

- Import AnalyticsDashboardStrip widget
- Add AnalyticsDashboardStrip to the beginning of the Column in _AppReviewsPageState
- Include KPI cards for total feedback, positive feedback, and store requests
- Add chart cards for feedback over time, positive vs negative feedback, and store requests over time
…nts page

- Import AnalyticsDashboardStrip widget
- Add AnalyticsDashboardStrip to the top of the engagements page
- Configure KPI cards and chart cards relevant to engagements
…page

- Import AnalyticsDashboardStrip widget
- Add AnalyticsDashboardStrip to ReportsPage with relevant KPI and chart cards
- Implement layout for analytics strip and existing report list
…page

- Import AnalyticsDashboardStrip widget
- Add AnalyticsDashboardStrip to the HeadlinesPage layout
- Configure KPI and chart cards relevant to content headlines
- Import AnalyticsDashboardStrip widget
- Add AnalyticsDashboardStrip to the SourcesPage layout
- Include KPI cards for total sources, new sources, and total followers
- Add chart cards for headlines published over time, status distribution, and engagement by type
- Import AnalyticsDashboardStrip widget
- Add AnalyticsDashboardStrip to the TopicsPage layout
- Include KPI cards for total topics, new topics, and total followers
- Add chart cards for breaking news distribution, headlines published over time, and engagement by topic
- Update core dependency to latest commit (ff02760)
- Downgrade fl_chart dependency from ^1.1.1 to ^1.0.0
- Remove OverviewBloc import and initialization in the App widget
- This change simplifies the app structure by eliminating unused blocs
…ions

- Add 'await' keyword before removing items from _kpiInFlight, _chartInFlight, and _rankedListInFlight maps
- This change ensures that the maps are only updated after the async operations have completed, improving the accuracy of in-flight request tracking
- Remove custom chart implementation
- Add LineChart and BarChart using fl_chart package
- Implement axis titles and grid data
- Add support for different time frames and labels
- Update ChartCard widget to use new chart implementation
…controls

- Implement "Balanced Vertical Edges" design pattern
- Add vertical slot navigation for switching cards
- Integrate vertical time frame selector for content filtering
- Ensure controls are always accessible, even in "No Data" states
- Refactor card layout to maximize vertical space usage
- Integrate RankedListCard functionality into AnalyticsCardShell
- Remove RankedListCard-specific UI code
- Add slot management and time frame selection to AnalyticsCardShell
- Simplify list item rendering and improve styling
- Wrap AnalyticsDashboardStrip in a SizedBox with fixed height of 160
- This change ensures consistent layout regardless of the number of reaction types
- Replace fixed grid layout with responsive design using LayoutBuilder
- Adapt card heights and layouts for different screen sizes
- Implement desktop, tablet, and mobile layouts for better user experience
…ures

- Added Arabic (AR) translations for various dashboard features in app_ar.arb
- Added English (EN) translations for various dashboard features in app_en.arb
- Replace static title with localized title in ChartCard widget
- Add _getLocalizedTitle method to map ChartCardId to localized string
- Implement switch statement for all ChartCardId cases
- Update chart cards to use new localized titles
- Center main content and trend indicator
- Add spacing between main value and trend indicator
- Implement localized titles for different KPI cards
- Update trend indicator color and tooltip message
- Add localized titles for different ranked list card types
- Move time frame selector to bottom position
- Update title display to use the new localized titles
- Introduce TimeFramePosition enum to define selector position
- Update AnalyticsCardShell to support both right and bottom positions
- Implement _HorizontalTimeFrameSelector widget for bottom placement
- Adjust layout to accommodate both selector positions
…rt card data

- Remove getChartCardsFixturesData() call
- Add sample data for usersRegistrationsOverTime and contentHeadlinesViewsOverTime
- Implement fallback for other ChartCardId values to prevent lookup errors
- Update initialData assignment with new sample data structure
- Import AppConstants from shared/constants/app_constants.dart
- Add AppConstants.validate() call to ensure layout integrity before app initialization
- Add wide-screen support with a Row layout for KPI and Chart slots
- Implement a Column layout for narrow screens, prioritizing KPI slot
- Introduce fixed width for KPI slot on wide screens
- Enhance documentation to reflect new responsive behavior
- Add kDesktopBreakpoint and kAnalyticsKpiSidebarWidth constants
- Implement validate() method to ensure UI configuration consistency
- Update existing constant comments for clarity
- Removed unnecessary SizedBox wrapper around AnalyticsDashboardStrip
- Simplified the widget tree without changing functionality
- Add left and right padding to the chart card content
- Improve visual consistency and balance within
- Add RTL support for line and bar charts
- Invert x values for RTL mode
- Sort bar groups by x value to render correctly in RTL
- Update bottom title positioning for RTL
- Update core dependency to version 1.4.0
- Change git ref from ff02760 to c075c3da
- Implement navigation to edit screens when tapping items in ranked list card
- Add GoRouter dependencies and import statements
- Define navigation logic based on different ranked list card IDs
- Update ListTile to include onTap gesture recognizer
@fulleni fulleni added this to the Market Contender Edition milestone Dec 21, 2025
@fulleni fulleni self-assigned this Dec 21, 2025
@fulleni fulleni linked an issue Dec 21, 2025 that may be closed by this pull request
@gemini-code-assist
Copy link

Summary of Changes

Hello @fulleni, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the dashboard's analytical capabilities by introducing a robust system for displaying key performance metrics, trends, and ranked lists. It centralizes data fetching and caching through a new service, ensuring performance and consistency. The changes also include a set of flexible and responsive UI components that seamlessly integrate analytics into existing management pages and a dedicated overview dashboard, providing users with a clearer, data-driven understanding of application performance.

Highlights

  • New Analytics System: Introduced a comprehensive analytics display system featuring Key Performance Indicator (KPI) cards, chart cards, and ranked list cards.
  • Centralized Analytics Service: Added a new AnalyticsService responsible for fetching, caching, and deduplicating requests for analytics data, ensuring efficient data management.
  • Reusable UI Components: Developed a suite of reusable Flutter widgets (AnalyticsCardShell, AnalyticsCardSlot, AnalyticsDashboardStrip, KpiCard, ChartCard, RankedListCard) for consistent display of analytics across the application.
  • Dashboard Integration: Integrated the new analytics dashboard strips and individual cards into the main OverviewPage and various management pages (App Reviews, Engagements, Reports, Headlines, Sources, Topics, Users) to provide immediate insights.
  • Localization Support: Extended localization files (AR and EN) with new strings for time frames, 'no data available' messages, trend comparisons, and titles for all new KPI, Chart, and Ranked List cards.
  • Charting Library: Added the fl_chart dependency to enable rich and interactive data visualizations within the new chart cards.
  • Responsive Design: Implemented responsive layouts for analytics displays, adapting card arrangements and visibility based on screen size (e.g., row layout for wide screens, column for narrow screens).
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a comprehensive analytics dashboard feature, integrating KPI, chart, and ranked list cards across various management pages and the main overview page. Key changes include adding a new AnalyticsService for fetching and caching analytics data, defining new localization strings for these analytics components, and implementing responsive AnalyticsCardShell, AnalyticsCardSlot, and AnalyticsDashboardStrip widgets. The bootstrap.dart file was updated to initialize the AnalyticsService with new data repositories for KPI, chart, and ranked list data, and the App widget now receives this service. The OverviewPage was refactored to be stateless and now dynamically displays analytics cards based on screen size. Additionally, AppConstants was extended with new breakpoint values and a validation method. Review comments highlight the need to remove unnecessary await keywords on synchronous Map.remove calls in analytics_service.dart and to correct the responsive layout of AnalyticsDashboardStrip to ensure both KPI and chart slots are displayed on narrow screens, rather than just the KPI slot, to maintain a consistent dashboard experience.

- Comment out code coverage badge
- Add Operational Intelligence section with dashboard overview
- Enhance Content & Editorial Management section with performance metrics
- Update User & Role Management section with user growth insights
- Improve Moderation Hub section with community health monitoring
@fulleni fulleni merged commit 27a53d0 into main Dec 21, 2025
2 of 3 checks passed
@fulleni fulleni deleted the feat/display-key-performance-metrics branch December 21, 2025 13:24
@github-project-automation github-project-automation bot moved this from Backlog to Done in Flutter News App Project Dec 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

feat: Display Key Performance Metrics

2 participants