分类统计

src/components/StatsChart.astro

@@ -10,9 +10,11 @@ interface Props {
   subtitle?: string;
   type: 'pie' | 'line';
   items: ChartItem[];
+  totalLabel?: string;
+  valueLabel?: string;
 }
 
-const { title, subtitle, type, items } = Astro.props;
+const { title, subtitle, type, items, totalLabel = '篇文章', valueLabel = '篇' } = Astro.props;
 const colors = ['#3eb8be', '#f2a65a', '#7f9cf5', '#68b684', '#f07f7f', '#b18ce8', '#e0b34f', '#5ca4d3'];
 const safeItems = items.filter((item) => item.value > 0);
 const total = safeItems.reduce((sum, item) => sum + item.value, 0);
@@ -74,7 +76,7 @@ const labelStep = Math.max(1, Math.ceil(linePoints.length / 6));
           ></circle>
         ))}
         <text x="60" y="56" text-anchor="middle" class="pie-chart-total">{total}</text>
-        <text x="60" y="72" text-anchor="middle" class="pie-chart-label">篇文章</text>
+        <text x="60" y="72" text-anchor="middle" class="pie-chart-label">{totalLabel}</text>
       </svg>
 
       <div class="chart-legend">
@@ -124,7 +126,7 @@ const labelStep = Math.max(1, Math.ceil(linePoints.length / 6));
         {linePoints.map((point, index) => (
           <>
             <circle class="line-chart-dot" cx={point.x} cy={point.y} r="4"></circle>
-            <title>{`${point.label}: ${point.value} 篇`}</title>
+            <title>{`${point.label}: ${point.value} ${valueLabel}`}</title>
             {index % labelStep === 0 && (
               <text class="line-chart-x-label" x={point.x} y={lineHeight - 12} text-anchor="middle">
                 {point.label}