ProgressOverviewCard

ProgressOverviewCard

Description:
The ProgressOverviewCard component displays a collection of progress metrics in a card format, with each metric showing a value and a corresponding label.

Usage:

import React from 'react';
import ProgressOverviewCard from 'blendx-ui/ProgressOverviewCard';

const MyProgressOverview = () => {
  const progressData = [
    { value: '85%', label: 'Completion Rate' },
    { value: '24', label: 'Tasks Completed' },
    { value: '12', label: 'Days Remaining' }
  ];

  return (
    <ProgressOverviewCard 
      data={progressData}
      className="custom-progress-card"
    />
  );
};

export default MyProgressOverview;

Props:

• data (array, required): An array of objects containing progress metrics with the following structure:
  • value (string): The value to be displayed
  • label (string): The label describing the value
• className (string): Custom CSS class for additional styling. Default is ''

Example:

const progressData = [
  { value: '92%', label: 'Success Rate' },
  { value: '150', label: 'Total Users' },
  { value: '45', label: 'Active Sessions' }
];

<ProgressOverviewCard 
  data={progressData}
  className="dashboard-progress-card"
/>

Component Structure:

The component consists of two main parts:

1. ProgressOverviewCard: The main container component that renders the collection of progress items
2. ProgressCardItem: An internal component that renders individual metric items

CSS Classes:

• .progress-card: Main container class
• .progress-card__item: Individual metric item container
• .progress-card__item-value: Styles for the metric value
• .progress-card__item-title: Styles for the metric label

Note: Ensure that you provide the correct data structure as specified in the PropTypes to avoid any rendering issues.

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	4
frontend-app-dashboard	1
frontend-app-course-authoring	1

Detailed usage locations:

frontend-app-staff-dashboard

• src/pages/analytics/index.jsx
• src/pages/home/index.jsx
• src/pages/program-single/ProgramSingle.jsx
• src/pages/student-progress/index.jsx

frontend-app-dashboard

• src/components/ProgressOverviewComponent.jsx

frontend-app-course-authoring

• src/course-overview/index.jsx