Reputation widget updates

[arrenv]

Specification

Story

As a USER, I would like to be able to see the reputation breakdown of all teams in a Colony.

Description

Currently, users have reported liking but having some confusion with how the two reputation widgets work in the UI, for example, the donut chart teams not adding up to 100% reputation and how reputation in the General team works.

Donut chart

You can see in the screenshot, with only the top teams shown, it adds up to only 63.52%. We originally had an item for 'All other' in the chart that summed up the reputation of all other teams as one item, but it often dominated the chart with a gray color and also still did not add up to 100% as it did not include the values that were specifically earnt in 'General'.

However, we would like to add the 'All other' row back into the chart, with some changes to the calculation of the reputation percentages, in order to better represent the influence of teams. As reputation flows upwards 'General' will always be 100% of the reputation, so, even if there is reputation that only exists in 'General' (e.g. from a payment made from 'General') it makes sense to ignore this reputation in this chart and the percentage influence calculations.

As an example of how it currently works:

Total reputation: 12,500

General:     2,500 reputation (20%) (earnt specifically in General)

We show this in the chart:
Dev:         2,500 reputation (20%)
Design:      2,500 reputation (20%)
Ops:         2,500 reputation (20%)
All other:   2,500 reputation (20%)

This is an example of how we propose the calculation to work:

Total reputation: 12,500

General:     2,500 reputation (earnt specifically in General)

Total team reputation: 12,500 - 2,500 = 10,000

We show this in the chart:
Dev:         2,500 reputation (25%)
Design:      2,500 reputation (25%)
Ops:         2,500 reputation (25%)
All other:   2,500 reputation (25%)

Additionally, we would like to show General in the chart if there are no other teams and there is reputation in the colony (mockup of this is shown in the Design section below).

Reputation list

The current list does not add up to 100%, the same issue as described in the donut chart. So, we would like the same treatment, where the reputation specifically earned in 'General' is ignored from the calculations of the reputation percentages for the teams listed. We would also like to include the 'General' team in the list with the reputation percent of 100% shown.

Design

'All other' added in the chart

• There should still be 5 sections in the chart, with the first 4 being the top 4 teams and the 5th being 'All other'.
• The color to be used for the 'All other' item should be gray-400.
• The reputation specifically earned in 'General' should be ignored from the reputation calculation of other teams. This should result in the percentages now adding up to 100%.

General team in chart

• If there is reputation in a colony, but there are no teams (i.e. only General exists), then we should still show the chart with General in it with 100% reputation.
• As soon as a team is added, it should then show that team only, with 100% reputation.

Reputation list

• Add 'General' team to the reputation list.
• The 'General' team will always have a value of 100%.
• The margin between the 'All Teams Reputation Points' text and the 'General' team is 1rem i.e. mb-4.
• The classes on the list for 'General' are mb-6 border-b border-gray-200 pb-6 to ensure the same padding and the border.
• The reputation specifically earned in 'General' should be ignored from the reputation calculation of other teams. This should result in the percentages below the line now adding up to 100%.

Implementation

This issue is complete when...

• [ ] Reputation donut widget includes All other row and section in reputation donut widget.
• [ ] Reputation donut widget reputation values are calculated excluding reputation only in 'General'.
• [ ] Reputation donut widget shows 'General' if there is reputation in a colony and no other teams.
• [ ] Reputation list widget on Contributors page has 'General' team included with 100% reputation.
• [ ] Reputation list widget on Contributors page has reputation values calculated excluding reputation only in 'General'.

[arrenv]

Dashboard widget can be excluded from this scope due to the incoming Dashboard updates.