From 78811bc9b16759e3dd515d8821d90bfb80cac659 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Thu, 20 Aug 2026 00:49:27 +0700
Subject: [PATCH] feat(uptime-chart): enhance tooltip functionality and
 refactor delta display

- Added useEffect to set tooltip portal for improved rendering.
- Introduced UptimeDelta component to streamline delta display logic.
- Updated ChartTooltip to utilize ChartTooltipContent for better formatting of tooltip data.
- Refactored chart margin and overflow properties for improved layout consistency.
---
 .../src/components/reui-kit/uptime-chart.tsx  | 107 +++++++++++-------
 1 file changed, 64 insertions(+), 43 deletions(-)

diff --git a/apps/web/src/components/reui-kit/uptime-chart.tsx b/apps/web/src/components/reui-kit/uptime-chart.tsx
index 82fcc49..e968022 100644
--- a/apps/web/src/components/reui-kit/uptime-chart.tsx
+++ b/apps/web/src/components/reui-kit/uptime-chart.tsx
@@ -1,4 +1,4 @@
-import { useId, useMemo, useState } from 'react'
+import { useEffect, useId, useMemo, useState } from 'react'
 import { ActivityIcon, InfoIcon, TrendingDownIcon, TrendingUpIcon } from 'lucide-react'
 import { Area, AreaChart, XAxis } from 'recharts'
 
@@ -12,6 +12,7 @@ import { Button } from '@cfdm/ui/components/button'
 import {
   ChartContainer,
   ChartTooltip,
+  ChartTooltipContent,
   type ChartConfig,
 } from '@cfdm/ui/components/chart'
 import { Tabs, TabsList, TabsTrigger } from '@cfdm/ui/components/tabs'
@@ -87,21 +88,27 @@ function deltaPercent(points: ChartPoint[]): number | null {
   return next - prev
 }
 
-interface UptimeTooltipProps {
-  active?: boolean
-  payload?: Array<{ payload: ChartPoint }>
-}
+function UptimeDelta({ delta }: { delta: number }) {
+  if (Math.abs(delta) < 0.05) {
+    return <span className="text-muted-foreground">без изменений за период</span>
+  }
+
+  if (delta > 0) {
+    return (
+      <>
+        <TrendingUpIcon className="text-success size-4" aria-hidden="true" />
+        <span className="text-success font-medium">+{delta.toFixed(1)} п.п.</span>
+        <span className="text-muted-foreground">с начала периода</span>
+      </>
+    )
+  }
 
-function UptimeTooltip({ active, payload }: UptimeTooltipProps) {
-  if (!active || !payload?.[0]) return null
-  const point = payload[0].payload
   return (
-    <div className="bg-popover text-popover-foreground rounded-md px-3 py-2 text-sm shadow-md">
-      <p className="font-medium tabular-nums">
-        {point.latency} мс · {point.ok ? 'OK' : 'Down'}
-      </p>
-      <p className="text-muted-foreground text-xs">{point.period}</p>
-    </div>
+    <>
+      <TrendingDownIcon className="text-destructive size-4" aria-hidden="true" />
+      <span className="text-destructive font-medium">{delta.toFixed(1)} п.п.</span>
+      <span className="text-muted-foreground">с начала периода</span>
+    </>
   )
 }
 
@@ -124,9 +131,14 @@ export function UptimeChart({
 }: UptimeChartProps) {
   const gradientId = useId().replace(/:/g, '')
   const [internalPeriod, setInternalPeriod] = useState<UptimePeriodKey>('5D')
+  const [tooltipPortal, setTooltipPortal] = useState<HTMLElement | null>(null)
   const period = periodProp ?? internalPeriod
   const days = UPTIME_PERIODS.find((entry) => entry.key === period)?.days ?? 5
 
+  useEffect(() => {
+    setTooltipPortal(document.body)
+  }, [])
+
   function handlePeriodChange(next: UptimePeriodKey) {
     onPeriodChange?.(next)
     if (periodProp == null) setInternalPeriod(next)
@@ -202,35 +214,21 @@ export function UptimeChart({
                   <Badge variant="outline" size="sm">
                     {points.length} проб
                   </Badge>
-                ) : delta >= 0 ? (
-                  <>
-                    <TrendingUpIcon className="text-success size-4" aria-hidden="true" />
-                    <span className="text-success font-medium">
-                      +{delta.toFixed(1)} п.п.
-                    </span>
-                    <span className="text-muted-foreground">к первой половине окна</span>
-                  </>
                 ) : (
-                  <>
-                    <TrendingDownIcon className="text-destructive size-4" aria-hidden="true" />
-                    <span className="text-destructive font-medium">
-                      {delta.toFixed(1)} п.п.
-                    </span>
-                    <span className="text-muted-foreground">к первой половине окна</span>
-                  </>
+                  <UptimeDelta delta={delta} />
                 )}
               </div>
             </div>
 
-            <div className="h-40 w-full">
+            <div className="h-40 w-full overflow-visible">
               <ChartContainer
                 config={chartConfig}
-                className="h-full w-full overflow-hidden rounded-b-xl"
+                className="h-full w-full overflow-visible rounded-b-xl"
                 initialDimension={{ width: 320, height: 160 }}
               >
                 <AreaChart
                   data={points}
-                  margin={{ top: 10, left: 0, right: 0, bottom: 0 }}
+                  margin={{ top: 16, left: 8, right: 8, bottom: 4 }}
                 >
                   <defs>
                     <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
@@ -247,33 +245,56 @@ export function UptimeChart({
                     </linearGradient>
                   </defs>
                   <XAxis dataKey="period" hide />
-                  <ChartTooltip content={<UptimeTooltip />} />
+                  <ChartTooltip
+                    cursor={{ stroke: 'var(--border)', strokeDasharray: '4 4' }}
+                    allowEscapeViewBox={{ x: true, y: true }}
+                    portal={tooltipPortal ?? undefined}
+                    wrapperStyle={{ zIndex: 50, pointerEvents: 'none' }}
+                    content={
+                      <ChartTooltipContent
+                        formatter={(value, _name, item) => {
+                          const point = item.payload as ChartPoint | undefined
+                          const ping = Number(value)
+                          return (
+                            <div className="flex flex-1 items-center justify-between gap-4">
+                              <span className="text-muted-foreground">
+                                {point?.ok === false ? 'Down' : 'Пинг'}
+                              </span>
+                              <span className="text-foreground font-mono font-medium tabular-nums">
+                                {Number.isFinite(ping) ? `${ping} мс` : '—'}
+                              </span>
+                            </div>
+                          )
+                        }}
+                      />
+                    }
+                  />
                   <Area
                     dataKey="latency"
+                    name="latency"
                     type="natural"
                     fill={`url(#${gradientId})`}
                     stroke="var(--color-latency)"
                     strokeWidth={2}
+                    isAnimationActive={false}
                     dot={(dotProps) => {
-                      const { cx, cy, payload, index } = dotProps as {
-                        cx?: number
-                        cy?: number
-                        index?: number
-                        payload?: ChartPoint
-                      }
+                      const { cx, cy, payload, index } = dotProps
                       if (cx == null || cy == null) return <g key={index} />
-                      const fill = payload?.ok
-                        ? 'var(--color-latency)'
-                        : 'var(--destructive)'
+                      const point = payload as ChartPoint | undefined
                       return (
                         <circle
                           key={index}
                           cx={cx}
                           cy={cy}
                           r={4}
-                          fill={fill}
+                          fill={
+                            point?.ok
+                              ? 'var(--color-latency)'
+                              : 'var(--destructive)'
+                          }
                           stroke="var(--background)"
                           strokeWidth={2}
+                          pointerEvents="none"
                         />
                       )
                     }}