Summary Colors don't match key and numbers don't match colors

[jsoref]

If you are trying to resolve an environment-specific issue or have a one-off question about the edge case that does not require a feature then please consider asking a question in argocd slack channel.

Checklist:

• [x] I've searched in the docs and FAQ for my answer: https://bit.ly/argocd-faq.
• [x] I've included steps to reproduce the bug.
• [x] I've pasted the output of argocd version.

Describe the bug

1. The numbers in the summary column don't correspond to the pie slices of the two pies
2. The colors of the pie slices don't correspond to the keys for the pies

To Reproduce

1. Visit https://cd.apps.argoproj.io/applications?view=summary

Expected behavior

1. If the summary numbers don't relate to the count of the items in the pies, then include numbers in the legends for the pies
2. the colors in the pies should correspond to the labels for the pies (specifically the second pie has black, and the labels for missing and unknown are both grew)
3. The colors for pie slices should be unique/distinct

Screenshots

Version

{
    "Version": "v1.9.0+eb9216f",
    "BuildDate": "2021-01-06T10:27:19Z",
    "GitCommit": "eb9216f8e15ca11f9d372312a675844974a43e48",
    "GitTreeState": "clean",
    "GoVersion": "go1.14.12",
    "Compiler": "gc",
    "Platform": "linux/amd64",
    "KsonnetVersion": "v0.13.1",
    "KustomizeVersion": "v3.8.1 2020-07-16T00:58:46Z",
    "HelmVersion": "v3.4.1+gc4e7485",
    "KubectlVersion": "v1.17.8",
    "JsonnetVersion": "v0.17.0"
}

Logs

Paste any relevant application logs here.

[ciiay]

I'd like to work on this issue.

[jsoref]

Be my guest 😄

[ciiay]

@jsoref @alexmt For Health Status indicator colors, Missing, Unknown and Suspended are using same shade of gray across the app. Do we want to add more colors to the color scheme to make each pie slice have unique color? This change will affect the entire app wherever there is a health status label.

Here's an example of how it looks with number added to chart legend.

[jsoref]

So, I'd want each pie wedge to have its own color, or at least to ensure that adjacent pie wedges get unique colors. Since there are a finite number of wedges, and since each can be present or absent, it's better for each wedge to have a unique color.

Also there should be a space between Healthy and (3) (and similar for all of the others).

@reginapizza

[ciiay]

@jsoref Thanks for the reply. Space added to chart legends.

To which team member I need to discuss with about adding colors to the app?

[ciiay]

Added a "Shadow Blue"(#7B8DB0) color to the the color scheme, as the color of "Suspended". Also propose to use same warning yellow of "OutOfSync" status for "Missing" health status.

[jsoref]

• Try changing Suspended to a purple (so we use more of the color wheel and fewer things in the Black-Gray area).
• Make the order of the Health Status filter match the order of the pie key (the pie key order seems better to me).

[ciiay]

@jsoref Thanks for the feedback. The gray like color from previous comment was actually generated between a blue shade(#7b8db0) and a red shade(#e96d76) from current color scheme. I aimed at purple too. But the blue shade I used is probably too shallow. I'm changing it to another blue shade to get the more purple like color. The reason I didn't randomly pick a purple color is that using colors from one palette would make the colors more unified in one app.

Reference: https://coolors.co/18be94-f4c030-e96d76-7b8db0-0dadea-766f94-de303d-ccd6dd

[ciiay]

Discussed this color scheme change proposal in contributor meeting, the below decisions were made.

1. Use same yellow shade of "OutOfSync" from Sync Status for "Missing" health status.
2. Add a new color generated from current color scheme as "Suspended" health status color.
3. Use icons with their own unique color which matches pie slice color instead of bullets for the chart legends. Same as status items in filter.
4. Use black text for legends instead of status unique color for easier reading.