Circular Progress Dashboard

Create a circular progress dashboard that displays multiple progress indicators with different configurations. The dashboard should allow users to visualize progress for various metrics using circular progress components.

Requirements

Progress Display

The dashboard should display four circular progress indicators:

1. Basic Progress Indicator: Shows a progress value of 75% with default styling
2. Customized Stroke Indicator: Shows 50% progress with a stroke width of 8px
3. Custom Color Indicator: Shows 30% progress with a custom color (use #1989fa)
4. Large Indicator: Shows 90% progress with increased size (width of 150px)

Each indicator should:

• Display the percentage value as text in the center of the circle
• Be clearly labeled with a descriptive title above it
• Update smoothly when progress values change

Interactive Controls

Include a control panel with:

• A text input field that accepts percentage values (0-100)
• An "Update All" button that updates all progress indicators to the entered percentage
• Input validation to ensure values are within the 0-100 range

Layout

The dashboard should:

• Display the four progress indicators in a responsive grid layout (2x2 on larger screens, stacked on mobile)
• Include appropriate spacing between indicators
• Have a clean, modern appearance

Test Cases

• Given a progress value of 75, the basic progress indicator displays the correct arc length representing 75% completion @test
• When the stroke width is set to 8px on the customized stroke indicator, the circle stroke has a width of 8 pixels @test
• Given a custom color value of #1989fa, the progress arc is rendered in that specific color @test
• When clicking the "Update All" button with a value of 60, all four progress indicators update to show 60% @test

Implementation

@generates

API

/**
 * CircularProgressDashboard Component
 *
 * A Vue component that displays multiple circular progress indicators
 * with various configurations and allows interactive updates.
 */
export default {
  name: 'CircularProgressDashboard',
  data() {
    return {
      basicProgress: 75,
      strokeProgress: 50,
      colorProgress: 30,
      largeProgress: 90,
      inputValue: ''
    }
  },
  methods: {
    updateAll() {
      // Update all progress values
    }
  }
}

Dependencies { .dependencies }

vant { .dependency }

Provides mobile UI components including circular progress indicators with customization options for stroke width, colors, and size.