@allurereport/web-commons 3.0.0-beta.21 → 3.0.0-beta.22

package/dist/charts/bar/generateBarChartDurationsByLayer.js

@@ -1,4 +1,5 @@
 import { BarChartType, BarGroupMode, ChartMode, ChartType, } from "@allurereport/charts-api";
+import { formatDuration } from "@allurereport/core-api";
 export const generateBarChartDurationsByLayer = (options, storeData) => {
     const testsDurationsByLayer = new Map();
     const { testResults } = storeData;
@@ -33,7 +34,7 @@ export const generateBarChartDurationsByLayer = (options, storeData) => {
         buckets.push({
             min: Math.min(...allDurations),
             max: Infinity,
-            label: `${Math.round(Math.min(...allDurations))}+ms`,
+            label: `${formatDuration(Math.round(Math.min(...allDurations)))}+`,
         });
     }
     else {
@@ -44,7 +45,9 @@ export const generateBarChartDurationsByLayer = (options, storeData) => {
             const maxIndex = Math.floor(nextQuantile * (sortedDurations.length - 1));
             const bucketMin = sortedDurations[minIndex];
             const bucketMax = i === maxBuckets - 1 ? sortedDurations[sortedDurations.length - 1] : sortedDurations[maxIndex];
-            const label = i === maxBuckets - 1 ? `${Math.round(bucketMin)}+ms` : `${Math.round(bucketMin)}-${Math.round(bucketMax)}ms`;
+            const label = i === maxBuckets - 1
+                ? `${formatDuration(Math.round(bucketMin))}+`
+                : `${formatDuration(Math.round(bucketMin))}-${formatDuration(Math.round(bucketMax))}`;
             buckets.push({
                 min: bucketMin,
                 max: bucketMax,

package/dist/charts/funnel/generateTestingPyramidChart.d.ts

@@ -0,0 +1,2 @@
+import type { AllureChartsStoreData, FunnelChartData, FunnelChartOptions } from "@allurereport/charts-api";
+export declare const generateTestingPyramidChart: (chartOptions: FunnelChartOptions, storeData: AllureChartsStoreData) => FunnelChartData;

package/dist/charts/funnel/generateTestingPyramidChart.js

@@ -0,0 +1,53 @@
+import { ChartType, FunnelChartType } from "@allurereport/charts-api";
+const DEFAULT_LAYERS = ["unit", "integration", "e2e"];
+const getPercentage = (value, total) => {
+    if (total === 0 || value === 0) {
+        return 0;
+    }
+    return Math.floor((value / total) * 10000) / 100;
+};
+export const generateTestingPyramidChart = (chartOptions, storeData) => {
+    const { layers = DEFAULT_LAYERS, title } = chartOptions;
+    const { testResults } = storeData;
+    const layersMap = new Map();
+    layers.forEach((layer) => {
+        layersMap.set(layer, layer);
+        layersMap.set(layer.toLocaleLowerCase(), layer);
+    });
+    const statsByLayers = new Map();
+    layers.forEach((layer) => {
+        statsByLayers.set(layer, {
+            passed: 0,
+            total: 0,
+        });
+    });
+    for (const testResult of testResults) {
+        const trLayer = testResult.labels.find((label) => label.name === "layer")?.value;
+        if (!trLayer) {
+            continue;
+        }
+        const layer = layersMap.get(trLayer.toLocaleLowerCase());
+        if (!layer) {
+            continue;
+        }
+        const data = statsByLayers.get(layer);
+        data.total++;
+        if (testResult.status === "passed") {
+            data.passed++;
+        }
+    }
+    return {
+        type: ChartType.Funnel,
+        dataType: FunnelChartType.TestingPyramid,
+        title,
+        data: layers.map((layer) => {
+            const data = statsByLayers.get(layer);
+            return {
+                layer,
+                testCount: data.total,
+                successRate: getPercentage(data.passed, data.total),
+                percentage: getPercentage(data.total, testResults.length),
+            };
+        }),
+    };
+};

package/dist/charts/funnel/index.d.ts

@@ -0,0 +1,2 @@
+import type { AllureChartsStoreData, FunnelChartData, FunnelChartOptions } from "@allurereport/charts-api";
+export declare const generateFunnelChart: (chartOption: FunnelChartOptions, storeData: AllureChartsStoreData) => FunnelChartData;

package/dist/charts/funnel/index.js

@@ -0,0 +1,9 @@
+import { FunnelChartType } from "@allurereport/charts-api";
+import { generateTestingPyramidChart } from "./generateTestingPyramidChart.js";
+export const generateFunnelChart = (chartOption, storeData) => {
+    const { dataType } = chartOption;
+    switch (dataType) {
+        case FunnelChartType.TestingPyramid:
+            return generateTestingPyramidChart(chartOption, storeData);
+    }
+};

package/dist/charts/generators.js

@@ -2,6 +2,7 @@ import { ChartType, } from "@allurereport/charts-api";
 import { DEFAULT_ENVIRONMENT } from "@allurereport/core-api";
 import { generateBarChart } from "./bar.js";
 import { generateComingSoonChart } from "./comingSoon.js";
+import { generateFunnelChart } from "./funnel/index.js";
 import { generateHeatMapChart } from "./heatMap.js";
 import { generateTrendChart } from "./line.js";
 import { generatePieChart } from "./pie.js";
@@ -36,6 +37,9 @@ const generateChartData = async (props) => {
             case ChartType.HeatMap:
                 result[chartId] = generateHeatMapChart(chartOption, storeData);
                 break;
+            case ChartType.Funnel:
+                result[chartId] = generateFunnelChart(chartOption, storeData);
+                break;
             default:
                 result[chartId] = generateComingSoonChart(chartOption);
                 break;

package/dist/charts/types.d.ts

@@ -1,4 +1,4 @@
-import type { BarChartType, BarGroup, BarGroupMode, BaseTrendSliceMetadata, ChartDataType, ChartId, ChartMode, ChartType, HeatMapSerie, PieSlice, TreeMapChartType, TreeMapNode, TrendPointId, TrendSlice, TrendSliceId } from "@allurereport/charts-api";
+import type { BarChartType, BarGroup, BarGroupMode, BaseTrendSliceMetadata, ChartDataType, ChartId, ChartMode, ChartType, FunnelChartType, HeatMapSerie, PieSlice, TreeMapChartType, TreeMapNode, TrendPointId, TrendSlice, TrendSliceId } from "@allurereport/charts-api";
 export type TreeMapTooltipAccessor = <T>(node: T) => string[];
 export interface Point {
     x: Date | string | number;
@@ -94,8 +94,21 @@ export interface UITreeMapChartData extends ResponseTreeMapChartData {
 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 interface UITestingPyramidChartData extends ResponseTestingPyramidChartData {
+}
+export interface ResponseTestingPyramidChartData {
+    type: ChartType.Funnel;
+    dataType: FunnelChartType;
+    title?: string;
+    data: {
+        layer: string;
+        testCount: number;
+        successRate: number;
+        percentage: number;
+    }[];
+}
+export type ChartData<SeriesType extends string = string, Metadata extends BaseTrendSliceMetadata = BaseTrendSliceMetadata> = ResponseTrendChartData<SeriesType, Metadata> | ResponsePieChartData | ResponseBarChartData | ResponseComingSoonChartData | ResponseTreeMapChartData | ResponseHeatMapChartData | ResponseTestingPyramidChartData;
+export type UIChartData<Metadata extends BaseTrendSliceMetadata = BaseTrendSliceMetadata> = UITrendChartData<Metadata> | UIPieChartData | UIBarChartData | UIComingSoonChartData | UITreeMapChartData | UIHeatMapChartData | UITestingPyramidChartData;
 export type ChartsData<SeriesType extends string = string, Metadata extends BaseTrendSliceMetadata = BaseTrendSliceMetadata> = Record<ChartId, ChartData<SeriesType, Metadata>>;
 export type ChartsDataWithEnvs<SeriesType extends string = string, Metadata extends BaseTrendSliceMetadata = BaseTrendSliceMetadata> = {
     general: Record<ChartId, ChartData<SeriesType, Metadata>>;

package/dist/charts/utils.d.ts

@@ -1,6 +1,6 @@
 import type { ChartId } from "@allurereport/charts-api";
 import type { SeverityLevel, TestStatus } from "@allurereport/core-api";
-import type { ChartsData, ChartsDataWithEnvs, ResponseBarChartData, ResponseHeatMapChartData, ResponseTreeMapChartData, ResponseTrendChartData, TreeMapTooltipAccessor, UIBarChartData, UIChartData, UIChartsDataWithEnvs, UIHeatMapChartData, UITreeMapChartData, UITrendChartData } from "./types.js";
+import type { ChartsData, ChartsDataWithEnvs, ResponseBarChartData, ResponseHeatMapChartData, ResponseTestingPyramidChartData, ResponseTreeMapChartData, ResponseTrendChartData, TreeMapTooltipAccessor, UIBarChartData, UIChartData, UIChartsDataWithEnvs, UIHeatMapChartData, UITestingPyramidChartData, 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;
@@ -19,6 +19,7 @@ export declare const createProblemsDistributionHeatMapChartData: (chartId: Chart
 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: ChartsData) => UITreeMapChartData | undefined;
+export declare const createFunnelChartData: (chartId: string, chartData: ResponseTestingPyramidChartData) => UITestingPyramidChartData | undefined;
 export declare const createHeatMapChartData: (chartId: ChartId, res: ChartsData) => UIHeatMapChartData | undefined;
 export declare const createCharts: (res: ChartsData) => Record<ChartId, UIChartData>;
 export declare const createChartsWithEnvs: (res: ChartsDataWithEnvs) => UIChartsDataWithEnvs;

package/dist/charts/utils.js

@@ -1,4 +1,4 @@
-import { BarChartType, ChartDataType, ChartType, TreeMapChartType } from "@allurereport/charts-api";
+import { BarChartType, ChartDataType, ChartType, FunnelChartType, TreeMapChartType } from "@allurereport/charts-api";
 import { severityLevels, statusesList } from "@allurereport/core-api";
 import { interpolateRgb } from "d3-interpolate";
 import { scaleLinear } from "d3-scale";
@@ -187,6 +187,12 @@ export const createTreeMapChartData = (chartId, chartData, res) => {
         return createCoverageDiffTreeMapChartData(chartId, res);
     }
 };
+export const createFunnelChartData = (chartId, chartData) => {
+    switch (chartData.dataType) {
+        case FunnelChartType.TestingPyramid:
+            return chartData;
+    }
+};
 export const createHeatMapChartData = (chartId, res) => {
     return createProblemsDistributionHeatMapChartData(chartId, res);
 };
@@ -216,8 +222,14 @@ export const createCharts = (res) => {
                 acc[chartId] = chartData;
             }
         }
+        else if (chart.type === ChartType.Funnel) {
+            const chartData = createFunnelChartData(chartId, chart);
+            if (chartData) {
+                acc[chartId] = chartData;
+            }
+        }
         else if ([ChartType.Pie, ChartType.ComingSoon].includes(chart.type)) {
-            acc[chartId] = chart;
+            return acc;
         }
         return acc;
     }, {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-commons",
-  "version": "3.0.0-beta.21",
+  "version": "3.0.0-beta.22",
   "description": "Collection of utilities used across the web Allure reports",
   "keywords": [
     "allure",
@@ -23,9 +23,9 @@
     "clean": "rimraf ./dist"
   },
   "dependencies": {
-    "@allurereport/charts-api": "3.0.0-beta.21",
-    "@allurereport/core-api": "3.0.0-beta.21",
-    "@allurereport/plugin-api": "3.0.0-beta.21",
+    "@allurereport/charts-api": "3.0.0-beta.22",
+    "@allurereport/core-api": "3.0.0-beta.22",
+    "@allurereport/plugin-api": "3.0.0-beta.22",
     "ansi-to-html": "^0.7.2",
     "d3-interpolate": "^3.0.1",
     "d3-scale": "^4.0.2",