Activity #4203
closedFeature #1855: Design and Development for Dashboard Visualization
Activity #2221: Create a dashboard with simulated data
Sub module #3311: Dashboard : Display – Offline data
custom dashboard and panels for offline data
0%
Description
1 . User Flow
1. Select Filters: Year, Month, Data Type, Program Type.
2. Select Parameters: Moorings, Hydrophones, Parameters, Frequency (only for Deep).
3. Define Data Capture Range: Daily, Weekly, or Monthly.
4. Configure Panels: Add panels to dashboards.
5. Configure Dashboards/Pages: Add multiple dashboards/pages as required.
6. Assign Screens: Choose number of screens and assign dashboards/pages to them.
7. Create Screens: Generate screen layouts (e.g., Screen 1, Screen 2).
8. Visualization: Render selected dashboards/pages in Grafana.
2. UI Components
2.1 Data Configuration Panel
• Dropdowns / Selectors:
o Year Selector – Dropdown (e.g., 2022, 2023, 2024).
o Month Selector – Dropdown (Jan–Dec).
o Data Type Selector – Radio buttons or dropdown:
Oceanmet
Acoustic
o Program Type Selector – Dropdown:
Shallow
Deep
• Parameter Selection:
o Moorings – only-select dropdown.
o Hydrophones – one-select dropdown.
o Parameters – one-select dropdown.
o Frequency – Dropdown (enabled only if Program Type = Deep).
2.2 Data Capture Range
• Time Range Selector – Radio buttons:
o Daily
o Weekly
o Monthly
• Logic Handling:
o Daily → Select Start DateTime; auto-calculate 1-hour range.
o Weekly → Select Start Date; auto-calculate 7-day range.
o Monthly → Select Start Date; auto-calculate 30-day range.
2.3 Panel Configuration
• Panel Selection:
o Allow user to configure a visualization panel with chosen parameters.
o Button: Add Dashboard → Adds current panel as a new dashboard.
o Repeatable → User may add multiple dashboards.
2.4 Dashboard / Page Configuration
• Add More Dashboards – Button: + Add More Pages.
2.5 Screen Configuration
• Screen Number Input: Numeric input (e.g., 1, 2, 3).
• On submission → Dynamically create container divs:
o Screen 1
o Screen 2
o Screen 3 …
• Assign Dashboards to Screens:
o Under each screen div, list dashboards with checkbox selection.
o Allow multiple dashboards per screen.
• Button: Create Screens → Generates the playlist mapping.
3. Visualization (Grafana Integration)
• Screen divs act as playlist containers that rotate/display the assigned dashboards.
• Multi-screen setup allows simultaneous display of multiple dashboards (e.g., Screen 1 on one monitor, Screen 2 on another).