2021-04-10 03:04:23 +00:00
|
|
|
import 'dart:math';
|
|
|
|
|
2022-09-16 09:44:15 +00:00
|
|
|
import 'package:easy_localization/easy_localization.dart';
|
2021-04-10 03:04:23 +00:00
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
import 'package:fl_chart/fl_chart.dart';
|
|
|
|
import 'package:selfprivacy/logic/common_enum/common_enum.dart';
|
2022-09-16 09:44:15 +00:00
|
|
|
import 'package:selfprivacy/logic/models/disk_size.dart';
|
2022-11-12 17:29:06 +00:00
|
|
|
import 'package:selfprivacy/logic/models/metrics.dart';
|
2022-09-15 15:40:02 +00:00
|
|
|
import 'package:selfprivacy/ui/pages/server_details/charts/bottom_title.dart';
|
2021-04-10 03:04:23 +00:00
|
|
|
|
|
|
|
class NetworkChart extends StatelessWidget {
|
2022-05-25 12:21:56 +00:00
|
|
|
const NetworkChart({
|
|
|
|
required this.listData,
|
|
|
|
required this.period,
|
|
|
|
required this.start,
|
2022-10-26 16:26:09 +00:00
|
|
|
super.key,
|
2022-06-09 21:13:06 +00:00
|
|
|
});
|
2021-04-10 03:04:23 +00:00
|
|
|
|
|
|
|
final List<List<TimeSeriesData>> listData;
|
|
|
|
final Period period;
|
|
|
|
final DateTime start;
|
|
|
|
|
2022-06-05 22:40:34 +00:00
|
|
|
List<FlSpot> getSpots(final data) {
|
2021-04-10 03:04:23 +00:00
|
|
|
var i = 0;
|
2022-06-05 22:40:34 +00:00
|
|
|
final List<FlSpot> res = [];
|
2021-04-10 03:04:23 +00:00
|
|
|
|
2022-06-05 22:40:34 +00:00
|
|
|
for (final d in data) {
|
2021-04-10 03:04:23 +00:00
|
|
|
res.add(FlSpot(i.toDouble(), d.value));
|
|
|
|
i++;
|
|
|
|
}
|
|
|
|
|
|
|
|
return res;
|
|
|
|
}
|
|
|
|
|
|
|
|
@override
|
2022-09-16 09:44:15 +00:00
|
|
|
Widget build(final BuildContext context) => LineChart(
|
|
|
|
LineChartData(
|
|
|
|
lineTouchData: LineTouchData(
|
|
|
|
enabled: true,
|
|
|
|
touchTooltipData: LineTouchTooltipData(
|
|
|
|
tooltipBgColor: Theme.of(context).colorScheme.surface,
|
|
|
|
tooltipPadding: const EdgeInsets.all(8),
|
|
|
|
getTooltipItems: (final List<LineBarSpot> touchedBarSpots) {
|
|
|
|
final List<LineTooltipItem> res = [];
|
|
|
|
|
|
|
|
bool timeShown = false;
|
|
|
|
|
|
|
|
for (final spot in touchedBarSpots) {
|
|
|
|
final value = spot.y;
|
|
|
|
final date = listData[0][spot.x.toInt()].time;
|
|
|
|
|
|
|
|
res.add(
|
|
|
|
LineTooltipItem(
|
2022-10-03 23:32:35 +00:00
|
|
|
'${timeShown ? '' : DateFormat('HH:mm dd.MM.yyyy').format(date)} ${spot.barIndex == 0 ? 'resource_chart.in'.tr() : 'resource_chart.out'.tr()} ${DiskSize(byte: value.toInt()).toString()}',
|
2022-09-16 09:44:15 +00:00
|
|
|
TextStyle(
|
|
|
|
color: Theme.of(context).colorScheme.onSurface,
|
|
|
|
fontWeight: FontWeight.bold,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
|
|
|
|
timeShown = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
return res;
|
|
|
|
},
|
|
|
|
),
|
|
|
|
),
|
|
|
|
lineBarsData: [
|
|
|
|
// IN
|
|
|
|
LineChartBarData(
|
|
|
|
spots: getSpots(listData[0]),
|
|
|
|
isCurved: false,
|
|
|
|
barWidth: 2,
|
|
|
|
color: Theme.of(context).colorScheme.primary,
|
|
|
|
dotData: FlDotData(
|
|
|
|
show: false,
|
|
|
|
),
|
|
|
|
belowBarData: BarAreaData(
|
|
|
|
show: true,
|
|
|
|
gradient: LinearGradient(
|
|
|
|
colors: [
|
|
|
|
Theme.of(context).colorScheme.primary.withOpacity(0.5),
|
|
|
|
Theme.of(context).colorScheme.primary.withOpacity(0.0),
|
|
|
|
],
|
|
|
|
begin: Alignment.bottomCenter,
|
|
|
|
end: Alignment.topCenter,
|
2022-06-05 22:40:34 +00:00
|
|
|
),
|
2021-04-10 03:04:23 +00:00
|
|
|
),
|
2022-09-16 09:44:15 +00:00
|
|
|
),
|
|
|
|
// OUT
|
|
|
|
LineChartBarData(
|
|
|
|
spots: getSpots(listData[1]),
|
|
|
|
isCurved: false,
|
|
|
|
barWidth: 2,
|
|
|
|
color: Theme.of(context).colorScheme.tertiary,
|
|
|
|
dotData: FlDotData(
|
|
|
|
show: false,
|
|
|
|
),
|
|
|
|
belowBarData: BarAreaData(
|
|
|
|
show: true,
|
|
|
|
gradient: LinearGradient(
|
|
|
|
colors: [
|
|
|
|
Theme.of(context).colorScheme.tertiary.withOpacity(0.5),
|
|
|
|
Theme.of(context).colorScheme.tertiary.withOpacity(0.0),
|
|
|
|
],
|
|
|
|
begin: Alignment.bottomCenter,
|
|
|
|
end: Alignment.topCenter,
|
2022-06-05 22:40:34 +00:00
|
|
|
),
|
2021-04-10 03:04:23 +00:00
|
|
|
),
|
2022-09-16 09:44:15 +00:00
|
|
|
),
|
|
|
|
],
|
|
|
|
minY: 0,
|
|
|
|
maxY: [
|
|
|
|
...listData[0].map((final e) => e.value),
|
|
|
|
...listData[1].map((final e) => e.value)
|
|
|
|
].reduce(max) *
|
|
|
|
1.2,
|
2022-11-16 00:12:49 +00:00
|
|
|
minX: 0,
|
2022-09-16 09:44:15 +00:00
|
|
|
titlesData: FlTitlesData(
|
|
|
|
topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
|
|
|
bottomTitles: AxisTitles(
|
|
|
|
sideTitles: SideTitles(
|
|
|
|
interval: 40,
|
|
|
|
reservedSize: 30,
|
|
|
|
getTitlesWidget: (final value, final titleMeta) => Padding(
|
|
|
|
padding: const EdgeInsets.all(8.0),
|
|
|
|
child: Text(
|
|
|
|
bottomTitle(
|
|
|
|
value.toInt(),
|
|
|
|
listData[0],
|
|
|
|
period,
|
2022-06-05 22:40:34 +00:00
|
|
|
),
|
2022-09-16 09:44:15 +00:00
|
|
|
style: Theme.of(context).textTheme.labelSmall?.copyWith(
|
|
|
|
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
|
|
|
),
|
2022-06-05 22:40:34 +00:00
|
|
|
),
|
|
|
|
),
|
2022-09-16 09:44:15 +00:00
|
|
|
showTitles: true,
|
2022-06-05 22:40:34 +00:00
|
|
|
),
|
2022-09-16 09:44:15 +00:00
|
|
|
),
|
|
|
|
leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
|
|
|
rightTitles: AxisTitles(
|
|
|
|
sideTitles: SideTitles(
|
|
|
|
reservedSize: 50,
|
|
|
|
getTitlesWidget: (final value, final titleMeta) => Padding(
|
|
|
|
padding: const EdgeInsets.only(left: 5),
|
|
|
|
child: Text(
|
|
|
|
DiskSize(byte: value.toInt()).toString(),
|
|
|
|
style: Theme.of(context).textTheme.labelSmall?.copyWith(
|
|
|
|
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
|
|
|
),
|
2022-06-05 22:40:34 +00:00
|
|
|
),
|
|
|
|
),
|
2022-09-16 09:44:15 +00:00
|
|
|
interval: [
|
|
|
|
...listData[0].map((final e) => e.value),
|
|
|
|
...listData[1].map((final e) => e.value)
|
|
|
|
].reduce(max) *
|
|
|
|
2 /
|
|
|
|
6.5,
|
|
|
|
showTitles: true,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
gridData: FlGridData(
|
|
|
|
show: true,
|
|
|
|
drawVerticalLine: true,
|
|
|
|
verticalInterval: 40,
|
|
|
|
horizontalInterval: [
|
|
|
|
...listData[0].map((final e) => e.value),
|
|
|
|
...listData[1].map((final e) => e.value)
|
|
|
|
].reduce(max) *
|
|
|
|
2 /
|
|
|
|
6.5,
|
|
|
|
getDrawingHorizontalLine: (final value) => FlLine(
|
|
|
|
color: Theme.of(context).colorScheme.outline.withOpacity(0.3),
|
|
|
|
strokeWidth: 1,
|
|
|
|
),
|
|
|
|
getDrawingVerticalLine: (final value) => FlLine(
|
|
|
|
color: Theme.of(context).colorScheme.outline.withOpacity(0.3),
|
|
|
|
strokeWidth: 1,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
borderData: FlBorderData(
|
|
|
|
show: true,
|
|
|
|
border: Border(
|
|
|
|
bottom: BorderSide(
|
|
|
|
color: Theme.of(context).colorScheme.outline.withOpacity(0.3),
|
|
|
|
width: 1,
|
|
|
|
),
|
|
|
|
left: BorderSide(
|
|
|
|
color: Theme.of(context).colorScheme.outline.withOpacity(0.3),
|
|
|
|
width: 1,
|
|
|
|
),
|
|
|
|
right: BorderSide(
|
|
|
|
color: Theme.of(context).colorScheme.outline.withOpacity(0.3),
|
|
|
|
width: 1,
|
|
|
|
),
|
|
|
|
top: BorderSide(
|
|
|
|
color: Theme.of(context).colorScheme.outline.withOpacity(0.3),
|
|
|
|
width: 1,
|
2021-04-10 10:06:29 +00:00
|
|
|
),
|
2021-04-10 03:04:23 +00:00
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
2022-06-05 22:40:34 +00:00
|
|
|
);
|
2021-04-10 03:04:23 +00:00
|
|
|
|
|
|
|
bool checkToShowTitle(
|
2022-06-05 22:40:34 +00:00
|
|
|
final double minValue,
|
|
|
|
final double maxValue,
|
|
|
|
final SideTitles sideTitles,
|
|
|
|
final double appliedInterval,
|
|
|
|
final double value,
|
2021-04-10 03:04:23 +00:00
|
|
|
) {
|
|
|
|
if (value < 0) {
|
|
|
|
return false;
|
|
|
|
} else if (value == 0) {
|
|
|
|
return true;
|
|
|
|
}
|
2022-06-05 22:40:34 +00:00
|
|
|
|
|
|
|
final diff = value - minValue;
|
|
|
|
final finalValue = diff / 20;
|
2022-05-25 12:21:56 +00:00
|
|
|
return finalValue - finalValue.floor() == 0;
|
2021-04-10 03:04:23 +00:00
|
|
|
}
|
|
|
|
}
|