Milestone Progress Bar

---

Milestone Progress Bar

A React component for visualizing milestone or status-based progress as a color-coded gradient bar. Ideal for showing how many tasks are completed, in-progress, incomplete, or any other category you define. Written in TypeScript and fully tested with Jest + React Testing Library.

---

✨ Features

• Color-coded gradient that segments based on the proportion of each status.
• Optional counts displayed at segment midpoints.
• Highly customizable with props for height, colors, and layout.
• TypeScript definitions included.
• Works seamlessly with styled-components or your own CSS approach.

---

🚀 Installation

npm install milestone-progress-bar

Or with yarn:

yarn add milestone-progress-bar

---

🧩 Usage

Here’s a quick example of how to import and use the MilestoneProgressBar in your React app:

import React from 'react';
import { MilestoneProgressBar } from 'milestone-progress-bar';

const ExampleComponent = () => {
  const statuses = [
    { count: 5, color: '#4CAF50', label: 'Completed' },
    { count: 3, color: '#FFC107', label: 'In Progress' },
    { count: 2, color: '#F44336', label: 'Incomplete' },
  ];

  return (
    <div style={{ width: '300px' }}>
      <h2>Project Status</h2>
      <MilestoneProgressBar 
        statuses={statuses}
        height="6px"
        showCounts={true}
      />
    </div>
  );
};

export default ExampleComponent;

---

⚙️ Props

Prop	Type	Default	Description
statuses	IMilestoneStatus[]	[]	Array of milestone status objects. Each contains count (number) and color (string) fields.
height	string	"4px"	Height of the gradient bar.
showCounts	boolean	true	Whether to display the numeric counts above each segment.
style	React.CSSProperties	undefined	Optional styles applied to the parent container.
className	string	undefined	Optional class name for styling overrides.

The IMilestoneStatus interface is defined as:

interface IMilestoneStatus {
  count: number;
  color: string;
  label?: string; // optional text label
}

---

🧪 Testing

This package is tested with Jest + React Testing Library. To run tests locally:

npm test

---

🛠 Development

1. Clone this repository.
2. Run npm install.
3. Run npm run build to compile the TypeScript into dist/.
4. Run npm test to ensure all tests pass.

---

📄 License

MIT

Feel free to use, modify, and distribute this package as per the license terms.

---