feat(charts): voltage, colors, legends, and adaptive ui#4383
Merged
Conversation
Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit refactors the color palette used for metric graphs to improve visual appeal and provide a more consistent user experience. Standard `Color` definitions have been replaced with a custom `GraphColors` theme. Key changes: - `PowerMetrics`: Voltage color changed from Red to Gold. - `DeviceMetrics`: Updated colors for Voltage, Channel Utilization, and Air Utilization. - `EnvironmentMetrics`: Reassigned colors for Humidity, Gas Resistance, IAQ, and UV Lux. - `PaxMetrics`: Adjusted colors for PAX, BLE, and WIFI series for better differentiation. - `SignalMetrics`: Updated to use themed colors for SNR and RSSI. - `core/ui`: Defined a standardized set of colors within `GraphColors`. Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
Adds color-coded indicators to the metric values displayed below the charts on the node metrics screens. This visually links the textual data to the corresponding lines on the graph. The changes also include: - A new `MetricIndicator` composable for displaying the colored dots. - Adjusting the color scheme for some environment and device metrics to improve contrast and clarity. - Refactoring the layout of metric displays to use `Row`s with `verticalAlignment = Alignment.CenterVertically` for better alignment. Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit refactors the metrics chart screens (Device, Environment, Pax, Power, and Signal) to have a more consistent and unified layout. Key changes: - Wraps each chart composable in a `Column` to manage its internal layout. - Moves the `Legend` to be displayed directly below the chart, removing separate `MetricLegends` composables and redundant spacing. - Standardizes the `ChartHeader` to be smaller, centered, and optionally display an info icon. - Refactors the `Legend` composable to use `FlowRow` for better adaptability on smaller screens and adjusts its text styling. - Adjusts chart modifiers to use `weight(1f)` for flexible sizing and removes fixed height fractions in some cases. Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
Introduces `AdaptiveMetricLayout`, a new composable that provides a responsive layout for the metric screens. This layout displays the chart and the data list side-by-side on wider screens (e.g., tablets, landscape mode) and stacks them vertically on narrower screens (e.g., phones in portrait mode). This new layout has been implemented across the Device, Power, Environment, and Signal metric screens to improve usability on various device sizes. Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
The subtitle on the Device, Environment, Power, PAX, and Signal metrics screens now includes a count of the available logs. This change also refactors the layout by: - Removing the `ChartHeader` composable, which previously displayed the log count below the app bar. - Moving the info icon, where present, from the `ChartHeader` to the `MainAppBar` actions. - Introducing `AdaptiveMetricLayout` in `PaxMetrics.kt` to better handle screen layout. Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit introduces a `BaseMetricScreen` composable to abstract common logic from the various metric screens (Device, Signal, Environment). This significantly reduces boilerplate code for layout, state handling, and interaction synchronization between charts and lists. Key changes: - Created `BaseMetricScreen.kt` to house the new generic screen template. - Refactored `DeviceMetricsScreen` and `SignalMetricsScreen` to use `BaseMetricScreen`. - Improved the `LegendInfoDialog` with better styling, icons, and colors for clarity. - The chart legend is now dynamically filtered to only show data series that are actually present in the telemetry data. - The `DeviceMetricsCard` now conditionally displays indicators and values based on data availability (e.g., battery, voltage). Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
The refresh button in the metric charts is now available for the local node, allowing users to manually request updated telemetry data. Previously, this functionality was only enabled for remote nodes. Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4383 +/- ##
=====================================
Coverage 0.00% 0.00%
=====================================
Files 3 3
Lines 28 28
Branches 8 8
=====================================
Misses 28 28 ☔ View full report in Codecov by Sentry. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces significant improvements to the Meshtastic metric chart UI components, focusing on adaptive layouts, enhanced legends, and better code organization for chart-related screens. The most important changes are the addition of adaptive layouts for metric screens, a redesigned and more flexible legend with improved dialog support, and updates to color definitions for consistency and clarity.
UI and Layout Enhancements:
AdaptiveMetricLayoutandBaseMetricScreencomposables to provide responsive layouts for metric screens, automatically adapting between row (tablet/landscape) and column (phone) layouts, and centralizing common UI logic such as app bar, snackbar, and info dialogs.Legendcomposable with a more flexible layout (FlowRow) and improved dialog (LegendInfoDialog) for displaying metric information, including color indicators and definitions. [1] [2]Color and Styling Updates:
GraphColorsobject to use custom color values forGold,Cyan,Red,Blue, andGreeninstead of defaultColorconstants, ensuring consistent color usage across charts.Codebase Organization and Cleanup:
ChartStyling.ktby using fully qualified names and removing unnecessary imports. [1] [2]General Maintenance:
These changes collectively enhance the usability, maintainability, and visual consistency of the Meshtastic metric chart UI components.