studiocms 0.1.0-beta.10

package/dist/lib/webVitals/types.d.ts

@@ -0,0 +1,156 @@
+import type { CoreWebVitalsMetricType, WebVitalsRating } from './schemas.js';
+/**
+ * Represents a single web vitals response item.
+ *
+ * @property {string} id - The unique identifier for the web vitals response item.
+ * @property {string} pathname - The pathname of the web page.
+ * @property {string} route - The route of the web page.
+ * @property {string} name - The name of the web vital metric.
+ * @property {number} value - The value of the web vital metric.
+ * @property {'good' | 'needs-improvement' | 'poor'} rating - The rating of the web vital metric.
+ * @property {Date} timestamp - The timestamp when the web vital metric was recorded.
+ * @property {boolean} [rating_end] - Optional flag indicating if the rating is final.
+ * @property {number} [quartile] - Optional quartile value of the web vital metric.
+ * @property {boolean} [quartile_end] - Optional flag indicating if the quartile value is final.
+ */
+export type WebVitalsResponseItem = {
+    id: string;
+    pathname: string;
+    route: string;
+    name: string;
+    value: number;
+    rating: 'good' | 'needs-improvement' | 'poor';
+    timestamp: Date;
+    rating_end?: boolean;
+    quartile?: number;
+    quartile_end?: boolean;
+};
+export interface WebVitalsMetricSummary {
+    histogram: Record<WebVitalsRating, number>;
+    percentiles: Partial<Record<'p75', {
+        value: number;
+        rating: WebVitalsRating;
+    }>>;
+    sampleSize: number;
+}
+/**
+ * Represents a summary of web vitals metrics.
+ */
+export interface WebVitalsMetricSummary {
+    /**
+     * A histogram that maps each web vitals rating to a number.
+     */
+    histogram: Record<WebVitalsRating, number>;
+    /**
+     * An object containing percentiles, specifically the 75th percentile (p75),
+     * with its value and corresponding web vitals rating.
+     */
+    percentiles: Partial<Record<'p75', {
+        value: number;
+        rating: WebVitalsRating;
+    }>>;
+    /**
+     * The size of the sample used to calculate the metrics.
+     */
+    sampleSize: number;
+}
+/**
+ * This type is a record where the keys are strings representing the names of the metrics,
+ * and the values are `WebVitalsMetricSummary` objects containing the summary details for each metric.
+ */
+export type WebVitalsSummary = Record<string, WebVitalsMetricSummary>;
+/**
+ * Represents the statistics of a web vital metric.
+ */
+export interface MetricStats {
+    value: number;
+    rating: WebVitalsRating;
+    sampleSize: number;
+}
+/**
+ * Represents a summary of web vitals for a specific route.
+ */
+export interface IntermediateWebVitalsRouteSummary {
+    /**
+     * The route for which the web vitals are summarized.
+     */
+    route: string;
+    /**
+     * Indicates whether the core web vitals for the route are passing.
+     */
+    passingCoreWebVitals: boolean;
+    /**
+     * A partial record of core web vitals metrics and their statistics.
+     */
+    metrics: Partial<Record<CoreWebVitalsMetricType, MetricStats>>;
+    score: number;
+}
+/**
+ * Represents a summary of web vitals metrics for a specific route.
+ * Extends the `IntermediateWebVitalsRouteSummary` interface.
+ *
+ * @interface WebVitalsRouteSummary
+ * @extends {IntermediateWebVitalsRouteSummary}
+ *
+ * @property {Record<CoreWebVitalsMetricType, MetricStats>} metrics -
+ * A record of core web vitals metrics and their corresponding statistics.
+ */
+export interface WebVitalsRouteSummary extends IntermediateWebVitalsRouteSummary {
+    metrics: Record<CoreWebVitalsMetricType, MetricStats>;
+}
+/**
+ * Interface representing the data structure for web vitals.
+ */
+export interface GetWebVitalsData {
+    /**
+     * Array of raw web vitals data items, excluding 'rating_end', 'quartile', and 'quartile_end' properties.
+     */
+    raw: Omit<WebVitalsResponseItem, 'rating_end' | 'quartile' | 'quartile_end'>[];
+    /**
+     * Summary of web vitals data for different routes.
+     */
+    routeSummary: WebVitalsRouteSummary[];
+    /**
+     * Overall summary of web vitals data.
+     */
+    summary: WebVitalsSummary;
+    /**
+     * Web vitals data for the last 24 hours.
+     */
+    twentyFourHours: {
+        /**
+         * Summary of web vitals data for the last 24 hours.
+         */
+        summary: WebVitalsSummary;
+        /**
+         * Summary of web vitals data for different routes in the last 24 hours.
+         */
+        routeSummary: WebVitalsRouteSummary[];
+    };
+    /**
+     * Web vitals data for the last 7 days.
+     */
+    sevenDays: {
+        /**
+         * Summary of web vitals data for the last 7 days.
+         */
+        summary: WebVitalsSummary;
+        /**
+         * Summary of web vitals data for different routes in the last 7 days.
+         */
+        routeSummary: WebVitalsRouteSummary[];
+    };
+    /**
+     * Web vitals data for the last 30 days.
+     */
+    thirtyDays: {
+        /**
+         * Summary of web vitals data for the last 30 days.
+         */
+        summary: WebVitalsSummary;
+        /**
+         * Summary of web vitals data for different routes in the last 30 days.
+         */
+        routeSummary: WebVitalsRouteSummary[];
+    };
+}

package/dist/lib/webVitals/utils/buildDataObject.d.ts

@@ -0,0 +1,8 @@
+import type { WebVitalsResponseItem } from '../types.js';
+export type BuildDataObject = {
+    historicalData: WebVitalsResponseItem[];
+    last24HoursData: WebVitalsResponseItem[];
+    last7DaysData: WebVitalsResponseItem[];
+    last30DaysData: WebVitalsResponseItem[];
+};
+export declare function buildDataObject(webVitalData: WebVitalsResponseItem[], collect: string): BuildDataObject;

package/dist/lib/webVitals/utils/buildDataObject.js

@@ -0,0 +1,28 @@
+import { checkDate } from "./checkDate.js";
+function buildDataObject(webVitalData, collect) {
+  const data = {
+    historicalData: [],
+    last24HoursData: [],
+    last7DaysData: [],
+    last30DaysData: []
+  };
+  for (const item of webVitalData) {
+    const { name, timestamp } = item;
+    if (name === collect) {
+      data.historicalData.push(item);
+      if (checkDate(timestamp).isInLast24Hours()) {
+        data.last24HoursData.push(item);
+      }
+      if (checkDate(timestamp).isInLast7Days()) {
+        data.last7DaysData.push(item);
+      }
+      if (checkDate(timestamp).isInLast30Days()) {
+        data.last30DaysData.push(item);
+      }
+    }
+  }
+  return data;
+}
+export {
+  buildDataObject
+};

package/dist/lib/webVitals/utils/buildPageRouteDataObject.d.ts

@@ -0,0 +1,15 @@
+import type { WebVitalsResponseItem } from '../types.js';
+type pageRouteDataEntry = {
+    pagePathname: string;
+    analyticData: {
+        pageRoute: string;
+        pageViews: number;
+    };
+};
+export declare const buildPageRouteDataObject: (webVitalData: WebVitalsResponseItem[]) => {
+    last24HoursData: pageRouteDataEntry[];
+    last7DaysData: pageRouteDataEntry[];
+    last30DaysData: pageRouteDataEntry[];
+    perRouteData: pageRouteDataEntry[];
+};
+export {};

package/dist/lib/webVitals/utils/buildPageRouteDataObject.js

@@ -0,0 +1,70 @@
+import { checkDate } from "./checkDate.js";
+const buildPageRouteDataObject = (webVitalData) => {
+  const perRouteData = [];
+  const last24HoursData = [];
+  const last7DaysData = [];
+  const last30DaysData = [];
+  if (webVitalData.length > 0) {
+    for (const item of webVitalData) {
+      const { pathname, route, timestamp } = item;
+      if (checkDate(timestamp).isInLast24Hours()) {
+        const index2 = last24HoursData.findIndex((entry) => entry.pagePathname === pathname);
+        if (index2 !== -1) {
+          last24HoursData[index2].analyticData.pageViews += 1;
+        } else {
+          last24HoursData.push({
+            pagePathname: pathname,
+            analyticData: {
+              pageRoute: route,
+              pageViews: 1
+            }
+          });
+        }
+      }
+      if (checkDate(timestamp).isInLast7Days()) {
+        const index2 = last7DaysData.findIndex((entry) => entry.pagePathname === pathname);
+        if (index2 !== -1) {
+          last7DaysData[index2].analyticData.pageViews += 1;
+        } else {
+          last7DaysData.push({
+            pagePathname: pathname,
+            analyticData: {
+              pageRoute: route,
+              pageViews: 1
+            }
+          });
+        }
+      }
+      if (checkDate(timestamp).isInLast30Days()) {
+        const index2 = last30DaysData.findIndex((entry) => entry.pagePathname === pathname);
+        if (index2 !== -1) {
+          last30DaysData[index2].analyticData.pageViews += 1;
+        } else {
+          last30DaysData.push({
+            pagePathname: pathname,
+            analyticData: {
+              pageRoute: route,
+              pageViews: 1
+            }
+          });
+        }
+      }
+      const index = perRouteData.findIndex((entry) => entry.pagePathname === pathname);
+      if (index !== -1) {
+        perRouteData[index].analyticData.pageViews += 1;
+      } else {
+        perRouteData.push({
+          pagePathname: pathname,
+          analyticData: {
+            pageRoute: route,
+            pageViews: 1
+          }
+        });
+      }
+    }
+  }
+  return { last24HoursData, last7DaysData, last30DaysData, perRouteData };
+};
+export {
+  buildPageRouteDataObject
+};

package/dist/lib/webVitals/utils/buildPerPageDataObject.d.ts

@@ -0,0 +1,23 @@
+import type { WebVitalsResponseItem } from '../types.js';
+export type perPageDataEntry = {
+    pageRoute: string;
+    sampleSize: number;
+    CLS: {
+        average: number;
+        rating: string;
+    };
+    LCP: {
+        average: number;
+        rating: string;
+    };
+    INP: {
+        average: number;
+        rating: string;
+    };
+};
+export declare const buildPerPageRouteDataObject: (webVitalData: WebVitalsResponseItem[]) => {
+    historicalData: perPageDataEntry[];
+    last24HoursData: perPageDataEntry[];
+    last7DaysData: perPageDataEntry[];
+    last30DaysData: perPageDataEntry[];
+};

package/dist/lib/webVitals/utils/buildPerPageDataObject.js

@@ -0,0 +1,209 @@
+import { checkDate } from "./checkDate.js";
+import {
+  calculateClsAverage,
+  calculateClsScoreText,
+  calculateInpAverage,
+  calculateInpScoreText,
+  calculateLcpAverage,
+  calculateLcpScoreText
+} from "./webVitalsUtils.js";
+const buildPerPageRouteDataObject = (webVitalData) => {
+  const RouteArray = [];
+  const last24HoursData = [];
+  const last7DaysData = [];
+  const last30DaysData = [];
+  for (const item of webVitalData) {
+    const { route, timestamp } = item;
+    if (checkDate(timestamp).isInLast24Hours()) {
+      const index2 = last24HoursData.findIndex((entry) => entry.route === route);
+      if (index2 !== -1) {
+        last24HoursData[index2].samplesize += 1;
+        if (item.name === "CLS") {
+          last24HoursData[index2].clsvalue.push(item.value);
+        }
+        if (item.name === "LCP") {
+          last24HoursData[index2].lcpvalue.push(item.value);
+        }
+        if (item.name === "INP") {
+          last24HoursData[index2].inpvalue.push(item.value);
+        }
+      } else {
+        last24HoursData.push({
+          route,
+          samplesize: 1,
+          clsvalue: item.name === "CLS" ? [item.value] : [],
+          lcpvalue: item.name === "LCP" ? [item.value] : [],
+          inpvalue: item.name === "INP" ? [item.value] : []
+        });
+      }
+    }
+    if (checkDate(timestamp).isInLast7Days()) {
+      const index2 = last7DaysData.findIndex((entry) => entry.route === route);
+      if (index2 !== -1) {
+        last7DaysData[index2].samplesize += 1;
+        if (item.name === "CLS") {
+          last7DaysData[index2].clsvalue.push(item.value);
+        }
+        if (item.name === "LCP") {
+          last7DaysData[index2].lcpvalue.push(item.value);
+        }
+        if (item.name === "INP") {
+          last7DaysData[index2].inpvalue.push(item.value);
+        }
+      } else {
+        last7DaysData.push({
+          route,
+          samplesize: 1,
+          clsvalue: item.name === "CLS" ? [item.value] : [],
+          lcpvalue: item.name === "LCP" ? [item.value] : [],
+          inpvalue: item.name === "INP" ? [item.value] : []
+        });
+      }
+    }
+    if (checkDate(timestamp).isInLast30Days()) {
+      const index2 = last30DaysData.findIndex((entry) => entry.route === route);
+      if (index2 !== -1) {
+        last30DaysData[index2].samplesize += 1;
+        if (item.name === "CLS") {
+          last30DaysData[index2].clsvalue.push(item.value);
+        }
+        if (item.name === "LCP") {
+          last30DaysData[index2].lcpvalue.push(item.value);
+        }
+        if (item.name === "INP") {
+          last30DaysData[index2].inpvalue.push(item.value);
+        }
+      } else {
+        last30DaysData.push({
+          route,
+          samplesize: 1,
+          clsvalue: item.name === "CLS" ? [item.value] : [],
+          lcpvalue: item.name === "LCP" ? [item.value] : [],
+          inpvalue: item.name === "INP" ? [item.value] : []
+        });
+      }
+    }
+    const index = RouteArray.findIndex((entry) => entry.route === route);
+    if (index !== -1) {
+      RouteArray[index].samplesize += 1;
+      if (item.name === "CLS") {
+        RouteArray[index].clsvalue.push(item.value);
+      }
+      if (item.name === "LCP") {
+        RouteArray[index].lcpvalue.push(item.value);
+      }
+      if (item.name === "INP") {
+        RouteArray[index].inpvalue.push(item.value);
+      }
+    } else {
+      RouteArray.push({
+        route,
+        samplesize: 1,
+        clsvalue: item.name === "CLS" ? [item.value] : [],
+        lcpvalue: item.name === "LCP" ? [item.value] : [],
+        inpvalue: item.name === "INP" ? [item.value] : []
+      });
+    }
+  }
+  const perPageData = [];
+  const last24HoursPerPageData = [];
+  const last7DaysPerPageData = [];
+  const last30DaysPerPageData = [];
+  for (const item of RouteArray) {
+    const { route, samplesize, clsvalue, lcpvalue, inpvalue } = item;
+    const clsAverage = calculateClsAverage(clsvalue);
+    const lcpAverage = calculateLcpAverage(lcpvalue);
+    const inpAverage = calculateInpAverage(inpvalue);
+    perPageData.push({
+      pageRoute: route,
+      sampleSize: samplesize,
+      CLS: {
+        average: clsAverage,
+        rating: calculateClsScoreText(clsAverage)
+      },
+      LCP: {
+        average: lcpAverage,
+        rating: calculateLcpScoreText(lcpAverage)
+      },
+      INP: {
+        average: inpAverage,
+        rating: calculateInpScoreText(inpAverage)
+      }
+    });
+  }
+  for (const item of last24HoursData) {
+    const { route, samplesize, clsvalue, lcpvalue, inpvalue } = item;
+    const clsAverage = calculateClsAverage(clsvalue);
+    const lcpAverage = calculateLcpAverage(lcpvalue);
+    const inpAverage = calculateInpAverage(inpvalue);
+    last24HoursPerPageData.push({
+      pageRoute: route,
+      sampleSize: samplesize,
+      CLS: {
+        average: clsAverage,
+        rating: calculateClsScoreText(clsAverage)
+      },
+      LCP: {
+        average: lcpAverage,
+        rating: calculateLcpScoreText(lcpAverage)
+      },
+      INP: {
+        average: inpAverage,
+        rating: calculateInpScoreText(inpAverage)
+      }
+    });
+  }
+  for (const item of last7DaysData) {
+    const { route, samplesize, clsvalue, lcpvalue, inpvalue } = item;
+    const clsAverage = calculateClsAverage(clsvalue);
+    const lcpAverage = calculateLcpAverage(lcpvalue);
+    const inpAverage = calculateInpAverage(inpvalue);
+    last7DaysPerPageData.push({
+      pageRoute: route,
+      sampleSize: samplesize,
+      CLS: {
+        average: clsAverage,
+        rating: calculateClsScoreText(clsAverage)
+      },
+      LCP: {
+        average: lcpAverage,
+        rating: calculateLcpScoreText(lcpAverage)
+      },
+      INP: {
+        average: inpAverage,
+        rating: calculateInpScoreText(inpAverage)
+      }
+    });
+  }
+  for (const item of last30DaysData) {
+    const { route, samplesize, clsvalue, lcpvalue, inpvalue } = item;
+    const clsAverage = calculateClsAverage(clsvalue);
+    const lcpAverage = calculateLcpAverage(lcpvalue);
+    const inpAverage = calculateInpAverage(inpvalue);
+    last30DaysPerPageData.push({
+      pageRoute: route,
+      sampleSize: samplesize,
+      CLS: {
+        average: clsAverage,
+        rating: calculateClsScoreText(clsAverage)
+      },
+      LCP: {
+        average: lcpAverage,
+        rating: calculateLcpScoreText(lcpAverage)
+      },
+      INP: {
+        average: inpAverage,
+        rating: calculateInpScoreText(inpAverage)
+      }
+    });
+  }
+  return {
+    historicalData: perPageData,
+    last24HoursData: last24HoursPerPageData,
+    last7DaysData: last7DaysPerPageData,
+    last30DaysData: last30DaysPerPageData
+  };
+};
+export {
+  buildPerPageRouteDataObject
+};

package/dist/lib/webVitals/utils/checkDate.d.ts

@@ -0,0 +1,5 @@
+export declare const checkDate: (date: Date) => {
+    isInLast24Hours(): boolean;
+    isInLast7Days(): boolean;
+    isInLast30Days(): boolean;
+};

package/dist/lib/webVitals/utils/checkDate.js

@@ -0,0 +1,19 @@
+const checkDate = (date) => {
+  return {
+    isInLast24Hours() {
+      const twentyFourHoursAgo = new Date(Date.now() - 24 * 60 * 60 * 1e3);
+      return date >= twentyFourHoursAgo && date <= /* @__PURE__ */ new Date();
+    },
+    isInLast7Days() {
+      const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1e3);
+      return date >= sevenDaysAgo && date <= /* @__PURE__ */ new Date();
+    },
+    isInLast30Days() {
+      const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3);
+      return date >= thirtyDaysAgo && date <= /* @__PURE__ */ new Date();
+    }
+  };
+};
+export {
+  checkDate
+};

package/dist/lib/webVitals/utils/webVitalsUtils.d.ts

@@ -0,0 +1,24 @@
+import type { WebVitalsResponseItem } from '../types.js';
+export declare function msToSeconds(ms: number): number;
+export declare function calculateClsAverage(clsValues: number[]): number;
+export declare const clsDataAverage: (webVitalData: WebVitalsResponseItem[]) => number;
+export declare function calculateClsScoreText(cls: number): string;
+export declare function calculateClsScorePercent(cls: number): number;
+export declare const progressBarClsColor: (clsData: number) => "red" | "green" | "yellow";
+export declare const progressBarClsTrackColor: (clsData: number) => "red" | "yellow";
+export declare const clsTextColor: (clsData: number) => "red" | "green" | "yellow";
+export declare function calculateLcpAverage(lcpValues: number[]): number;
+export declare const lcpDataAverage: (webVitalData: WebVitalsResponseItem[]) => number;
+export declare function calculateLcpScoreText(lcp: number): string;
+export declare function calculateLcpScorePercent(lcp: number): number;
+export declare const progressBarLcpColor: (lcpData: number) => "red" | "green" | "yellow";
+export declare const progressBarLcpTrackColor: (lcpData: number) => "red" | "yellow";
+export declare const lcpTextColor: (lcpData: number) => "red" | "green" | "yellow";
+export declare function calculateInpAverage(inpValues: number[]): number;
+export declare function inpDataAverage(webVitalData: WebVitalsResponseItem[]): number;
+export declare function calculateInpScoreText(inp: number): string;
+export declare function calculateInpScorePercent(inp: number): number;
+export declare const progressBarInpColor: (inpData: number) => "red" | "green" | "yellow";
+export declare const progressBarInpTrackColor: (inpData: number) => "red" | "yellow";
+export declare const inpTextColor: (inpData: number) => "red" | "green" | "yellow";
+export declare function generateLighthouseFetchUrl(url: string, strategy?: 'mobile' | 'desktop' | 'mixed-content'): string;