fix(graph): resolve home graph issues

lib/functions/graph.dart

@@ -0,0 +1,18 @@
+/// Calculate a suitable interval for the graph
+///
+/// [topPoint] represents the maximum value on the graph.
+///
+/// The function returns an interval that divides the range
+/// into approximately 5 segments, while ensuring that the interval
+/// is not too small (minimum interval is 1.0).
+double calcInterval(int topPoint) {
+  // Default interval when the top point is 0 or negative
+  if (topPoint <= 0) {
+    return 1.0;
+  }
+
+  final interval = (topPoint / 5.0).ceilToDouble();
+
+  // Ensure the interval is at least 1.0
+  return interval < 1.0 ? 1.0 : interval;
+}

lib/screens/home/widgets/clients_last_hours_line.dart

@@ -2,6 +2,7 @@ import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 import 'package:pi_hole_client/config/theme.dart';
 import 'package:pi_hole_client/functions/format.dart';
+import 'package:pi_hole_client/functions/graph.dart';
 import 'package:pi_hole_client/providers/app_config_provider.dart';
 import 'package:provider/provider.dart';
 
@@ -35,14 +36,11 @@ class ClientsLastHoursLine extends StatelessWidget {
   }
 
   LineChartData mainData(Map<String, dynamic> data, ThemeMode selectedTheme) {
-    final double interval = (data['topPoint'] / 5).toDouble() > 0
-        ? (data['topPoint'] / 5).toDouble()
-        : data['topPoint'].toDouble() > 0
-            ? data['topPoint'].toDouble()
-            : 1.0;
+    final interval = calcInterval(data['topPoint']);
     return LineChartData(
       gridData: FlGridData(
         drawVerticalLine: false,
+        horizontalInterval: interval,
         getDrawingHorizontalLine: (value) => FlLine(
           color: selectedTheme == ThemeMode.light
               ? Colors.black12
@@ -215,6 +213,7 @@ class ClientsLastHoursLine extends StatelessWidget {
         timestamps.add(k[i]);
       }
 
+      /// Dummy data for legend
       final flatLine = <FlSpot>[];
       var xPosition = 0;
       for (var j = 0;

lib/screens/home/widgets/queries_last_hours_line.dart

@@ -3,6 +3,7 @@
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:pi_hole_client/config/theme.dart';
 import 'package:pi_hole_client/functions/format.dart';
+import 'package:pi_hole_client/functions/graph.dart';
 import 'package:pi_hole_client/providers/app_config_provider.dart';
 import 'package:provider/provider.dart';
 
@@ -16,16 +17,62 @@
   final Map<String, dynamic> data;
   final bool reducedData;
 
+  /// Create the legend for the tooltip.
+  List<LineTooltipItem> _createLegend(
+    Map<String, dynamic> data,
+    List<LineBarSpot> items,
+    ThemeMode selectedTheme,
+  ) {
+    final legend = List<LineTooltipItem>.filled(
+      3,
+      const LineTooltipItem('', TextStyle()),
+    );
+
+    for (final item in items) {
+      switch (item.barIndex) {
+        case 0:
+          legend[0] = LineTooltipItem(
+            formatTimestampForChart(data['time'][item.x.toInt()]),
+            TextStyle(
+              fontWeight: FontWeight.bold,
+              fontSize: 14,
+              color: selectedTheme == ThemeMode.light
+                  ? Colors.black
+                  : Colors.white,
+            ),
+          );
+        case 1:
+          legend[1] = LineTooltipItem(
+            'Blocked: ${item.y.toInt()}',
+            const TextStyle(
+              fontWeight: FontWeight.bold,
+              fontSize: 14,
+              color: Colors.blue,
+            ),
+          );
+        case 2:
+          legend[2] = LineTooltipItem(
+            'Not blocked: ${item.y.toInt()}',
+            const TextStyle(
+              fontWeight: FontWeight.bold,
+              fontSize: 14,
+              color: Colors.green,
+            ),
+          );
+        default:
+          break;
+      }
+    }
+
+    return legend;
+  }
+
   LineChartData mainData(
     Map<String, dynamic> data,
     ThemeMode selectedTheme,
     BuildContext context,
   ) {
-    final double interval = (data['topPoint'] / 5).toDouble() > 0
-        ? (data['topPoint'] / 5).toDouble()
-        : data['topPoint'].toDouble() > 0
-            ? data['topPoint'].toDouble()
-            : 1.0;
+    final interval = calcInterval(data['topPoint']);
     return LineChartData(
       gridData: FlGridData(
         drawVerticalLine: false,
@@ -44,8 +91,7 @@
         leftTitles: AxisTitles(
           sideTitles: SideTitles(
             showTitles: true,
-            interval:
-                data['topPoint'] == 0 ? 1 : (data['topPoint'] / 5).toDouble(),
+            interval: interval,
             reservedSize: 35,
             getTitlesWidget: (value, widget) => Text(
               value.toInt().toString(),
@@ -73,11 +119,13 @@
       ),
       lineBarsData: [
         // Hidden bar to allow 3 items on tooltip
+        // barIndex: 0
         LineChartBarData(
-          spots: data['data']['domains'],
+          spots: data['data']['flatLines'],
           color: Colors.transparent,
           barWidth: 0,
         ),
+        // barIndex: 1
         LineChartBarData(
           spots: data['data']['ads'],
           color: Theme.of(context).extension<GraphColors>()!.getColor(0),
@@ -95,6 +143,7 @@
                 .withValues(alpha: 0.2),
           ),
         ),
+        // barIndex: 2
         LineChartBarData(
           spots: data['data']['domains'],
           color: Theme.of(context).extension<GraphColors>()!.getColor(3),
@@ -119,55 +168,44 @@
               ? const Color.fromRGBO(220, 220, 220, 0.9)
               : const Color.fromRGBO(35, 35, 35, 0.9),
           fitInsideHorizontally: true,
-          getTooltipItems: (items) => [
-            LineTooltipItem(
-              formatTimestampForChart(data['time'][items[0].x.toInt()]),
-              TextStyle(
-                fontWeight: FontWeight.bold,
-                fontSize: 14,
-                color: selectedTheme == ThemeMode.light
-                    ? Colors.black
-                    : Colors.white,
-              ),
-            ),
-            LineTooltipItem(
-              'Not blocked: ${items[1].y.toInt()}',
-              const TextStyle(
-                fontWeight: FontWeight.bold,
-                fontSize: 14,
-                color: Colors.green,
-              ),
-            ),
-            LineTooltipItem(
-              'Blocked: ${items[2].y.toInt()}',
-              const TextStyle(
-                fontWeight: FontWeight.bold,
-                fontSize: 14,
-                color: Colors.blue,
-              ),
-            ),
-          ],
+          getTooltipItems: (items) => _createLegend(data, items, selectedTheme),
         ),
       ),
     );
   }
 
+  int calcTopPoint(
+    Map<String, dynamic> data,
+    List<String> domainsKeys,
+    List<String> adsKeys,
+    int index,
+  ) {
+    final permitted = data['domains_over_time'][domainsKeys[index]] -
+        data['ads_over_time'][adsKeys[index]];
+
+    final blocked = data['ads_over_time'][adsKeys[index]];
+
+    return permitted > blocked ? permitted : blocked;
+  }
+
   @override
   Widget build(BuildContext context) {
     final appConfigProvider = Provider.of<AppConfigProvider>(context);
 
     Map<String, dynamic> formatData(Map<String, dynamic> data) {
       final domains = <FlSpot>[];
       final ads = <FlSpot>[];
+      final flatLines = <FlSpot>[];
 
       var xPosition = 0;
       var topPoint = 0;
+      var tmp = 0;
       final List<String> domainsKeys = data['domains_over_time'].keys.toList();
       final List<String> adsKeys = data['ads_over_time'].keys.toList();
 
       if (domainsKeys.length != adsKeys.length) {
         return {
-          'data': {'domains': [], 'ads': []},
+          'data': {'domains': [], 'ads': [], 'flatLines': []},
           'topPoint': 0,
           'time': [],
           'error': 'error',
@@ -177,9 +215,9 @@
       for (var i = 0;
           i < data['domains_over_time'].entries.length;
           reducedData == true ? i += 6 : i++) {
-        if (data['domains_over_time'][domainsKeys[i]] > topPoint) {
-          topPoint = data['domains_over_time'][domainsKeys[i]] -
-              data['ads_over_time'][adsKeys[i]];
+        tmp = calcTopPoint(data, domainsKeys, adsKeys, i);
+        if (tmp > topPoint) {
+          topPoint = tmp;
         }
         domains.add(
           FlSpot(
@@ -194,6 +232,13 @@
             data['ads_over_time'][adsKeys[i]].toDouble(),
           ),
         );
+        // Dummy data for legend
+        flatLines.add(
+          FlSpot(
+            xPosition.toDouble(),
+            0.0,
+          ),
+        );
         xPosition++;
       }
 
@@ -204,7 +249,7 @@
       }
 
       return {
-        'data': {'domains': domains, 'ads': ads},
+        'data': {'domains': domains, 'ads': ads, 'flatLines': flatLines},
         'topPoint': topPoint,
         'time': timestamps,
       };