@allurereport/web-commons 3.0.0-beta.8 → 3.0.0

package/dist/charts/utils.js

@@ -0,0 +1,188 @@
+import { ChartType } from "@allurereport/charts-api";
+import { interpolateRgb } from "d3-interpolate";
+import { scaleLinear } from "d3-scale";
+import { nanoid } from "nanoid";
+import { resolveCSSVarColor, statusColors } from "./colors.js";
+export const createTreeMapChartDataGeneric = (getChart, colors, formatLegend, legendDomain, tooltipRows) => {
+    const chart = getChart();
+    if (!chart) {
+        return undefined;
+    }
+    return {
+        ...chart,
+        colors,
+        formatLegend,
+        legendDomain,
+        tooltipRows,
+    };
+};
+export const createHeatMapChartDataGeneric = (getChart, colors) => {
+    const chart = getChart();
+    if (!chart) {
+        return undefined;
+    }
+    return {
+        ...chart,
+        colors,
+    };
+};
+export const createSuccessRateDistributionTreeMapChartData = (chartId, res) => {
+    const chartColorDomain = [0, 1];
+    return createTreeMapChartDataGeneric(() => res[chartId], (value, domain = chartColorDomain) => {
+        const scaledRgb = scaleLinear()
+            .domain(domain)
+            .range([resolveCSSVarColor(statusColors.failed), resolveCSSVarColor(statusColors.passed)])
+            .interpolate(interpolateRgb)
+            .clamp(true);
+        return scaledRgb(value);
+    }, (value) => {
+        if (value === 1) {
+            return "passed";
+        }
+        return "failed";
+    }, chartColorDomain, (node) => {
+        return [`passed: ${node.data.passedTests}`, `failed: ${node.data.failedTests}`, `other: ${node.data.otherTests}`];
+    });
+};
+export const createCoverageDiffTreeMapChartData = (chartId, res) => {
+    const chartColorDomain = [0, 0.5, 1];
+    return createTreeMapChartDataGeneric(() => res[chartId], (value, domain = chartColorDomain) => {
+        const scaledRgb = scaleLinear()
+            .domain(domain)
+            .range([resolveCSSVarColor(statusColors.failed), "#fff", resolveCSSVarColor(statusColors.passed)])
+            .interpolate(interpolateRgb)
+            .clamp(true);
+        return scaledRgb(value);
+    }, (value) => {
+        if (value === 1) {
+            return "new";
+        }
+        return "removed";
+    }, chartColorDomain, (node) => {
+        const newTotal = node.data.newCount + node.data.enabledCount;
+        const deletedTotal = node.data.deletedCount + node.data.disabledCount;
+        const unchangedTotal = node.value - newTotal - deletedTotal;
+        return [`new: ${newTotal}`, `deleted: ${deletedTotal}`, `unchanged: ${unchangedTotal}`];
+    });
+};
+export const createProblemsDistributionHeatMapChartData = (chartId, res) => {
+    const chartColorDomain = [0, 1];
+    return createHeatMapChartDataGeneric(() => res[chartId], (value, domain = chartColorDomain) => {
+        const scaledRgb = scaleLinear()
+            .domain(domain)
+            .range([resolveCSSVarColor(statusColors.passed), resolveCSSVarColor(statusColors.failed)])
+            .interpolate(interpolateRgb)
+            .clamp(true);
+        return scaledRgb(value);
+    });
+};
+export const createTreeMapChartData = (chartId, chartData, res) => {
+    if (chartData.type === ChartType.SuccessRateDistribution) {
+        return createSuccessRateDistributionTreeMapChartData(chartId, res);
+    }
+    else if (chartData.type === ChartType.CoverageDiff) {
+        return createCoverageDiffTreeMapChartData(chartId, res);
+    }
+};
+export const createHeatMapChartData = (chartId, res) => {
+    return createProblemsDistributionHeatMapChartData(chartId, res);
+};
+export const createCharts = (res) => {
+    return Object.entries(res).reduce((acc, [chartId, chart]) => {
+        if (chart.type === ChartType.CurrentStatus) {
+            acc[chartId] = res[chartId];
+        }
+        else if (chart.type === ChartType.StatusDynamics) {
+            acc[chartId] = res[chartId];
+        }
+        else if (chart.type === ChartType.StatusTransitions) {
+            acc[chartId] = res[chartId];
+        }
+        else if (chart.type === ChartType.Durations) {
+            acc[chartId] = res[chartId];
+        }
+        else if (chart.type === ChartType.StabilityDistribution) {
+            acc[chartId] = res[chartId];
+        }
+        else if (chart.type === ChartType.TestBaseGrowthDynamics) {
+            acc[chartId] = res[chartId];
+        }
+        else if (chart.type === ChartType.FBSUAgePyramid) {
+            acc[chartId] = res[chartId];
+        }
+        else if (chart.type === ChartType.TrSeverities) {
+            acc[chartId] = res[chartId];
+        }
+        else if (chart.type === ChartType.DurationDynamics) {
+            acc[chartId] = res[chartId];
+        }
+        else if (chart.type === ChartType.CoverageDiff || chart.type === ChartType.SuccessRateDistribution) {
+            const chartData = createTreeMapChartData(chartId, chart, res);
+            if (chartData) {
+                acc[chartId] = chartData;
+            }
+        }
+        else if (chart.type === ChartType.ProblemsDistribution) {
+            const chartData = createHeatMapChartData(chartId, res);
+            if (chartData) {
+                acc[chartId] = chartData;
+            }
+        }
+        else if (chart.type === ChartType.TestingPyramid) {
+            acc[chartId] = res[chartId];
+        }
+        return acc;
+    }, {});
+};
+export const createChartsWithEnvs = (res) => {
+    if (!("general" in res) && !("byEnv" in res)) {
+        return { general: createCharts(res), byEnv: {} };
+    }
+    const result = {
+        general: createCharts(res.general),
+        byEnv: {},
+    };
+    for (const [env, chartData] of Object.entries(res.byEnv)) {
+        result.byEnv[env] = createCharts(chartData);
+    }
+    return result;
+};
+export const createHashStorage = () => {
+    const hashes = new Map();
+    return {
+        get: (key) => {
+            if (!hashes.has(key)) {
+                hashes.set(key, nanoid());
+            }
+            return hashes.get(key);
+        },
+        set: (key, value) => hashes.set(key, value),
+    };
+};
+export const createMapWithDefault = (defaultValue) => {
+    const map = new Map();
+    const createDefaultValue = () => {
+        if (Array.isArray(defaultValue)) {
+            return [...defaultValue];
+        }
+        if (typeof defaultValue === "object") {
+            return { ...defaultValue };
+        }
+        return defaultValue;
+    };
+    return {
+        set: (key, value) => map.set(key, value),
+        get: (key) => {
+            if (!map.has(key)) {
+                map.set(key, createDefaultValue());
+            }
+            return map.get(key);
+        },
+        get values() {
+            return Array.from(map.values());
+        },
+        get entries() {
+            return Array.from(map.entries());
+        },
+    };
+};

package/dist/data.d.ts

@@ -1,11 +1,11 @@
 export declare const ALLURE_LIVE_RELOAD_HASH_STORAGE_KEY = "__allure_report_live_reload_hash__";
-export declare const createReportDataScript: (reportFiles?: {
-    name: string;
-    value: string;
-}[]) => string;
 export declare const ensureReportDataReady: () => Promise<unknown>;
 export declare const loadReportData: (name: string) => Promise<string>;
-export declare const reportDataUrl: (path: string, contentType?: string) => Promise<string>;
-export declare const fetchReportJsonData: <T>(path: string) => Promise<T>;
-export declare const fetchReportAttachment: (path: string, contentType: string) => Promise<Response>;
+export declare const reportDataUrl: (path: string, contentType?: string, params?: {
+    bustCache: boolean;
+}) => Promise<string>;
+export declare const fetchReportJsonData: <T>(path: string, params?: {
+    bustCache: boolean;
+}) => Promise<T>;
+export declare const fetchReportAttachment: (path: string, contentType?: string) => Promise<Response>;
 export declare const getReportOptions: <T>() => T;

package/dist/data.js

@@ -1,34 +1,4 @@
 export const ALLURE_LIVE_RELOAD_HASH_STORAGE_KEY = "__allure_report_live_reload_hash__";
-export const createReportDataScript = (reportFiles = []) => {
-    if (reportFiles.length === 0) {
-        return `
-      <script async>
-        window.allureReportDataReady = true;
-      </script>
-    `;
-    }
-    const reportFilesDeclaration = reportFiles.map(({ name, value }) => `d('${name}','${value}')`).join(",");
-    return `
-    <script async>
-      window.allureReportDataReady = false;
-      window.allureReportData = window.allureReportData || {};
-
-      function d(name, value){
-        return new Promise(function (resolve) {
-          window.allureReportData[name] = value;
-
-          return resolve(true);
-        });
-      }
-    </script>
-    <script defer>
-      Promise.allSettled([${reportFilesDeclaration}])
-        .then(function(){
-          window.allureReportDataReady = true;
-        })
-    </script>
-  `;
-};
 export const ensureReportDataReady = () => new Promise((resolve) => {
     const waitForReady = () => {
         if (globalThis.allureReportDataReady) {
@@ -49,22 +19,26 @@ export const loadReportData = async (name) => {
         }
     });
 };
-export const reportDataUrl = async (path, contentType = "application/octet-stream") => {
+export const reportDataUrl = async (path, contentType = "application/octet-stream", params) => {
     if (globalThis.allureReportData) {
-        const dataKey = path.replace(/\?attachment$/, "");
+        const [dataKey] = path.split("?");
         const value = await loadReportData(dataKey);
         return `data:${contentType};base64,${value}`;
     }
     const baseEl = globalThis.document.head.querySelector("base")?.href ?? "https://localhost";
     const url = new URL(path, baseEl);
     const liveReloadHash = globalThis.localStorage.getItem(ALLURE_LIVE_RELOAD_HASH_STORAGE_KEY);
+    const cacheKey = globalThis.allureReportOptions?.cacheKey;
     if (liveReloadHash) {
         url.searchParams.set("live_reload_hash", liveReloadHash);
     }
-    return url.pathname + url.search + url.hash;
+    if (params?.bustCache && cacheKey) {
+        url.searchParams.set("v", cacheKey);
+    }
+    return url.toString();
 };
-export const fetchReportJsonData = async (path) => {
-    const url = await reportDataUrl(path);
+export const fetchReportJsonData = async (path, params) => {
+    const url = await reportDataUrl(path, undefined, params);
     const res = await globalThis.fetch(url);
     if (!res.ok) {
         throw new Error(`Failed to fetch ${url}, response status: ${res.status}`);

package/dist/i18n.d.ts

@@ -0,0 +1,8 @@
+export declare const AVAILABLE_LOCALES: readonly ["en", "ru", "ua", "pl", "es", "pt", "de", "hy", "az", "fr", "it", "ja", "he", "ka", "kr", "nl", "sv", "tr", "zh"];
+export declare const DEFAULT_LOCALE = "en";
+export type LangLocale = (typeof AVAILABLE_LOCALES)[number];
+export declare const LANG_LOCALE: Record<LangLocale, {
+    short: string;
+    full: string;
+    iso: string;
+}>;

package/dist/i18n.js

@@ -0,0 +1,119 @@
+export const AVAILABLE_LOCALES = [
+    "en",
+    "ru",
+    "ua",
+    "pl",
+    "es",
+    "pt",
+    "de",
+    "hy",
+    "az",
+    "fr",
+    "it",
+    "ja",
+    "he",
+    "ka",
+    "kr",
+    "nl",
+    "sv",
+    "tr",
+    "zh",
+];
+export const DEFAULT_LOCALE = "en";
+export const LANG_LOCALE = {
+    en: {
+        short: "Eng",
+        full: "English",
+        iso: "en-US",
+    },
+    ru: {
+        short: "Ру",
+        full: "Русский",
+        iso: "ru-RU",
+    },
+    ua: {
+        short: "Ук",
+        full: "Українська",
+        iso: "uk-UA",
+    },
+    pl: {
+        short: "Pl",
+        full: "Polski",
+        iso: "pl-PL",
+    },
+    es: {
+        short: "Es",
+        full: "Español",
+        iso: "es-ES",
+    },
+    pt: {
+        short: "Pt",
+        full: "Português",
+        iso: "pt-PT",
+    },
+    de: {
+        short: "De",
+        full: "Deutsch",
+        iso: "de-DE",
+    },
+    hy: {
+        short: "Hy",
+        full: "Հայերեն",
+        iso: "hy-AM",
+    },
+    az: {
+        short: "Az",
+        full: "Azərbaycan",
+        iso: "az-AZ",
+    },
+    fr: {
+        short: "Fr",
+        full: "Français",
+        iso: "fr-FR",
+    },
+    it: {
+        short: "It",
+        full: "Italiano",
+        iso: "it-IT",
+    },
+    ja: {
+        short: "Ja",
+        full: "日本語",
+        iso: "ja-JP",
+    },
+    he: {
+        short: "He",
+        full: "עברית",
+        iso: "he-IL",
+    },
+    ka: {
+        short: "Ka",
+        full: "ქართული",
+        iso: "ka-GE",
+    },
+    kr: {
+        short: "Kr",
+        full: "한국어",
+        iso: "kr-KR",
+    },
+    nl: {
+        short: "Nl",
+        full: "Nederlands",
+        iso: "nl-NL",
+    },
+    sv: {
+        short: "Sv",
+        full: "Svenska",
+        iso: "sv-SE",
+    },
+    tr: {
+        short: "Tr",
+        full: "Türkçe",
+        iso: "tr-TR",
+    },
+    zh: {
+        short: "Zh",
+        full: "中文",
+        iso: "zh-CN",
+    },
+};

package/dist/index.d.ts

@@ -1,2 +1,6 @@
 export * from "./data.js";
-export * from "./static.js";
+export * from "./attachments.js";
+export * from "./i18n.js";
+export * from "./charts/index.js";
+export * from "./strings.js";
+export * from "./sanitize.js";

package/dist/index.js

@@ -1,2 +1,6 @@
 export * from "./data.js";
-export * from "./static.js";
+export * from "./attachments.js";
+export * from "./i18n.js";
+export * from "./charts/index.js";
+export * from "./strings.js";
+export * from "./sanitize.js";

package/dist/sanitize.d.ts

@@ -0,0 +1 @@
+export declare const sanitize: (html: string, config?: Record<string, any>) => string;

package/dist/sanitize.js

@@ -0,0 +1,2 @@
+import DOMPurify from "dompurify";
+export const sanitize = (html, config) => DOMPurify.sanitize(html, config);

package/dist/strings.d.ts

@@ -0,0 +1,12 @@
+export interface AnsiToHtmlConfig {
+    fg?: string;
+    bg?: string;
+    newline?: boolean;
+    escapeXML?: boolean;
+    stream?: boolean;
+    colors?: string[] | {
+        [code: number]: string;
+    };
+}
+export declare const isAnsi: (text?: string) => boolean;
+export declare const ansiToHTML: (text: string, config?: AnsiToHtmlConfig) => string;

package/dist/strings.js

@@ -0,0 +1,7 @@
+import AnsiToHtml from "ansi-to-html";
+const ansiRegex = /\x1B\[[0-9;?]*[ -/]*[@-~]/g;
+export const isAnsi = (text) => typeof text === "string" && new RegExp(ansiRegex).test(text);
+export const ansiToHTML = (text, config) => new AnsiToHtml({
+    escapeXML: true,
+    ...config,
+}).toHtml(text);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-commons",
-  "version": "3.0.0-beta.8",
+  "version": "3.0.0",
   "description": "Collection of utilities used across the web Allure reports",
   "keywords": [
     "allure",
@@ -23,16 +23,27 @@
     "clean": "rimraf ./dist"
   },
   "dependencies": {
-    "@allurereport/core-api": "3.0.0-beta.8"
+    "@allurereport/charts-api": "3.0.0",
+    "@allurereport/core-api": "3.0.0",
+    "@allurereport/plugin-api": "3.0.0",
+    "ansi-to-html": "^0.7.2",
+    "d3-interpolate": "^3.0.1",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "dompurify": "^3.2.6",
+    "nanoid": "^5.1.6"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^2.6.1",
+    "@types/d3-interpolate": "^3.0.4",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.1.6",
     "@types/eslint": "^8.56.11",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "@vitest/runner": "^2.1.8",
-    "allure-js-commons": "^3.0.9",
-    "allure-vitest": "^3.0.9",
+    "@vitest/runner": "^2.1.9",
+    "allure-js-commons": "^3.3.0",
+    "allure-vitest": "^3.3.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
@@ -43,6 +54,6 @@
     "rimraf": "^6.0.1",
     "tslib": "^2.7.0",
     "typescript": "^5.6.3",
-    "vitest": "^2.1.8"
+    "vitest": "^2.1.9"
   }
 }

package/dist/static.d.ts

@@ -1,8 +0,0 @@
-export declare const createScriptTag: (src: string, options?: {
-    async?: false;
-    defer?: false;
-}) => string;
-export declare const createStylesLinkTag: (src: string) => string;
-export declare const createFontLinkTag: (src: string) => string;
-export declare const createFaviconLinkTag: (src: string) => string;
-export declare const createBaseUrlScript: () => string;

package/dist/static.js

@@ -1,25 +0,0 @@
-export const createScriptTag = (src, options) => {
-    return `<script ${options?.async ? "async" : ""} ${options?.defer ? "defer" : ""} src="${src}"></script>`;
-};
-export const createStylesLinkTag = (src) => {
-    return `<link rel="stylesheet" type="text/css" href="${src}">`;
-};
-export const createFontLinkTag = (src) => {
-    return `<link rel="preload" href="${src}" as="font" type="font/woff" crossorigin /> `;
-};
-export const createFaviconLinkTag = (src) => {
-    return `<link rel="icon" href="${src}">`;
-};
-export const createBaseUrlScript = () => {
-    return `
-    <script>
-      const { origin, pathname } = window.location; 
-      const url = new URL(pathname, origin);
-      const baseEl = document.createElement("base");
-      
-      baseEl.href = url.toString();
-      
-      window.document.head.appendChild(baseEl);
-    </script>
-  `;
-};