Sifa professional network frontend (Next.js, React, TailwindCSS) sifa.id/

style(stats): add hover state and hint text to chart legend labels (#461)

Legend labels now show a subtle background on hover and a
"Click a label to show or hide it" hint below each chart.

authored by

Guido X Jansen and committed by
GitHub
ac991004 4bbb6318

+8 -2
+4 -1
src/components/stats/cumulative-chart.tsx
··· 138 138 }} 139 139 formatter={(value, entry) => ( 140 140 <span 141 - className="cursor-pointer select-none text-sm" 141 + className="cursor-pointer select-none rounded px-1 py-0.5 text-sm transition-colors hover:bg-muted" 142 142 style={{ 143 143 color: hiddenGroups.has(String(entry.dataKey)) 144 144 ? 'var(--muted-foreground)' ··· 168 168 })} 169 169 </AreaChart> 170 170 </ResponsiveContainer> 171 + <p className="mt-1 text-center text-xs text-muted-foreground"> 172 + Click a label to show or hide it 173 + </p> 171 174 </div> 172 175 ); 173 176 }
+4 -1
src/components/stats/daily-chart.tsx
··· 152 152 }} 153 153 formatter={(value, entry) => ( 154 154 <span 155 - className="cursor-pointer select-none text-sm" 155 + className="cursor-pointer select-none rounded px-1 py-0.5 text-sm transition-colors hover:bg-muted" 156 156 style={{ 157 157 color: hiddenGroups.has(String(entry.dataKey)) 158 158 ? 'var(--muted-foreground)' ··· 172 172 })} 173 173 </BarChart> 174 174 </ResponsiveContainer> 175 + <p className="mt-1 text-center text-xs text-muted-foreground"> 176 + Click a label to show or hide it 177 + </p> 175 178 </div> 176 179 ); 177 180 }