Dashboard Gauge Component

A React component that displays a dashboard-style gauge using a semi-circular progress indicator with gradient coloring.

Capabilities

Semi-circular gauge rendering

• Renders a semi-circular gauge that starts from the left side and ends at the right side (180-degree arc) @test
• The gauge shows 0% at the leftmost position and 100% at the rightmost position @test

Gradient color visualization

• The gauge displays a smooth color gradient from green (at 0%) to yellow (at 50%) to red (at 100%) @test
• The gradient colors transition smoothly along the progress arc @test

Dynamic progress updates

• Accepts a value prop (0-100) that controls the current gauge position @test
• Updates the gauge display when the value prop changes @test

Visual styling

• The gauge has a stroke width of 10 pixels @test
• The background rail is light gray @test

Implementation

@generates

API

import React from 'react';

export interface DashboardGaugeProps {
  value: number; // Progress value from 0 to 100
}

export function DashboardGauge(props: DashboardGaugeProps): React.ReactElement;

Dependencies { .dependencies }

rc-progress { .dependency }

Provides circular progress visualization with gradient support and gap positioning.

@satisfied-by