Repository: GyulyVGC/sniffnet (language: rust)

Issue:
Improve time values on the horizontal axis of the chart
### Is there an existing issue for this?

- [X] I have searched the existing issues.

### Describe the solution you'd like

Currently, the app displays the number of seconds since the beginning of the capture on the horizontal axis of the chart in the _Overview_ page.

For better readability, we should display elapsed time as `hh:mm:ss`

_Note: since only the past 30 seconds of activity are displayed, showing timestamps would be meaningless._

### Is your feature request related to a problem?

_No response_


Discussion / hints:

Fix patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 93874256c..daad39df0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ All Sniffnet releases with the relative changes are documented in this file.
   - Chinese ([#575](https://github.com/GyulyVGC/sniffnet/pull/575))
   - Korean ([#604](https://github.com/GyulyVGC/sniffnet/pull/604))
   - Turkish ([#608](https://github.com/GyulyVGC/sniffnet/pull/608))
+- Improve time values on the horizontal axis of the chart ([#641](https://github.com/GyulyVGC/sniffnet/pull/641) — fixes [#619](https://github.com/GyulyVGC/sniffnet/issues/619))
 - Migrate to Iced 0.13 ([#618](https://github.com/GyulyVGC/sniffnet/pull/618))
 - Added support for Linux `loongarch64` (fixes [#592](https://github.com/GyulyVGC/sniffnet/issues/592))
 
diff --git a/src/chart/types/traffic_chart.rs b/src/chart/types/traffic_chart.rs
index df8afe5f6..13f581705 100644
--- a/src/chart/types/traffic_chart.rs
+++ b/src/chart/types/traffic_chart.rs
@@ -15,6 +15,7 @@ use crate::gui::styles::types::palette::to_rgb_color;
 use crate::gui::types::message::Message;
 use crate::networking::types::traffic_direction::TrafficDirection;
 use crate::translations::translations::{incoming_translation, outgoing_translation};
+use crate::utils::formatted_strings::get_formatted_num_seconds;
 use crate::{ByteMultiple, ChartType, Language, StyleType};
 
 /// Struct defining the chart to be displayed in gui run page
@@ -217,7 +218,10 @@ impl Chart<Message> for TrafficChart {
                 &|bytes| ByteMultiple::formatted_string(bytes.abs() as u128)
             })
             .x_labels(min(6, x_labels))
-            .x_label_formatter(&std::string::ToString::to_string)
+            .x_label_formatter(
+                #[allow(clippy::cast_possible_truncation, clippy::cast_sign_loss)]
+                &|seconds| get_formatted_num_seconds(seconds.abs() as u128),
+            )
             .draw()
             .unwrap();
 
diff --git a/src/gui/styles/scrollbar.rs b/src/gui/styles/scrollbar.rs
index d3c5edca4..c926055e0 100644
--- a/src/gui/styles/scrollbar.rs
+++ b/src/gui/styles/scrollbar.rs
@@ -50,17 +50,12 @@ impl ScrollbarType {
     }
 
     #[allow(clippy::unused_self)]
-    fn hovered(
-        &self,
-        style: &StyleType,
-        is_mouse_over_x_scrollbar: bool,
-        is_mouse_over_y_scrollbar: bool,
-    ) -> Style {
+    fn hovered(&self, style: &StyleType, is_mouse_over_x: bool, is_mouse_over_y: bool) -> Style {
         let colors = style.get_palette();
         let ext = style.get_extension();
 
         let [horizontal_rail, vertical_rail] =
-            [is_mouse_over_x_scrollbar, is_mouse_over_y_scrollbar].map(|is_over| Rail {
+            [is_mouse_over_x, is_mouse_over_y].map(|is_over| Rail {
                 background: Some(Background::Color(Color {
                     a: ext.alpha_round_borders,
                     ..ext.buttons_color
diff --git a/src/utils/formatted_strings.rs b/src/utils/formatted_strings.rs
index df27cde68..a022b7662 100644
--- a/src/utils/formatted_strings.rs
+++ b/src/utils/formatted_strings.rs
@@ -152,3 +152,52 @@ pub fn get_path_termination_string(full_path: &str, i: usize) -> String {
     ]
     .concat()
 }
+
+pub fn get_formatted_num_seconds(num_seconds: u128) -> String {
+    match num_seconds {
+        0..3600 => format!("{:02}:{:02}", num_seconds / 60, num_seconds % 60),
+        _ => format!(
+            "{:02}:{:02}:{:02}",
+            num_seconds / 3600,
+            (num_seconds % 3600) / 60,
+            num_seconds % 60
+        ),
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_formatted_num_seconds() {
+        assert_eq!(get_formatted_num_seconds(0), "00:00");
+        assert_eq!(get_formatted_num_seconds(1), "00:01");
+        assert_eq!(get_formatted_num_seconds(28), "00:28");
+        assert_eq!(get_formatted_num_seconds(59), "00:59");
+        assert_eq!(get_formatted_num_seconds(60), "01:00");
+        assert_eq!(get_formatted_num_seconds(61), "01:01");
+        assert_eq!(get_formatted_num_seconds(119), "01:59");
+        assert_eq!(get_formatted_num_seconds(120), "02:00");
+        assert_eq!(get_formatted_num_seconds(121), "02:01");
+        assert_eq!(get_formatted_num_seconds(3500), "58:20");
+        assert_eq!(get_formatted_num_seconds(3599), "59:59");
+        assert_eq!(get_formatted_num_seconds(3600), "01:00:00");
+        assert_eq!(get_formatted_num_seconds(3601), "01:00:01");
+        assert_eq!(get_formatted_num_seconds(3661), "01:01:01");
+        assert_eq!(get_formatted_num_seconds(7139), "01:58:59");
+        assert_eq!(get_formatted_num_seconds(7147), "01:59:07");
+        assert_eq!(get_formatted_num_seconds(7199), "01:59:59");
+        assert_eq!(get_formatted_num_seconds(7200), "02:00:00");
+        assert_eq!(get_formatted_num_seconds(9999), "02:46:39");
+        assert_eq!(get_formatted_num_seconds(36000), "10:00:00");
+        assert_eq!(get_formatted_num_seconds(36001), "10:00:01");
+        assert_eq!(get_formatted_num_seconds(36061), "10:01:01");
+        assert_eq!(get_formatted_num_seconds(86400), "24:00:00");
+        assert_eq!(get_formatted_num_seconds(123456789), "34293:33:09");
+        assert_eq!(
+            get_formatted_num_seconds(u128::MAX),
+            "94522879700260684295381835397713392:04:15"
+        );
+    }
+}


Test patch: