report: add explodey gauge for performance category

[connorjclark]

Adds the scoring calculator's neat gauge to navigation reports.

Took from https://github.com/paulirish/lh-scorecalc/tree/restore-unexpanded, but with some changes:

• lh-gauge to lh-exp-gauge, to not conflict with LH's normal gauge
• use metric.acronym instead of .id (there is a TODO for this in the calc codebase)
• removed .toFixed and - 2*endDiffInner thing in arc calculation which made score of 100 have a gap. idk what this was for
• add support for dark theme

demo: https://lighthouse-git-exploding-gauge-googlechrome.vercel.app/sample-reports/english/

[connorjclark]

Should the passive state just remain like this (the height of the peek thing) instead of peeking / hiding?

Should clicking open the calculator?

[adamraine]

Personal opinions and nits:

Should the passive state just remain like this (the height of the peek thing) instead of peeking / hiding?

I would say no, I think it looks kinda weird. Additionally, not sure if it's intended behavior but I do like the the gauge remains "exploded" after moving the mouse away (passive state changes after interacting once)

Should clicking open the calculator?

I'm leaning yes, but we shouldn't remove the other calculator link.

Some other thoughts:

• I don't like the "?" cursor. It seems to imply there should be a tooltip and it's hard to tell what the cursor is pointing at. I would prefer just a normal cursor.
• The size of the number in relation to the size of the entire gauge is different than it was before. I would prefer if the text size didn't change but this is a nit.

[brendankenny]

• Maybe it's my oldish macbook pro, but I feel like there's always been frame drops when I hover the gauge here and in the score calculator, and similar (but inconsistently) when hovering over the individual metric arcs. Any way to ameliorate this?
• The colors make less sense outside of the context given by the score calculator's per metric coloring. Like in the example report, my first thought is why is TBT amber (needs improvement?) when it's so low and the metric is red in the main report. Similar for the blue CLS and red SI, etc. Should the colors all just switch to the scoring color since the point is to give a sense of how you did in each metric maps to the overall score? Less colorful but possibly easier to interpret.

[adamraine]

I like the direction here, would be interested in landing alongside the new performance sorting

[adamraine]

I guess it was I who went 'eh'

[connorjclark]

I am the one who ehs

@paulirish

[paulirish]

but I do like the the gauge remains "exploded" after moving the mouse away

lol its actually not supposed to. that was a bug i wasnt able to squash. it's inconsistent and has a lot to do if you mouse out on the bottom vs the side.

I don't like the "?" cursor.

sgtm. im cool with dropping. (connor already dropped)

maybe it's my oldish macbook pro, but I feel like there's always been frame drops

Yeah I get this too. I made it a lot better than it was originally but there's still some layer mgmt improvements possible.

The colors make less sense outside

fair. (connor changed it)

[paulirish]

other nits:

the main score number probably shouldnt change color to match each metric on hover. it fades out pretty quick, but its distracting that it goes from gray to orange/red before fading out. let's keep as grey while exploded.

check light mode on https://lighthouse-git-exploding-gauge-googlechrome.vercel.app/sample-reports/english/ looks like 'color-average-secondary' is still red in that case.. not orange.

in dark mode the lh-exp-gauge--faded arcs are too dim. can't see the faint red on black. definitely needs like 0.3 opacity in dark. light mode seems fine with 0.1 though.

[paulirish]

fwiw the main score text still changes color ..

1. https://lighthouse-git-exploding-gauge-googlechrome.vercel.app/sample-reports/english/
2. dark mode
3. hover on the gauge
4. move cursor over the CLS section
5. watch the 28 go orange right before fading out

lightmode it fades to average-secondary which is very reddish so you can hardly tell.

[connorjclark]

I removed the calc link because it didn't play well with mobile (can't get the thing to hover without a tap, which would open a new tab).