Add a ‘needs improvement’ threshold for core web vitals; improve icons.

[adamsilverstein]

Core web vitals CLS, FID and LCP define both a "good" threshold and a "needs improvement" threshold (see web.dev). This PR seeks to recognize those thresholds and display a 'warning' icon when a metric needs improvement.

I left the green checkmark for good, added a yellow warning for needs improvement and changed the is-poor icon to a red X.

Looks something like this:

[stefanjudis]

One tiny nit. Thanks so much @adamsilverstein, I'm happy to 🚢 after a tiny adjustment. :)

[stefanjudis]

Tiny nit here: what do you think of having a threshold property instead of these two.

{
  thresholds: {
    good: '',
    needsImprovement: '',
    poor: ''
  }
}

I think I'd like to avoid of having them all in the root object level. :)

[adamsilverstein]

Tiny nit here: what do you think of having a threshold property instead of these two.

Great suggestion, I will adjust the PR to make it so.

[adamsilverstein]

@stefanjudis in 5d0c4d1 (#2) I moved the thresholds to a root thresholds object as you suggested.

Please note there is no poor value because the way the logic works is: default score is poor; if metric has a needsImprovement setting and the value meets needsImprovement threshold, score is needsImprovement. if value meets the good threshold, score is good.

[stefanjudis]

That looks good to me. Thanks a bunch @adamsilverstein.

I'm gonna merge have a final look and will release a minor version. :)

[stefanjudis]

And v1.1.0 released. :)