This pull request includes significant updates to the access_amherst_backend/access_amherst_algo/templates/access_amherst_algo/dashboard.html file to enhance the dashboard's layout, styling, and functionality. The most important changes include improvements to the grid layout, the addition of dual sliders for time range selection, and the initialization of charts on page load.
Layout and Styling Improvements:
Updated the .dashboard-grid to use grid-template-columns: 1fr 1fr and added grid-template-rows: auto auto 600px for better layout control. Additional padding and margin adjustments were made for improved spacing.
Introduced .dashboard-card and .chart-container classes for consistent card styling and chart container layout, including background, padding, and box-shadow properties.
Functional Enhancements:
Implemented dual sliders for time range selection in the "Events by Category" and "Event Heatmap" sections, including the necessary CSS and JavaScript to handle the slider track updates and display formatted time labels. [1][2]
Added functions formatTime and updateSliderTrack to format time values and update the slider track visuals dynamically.
Chart Initialization and Updates:
Initialized the charts (hourly, category, and Gantt) on page load, ensuring they are set up with the correct data and configurations. Added error handling for missing chart elements.
Modified the updateCategoryChart and updateHeatmap functions to update slider labels and tracks, and fetch new data for the charts. [1][2]
Gantt Chart Enhancements:
Converted the updateGanttChart function to an asynchronous function with improved error handling and input validation. Added debouncing to event listeners for better performance.
This pull request includes significant updates to the
access_amherst_backend/access_amherst_algo/templates/access_amherst_algo/dashboard.htmlfile to enhance the dashboard's layout, styling, and functionality. The most important changes include improvements to the grid layout, the addition of dual sliders for time range selection, and the initialization of charts on page load.Layout and Styling Improvements:
.dashboard-gridto usegrid-template-columns: 1fr 1frand addedgrid-template-rows: auto auto 600pxfor better layout control. Additional padding and margin adjustments were made for improved spacing..dashboard-cardand.chart-containerclasses for consistent card styling and chart container layout, including background, padding, and box-shadow properties.Functional Enhancements:
formatTimeandupdateSliderTrackto format time values and update the slider track visuals dynamically.Chart Initialization and Updates:
updateCategoryChartandupdateHeatmapfunctions to update slider labels and tracks, and fetch new data for the charts. [1] [2]Gantt Chart Enhancements:
updateGanttChartfunction to an asynchronous function with improved error handling and input validation. Added debouncing to event listeners for better performance.