selfprivacy.org.app/lib/ui/pages/server_details/charts/chart.dart

466 lines
15 KiB
Dart
Raw Normal View History

2022-09-15 15:40:02 +00:00
part of '../server_details_screen.dart';
2021-04-10 03:04:23 +00:00
class _Chart extends StatelessWidget {
@override
2022-06-05 19:36:32 +00:00
Widget build(final BuildContext context) {
final MetricsCubit cubit = context.watch<MetricsCubit>();
2022-06-05 19:36:32 +00:00
final Period period = cubit.state.period;
final MetricsState state = cubit.state;
2021-04-10 03:04:23 +00:00
List<Widget> charts;
2024-08-06 15:25:05 +00:00
List<Color> getGraphColors(final BuildContext context, final int length) {
final colors = [
Theme.of(context).colorScheme.primary,
Theme.of(context).colorScheme.tertiary,
Theme.of(context).colorScheme.secondary,
...harmonizedBasicColors(context),
];
if (length <= colors.length) {
return colors.sublist(0, length);
} else {
return List.generate(
length,
(final index) => colors[index % colors.length],
);
}
}
if (state is MetricsLoaded || state is MetricsLoading) {
2021-04-10 03:04:23 +00:00
charts = [
FilledCard(
2022-09-15 15:40:02 +00:00
clipped: false,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'resource_chart.cpu_title'.tr(),
2022-09-15 15:40:02 +00:00
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 16),
2022-09-16 10:36:26 +00:00
Stack(
alignment: Alignment.center,
children: [
if (state is MetricsLoaded) getCpuChart(state),
2022-09-16 10:36:26 +00:00
AnimatedOpacity(
duration: const Duration(milliseconds: 200),
opacity: state is MetricsLoading ? 1 : 0,
2022-09-16 10:36:26 +00:00
child: const _GraphLoadingCardContent(),
),
],
),
2022-09-15 15:40:02 +00:00
],
),
),
),
2022-09-16 09:44:15 +00:00
const SizedBox(height: 8),
if (!(state is MetricsLoaded && state.memoryMetrics == null))
FilledCard(
clipped: false,
mergeSemantics: false,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'resource_chart.memory'.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 && 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),
2022-09-16 09:44:15 +00:00
FilledCard(
clipped: false,
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(
'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(),
),
],
),
),
],
),
2022-09-16 09:44:15 +00:00
),
const SizedBox(height: 20),
2022-09-16 10:36:26 +00:00
Stack(
alignment: Alignment.center,
children: [
if (state is MetricsLoaded) getBandwidthChart(state),
2022-09-16 10:36:26 +00:00
AnimatedOpacity(
duration: const Duration(milliseconds: 200),
opacity: state is MetricsLoading ? 1 : 0,
2022-09-16 10:36:26 +00:00
child: const _GraphLoadingCardContent(),
),
],
),
2022-09-16 09:44:15 +00:00
],
),
),
2021-04-10 03:04:23 +00:00
),
const SizedBox(height: 8),
2024-08-06 15:25:05 +00:00
if (!(state is MetricsLoaded && state.diskMetrics == null))
Builder(
builder: (final context) {
List<DiskGraphData> getDisksGraphData(
final BuildContext context,
) {
if (state is! MetricsLoaded) {
return [];
}
final diskData = state.diskMetrics?.diskMetrics;
if (diskData == null) {
return [];
}
final List<DiskGraphData> res = [];
final colors = getGraphColors(context, diskData.keys.length);
for (final entry in diskData.entries) {
res.add(
DiskGraphData(
volume: context
.read<VolumesBloc>()
.state
.getVolume(entry.key.split('/').last),
color: colors[diskData.keys.toList().indexOf(entry.key)],
diskData: entry.value,
originalId: entry.key,
),
);
}
return res;
}
final disksGraphData = getDisksGraphData(context);
return FilledCard(
clipped: false,
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(
'resource_chart.disk_title'.tr(),
style: Theme.of(context)
.textTheme
.titleMedium
?.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant,
),
),
2024-08-06 15:25:05 +00:00
),
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(),
),
),
],
),
),
2024-08-06 15:25:05 +00:00
const SizedBox(height: 20),
Stack(
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(),
),
],
),
],
),
2024-08-06 15:25:05 +00:00
),
);
},
),
2021-04-10 03:04:23 +00:00
];
} else if (state is MetricsUnsupported) {
charts = [
FilledCard(
clipped: false,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'resource_chart.unsupported'.tr(),
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
],
),
),
),
];
2021-04-10 03:04:23 +00:00
} else {
throw 'wrong state';
}
return Column(
children: [
if (state is! MetricsUnsupported)
SegmentedButtons(
isSelected: [
period == Period.month,
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(),
],
),
2022-09-16 09:44:15 +00:00
const SizedBox(height: 8),
...charts,
],
2021-04-10 03:04:23 +00:00
);
}
Widget getCpuChart(final MetricsLoaded state) {
final data = state.metrics.cpu;
2021-04-10 03:04:23 +00:00
2022-05-24 18:55:39 +00:00
return SizedBox(
2021-04-10 03:04:23 +00:00
height: 200,
child: CpuChart(
data: data,
period: state.period,
start: state.metrics.start,
),
2021-04-10 03:04:23 +00:00
);
}
Widget getMemoryChart(final MetricsLoaded state) {
final data = state.memoryMetrics;
if (data == null) {
return const SizedBox();
}
return SizedBox(
height: 200,
child: MemoryChart(
data: data.overallMetrics,
period: state.period,
start: state.metrics.start,
),
);
}
Widget getBandwidthChart(final MetricsLoaded state) {
final ppsIn = state.metrics.bandwidthIn;
final ppsOut = state.metrics.bandwidthOut;
2021-04-10 03:04:23 +00:00
2022-05-24 18:55:39 +00:00
return SizedBox(
2021-04-10 03:04:23 +00:00
height: 200,
child: NetworkChart(
listData: [ppsIn, ppsOut],
period: state.period,
start: state.metrics.start,
2021-04-10 03:04:23 +00:00
),
);
}
}
2024-08-06 15:25:05 +00:00
Widget getDiskChart(
final MetricsLoaded state,
final List<DiskGraphData> diskData,
) {
final data = state.diskMetrics;
if (data == null) {
return const SizedBox();
}
return SizedBox(
height: 200,
child: DiskChart(
2024-08-06 15:25:05 +00:00
diskData: diskData,
period: state.period,
start: state.metrics.start,
),
);
}
2022-09-16 10:36:26 +00:00
class _GraphLoadingCardContent extends StatelessWidget {
const _GraphLoadingCardContent();
@override
Widget build(final BuildContext context) => SizedBox(
2022-09-16 10:36:26 +00:00
height: 200,
child: Semantics(
label: 'resource_chart.loading'.tr(),
child: const Center(child: CircularProgressIndicator.adaptive()),
),
2022-09-16 10:36:26 +00:00
);
}
2021-04-10 03:04:23 +00:00
class Legend extends StatelessWidget {
const Legend({
required this.color,
required this.text,
super.key,
});
2021-04-10 03:04:23 +00:00
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),
2022-09-16 09:44:15 +00:00
Text(
text,
style: Theme.of(context).textTheme.labelSmall,
),
],
);
2021-04-10 03:04:23 +00:00
}
class _ColoredBox extends StatelessWidget {
const _ColoredBox({
required this.color,
});
2021-04-10 03:04:23 +00:00
final Color color;
@override
Widget build(final BuildContext context) => Container(
width: 10,
height: 10,
decoration: BoxDecoration(
2022-09-16 09:44:15 +00:00
borderRadius: BorderRadius.circular(5),
color: color.withOpacity(0.4),
2021-04-10 03:04:23 +00:00
border: Border.all(
color: color,
2022-09-16 09:44:15 +00:00
width: 1.5,
),
),
);
2021-04-10 03:04:23 +00:00
}
2024-08-06 15:25:05 +00:00
class DiskGraphData {
DiskGraphData({
required this.volume,
required this.color,
required this.diskData,
required this.originalId,
});
final DiskVolume volume;
final Color color;
final List<TimeSeriesData> diskData;
final String originalId;
}