initial

lib/features/common/traffic/traffic_chart.dart

@@ -0,0 +1,94 @@
+import 'package:dartx/dartx.dart';
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:hiddify/domain/connectivity/connectivity.dart';
+import 'package:hiddify/features/common/traffic/traffic_notifier.dart';
+import 'package:hiddify/utils/utils.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+// TODO: test implementation, rewrite
+class TrafficChart extends HookConsumerWidget {
+  const TrafficChart({
+    super.key,
+    this.chartSteps = 20,
+  });
+
+  final int chartSteps;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final asyncTraffics = ref.watch(trafficNotifierProvider);
+
+    switch (asyncTraffics) {
+      case AsyncData(value: final traffics):
+        final latest =
+            traffics.lastOrNull ?? const Traffic(upload: 0, download: 0);
+        final latestUploadData = formatByteSpeed(latest.upload);
+        final latestDownloadData = formatByteSpeed(latest.download);
+
+        final uploadChartSpots = traffics.takeLast(chartSteps).mapIndexed(
+              (index, p) => FlSpot(index.toDouble(), p.upload.toDouble()),
+            );
+        final downloadChartSpots = traffics.takeLast(chartSteps).mapIndexed(
+              (index, p) => FlSpot(index.toDouble(), p.download.toDouble()),
+            );
+
+        return Column(
+          mainAxisSize: MainAxisSize.min,
+          // mainAxisAlignment: MainAxisAlignment.end,
+          children: [
+            SizedBox(
+              height: 68,
+              child: LineChart(
+                LineChartData(
+                  minY: 0,
+                  borderData: FlBorderData(show: false),
+                  titlesData: const FlTitlesData(show: false),
+                  gridData: const FlGridData(show: false),
+                  lineTouchData: const LineTouchData(enabled: false),
+                  lineBarsData: [
+                    LineChartBarData(
+                      isCurved: true,
+                      preventCurveOverShooting: true,
+                      dotData: const FlDotData(show: false),
+                      spots: uploadChartSpots.toList(),
+                    ),
+                    LineChartBarData(
+                      color: Theme.of(context).colorScheme.tertiary,
+                      isCurved: true,
+                      preventCurveOverShooting: true,
+                      dotData: const FlDotData(show: false),
+                      spots: downloadChartSpots.toList(),
+                    ),
+                  ],
+                ),
+                duration: Duration.zero,
+              ),
+            ),
+            const Gap(16),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: [
+                const Text("↑"),
+                Text(latestUploadData.size),
+                Text(latestUploadData.unit),
+              ],
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: [
+                const Text("↓"),
+                Text(latestDownloadData.size),
+                Text(latestDownloadData.unit),
+              ],
+            ),
+            const Gap(16),
+          ],
+        );
+      // TODO: handle loading and error
+      default:
+        return const SizedBox();
+    }
+  }
+}

lib/features/common/traffic/traffic_notifier.dart

@@ -0,0 +1,40 @@
+import 'package:dartx/dartx.dart';
+import 'package:hiddify/data/data_providers.dart';
+import 'package:hiddify/domain/clash/clash.dart';
+import 'package:hiddify/domain/connectivity/connectivity.dart';
+import 'package:hiddify/utils/utils.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+part 'traffic_notifier.g.dart';
+
+// TODO: improve
+@riverpod
+class TrafficNotifier extends _$TrafficNotifier with AppLogger {
+  int get _steps => 100;
+
+  @override
+  Stream<List<Traffic>> build() {
+    return Stream.periodic(const Duration(seconds: 1)).asyncMap(
+      (_) async {
+        return ref.read(clashFacadeProvider).getTraffic().match(
+          (f) {
+            loggy.warning('failed to watch clash traffic: $f');
+            return const ClashTraffic(upload: 0, download: 0);
+          },
+          (traffic) => traffic,
+        ).run();
+      },
+    ).map(
+      (event) => switch (state) {
+        AsyncData(:final value) => [
+            ...value.takeLast(_steps - 1),
+            Traffic(upload: event.upload, download: event.download),
+          ],
+        _ => List.generate(
+            _steps,
+            (index) => const Traffic(upload: 0, download: 0),
+          )
+      },
+    );
+  }
+}