Add stats overview

This commit is contained in:
problematicconsumer
2023-08-30 16:18:38 +03:30
parent 89bc1b80fd
commit 6a2e359bbe
15 changed files with 192 additions and 208 deletions

View File

@@ -1,4 +1,3 @@
export 'connection_facade.dart';
export 'connection_failure.dart';
export 'connection_status.dart';
export 'traffic.dart';

View File

@@ -1,13 +0,0 @@
import 'package:freezed_annotation/freezed_annotation.dart';
part 'traffic.freezed.dart';
@freezed
class Traffic with _$Traffic {
const Traffic._();
const factory Traffic({
required int upload,
required int download,
}) = _Traffic;
}

View File

@@ -5,6 +5,8 @@ part 'core_status.g.dart';
@freezed
class CoreStatus with _$CoreStatus {
const CoreStatus._();
@JsonSerializable(fieldRename: FieldRename.kebab)
const factory CoreStatus({
required int connectionsIn,
@@ -15,6 +17,15 @@ class CoreStatus with _$CoreStatus {
required int downlinkTotal,
}) = _CoreStatus;
factory CoreStatus.empty() => const CoreStatus(
connectionsIn: 0,
connectionsOut: 0,
uplink: 0,
downlink: 0,
uplinkTotal: 0,
downlinkTotal: 0,
);
factory CoreStatus.fromJson(Map<String, dynamic> json) =>
_$CoreStatusFromJson(json);
}

View File

@@ -1,3 +1,4 @@
export 'core_status.dart';
export 'outbounds.dart';
export 'proxy_type.dart';
export 'singbox_facade.dart';

View File

@@ -299,16 +299,8 @@ class ProfileSubscriptionInfo extends HookConsumerWidget {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text.rich(
TextSpan(
children: [
TextSpan(text: formatByte(subInfo.consumption, unit: 3).size),
const TextSpan(text: " / "),
TextSpan(text: formatByte(subInfo.total, unit: 3).size),
const TextSpan(text: " "),
TextSpan(text: t.profile.subscription.gigaByte),
],
),
Text(
subInfo.consumption.sizeOf(subInfo.total),
style: theme.textTheme.bodySmall,
),
Text(

View File

@@ -0,0 +1,23 @@
import 'package:hiddify/data/data_providers.dart';
import 'package:hiddify/domain/singbox/singbox.dart';
import 'package:hiddify/features/common/connectivity/connectivity_controller.dart';
import 'package:hiddify/utils/utils.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
part 'stats_notifier.g.dart';
@riverpod
class StatsNotifier extends _$StatsNotifier with AppLogger {
@override
Stream<CoreStatus> build() async* {
final serviceRunning = await ref.watch(serviceRunningProvider.future);
if (serviceRunning) {
yield* ref
.watch(coreFacadeProvider)
.watchCoreStatus()
.map((event) => event.getOrElse((_) => CoreStatus.empty()));
} else {
yield* Stream.value(CoreStatus.empty());
}
}
}

View File

@@ -0,0 +1,104 @@
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:hiddify/core/core_providers.dart';
import 'package:hiddify/domain/singbox/singbox.dart';
import 'package:hiddify/features/common/stats/stats_notifier.dart';
import 'package:hiddify/utils/utils.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:recase/recase.dart';
class StatsOverview extends HookConsumerWidget {
const StatsOverview({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final t = ref.watch(translationsProvider);
final stats =
ref.watch(statsNotifierProvider).asData?.value ?? CoreStatus.empty();
return Padding(
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_StatCard(
title: t.home.stats.traffic.titleCase,
firstStat: (
label: t.home.stats.uplink.titleCase,
data: stats.uplink.speed(),
),
secondStat: (
label: t.home.stats.downlink.titleCase,
data: stats.downlink.speed(),
),
),
const Gap(8),
_StatCard(
title: t.home.stats.trafficTotal.titleCase,
firstStat: (
label: t.home.stats.uplink.titleCase,
data: stats.uplinkTotal.size(),
),
secondStat: (
label: t.home.stats.downlink.titleCase,
data: stats.downlinkTotal.size(),
),
),
],
),
);
}
}
class _StatCard extends HookConsumerWidget {
const _StatCard({
required this.title,
required this.firstStat,
required this.secondStat,
});
final String title;
final ({String label, String data}) firstStat;
final ({String label, String data}) secondStat;
@override
Widget build(BuildContext context, WidgetRef ref) {
final theme = Theme.of(context);
return Card(
margin: EdgeInsets.zero,
shadowColor: Colors.transparent,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title),
const Gap(4),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
firstStat.label,
style: theme.textTheme.bodySmall,
),
Text(firstStat.data),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
secondStat.label,
style: theme.textTheme.bodySmall,
),
Text(secondStat.data),
],
),
],
),
),
);
}
}

View File

@@ -1,106 +0,0 @@
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):
return _Chart(traffics, chartSteps);
case AsyncLoading(:final value):
if (value == null) return const SizedBox();
return _Chart(value, chartSteps);
default:
return const SizedBox();
}
}
}
class _Chart extends StatelessWidget {
const _Chart(this.records, this.steps);
final List<Traffic> records;
final int steps;
@override
Widget build(BuildContext context) {
final latest = records.lastOrNull ?? const Traffic(upload: 0, download: 0);
final latestUploadData = formatByteSpeed(latest.upload);
final latestDownloadData = formatByteSpeed(latest.download);
final uploadChartSpots = records.takeLast(steps).mapIndexed(
(index, p) => FlSpot(index.toDouble(), p.upload.toDouble()),
);
final downloadChartSpots = records.takeLast(steps).mapIndexed(
(index, p) => FlSpot(index.toDouble(), p.download.toDouble()),
);
return Column(
mainAxisSize: MainAxisSize.min,
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),
],
);
}
}

View File

@@ -1,54 +0,0 @@
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/features/common/connectivity/connectivity_controller.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() async* {
final serviceRunning = await ref.watch(serviceRunningProvider.future);
if (serviceRunning) {
// TODO: temporary!
yield* ref.watch(coreFacadeProvider).watchCoreStatus().map((event) {
return event.map(
(a) => ClashTraffic(upload: a.uplink, download: a.downlink),
);
}).map(
(event) => _mapToState(
event.getOrElse((_) => const ClashTraffic(upload: 0, download: 0)),
),
);
} else {
yield* Stream.periodic(const Duration(seconds: 1)).asyncMap(
(_) async {
return const ClashTraffic(upload: 0, download: 0);
},
).map(_mapToState);
}
}
List<Traffic> _mapToState(ClashTraffic event) {
final previous = state.valueOrNull ??
List.generate(
_steps,
(index) => const Traffic(upload: 0, download: 0),
);
while (previous.length < _steps) {
loggy.debug("previous short, adding");
previous.insert(0, const Traffic(upload: 0, download: 0));
}
return [
...previous.takeLast(_steps - 1),
Traffic(upload: event.upload, download: event.download),
];
}
}

View File

@@ -1,7 +1,7 @@
import 'package:flutter/material.dart';
import 'package:hiddify/core/core_providers.dart';
import 'package:hiddify/core/router/router.dart';
import 'package:hiddify/features/common/traffic/traffic_chart.dart';
import 'package:hiddify/features/common/stats/stats_overview.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:recase/recase.dart';
@@ -53,7 +53,7 @@ class DesktopWrapper extends HookConsumerWidget {
trailing: const Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: TrafficChart(),
child: StatsOverview(),
),
),
),

View File

@@ -1,26 +1,16 @@
import 'dart:math';
import 'package:humanizer/humanizer.dart';
import 'package:intl/intl.dart';
extension ByteFormatter on int {
String size() => bytes().toString();
const _units = ["B", "kB", "MB", "GB", "TB"];
static final _sizeOfFormat =
InformationSizeFormat(permissibleValueUnits: {InformationUnit.gibibyte});
({String size, String unit}) formatByte(int input, {int? unit}) {
const base = 1024;
if (input <= 0) return (size: "0", unit: _units[unit ?? 0]);
final int digitGroups = unit ?? (log(input) / log(base)).round();
return (
size: NumberFormat("#,##0.#").format(input / pow(base, digitGroups)),
unit: _units[digitGroups],
);
}
// TODO remove
({String size, String unit}) formatByteSpeed(int speed) {
const base = 1024;
if (speed <= 0) return (size: "0", unit: "B/s");
final int digitGroups = (log(speed) / log(base)).round();
return (
size: NumberFormat("#,##0.#").format(speed / pow(base, digitGroups)),
unit: "${_units[digitGroups]}/s",
);
String sizeOf(int total) =>
"${_sizeOfFormat.format(bytes())} / ${_sizeOfFormat.format(total.bytes())}";
static final _rateFormat =
InformationRateFormat(permissibleRateUnits: {RateUnit.second});
String speed() => _rateFormat.format(bytes().per(const Duration(seconds: 1)));
}