Skip to content

Feat: UI Layout fixes in cleaner + Refactor Cleanup size indicator chart#257

Open
AlexisMora wants to merge 3 commits intomainfrom
fix/4979-fix-layout-and-size-indicator
Open

Feat: UI Layout fixes in cleaner + Refactor Cleanup size indicator chart#257
AlexisMora wants to merge 3 commits intomainfrom
fix/4979-fix-layout-and-size-indicator

Conversation

@AlexisMora
Copy link

@AlexisMora AlexisMora commented Feb 25, 2026

What is Changed / Added

Refactored the cleanup size indicator chart to comply with the design.

What the CleanupSizeChart component does

Renders a semicircular donut chart from an array of segments, each with a percentage, color, and selected state.
Selected segments render in their assigned color.

Small segments are always visible: segments below a configurable minimum percentage are boosted so they remain visible, with the extra space proportionally borrowed from larger segments.
Segments have rounded corners and gap spacing, both configurable via the SemicircleGeometry type.
How to use it

<CleanupSizeChart
  className="relative h-36 w-64"
  segmentDetails={[
    { color: '#4CAF50', percentage: 65, size: 2500000, selected: true },
    { color: '#2196F3', percentage: 34, size: 1300000, selected: false },
    { color: '#FF9800', percentage: 1, size: 39000, selected: true },
  ]}
  totalSize={diskSpaceInBytes}
  selectedSize={selectedSizeInBytes}
  formattedSelectedSize="3.8 GB"
/>

Geometry is fully customizable via geometryProps (radius, thickness, segment gap, border radius, minimum segment percentage).

Before

image

After

image

With sections Boosted so they remain visible

image

@sonarqubecloud
Copy link

Quality Gate Failed Quality Gate failed

Failed conditions
57.5% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

@AlexisMora AlexisMora marked this pull request as ready for review February 25, 2026 15:03
@AlexisMora AlexisMora changed the title wip Feat: UI Layout fixes in cleaner + Refactor Cleanup size indicator chart Feb 25, 2026
@AlexisMora AlexisMora self-assigned this Feb 25, 2026
@AlexisMora AlexisMora added DO NOT MERGE enhancement New feature or request labels Feb 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

DO NOT MERGE enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants