Skip to content

Refactor: Replace custom charts with Vico library#4348

Merged
jamesarich merged 19 commits into
mainfrom
feat/charts
Jan 29, 2026
Merged

Refactor: Replace custom charts with Vico library#4348
jamesarich merged 19 commits into
mainfrom
feat/charts

Conversation

@jamesarich

Copy link
Copy Markdown
Collaborator

This replaces the custom charting implementation across all metrics screens (Device, Environment, Power, Signal, and PAX) with the Vico charting library. This significantly refactors the chart drawing logic, improving maintainability, and introducing new features like pinch-to-zoom and persistent markers.

Key changes include:

  • Charting Library: Integrated the vico library (v3.0.0-beta.3) for all graphing functionalities.
  • Replaced Custom Drawing: Removed the custom Canvas-based chart drawing logic, including GraphUtil.kt and HorizontalLinesOverlay, YAxisLabels, and TimeAxisOverlay composables.
  • Introduced ChartStyling.kt: A new utility object that centralizes Vico chart component styling (lines, points, markers, axes) for a consistent look and feel.
  • Enhanced Chart Interaction:
    • Added pinch-to-zoom functionality on all charts.
    • Implemented chart-to-list synchronization: tapping a data point on the chart highlights the corresponding item in the list below and scrolls to it.
    • Clicking an item in the list scrolls the chart to the corresponding data point.
  • UI/UX Improvements:
    • The time frame selector has been removed in favor of pinch-to-zoom for a more fluid user experience. Charts now default to showing the maximum available data.
    • The "Signal Quality" log is now accessible directly from the node detail screen.
    • Renamed "Local Stats" to "Signal Quality" for clarity.
    • Added a new one_hour time frame option.

jamesarich and others added 8 commits January 27, 2026 18:38
Replaced the custom `Canvas`-based charting implementation across all metric screens (Device, Environment, Power, Signal, Pax) with the `Vico` charting library.

- Integrated the `vico` library for Compose.
- Removed the now-unused `GraphUtil.kt` and `CommonCharts.kt` which contained custom drawing logic.
- Updated `DeviceMetrics.kt`, `EnvironmentCharts.kt`, `PowerMetrics.kt`, `SignalMetrics.kt`, and `PaxMetrics.kt` to use `CartesianChartHost` from `Vico`.
- Refactored data handling to work with `Vico`'s model producers.
- Corrected nullable to non-nullable types in `EnvironmentMetricsState.kt` to align with protobuf definitions.
This commit introduces a centralized `ChartStyling` object to consolidate and reuse chart styling logic across the different metric screens (Device, Environment, Pax, Power, and Signal).

Key changes include:
- A new `ChartStyling.kt` file containing composable functions to create various line styles (e.g., `createGradientLine`, `createPointOnlyLine`, `createBoldLine`).
- Refactoring of `DeviceMetrics.kt`, `EnvironmentCharts.kt`, `PaxMetrics.kt`, `PowerMetrics.kt`, and `SignalMetrics.kt` to use the new `ChartStyling` object, removing repetitive local styling code.
- Addition of composable helper functions in `CommonCharts.kt` to easily access Material 3 theme colors.
- Removal of the unused `timeFrame` parameter from `EnvironmentMetricsChart` and `PaxMetricsChart`.

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
The time format on the x-axis of the metrics charts is now dynamically adjusted based on the selected time frame. This improves readability for different zoom levels.

- 1 & 24 Hours: Show time (HH:MM)
- 48 Hours to 4 Weeks: Show date and time
- Max: Show date only

A new `ONE_HOUR` time frame option has also been added.

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit enhances the node metrics charts by:
- Enabling zoom functionality, allowing users to pan and zoom for a more detailed view of the data. The initial zoom level is set to display the full content of the chart.
- Adding interactive markers that display the specific value when a user taps on a data point.
- Introducing a reusable `rememberMarker` function in `ChartStyling` to provide a consistent look and feel for markers across all charts.

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This change enhances the user experience on the metrics screens by creating a two-way interaction between the charts and the data lists.

- When a data point on the chart is tapped (activating the marker), the corresponding list below automatically scrolls to show that specific data entry.
- Conversely, tapping on an item in the list will scroll the chart to highlight the corresponding data point.

This is implemented across the Device, Environment, Power, Pax, and Signal metrics screens.

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit overhauls the metrics graphing implementation to improve usability and data visualization.

Key changes include:
- Removing the fixed time frame selector (`SlidingSelector`) from all metric screens. The default view now shows all available data (`TimeFrame.MAX`).
- Implementing pinch-to-zoom and pan functionality, allowing users to dynamically explore the data across different time scales.
- Introducing a `dynamicTimeFormatter` for the horizontal axis, which automatically adjusts the time label format (from seconds to dates) based on the visible time span.
- Refactoring charts to use multiple vertical axes (start and end) for displaying different units (e.g., RSSI/SNR, Voltage/Current, Pressure/Other) without normalization. This ensures raw values are plotted directly, simplifying the code and improving accuracy.
- Enhancing marker popups to display formatted values with units.
- Updating chart styling for better readability, including axis labels and marker appearance.
- Removing the unused `vico-views` dependency.

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
Introduces persistent markers on metric charts to highlight selected data points. When a user taps on a point in the chart, a marker remains at that position.

This change also links the chart selection to the corresponding data card in the list below. Selecting a point on the chart now scrolls the list to that item and highlights it with a colored border. Conversely, tapping on a data card scrolls the chart to the corresponding time and places the persistent marker.

This improves the user experience by visually connecting the graphical chart data with its detailed representation in the list.

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit refactors the UI for telemetric features, specifically for signal quality metrics.

Key changes:
- Merges the "Request Local Stats" action into the "Signal Quality" feature.
- The "Signal Quality" feature is now visible for all remote nodes, not just those with 0 hops away.
- Updates various string resources from `request_local_stats` and `sig_metrics_log` to the more descriptive `signal_quality` for consistency across the UI.

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 28, 2026
The title for the Signal Metrics screen has been removed from the string resources.

Additionally, accessibility content descriptions have been added to the refresh button on the Signal Metrics screen to improve screen reader support.

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
@codecov

codecov Bot commented Jan 28, 2026

Copy link
Copy Markdown

Codecov Report

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

Additional details and impacted files
@@          Coverage Diff          @@
##            main   #4348   +/-   ##
=====================================
  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.

The `TimeFrame` enum and its associated filtering logic have been removed from the metrics screens. This simplifies the implementation by removing the time frame selection UI and the corresponding data filtering logic in the view models and state holders.

The charts now always receive the full dataset, and users can rely on pinch-to-zoom and scrolling to inspect specific time ranges. This change streamlines the user interface and the underlying code for displaying device, signal, power, environment, and PAX metrics.

Key changes:
- Removed `TimeFrame` enum and its helper methods.
- Deleted `setTimeFrame` from `MetricsViewModel`.
- Renamed `environmentMetricsFiltered` to `environmentMetricsForGraphing` to better reflect its purpose.
- Removed all `*MetricsFiltered` methods from `MetricsState`, as the views now consume the unfiltered data lists directly.

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit introduces a new screen to display neighbor information logs for a specific node.

Key changes include:
*   Addition of `NeighborInfoLogScreen` to display and manage neighbor info requests and responses.
*   Integration of the new screen into the node details navigation and available logs list.
*   Implementation of logic in `MetricsViewModel` to fetch and handle neighbor info logs.
*   A new `NeighborInfo.kt` model with helper functions to parse and format neighbor information from mesh packets.
*   Creation of a reusable `MetricLogItem` composable for consistent log entry presentation.

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit introduces a visual refresh to the metric log items and various metric cards across the node feature.

The key changes include:
- Adopting `MaterialTheme.typography.titleMediumEmphasized` for titles to create a stronger visual hierarchy.
- Increasing padding and spacing within cards for a less cluttered layout.
- For `MetricLogItem`, a circular background is added to the icon, and the container color is updated to `surfaceVariant` for better distinction.
- Opting into `ExperimentalMaterial3ExpressiveApi` to utilize the latest Material Design components and styles.

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit enhances the visual presentation and readability of the metrics charts.

Key changes include:
- **Colored Markers:** Chart markers now display metric values in colors corresponding to their respective data series, making it easier to distinguish between different metrics like RSSI vs. SNR, or Voltage vs. Current.
- **Colored Axis Labels:** The Y-axis labels are now colored to match the primary metric they represent, improving clarity on multi-axis charts.
- **Improved Axis Spacing:** The X-axis (time) labels have been adjusted for better spacing and to prevent overlapping, particularly on smaller screens.

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit introduces `GenericMetricChart` to encapsulate the common boilerplate for creating metric charts with the Vico library. This simplifies the individual chart composables (`EnvironmentCharts`, `SignalMetrics`, `DeviceMetrics`, `PaxMetrics`, `PowerMetrics`) by removing redundant code for chart setup, marker handling, scrolling, and zooming.

Key changes:
- Created a new `GenericMetricChart` composable that centralizes `CartesianChartHost` configuration.
- Migrated all metric chart implementations to use the new `GenericMetricChart`.
- Extracted a `createColoredMarkerValueFormatter` helper into `ChartStyling` to simplify marker label creation.
- Rotated bottom axis labels by 45 degrees for better readability.
- Added a `rememberItemPlacer` helper in `ChartStyling` for consistent horizontal axis label spacing.
- The `PowerMetrics` screen now visually highlights the selected telemetry data point in both the chart and the list, improving synchronization between them.
- Fixed a minor bug in `NeighborInfoLog` related to parsing SNR values.

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit adjusts the chart styling to ensure that markers and their labels remain clearly visible, even when the associated line is styled to be transparent or invisible.

- **Point-Only Lines:** The line color is now passed to the `fill` property, even for "point-only" charts where the line stroke is set to zero. This allows the chart marker to derive the correct color for its label.
- **Marker Indicator:** The alpha channel for the marker indicator's fill color is forced to `1f`. This makes the indicator fully opaque and visible, regardless of the line's transparency.
- **Marker Label:** The alpha for the marker label's text color is also forced to `1f`, ensuring the text is always readable.
- **Line Fill:** The `fill` property for lines is now consistently set to the `lineColor`, with `areaFill` used for the gradient, providing a clearer configuration.

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit adds subtitles to the app bar on various node metric and log screens to clarify the purpose of each view.

### Key Changes:
- **Subtitles Added:** A subtitle is now displayed below the node name on the following screens:
    - Device Metrics (`device_metrics_log`)
    - Environmental Metrics (`env_metrics_log`)
    - Neighbor Info (`neighbor_info`)
    - Power Metrics (`power_metrics_log`)
    - PAX Counter (`pax_metrics_log`)
    - Signal Quality (`signal_quality`)
    - Traceroute Log (`traceroute_log`)
- **Code Cleanup:**
    - Removed redundant boilerplate GPL comment headers.
    - Replaced a hardcoded chart axis label in `PowerMetrics.kt` with a standardized `ChartStyling.rememberAxisLabel()`.

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
@jamesarich jamesarich marked this pull request as ready for review January 29, 2026 00:28
@jamesarich jamesarich enabled auto-merge January 29, 2026 00:28
@jamesarich jamesarich added this pull request to the merge queue Jan 29, 2026
Merged via the queue into main with commit 70a1b3c Jan 29, 2026
9 checks passed
@jamesarich jamesarich deleted the feat/charts branch January 29, 2026 01:24
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