ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: put annotations and live indicator on same row in chart footer

Browse Source
This commit is contained in:
Usman Baig
2026-03-09 23:03:58 +01:00
parent 5625703168
commit cc4f924fb8
1 changed files with 61 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/dashboard/Chart.tsx
View File

@@ -518,9 +518,13 @@ export default function Chart({
)} )}
</CardContent> </CardContent>
{/* Annotation tags */} {/* Footer: Annotations + Live indicator on same row */}
{(annotationMarkers.length > 0 || lastUpdatedAt != null) && (
<div className="px-4 sm:px-6 flex items-center justify-between gap-2 flex-wrap py-1.5 border-t border-neutral-100 dark:border-neutral-800">
{/* Annotations left */}
<div className="flex items-center gap-1 flex-wrap">
{annotationMarkers.length > 0 && ( {annotationMarkers.length > 0 && (
<div className="px-4 sm:px-6 flex items-center gap-1 flex-wrap py-1.5 border-t border-neutral-100 dark:border-neutral-800"> <>
<span className="text-[10px] font-medium text-neutral-400 dark:text-neutral-500 mr-1">Annotations:</span> <span className="text-[10px] font-medium text-neutral-400 dark:text-neutral-500 mr-1">Annotations:</span>
{annotationMarkers.map((marker) => { {annotationMarkers.map((marker) => {
const primary = marker.annotations[0] const primary = marker.annotations[0]
@@ -565,12 +569,11 @@ export default function Chart({
</button> </button>
) )
})} })}
</div> </>
)} )}
</div>
{/* Live indicator */} {/* Live indicator right */}
{lastUpdatedAt != null && ( {lastUpdatedAt != null && (
<div className="px-4 sm:px-6 pb-3 pt-2 flex justify-end">
<div className="flex items-center gap-1.5 text-[11px] text-neutral-400 dark:text-neutral-500"> <div className="flex items-center gap-1.5 text-[11px] text-neutral-400 dark:text-neutral-500">
<span className="relative flex h-1.5 w-1.5"> <span className="relative flex h-1.5 w-1.5">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" /> <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
@@ -578,6 +581,7 @@ export default function Chart({
</span> </span>
Live · {formatUpdatedAgo(lastUpdatedAt)} Live · {formatUpdatedAgo(lastUpdatedAt)}
</div> </div>
)}
</div> </div>
)} )}
</Card> </Card>