+ {/* Month/Year Section Headers - Full Width */}
+
+ {(() => {
+ const sections = getDateSections(usageStats.trendData)
+ const totalBars = usageStats.trendData.length
+ const barWidth = 60 // 每個柱子寬度
+ const barGap = 12 // 柱子間距
+ const chartLeft = 20 // paddingLeft
+ const totalChartWidth = totalBars * barWidth + (totalBars - 1) * barGap
+
+ return Object.entries(sections).map(([key, section]) => {
+ // 計算該月份在柱狀圖中的實際位置
+ const sectionStartBar = section.startIndex
+ const sectionEndBar = section.endIndex
+ const sectionBarCount = sectionEndBar - sectionStartBar + 1
+
+ // 計算該月份標籤的起始位置（相對於圖表區域）
+ const sectionLeft = sectionStartBar * (barWidth + barGap)
+ const sectionWidth = sectionBarCount * barWidth + (sectionBarCount - 1) * barGap
+
+ // 轉換為相對於整個容器的百分比（從左邊界開始）
+ const containerWidth = chartLeft + totalChartWidth
+ const leftPercent = ((sectionLeft + chartLeft) / containerWidth) * 100
+ const widthPercent = (sectionWidth / containerWidth) * 100
+
+ return (
+
+ {section.label}
+
+ )
+ })
+ })()}
+
+
+ {/* Y-axis labels and grid lines */}
+
+ {Math.max(...usageStats.trendData.map((d: any) => d.users))}
+ {Math.round(Math.max(...usageStats.trendData.map((d: any) => d.users)) * 0.75)}
+ {Math.round(Math.max(...usageStats.trendData.map((d: any) => d.users)) * 0.5)}
+ {Math.round(Math.max(...usageStats.trendData.map((d: any) => d.users)) * 0.25)}
+ 0
+
+
+ {/* Grid lines */}
+
+ {[0, 0.25, 0.5, 0.75, 1].map((ratio, index) => (
+
+ ))}
+
+
+ {/* Chart Bars */}
+
+ {usageStats.trendData.map((day: any, index: number) => {
+ const maxUsers = Math.max(...usageStats.trendData.map((d: any) => d.users))
+ const minUsers = Math.min(...usageStats.trendData.map((d: any) => d.users))
+ const range = maxUsers - minUsers
+ const normalizedHeight = range > 0 ? ((day.users - minUsers) / range) * 70 + 15 : 40
+
+ const currentDate = new Date(day.date)
+ const prevDate = index > 0 ? new Date((usageStats.trendData[index - 1] as any).date) : null
+
+ // Check if this is the start of a new month/year for divider
+ const isNewMonth =
+ !prevDate ||
+ currentDate.getMonth() !== prevDate.getMonth() ||
+ currentDate.getFullYear() !== prevDate.getFullYear()
+
+ return (
+
+ {/* Month divider line */}
+ {isNewMonth && index > 0 && (
+
+ )}
+
+
+
+ {/* Value label */}
+
+ {day.users}
+
+
+
+
+ {/* Consistent day-only labels */}
+
{currentDate.getDate()}日
+
+ )
+ })}
+