From 48c7d7be2c59eb9d6cf46a61041b89c871a585cd Mon Sep 17 00:00:00 2001 From: NaiJi Date: Mon, 5 Aug 2024 12:47:54 +0400 Subject: [PATCH] refactor(charts): Optimize wasted calculation for network chart --- .../server_details/charts/network_charts.dart | 322 +++++++++--------- 1 file changed, 157 insertions(+), 165 deletions(-) diff --git a/lib/ui/pages/server_details/charts/network_charts.dart b/lib/ui/pages/server_details/charts/network_charts.dart index 9ad3850f..1cb07b80 100644 --- a/lib/ui/pages/server_details/charts/network_charts.dart +++ b/lib/ui/pages/server_details/charts/network_charts.dart @@ -33,182 +33,174 @@ class NetworkChart extends StatelessWidget { } @override - Widget build(final BuildContext context) => 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) { + final listDataMax = [ + ...listData[0].map((final e) => e.value), + ...listData[1].map((final e) => e.value), + ].reduce(max); + return 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; + bool timeShown = false; - for (final spot in touchedBarSpots) { - final value = spot.y; - final date = listData[0][spot.x.toInt()].time; + for (final spot in touchedBarSpots) { + final value = spot.y; + final date = listData[0][spot.x.toInt()].time; - res.add( - LineTooltipItem( - '${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()}', - TextStyle( - color: Theme.of(context).colorScheme.onSurface, - fontWeight: FontWeight.bold, + res.add( + LineTooltipItem( + '${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()}', + 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: const 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, + ), + ), + ), + // OUT + LineChartBarData( + spots: getSpots(listData[1]), + isCurved: false, + barWidth: 2, + color: Theme.of(context).colorScheme.tertiary, + dotData: const 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, + ), + ), + ), + ], + minY: 0, + maxY: listDataMax * 1.2, + 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: Text( + bottomTitle( + value.toInt(), + listData[0], + period, + ), + style: Theme.of(context).textTheme.labelSmall?.copyWith( + color: Theme.of(context).colorScheme.onSurfaceVariant, ), - ), - ); - - timeShown = true; - } - - return res; - }, + ), + ), + showTitles: true, ), ), - lineBarsData: [ - // IN - LineChartBarData( - spots: getSpots(listData[0]), - isCurved: false, - barWidth: 2, - color: Theme.of(context).colorScheme.primary, - dotData: const 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, - ), - ), - ), - // OUT - LineChartBarData( - spots: getSpots(listData[1]), - isCurved: false, - barWidth: 2, - color: Theme.of(context).colorScheme.tertiary, - dotData: const 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, - ), - ), - ), - ], - minY: 0, - maxY: [ - ...listData[0].map((final e) => e.value), - ...listData[1].map((final e) => e.value), - ].reduce(max) * - 1.2, - 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: Text( - bottomTitle( - value.toInt(), - listData[0], - period, - ), - style: Theme.of(context).textTheme.labelSmall?.copyWith( - color: Theme.of(context).colorScheme.onSurfaceVariant, - ), - ), - ), - showTitles: true, - ), - ), - leftTitles: const 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, - ), - ), - ), - interval: [ - ...listData[0].map((final e) => e.value), - ...listData[1].map((final e) => e.value), - ].reduce(max) * - 2 / - 6.5, - showTitles: true, - ), - ), + leftTitles: const AxisTitles( + sideTitles: SideTitles(showTitles: false), ), - 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, + 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, + ), + ), ), + interval: listDataMax * 2 / 6.5, + showTitles: true, ), ), ), - ); + gridData: FlGridData( + show: true, + drawVerticalLine: true, + verticalInterval: 40, + horizontalInterval: listDataMax * 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, + ), + ), + ), + ), + ); + } bool checkToShowTitle( final double minValue,