Component Library Demo

Examples of components from @contractrabbit/ui

Cumulative Density Filter

Drag the red handle to filter values. Toggle filter mode to see different highlighting.

Mock data controls

Data points:

Filter Mode:

Use logarithmic scale

X-Axis Ticks: Auto

Contract Value Distribution

Current Filter:

Threshold

50000000.00

Showing

0

Total

200

Filter Mode

lte

All Filter Modes (Compact)

Less Than or Equal (≤)

Greater Than (>) - 200px wide

✨ Features:

• Smooth cumulative distribution curve
• Draggable threshold with real-time updates
• Shows count at threshold point
• Conditional fill based on filter mode (lt/lte/gt/gte)
• Fully responsive and optimized for small sizes
• Callback support for state management
• Logarithmic scale support
• Customizable threshold color