feat:更新统计模块
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:food_hub_app/api/stats.dart';
|
||||
import 'package:food_hub_app/models/stats.dart';
|
||||
import 'package:food_hub_app/widgets/common/chart.dart';
|
||||
import 'package:food_hub_app/widgets/stats/card.dart';
|
||||
import 'package:graphic/graphic.dart';
|
||||
|
||||
import 'data.dart';
|
||||
|
||||
class StatsPage extends StatefulWidget {
|
||||
const StatsPage({super.key});
|
||||
@@ -12,213 +12,206 @@ class StatsPage extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _StatsPage extends State<StatsPage> {
|
||||
var _smooth = false;
|
||||
var _stepped = false;
|
||||
final double chartHeight = 400;
|
||||
|
||||
final List<Map<String, dynamic>> chartData = const [
|
||||
{'x': '1月', 'y': 30},
|
||||
{'x': '2月', 'y': 45},
|
||||
{'x': '3月', 'y': 28},
|
||||
{'x': '4月', 'y': 55},
|
||||
{'x': '5月', 'y': 40},
|
||||
{'x': '6月', 'y': 65},
|
||||
];
|
||||
SummaryStats summaryStats = SummaryStats(
|
||||
recipeCount: 0,
|
||||
categoryCount: 0,
|
||||
workCount: 0,
|
||||
);
|
||||
|
||||
// @override
|
||||
// Widget build(BuildContext context) {
|
||||
// return SingleChildScrollView(
|
||||
// child: Center(
|
||||
// child: Column(
|
||||
// children: <Widget>[
|
||||
// Container(
|
||||
// margin: const EdgeInsets.only(top: 10),
|
||||
// width: 350,
|
||||
// height: 300,
|
||||
// child: Chart(
|
||||
// data: basicData,
|
||||
// variables: {
|
||||
// 'genre': Variable(
|
||||
// accessor: (Map map) => map['genre'] as String,
|
||||
// ),
|
||||
// 'sold': Variable(accessor: (Map map) => map['sold'] as num),
|
||||
// },
|
||||
// marks: [
|
||||
// IntervalMark(
|
||||
// label: LabelEncode(
|
||||
// encoder: (tuple) => Label(tuple['sold'].toString()),
|
||||
// ),
|
||||
// elevation: ElevationEncode(
|
||||
// value: 0,
|
||||
// updaters: {
|
||||
// 'tap': {true: (_) => 5},
|
||||
// },
|
||||
// ),
|
||||
// color: ColorEncode(
|
||||
// value: Defaults.primaryColor,
|
||||
// updaters: {
|
||||
// 'tap': {false: (color) => color.withAlpha(100)},
|
||||
// },
|
||||
// ),
|
||||
// ),
|
||||
// ],
|
||||
// axes: [Defaults.horizontalAxis, Defaults.verticalAxis],
|
||||
// selections: {'tap': PointSelection(dim: Dim.x)},
|
||||
// tooltip: TooltipGuide(),
|
||||
// crosshair: CrosshairGuide(),
|
||||
// ),
|
||||
// ),
|
||||
// Container(
|
||||
// padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
|
||||
// child: const Text(
|
||||
// 'Transposed Bar Chart',
|
||||
// style: TextStyle(fontSize: 20),
|
||||
// ),
|
||||
// ),
|
||||
// Container(
|
||||
// margin: const EdgeInsets.only(top: 10),
|
||||
// width: 350,
|
||||
// height: 300,
|
||||
// child: Chart(
|
||||
// data: basicData,
|
||||
// variables: {
|
||||
// 'genre': Variable(
|
||||
// accessor: (Map map) => map['genre'] as String,
|
||||
// ),
|
||||
// 'sold': Variable(accessor: (Map map) => map['sold'] as num),
|
||||
// },
|
||||
// transforms: [Proportion(variable: 'sold', as: 'percent')],
|
||||
// marks: [
|
||||
// IntervalMark(
|
||||
// position: Varset('percent') / Varset('genre'),
|
||||
// label: LabelEncode(
|
||||
// encoder: (tuple) => Label(tuple['sold'].toString()),
|
||||
// ),
|
||||
// color: ColorEncode(
|
||||
// variable: 'genre',
|
||||
// values: Defaults.colors10,
|
||||
// ),
|
||||
// modifiers: [StackModifier()],
|
||||
// ),
|
||||
// ],
|
||||
// coord: PolarCoord(transposed: true, dimCount: 1, dimFill: 1.05),
|
||||
// ),
|
||||
// ),
|
||||
// ],
|
||||
// ),
|
||||
// ),
|
||||
// );
|
||||
// }
|
||||
late double averageRecordCount = 0;
|
||||
|
||||
List<ChartData> recordStats = [];
|
||||
List<ChartData> categoryStats = [];
|
||||
List<ChartData> rankStats = [];
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
refreshStats();
|
||||
}
|
||||
|
||||
Future<void> refreshStats() async {
|
||||
final result1 = await queryStatsApi();
|
||||
final result2 = await queryRecordStatsApi();
|
||||
final result3 = await queryCategoryStatsApi();
|
||||
final result4 = await queryRankStatsApi();
|
||||
|
||||
setState(() {
|
||||
summaryStats = result1;
|
||||
recordStats = result2;
|
||||
categoryStats = result3;
|
||||
rankStats = result4;
|
||||
|
||||
if (recordStats.isNotEmpty) {
|
||||
double sumValue = recordStats.fold(0.0, (sum, item) => sum + item.value);
|
||||
averageRecordCount = sumValue / recordStats.length;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: Column(
|
||||
children: [
|
||||
GridView.count(
|
||||
shrinkWrap: true,
|
||||
crossAxisCount: 2,
|
||||
crossAxisSpacing: 10,
|
||||
mainAxisSpacing: 10,
|
||||
childAspectRatio: 3,
|
||||
children: const [
|
||||
StatisticCard(
|
||||
icon: Icons.restaurant_menu,
|
||||
color: Colors.blue,
|
||||
title: '菜谱总数',
|
||||
value: 19,
|
||||
unit: '个',
|
||||
),
|
||||
StatisticCard(
|
||||
icon: Icons.grid_view_rounded,
|
||||
color: Colors.green,
|
||||
title: '菜谱类别',
|
||||
value: 5,
|
||||
unit: '种',
|
||||
),
|
||||
StatisticCard(
|
||||
icon: Icons.flag,
|
||||
color: Colors.orange,
|
||||
title: '做菜次数',
|
||||
value: 25,
|
||||
unit: '个',
|
||||
),
|
||||
StatisticCard(
|
||||
icon: Icons.show_chart,
|
||||
color: Colors.red,
|
||||
title: '平均次数',
|
||||
value: 3.13,
|
||||
unit: '次/月',
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
Expanded(
|
||||
child: Card(
|
||||
color: Colors.white,
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: Column(
|
||||
children: [
|
||||
_buildTitleSection(),
|
||||
Divider(
|
||||
height: 1,
|
||||
thickness: 1,
|
||||
color: Theme.of(context).primaryColor,
|
||||
indent: 0,
|
||||
endIndent: 0,
|
||||
),
|
||||
// 下半部分:图表区
|
||||
Expanded(child: _buildLineChart()),
|
||||
],
|
||||
return SingleChildScrollView(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(5),
|
||||
child: Column(
|
||||
children: [
|
||||
_buildSummaryStats(),
|
||||
SizedBox(
|
||||
height: chartHeight,
|
||||
child: Card(
|
||||
color: Colors.white,
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(10),
|
||||
child: _buildRecordStats(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
SizedBox(
|
||||
height: chartHeight,
|
||||
child: Card(
|
||||
color: Colors.white,
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(10),
|
||||
child: _buildCategoryStats(),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
height: chartHeight,
|
||||
child: Card(
|
||||
color: Colors.white,
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(10),
|
||||
child: _buildRankStats(),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSummaryStats() {
|
||||
return GridView.count(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
// 禁用网格自身滚动
|
||||
crossAxisCount: 2,
|
||||
// crossAxisSpacing: 5,
|
||||
// mainAxisSpacing: 5,
|
||||
childAspectRatio: 2,
|
||||
children: [
|
||||
StatisticCard(
|
||||
icon: Icons.restaurant_menu,
|
||||
color: Colors.blue,
|
||||
title: '菜谱总数',
|
||||
value: summaryStats.recipeCount,
|
||||
unit: '个',
|
||||
),
|
||||
StatisticCard(
|
||||
icon: Icons.grid_view_rounded,
|
||||
color: Colors.green,
|
||||
title: '菜谱类别',
|
||||
value: summaryStats.categoryCount,
|
||||
unit: '种',
|
||||
),
|
||||
StatisticCard(
|
||||
icon: Icons.flag,
|
||||
color: Colors.orange,
|
||||
title: '做菜次数',
|
||||
value: summaryStats.workCount,
|
||||
unit: '个',
|
||||
),
|
||||
StatisticCard(
|
||||
icon: Icons.show_chart,
|
||||
color: Colors.red,
|
||||
title: '平均次数',
|
||||
value: double.parse(averageRecordCount.toStringAsFixed(2)),
|
||||
unit: '次/月',
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildRecordStats() {
|
||||
return Column(
|
||||
children: [
|
||||
_buildTitleSection('记录统计'),
|
||||
const SizedBox(height: 3),
|
||||
_buildDivider(),
|
||||
const SizedBox(height: 3),
|
||||
Expanded(
|
||||
child: lineChart(
|
||||
context: context,
|
||||
xAxisName: '日期',
|
||||
yAxisName: '次数',
|
||||
unit: '次',
|
||||
data: recordStats,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCategoryStats() {
|
||||
return Column(
|
||||
children: [
|
||||
_buildTitleSection('菜谱统计'),
|
||||
const SizedBox(height: 3),
|
||||
_buildDivider(),
|
||||
const SizedBox(height: 3),
|
||||
Expanded(
|
||||
child: pieChart(context: context, unit: '个', data: categoryStats),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildRankStats() {
|
||||
return Column(
|
||||
children: [
|
||||
_buildTitleSection('排行榜'),
|
||||
const SizedBox(height: 3),
|
||||
_buildDivider(),
|
||||
const SizedBox(height: 3),
|
||||
Expanded(child: rankChart(rankStats)),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
// 构建标题区域
|
||||
Widget _buildTitleSection() {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12),
|
||||
child: Row(
|
||||
children: const [
|
||||
Icon(Icons.show_chart, size: 24),
|
||||
SizedBox(width: 5),
|
||||
Text('月度数据趋势统计', style: TextStyle(fontWeight: FontWeight.bold)),
|
||||
],
|
||||
),
|
||||
Widget _buildTitleSection(String title) {
|
||||
return Row(
|
||||
children: [
|
||||
Icon(Icons.insert_chart, color: Theme.of(context).primaryColor),
|
||||
Text(title),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLineChart() {
|
||||
return Chart(
|
||||
data: chartData,
|
||||
variables: {
|
||||
'date': Variable(
|
||||
accessor: (Map map) => map['x'] as String,
|
||||
scale: OrdinalScale(
|
||||
tickCount: 5, // x轴刻度数量
|
||||
),
|
||||
),
|
||||
'points': Variable(
|
||||
accessor: (Map map) => (map['y'] ?? double.nan) as num,
|
||||
),
|
||||
},
|
||||
marks: [
|
||||
LineMark(
|
||||
shape: ShapeEncode(value: BasicLineShape(smooth: false)),
|
||||
size: SizeEncode(value: 1.5),
|
||||
),
|
||||
],
|
||||
axes: [Defaults.horizontalAxis, Defaults.verticalAxis]
|
||||
Widget _buildDivider() {
|
||||
return Divider(
|
||||
height: 1,
|
||||
thickness: 1,
|
||||
color: Theme.of(context).primaryColor,
|
||||
indent: 0,
|
||||
endIndent: 0,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user