For the complete documentation index, see /llms.txt. A single-fetch full bundle is at /llms-full.txt. Every docs page is also available as Markdown by appending .md to its URL, or by requesting it with Accept: text/markdown.

ReputationTimeline

Sparkline chart showing how the agent's feedback scores have trended over time. Pure SVG, no external charting library.

Preview

Usage

import { ReputationTimeline } from "@p4n/erc8004-ui"

<ReputationTimeline agentRegistry="eip155:8453:0x8004A169FB4a3325136EB29fA0ceB6D2e539a432" agentId={888} />

Examples

Smooth Curve

Draw a smooth monotone curve instead of straight segments. The curve never overshoots its data points, so it can't imply a score outside 0-100.

<ReputationTimeline agentRegistry="eip155:8453:0x8004...a432" agentId={888} curve="monotone" />

Last 90 Days

Filter the timeline to only show feedback from the last 90 days.

<ReputationTimeline agentRegistry="eip155:8453:0x8004...a432" agentId={888} range="90d" />

With Data Points

Show individual score dots on the chart.

<ReputationTimeline agentRegistry="eip155:8453:0x8004...a432" agentId={888} showDataPoints />

Points Only (No Trend Line)

Show only the data point dots without the connecting trend line.

<ReputationTimeline agentRegistry="eip155:8453:0x8004...a432" agentId={888} showTrendLine={false} showDataPoints />

In Context

ReputationTimeline alongside ReputationDistribution for a complete reputation view.

<AgentProvider agentRegistry="eip155:8453:0x8004...a432" agentId={888}>
  <ReputationTimeline />
  <ReputationDistribution />
</AgentProvider>

API Reference

agentRegistryoptional

type: string

Agent registry in the format "eip155:{chainId}:{contractAddress}". Required unless inside an <AgentProvider>.

agentIdoptional

type: number

ERC-721 token ID of the agent. Required unless inside an <AgentProvider>.

classNameoptional

type: string

Optional CSS classes merged onto the component root for layout, spacing, or custom styling (e.g. Tailwind).

rangeoptional

type: "7d" | "30d" | "90d" | "all"default: "all"

Time range filter for displayed feedback.

curveoptional

type: "linear" | "monotone"default: "linear"

Trend line shape. "linear" draws straight segments between points; "monotone" draws a smooth curve that never overshoots its data points.

showTrendLineoptional

type: booleandefault: true

Show the connecting line between data points.

maxPointsoptional

type: numberdefault: 40

Maximum dots to plot. Longer series are evenly thinned to this many so points stay distinguishable and hoverable; the review count still reports the true total.

showDataPointsoptional

type: booleandefault: true

Show individual score dots on the chart.

headingLeveloptional

type: 1 | 2 | 3 | 4 | 5 | 6default: 3

Heading level for this component's title. The default is the level it was previously hardcoded to, so leaving it alone renders exactly as before. Set it to keep the component from breaking the surrounding page's heading order.

Prop	Type	Required	Default	Description
`agentRegistry`	`string`	No	—	Agent registry in the format "eip155:{chainId}:{contractAddress}". Required unless inside an <AgentProvider>.
`agentId`	`number`	No	—	ERC-721 token ID of the agent. Required unless inside an <AgentProvider>.
`className`	`string`	No	—	Optional CSS classes merged onto the component root for layout, spacing, or custom styling (e.g. Tailwind).
`range`	`"7d" \| "30d" \| "90d" \| "all"`	No	"all"	Time range filter for displayed feedback.
`curve`	`"linear" \| "monotone"`	No	"linear"	Trend line shape. "linear" draws straight segments between points; "monotone" draws a smooth curve that never overshoots its data points.
`showTrendLine`	`boolean`	No	true	Show the connecting line between data points.
`maxPoints`	`number`	No	40	Maximum dots to plot. Longer series are evenly thinned to this many so points stay distinguishable and hoverable; the review count still reports the true total.
`showDataPoints`	`boolean`	No	true	Show individual score dots on the chart.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	No	3	Heading level for this component's title. The default is the level it was previously hardcoded to, so leaving it alone renders exactly as before. Set it to keep the component from breaking the surrounding page's heading order.

States

This component handles loading, error, empty, and not-found states internally. A skeleton placeholder is shown while fetching, an error message with details appears if the Subgraph is unreachable, and a short message is displayed when no data exists for this agent.

←ReputationScore ReputationDistribution→