Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a metric rating property #246

Merged
merged 1 commit into from
Jul 22, 2022
Merged

Add a metric rating property #246

merged 1 commit into from
Jul 22, 2022

Conversation

philipwalton
Copy link
Member

This PR address #2 by adding a new rating property to the Metric object.

interface Metric {
  /**
   * The rating as to whether the metric value is within the "good",
   * "needs improvement", or "poor" thresholds of the metric.
   */
  rating: 'good' | 'ni' | 'poor';
  
  // ...
}

Note: I opted to use "ni" rather than the full string "needs improvement" because I felt it was awkward to have such a long value with a space in it. I'm open to feedback or suggestions on that though.

Comment on lines 20 to 28
const getRating = (value: number, thresholds: number[]) => {
if (value > thresholds[1]) {
return 'poor';
}
if (value > thresholds[0]) {
return 'ni';
}
return 'good';
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we check its >= 0 before returning good?

Maybe return null or such like if < 0

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we have to. This function is only ever called from within a conditional that check if metric.value >= 0 (see line 40).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems a good safety check to add in case that ever becomes not there case?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't want to type that it could be string | null, because I think that would unnecessarily concern users of the library (especially TypeScript users).

I think to handle your concern it's better to have a test that checks that case rather than building it into the code (that users have to download even though it's not currently needed). There are lots of tests currently that make sure the metric value is greater than or equal to 0, and those would all start failing if that were ever not the case.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah typescript! Must learn that…

Not a big deal, so fine to resolve this. Plus arguably a negative number IS a “good” score by the metric definitions 😄And the bug if that ever happens is upstream not in this function.

Alternatively could also return “unknown”.

Copy link
Member

@tunetheweb tunetheweb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@Tiggerito
Copy link

For my solution, I calculated the rating and returned an object like this:

return {
rating: 'ni',
name: 'Needs Improvement'
}

For my GA4 implementation, I sent both values as metric_rating and metric_status. The latter makes it easier to build reports.

Maybe over-engineering for most.

@philipwalton
Copy link
Member Author

Update: I changed 'ni' to 'needs-improvement' based on the recommendation of colleagues and to be consistent with the recommendations for enumeration values section of the TAG's Design Principles guide.

@philipwalton philipwalton merged commit 693e898 into next Jul 22, 2022
@philipwalton philipwalton deleted the thresholds branch July 22, 2022 21:43
zemnmez-renovate-bot added a commit to zemn-me/monorepo that referenced this pull request Oct 5, 2024
##### [`v4.2.3](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v423-2024-08-06)

-   Fix missing LoAF entries in INP attribution ([#512](GoogleChrome/web-vitals#512))
##### [`v4.2.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v422-2024-07-17)

-   Fix interaction count after bfcache restore ([#505](GoogleChrome/web-vitals#505))
##### [`v4.2.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v421-2024-06-30)

-   Fix compatibility issues with TypeScript v5.5 ([#497](GoogleChrome/web-vitals#497))
##### [`v4.2.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v420-2024-06-20)

-   Refactor INP attribution code to fix errors on Windows 10 ([#495](GoogleChrome/web-vitals#495))
##### [`v4.1.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v411-2024-06-10)

-   Fix pending LoAF cleanup logic ([#493](GoogleChrome/web-vitals#493))
##### [`v4.1.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v410-2024-06-06)

-   Move the support check to the top of the onINP() function ([#490](GoogleChrome/web-vitals#490))
-   Fix missing LoAF attribution when entries are dispatched before event entries ([#487](GoogleChrome/web-vitals#487))
##### [`v4.0.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v401-2024-05-21)

-   Add the `ReportCallback` type back but deprecate it ([#483](GoogleChrome/web-vitals#483))
##### [`v4.0.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v400-2024-05-13)

-   **\[BREAKING]** Update types to support more generic usage ([#471](GoogleChrome/web-vitals#471))
-   **\[BREAKING]** Split `waitingDuration` to make it easier to understand redirect delays ([#458](GoogleChrome/web-vitals#458))
-   **\[BREAKING]** Rename `TTFBAttribution` fields from `*Time` to `*Duration` ([#453](GoogleChrome/web-vitals#453))
-   **\[BREAKING]** Rename `resourceLoadTime` to `resourceLoadDuration` in LCP attribution ([#450](GoogleChrome/web-vitals#450))
-   **\[BREAKING]** Add INP breakdown timings and LoAF attribution ([#442](GoogleChrome/web-vitals#442))
-   **\[BREAKING]** Deprecate `onFID()` and remove previously deprecated APIs ([#435](GoogleChrome/web-vitals#435))
-   Expose the target element in INP attribution ([#479](GoogleChrome/web-vitals#479))
-   Save INP target after interactions to reduce null values when removed from the DOM ([#477](GoogleChrome/web-vitals#477))
-   Cap TTFB in attribution ([#440](GoogleChrome/web-vitals#440))
-   Fix `reportAllChanges` behavior for LCP when library is loaded late ([#468](GoogleChrome/web-vitals#468))
##### [`v3.5.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v352-2024-01-25)

-   Pick the first non-null `target` for INP attribution ([#421](GoogleChrome/web-vitals#421))
##### [`v3.5.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v351-2023-12-27)

-   Add extra guard for `PerformanceEventTiming` not existing ([#403](GoogleChrome/web-vitals#403))
##### [`v3.5.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v350-2023-09-28)

-   Run `onLCP` callback in separate task ([#386](GoogleChrome/web-vitals#386))
-   Fix INP durationThreshold bug when set to 0 ([#372](GoogleChrome/web-vitals#372))
-   Prevent FID entries being emitted as INP for non-supporting browsers ([#368](GoogleChrome/web-vitals#368))
##### [`v3.4.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v340-2023-07-11)

-   Make `bindReporter` generic over metric type ([#359](GoogleChrome/web-vitals#359))
-   Update INP status in README ([#362](GoogleChrome/web-vitals#362))
-   Fix Metric types for better TypeScript support ([#356](GoogleChrome/web-vitals#356))
-   Fix selector for SVGs for attribution build ([#354](GoogleChrome/web-vitals#354))
##### [`v3.3.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v332-2023-05-29)

-   Fix attribution types ([#348](GoogleChrome/web-vitals#348))
-   Safe access navigation entry type ([#290](GoogleChrome/web-vitals#290))
##### [`v3.3.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v331-2023-04-04)

-   Export metric rating thresholds in attribution build as well.
##### [`v3.3.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v330-2023-03-09)

-   Export metric rating thresholds, add explicit `MetricRatingThresholds` type ([#323](GoogleChrome/web-vitals#323))
-   Trim classname selector ([#328](GoogleChrome/web-vitals#328))
-   Add link to CrUX versus RUM blog post ([#327](GoogleChrome/web-vitals#327))
-   Prevent LCP being reported for hidden prerendered pages ([#326](GoogleChrome/web-vitals#326))
-   Add Server Timing information to docs ([#324](GoogleChrome/web-vitals#324))
-   Fix link in `onINP()` thresholds comment ([#318](GoogleChrome/web-vitals#318))
-   Update web.dev link for `onINP()` ([#307](GoogleChrome/web-vitals#307))
-   Add a note about when to load the library ([#305](GoogleChrome/web-vitals#305))
##### [`v3.1.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v311-2023-01-10)

-   Defer CLS logic until after `onFCP()` callback ([#297](GoogleChrome/web-vitals#297))
##### [`v3.1.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v310-2022-11-15)

-   Add support for `'restore'` as a `navigationType` ([#284](GoogleChrome/web-vitals#284))
-   Report initial CLS value when `reportAllChanges` is true ([#283](GoogleChrome/web-vitals#283))
-   Defer all observers until after activation ([#282](GoogleChrome/web-vitals#282))
-   Ignore TTFB for loads where responseStart is zero ([#281](GoogleChrome/web-vitals#281))
-   Defer execution of observer callbacks ([#278](GoogleChrome/web-vitals#278))
##### [`v3.0.4](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v304-2022-10-18)

-   Clamp LCP and FCP to 0 for prerendered pages ([#270](GoogleChrome/web-vitals#270))
##### [`v3.0.3](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v303-2022-10-04)

-   Ensure `attribution` object is always present in attribution build ([#265](GoogleChrome/web-vitals#265))
##### [`v3.0.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v302-2022-09-14)

-   Set an explicit unpkg dist file ([#261](GoogleChrome/web-vitals#261))
##### [`v3.0.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v301-2022-08-31)

-   Use the cjs extension for all UMD builds ([#257](GoogleChrome/web-vitals#257))
##### [`v3.0.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v300-2022-08-24)

-   **\[BREAKING]** Add a config object param to all metric functions ([#225](GoogleChrome/web-vitals#225))
-   **\[BREAKING]** Report TTFB after a bfcache restore ([#220](GoogleChrome/web-vitals#220))
-   **\[BREAKING]** Only include last LCP entry in metric entries ([#218](GoogleChrome/web-vitals#218))
-   Update the metric ID prefix for v3 ([#251](GoogleChrome/web-vitals#251))
-   Move the Navigation Timing API polyfill to the base+polyfill build ([#248](GoogleChrome/web-vitals#248))
-   Add a metric rating property ([#246](GoogleChrome/web-vitals#246))
-   Add deprecation notices for base+polyfill builds ([#242](GoogleChrome/web-vitals#242))
-   Add a new attribution build for debugging issues in the field ([#237](GoogleChrome/web-vitals#237), [#244](GoogleChrome/web-vitals#244))
-   Add support for prerendered pages ([#233](GoogleChrome/web-vitals#233))
-   Rename the `ReportHandler` type to `ReportCallback`, with alias for back-compat ([#225](GoogleChrome/web-vitals#225), [#227](GoogleChrome/web-vitals#227))
-   Add support for the new INP metric ([#221](GoogleChrome/web-vitals#221), [#232](GoogleChrome/web-vitals#232))
-   Rename `getXXX()` functions to `onXXX()` ([#222](GoogleChrome/web-vitals#222))
-   Add a `navigationType` property to the Metric object ([#219](GoogleChrome/web-vitals#219))
github-merge-queue bot pushed a commit to zemn-me/monorepo that referenced this pull request Oct 5, 2024
##### [`v4.2.3](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v423-2024-08-06)

-   Fix missing LoAF entries in INP attribution ([#512](GoogleChrome/web-vitals#512))
##### [`v4.2.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v422-2024-07-17)

-   Fix interaction count after bfcache restore ([#505](GoogleChrome/web-vitals#505))
##### [`v4.2.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v421-2024-06-30)

-   Fix compatibility issues with TypeScript v5.5 ([#497](GoogleChrome/web-vitals#497))
##### [`v4.2.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v420-2024-06-20)

-   Refactor INP attribution code to fix errors on Windows 10 ([#495](GoogleChrome/web-vitals#495))
##### [`v4.1.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v411-2024-06-10)

-   Fix pending LoAF cleanup logic ([#493](GoogleChrome/web-vitals#493))
##### [`v4.1.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v410-2024-06-06)

-   Move the support check to the top of the onINP() function ([#490](GoogleChrome/web-vitals#490))
-   Fix missing LoAF attribution when entries are dispatched before event entries ([#487](GoogleChrome/web-vitals#487))
##### [`v4.0.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v401-2024-05-21)

-   Add the `ReportCallback` type back but deprecate it ([#483](GoogleChrome/web-vitals#483))
##### [`v4.0.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v400-2024-05-13)

-   **\[BREAKING]** Update types to support more generic usage ([#471](GoogleChrome/web-vitals#471))
-   **\[BREAKING]** Split `waitingDuration` to make it easier to understand redirect delays ([#458](GoogleChrome/web-vitals#458))
-   **\[BREAKING]** Rename `TTFBAttribution` fields from `*Time` to `*Duration` ([#453](GoogleChrome/web-vitals#453))
-   **\[BREAKING]** Rename `resourceLoadTime` to `resourceLoadDuration` in LCP attribution ([#450](GoogleChrome/web-vitals#450))
-   **\[BREAKING]** Add INP breakdown timings and LoAF attribution ([#442](GoogleChrome/web-vitals#442))
-   **\[BREAKING]** Deprecate `onFID()` and remove previously deprecated APIs ([#435](GoogleChrome/web-vitals#435))
-   Expose the target element in INP attribution ([#479](GoogleChrome/web-vitals#479))
-   Save INP target after interactions to reduce null values when removed from the DOM ([#477](GoogleChrome/web-vitals#477))
-   Cap TTFB in attribution ([#440](GoogleChrome/web-vitals#440))
-   Fix `reportAllChanges` behavior for LCP when library is loaded late ([#468](GoogleChrome/web-vitals#468))
##### [`v3.5.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v352-2024-01-25)

-   Pick the first non-null `target` for INP attribution ([#421](GoogleChrome/web-vitals#421))
##### [`v3.5.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v351-2023-12-27)

-   Add extra guard for `PerformanceEventTiming` not existing ([#403](GoogleChrome/web-vitals#403))
##### [`v3.5.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v350-2023-09-28)

-   Run `onLCP` callback in separate task ([#386](GoogleChrome/web-vitals#386))
-   Fix INP durationThreshold bug when set to 0 ([#372](GoogleChrome/web-vitals#372))
-   Prevent FID entries being emitted as INP for non-supporting browsers ([#368](GoogleChrome/web-vitals#368))
##### [`v3.4.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v340-2023-07-11)

-   Make `bindReporter` generic over metric type ([#359](GoogleChrome/web-vitals#359))
-   Update INP status in README ([#362](GoogleChrome/web-vitals#362))
-   Fix Metric types for better TypeScript support ([#356](GoogleChrome/web-vitals#356))
-   Fix selector for SVGs for attribution build ([#354](GoogleChrome/web-vitals#354))
##### [`v3.3.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v332-2023-05-29)

-   Fix attribution types ([#348](GoogleChrome/web-vitals#348))
-   Safe access navigation entry type ([#290](GoogleChrome/web-vitals#290))
##### [`v3.3.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v331-2023-04-04)

-   Export metric rating thresholds in attribution build as well.
##### [`v3.3.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v330-2023-03-09)

-   Export metric rating thresholds, add explicit `MetricRatingThresholds` type ([#323](GoogleChrome/web-vitals#323))
-   Trim classname selector ([#328](GoogleChrome/web-vitals#328))
-   Add link to CrUX versus RUM blog post ([#327](GoogleChrome/web-vitals#327))
-   Prevent LCP being reported for hidden prerendered pages ([#326](GoogleChrome/web-vitals#326))
-   Add Server Timing information to docs ([#324](GoogleChrome/web-vitals#324))
-   Fix link in `onINP()` thresholds comment ([#318](GoogleChrome/web-vitals#318))
-   Update web.dev link for `onINP()` ([#307](GoogleChrome/web-vitals#307))
-   Add a note about when to load the library ([#305](GoogleChrome/web-vitals#305))
##### [`v3.1.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v311-2023-01-10)

-   Defer CLS logic until after `onFCP()` callback ([#297](GoogleChrome/web-vitals#297))
##### [`v3.1.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v310-2022-11-15)

-   Add support for `'restore'` as a `navigationType` ([#284](GoogleChrome/web-vitals#284))
-   Report initial CLS value when `reportAllChanges` is true ([#283](GoogleChrome/web-vitals#283))
-   Defer all observers until after activation ([#282](GoogleChrome/web-vitals#282))
-   Ignore TTFB for loads where responseStart is zero ([#281](GoogleChrome/web-vitals#281))
-   Defer execution of observer callbacks ([#278](GoogleChrome/web-vitals#278))
##### [`v3.0.4](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v304-2022-10-18)

-   Clamp LCP and FCP to 0 for prerendered pages ([#270](GoogleChrome/web-vitals#270))
##### [`v3.0.3](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v303-2022-10-04)

-   Ensure `attribution` object is always present in attribution build ([#265](GoogleChrome/web-vitals#265))
##### [`v3.0.2](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v302-2022-09-14)

-   Set an explicit unpkg dist file ([#261](GoogleChrome/web-vitals#261))
##### [`v3.0.1](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v301-2022-08-31)

-   Use the cjs extension for all UMD builds ([#257](GoogleChrome/web-vitals#257))
##### [`v3.0.0](https://github.com/GoogleChrome/web-vitals/blob/HEAD/CHANGELOG.md#v300-2022-08-24)

-   **\[BREAKING]** Add a config object param to all metric functions ([#225](GoogleChrome/web-vitals#225))
-   **\[BREAKING]** Report TTFB after a bfcache restore ([#220](GoogleChrome/web-vitals#220))
-   **\[BREAKING]** Only include last LCP entry in metric entries ([#218](GoogleChrome/web-vitals#218))
-   Update the metric ID prefix for v3 ([#251](GoogleChrome/web-vitals#251))
-   Move the Navigation Timing API polyfill to the base+polyfill build ([#248](GoogleChrome/web-vitals#248))
-   Add a metric rating property ([#246](GoogleChrome/web-vitals#246))
-   Add deprecation notices for base+polyfill builds ([#242](GoogleChrome/web-vitals#242))
-   Add a new attribution build for debugging issues in the field ([#237](GoogleChrome/web-vitals#237), [#244](GoogleChrome/web-vitals#244))
-   Add support for prerendered pages ([#233](GoogleChrome/web-vitals#233))
-   Rename the `ReportHandler` type to `ReportCallback`, with alias for back-compat ([#225](GoogleChrome/web-vitals#225), [#227](GoogleChrome/web-vitals#227))
-   Add support for the new INP metric ([#221](GoogleChrome/web-vitals#221), [#232](GoogleChrome/web-vitals#232))
-   Rename `getXXX()` functions to `onXXX()` ([#222](GoogleChrome/web-vitals#222))
-   Add a `navigationType` property to the Metric object ([#219](GoogleChrome/web-vitals#219))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants