@allurereport/web-dashboard 3.0.0-beta.17 → 3.0.0-beta.19

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-e1eede23fa367bd3d2ad.js"
+  "main.js": "app-7bcc055d079abc1ab4eb.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-dashboard",
-  "version": "3.0.0-beta.17",
+  "version": "3.0.0-beta.19",
   "description": "The static files for Allure Dashboard Report",
   "keywords": [
     "allure",
@@ -31,9 +31,9 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/core-api": "3.0.0-beta.17",
-    "@allurereport/web-commons": "3.0.0-beta.17",
-    "@allurereport/web-components": "3.0.0-beta.17",
+    "@allurereport/core-api": "3.0.0-beta.19",
+    "@allurereport/web-commons": "3.0.0-beta.19",
+    "@allurereport/web-components": "3.0.0-beta.19",
     "@preact/signals": "^1.3.0",
     "clsx": "^2.1.1",
     "i18next": "^24.0.2",
@@ -58,7 +58,7 @@
     "@typescript-eslint/parser": "^8.0.0",
     "@vitest/runner": "^2.1.9",
     "@vitest/snapshot": "^2.1.9",
-    "allure-vitest": "^3.3.0",
+    "allure-vitest": "^3.3.3",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "babel-plugin-prismjs": "^2.1.0",

package/src/components/Dashboard/index.tsx

@@ -1,21 +1,26 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { ChartType, capitalize } from "@allurereport/web-commons";
+import { ChartType, capitalize } from "@allurereport/core-api";
+import { type UIChartData } from "@allurereport/web-commons";
 import {
+  BarChartWidget,
+  ComingSoonChartWidget,
   Grid,
   GridItem,
+  HeatMapWidget,
   Loadable,
   PageLoader,
   SuccessRatePieChart,
+  TreeMapChartWidget,
   TrendChartWidget,
   Widget,
 } from "@allurereport/web-components";
 import { useEffect } from "preact/hooks";
-import { type ChartData, dashboardStore, fetchDashboardData } from "@/stores/dashboard";
+import { dashboardStore, fetchDashboardData } from "@/stores/dashboard";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 
 const getChartWidgetByType = (
-  chartData: ChartData,
+  chartData: UIChartData,
   { t, empty }: Record<string, (key: string, options?: any) => string>,
 ) => {
   switch (chartData.type) {
@@ -48,6 +53,51 @@ const getChartWidgetByType = (
         </Widget>
       );
     }
+    case ChartType.Bar: {
+      const type = t(`bar.type.${chartData.dataType}`);
+      const title = chartData.title ?? t("bar.title", { type: capitalize(type) });
+
+      return (
+        <BarChartWidget
+          title={title}
+          mode={chartData.mode}
+          data={chartData.data}
+          keys={chartData.keys}
+          indexBy={chartData.indexBy}
+          colors={chartData.colors}
+          groupMode={chartData.groupMode}
+          translations={{ "no-results": empty("no-results") }}
+        />
+      );
+    }
+    case ChartType.TreeMap: {
+      return (
+        <TreeMapChartWidget
+          data={chartData.treeMap}
+          title={chartData.title}
+          formatLegend={chartData.formatLegend}
+          colors={chartData.colors}
+          legendDomain={chartData.legendDomain}
+          tooltipRows={chartData.tooltipRows}
+          translations={{ "no-results": empty("no-results") }}
+        />
+      );
+    }
+    case ChartType.HeatMap: {
+      return (
+        <HeatMapWidget
+          title={chartData.title}
+          data={chartData.data}
+          colors={chartData.colors}
+          translations={{ "no-results": empty("no-results") }}
+        />
+      );
+    }
+    default: {
+      const title = chartData.title ?? t(`charts.${chartData.type}.title`, { fallback: `${chartData.type} Chart` });
+
+      return <ComingSoonChartWidget title={title} />;
+    }
   }
 };
 

package/src/components/Dashboard/styles.scss

@@ -7,12 +7,12 @@
 
 .overview-grid {
   display: grid;
-  gap: 24px;
+  gap: 12px;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(50% - 12px)), 1fr));
 }
 
 .overview-grid-item {
-  padding: 12px;
+  padding: 4px;
   width: 100%;
 }
 

package/src/stores/dashboard.ts

@@ -1,177 +1,13 @@
-import type { SeverityLevel, TestStatus } from "@allurereport/core-api";
-import { severityLevels, statusesList } from "@allurereport/core-api";
-import { ChartDataType, type ChartId, type ChartMode, ChartType, fetchReportJsonData } from "@allurereport/web-commons";
+import { type ChartsResponse, type UIChartsData, createCharts, fetchReportJsonData } from "@allurereport/web-commons";
 import { signal } from "@preact/signals";
 import type { StoreSignalState } from "@/stores/types";
 
-interface Point {
-  x: Date | string | number;
-  y: number;
-}
-
-interface Slice {
-  min: number;
-  max: number;
-  metadata: { executionId: string };
-}
-
-interface ResponseTrendChartData {
-  type: ChartType.Trend;
-  dataType: ChartDataType;
-  mode: ChartMode;
-  title?: string;
-  min: number;
-  max: number;
-  points: Record<string, Point>;
-  slices: Record<string, Slice>;
-  series: Record<TestStatus | SeverityLevel, string[]>;
-}
-
-interface TrendChartItem {
-  id: string;
-  data: Point[];
-  color: string;
-}
-
-export interface TrendChartData {
-  type: ChartType.Trend;
-  dataType: ChartDataType;
-  mode: ChartMode;
-  min: number;
-  max: number;
-  items: TrendChartItem[];
-  slices: Slice[];
-  title?: string;
-}
-
-interface PieSlice {
-  status: TestStatus;
-  count: number;
-  d: string | null;
-}
-
-interface ResponsePieChartData {
-  type: ChartType.Pie;
-  title?: string;
-  percentage: number;
-  slices: PieSlice[];
-}
-
-export type PieChartData = ResponsePieChartData;
-
-export type ChartData = TrendChartData | PieChartData;
-
-type ChartsResponse = Partial<Record<ChartId, ResponseTrendChartData | ResponsePieChartData>>;
-
-type ChartsData = Record<ChartId, ChartData>;
-
-const statusColors: Record<TestStatus, string> = {
-  failed: "var(--bg-support-capella)",
-  broken: "var(--bg-support-atlas)",
-  passed: "var(--bg-support-castor)",
-  skipped: "var(--bg-support-rau)",
-  unknown: "var(--bg-support-skat)",
-};
-
-const severityColors: Record<SeverityLevel, string> = {
-  blocker: "var(--bg-support-capella)",
-  critical: "var(--bg-support-atlas)",
-  normal: "var(--bg-support-castor)",
-  minor: "var(--bg-support-rau)",
-  trivial: "var(--bg-support-skat)",
-};
-
-export const dashboardStore = signal<StoreSignalState<ChartsData>>({
+export const dashboardStore = signal<StoreSignalState<UIChartsData>>({
   loading: true,
   error: undefined,
   data: undefined,
 });
 
-/**
- * Helper function to create chart data for different chart types
- *
- * @param getChart - Function to get the chart data
- * @param getGroups - Function to get the groups
- * @param getColor - Function to get the color
- * @returns TrendChartData or undefined if the chart data is not available
- */
-const createTrendChartData = <T extends TestStatus | SeverityLevel>(
-  getChart: () => ResponseTrendChartData | undefined,
-  getGroups: () => readonly T[],
-  getColor: (group: T) => string,
-): TrendChartData | undefined => {
-  const chart = getChart();
-  if (!chart) {
-    return undefined;
-  }
-
-  const items = getGroups().reduce((acc, group) => {
-    const pointsByGroupBy =
-      chart.series[group]?.map((pointId) => ({
-        x: chart.points[pointId].x,
-        y: chart.points[pointId].y,
-      })) ?? [];
-
-    if (pointsByGroupBy.length) {
-      acc.push({
-        id: group.charAt(0).toUpperCase() + group.slice(1),
-        data: pointsByGroupBy,
-        color: getColor(group),
-      });
-    }
-
-    return acc;
-  }, [] as TrendChartItem[]);
-
-  return {
-    type: chart.type,
-    dataType: chart.dataType,
-    mode: chart.mode,
-    title: chart.title,
-    items,
-    slices: Object.values(chart.slices),
-    min: chart.min,
-    max: chart.max,
-  };
-};
-
-const createStatusTrendChartData = (chartId: ChartId, res: ChartsResponse): TrendChartData | undefined =>
-  createTrendChartData(
-    () => res[chartId] as ResponseTrendChartData | undefined,
-    () => statusesList,
-    (status) => statusColors[status],
-  );
-const createSeverityTrendChartData = (chartId: ChartId, res: ChartsResponse): TrendChartData | undefined =>
-  createTrendChartData(
-    () => res[chartId] as ResponseTrendChartData | undefined,
-    () => severityLevels,
-    (severity) => severityColors[severity],
-  );
-
-const createaTrendChartData = (
-  chartId: string,
-  chartData: ResponseTrendChartData,
-  res: ChartsResponse,
-): TrendChartData | undefined => {
-  if (chartData.dataType === ChartDataType.Status) {
-    return createStatusTrendChartData(chartId, res);
-  } else if (chartData.dataType === ChartDataType.Severity) {
-    return createSeverityTrendChartData(chartId, res);
-  }
-};
-
-const createCharts = (res: ChartsResponse): ChartsData => {
-  return Object.entries(res).reduce((acc, [chartId, chart]) => {
-    if (chart.type === ChartType.Trend) {
-      acc[chartId] = createaTrendChartData(chartId, chart, res);
-    } else if (chart.type === ChartType.Pie) {
-      acc[chartId] = chart;
-    }
-
-    return acc;
-  }, {} as ChartsData);
-};
-
 export const fetchDashboardData = async () => {
   dashboardStore.value = {
     ...dashboardStore.value,