Donut chart reporting traffic statistics

CHANGELOG.md

@@ -3,6 +3,7 @@
 All Sniffnet releases with the relative changes are documented in this file.
 
 ## [UNRELEASED]
+- Donut chart reporting overall traffic statistics ([#756](https://github.com/GyulyVGC/sniffnet/pull/756) — fixes [#687](https://github.com/GyulyVGC/sniffnet/issues/687))
 - Added support for ARP protocol ([#759](https://github.com/GyulyVGC/sniffnet/pull/759) — fixes [#680](https://github.com/GyulyVGC/sniffnet/issues/680))
 - Identify and tag unassigned/reserved "bogon" IP addresses ([#678](https://github.com/GyulyVGC/sniffnet/pull/678) — fixes [#209](https://github.com/GyulyVGC/sniffnet/issues/209))
 - Show data agglomerates in _Inspect_ page table ([#684](https://github.com/GyulyVGC/sniffnet/pull/684) — fixes [#601](https://github.com/GyulyVGC/sniffnet/issues/601))

src/chart/types/donut_chart.rs

@@ -0,0 +1,162 @@
+use crate::chart::types::chart_type::ChartType;
+use crate::gui::styles::donut::Catalog;
+use crate::gui::styles::style_constants::FONT_SIZE_SUBTITLE;
+use crate::networking::types::byte_multiple::ByteMultiple;
+use iced::alignment::{Horizontal, Vertical};
+use iced::widget::canvas::path::Arc;
+use iced::widget::canvas::{Frame, Text};
+use iced::widget::{canvas, Canvas};
+use iced::{mouse, Font, Radians, Renderer};
+use std::f32::consts;
+
+pub struct DonutChart {
+    chart_type: ChartType,
+    incoming: u128,
+    outgoing: u128,
+    filtered_out: u128,
+    dropped: u128,
+    font: Font,
+}
+
+impl DonutChart {
+    fn new(
+        chart_type: ChartType,
+        incoming: u128,
+        outgoing: u128,
+        filtered_out: u128,
+        dropped: u128,
+        font: Font,
+    ) -> Self {
+        Self {
+            chart_type,
+            incoming,
+            outgoing,
+            filtered_out,
+            dropped,
+            font,
+        }
+    }
+
+    fn total(&self) -> u128 {
+        self.incoming + self.outgoing + self.filtered_out + self.dropped
+    }
+
+    fn title(&self) -> String {
+        let total = self.total();
+        if self.chart_type.eq(&ChartType::Bytes) {
+            ByteMultiple::formatted_string(total)
+        } else {
+            total.to_string()
+        }
+    }
+
+    fn angles(&self) -> [(Radians, Radians); 4] {
+        #[allow(clippy::cast_precision_loss)]
+        let mut values = [
+            self.incoming as f32,
+            self.outgoing as f32,
+            self.filtered_out as f32,
+            self.dropped as f32,
+        ];
+        let total: f32 = values.iter().sum();
+        let min_val = 2.0 * total / 100.0;
+        let mut diff = 0.0;
+
+        for value in &mut values {
+            if *value > 0.0 && *value < min_val {
+                diff += min_val - *value;
+                *value = min_val;
+            }
+        }
+        // remove the diff from the max value
+        if diff > 0.0 {
+            let _ = values
+                .iter_mut()
+                .max_by(|a, b| a.total_cmp(b))
+                .map(|max| *max -= diff);
+        }
+
+        let mut start_angle = Radians(-consts::FRAC_PI_2);
+        values.map(|value| {
+            let start = start_angle;
+            let end = start + Radians(consts::TAU) * value / total;
+            start_angle = end;
+            (start, end)
+        })
+    }
+}
+
+impl<Message, Theme: Catalog> canvas::Program<Message, Theme> for DonutChart {
+    type State = ();
+
+    fn draw(
+        &self,
+        (): &Self::State,
+        renderer: &Renderer,
+        theme: &Theme,
+        bounds: iced::Rectangle,
+        _: mouse::Cursor,
+    ) -> Vec<canvas::Geometry> {
+        let mut frame = Frame::new(renderer, bounds.size());
+        let center = frame.center();
+        let radius = (frame.width().min(frame.height()) / 2.0) * 0.9;
+
+        let style = <Theme as Catalog>::style(theme, &<Theme as Catalog>::default());
+        let colors = [
+            style.incoming,
+            style.outgoing,
+            style.filtered_out,
+            style.dropped,
+        ];
+
+        for ((start_angle, end_angle), color) in self.angles().into_iter().zip(colors) {
+            let path = canvas::Path::new(|builder| {
+                builder.arc(Arc {
+                    center,
+                    radius,
+                    start_angle,
+                    end_angle,
+                });
+                builder.line_to(center);
+                builder.close();
+            });
+
+            frame.fill(&path, color);
+        }
+
+        let inner_circle = canvas::Path::circle(center, radius - 6.0);
+        frame.fill(&inner_circle, style.background);
+        frame.fill_text(Text {
+            content: self.title().clone(),
+            position: center,
+            vertical_alignment: Vertical::Center,
+            horizontal_alignment: Horizontal::Center,
+            color: style.text_color,
+            size: FONT_SIZE_SUBTITLE.into(),
+            font: self.font,
+            ..Default::default()
+        });
+
+        vec![frame.into_geometry()]
+    }
+}
+
+pub fn donut_chart<Message, Theme: Catalog>(
+    chart_type: ChartType,
+    incoming: u128,
+    outgoing: u128,
+    filtered_out: u128,
+    dropped: u128,
+    font: Font,
+) -> Canvas<DonutChart, Message, Theme, Renderer> {
+    iced::widget::canvas(DonutChart::new(
+        chart_type,
+        incoming,
+        outgoing,
+        filtered_out,
+        dropped,
+        font,
+    ))
+    .width(110)
+    .height(110)
+}

src/chart/types/mod.rs

@@ -1,2 +1,3 @@
 pub mod chart_type;
+pub mod donut_chart;
 pub mod traffic_chart;

src/gui/pages/inspect_page.rs

@@ -14,7 +14,7 @@ use iced::{alignment, Alignment, Font, Length, Padding, Pixels};
 use crate::chart::types::chart_type::ChartType;
 use crate::gui::components::tab::get_pages_tabs;
 use crate::gui::components::types::my_modal::MyModal;
-use crate::gui::pages::overview_page::get_bars;
+use crate::gui::pages::overview_page::{get_bars, get_bars_length};
 use crate::gui::styles::button::ButtonType;
 use crate::gui::styles::container::ContainerType;
 use crate::gui::styles::scrollbar::ScrollbarType;
@@ -24,7 +24,7 @@ use crate::gui::styles::text_input::TextInputType;
 use crate::gui::types::message::Message;
 use crate::networking::types::address_port_pair::AddressPortPair;
 use crate::networking::types::byte_multiple::ByteMultiple;
-use crate::networking::types::data_info::DataInfoWithoutTimestamp;
+use crate::networking::types::data_info::DataInfo;
 use crate::networking::types::host_data_states::HostStates;
 use crate::networking::types::info_address_port_pair::InfoAddressPortPair;
 use crate::networking::types::traffic_direction::TrafficDirection;
@@ -559,20 +559,14 @@ fn get_button_change_page<'a>(increment: bool) -> Button<'a, Message, StyleType>
 
 fn get_agglomerates_row<'a>(
     font: Font,
-    tot: DataInfoWithoutTimestamp,
+    tot: DataInfo,
     chart_type: ChartType,
 ) -> Row<'a, Message, StyleType> {
-    let tot_packets = tot.incoming_packets + tot.outgoing_packets;
-    let tot_bytes = tot.incoming_bytes + tot.outgoing_bytes;
+    let tot_packets = tot.tot_packets();
+    let tot_bytes = tot.tot_bytes();
     let width = ReportCol::FILTER_COLUMNS_WIDTH;
 
-    #[allow(clippy::cast_precision_loss)]
-    let in_length = if chart_type == ChartType::Packets {
-        width * (tot.incoming_packets as f32 / tot_packets as f32)
-    } else {
-        width * (tot.incoming_bytes as f32 / tot_bytes as f32)
-    };
-    let out_length = width - in_length;
+    let (in_length, out_length) = get_bars_length(width, chart_type, &tot, &tot);
     let bars = get_bars(in_length, out_length);
 
     let bytes_col = Column::new()