# ReputationDistribution

**Slug:** `reputation-distribution`  
**Import:** `import { ReputationDistribution } from "@p4n/erc8004-ui"`

> **NOTE — unofficial library.** `@p4n/erc8004-ui` is an independent, community-built project. It is not affiliated with, maintained by, or endorsed by the authors of ERC-8004. It reads the standard's on-chain data through public subgraphs; it does not speak for the standard.

## Description

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

## Usage

```tsx
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.

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

### Custom Bucket Count

Use 10 buckets for finer-grained distribution.

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

### No Axis Labels

Hide the range labels for a more compact chart.

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

## In Context

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

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

## API Reference

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

## Reference

- Live preview & full docs: https://erc8004-ui.vercel.app/docs/components/reputation-distribution
- Markdown source: https://erc8004-ui.vercel.app/docs/components/reputation-distribution.md