新增分析页面,完善大体展示内容

- 顶部月份选择器:可以前后切换月份或直接选择具体月份
- 分析类型切换:支出分析/收入分析/收支趋势
- 数据可视化:
- 使用饼图展示各分类占比
- 使用列表展示详细数据,包括金额、百分比和进度条
This commit is contained in:
yovinchen 2024-11-27 17:49:47 +08:00
parent 773c155d0c
commit af880c23eb
10 changed files with 476 additions and 46 deletions

View File

@ -25,7 +25,7 @@
## 🗺 开发路线图
### 1. 基础记账 (已完成 ✨)
### 0. 基础记账 (已完成 ✨)
- [x] 收入/支出记录管理
- [x] 分类管理系统
- [x] 自定义日期选择器
@ -33,41 +33,40 @@
- [x] 深色/浅色主题切换
- [x] 主题色自定义
### 2. 成员系统 (已完成 🎉)
### 1. 成员系统 (已完成 🎉)
- [x] 成员添加/编辑/删除
- [x] 记账时选择相关成员
- [x] 主页账单修改相关成员
- [x] 成员消费统计
### 3. 数据分析 (进行中 🚀)
### 2. 图表分析 (进行中 🚀)
- [ ] 支出/收入趋势图表
- [ ] 分类占比饼图
- [ ] 月度/年度报表
- [ ] 成员消费分析
- [ ] 自定义统计周期
### 4. 数据管理 (计划中 📝)
### 3. 数据管理 (计划中 📝)
- [ ] 导出 CSV/Excel 功能
- [ ] 云端备份支持
- [ ] 数据迁移工具
- [ ] 定期自动备份
- [ ] 备份加密功能
### 5. 预算管理 (计划中 💡)
### 4. 预算管理 (计划中 💡)
- [ ] 月度预算设置
- [ ] 预算超支提醒
- [ ] 分类预算管理
- [ ] 成员预算管理
- [ ] 预算分析报告
### 6. 体验优化 (持续进行 🔄)
### 5. 体验优化 (持续进行 🔄)
- [x] 深色模式支持
- [ ] 手势操作优化
- [ ] 快速记账小组件
- [ ] 多语言支持
- [ ] 自定义主题
### 7. 性能提升 (持续进行 ⚡️)
### 6. 性能提升 (持续进行 ⚡️)
- [ ] 大数据量处理优化
- [ ] 启动速度优化
- [ ] 内存使用优化

View File

@ -89,6 +89,7 @@ dependencies {
implementation(libs.androidx.room.common)
implementation(libs.androidx.navigation.common.ktx)
implementation(libs.androidx.navigation.compose)
implementation(libs.vision.internal.vkp)
// Room
val roomVersion = "2.6.1"
@ -96,6 +97,9 @@ dependencies {
implementation("androidx.room:room-ktx:$roomVersion")
ksp("androidx.room:room-compiler:$roomVersion")
// 图表库
implementation("com.github.PhilJay:MPAndroidChart:v3.1.0")
implementation("androidx.compose.material:material-icons-extended:1.4.3")
testImplementation("junit:junit:4.13.2")
androidTestImplementation("androidx.test.ext:junit:1.1.5")
androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")

View File

@ -2,6 +2,7 @@ package com.yovinchen.bookkeeping.model
import androidx.room.Entity
import androidx.room.ForeignKey
import androidx.room.Index
import androidx.room.PrimaryKey
import androidx.room.TypeConverter
import androidx.room.TypeConverters
@ -43,6 +44,9 @@ class Converters {
childColumns = ["memberId"],
onDelete = ForeignKey.SET_NULL
)
],
indices = [
Index(value = ["memberId"])
]
)
@TypeConverters(Converters::class)

View File

@ -0,0 +1,56 @@
package com.yovinchen.bookkeeping.ui.components
import android.graphics.Color
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import com.github.mikephil.charting.charts.PieChart
import com.github.mikephil.charting.data.PieData
import com.github.mikephil.charting.data.PieDataSet
import com.github.mikephil.charting.data.PieEntry
import com.github.mikephil.charting.formatter.PercentFormatter
import com.github.mikephil.charting.utils.ColorTemplate
@Composable
fun CategoryPieChart(
categoryData: List<Pair<String, Float>>,
modifier: Modifier = Modifier
) {
AndroidView(
modifier = modifier
.fillMaxWidth()
.height(300.dp),
factory = { context ->
PieChart(context).apply {
description.isEnabled = false
setUsePercentValues(true)
setDrawEntryLabels(true)
legend.isEnabled = true
isDrawHoleEnabled = true
holeRadius = 40f
setHoleColor(Color.TRANSPARENT)
setTransparentCircleRadius(45f)
}
},
update = { chart ->
val entries = categoryData.map { (category, amount) ->
PieEntry(amount, category)
}
val dataSet = PieDataSet(entries, "分类占比").apply {
colors = ColorTemplate.MATERIAL_COLORS.toList()
valueTextSize = 14f
valueFormatter = PercentFormatter(chart)
valueTextColor = Color.WHITE
setDrawValues(true)
}
val pieData = PieData(dataSet)
chart.data = pieData
chart.invalidate()
}
)
}

View File

@ -0,0 +1,88 @@
package com.yovinchen.bookkeeping.ui.components
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import java.time.YearMonth
@Composable
fun MonthYearPicker(
selectedMonth: YearMonth,
onMonthSelected: (YearMonth) -> Unit,
onDismiss: () -> Unit
) {
var year by remember { mutableStateOf(selectedMonth.year) }
var month by remember { mutableStateOf(selectedMonth.monthValue) }
AlertDialog(
onDismissRequest = onDismiss,
title = { Text("选择月份") },
text = {
Column(
modifier = Modifier.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
// 年份选择
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
Text("年份:")
OutlinedButton(
onClick = { year-- }
) {
Text("-")
}
Text(year.toString())
OutlinedButton(
onClick = { year++ }
) {
Text("+")
}
}
Spacer(modifier = Modifier.height(16.dp))
// 月份选择
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
Text("月份:")
OutlinedButton(
onClick = {
if (month > 1) month--
}
) {
Text("-")
}
Text(month.toString())
OutlinedButton(
onClick = {
if (month < 12) month++
}
) {
Text("+")
}
}
}
},
confirmButton = {
TextButton(
onClick = {
onMonthSelected(YearMonth.of(year, month))
}
) {
Text("确定")
}
},
dismissButton = {
TextButton(onClick = onDismiss) {
Text("取消")
}
}
)
}

View File

@ -4,38 +4,35 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material.icons.outlined.Analytics
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.NavigationBarItemDefaults
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.navigation.NavDestination.Companion.hierarchy
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.navigation.NavGraph.Companion.findStartDestination
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import com.yovinchen.bookkeeping.model.ThemeMode
import com.yovinchen.bookkeeping.ui.screen.AnalysisScreen
import com.yovinchen.bookkeeping.ui.screen.HomeScreen
import com.yovinchen.bookkeeping.ui.screen.SettingsScreen
sealed class Screen(val route: String, val icon: @Composable () -> Unit, val label: String) {
object Home : Screen(
route = "home",
icon = { Icon(Icons.Default.Home, contentDescription = "主页") },
label = "主页"
)
object Settings : Screen(
route = "settings",
icon = { Icon(Icons.Default.Settings, contentDescription = "设置") },
label = "设置"
)
sealed class Screen(
val route: String,
val icon: ImageVector,
val label: String
) {
data object Home : Screen("home", Icons.Default.Home, "主页")
data object Analysis : Screen("analysis", Icons.Outlined.Analytics, "分析")
data object Settings : Screen("settings", Icons.Default.Settings, "设置")
}
@OptIn(ExperimentalMaterial3Api::class)
@ -45,22 +42,22 @@ fun MainNavigation(
onThemeChange: (ThemeMode) -> Unit
) {
val navController = rememberNavController()
val items = listOf(Screen.Home, Screen.Settings)
Scaffold(
bottomBar = {
NavigationBar(
containerColor = MaterialTheme.colorScheme.surface,
contentColor = MaterialTheme.colorScheme.onSurface,
) {
NavigationBar {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentDestination = navBackStackEntry?.destination
val currentRoute = navBackStackEntry?.destination?.route
items.forEach { screen ->
listOf(
Screen.Home,
Screen.Analysis,
Screen.Settings
).forEach { screen ->
NavigationBarItem(
icon = screen.icon,
icon = { Icon(screen.icon, contentDescription = screen.label) },
label = { Text(screen.label) },
selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true,
selected = currentRoute == screen.route,
onClick = {
navController.navigate(screen.route) {
popUpTo(navController.graph.findStartDestination().id) {
@ -69,27 +66,19 @@ fun MainNavigation(
launchSingleTop = true
restoreState = true
}
},
colors = NavigationBarItemDefaults.colors(
selectedIconColor = MaterialTheme.colorScheme.primary,
selectedTextColor = MaterialTheme.colorScheme.primary,
unselectedIconColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f),
unselectedTextColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f),
indicatorColor = MaterialTheme.colorScheme.surfaceVariant
)
}
)
}
}
}
) { paddingValues ->
) { innerPadding ->
NavHost(
navController = navController,
startDestination = Screen.Home.route,
modifier = Modifier.padding(paddingValues)
modifier = Modifier.padding(innerPadding)
) {
composable(Screen.Home.route) {
HomeScreen()
}
composable(Screen.Home.route) { HomeScreen() }
composable(Screen.Analysis.route) { AnalysisScreen() }
composable(Screen.Settings.route) {
SettingsScreen(
currentTheme = currentTheme,

View File

@ -0,0 +1,214 @@
package com.yovinchen.bookkeeping.ui.screen
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.KeyboardArrowLeft
import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.yovinchen.bookkeeping.ui.components.CategoryPieChart
import com.yovinchen.bookkeeping.ui.components.MonthYearPicker
import com.yovinchen.bookkeeping.viewmodel.AnalysisType
import com.yovinchen.bookkeeping.viewmodel.AnalysisViewModel
import com.yovinchen.bookkeeping.viewmodel.CategoryStat
import java.time.YearMonth
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AnalysisScreen(
modifier: Modifier = Modifier,
viewModel: AnalysisViewModel = viewModel()
) {
val selectedMonth by viewModel.selectedMonth.collectAsState()
val selectedType by viewModel.selectedAnalysisType.collectAsState()
val categoryStats by viewModel.categoryStats.collectAsState()
var showMonthPicker by remember { mutableStateOf(false) }
Column(
modifier = modifier
.fillMaxSize()
.padding(16.dp)
) {
// 月份选择器
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
IconButton(onClick = {
viewModel.setSelectedMonth(selectedMonth.minusMonths(1))
}) {
Icon(Icons.AutoMirrored.Filled.KeyboardArrowLeft, "上个月")
}
Text(
text = "${selectedMonth.year}${selectedMonth.monthValue}",
style = MaterialTheme.typography.titleLarge,
modifier = Modifier.clickable { showMonthPicker = true }
)
IconButton(onClick = {
viewModel.setSelectedMonth(selectedMonth.plusMonths(1))
}) {
Icon(Icons.AutoMirrored.Filled.KeyboardArrowRight, "下个月")
}
}
Spacer(modifier = Modifier.height(16.dp))
// 分析类型选择
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) {
AnalysisType.values().forEach { type ->
FilterChip(
selected = selectedType == type,
onClick = { viewModel.setAnalysisType(type) },
label = {
Text(
when (type) {
AnalysisType.EXPENSE -> "支出分析"
AnalysisType.INCOME -> "收入分析"
AnalysisType.TREND -> "收支趋势"
}
)
}
)
}
}
Spacer(modifier = Modifier.height(16.dp))
// 统计内容
when (selectedType) {
AnalysisType.EXPENSE, AnalysisType.INCOME -> {
Text(
text = if (selectedType == AnalysisType.EXPENSE) "支出分析" else "收入分析",
style = MaterialTheme.typography.titleMedium,
modifier = Modifier.padding(vertical = 8.dp)
)
if (categoryStats.isEmpty()) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(300.dp),
contentAlignment = Alignment.Center
) {
Text(
text = "暂无数据",
style = MaterialTheme.typography.bodyLarge,
color = MaterialTheme.colorScheme.onSurfaceVariant
)
}
} else {
// 添加饼图
CategoryPieChart(
categoryData = categoryStats.map {
it.category to it.amount.toFloat()
}
)
}
Spacer(modifier = Modifier.height(16.dp))
// 分类列表
LazyColumn {
items(categoryStats) { stat ->
CategoryStatItem(stat)
}
}
}
AnalysisType.TREND -> {
// TODO: 实现收支趋势图表
Text(
text = "收支趋势",
style = MaterialTheme.typography.titleMedium,
modifier = Modifier.padding(vertical = 8.dp)
)
}
}
}
if (showMonthPicker) {
MonthYearPicker(
selectedMonth = selectedMonth,
onMonthSelected = { yearMonth ->
viewModel.setSelectedMonth(yearMonth)
showMonthPicker = false
},
onDismiss = { showMonthPicker = false }
)
}
}
@Composable
fun CategoryStatItem(stat: CategoryStat) {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 4.dp),
elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = stat.category,
style = MaterialTheme.typography.titleMedium
)
Text(
text = String.format("%.1f%%", stat.percentage),
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.primary
)
}
Spacer(modifier = Modifier.height(8.dp))
// 进度条
LinearProgressIndicator(
progress = { (stat.percentage / 100).toFloat() },
modifier = Modifier
.fillMaxWidth()
.height(8.dp),
)
Spacer(modifier = Modifier.height(8.dp))
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
text = "¥${String.format("%.2f", stat.amount)}",
style = MaterialTheme.typography.bodyMedium
)
Text(
text = "${stat.count}",
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.outline
)
}
}
}
}

View File

@ -0,0 +1,72 @@
package com.yovinchen.bookkeeping.viewmodel
import android.app.Application
import androidx.lifecycle.AndroidViewModel
import androidx.lifecycle.viewModelScope
import com.yovinchen.bookkeeping.data.BookkeepingDatabase
import com.yovinchen.bookkeeping.model.TransactionType
import kotlinx.coroutines.flow.*
import java.time.LocalDateTime
import java.time.YearMonth
import java.time.ZoneId
class AnalysisViewModel(application: Application) : AndroidViewModel(application) {
private val recordDao = BookkeepingDatabase.getDatabase(application).bookkeepingDao()
private val _selectedMonth = MutableStateFlow(YearMonth.now())
val selectedMonth = _selectedMonth.asStateFlow()
private val _selectedAnalysisType = MutableStateFlow(AnalysisType.EXPENSE)
val selectedAnalysisType = _selectedAnalysisType.asStateFlow()
val categoryStats = combine(selectedMonth, selectedAnalysisType) { month, type ->
val records = recordDao.getAllRecords().first()
val monthRecords = records.filter {
val recordDate = LocalDateTime.ofInstant(it.date.toInstant(), ZoneId.systemDefault())
YearMonth.from(recordDate) == month && it.type == when(type) {
AnalysisType.EXPENSE -> TransactionType.EXPENSE
AnalysisType.INCOME -> TransactionType.INCOME
else -> null
}
}
// 按分类统计
val categoryMap = monthRecords.groupBy { it.category }
val stats = categoryMap.map { (category, records) ->
CategoryStat(
category = category,
amount = records.sumOf { it.amount },
count = records.size
)
}.sortedByDescending { it.amount }
// 计算总额
val total = stats.sumOf { it.amount }
// 计算百分比
stats.map { it.copy(percentage = if (total > 0) it.amount / total * 100 else 0.0) }
}.stateIn(
scope = viewModelScope,
started = SharingStarted.WhileSubscribed(5000),
initialValue = emptyList()
)
fun setSelectedMonth(month: YearMonth) {
_selectedMonth.value = month
}
fun setAnalysisType(type: AnalysisType) {
_selectedAnalysisType.value = type
}
}
enum class AnalysisType {
EXPENSE, INCOME, TREND
}
data class CategoryStat(
val category: String,
val amount: Double,
val count: Int,
val percentage: Double = 0.0
)

View File

@ -11,6 +11,7 @@ composeBom = "2024.04.01"
roomCommon = "2.6.1"
navigationCommonKtx = "2.8.4"
navigationCompose = "2.8.4"
visionInternalVkp = "18.2.3"
[libraries]
androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@ -30,6 +31,7 @@ androidx-material3 = { group = "androidx.compose.material3", name = "material3"
androidx-room-common = { group = "androidx.room", name = "room-common", version.ref = "roomCommon" }
androidx-navigation-common-ktx = { group = "androidx.navigation", name = "navigation-common-ktx", version.ref = "navigationCommonKtx" }
androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigationCompose" }
vision-internal-vkp = { group = "com.google.mlkit", name = "vision-internal-vkp", version.ref = "visionInternalVkp" }
[plugins]
android-application = { id = "com.android.application", version.ref = "agp" }

View File

@ -9,6 +9,7 @@ pluginManagement {
}
mavenCentral()
gradlePluginPortal()
maven { url = uri("https://jitpack.io") }
}
}
dependencyResolutionManagement {
@ -16,6 +17,7 @@ dependencyResolutionManagement {
repositories {
google()
mavenCentral()
maven { url = uri("https://jitpack.io") }
}
}