SelfPrivacy/selfprivacy.org.app
1
0
Fork 0
mirror of https://git.selfprivacy.org/kherel/selfprivacy.org.app.git synced 2025-01-09 17:39:42 +00:00
Code Issues Projects Releases Wiki Activity

refactor(ui): Refactor charts wrapper

Browse source
This commit is contained in:
Inex Code 2024-12-12 21:56:26 +03:00
parent 149e6d5a47
commit c61b3f5b19
No known key found for this signature in database
12 changed files with 254 additions and 312 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
lib/ui/atoms/chart_elements/colored_circle.dart Normal file
View file

@ -0,0 +1,24 @@
import 'package:flutter/material.dart';
class ColoredCircle extends StatelessWidget {
const ColoredCircle({
required this.color,
super.key,
});
final Color color;
@override
Widget build(final BuildContext context) => Container(
width: 10,
height: 10,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: color.withOpacity(0.4),
border: Border.all(
color: color,
width: 1.5,
),
),
);
}

26
lib/ui/atoms/chart_elements/legend.dart Normal file
View file

@ -0,0 +1,26 @@
import 'package:flutter/material.dart';
import 'package:selfprivacy/ui/atoms/chart_elements/colored_circle.dart';
class Legend extends StatelessWidget {
const Legend({
required this.color,
required this.text,
super.key,
});
final String text;
final Color color;
@override
Widget build(final BuildContext context) => Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
ColoredCircle(color: color),
const SizedBox(width: 5),
Text(
text,
style: Theme.of(context).textTheme.labelSmall,
),
],
);
}

42
lib/ui/molecules/buttons/period_selector.dart Normal file
View file

@ -0,0 +1,42 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:selfprivacy/logic/common_enum/common_enum.dart';
import 'package:selfprivacy/ui/atoms/buttons/segmented_buttons.dart';
class PeriodSelector extends StatelessWidget {
const PeriodSelector({
required this.period,
required this.onChange,
super.key,
});
final Period period;
final Function(Period) onChange;
@override
Widget build(final BuildContext context) => SegmentedButtons(
isSelected: [
period == Period.month,
period == Period.day,
period == Period.hour,
],
onPressed: (final index) {
switch (index) {
case 0:
onChange(Period.month);
break;
case 1:
onChange(Period.day);
break;
case 2:
onChange(Period.hour);
break;
}
},
titles: [
'resource_chart.month'.tr(),
'resource_chart.day'.tr(),
'resource_chart.hour'.tr(),
],
);
}

92
lib/ui/molecules/cards/chart_card.dart Normal file
View file

@ -0,0 +1,92 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:selfprivacy/ui/atoms/cards/filled_card.dart';
class ChartCard extends StatelessWidget {
const ChartCard({
required this.title,
required this.chart,
required this.isLoading,
this.trailing = const [],
this.legendItems = const [],
super.key,
});
final String title;
final Widget? chart;
final bool isLoading;
final List<Widget> trailing;
final List<Widget> legendItems;
@override
Widget build(final BuildContext context) => FilledCard(
clipped: false,
mergeSemantics: trailing.isEmpty,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ExcludeSemantics(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Text(
title,
style:
Theme.of(context).textTheme.titleMedium?.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant,
),
),
),
Flexible(
fit: FlexFit.loose,
child: Wrap(
spacing: 8.0,
runSpacing: 8.0,
alignment: WrapAlignment.end,
runAlignment: WrapAlignment.end,
children: legendItems,
),
),
],
),
),
const Gap(16),
Stack(
alignment: Alignment.center,
children: [
chart ?? const SizedBox.shrink(),
AnimatedOpacity(
duration: const Duration(milliseconds: 200),
opacity: isLoading ? 1 : 0,
child: const _GraphLoadingCardContent(),
),
],
),
if (trailing.isNotEmpty) const Divider(),
...trailing,
],
),
),
);
}
class _GraphLoadingCardContent extends StatelessWidget {
const _GraphLoadingCardContent();
@override
Widget build(final BuildContext context) => SizedBox(
height: 200,
child: Semantics(
label: 'resource_chart.loading'.tr(),
child: const Center(child: CircularProgressIndicator.adaptive()),
),
);
}

2
lib/ui/pages/server_details/charts/cpu_chart.dart → lib/ui/molecules/charts/cpu_chart.dart
View file

@ -1,6 +1,6 @@
import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:selfprivacy/ui/pages/server_details/charts/generic_chart.dart'; import 'package:selfprivacy/ui/molecules/charts/generic_chart.dart';
class CpuChart extends GenericLineChart { class CpuChart extends GenericLineChart {
const CpuChart({ const CpuChart({

2
lib/ui/pages/server_details/charts/disk_charts.dart → lib/ui/molecules/charts/disk_charts.dart
View file

@ -1,7 +1,7 @@
import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/easy_localization.dart';
import 'package:fl_chart/fl_chart.dart'; import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:selfprivacy/ui/pages/server_details/charts/generic_chart.dart'; import 'package:selfprivacy/ui/molecules/charts/generic_chart.dart';
import 'package:selfprivacy/ui/pages/server_details/server_details_screen.dart'; import 'package:selfprivacy/ui/pages/server_details/server_details_screen.dart';
class DiskChart extends GenericLineChart { class DiskChart extends GenericLineChart {

0
lib/ui/pages/server_details/charts/generic_chart.dart → lib/ui/molecules/charts/generic_chart.dart
View file

2
lib/ui/pages/server_details/charts/memory_chart.dart → lib/ui/molecules/charts/memory_chart.dart
View file

@ -1,6 +1,6 @@
import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:selfprivacy/ui/pages/server_details/charts/generic_chart.dart'; import 'package:selfprivacy/ui/molecules/charts/generic_chart.dart';
class MemoryChart extends GenericLineChart { class MemoryChart extends GenericLineChart {
const MemoryChart({ const MemoryChart({

2
lib/ui/pages/server_details/charts/network_charts.dart → lib/ui/molecules/charts/network_charts.dart
View file

@ -4,7 +4,7 @@ import 'package:easy_localization/easy_localization.dart';
import 'package:fl_chart/fl_chart.dart'; import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:selfprivacy/logic/models/disk_size.dart'; import 'package:selfprivacy/logic/models/disk_size.dart';
import 'package:selfprivacy/ui/pages/server_details/charts/generic_chart.dart'; import 'package:selfprivacy/ui/molecules/charts/generic_chart.dart';
class NetworkChart extends GenericLineChart { class NetworkChart extends GenericLineChart {
const NetworkChart({ const NetworkChart({

333
lib/ui/pages/server_details/charts/chart.dart
View file

@ -8,149 +8,55 @@ class _Chart extends StatelessWidget {
final MetricsState state = cubit.state; final MetricsState state = cubit.state;
List<Widget> charts; List<Widget> charts;
final metricsLoaded = state is MetricsLoaded;
if (state is MetricsLoaded || state is MetricsLoading) { if (state is MetricsLoaded || state is MetricsLoading) {
charts = [ charts = [
FilledCard( ChartCard(
clipped: false, title: 'resource_chart.cpu_title'.tr(),
child: Padding( chart: metricsLoaded ? getCpuChart(state) : null,
padding: const EdgeInsets.all(16.0), isLoading: !metricsLoaded,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'resource_chart.cpu_title'.tr(),
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 16),
Stack(
alignment: Alignment.center,
children: [
if (state is MetricsLoaded) getCpuChart(state),
AnimatedOpacity(
duration: const Duration(milliseconds: 200),
opacity: state is MetricsLoading ? 1 : 0,
child: const _GraphLoadingCardContent(),
),
],
),
],
),
),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
if (!(state is MetricsLoaded && state.memoryMetrics == null)) if (!(metricsLoaded && state.memoryMetrics == null))
FilledCard( ChartCard(
clipped: false, title: 'resource_chart.memory'.tr(),
mergeSemantics: false, chart: metricsLoaded ? getMemoryChart(state) : null,
child: Padding( isLoading: !metricsLoaded,
padding: const EdgeInsets.all(16.0), trailing: [
child: Column( ListTile(
crossAxisAlignment: CrossAxisAlignment.start, title: Text('resource_chart.view_usage_by_service'.tr()),
children: [ leading: Icon(
Text( Icons.area_chart_outlined,
'resource_chart.memory'.tr(), color: Theme.of(context).colorScheme.onSurfaceVariant,
style: Theme.of(context).textTheme.titleMedium?.copyWith( ),
color: Theme.of(context).colorScheme.onSurfaceVariant, onTap: () {
), context.pushRoute(
), const MemoryUsageByServiceRoute(),
const SizedBox(height: 16), );
Stack( },
alignment: Alignment.center, enabled: metricsLoaded,
children: [
if (state is MetricsLoaded && state.memoryMetrics != null)
getMemoryChart(state),
AnimatedOpacity(
duration: const Duration(milliseconds: 200),
opacity: state is MetricsLoading ? 1 : 0,
child: const _GraphLoadingCardContent(),
),
],
),
const Divider(),
ListTile(
title: Text('resource_chart.view_usage_by_service'.tr()),
leading: Icon(
Icons.area_chart_outlined,
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
onTap: () {
context.pushRoute(
const MemoryUsageByServiceRoute(),
);
},
enabled: state is MetricsLoaded,
),
],
), ),
), ],
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
FilledCard( ChartCard(
clipped: false, title: 'resource_chart.network_title'.tr(),
child: Padding( chart: metricsLoaded ? getBandwidthChart(state) : null,
padding: const EdgeInsets.all(16.0), isLoading: !metricsLoaded,
child: Column( legendItems: [
crossAxisAlignment: CrossAxisAlignment.start, Legend(
children: [ color: Theme.of(context).colorScheme.primary,
ExcludeSemantics( text: 'resource_chart.in'.tr(),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Text(
'resource_chart.network_title'.tr(),
style:
Theme.of(context).textTheme.titleMedium?.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant,
),
),
),
Flexible(
fit: FlexFit.loose,
child: Wrap(
spacing: 8.0,
runSpacing: 8.0,
alignment: WrapAlignment.end,
runAlignment: WrapAlignment.end,
children: [
Legend(
color: Theme.of(context).colorScheme.primary,
text: 'resource_chart.in'.tr(),
),
Legend(
color: Theme.of(context).colorScheme.tertiary,
text: 'resource_chart.out'.tr(),
),
],
),
),
],
),
),
const SizedBox(height: 20),
Stack(
alignment: Alignment.center,
children: [
if (state is MetricsLoaded) getBandwidthChart(state),
AnimatedOpacity(
duration: const Duration(milliseconds: 200),
opacity: state is MetricsLoading ? 1 : 0,
child: const _GraphLoadingCardContent(),
),
],
),
],
), ),
), Legend(
color: Theme.of(context).colorScheme.tertiary,
text: 'resource_chart.out'.tr(),
),
],
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
if (!(state is MetricsLoaded && state.diskMetrics == null)) if (!(metricsLoaded && state.diskMetrics == null))
Builder( Builder(
builder: (final context) { builder: (final context) {
List<DiskGraphData> getDisksGraphData( List<DiskGraphData> getDisksGraphData(
@ -184,69 +90,20 @@ class _Chart extends StatelessWidget {
final disksGraphData = getDisksGraphData(context); final disksGraphData = getDisksGraphData(context);
return FilledCard( return ChartCard(
clipped: false, title: 'resource_chart.disk_title'.tr(),
child: Padding( chart: (metricsLoaded && state.diskMetrics != null)
padding: const EdgeInsets.all(16.0), ? getDiskChart(state, disksGraphData)
child: Column( : null,
crossAxisAlignment: CrossAxisAlignment.start, isLoading: !metricsLoaded,
children: [ legendItems: disksGraphData
ExcludeSemantics( .map<Widget>(
child: Row( (final disk) => Legend(
crossAxisAlignment: CrossAxisAlignment.center, color: disk.color,
mainAxisSize: MainAxisSize.max, text: disk.volume.displayName,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Text(
'resource_chart.disk_title'.tr(),
style: Theme.of(context)
.textTheme
.titleMedium
?.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant,
),
),
),
Flexible(
fit: FlexFit.loose,
child: Wrap(
spacing: 8.0,
runSpacing: 8.0,
alignment: WrapAlignment.end,
runAlignment: WrapAlignment.end,
children: disksGraphData
.map<Widget>(
(final disk) => Legend(
color: disk.color,
text: disk.volume.displayName,
),
)
.toList(),
),
),
],
),
), ),
const SizedBox(height: 20), )
Stack( .toList(),
alignment: Alignment.center,
children: [
if (state is MetricsLoaded &&
state.diskMetrics != null)
getDiskChart(state, disksGraphData),
AnimatedOpacity(
duration: const Duration(milliseconds: 200),
opacity: state is MetricsLoading ? 1 : 0,
child: const _GraphLoadingCardContent(),
),
],
),
],
),
),
); );
}, },
), ),
@ -278,30 +135,9 @@ class _Chart extends StatelessWidget {
return Column( return Column(
children: [ children: [
if (state is! MetricsUnsupported) if (state is! MetricsUnsupported)
SegmentedButtons( PeriodSelector(
isSelected: [ period: period,
period == Period.month, onChange: cubit.changePeriod,
period == Period.day,
period == Period.hour,
],
onPressed: (final index) {
switch (index) {
case 0:
cubit.changePeriod(Period.month);
break;
case 1:
cubit.changePeriod(Period.day);
break;
case 2:
cubit.changePeriod(Period.hour);
break;
}
},
titles: [
'resource_chart.month'.tr(),
'resource_chart.day'.tr(),
'resource_chart.hour'.tr(),
],
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
...charts, ...charts,
@ -374,65 +210,6 @@ Widget getDiskChart(
); );
} }
class _GraphLoadingCardContent extends StatelessWidget {
const _GraphLoadingCardContent();
@override
Widget build(final BuildContext context) => SizedBox(
height: 200,
child: Semantics(
label: 'resource_chart.loading'.tr(),
child: const Center(child: CircularProgressIndicator.adaptive()),
),
);
}
class Legend extends StatelessWidget {
const Legend({
required this.color,
required this.text,
super.key,
});
final String text;
final Color color;
@override
Widget build(final BuildContext context) => Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
_ColoredBox(color: color),
const SizedBox(width: 5),
Text(
text,
style: Theme.of(context).textTheme.labelSmall,
),
],
);
}
class _ColoredBox extends StatelessWidget {
const _ColoredBox({
required this.color,
});
final Color color;
@override
Widget build(final BuildContext context) => Container(
width: 10,
height: 10,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: color.withOpacity(0.4),
border: Border.all(
color: color,
width: 1.5,
),
),
);
}
class DiskGraphData { class DiskGraphData {
DiskGraphData({ DiskGraphData({
required this.volume, required this.volume,

29
lib/ui/pages/server_details/memory_usage_by_service_screen.dart
View file

@ -8,9 +8,9 @@ import 'package:selfprivacy/logic/bloc/services/services_bloc.dart';
import 'package:selfprivacy/logic/common_enum/common_enum.dart'; import 'package:selfprivacy/logic/common_enum/common_enum.dart';
import 'package:selfprivacy/logic/cubit/metrics/metrics_cubit.dart'; import 'package:selfprivacy/logic/cubit/metrics/metrics_cubit.dart';
import 'package:selfprivacy/logic/models/disk_size.dart'; import 'package:selfprivacy/logic/models/disk_size.dart';
import 'package:selfprivacy/ui/atoms/buttons/segmented_buttons.dart';
import 'package:selfprivacy/ui/atoms/icons/brand_icons.dart'; import 'package:selfprivacy/ui/atoms/icons/brand_icons.dart';
import 'package:selfprivacy/ui/layouts/brand_hero_screen.dart'; import 'package:selfprivacy/ui/layouts/brand_hero_screen.dart';
import 'package:selfprivacy/ui/molecules/buttons/period_selector.dart';
import 'package:selfprivacy/ui/molecules/placeholders/empty_page_placeholder.dart'; import 'package:selfprivacy/ui/molecules/placeholders/empty_page_placeholder.dart';
import 'package:selfprivacy/ui/router/router.dart'; import 'package:selfprivacy/ui/router/router.dart';
import 'package:skeletonizer/skeletonizer.dart'; import 'package:skeletonizer/skeletonizer.dart';
@ -104,30 +104,9 @@ class _MemoryUsageByServiceContents extends StatelessWidget {
return BrandHeroScreen( return BrandHeroScreen(
heroTitle: 'resource_chart.memory'.tr(), heroTitle: 'resource_chart.memory'.tr(),
children: [ children: [
SegmentedButtons( PeriodSelector(
isSelected: [ period: period,
period == Period.month, onChange: cubit.changePeriod,
period == Period.day,
period == Period.hour,
],
onPressed: (final index) {
switch (index) {
case 0:
cubit.changePeriod(Period.month);
break;
case 1:
cubit.changePeriod(Period.day);
break;
case 2:
cubit.changePeriod(Period.hour);
break;
}
},
titles: [
'resource_chart.month'.tr(),
'resource_chart.day'.tr(),
'resource_chart.hour'.tr(),
],
), ),
...children, ...children,
], ],

12
lib/ui/pages/server_details/server_details_screen.dart
View file

@ -9,16 +9,18 @@ import 'package:selfprivacy/logic/cubit/server_installation/server_installation_
import 'package:selfprivacy/logic/models/disk_status.dart'; import 'package:selfprivacy/logic/models/disk_status.dart';
import 'package:selfprivacy/logic/models/metrics.dart'; import 'package:selfprivacy/logic/models/metrics.dart';
import 'package:selfprivacy/theming/harmonized_basic_colors.dart'; import 'package:selfprivacy/theming/harmonized_basic_colors.dart';
import 'package:selfprivacy/ui/atoms/buttons/segmented_buttons.dart';
import 'package:selfprivacy/ui/atoms/cards/filled_card.dart'; import 'package:selfprivacy/ui/atoms/cards/filled_card.dart';
import 'package:selfprivacy/ui/atoms/chart_elements/legend.dart';
import 'package:selfprivacy/ui/atoms/icons/brand_icons.dart'; import 'package:selfprivacy/ui/atoms/icons/brand_icons.dart';
import 'package:selfprivacy/ui/layouts/brand_hero_screen.dart'; import 'package:selfprivacy/ui/layouts/brand_hero_screen.dart';
import 'package:selfprivacy/ui/molecules/buttons/period_selector.dart';
import 'package:selfprivacy/ui/molecules/cards/chart_card.dart';
import 'package:selfprivacy/ui/molecules/cards/server_text_details_card.dart'; import 'package:selfprivacy/ui/molecules/cards/server_text_details_card.dart';
import 'package:selfprivacy/ui/molecules/cards/storage_card.dart'; import 'package:selfprivacy/ui/molecules/cards/storage_card.dart';
import 'package:selfprivacy/ui/pages/server_details/charts/cpu_chart.dart'; import 'package:selfprivacy/ui/molecules/charts/cpu_chart.dart';
import 'package:selfprivacy/ui/pages/server_details/charts/disk_charts.dart'; import 'package:selfprivacy/ui/molecules/charts/disk_charts.dart';
import 'package:selfprivacy/ui/pages/server_details/charts/memory_chart.dart'; import 'package:selfprivacy/ui/molecules/charts/memory_chart.dart';
import 'package:selfprivacy/ui/pages/server_details/charts/network_charts.dart'; import 'package:selfprivacy/ui/molecules/charts/network_charts.dart';
import 'package:selfprivacy/ui/router/router.dart'; import 'package:selfprivacy/ui/router/router.dart';
part 'charts/chart.dart'; part 'charts/chart.dart';