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

components/traffic/flow-analytics-panel.tsx

@@ -8,6 +8,7 @@ import type { FlowMonthlyDto, FlowAnalyticsDto, FlowBreakdownRow, FlowEntityCard
 import { ArrowDownIcon, ArrowUpIcon, GitBranchIcon, GlobeIcon, LayersIcon, NetworkIcon, RouteIcon, ShieldIcon, UsersIcon } from "lucide-react"
 import { Badge } from "@/components/reui/badge"
 import { KpiStatGrid, type KpiStatItem } 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Switch } from "@/components/ui/switch"
@@ -46,27 +47,6 @@ const RANGE_LABELS: Record<string, string> = {
   "30d": "Текущий месяц",
 }
 
-function MiniAreaChart({ rx, tx, height = 44 }: { rx: number[]; tx: number[]; height?: number }) {
-  const W = 300
-  const H = height
-  const maxVal = Math.max(...rx, ...tx, 1) * 1.1
-  const xAt = (i: number) => (rx.length <= 1 ? 0 : (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}`} className="w-full h-11" preserveAspectRatio="none">
-      <path d={area(rx)} fill="var(--chart-rx)" fillOpacity="0.15" />
-      <polyline points={line(rx)} fill="none" stroke="var(--chart-rx)" strokeWidth="1.5" />
-      {tx.some((v) => v > 0) ? (
-        <polyline points={line(tx)} fill="none" stroke="var(--chart-tx)" strokeWidth="1.5" />
-      ) : null}
-    </svg>
-  )
-}
 
 export function FlowEntityCardView({
   card,
@@ -97,7 +77,7 @@ export function FlowEntityCardView({
           {card.site}
         </span>
       </div>
-      <MiniAreaChart rx={card.rxSeries} tx={card.txSeries} />
+      <TrafficMiniChart rx={card.rxSeries} tx={card.txSeries} />
       <div className="flex justify-between mt-2 gap-2">
         <div className="flex items-center gap-1 text-[11px]">
           <ArrowDownIcon className="size-3 text-success" />