freedak/chinese-family-tree-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.3.1.2

Browse Source
This commit is contained in:
freedakgmail
2025-11-30 19:10:30 +08:00
parent a05fb384a4
commit 86e889cc2a
16 changed files with 1555 additions and 763 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dashboard/statistics-charts.tsx
+33 -33
View File
@@ -13,7 +13,7 @@ import {
import { CanvasRenderer } from "echarts/renderers"
import { graphic } from "echarts/core"
import type { FamilyMember } from "@/types/family"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { ChineseCard, ChineseCardContent, ChineseCardHeader, ChineseCardTitle, ChineseCardDescription } from "@/components/ui/chinese-card"
// 注册必要的组件
echarts.use([
@@ -330,45 +330,45 @@ export function StatisticsCharts({ members }: StatisticsChartsProps) {
return (
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card>
<CardHeader>
<CardTitle>性别分布</CardTitle>
<CardDescription>家族成员性别比例</CardDescription>
</CardHeader>
<CardContent>
<ChineseCard variant="default" cornerOrnament className="shadow-sm">
<ChineseCardHeader>
<ChineseCardTitle>性别分布</ChineseCardTitle>
<ChineseCardDescription>家族成员性别比例</ChineseCardDescription>
</ChineseCardHeader>
<ChineseCardContent>
<div ref={genderChartRef} className="h-[300px]" />
</CardContent>
</Card>
</ChineseCardContent>
</ChineseCard>
<Card>
<CardHeader>
<CardTitle>世代分布</CardTitle>
<CardDescription>各世代人数统计</CardDescription>
</CardHeader>
<CardContent>
<ChineseCard variant="default" cornerOrnament className="shadow-sm">
<ChineseCardHeader>
<ChineseCardTitle>世代分布</ChineseCardTitle>
<ChineseCardDescription>各世代人数统计</ChineseCardDescription>
</ChineseCardHeader>
<ChineseCardContent>
<div ref={generationChartRef} className="h-[300px]" />
</CardContent>
</Card>
</ChineseCardContent>
</ChineseCard>
<Card>
<CardHeader>
<CardTitle>年龄分布</CardTitle>
<CardDescription>按年龄段划分的人数</CardDescription>
</CardHeader>
<CardContent>
<ChineseCard variant="scroll" className="shadow-sm">
<ChineseCardHeader className="pt-6">
<ChineseCardTitle>年龄分布</ChineseCardTitle>
<ChineseCardDescription>按年龄段划分的人数</ChineseCardDescription>
</ChineseCardHeader>
<ChineseCardContent>
<div ref={ageDistributionRef} className="h-[300px]" />
</CardContent>
</Card>
</ChineseCardContent>
</ChineseCard>
<Card>
<CardHeader>
<CardTitle>出生年代分布</CardTitle>
<CardDescription>各年代出生人数趋势</CardDescription>
</CardHeader>
<CardContent>
<ChineseCard variant="scroll" className="shadow-sm">
<ChineseCardHeader className="pt-6">
<ChineseCardTitle>出生年代分布</ChineseCardTitle>
<ChineseCardDescription>各年代出生人数趋势</ChineseCardDescription>
</ChineseCardHeader>
<ChineseCardContent>
<div ref={birthYearChartRef} className="h-[300px]" />
</CardContent>
</Card>
</ChineseCardContent>
</ChineseCard>
</div>
)
}