Skip to content

feat(charts): voltage, colors, legends, and adaptive ui#4383

Merged
jamesarich merged 9 commits into
mainfrom
feat/charts2
Jan 30, 2026
Merged

feat(charts): voltage, colors, legends, and adaptive ui#4383
jamesarich merged 9 commits into
mainfrom
feat/charts2

Conversation

@jamesarich

Copy link
Copy Markdown
Collaborator

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:

  • Added AdaptiveMetricLayout and BaseMetricScreen composables 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.
  • Refactored the legend to use a new Legend composable 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:

  • Updated the GraphColors object to use custom color values for Gold, Cyan, Red, Blue, and Green instead of default Color constants, ensuring consistent color usage across charts.
  • Improved font sizes and indicator visuals in the legend for better clarity and adherence to Material guidelines.

Codebase Organization and Cleanup:

  • Simplified and clarified axis item placer logic in ChartStyling.kt by using fully qualified names and removing unnecessary imports. [1] [2]
  • Cleaned up and modernized documentation and method signatures for color accessors and legend-related composables. [1] [2]

General Maintenance:

  • Updated copyright years in affected files.

These changes collectively enhance the usability, maintainability, and visual consistency of the Meshtastic metric chart UI components.

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>
Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
@github-actions github-actions Bot added the enhancement New feature or request label Jan 30, 2026
@jamesarich jamesarich enabled auto-merge January 30, 2026 23:18
@codecov

codecov Bot commented Jan 30, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 0.00%. Comparing base (c358081) to head (39aadb2).
⚠️ Report is 2 commits behind head on main.
✅ All tests successful. No failed tests found.

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.
📢 Have feedback on the report? Share it here.

@jamesarich jamesarich added this pull request to the merge queue Jan 30, 2026
Merged via the queue into main with commit 9a8a31b Jan 30, 2026
10 checks passed
@jamesarich jamesarich deleted the feat/charts2 branch January 30, 2026 23:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant