Performance metric chart needs area charts to be in a stack

[alexcreasy]

Closes: #2090

Description

Makes the following changes:

• Model metrics and server metrics HTTP requests charts are now stacks
• Fixes a bug with stack charts where the domain is truncated
• Changes the colour scheme away from red / green to avoid a11y issues

How Has This Been Tested?

• Check the HTTP charts for server and model metrics ensuring they are now a stack (i.e. successful and failed requests add up to a total value, so if there are 5 failed requests and 5 successful requests at the same time, the total on the graph should be 10 at that point).

Test Impact

Area is not yet tested so no impact.

Request review criteria:

Self checklist (all need to be checked):

• The developer has manually tested the changes and verified that the changes work
• Commits have been squashed into descriptive, self-contained units of work (e.g. 'WIP' and 'Implements feedback' style messages have been removed)
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has added tests or explained why testing cannot be added (unit tests & storybook for related changes)

If you have UI changes:

• Included any necessary screenshots or gifs if it was a UI change.
• Included tags to the UX team if it was a UI/UX change (find relevant UX in the SMEs section).

After the PR is posted & before it merges:

• The developer has tested their solution on a cluster by using the image produced by the PR to main

[alexcreasy]

@vconzola is this OK for the "stack" issue (I'll take care of the x100 part in another ticket). I've changed the colour scheme from green / red to one of the standard ones as I don't know much about a11y but I know red / green on top of each other is a no no. The colour scheme can be changed easily during incubation if required.

[vconzola]

Yes, it looks good to me now. Wrt accessibility, if we want to go back to the red/green paradigm there's a way to do it and keep it accessible. I talked to one of the PF devs and he suggested just applying a pattern to one of the graphs (probably successes). This would make the two graphs distinguishable with the user being able to see a color difference.

[alexcreasy]

Thanks @vconzola, if we decide that's the route we want to go down it's a fairly straightforward change from my end

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

Approval requirements bypassed by manually added approval.

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[openshift-ci]

New changes are detected. LGTM label has been removed.