Dashboard Gauge Component

Build a React component that displays metric gauges in partial circular formats. Gauges are commonly used in dashboards to show metrics like temperature, speed, or performance levels where a full circle is not needed.

Requirements

Create a reusable DashboardGauge component that can render partial circular progress indicators. The component should support:

1. Configurable Arc Size - Control how much of the circle is displayed by specifying a gap size in degrees

   • Example: 180° gap creates a semicircle, 90° gap creates a three-quarter circle

2. Configurable Gap Position - Control where the gap appears in the circle

   • Supported positions: top, bottom, left, or right

3. Visual Customization

   • Configurable stroke width for the progress arc
   • Display the metric value as a percentage (0-100%)
   • Show a descriptive label for the gauge

The component will be used to create dashboard visualizations like semicircular temperature gauges or speedometer-style indicators.

Implementation

@generates

API

import React from 'react';

interface DashboardGaugeProps {
  value: number;
  label: string;
  gapDegree: number;
  gapPosition: 'top' | 'bottom' | 'left' | 'right';
  strokeWidth: number;
}

export const DashboardGauge: React.FC<DashboardGaugeProps>;

Tests

Semicircular Gauge

• Renders a semicircular gauge with 180° gap positioned at the top, displaying 75% with a 6px stroke width @test
• Renders a semicircular gauge with 180° gap positioned at the top, displaying 0% with a 6px stroke width @test

Three-Quarter Circle Gauge

• Renders a three-quarter circle gauge with 90° gap positioned at the bottom, displaying 60% with an 8px stroke width @test
• Renders a three-quarter circle gauge with 90° gap positioned at the left, displaying 85% with a 10px stroke width @test

Dependencies { .dependencies }

@rc-component/progress { .dependency }

A React progress component library that provides circular progress indicators with configurable gap positioning and degrees.

@satisfied-by

React { .dependency }

React library for building user interfaces.

@satisfied-by

React DOM { .dependency }

React DOM rendering library.

@satisfied-by