React components
Deal health score
A carousel component displaying user deal health metrics with gauge charts and progress bars.
Overview
The DealHealthScore component visually presents health scores for different entities (e.g., users or deals) in a carousel format. It features a gauge chart for the overall score and breakdown bars for specific metrics like usage, adoption, and support.
Usage
import { DealHealthScore } from '@/components/core/features/deal-health-score';
const mockData = [
{ name: 'Client A', score: 85, usage: 70, adoption: 60, support: 10 },
{ name: 'Client B', score: 45, usage: 30, adoption: 40, support: 50 },
];
function Dashboard() {
return (
<div className="w-full flex justify-center">
<DealHealthScore data={mockData} />
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
data? | UserHealthData[] | defaultData | Array of data objects containing name, score, usage, adoption, and support values. |
delay? | number | 3500 | Autoplay delay in milliseconds. |
stopOnInteraction? | boolean | false | Whether to stop autoplay when the user interacts with the carousel. |
className? | string | - | Optional CSS class names for styling the container. |
Data Interface
The data prop expects an array of objects matching the UserHealthData interface:
interface UserHealthData {
name: string;
score: number; // 0-100
usage: number; // 0-100
adoption: number;// 0-100
support: number; // 0-100
}