Development

[faithque]

Description

This pull request overhauls the "Performance Bands" component on the progress dashboard by replacing the legacy static mock data with a dynamic, robust backend integration. Support for task trajectory evaluation has been added, classifying all active tasks into respective bands based on their live statuses and grading configurations. This guarantees continuous live data flow without sitting at an empty 0% state.

Additionally, this change replaces the previous flat CSS layout with a premium, sleek aesthetic featuring micro-animations, gradient fills, and elevation physics, aligning seamlessly with the modernized design standards of the application.

The change includes:

• Updating performance-bands.coffee to map actual project tasks and evaluate their statuses/grades into dynamic metrics for performance bands.
• Refactoring performance-bands.tpl.html and performance-bands.scss to deliver a premium user interface with dynamic data bindings and animated progress tracks.
• Replacing the static, hard-coded HTML block in progress-dashboard.tpl.html with the generic <performance-bands project="project"> directive tag.
• Removing obsolete dummy state variables from the progress-dashboard.coffee controller.
• Registering the isolated module cleanly in doubtfire.projects.states.dashboard.directives.performance-bands and correctly injecting the dependency inside directives.coffee.
• Properly loading the .js compiled file alongside other dashboard directives within doubtfire-angularjs.module.ts.

Fixes # (issue)

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Test steps:

1. Run the project locally.
2. Log in as a student with active tasks in a unit.
3. Open the Progress Dashboard view.
4. Confirm that the "Performance Bands" panel successfully renders dynamic widths based on the combination of task statuses and grades without yielding 0% flat lines.
5. Confirm that the component's UI toggles correctly and exhibits the smooth hover interactions and loading animations.

Testing Checklist:

• Tested in latest Chrome
• Tested in latest Safari
• Tested in latest Firefox
• Tested in latest Microsoft Edge

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have requested a review from two members of the Frontend Migration team on the Pull Request.