Make the left alignment for Dashboard numbers

[marla-singer]

Closes #3294

• Make alignment of numbers to left side

Developer checklist

This checklist is to be completed by the PR developer:

• Alternative solutions were compared/discussed before writing code
  • trade-offs with this solution are considered acceptable
• Code in this PR adheres to the project styleguide
• This pull request does not decrease project test coverage
• If the code changes existing database collection(s), migration has been written
• If UI texts are added or changed, all texts are internationalized

Reviewer checklist

Reviewed by: @matleppa @anarva

This list is to be completed by the pull request reviewer:

• Code works as described/expected
• Code seems to be error free
  • no browser console errors visible
  • no server console errors visible
  • passes CI build
• Code is written in a way that promotes maintainability
  • easy to understand
  • well organized
  • follows project coding standards and conventions
  • well documented

[matleppa]

@marla-singer It seems, that you have made a correct question in issue 3294 ("What do you expect the align?"), but the guys have failed to answer clearly enough.

What is needed in Dashboard layout

• title (Api name)
  • align left
• values (names of APIs)
  • align left

Those are now already OK.

• Other columns (Number of requests, Response time, Users)
  • titles
    • align right
  • values
    • build it from right to left (instead of centering)
      • percentage
        • separate quality % from value
        • set fixed space for longest "100 %", align right, so the % signs will be vertically top of each other and the numbers are aligned right
      • arrowheads
        • fixed space, vertically top of each other
      • amounts align right, quality separated from amount (same way as already is)

This way the columns are straight and the amounts can be easily compared with one quick look.

[marla-singer]

@matleppa It is not to easy to alignment text on the right side in this case. It depends on number length, on device size and etc. So I think it needs a designer feedback
ping @55

[matleppa]

I wonder if it were more practical to use td tags instead of divs and spans, when Dasboard table rows are formed here. At least it would make aligning the numbers to right more easy.

[anarva]

OK technically. Matti can evaluate the impact on UI.

[anarva]

I drew a couple of alignment lines on this picture which hopefully explains (my interpretation of) the original request. Feel free to comment.

[matleppa]

Numbers must be right aligned, not left aligned.

[marla-singer]

Leave this issues to Designer work

[Nazarah]

I'd ask to use element to define the table for showing KPI values.
Within the style attribute for we can always mention alignment for texts as "left", icons as "center" and numerics as "right".
Using with proper style attribute should automatically ensure that no matter how big the number is, it is always aligned.
Also this would ensure for percentage values (specifically the % sign) appears aligned properly.

[Nazarah]

@matleppa and I had some discussion about the table look and feel.
The header columns for the KPI can have colspan=3 since under each KPI, 3 values are shown (numeric, arrow, percentage).
Each representing the above value should have some padding.
The for showing the percentage value should have a max length.
The for the arrow could have fixed length.
The for the numerics should have variable size considering the value could range from 2 to 2000000.
Although my suggestion is to shortened value in case a KPI (e.g. no of API requests) indeed exceeds 2 million calls.