javascripts/dashboard/utils.js

  1. /**
  2.  * @namespace javascripts.dashboard.utils
  3.  */
  5. /** 
  6.  * Get the success and fail line values for the given context
  7.  *
  8.  * @function targetLineValues
  9.  * @memberof javascripts.dashboard.utils
  10.  */
  11. export function targetLineValues(context) {
  12.   if (context === "production") return { successLineValue: 40, failLineValue: 50 }
  13.   if (context === "deploy-preview") return { successLineValue: 45, failLineValue: 55 }
  14.   if (context === "cms") return { successLineValue: 35, failLineValue: 45 }
  15.   if (context === "lcp") return { successLineValue: 2500, failLineValue: 4000 }
  16.   if (context === "fid") return { successLineValue: 100, failLineValue: 300 }
  17.   if (context === "cls") return { successLineValue: 0.1, failLineValue: 0.25 }
  18. }
  20. /** 
  21.  * Get the minimum axis value for the given context
  22.  *
  23.  * @function minAxisValues
  24.  * @memberof javascripts.dashboard.utils
  25.  */
  26. export function minAxisValues(context) {
  27.   if (context === "production") return 60
  28.   if (context === "deploy-preview") return 60
  29.   if (context === "cms") return 60
  30.   if (context === "lcp") return 5000
  31.   if (context === "fid") return 400
  32.   if (context === "cls") return 0.4
  33. }
  35. /** 
  36.  * Get the x axis legend text for the given context
  37.  *
  38.  * @function axisTextValues
  39.  * @memberof javascripts.dashboard.utils
  40.  */
  41. export function axisTextValues(context) {
  42.   if (context === "production") return "Build number"
  43.   if (context === "deploy-preview") return "Build number"
  44.   if (context === "cms") return "Build number"
  45.   if (context === "lcp") return "Day"
  46.   if (context === "fid") return "Day"
  47.   if (context === "cls") return "Day"
  48. }
  50. /** 
  51.  * Get the y axis unit of measurment in the tooltip for the given context
  52.  *
  53.  * @function axisMeasurementValues
  54.  * @memberof javascripts.dashboard.utils
  55.  */
  56.  export function axisMeasurementValues(context) {
  57.   if (context === "production") return " s"
  58.   if (context === "deploy-preview") return " s"
  59.   if (context === "cms") return " s"
  60.   if (context === "lcp") return " ms"
  61.   if (context === "fid") return " ms"
  62.   if (context === "cls") return ""
  63. }
  65. /** 
  66.  * Allow clicks on the given context
  67.  *
  68.  * @function allowClicks
  69.  * @memberof javascripts.dashboard.utils
  70.  */
  71.  export function allowClicks(context) {
  72.   if (context === "production") return true
  73.   if (context === "deploy-preview") return true
  74.   if (context === "cms") return true
  75.   if (context === "lcp") return false
  76.   if (context === "fid") return false
  77.   if (context === "cls") return false
  78. }
  80. /** 
  81.  * Return all objects that have the key value within the given percentile
  82.  *
  83.  * @function metricsInPercentile
  84.  * @memberof javascripts.dashboard.utils
  85.  */
  86. export function metricsInPercentile(data, key, percentile) {
  87.   const selectedValues = data.map((object) => object[key])
  88.   const sortedValues = sortNumberArray(selectedValues)
  89.   const percentileLimit = percentileValue(sortedValues, percentile)
  90.   return data.filter((object) => object[key] <= percentileLimit )
  91. }
  93. /** 
  94.  * Sort the numbers from smallest to largest
  95.  *
  96.  * @function sortNumberArray
  97.  * @memberof javascripts.dashboard.utils
  98.  */
  99. function sortNumberArray(arr) {
  100.   return arr.sort((a, b) => a - b)
  101. }
  103. /** 
  104.  * Get the value for the given percentile
  105.  *
  106.  * @function percentileValue
  107.  * @memberof javascripts.dashboard.utils
  108.  */
  109. function percentileValue(arr, p) {
  110.   if (arr.length === 0) return 0;
  111.   if (typeof p !== "number") throw new TypeError("p must be a number");
  112.   if (p <= 0) return arr[0];
  113.   if (p >= 1) return arr[arr.length - 1];
  115.   let index = (arr.length - 1) * p,
  116.       lower = Math.floor(index),
  117.       upper = lower + 1,
  118.       weight = index % 1
  120.   if (upper >= arr.length) return arr[lower];
  121.   return arr[lower] * (1 - weight) + arr[upper] * weight;
  122. }
  124. export function percentage(total, value) {
  125.   return Math.round(
  126.     (((value / total) * 100) + Number.EPSILON) * 10
  127.   ) / 10
  128. }