@assistant-ui/react-o11y

无头反应原始的渲染跨度和微量UIs(瀑布、时间表、运行的检查员) @assistant-ui/store以水龙头为基础的船舶 SpanResource 拥有数据 和一组无样式 SpanPrimitive.* 用于铺设的组件.

安装

npm install @assistant-ui/react-o11y

使用量

"use client";

import { AuiProvider, AuiConfig } from "@assistant-ui/store";
import { SpanPrimitive, SpanResource } from "@assistant-ui/react-o11y";

const spans = [
  { id: "a", parentSpanId: null, name: "request", type: "http", status: "completed", startedAt: 0, endedAt: 120, latencyMs: 120 },
  { id: "b", parentSpanId: "a", name: "db query", type: "db", status: "completed", startedAt: 10, endedAt: 80, latencyMs: 70 },
];

export function Waterfall() {
  const config = AuiConfig({ span: SpanResource({ spans }) });
  return (
    <AuiProvider extends={null} config={config}>
      <SpanPrimitive.Timeline>
        <SpanPrimitive.Children>
          {() => (
            <div className="relative h-8">
              <SpanPrimitive.TimelineBar className="top-1 h-6 rounded bg-blue-500" />
            </div>
          )}
        </SpanPrimitive.Children>
      </SpanPrimitive.Timeline>
    </AuiProvider>
  );
}

SpanPrimitive.* 内部组件 <AuiProvider> 覆盖行,缩进,名称,状态,倒塌控制,以及时间表栏. SpanPrimitive.Timeline 为其子女提供时间范围; SpanPrimitive.TimelineBar 以 CSS 等变量定位当前每个跨度 --span-timeline-left 财务报告和审定财务报表 --span-timeline-width。运行栏使用时间范围最大,除非您通过一个明确 now 从您自己的效果或动画循环的时标.

见 examples/waterfall 完全执行瀑布计划.