Dashboard Display Issues: Oversized KPI Fonts, Inconsistent Layout, and Missing Data Indicators

[fjlopez]

Describe the bug

1. KPI Mini Cards Font Size: The fonts used in the KPI mini cards are significantly oversized in some scenarios. This issue results in truncated information, particularly on smaller screens like laptops, where the entire dashboard becomes difficult to view without scrolling.

2. Inconsistent Layout Across Devices: The layout of the dashboard does not adapt well to different screen sizes. The arrangement of cards and charts is inconsistent, leading to an unorganized appearance, especially when transitioning between larger displays (e.g., Ultra HD monitors) and smaller ones (e.g., laptops).

3. Missing Data Indicators on Chart Cards: A chart cards display a blank area instead of informing the user that data is not available yet. This can confuse users who may assume the charts are not functioning correctly or are still loading.

To Reproduce Steps to reproduce the behavior:

1. Go to 'http://localhost:9000/admin/#/dashboard'
2. Observe the font size on the KPI mini cards, particularly on different screen sizes.
3. Check the layout consistency of the cards and charts across devices.
4. Observe the behavior of chart cards with no data.

Expected behavior

• KPI Mini Cards: Fonts should be resized to adhere to Material Design guidelines, ensuring the content is fully visible and proportionate to the card size, across all screen sizes.
• Consistent Layout: The dashboard layout should be responsive and maintain a consistent and organized structure across various devices, from large monitors to laptops.
• Clear Data Indicators: Chart cards with no available data should display a message such as “Data not available yet,” ensuring users are aware of the reason for the empty chart space.

Screenshots

• Full screen (LG Ultra HD):

  

• Full screen (Laptop):

Desktop (please complete the following information):

• OS: macOS 14.6.1
• Browser: Chrome
• Version: 128.0.6613.85

[albertcoro]

Awaiting #212 getting solved to continue this one

[fjlopez]

Check https://github.com/sitmun/sitmun-admin-app/issues/212#issuecomment-2358455942

[albertcoro]

Fixed the issues and pushed to Updates

[fjlopez]

There appears to be a problem with the handling of empty data during startup. When the application starts, the charts are displayed before the necessary data is available (it takes around 60 seconds for the first computation). As a result, the charts appear as shown in the screenshot below:

Only one out of the three charts displays the No disponible tag, but all of them should show this tag when data is unavailable. This suggests that the logic governing data availability is only applied to the "Usuaries" chart and not to the others.

Steps to Reproduce:

1. Run the following commands:

   docker compose down -v
   docker compose up -d

2. Navigate to: http://localhost:9000/admin/#/dashboard

Expected Behavior:

All charts should display the No disponible tag until the data is available.

[albertcoro]

Fixed the issues and pushed to Updates

[fjlopez]

Solution Review:

This solution lacks coherence. The three charts are initially empty because the data is either not yet computed or unavailable. The main issue is that the application cannot distinguish between whether the data is still loading or not present at all. To address this, the logic must be consistent across all charts, displaying the message No disponible whenever data is unavailable. It’s important to remember that at any given moment, any chart might lack data.

Expected Behavior (clarified):

All charts should display the No disponible tag when the data is not available, which could occur at any time.

[albertcoro]

Fixed and pushed to Updates