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.

ReputationDistribution

Score distribution histogram showing the spread of feedback values across configurable score ranges.

Preview

Usage

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

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

Examples

Horizontal Orientation

Render the histogram as vertical bars in a horizontal row instead of horizontal bars in a vertical stack.

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

Custom Bucket Count

Use 10 buckets for finer-grained distribution.

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

No Axis Labels

Hide the range labels for a more compact chart.

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

In Context

ReputationDistribution used alongside a timeline chart to show both trends and spread.

<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).

bucketCountoptional

type: numberdefault: 5

Number of histogram buckets.

orientationoptional

type: "vertical" | "horizontal"default: "vertical"

Chart layout. "vertical" = horizontal bars stacked vertically. "horizontal" = vertical bars in a row.

showAxisLabelsoptional

type: booleandefault: true

Show score range labels on the axis.

coloredoptional

type: booleandefault: true

Colour bars by score band (green → gold → red). When false, uses a single accent colour.

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).
`bucketCount`	`number`	No	5	Number of histogram buckets.
`orientation`	`"vertical" \| "horizontal"`	No	"vertical"	Chart layout. "vertical" = horizontal bars stacked vertically. "horizontal" = vertical bars in a row.
`showAxisLabels`	`boolean`	No	true	Show score range labels on the axis.
`colored`	`boolean`	No	true	Colour bars by score band (green → gold → red). When false, uses a single accent colour.
`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.

←ReputationTimeline FeedbackList→