Skip to content

Improve collaboration chart readability and layout#231

Open
ggondela1419 wants to merge 1 commit intomainfrom
feature/issue-230-collaboration-chart-clarity
Open

Improve collaboration chart readability and layout#231
ggondela1419 wants to merge 1 commit intomainfrom
feature/issue-230-collaboration-chart-clarity

Conversation

@ggondela1419
Copy link
Copy Markdown
Collaborator

Description

For this PR, I reviewed the CollaborationChart.jsx file and made some updates to improve readability, especially in home mode where multiple metrics overlap. I adjusted the opacity levels and added stroke outlines so the different layers are easier to distinguish from each other. I also moved and adjusted the legend so it fits better within the chart and doesn’t crowd the visualization. For team mode, I reviewed the configuration and confirmed that the axes correctly map to the expected data keys. These changes help reduce visual clutter and make the chart easier to read.

Fixes #230

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?

I tested the chart in home mode by running the app locally and viewing the dashboard. I checked that the overlapping shapes are clearly visible and not blending together, and that the legend is positioned correctly within the chart. I also hovered over the chart to test the tooltip and confirmed that it displays the correct values clearly and follows the cursor as expected. For team mode, I temporarily switched the chart to use mode="team" and made sure that it renders correctly when I included the expected data structure.

  • Test A: Verified readability and layout in home mode
  • Test B: Verified tooltip functionality and team mode rendering

Test Configuration:

  • Language Version: JavaScript (React)
  • Webpage (if applicable): Home page

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules

Screenshot of Output

Screenshot 2026-05-05 at 8 44 55 AM Screenshot 2026-05-05 at 8 29 49 AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Chart Clarity Review: CollaborationChart

1 participant