studiocms/dist/integrations/webVitals/utils/webVitalsUtils.js

Astro Native CMS for AstroDB. Built from the ground up by the Astro community.

function msToSeconds(ms) {
  return ms / 1e3;
}
function calculateClsAverage(clsValues) {
  const sum = clsValues.reduce((acc, curr) => acc + curr, 0);
  const average = sum / clsValues.length;
  return Math.round(average * 100) / 100;
}
const clsDataAverage = (webVitalData) => {
  const clsData = [];
  if (webVitalData) {
    for (const item of webVitalData) {
      if (item.name === "CLS") {
        clsData.push(item.value);
      }
    }
  }
  return calculateClsAverage(clsData);
};
function calculateClsScoreText(cls) {
  if (cls <= 0.1) {
    return "Excellent";
  }
  if (cls <= 0.25) {
    return "Good";
  }
  if (cls <= 0.5) {
    return "Fair";
  }
  return "Poor";
}
function calculateClsScorePercent(cls) {
  if (cls <= 0.1) {
    return 100;
  }
  if (cls <= 0.25) {
    return Math.round(100 - (cls - 0.1) / (0.25 - 0.1) * 25);
  }
  if (cls <= 0.5) {
    return Math.round(75 - (cls - 0.25) / (0.5 - 0.25) * 25);
  }
  return Math.round(50 - (cls - 0.5) / (1 - 0.5) * 50);
}
const progressBarClsColor = (clsData) => {
  if (clsData <= 0.25) {
    return "green";
  }
  if (clsData > 0.25 && clsData <= 0.5) {
    return "yellow";
  }
  return "red";
};
const progressBarClsTrackColor = (clsData) => {
  if (clsData <= 0.25) {
    return "yellow";
  }
  if (clsData > 0.25) {
    return "red";
  }
  return "red";
};
const clsTextColor = (clsData) => {
  if (clsData <= 0.25) {
    return "green";
  }
  if (clsData > 0.25 && clsData <= 0.5) {
    return "yellow";
  }
  return "red";
};
function calculateLcpAverage(lcpValues) {
  const sum = lcpValues.reduce((acc, curr) => acc + curr, 0);
  const average = sum / lcpValues.length;
  return Math.floor(Math.round(average * 100) / 100);
}
const lcpDataAverage = (webVitalData) => {
  const lcpData = [];
  if (webVitalData) {
    for (const item of webVitalData) {
      if (item.name === "LCP") {
        lcpData.push(item.value);
      }
    }
  }
  return calculateLcpAverage(lcpData);
};
function calculateLcpScoreText(lcp) {
  if (msToSeconds(lcp) <= 2) {
    return "Excellent";
  }
  if (msToSeconds(lcp) <= 4) {
    return "Good";
  }
  if (msToSeconds(lcp) <= 6) {
    return "Fair";
  }
  return "Poor";
}
function calculateLcpScorePercent(lcp) {
  if (msToSeconds(lcp) <= 2) {
    return 100;
  }
  if (msToSeconds(lcp) <= 4) {
    return Math.round(100 - (lcp - 2) / (4 - 2) * 50);
  }
  if (msToSeconds(lcp) <= 6) {
    return Math.round(50 - (lcp - 4) / (6 - 4) * 50);
  }
  return Math.round(0 - (lcp - 6) / (10 - 6) * 50);
}
const progressBarLcpColor = (lcpData) => {
  if (msToSeconds(lcpData) <= 2.5) {
    return "green";
  }
  if (msToSeconds(lcpData) > 2.5 && msToSeconds(lcpData) <= 4) {
    return "yellow";
  }
  return "red";
};
const progressBarLcpTrackColor = (lcpData) => {
  if (msToSeconds(lcpData) <= 2.5) {
    return "yellow";
  }
  if (msToSeconds(lcpData) > 2.5) {
    return "red";
  }
  return "red";
};
const lcpTextColor = (lcpData) => {
  if (msToSeconds(lcpData) <= 2.5) {
    return "green";
  }
  if (msToSeconds(lcpData) > 2.5 && msToSeconds(lcpData) <= 4) {
    return "yellow";
  }
  return "red";
};
function calculateInpAverage(inpValues) {
  const sum = inpValues.reduce((acc, curr) => acc + curr, 0);
  const average = sum / inpValues.length;
  return Math.round(average * 100) / 100;
}
function inpDataAverage(webVitalData) {
  const inpData = [];
  if (webVitalData) {
    for (const item of webVitalData) {
      if (item.name === "INP") {
        inpData.push(item.value);
      }
    }
  }
  return Math.floor(calculateInpAverage(inpData));
}
function calculateInpScoreText(inp) {
  if (inp <= 50) {
    return "Excellent";
  }
  if (inp <= 100) {
    return "Good";
  }
  if (inp <= 200) {
    return "Fair";
  }
  return "Poor";
}
function calculateInpScorePercent(inp) {
  if (inp <= 50) {
    return 100;
  }
  if (inp <= 100) {
    return Math.round(100 - (inp - 50) / (100 - 50) * 50);
  }
  if (inp <= 200) {
    return Math.round(50 - (inp - 100) / (200 - 100) * 50);
  }
  return Math.round(0 - (inp - 200) / (300 - 200) * 50);
}
const progressBarInpColor = (inpData) => {
  if (inpData <= 100) {
    return "green";
  }
  if (inpData > 100 && inpData <= 200) {
    return "yellow";
  }
  return "red";
};
const progressBarInpTrackColor = (inpData) => {
  if (inpData <= 100) {
    return "yellow";
  }
  if (inpData > 100) {
    return "red";
  }
  return "red";
};
const inpTextColor = (inpData) => {
  if (inpData <= 100) {
    return "green";
  }
  if (inpData > 100 && inpData <= 200) {
    return "yellow";
  }
  return "red";
};
function generateLighthouseFetchUrl(url, strategy = "mobile") {
  const baseUrl = "https://www.googleapis.com/pagespeedonline/v5/runPagespeed";
  const fetchUrl = `${baseUrl}?url=${encodeURIComponent(url)}&fields=lighthouseResult%2Fcategories%2F*%2Fscore&prettyPrint=false&strategy=${strategy}&category=performance&category=pwa&category=best-practices&category=accessibility&category=seo`;
  return fetchUrl;
}
export {
  calculateClsAverage,
  calculateClsScorePercent,
  calculateClsScoreText,
  calculateInpAverage,
  calculateInpScorePercent,
  calculateInpScoreText,
  calculateLcpAverage,
  calculateLcpScorePercent,
  calculateLcpScoreText,
  clsDataAverage,
  clsTextColor,
  generateLighthouseFetchUrl,
  inpDataAverage,
  inpTextColor,
  lcpDataAverage,
  lcpTextColor,
  msToSeconds,
  progressBarClsColor,
  progressBarClsTrackColor,
  progressBarInpColor,
  progressBarInpTrackColor,
  progressBarLcpColor,
  progressBarLcpTrackColor
};