mirror of
https://github.com/Xevion/paperless-mobile.git
synced 2025-12-10 06:07:57 -06:00
feat: Add statistics card on landing page
This commit is contained in:
Anton Stubenbord
@@ -1,7 +1,18 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:paperless_api/paperless_api.dart';
|
||||
import 'package:paperless_mobile/core/database/tables/local_user_account.dart';
|
||||
import 'package:paperless_mobile/extensions/flutter_extensions.dart';
|
||||
import 'package:paperless_mobile/features/app_drawer/view/app_drawer.dart';
|
||||
import 'package:paperless_mobile/features/document_search/view/sliver_search_bar.dart';
|
||||
import 'package:paperless_mobile/features/landing/view/widgets/expansion_card.dart';
|
||||
import 'package:paperless_mobile/features/landing/view/widgets/mime_types_pie_chart.dart';
|
||||
import 'package:paperless_mobile/generated/l10n/app_localizations.dart';
|
||||
import 'package:paperless_mobile/routes/routes.dart';
|
||||
import 'package:paperless_mobile/routes/typed/branches/documents_route.dart';
|
||||
import 'package:paperless_mobile/routes/typed/branches/inbox_route.dart';
|
||||
import 'package:fl_chart/fl_chart.dart';
|
||||
|
||||
class LandingPage extends StatefulWidget {
|
||||
const LandingPage({super.key});
|
||||
@@ -14,6 +25,7 @@ class _LandingPageState extends State<LandingPage> {
|
||||
final _searchBarHandle = SliverOverlapAbsorberHandle();
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final currentUser = context.watch<LocalUserAccount>().paperlessUser;
|
||||
return SafeArea(
|
||||
child: Scaffold(
|
||||
drawer: const AppDrawer(),
|
||||
@@ -29,19 +41,126 @@ class _LandingPageState extends State<LandingPage> {
|
||||
],
|
||||
body: CustomScrollView(
|
||||
slivers: [
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
sliver: SliverToBoxAdapter(
|
||||
child: Text(
|
||||
"Welcome!",
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
),
|
||||
SliverToBoxAdapter(
|
||||
child: Text(
|
||||
"Welcome to Paperless Mobile, ${currentUser.fullName ?? currentUser.username}!",
|
||||
textAlign: TextAlign.center,
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.displaySmall
|
||||
?.copyWith(fontSize: 28),
|
||||
).padded(24),
|
||||
),
|
||||
SliverToBoxAdapter(child: _buildStatisticsCard(context)),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStatisticsCard(BuildContext context) {
|
||||
return FutureBuilder<PaperlessServerStatisticsModel>(
|
||||
future: context.read<PaperlessServerStatsApi>().getServerStatistics(),
|
||||
builder: (context, snapshot) {
|
||||
if (!snapshot.hasData) {
|
||||
return Card(
|
||||
margin: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"Statistics", //TODO: INTL
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
const Padding(
|
||||
padding: EdgeInsets.all(16.0),
|
||||
child: Center(child: CircularProgressIndicator()),
|
||||
),
|
||||
],
|
||||
).padded(16),
|
||||
);
|
||||
}
|
||||
final stats = snapshot.data!;
|
||||
return ExpansionCard(
|
||||
title: Text(
|
||||
"Statistics", //TODO: INTL
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
content: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Card(
|
||||
color: Theme.of(context).colorScheme.surfaceVariant,
|
||||
child: ListTile(
|
||||
shape: Theme.of(context).cardTheme.shape,
|
||||
titleTextStyle: Theme.of(context).textTheme.labelLarge,
|
||||
title: Text("Documents in inbox:"),
|
||||
onTap: () {
|
||||
InboxRoute().go(context);
|
||||
},
|
||||
trailing: Chip(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: 4,
|
||||
vertical: 2,
|
||||
),
|
||||
labelPadding: EdgeInsets.symmetric(horizontal: 4),
|
||||
label: Text(
|
||||
stats.documentsInInbox.toString(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Card(
|
||||
color: Theme.of(context).colorScheme.surfaceVariant,
|
||||
child: ListTile(
|
||||
shape: Theme.of(context).cardTheme.shape,
|
||||
titleTextStyle: Theme.of(context).textTheme.labelLarge,
|
||||
title: Text("Total documents:"),
|
||||
onTap: () {
|
||||
DocumentsRoute().go(context);
|
||||
},
|
||||
trailing: Chip(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: 4,
|
||||
vertical: 2,
|
||||
),
|
||||
labelPadding: EdgeInsets.symmetric(horizontal: 4),
|
||||
label: Text(
|
||||
stats.documentsTotal.toString(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Card(
|
||||
color: Theme.of(context).colorScheme.surfaceVariant,
|
||||
child: ListTile(
|
||||
shape: Theme.of(context).cardTheme.shape,
|
||||
titleTextStyle: Theme.of(context).textTheme.labelLarge,
|
||||
title: Text("Total characters:"),
|
||||
trailing: Chip(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 4,
|
||||
vertical: 2,
|
||||
),
|
||||
labelPadding: EdgeInsets.symmetric(horizontal: 4),
|
||||
label: Text(
|
||||
stats.totalChars.toString(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
AspectRatio(
|
||||
aspectRatio: 1.3,
|
||||
child: SizedBox(
|
||||
width: 300,
|
||||
child: MimeTypesPieChart(statistics: stats),
|
||||
),
|
||||
),
|
||||
],
|
||||
).padded(16),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
33
lib/features/landing/view/widgets/expansion_card.dart
Normal file
33
lib/features/landing/view/widgets/expansion_card.dart
Normal file
@@ -0,0 +1,33 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:paperless_mobile/extensions/flutter_extensions.dart';
|
||||
|
||||
class ExpansionCard extends StatelessWidget {
|
||||
final Widget title;
|
||||
final Widget content;
|
||||
|
||||
const ExpansionCard({super.key, required this.title, required this.content});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Card(
|
||||
margin: EdgeInsets.all(16),
|
||||
child: Theme(
|
||||
data: Theme.of(context).copyWith(
|
||||
dividerColor: Colors.transparent,
|
||||
expansionTileTheme: ExpansionTileThemeData(
|
||||
shape: Theme.of(context).cardTheme.shape,
|
||||
collapsedShape: Theme.of(context).cardTheme.shape,
|
||||
),
|
||||
listTileTheme: ListTileThemeData(
|
||||
shape: Theme.of(context).cardTheme.shape,
|
||||
),
|
||||
),
|
||||
child: ExpansionTile(
|
||||
initiallyExpanded: true,
|
||||
title: title,
|
||||
children: [content],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
166
lib/features/landing/view/widgets/mime_types_pie_chart.dart
Normal file
166
lib/features/landing/view/widgets/mime_types_pie_chart.dart
Normal file
@@ -0,0 +1,166 @@
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:fl_chart/fl_chart.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:paperless_api/paperless_api.dart';
|
||||
|
||||
class MimeTypesPieChart extends StatefulWidget {
|
||||
final PaperlessServerStatisticsModel statistics;
|
||||
|
||||
const MimeTypesPieChart({
|
||||
super.key,
|
||||
required this.statistics,
|
||||
});
|
||||
|
||||
@override
|
||||
State<MimeTypesPieChart> createState() => _MimeTypesPieChartState();
|
||||
}
|
||||
|
||||
class _MimeTypesPieChartState extends State<MimeTypesPieChart> {
|
||||
static final _mimeTypeNames = {
|
||||
"application/pdf": "PDF Document",
|
||||
"image/png": "PNG Image",
|
||||
"image/jpeg": "JPEG Image",
|
||||
"image/tiff": "TIFF Image",
|
||||
"image/gif": "GIF Image",
|
||||
"image/webp": "WebP Image",
|
||||
"text/plain": "Plain Text Document",
|
||||
"application/msword": "Microsoft Word Document",
|
||||
"application/vnd.openxmlformats-officedocument.wordprocessingml.document":
|
||||
"Microsoft Word Document (OpenXML)",
|
||||
"application/vnd.ms-powerpoint": "Microsoft PowerPoint Presentation",
|
||||
"application/vnd.openxmlformats-officedocument.presentationml.presentation":
|
||||
"Microsoft PowerPoint Presentation (OpenXML)",
|
||||
"application/vnd.ms-excel": "Microsoft Excel Spreadsheet",
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
|
||||
"Microsoft Excel Spreadsheet (OpenXML)",
|
||||
"application/vnd.oasis.opendocument.text": "ODT Document",
|
||||
"application/vnd.oasis.opendocument.presentation": "ODP Presentation",
|
||||
"application/vnd.oasis.opendocument.spreadsheet": "ODS Spreadsheet",
|
||||
};
|
||||
|
||||
int? _touchedIndex = -1;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorShades = Colors.lightGreen.values;
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: PieChart(
|
||||
PieChartData(
|
||||
startDegreeOffset: 90,
|
||||
// pieTouchData: PieTouchData(
|
||||
// touchCallback: (event, response) {
|
||||
// setState(() {
|
||||
// if (!event.isInterestedForInteractions ||
|
||||
// response == null ||
|
||||
// response.touchedSection == null) {
|
||||
// _touchedIndex = -1;
|
||||
// return;
|
||||
// }
|
||||
// _touchedIndex =
|
||||
// response.touchedSection!.touchedSectionIndex;
|
||||
// });
|
||||
// },
|
||||
// ),
|
||||
borderData: FlBorderData(
|
||||
show: false,
|
||||
),
|
||||
sectionsSpace: 0,
|
||||
centerSpaceRadius: 40,
|
||||
sections: _buildSections(colorShades).toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
Wrap(
|
||||
alignment: WrapAlignment.start,
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: [
|
||||
for (int i = 0; i < widget.statistics.fileTypeCounts.length; i++)
|
||||
GestureDetector(
|
||||
onTapDown: (_) {
|
||||
setState(() {
|
||||
_touchedIndex = i;
|
||||
});
|
||||
},
|
||||
onTapUp: (details) {
|
||||
setState(() {
|
||||
_touchedIndex = -1;
|
||||
});
|
||||
},
|
||||
onTapCancel: () {
|
||||
setState(() {
|
||||
_touchedIndex = -1;
|
||||
});
|
||||
},
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: colorShades[i % colorShades.length],
|
||||
),
|
||||
margin: EdgeInsets.only(right: 8),
|
||||
width: 20,
|
||||
height: 20,
|
||||
),
|
||||
Text(
|
||||
_mimeTypeNames[
|
||||
widget.statistics.fileTypeCounts[i].mimeType]!,
|
||||
style: Theme.of(context).textTheme.bodyLarge,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Iterable<PieChartSectionData> _buildSections(List<Color> colorShades) sync* {
|
||||
for (int i = 0; i < widget.statistics.fileTypeCounts.length; i++) {
|
||||
final type = widget.statistics.fileTypeCounts[i];
|
||||
final isTouched = i == _touchedIndex;
|
||||
final fontSize = isTouched ? 24.0 : 16.0;
|
||||
final radius = isTouched ? 60.0 : 50.0;
|
||||
const shadows = [
|
||||
Shadow(color: Colors.black, blurRadius: 2),
|
||||
];
|
||||
final color = colorShades[i % colorShades.length];
|
||||
final textColor =
|
||||
color.computeLuminance() > 0.5 ? Colors.black : Colors.white;
|
||||
yield PieChartSectionData(
|
||||
color: colorShades[i % colorShades.length],
|
||||
value: type.count.toDouble(),
|
||||
title: ((type.count / widget.statistics.documentsTotal) * 100)
|
||||
.toStringAsFixed(1) +
|
||||
"%",
|
||||
radius: radius,
|
||||
titleStyle: TextStyle(
|
||||
fontSize: fontSize,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: textColor,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
extension AllShades on MaterialColor {
|
||||
List<Color> get values => [
|
||||
shade200,
|
||||
shade600,
|
||||
shade300,
|
||||
shade100,
|
||||
shade800,
|
||||
shade400,
|
||||
shade900,
|
||||
shade500,
|
||||
shade700,
|
||||
];
|
||||
}
|
||||
Reference in New Issue
Block a user