fix(ui): корректно отображать историю в карточках трафика

app/(main)/traffic/page.tsx

@@ -5,6 +5,7 @@ import { Alert, AlertTitle, AlertDescription } from "@/components/reui/alert"
 import { PageHeader } from "@/components/page-header"
 import { Frame, FramePanel } from "@/components/reui/frame"
 import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
+import { TrafficMiniChart } from "@/components/reui-kit/traffic-mini-chart"
 import { TrafficRxTxChart } from "@/components/reui-kit/traffic-rx-tx-chart"
 import { Button } from "@/components/ui/button"
 import { Sparkline } from "@/components/sparkline"
@@ -331,25 +332,6 @@ function StatChip({ icon, label, value }: { icon: ReactNode; label: string; valu
   )
 }
 
-function MiniAreaChart({ rx, tx, height = 44 }: { rx: number[]; tx: number[]; height?: number }) {
-  const W = 300, H = height
-  const maxVal = Math.max(...rx, ...tx, 1) * 1.1
-  const xAt = (i: number) => (i / (rx.length - 1)) * W
-  const yAt = (v: number) => H - (v / maxVal) * H
-  const area = (arr: number[]) => {
-    const pts = arr.map((v, i) => `${xAt(i).toFixed(1)},${yAt(v).toFixed(1)}`).join(" L ")
-    return `M 0,${H} L ${pts} L ${W},${H} Z`
-  }
-  const line = (arr: number[]) => arr.map((v, i) => `${xAt(i).toFixed(1)},${yAt(v).toFixed(1)}`).join(" ")
-  return (
-    <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", height, display: "block" }} preserveAspectRatio="none">
-      <path d={area(rx)} fill="var(--chart-rx)" fillOpacity={0.12} />
-      <polyline points={line(rx)} fill="none" stroke="var(--chart-rx)" strokeWidth="1.4" strokeLinejoin="round" />
-      <path d={area(tx)} fill="var(--chart-tx)" fillOpacity={0.10} />
-      <polyline points={line(tx)} fill="none" stroke="var(--chart-tx)" strokeWidth="1.4" strokeLinejoin="round" />
-    </svg>
-  )
-}
 
 // ─── left-panel entity cards ──────────────────────────────────────────────────
 
@@ -369,7 +351,7 @@ function ServerCard({ s, selected, onClick }: { s: ServerTraffic; selected: bool
           <Flag code={s.country} />{s.site}
         </span>
       </div>
-      <MiniAreaChart rx={s.rxSeries} tx={s.txSeries} />
+      <TrafficMiniChart rx={s.rxSeries} tx={s.txSeries} />
       <div className="flex justify-between mt-2 gap-2">
         <div className="flex items-center gap-1 text-[11px]">
           <ArrowDownIcon className="size-3 text-emerald-500" />
@@ -413,7 +395,7 @@ function UserCard({ u, selected, onClick }: { u: UserTraffic; selected: boolean;
       </div>
       {hasClients ? (
         <>
-          <MiniAreaChart rx={u.rxSeries} tx={u.txSeries} />
+          <TrafficMiniChart rx={u.rxSeries} tx={u.txSeries} />
           <div className="flex justify-between mt-2 gap-2">
             <div className="flex items-center gap-1 text-[11px]">
               <ArrowDownIcon className="size-3 text-emerald-500" />
@@ -451,7 +433,7 @@ function IfaceCard({ c, selected, onClick }: { c: BoundIfaceTraffic; selected: b
           <Flag code={c.serverCountry} />{c.serverSite}
         </span>
       </div>
-      <MiniAreaChart rx={c.rxSeries} tx={c.txSeries} />
+      <TrafficMiniChart rx={c.rxSeries} tx={c.txSeries} />
       <div className="flex justify-between mt-2 gap-2">
         <div className="flex items-center gap-1 text-[11px]">
           <ArrowDownIcon className="size-3 text-emerald-500" />