Use a sectioned percentage bar for pages usage quotas

What does this MR do and why?

This MR adds the ability to visually split the number of deployments taken up by different projects in the pages usage quota tab.

To enable this, I've added new functionality to the SectionedPercentageBar component:

• specify a custom color
• optionally hide a label (eg. for empty space)

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before	After

How to set up and validate locally

1. Ensure you have a group with an ultimate license
2. Inside that group, create 2 or more projects, using the "Plain HTML" template
3. For each of the projects, perform the following: 3.1 update the .gitlab-ci.yml to the below:

image: busybox

pages:
  stage: deploy
  script:
    - echo "Pages deployed"
  pages: true
  artifacts:
    paths:
    - public
  rules:
  - if: $CI_COMMIT_BRANCH == "master"

review-pages:
  stage: deploy
  script:
    - echo "Pages deployed"
  pages: 
    path_prefix: 'mr$CI_MERGE_REQUEST_IID'
  artifacts:
    paths:
    - public
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"

3.1 Commit the change and ensure the pipeline ran succesfully 3.2 create a couple of MRs 3.3 ensure the pipeline runs successfully for each MR 4. Go back to the Group level, open "Settings>Usage Quotas" and click on the "Pages" tab. 5. Ensure the statistics bar shows the correct values