@allurereport/web-commons 3.0.0-beta.18 → 3.0.0-beta.19

package/dist/charts/colors.d.ts

@@ -1,3 +1,5 @@
-import type { SeverityLevel, TestStatus } from "@allurereport/core-api";
+import type { NewKey, RemovedKey, SeverityLevel, TestStatus } from "@allurereport/core-api";
 export declare const statusColors: Record<TestStatus, string>;
 export declare const severityColors: Record<SeverityLevel, string>;
+export declare const statusChangeColors: Record<NewKey<TestStatus> | RemovedKey<TestStatus>, string>;
+export declare const resolveCSSVarColor: (value: string, el?: Element) => string;

package/dist/charts/colors.js

@@ -12,3 +12,26 @@ export const severityColors = {
     minor: "var(--bg-support-rau)",
     trivial: "var(--bg-support-skat)",
 };
+export const statusChangeColors = {
+    newFailed: "var(--bg-support-capella)",
+    newBroken: "var(--bg-support-atlas)",
+    newPassed: "var(--bg-support-castor)",
+    newSkipped: "var(--bg-support-rau)",
+    newUnknown: "var(--bg-support-skat)",
+    removedFailed: "color-mix(in srgb, var(--bg-support-capella) 80%, black)",
+    removedBroken: "color-mix(in srgb, var(--bg-support-atlas) 80%, black)",
+    removedPassed: "color-mix(in srgb, var(--bg-support-castor) 80%, black)",
+    removedSkipped: "color-mix(in srgb, var(--bg-support-rau) 80%, black)",
+    removedUnknown: "color-mix(in srgb, var(--bg-support-skat) 80%, black)",
+};
+export const resolveCSSVarColor = (value, el = document.documentElement) => {
+    if (value.startsWith("var(")) {
+        const match = value.match(/var\((--[^),\s]+)/);
+        if (match) {
+            const cssVarName = match[1];
+            const resolved = getComputedStyle(el).getPropertyValue(cssVarName).trim();
+            return resolved || value;
+        }
+    }
+    return value;
+};

package/dist/charts/types.d.ts

@@ -1,4 +1,5 @@
-import type { BaseTrendSliceMetadata, ChartDataType, ChartId, ChartMode, ChartType, PieSlice, TrendPointId, TrendSlice, TrendSliceId } from "@allurereport/core-api";
+import type { BarChartType, BarGroup, BarGroupMode, BaseTrendSliceMetadata, ChartDataType, ChartId, ChartMode, ChartType, HeatMapSerie, PieSlice, TreeMapChartType, TreeMapNode, TrendPointId, TrendSlice, TrendSliceId } from "@allurereport/core-api";
+export type TreeMapTooltipAccessor = <T>(node: T) => string[];
 export interface Point {
     x: Date | string | number;
     y: number;
@@ -19,17 +20,38 @@ export interface ResponseTrendChartData<SeriesType extends string = string, Meta
     slices: Record<TrendSliceId, TrendSlice<Metadata>>;
     series: Record<SeriesType, TrendPointId[]>;
 }
-export type ChartsResponse<SeriesType extends string = string, Metadata extends BaseTrendSliceMetadata = BaseTrendSliceMetadata> = Record<ChartId, ResponseTrendChartData<SeriesType, Metadata>>;
 export interface ResponsePieChartData {
     type: ChartType.Pie;
     title?: string;
     percentage: number;
     slices: PieSlice[];
 }
+export interface ResponseBarChartData {
+    type: ChartType.Bar;
+    dataType: BarChartType;
+    mode: ChartMode;
+    title?: string;
+    data: BarGroup<string, string>[];
+    keys: readonly string[];
+    indexBy: string;
+    groupMode: BarGroupMode;
+}
 export interface ResponseComingSoonChartData {
-    type: ChartType.HeatMap | ChartType.Bar | ChartType.Funnel | ChartType.TreeMap;
+    type: ChartType.ComingSoon;
+    title?: string;
+}
+export interface ResponseTreeMapChartData {
+    type: ChartType.TreeMap;
+    dataType: TreeMapChartType;
     title?: string;
+    treeMap: TreeMapNode;
 }
+export interface ResponseHeatMapChartData {
+    type: ChartType.HeatMap;
+    title?: string;
+    data: HeatMapSerie[];
+}
+export type ChartsResponse<SeriesType extends string = string, Metadata extends BaseTrendSliceMetadata = BaseTrendSliceMetadata> = Record<ChartId, ResponseTrendChartData<SeriesType, Metadata> | ResponsePieChartData | ResponseBarChartData | ResponseComingSoonChartData | ResponseTreeMapChartData | ResponseHeatMapChartData>;
 export interface UITrendChartData<Metadata extends BaseTrendSliceMetadata = BaseTrendSliceMetadata> {
     type: ChartType.Trend;
     dataType: ChartDataType;
@@ -41,8 +63,20 @@ export interface UITrendChartData<Metadata extends BaseTrendSliceMetadata = Base
     title?: string;
 }
 export type UIPieChartData = ResponsePieChartData;
+export interface UIBarChartData extends ResponseBarChartData {
+    colors: Record<string, string>;
+}
 export type UIComingSoonChartData = ResponseComingSoonChartData;
-export type ChartData<SeriesType extends string = string, Metadata extends BaseTrendSliceMetadata = BaseTrendSliceMetadata> = ResponseTrendChartData<SeriesType, Metadata> | ResponsePieChartData | ResponseComingSoonChartData;
-export type UIChartData<Metadata extends BaseTrendSliceMetadata = BaseTrendSliceMetadata> = UITrendChartData<Metadata> | UIPieChartData | UIComingSoonChartData;
+export interface UITreeMapChartData extends ResponseTreeMapChartData {
+    colors: (value: number, domain?: number[]) => string;
+    formatLegend?: (value: number) => string;
+    legendDomain?: number[];
+    tooltipRows?: TreeMapTooltipAccessor;
+}
+export interface UIHeatMapChartData extends ResponseHeatMapChartData {
+    colors: (value: number, domain?: number[]) => string;
+}
+export type ChartData<SeriesType extends string = string, Metadata extends BaseTrendSliceMetadata = BaseTrendSliceMetadata> = ResponseTrendChartData<SeriesType, Metadata> | ResponsePieChartData | ResponseBarChartData | ResponseComingSoonChartData | ResponseTreeMapChartData | ResponseHeatMapChartData;
+export type UIChartData<Metadata extends BaseTrendSliceMetadata = BaseTrendSliceMetadata> = UITrendChartData<Metadata> | UIPieChartData | UIBarChartData | UIComingSoonChartData | UITreeMapChartData | UIHeatMapChartData;
 export type ChartsData<SeriesType extends string = string, Metadata extends BaseTrendSliceMetadata = BaseTrendSliceMetadata> = Record<ChartId, ChartData<SeriesType, Metadata>>;
 export type UIChartsData<Metadata extends BaseTrendSliceMetadata = BaseTrendSliceMetadata> = Record<ChartId, UIChartData<Metadata>>;

package/dist/charts/utils.d.ts

@@ -1,7 +1,19 @@
 import type { ChartId, SeverityLevel, TestStatus } from "@allurereport/core-api";
-import type { ChartsData, ChartsResponse, ResponseTrendChartData, UIChartData, UITrendChartData } from "./types.js";
-export declare const createTrendChartData: <T extends TestStatus | SeverityLevel>(getChart: () => ResponseTrendChartData | undefined, getGroups: () => readonly T[], getColor: (group: T) => string) => UITrendChartData | undefined;
+import type { ChartsData, ChartsResponse, ResponseBarChartData, ResponseHeatMapChartData, ResponseTreeMapChartData, ResponseTrendChartData, TreeMapTooltipAccessor, UIBarChartData, UIChartData, UIHeatMapChartData, UITreeMapChartData, UITrendChartData } from "./types.js";
+export declare const createTrendChartDataGeneric: <T extends TestStatus | SeverityLevel>(getChart: () => ResponseTrendChartData | undefined, getGroups: () => readonly T[], getColor: (group: T) => string) => UITrendChartData | undefined;
+export declare const createBarChartDataGeneric: <T extends string>(getChart: () => ResponseBarChartData | undefined, getColors: () => Record<T, string>) => UIBarChartData | undefined;
+export declare const createTreeMapChartDataGeneric: (getChart: () => ResponseTreeMapChartData | undefined, colors: (value: number, domain?: number[]) => string, formatLegend?: (value: number) => string, legendDomain?: number[], tooltipRows?: TreeMapTooltipAccessor) => UITreeMapChartData | undefined;
+export declare const createHeatMapChartDataGeneric: (getChart: () => ResponseHeatMapChartData | undefined, colors: (value: number, domain?: number[]) => string) => UIHeatMapChartData | undefined;
 export declare const createStatusTrendChartData: (chartId: ChartId, res: ChartsResponse) => UITrendChartData | undefined;
 export declare const createSeverityTrendChartData: (chartId: ChartId, res: ChartsResponse) => UITrendChartData | undefined;
+export declare const createStatusBySeverityBarChartData: (chartId: ChartId, res: ChartsResponse) => UIBarChartData | undefined;
+export declare const createStatusTrendBarChartData: (chartId: ChartId, res: ChartsResponse) => UIBarChartData | undefined;
+export declare const createStatusChangeTrendBarChartData: (chartId: ChartId, res: ChartsResponse) => UIBarChartData | undefined;
+export declare const createSuccessRateDistributionTreeMapChartData: (chartId: ChartId, res: ChartsResponse) => UITreeMapChartData | undefined;
+export declare const createCoverageDiffTreeMapChartData: (chartId: ChartId, res: ChartsResponse) => UITreeMapChartData | undefined;
+export declare const createProblemsDistributionHeatMapChartData: (chartId: ChartId, res: ChartsResponse) => UIHeatMapChartData | undefined;
 export declare const createaTrendChartData: (chartId: string, chartData: ResponseTrendChartData, res: ChartsData) => UITrendChartData | undefined;
+export declare const createBarChartData: (chartId: string, chartData: ResponseBarChartData, res: ChartsData) => UIBarChartData | undefined;
+export declare const createTreeMapChartData: (chartId: ChartId, chartData: ResponseTreeMapChartData, res: ChartsResponse) => UITreeMapChartData | undefined;
+export declare const createHeatMapChartData: (chartId: ChartId, res: ChartsResponse) => UIHeatMapChartData | undefined;
 export declare const createCharts: (res: ChartsData) => Record<ChartId, UIChartData>;

package/dist/charts/utils.js

@@ -1,6 +1,8 @@
-import { ChartDataType, ChartType, severityLevels, statusesList } from "@allurereport/core-api";
-import { severityColors, statusColors } from "./colors.js";
-export const createTrendChartData = (getChart, getGroups, getColor) => {
+import { BarChartType, ChartDataType, ChartType, TreeMapChartType, severityLevels, statusesList, } from "@allurereport/core-api";
+import { interpolateRgb } from "d3-interpolate";
+import { scaleLinear } from "d3-scale";
+import { resolveCSSVarColor, severityColors, statusChangeColors, statusColors } from "./colors.js";
+export const createTrendChartDataGeneric = (getChart, getGroups, getColor) => {
     const chart = getChart();
     if (!chart) {
         return undefined;
@@ -33,8 +35,94 @@ export const createTrendChartData = (getChart, getGroups, getColor) => {
         max: chart.max,
     };
 };
-export const createStatusTrendChartData = (chartId, res) => createTrendChartData(() => res[chartId], () => statusesList, (status) => statusColors[status]);
-export const createSeverityTrendChartData = (chartId, res) => createTrendChartData(() => res[chartId], () => severityLevels, (severity) => severityColors[severity]);
+export const createBarChartDataGeneric = (getChart, getColors) => {
+    const chart = getChart();
+    if (!chart) {
+        return undefined;
+    }
+    return {
+        ...chart,
+        colors: getColors(),
+    };
+};
+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 createStatusTrendChartData = (chartId, res) => createTrendChartDataGeneric(() => res[chartId], () => statusesList, (status) => statusColors[status]);
+export const createSeverityTrendChartData = (chartId, res) => createTrendChartDataGeneric(() => res[chartId], () => severityLevels, (severity) => severityColors[severity]);
+export const createStatusBySeverityBarChartData = (chartId, res) => createBarChartDataGeneric(() => res[chartId], () => statusColors);
+export const createStatusTrendBarChartData = (chartId, res) => createBarChartDataGeneric(() => res[chartId], () => statusColors);
+export const createStatusChangeTrendBarChartData = (chartId, res) => createBarChartDataGeneric(() => res[chartId], () => statusChangeColors);
+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 createaTrendChartData = (chartId, chartData, res) => {
     if (chartData.dataType === ChartDataType.Status) {
         return createStatusTrendChartData(chartId, res);
@@ -43,6 +131,28 @@ export const createaTrendChartData = (chartId, chartData, res) => {
         return createSeverityTrendChartData(chartId, res);
     }
 };
+export const createBarChartData = (chartId, chartData, res) => {
+    if (chartData.dataType === BarChartType.StatusBySeverity) {
+        return createStatusBySeverityBarChartData(chartId, res);
+    }
+    else if (chartData.dataType === BarChartType.StatusTrend) {
+        return createStatusTrendBarChartData(chartId, res);
+    }
+    else if (chartData.dataType === BarChartType.StatusChangeTrend) {
+        return createStatusChangeTrendBarChartData(chartId, res);
+    }
+};
+export const createTreeMapChartData = (chartId, chartData, res) => {
+    if (chartData.dataType === TreeMapChartType.SuccessRateDistribution) {
+        return createSuccessRateDistributionTreeMapChartData(chartId, res);
+    }
+    else if (chartData.dataType === TreeMapChartType.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.Trend) {
@@ -51,7 +161,25 @@ export const createCharts = (res) => {
                 acc[chartId] = chartData;
             }
         }
-        else if ([ChartType.Pie, ChartType.HeatMap, ChartType.Bar, ChartType.Funnel, ChartType.TreeMap].includes(chart.type)) {
+        else if (chart.type === ChartType.Bar) {
+            const chartData = createBarChartData(chartId, chart, res);
+            if (chartData) {
+                acc[chartId] = chartData;
+            }
+        }
+        else if (chart.type === ChartType.TreeMap) {
+            const chartData = createTreeMapChartData(chartId, chart, res);
+            if (chartData) {
+                acc[chartId] = chartData;
+            }
+        }
+        else if (chart.type === ChartType.HeatMap) {
+            const chartData = createHeatMapChartData(chartId, res);
+            if (chartData) {
+                acc[chartId] = chartData;
+            }
+        }
+        else if ([ChartType.Pie, ChartType.ComingSoon].includes(chart.type)) {
             acc[chartId] = chart;
         }
         return acc;

package/dist/data.d.ts

@@ -1,8 +1,4 @@
 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, params?: {

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) {
-        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) {

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/sanitize.d.ts

@@ -0,0 +1,15 @@
+export declare const sanitize: {
+    (dirty: string | Node, cfg: import("dompurify").Config & {
+        RETURN_TRUSTED_TYPE: true;
+    }): import("trusted-types/lib/index.js").TrustedHTML;
+    (dirty: Node, cfg: import("dompurify").Config & {
+        IN_PLACE: true;
+    }): Node;
+    (dirty: string | Node, cfg: import("dompurify").Config & {
+        RETURN_DOM: true;
+    }): Node;
+    (dirty: string | Node, cfg: import("dompurify").Config & {
+        RETURN_DOM_FRAGMENT: true;
+    }): DocumentFragment;
+    (dirty: string | Node, cfg?: import("dompurify").Config): string;
+};

package/dist/sanitize.js

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

package/dist/strings.d.ts

@@ -1 +1,12 @@
-export declare const capitalize: (str: string) => string | undefined;
+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

@@ -1,6 +1,7 @@
-export const capitalize = (str) => {
-    if (!str) {
-        return;
-    }
-    return str.charAt(0).toLocaleUpperCase() + str.slice(1);
-};
+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.18",
+  "version": "3.0.0-beta.19",
   "description": "Collection of utilities used across the web Allure reports",
   "keywords": [
     "allure",
@@ -23,10 +23,16 @@
     "clean": "rimraf ./dist"
   },
   "dependencies": {
-    "@allurereport/core-api": "3.0.0-beta.18"
+    "@allurereport/core-api": "3.0.0-beta.19",
+    "ansi-to-html": "^0.7.2",
+    "d3-interpolate": "^3.0.1",
+    "d3-scale": "^4.0.2",
+    "dompurify": "^3.2.6"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^2.6.1",
+    "@types/d3-interpolate": "^3.0.4",
+    "@types/d3-scale": "^4.0.9",
     "@types/eslint": "^8.56.11",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",

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>
-  `;
-};