From 55d88fe9d43cd3618c5719b9e1b2429d438701cb Mon Sep 17 00:00:00 2001 From: Inex Code Date: Wed, 14 Aug 2024 08:10:56 +0300 Subject: [PATCH] fix(ui): Disk chart had too many horizontal grid lines --- .../server_details/charts/disk_charts.dart | 244 +++++++++--------- 1 file changed, 118 insertions(+), 126 deletions(-) diff --git a/lib/ui/pages/server_details/charts/disk_charts.dart b/lib/ui/pages/server_details/charts/disk_charts.dart index ad7cc2b8..9c86015b 100644 --- a/lib/ui/pages/server_details/charts/disk_charts.dart +++ b/lib/ui/pages/server_details/charts/disk_charts.dart @@ -1,5 +1,3 @@ -import 'dart:math'; - import 'package:easy_localization/easy_localization.dart'; import 'package:fl_chart/fl_chart.dart'; import 'package:flutter/material.dart'; @@ -63,149 +61,143 @@ class DiskChart extends StatelessWidget { } @override - Widget build(final BuildContext context) { - final diskDataMax = [ - ...diskData.map>( - (final disk) => disk.diskData.map((final e) => e.value).toList(), - ), - ].expand((final x) => x).reduce(max); - return Semantics( - label: screenReaderDescription(context), - child: LineChart( - LineChartData( - lineTouchData: LineTouchData( - enabled: true, - touchTooltipData: LineTouchTooltipData( - getTooltipColor: (final LineBarSpot _) => - Theme.of(context).colorScheme.surface, - tooltipPadding: const EdgeInsets.all(8), - getTooltipItems: (final List touchedBarSpots) { - final List res = []; + Widget build(final BuildContext context) => Semantics( + label: screenReaderDescription(context), + child: LineChart( + LineChartData( + lineTouchData: LineTouchData( + enabled: true, + touchTooltipData: LineTouchTooltipData( + getTooltipColor: (final LineBarSpot _) => + Theme.of(context).colorScheme.surface, + tooltipPadding: const EdgeInsets.all(8), + getTooltipItems: (final List touchedBarSpots) { + final List res = []; - bool timeShown = false; - for (final spot in touchedBarSpots) { - final value = spot.y; - final date = diskData.first.diskData[spot.x.toInt()].time; + bool timeShown = false; + for (final spot in touchedBarSpots) { + final value = spot.y; + final date = diskData.first.diskData[spot.x.toInt()].time; - res.add( - LineTooltipItem( - '${timeShown ? '' : DateFormat('HH:mm dd.MM.yyyy').format(date)} ${diskData[spot.barIndex].volume.displayName} ${value.toInt()}%', - TextStyle( - color: Theme.of(context).colorScheme.onSurface, - fontWeight: FontWeight.bold, + res.add( + LineTooltipItem( + '${timeShown ? '' : DateFormat('HH:mm dd.MM.yyyy').format(date)} ${diskData[spot.barIndex].volume.displayName} ${value.toInt()}%', + TextStyle( + color: Theme.of(context).colorScheme.onSurface, + fontWeight: FontWeight.bold, + ), + ), + ); + + timeShown = true; + } + + return res; + }, + ), + ), + lineBarsData: diskData + .map( + (final disk) => LineChartBarData( + spots: getSpots(disk.diskData), + isCurved: false, + barWidth: 2, + color: disk.color, + dotData: const FlDotData( + show: false, + ), + belowBarData: BarAreaData( + show: true, + gradient: LinearGradient( + colors: [ + disk.color.withOpacity(0.5), + disk.color.withOpacity(0.0), + ], + begin: Alignment.bottomCenter, + end: Alignment.topCenter, ), ), - ); - - timeShown = true; - } - - return res; - }, - ), - ), - lineBarsData: diskData - .map( - (final disk) => LineChartBarData( - spots: getSpots(disk.diskData), - isCurved: false, - barWidth: 2, - color: disk.color, - dotData: const FlDotData( - show: false, ), - belowBarData: BarAreaData( - show: true, - gradient: LinearGradient( - colors: [ - disk.color.withOpacity(0.5), - disk.color.withOpacity(0.0), - ], - begin: Alignment.bottomCenter, - end: Alignment.topCenter, - ), - ), - ), - ) - .toList(), - minY: 0, - maxY: 100, - minX: 0, - titlesData: FlTitlesData( - topTitles: const 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: ExcludeSemantics( - child: Text( - bottomTitle( - value.toInt(), - diskData.first.diskData, - period, + ) + .toList(), + minY: 0, + maxY: 100, + minX: 0, + titlesData: FlTitlesData( + topTitles: const 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: ExcludeSemantics( + child: Text( + bottomTitle( + value.toInt(), + diskData.first.diskData, + period, + ), + style: Theme.of(context).textTheme.labelSmall?.copyWith( + color: Theme.of(context) + .colorScheme + .onSurfaceVariant, + ), ), - style: Theme.of(context).textTheme.labelSmall?.copyWith( - color: - Theme.of(context).colorScheme.onSurfaceVariant, - ), ), ), + showTitles: true, + ), + ), + leftTitles: const AxisTitles( + sideTitles: SideTitles(showTitles: false), + ), + rightTitles: const AxisTitles( + sideTitles: SideTitles( + showTitles: false, ), - showTitles: true, ), ), - leftTitles: const AxisTitles( - sideTitles: SideTitles(showTitles: false), - ), - rightTitles: const AxisTitles( - sideTitles: SideTitles( - showTitles: false, - ), - ), - ), - gridData: FlGridData( - show: true, - drawVerticalLine: true, - verticalInterval: 40, - horizontalInterval: diskDataMax * 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( + gridData: FlGridData( + show: true, + drawVerticalLine: true, + verticalInterval: 40, + horizontalInterval: 25, + getDrawingHorizontalLine: (final value) => FlLine( color: Theme.of(context).colorScheme.outline.withOpacity(0.3), - width: 1, + strokeWidth: 1, ), - left: BorderSide( + getDrawingVerticalLine: (final value) => FlLine( color: Theme.of(context).colorScheme.outline.withOpacity(0.3), - width: 1, + strokeWidth: 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, + ), + 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, + ), ), ), ), ), - ), - ); - } + ); bool checkToShowTitle( final double minValue,