mirror of
https://github.com/supabase/supabase.git
synced 2026-10-13 05:09:12 +03:00
Joshen LimandAli Waseem
0421b1001d
## Context Realised that tooltips were not showing up for supavisor charts in database reports - just needed to flip a boolean Although - i don't have any projects with supavisor connections data (even on prod) so I can't visually verify this atm Also fixes a small issue in which docs url for the chart wasn't showing if the chart had no data, e.g: <img width="996" height="311" alt="image" src="https://github.com/user-attachments/assets/926febe4-9e3d-4975-9278-e7582d6ae12d" /> Should have docs button like this <img width="949" height="351" alt="image" src="https://github.com/user-attachments/assets/7561c1c5-94ae-405b-bd54-6bc94be0dd0a" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Enabled tooltips for the “Shared Pooler (Supavisor) client connections” chart so the metric can be inspected directly. * **UI Improvements** * Adjusted the tooltip positioning in the chart header for clearer readability. * When charts have no data, the “Learn more”/documentation link now follows the provided docs URL. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Ali Waseem <waseema393@gmail.com>
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { BarChart2 } from 'lucide-react'
|
|
import { cn } from 'ui'
|
|
|
|
import { ChartHeader } from './ChartHeader'
|
|
import { useChartSize } from './Charts.utils'
|
|
|
|
interface NoDataPlaceholderProps {
|
|
title?: string
|
|
attribute?: string
|
|
format?: string | ((value: unknown) => string)
|
|
message?: string
|
|
description?: string
|
|
className?: string
|
|
size: Parameters<typeof useChartSize>[0]
|
|
isFullHeight?: boolean
|
|
titleTooltip?: string
|
|
hideTotalPlaceholder?: boolean
|
|
docsUrl?: string
|
|
}
|
|
const NoDataPlaceholder = ({
|
|
attribute,
|
|
message = 'No data to show',
|
|
description,
|
|
format,
|
|
className = '',
|
|
size,
|
|
isFullHeight = false,
|
|
titleTooltip,
|
|
hideTotalPlaceholder = false,
|
|
docsUrl,
|
|
}: NoDataPlaceholderProps) => {
|
|
const { minHeight } = useChartSize(size)
|
|
|
|
return (
|
|
<div className={cn(isFullHeight && 'h-full')}>
|
|
{attribute !== undefined && (
|
|
<ChartHeader
|
|
title={attribute}
|
|
format={format}
|
|
highlightedValue={hideTotalPlaceholder ? undefined : 0}
|
|
titleTooltip={titleTooltip}
|
|
docsUrl={docsUrl}
|
|
/>
|
|
)}
|
|
<div
|
|
className={cn(
|
|
'border-control flex grow w-full flex-col items-center justify-center space-y-2 border border-dashed text-center',
|
|
isFullHeight && 'h-full',
|
|
className
|
|
)}
|
|
// extra 20 px for the x ticks
|
|
style={{ minHeight: minHeight + 20 }}
|
|
>
|
|
<BarChart2 size={20} className="text-border-stronger" />
|
|
<div className="px-1">
|
|
<p className="text-foreground-light text-xs">{message}</p>
|
|
{description && <p className="text-foreground-lighter text-xs">{description}</p>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
export default NoDataPlaceholder
|