feat: enhance CategoryPieChart with dynamic description support

- Added a new prop `descriptionKey` to the CategoryPieChart component to allow dynamic localization of the chart description.
- Updated the English and Chinese locale files to include a new translation for "breakdownByCategoryYearly".
- Modified the ExpenseReportsPage to utilize the new descriptionKey for both current and yearly category pie charts.

Author: huhusmang

src/components/charts/CategoryPieChart.tsx

@@ -10,6 +10,7 @@ interface CategoryPieChartProps {
   data: CategoryExpense[]
   currency: string
   className?: string
+  descriptionKey: string
 }
 
 // Define colors for different categories - using CSS variables for theme support
@@ -27,7 +28,7 @@ const COLORS = [
   "hsl(var(--chart-5))",
 ]
 
-export function CategoryPieChart({ data, currency, className }: CategoryPieChartProps) {
+export function CategoryPieChart({ data, currency, className, descriptionKey }: CategoryPieChartProps) {
   const { t } = useTranslation('reports')
   const { categories } = useSubscriptionStore()
 
@@ -56,7 +57,7 @@ export function CategoryPieChart({ data, currency, className }: CategoryPieChart
     <Card className={className}>
       <CardHeader>
         <CardTitle className="text-lg">{t('chart.spendingByCategory')}</CardTitle>
-        <CardDescription>{t('chart.breakdownByCategory')}</CardDescription>
+        <CardDescription>{t(descriptionKey)}</CardDescription>
       </CardHeader>
       <CardContent className="px-2 sm:px-6">
         {data.length === 0 ? (

src/i18n/locales/en/reports.json

@@ -38,6 +38,7 @@
     "annualSpendingOverTime": "Annual spending over time",
     "annualSpendingByCategory": "Annual spending by category",
     "breakdownByCategory": "Breakdown of expenses by subscription category (Last 12 months)",
+    "breakdownByCategoryYearly": "Breakdown of expenses by subscription category (Last 3 years)",
     "paymentDetails": "Payment Details",
     "viewPaymentRecords": "View all payment records for this period",
     "dailyAvg": "Daily Avg",

src/i18n/locales/zh-CN/reports.json

@@ -38,6 +38,7 @@
     "annualSpendingOverTime": "年度支出趋势",
     "annualSpendingByCategory": "按类别年度支出",
     "breakdownByCategory": "按订阅类别支出明细（过去12个月）",
+    "breakdownByCategoryYearly": "按订阅类别支出明细（过去3年）",
     "paymentDetails": "支付详情",
     "viewPaymentRecords": "查看此期间的所有支付记录",
     "dailyAvg": "日均",

src/pages/ExpenseReportsPage.tsx

@@ -473,6 +473,7 @@ export function ExpenseReportsPage() {
                   <CategoryPieChart
                     data={categoryExpenses}
                     currency={userCurrency}
+                    descriptionKey="chart.breakdownByCategory"
                   />
                 )}
               </div>
@@ -522,6 +523,7 @@ export function ExpenseReportsPage() {
                     <CategoryPieChart
                       data={yearlyCategoryExpenses}
                       currency={userCurrency}
+                      descriptionKey="chart.breakdownByCategoryYearly"
                     />
                   )}
                 </div>