Added date on home charts tooltip

This commit is contained in:
Juan Gilsanz Polo 2023-07-10 20:45:03 +02:00
parent 97d113f162
commit 2fed0e584c
7 changed files with 194 additions and 23 deletions

View file

@ -636,5 +636,20 @@
"dnsRewriteRuleNotUpdated": "DNS rewrite rule could not be updated",
"updatingRule": "Updating rule...",
"serverUpdateNeeded": "Server update needed",
"updateYourServer": "Update your AdGuard Home server to {version} or greater to use this feature."
"updateYourServer": "Update your AdGuard Home server to {version} or greater to use this feature.",
"january": "January",
"february": "February",
"march": "March",
"april": "April",
"may": "May",
"june": "June",
"july": "July",
"august": "August",
"september": "September",
"october": "October",
"november": "November",
"december": "December",
"malwarePhising": "Malware/phising",
"queries": "Queries",
"adultSites": "Adult sites"
}

View file

@ -636,5 +636,20 @@
"dnsRewriteRuleNotUpdated": "La regla de reescritura DNS no ha podido ser actualizada",
"updatingRule": "Actualizando regla...",
"serverUpdateNeeded": "Actualización del servidor necesaria",
"updateYourServer": "Actualiza tu servidor AdGuard Home a {version} para utilizar esta funcionalidad."
"updateYourServer": "Actualiza tu servidor AdGuard Home a {version} para utilizar esta funcionalidad.",
"january": "Enero",
"february": "Febrero",
"march": "Marzo",
"april": "Abril",
"may": "Mayo",
"june": "Junio",
"july": "Julio",
"august": "Agosto",
"september": "Septiembre",
"october": "Octubre",
"november": "Noviembre",
"december": "Diciembre",
"malwarePhising": "Malware/phising",
"queries": "Peticiones",
"adultSites": "Sitios de adultos"
}

View file

@ -11,6 +11,7 @@ class HomeChart extends StatelessWidget {
final String primaryValue;
final String secondaryValue;
final Color color;
final int hoursInterval;
const HomeChart({
Key? key,
@ -18,22 +19,24 @@ class HomeChart extends StatelessWidget {
required this.label,
required this.primaryValue,
required this.secondaryValue,
required this.color
required this.color,
required this.hoursInterval
}) : super(key: key);
@override
Widget build(BuildContext context) {
final appConfigProvider = Provider.of<AppConfigProvider>(context);
bool isEmpty = true;
for (int item in data) {
if (item > 0) {
isEmpty = false;
break;
}
}
final bool isEmpty = data.any((i) => i == 0);
if (!(appConfigProvider.hideZeroValues == true && isEmpty == true)) {
List<DateTime> dateTimes = [];
DateTime currentDate = DateTime.now().subtract(Duration(hours: hoursInterval*data.length+1));
for (var i = 0; i < data.length; i++) {
currentDate = currentDate.add(Duration(hours: hoursInterval));
dateTimes.add(currentDate);
}
return Column(
children: [
Padding(
@ -109,6 +112,9 @@ class HomeChart extends StatelessWidget {
child: CustomLineChart(
data: data,
color: color,
dates: dateTimes,
daysInterval: hoursInterval == 24,
context: context,
)
),
],

View file

@ -20,7 +20,7 @@ class CombinedChartData {
required this.totalQueries,
this.blockedFilters,
this.replacedSafeBrowsing,
this.replacedParental
this.replacedParental,
});
}
@ -149,6 +149,15 @@ class CombinedHomeChart extends StatelessWidget {
);
}
final hoursInterval = statusProvider.serverStatus!.stats.timeUnits == "days" ? 24 : 1;
List<DateTime> dateTimes = [];
DateTime currentDate = DateTime.now().subtract(Duration(hours: hoursInterval*statusProvider.serverStatus!.stats.dnsQueries.length+1));
for (var i = 0; i < statusProvider.serverStatus!.stats.dnsQueries.length; i++) {
currentDate = currentDate.add(Duration(hours: hoursInterval));
dateTimes.add(currentDate);
}
if (width > 700) {
return Column(
children: [
@ -170,6 +179,9 @@ class CombinedHomeChart extends StatelessWidget {
width: double.maxFinite,
child: CustomCombinedLineChart(
inputData: data,
context: context,
dates: dateTimes,
daysInterval: hoursInterval == 24,
),
),
),
@ -241,6 +253,9 @@ class CombinedHomeChart extends StatelessWidget {
width: double.maxFinite,
child: CustomCombinedLineChart(
inputData: data,
context: context,
dates: dateTimes,
daysInterval: hoursInterval == 24,
),
),
const SizedBox(height: 16),

View file

@ -131,6 +131,7 @@ class _HomeState extends State<Home> {
primaryValue: intFormat(statusProvider.serverStatus!.stats.numDnsQueries, Platform.localeName),
secondaryValue: "${doubleFormat(statusProvider.serverStatus!.stats.avgProcessingTime*1000, Platform.localeName)} ms",
color: Colors.blue,
hoursInterval: statusProvider.serverStatus!.stats.timeUnits == "days" ? 24 : 1,
),
),
FractionallySizedBox(
@ -141,6 +142,7 @@ class _HomeState extends State<Home> {
primaryValue: intFormat(statusProvider.serverStatus!.stats.numBlockedFiltering, Platform.localeName),
secondaryValue: "${statusProvider.serverStatus!.stats.numDnsQueries > 0 ? doubleFormat((statusProvider.serverStatus!.stats.numBlockedFiltering/statusProvider.serverStatus!.stats.numDnsQueries)*100, Platform.localeName) : 0}%",
color: Colors.red,
hoursInterval: statusProvider.serverStatus!.stats.timeUnits == "days" ? 24 : 1,
),
),
FractionallySizedBox(
@ -151,6 +153,7 @@ class _HomeState extends State<Home> {
primaryValue: intFormat(statusProvider.serverStatus!.stats.numReplacedSafebrowsing, Platform.localeName),
secondaryValue: "${statusProvider.serverStatus!.stats.numDnsQueries > 0 ? doubleFormat((statusProvider.serverStatus!.stats.numReplacedSafebrowsing/statusProvider.serverStatus!.stats.numDnsQueries)*100, Platform.localeName) : 0}%",
color: Colors.green,
hoursInterval: statusProvider.serverStatus!.stats.timeUnits == "days" ? 24 : 1,
),
),
FractionallySizedBox(
@ -161,6 +164,7 @@ class _HomeState extends State<Home> {
primaryValue: intFormat(statusProvider.serverStatus!.stats.numReplacedParental, Platform.localeName),
secondaryValue: "${statusProvider.serverStatus!.stats.numDnsQueries > 0 ? doubleFormat((statusProvider.serverStatus!.stats.numReplacedParental/statusProvider.serverStatus!.stats.numDnsQueries)*100, Platform.localeName) : 0}%",
color: Colors.orange,
hoursInterval: statusProvider.serverStatus!.stats.timeUnits == "days" ? 24 : 1,
),
),
],

View file

@ -1,20 +1,57 @@
import 'package:adguard_home_manager/screens/home/combined_chart.dart';
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:provider/provider.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:adguard_home_manager/screens/home/combined_chart.dart';
import 'package:adguard_home_manager/providers/app_config_provider.dart';
class CustomCombinedLineChart extends StatelessWidget {
final CombinedChartData inputData;
final List<DateTime> dates;
final BuildContext context;
final bool daysInterval;
const CustomCombinedLineChart({
Key? key,
required this.inputData,
required this.context,
required this.dates,
required this.daysInterval
}) : super(key: key);
LineChartData mainData(Map<String, dynamic> data, ThemeMode selectedTheme) {
String chartDate(DateTime date) {
String twoDigits(int number) => number.toString().padLeft(2, '0');
String getMonth(int month) {
final List<String> months = [
AppLocalizations.of(context)!.january,
AppLocalizations.of(context)!.february,
AppLocalizations.of(context)!.march,
AppLocalizations.of(context)!.april,
AppLocalizations.of(context)!.may,
AppLocalizations.of(context)!.june,
AppLocalizations.of(context)!.july,
AppLocalizations.of(context)!.august,
AppLocalizations.of(context)!.september,
AppLocalizations.of(context)!.october,
AppLocalizations.of(context)!.november,
AppLocalizations.of(context)!.december,
];
return months[month-1];
}
if (daysInterval == true) {
return "${date.day} ${getMonth(date.month).substring(0, 3)}";
}
else {
return "${date.day} ${getMonth(date.month).substring(0, 3)} ${twoDigits(date.hour)}:00";
}
}
return LineChartData(
gridData: FlGridData(
show: false,
@ -49,14 +86,26 @@ class CustomCombinedLineChart extends StatelessWidget {
tooltipBgColor: selectedTheme == ThemeMode.light
? const Color.fromRGBO(220, 220, 220, 0.9)
: const Color.fromRGBO(35, 35, 35, 0.9),
getTooltipItems: (items) => items.asMap().entries.map((item) => LineTooltipItem(
"${data['lines'][item.key]['label']}: ${item.value.y.toInt().toString()}",
TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
color: data['lines'][item.key]['color']
)
)).toList()
getTooltipItems: (items) {
return [
LineTooltipItem(
chartDate(dates[items[0].x.toInt()]),
TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
color: Theme.of(context).colorScheme.onSurface
)
),
...items.sublist(0, items.length-1).asMap().entries.map((item) => LineTooltipItem(
"${data['lines'][item.key]['label']}: ${item.value.y.toInt().toString()}",
TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
color: data['lines'][item.key]['color']
)
))
];
}
),
)
);
@ -89,8 +138,22 @@ class CustomCombinedLineChart extends StatelessWidget {
return formattedData;
}
List<Map<String, dynamic>> toDraw = [];
List<FlSpot> datesLine(int number) {
final List<FlSpot> formattedData = [];
for (int i = 0; i < number; i++) {
formattedData.add(
FlSpot(
i.toDouble(),
0
)
);
}
return formattedData;
}
List<Map<String, dynamic>> toDraw = [];
toDraw.add({
"data": dataLine(unformattedData.totalQueries.data),
"color": unformattedData.totalQueries.color,
@ -117,6 +180,10 @@ class CustomCombinedLineChart extends StatelessWidget {
"label": unformattedData.replacedParental!.label
});
}
toDraw.add({
"data": datesLine(dates.length),
"color": Colors.transparent,
});
return {
'lines': toDraw,

View file

@ -1,20 +1,56 @@
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:provider/provider.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:adguard_home_manager/providers/app_config_provider.dart';
class CustomLineChart extends StatelessWidget {
final List<int> data;
final Color color;
final List<DateTime> dates;
final bool daysInterval;
final BuildContext context;
const CustomLineChart({
Key? key,
required this.data,
required this.color
required this.color,
required this.dates,
required this.daysInterval,
required this.context
}) : super(key: key);
String chartDate(DateTime date) {
String twoDigits(int number) => number.toString().padLeft(2, '0');
String getMonth(int month) {
final List<String> months = [
AppLocalizations.of(context)!.january,
AppLocalizations.of(context)!.february,
AppLocalizations.of(context)!.march,
AppLocalizations.of(context)!.april,
AppLocalizations.of(context)!.may,
AppLocalizations.of(context)!.june,
AppLocalizations.of(context)!.july,
AppLocalizations.of(context)!.august,
AppLocalizations.of(context)!.september,
AppLocalizations.of(context)!.october,
AppLocalizations.of(context)!.november,
AppLocalizations.of(context)!.december,
];
return months[month-1];
}
if (daysInterval == true) {
return "${date.day} ${getMonth(date.month).substring(0, 3)}";
}
else {
return "${date.day} ${getMonth(date.month).substring(0, 3)} ${twoDigits(date.hour)}:00";
}
}
LineChartData mainData(Map<String, dynamic> data, ThemeMode selectedTheme) {
return LineChartData(
gridData: FlGridData(
@ -43,6 +79,11 @@ class CustomLineChart extends StatelessWidget {
color: color.withOpacity(0.2)
),
),
LineChartBarData(
spots: data['data'],
color: Colors.transparent,
barWidth: 0,
),
],
lineTouchData: LineTouchData(
enabled: true,
@ -51,6 +92,14 @@ class CustomLineChart extends StatelessWidget {
? const Color.fromRGBO(220, 220, 220, 0.9)
: const Color.fromRGBO(35, 35, 35, 0.9),
getTooltipItems: (items) => [
LineTooltipItem(
chartDate(dates[items[0].x.toInt()]),
TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
color: Theme.of(context).colorScheme.onSurface
)
),
LineTooltipItem(
items[0].y.toInt().toString(),
TextStyle(