feat(mcp): подготовить сервер и доступ к приёмке

components/reui-kit/traffic-rx-tx-chart.tsx

@@ -0,0 +1,152 @@
+"use client"
+
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { ChartContainer, ChartTooltip, type ChartConfig } from "@/components/ui/chart"
+import { fmtRate, formatRangeAgo, TRAFFIC_RANGE_MINUTES } from "@/lib/fmt-rate"
+
+/**
+ * История RX/TX — adapt ReUI PRO chart-23 (multi-line + tooltip).
+ * @see https://reui.io/preview/base/chart-23
+ * @see https://reui.io/blocks
+ */
+
+const chartConfig = {
+  rx: { label: "RX", color: "var(--chart-rx)" },
+  tx: { label: "TX", color: "var(--chart-tx)" },
+} satisfies ChartConfig
+
+function ChartLegendItem({ label, color }: { label: string; color: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="size-2 rounded-full" style={{ backgroundColor: color }} />
+      <span className="text-muted-foreground text-xs font-medium">{label}</span>
+    </div>
+  )
+}
+
+function CustomTooltip({
+  active,
+  payload,
+}: {
+  active?: boolean
+  payload?: {
+    dataKey: string
+    color: string
+    value: number
+  }[]
+}) {
+  if (!active || !payload?.length) return null
+  return (
+    <div className="min-w-[120px] flex flex-col gap-1.5 rounded-lg bg-popover p-3 text-popover-foreground shadow-lg ring-1 ring-foreground/10">
+      {payload.map((item) => (
+        <div key={item.dataKey}>
+          <div className="text-[10px] font-medium tracking-wider uppercase opacity-70">
+            {item.dataKey === "rx" ? "RX" : "TX"}:
+          </div>
+          <div className="text-sm font-semibold tabular-nums">
+            {fmtRate(item.value)}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function toChartData(rx: (number|null)[], tx: (number|null)[], rangeMinutes: number) {
+  const n = Math.max(rx.length, tx.length, 1)
+  const denom = Math.max(n - 1, 1)
+  return Array.from({ length: n }, (_, i) => {
+    const minutesAgo = Math.round((1 - i / denom) * rangeMinutes)
+    return {
+      time: formatRangeAgo(minutesAgo),
+      rx: typeof rx[i] === "number" && Number.isFinite(rx[i]) && rx[i] >= 0 ? rx[i] : null,
+      tx: typeof tx[i] === "number" && Number.isFinite(tx[i]) && tx[i] >= 0 ? tx[i] : null,
+    }
+  })
+}
+
+export function TrafficRxTxChart({
+  rx,
+  tx,
+  range = "1h",
+  embedded = false,
+}: {
+  rx: (number|null)[]
+  tx: (number|null)[]
+  range?: string
+  /** Skip outer Frame when already inside OpsPanel / Frame. */
+  embedded?: boolean
+}) {
+  const rangeMinutes = TRAFFIC_RANGE_MINUTES[range] ?? 60
+  const data = toChartData(rx, tx, rangeMinutes)
+  const tickEvery = Math.max(1, Math.ceil(data.length / 6))
+
+  const hasRx = data.some(point => point.rx !== null)
+  const hasTx = data.some(point => point.tx !== null)
+  const hasData = hasRx || hasTx
+  const isolatedDot = (direction: "rx" | "tx") => function IsolatedDot({ cx, cy, index }: { cx?: number; cy?: number; index?: number }) {
+    if (index == null || cx == null || cy == null || data[index]?.[direction] == null
+      || data[index - 1]?.[direction] != null || data[index + 1]?.[direction] != null) return <g />
+    return <circle cx={cx} cy={cy} r={3} fill={`var(--chart-${direction})`} data-isolated-direction={direction} />
+  }
+  const chart = !hasData ? (
+    <p role="status" className="flex min-h-[220px] items-center justify-center text-sm text-muted-foreground">Нет исторических измерений за выбранный период</p>
+  ) : (
+    <div role="region" aria-label="История RX/TX" className="flex flex-col gap-4">
+      {(!hasRx || !hasTx) && <p role="status" className="text-sm text-muted-foreground">{!hasRx ? "Нет измерений RX за выбранный период" : "Нет измерений TX за выбранный период"}</p>}
+      <ChartContainer config={chartConfig} className="-ms-4 aspect-auto h-[220px] w-full">
+        <LineChart data={data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
+          <CartesianGrid
+            strokeDasharray="4 8"
+            vertical={false}
+            stroke="var(--border)"
+          />
+          <XAxis
+            dataKey="time"
+            axisLine={false}
+            tickLine={false}
+            tick={{ fontSize: 11 }}
+            tickMargin={10}
+            interval={tickEvery - 1}
+          />
+          <YAxis
+            axisLine={false}
+            tickLine={false}
+            tick={{ fontSize: 11 }}
+            tickFormatter={(v: number) => fmtRate(Number(v))}
+            tickMargin={8}
+            width={72}
+          />
+          <ChartTooltip content={<CustomTooltip />} />
+          {hasRx && <Line
+            dataKey="rx"
+            type="monotone"
+            stroke="var(--chart-rx)"
+            strokeWidth={2}
+            dot={isolatedDot("rx")}
+          />}
+          {hasTx && <Line
+            dataKey="tx"
+            type="monotone"
+            stroke="var(--chart-tx)"
+            strokeWidth={2}
+            dot={isolatedDot("tx")}
+          />}
+        </LineChart>
+      </ChartContainer>
+      <div className="mb-1 flex items-center justify-center gap-6">
+        <ChartLegendItem label="RX (входящий)" color="var(--chart-rx)" />
+        <ChartLegendItem label="TX (исходящий)" color="var(--chart-tx)" />
+      </div>
+    </div>
+  )
+
+  if (embedded) return chart
+
+  return (
+    <Frame className="w-full">
+      <FramePanel className="flex flex-col gap-6">{chart}</FramePanel>
+    </Frame>
+  )
+}