[Feature]: Radial Bar/Nested Progress Bar Chart Component

[kronos1345]

What problem does this feature solve?

Problem: This feature aims to address the need for a more intuitive and visually appealing way to represent complex progress metrics within user interfaces. Many applications require displaying progress across multiple domains or thresholds, and a nested progress circle chart can provide a compact and rich visual summary of such data.

Use Case, Context, and Rationale: The use case for this feature is any application that tracks multiple progress indicators over time, such as sales dashboards, project management tools, or fitness tracking apps. The rationale for adding this feature is to enhance data visualization capabilities within Tremor, allowing for a more engaging and informative user experience.

Description: The proposed API will enable developers to add radial bar charts or nested progress circle charts to their applications with ease. These charts will be customizable in terms of size, color, and data thresholds.

What does the proposed API look like?

<RadialProgressBar
  segments={[
    { value: 75, label: 'Sales', color: '#00ff00' },
    { value: 50, label: 'Sales Plan', color: '#ff0000' },
    { value: 25, label: 'Weekly Limit', color: '#0000ff' },
    // ...other segments
  ]}
  totalValue={100}
/>

Example from reCharts: https://recharts.org/en-US/examples/SimpleRadialBarChart

This component will render a radial progress bar with segments representing different metrics. The segments prop will accept an array of objects, each detailing the value, label, and color for that segment. Or we can combine the usage here with "progress circle". Of course, it has to be "ShowAnimation"

Thank you so much. Best Regards.

[severinlandolt]

Hey @kronos1345, you can actually build this with tremor already!

Just nest some <ProgressCircle /> components and make sure to adjust their radius and stroke width accordingly:

<ProgressCircle value={76} radius={70} strokeWidth={7} color="blue">
  <ProgressCircle value={66} radius={60} strokeWidth={7} color="violet">
    Center Label
  </ProgressCircle>
</ProgressCircle>