Multi-value progress bar

[troypoulter]

Adding the ability for the <Progress /> to accept multiple values and display them, mock-up below.

The API for it could look something like the below, where we pass an array in to allow n number of values.

<Progress values={[33, 55]} />

The earlier numbers in the array should be placed on top, with the following values placed underneath, perhaps with zIndex?

[lechnerio]

Hi @troypoulter,
I don't know if it's still relevant to you, but I had a simular plan on using the progress bar and came up with this solution here, maybe this works for you as well:

In addition I added the option to pass a color class.

Passing multiple values:

<Progress segments={[
   { value: 10 },
   { value: 50, color: "bg-green-500" },
   { value: 80, color: "bg-red-500" },
]} />

Passing a single value:

<Progress segments={[
   { value: 50 }
]} />

Result:

this is the progress component:

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

type ProgressSegment = {
  value: number
  color?: string
}

type Props = React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
  segments: ProgressSegment[]
}

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  Props
>(
  ({ className, segments, ...props }, ref) => {
    const sortedSegments = segments.sort((a, b) => a.value - b.value)

    return (
      <ProgressPrimitive.Root
        ref={ref}
        className={cn(
          "relative h-6 w-full overflow-hidden rounded bg-secondary",
          className
        )}
        {...props}
      >
        {sortedSegments.map((segment, index) => (
          <ProgressPrimitive.Indicator
            key={index}
            className={cn("h-full transition-all absolute", segment.color ? segment.color : "bg-primary")}
            style={{ width: `${segment.value}%`, zIndex: sortedSegments.length - index }}
          />
        ))}
      </ProgressPrimitive.Root>
    )
  }
)

Progress.displayName = "Progress"

export { Progress }

[janmohn]

this is awesome, is there a way to add labels?

[lechnerio]

Haha glad I was able to help. I will look into it next week when I am back online and back from vacation ✌️

[janmohn]

Thank you!

I did try using this component today - unfortunately the bars are not loading as they should do you know why? the data im using is correct and is being used to set the widths of the bars correctly, the colours are also being passed to the class names however the bars dont seem to be rendering - i have attached some screenshots incase you are able to identify what's wrong.

The images show the bars with the correct data - and even when i set the bar color thats supposed to have a width of 93% to black its still not showing up!

[Iamknownasfesal]

Hey @janmohn, i fixed the code. Since they didn't include going to left, since only adding width is not the solution.

Here is the code, feel free to use:

import * as React from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress";

import { cn } from "@/lib/utils";

type ProgressSegment = {
  value: number;
  color?: string;
};

type Props = React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
  segments: ProgressSegment[];
};

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  Props
>(({ className, segments, ...props }, ref) => {
  const sortedSegments = segments.sort((a, b) => a.value - b.value);

  return (
    <ProgressPrimitive.Root
      ref={ref}
      className={cn(
        "relative h-6 w-full overflow-hidden rounded bg-secondary",
        className
      )}
      {...props}
    >
      {sortedSegments.map((segment, index) => (
        <ProgressPrimitive.Indicator
          key={index}
          className={cn(
            "h-full transition-all absolute",
            segment.color ? segment.color : "bg-primary"
          )}
          style={{
            width: `${segment.value}%`,
            zIndex: sortedSegments.length - index,
            left: `${sortedSegments
              .slice(0, index)
              .reduce((acc, segment) => acc + segment.value, 0)}%`,
          }}
        />
      ))}
    </ProgressPrimitive.Root>
  );
});

Progress.displayName = "Progress";

export { Progress };

[nandramihnea]

Late reply for anyone who wants to display multiple progress bars into a single progress bar all starting from '0px' left.
This means that having something like segments={[{ value: 80 }, { value: 20, color: 'bg-green-200' }]} will not translate in a 100% progress bar but only 80%.

import * as React from 'react';
import * as ProgressPrimitive from '@radix-ui/react-progress';

import { cn } from '@/lib/utils';

type ProgressSegment = {
  value: number;
  color?: string;
};

type Props = React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
  segments: ProgressSegment[];
};

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  Props
>(({ className, segments, ...props }, ref) => {
  const sortedSegments = segments.sort((a, b) => a.value - b.value);

  return (
    <ProgressPrimitive.Root
      ref={ref}
      className={cn(
        'relative h-2 w-full overflow-hidden rounded bg-slate-200',
        className
      )}
      {...props}
    >
      {sortedSegments.map((segment, index) => (
        <ProgressPrimitive.Indicator
          key={index}
          className={cn(
            'h-full transition-all absolute top-0 rounded-r',
            segment.color ? segment.color : 'bg-primary'
          )}
          style={{
            width: `${segment.value}%`,
            left: '0%',
            zIndex: sortedSegments.length - index,
          }}
        />
      ))}
    </ProgressPrimitive.Root>
  );
});

Progress.displayName = 'Progress';

export { Progress };