A significant refactoring effort was undertaken to modernize the dashboard and widget architecture, focusing on performance, user experience, and code maintainability.
### Key Architectural Changes
1.**Centralized Data Loading:** The data loading mechanism was completely overhauled. Instead of individual widgets fetching their own data, the `DashboardStateService` now manages the currently selected dataset for the entire dashboard. It uses an RxJS `BehaviorSubject` combined with `shareReplay(1)` to ensure that the dataset is fetched only once from the API, and all widgets subscribe to this single, shared data stream. This dramatically improves performance and reduces redundant API calls.
2.**Optimistic Widget Initialization:** The `BaseWidgetComponent` was refactored to improve perceived performance. It now includes an `applyInitialConfig()` abstract method. This allows widgets to render their initial structure, titles, and configurations immediately, showing a loading state within the widget's frame, rather than waiting for data to be fetched. This provides a much better user experience as the dashboard layout appears instantly.
3.**Frameless Viewer Route:** A new route, `/embed/dashboard/:dashboardId`, was created. This route uses a new `FramelessLayoutComponent` that contains only a `<router-outlet>`, making it perfect for embedding dashboards in `<iframe>`s or other applications without the main application's navigation and header.
### UI/UX Improvements
***Modern Widget Design:** All dashboard widgets were redesigned with a modern, responsive, card-based aesthetic using Tailwind CSS. This includes consistent padding, rounded corners, and shadows.
***Seamless Layout:** The default Syncfusion panel borders and headers were removed from the `dashboard-management` and `dashboard-viewer` layouts, creating a clean, seamless grid of cards.
***Enhanced Syncfusion Widgets:** The `SyncfusionDataGrid` and `SyncfusionPivotView` widgets were enhanced with additional toolbar features, including search, filtering, and exporting (Excel, PDF, CSV).
## Project Structure
*`src/app`: Contains the main application logic.
...
...
@@ -61,4 +79,4 @@ The application uses `ngx-translate` for internationalization. Translation files
*`en.json`: English translations
*`th.json`: Thai translations
When adding new text that needs to be translated, you should add it to these files and use the `translate` pipe or service in the application.
When adding new text that needs to be translated, you should add it to these files and use the `translate` pipe or service in the application.
