mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 22:59:11 +03:00
Joshen Lim
271734eec2
* Init replication lag chart in database reports * Navigate to replication lag chart via query params * Add view replication lag CTA in map view * Add replication lag metric to instance node view * Prettier
59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
export interface ChartHeaderProps {
|
|
title?: string
|
|
format?: string | ((value: unknown) => string)
|
|
customDateFormat?: string
|
|
minimalHeader?: boolean
|
|
displayDateInUtc?: boolean
|
|
highlightedLabel?: number | string | null
|
|
highlightedValue?: number | string | null
|
|
}
|
|
|
|
const ChartHeader = ({
|
|
format,
|
|
highlightedValue,
|
|
highlightedLabel,
|
|
title,
|
|
minimalHeader = false,
|
|
}: ChartHeaderProps) => {
|
|
const chartTitle = (
|
|
<h3 className={'text-foreground-lighter ' + (minimalHeader ? 'text-xs' : 'text-sm')}>
|
|
{title}
|
|
</h3>
|
|
)
|
|
|
|
const highlighted = (
|
|
<h5
|
|
className={`text-foreground text-xl font-normal ${minimalHeader ? 'text-base' : 'text-2xl'}`}
|
|
>
|
|
{highlightedValue !== undefined && String(highlightedValue)}
|
|
{format === 'seconds' ? ' ' : ''}
|
|
<span className="text-lg">
|
|
{typeof format === 'function' ? format(highlightedValue) : format}
|
|
</span>
|
|
</h5>
|
|
)
|
|
const label = <h5 className="text-foreground-lighter text-xs">{highlightedLabel}</h5>
|
|
|
|
if (minimalHeader) {
|
|
return (
|
|
<div className="flex flex-row items-center gap-x-4" style={{ minHeight: '1.8rem' }}>
|
|
{title && chartTitle}
|
|
<div className="flex flex-row items-baseline gap-x-2">
|
|
{highlightedValue !== undefined && highlighted}
|
|
{label}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="h-16">
|
|
{title && chartTitle}
|
|
{highlightedValue !== undefined && highlighted}
|
|
{label}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ChartHeader
|