@allurereport/web-dashboard 3.0.0-beta.12

package/src/locales/hy.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "Անցած",
+    "failed": "Ձախողված",
+    "broken": "Կոտրված",
+    "skipped": "Բաց թողնված",
+    "unknown": "Անհայտ",
+    "total": "Ընդհանուր"
+  },
+  "empty": {
+    "no-results": "Արդյունքներ չկան"
+  },
+  "severity": {
+    "blocker": "Արգելափակող",
+    "critical": "Կրիտիկական",
+    "normal": "Նորմալ",
+    "minor": "Երկրորդական",
+    "trivial": "Աննշան"
+  },
+  "charts": {
+    "trend": {
+      "title": "Միտումների գրաֆիկ: {{type}}",
+      "type": {
+        "status": "Կարգավիճակ",
+        "severity": "Ծանրություն"
+      }
+    },
+    "pie": {
+      "title": "Թեստերի հաջողության գործակից"
+    }
+  }
+}

package/src/locales/it.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "Superato",
+    "failed": "Fallito",
+    "broken": "Rotto",
+    "skipped": "Saltato",
+    "unknown": "Sconosciuto",
+    "total": "Totale"
+  },
+  "empty": {
+    "no-results": "Nessun risultato"
+  },
+  "severity": {
+    "blocker": "Bloccante",
+    "critical": "Critico",
+    "normal": "Normale",
+    "minor": "Minore",
+    "trivial": "Banale"
+  },
+  "charts": {
+    "trend": {
+      "title": "Grafico di tendenza: {{type}}",
+      "type": {
+        "status": "Stato",
+        "severity": "Gravità"
+      }
+    },
+    "pie": {
+      "title": "Tasso di successo dei test"
+    }
+  }
+}

package/src/locales/ja.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "成功",
+    "failed": "失敗",
+    "broken": "壊れた",
+    "skipped": "スキップ",
+    "unknown": "不明",
+    "total": "合計"
+  },
+  "empty": {
+    "no-results": "結果がありません"
+  },
+  "severity": {
+    "blocker": "ブロッカー",
+    "critical": "重大",
+    "normal": "通常",
+    "minor": "小規模",
+    "trivial": "些細"
+  },
+  "charts": {
+    "trend": {
+      "title": "トレンドチャート: {{type}}",
+      "type": {
+        "status": "ステータス",
+        "severity": "重要度"
+      }
+    },
+    "pie": {
+      "title": "テスト成功率"
+    }
+  }
+}

package/src/locales/ka.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "გავლილი",
+    "failed": "ჩაჭრილი",
+    "broken": "გაფუჭებული",
+    "skipped": "გამოტოვებული",
+    "unknown": "უცნობი",
+    "total": "სულ"
+  },
+  "empty": {
+    "no-results": "შედეგები არ არის"
+  },
+  "severity": {
+    "blocker": "ბლოკერი",
+    "critical": "კრიტიკული",
+    "normal": "ნორმალური",
+    "minor": "მცირე",
+    "trivial": "უმნიშვნელო"
+  },
+  "charts": {
+    "trend": {
+      "title": "ტრენდის გრაფიკი: {{type}}",
+      "type": {
+        "status": "სტატუსი",
+        "severity": "სიმძიმე"
+      }
+    },
+    "pie": {
+      "title": "ტესტების წარმატების მაჩვენებელი"
+    }
+  }
+}

package/src/locales/kr.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "통과",
+    "failed": "실패",
+    "broken": "손상됨",
+    "skipped": "건너뜀",
+    "unknown": "알수없음",
+    "total": "전체"
+  },
+  "empty": {
+    "no-results": "결과 없음"
+  },
+  "severity": {
+    "blocker": "차단",
+    "critical": "심각",
+    "normal": "보통",
+    "minor": "경미",
+    "trivial": "사소"
+  },
+  "charts": {
+    "trend": {
+      "title": "트렌드 차트: {{type}}",
+      "type": {
+        "status": "상태",
+        "severity": "심각도"
+      }
+    },
+    "pie": {
+      "title": "테스트 성공률"
+    }
+  }
+}

package/src/locales/nl.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "Geslaagd",
+    "failed": "Mislukt",
+    "broken": "Defect",
+    "skipped": "Overgeslagen",
+    "unknown": "Onbekend",
+    "total": "Totaal"
+  },
+  "empty": {
+    "no-results": "Geen resultaten"
+  },
+  "severity": {
+    "blocker": "Blokkeerder",
+    "critical": "Kritiek",
+    "normal": "Normaal",
+    "minor": "Klein",
+    "trivial": "Triviaal"
+  },
+  "charts": {
+    "trend": {
+      "title": "Trendgrafiek: {{type}}",
+      "type": {
+        "status": "Status",
+        "severity": "Ernst"
+      }
+    },
+    "pie": {
+      "title": "Test slagingspercentage"
+    }
+  }
+}

package/src/locales/pl.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "Zaliczone",
+    "failed": "Niezaliczone",
+    "broken": "Uszkodzone",
+    "skipped": "Pominięte",
+    "unknown": "Nieznane",
+    "total": "Razem"
+  },
+  "empty": {
+    "no-results": "Brak wyników"
+  },
+  "severity": {
+    "blocker": "Blokujący",
+    "critical": "Krytyczny",
+    "normal": "Normalny",
+    "minor": "Pomniejszy",
+    "trivial": "Trywialny"
+  },
+  "charts": {
+    "trend": {
+      "title": "Wykres trendu: {{type}}",
+      "type": {
+        "status": "Status",
+        "severity": "Ważność"
+      }
+    },
+    "pie": {
+      "title": "Wskaźnik powodzenia testów"
+    }
+  }
+}

package/src/locales/pt.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "Aprovado",
+    "failed": "Falhou",
+    "broken": "Quebrado",
+    "skipped": "Ignorado",
+    "unknown": "Desconhecido",
+    "total": "Total"
+  },
+  "empty": {
+    "no-results": "Sem resultados"
+  },
+  "severity": {
+    "blocker": "Bloqueador",
+    "critical": "Crítico",
+    "normal": "Normal",
+    "minor": "Menor",
+    "trivial": "Trivial"
+  },
+  "charts": {
+    "trend": {
+      "title": "Gráfico de tendência: {{type}}",
+      "type": {
+        "status": "Estado",
+        "severity": "Severidade"
+      }
+    },
+    "pie": {
+      "title": "Taxa de sucesso dos testes"
+    }
+  }
+}

package/src/locales/ru.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "Успешный",
+    "failed": "Неуспешный",
+    "broken": "Сломанный",
+    "skipped": "Пропущенный",
+    "unknown": "Неизвестный",
+    "total": "Все"
+  },
+  "empty": {
+    "no-results": "Нет результатов"
+  },
+  "severity": {
+    "blocker": "Блокер",
+    "critical": "Критическая",
+    "normal": "Обычная",
+    "minor": "Невысокая",
+    "trivial": "Минимальная"
+  },
+  "charts": {
+    "trend": {
+      "title": "График тренда: {{type}}",
+      "type": {
+        "status": "Статус",
+        "severity": "Важность"
+      }
+    },
+    "pie": {
+      "title": "Успешность тестирования"
+    }
+  }
+}

package/src/locales/sv.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "Godkänd",
+    "failed": "Misslyckad",
+    "broken": "Trasig",
+    "skipped": "Överhoppad",
+    "unknown": "Okänd",
+    "total": "Totalt"
+  },
+  "empty": {
+    "no-results": "Inga resultat"
+  },
+  "severity": {
+    "blocker": "Blockerande",
+    "critical": "Kritisk",
+    "normal": "Normal",
+    "minor": "Mindre",
+    "trivial": "Trivial"
+  },
+  "charts": {
+    "trend": {
+      "title": "Trenddiagram: {{type}}",
+      "type": {
+        "status": "Status",
+        "severity": "Allvarlighetsgrad"
+      }
+    },
+    "pie": {
+      "title": "Testframgångsfrekvens"
+    }
+  }
+}

package/src/locales/tr.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "Başarılı",
+    "failed": "Başarısız",
+    "broken": "Bozuk",
+    "skipped": "Atlanmış",
+    "unknown": "Bilinmeyen",
+    "total": "Toplam"
+  },
+  "empty": {
+    "no-results": "Sonuç yok"
+  },
+  "severity": {
+    "blocker": "Engelleyici",
+    "critical": "Kritik",
+    "normal": "Normal",
+    "minor": "Küçük",
+    "trivial": "Önemsiz"
+  },
+  "charts": {
+    "trend": {
+      "title": "Trend Grafiği: {{type}}",
+      "type": {
+        "status": "Durum",
+        "severity": "Önem Derecesi"
+      }
+    },
+    "pie": {
+      "title": "Test Başarı Oranı"
+    }
+  }
+}

package/src/locales/zh.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "通过",
+    "failed": "失败",
+    "broken": "损坏",
+    "skipped": "跳过",
+    "unknown": "未知",
+    "total": "总计"
+  },
+  "empty": {
+    "no-results": "无结果"
+  },
+  "severity": {
+    "blocker": "阻塞",
+    "critical": "严重",
+    "normal": "普通",
+    "minor": "次要",
+    "trivial": "轻微"
+  },
+  "charts": {
+    "trend": {
+      "title": "趋势图表: {{type}}",
+      "type": {
+        "status": "状态",
+        "severity": "严重程度"
+      }
+    },
+    "pie": {
+      "title": "测试成功率"
+    }
+  }
+}

package/src/stores/dashboard.ts

@@ -0,0 +1,206 @@
+import type { SeverityLevel, TestStatus } from "@allurereport/core-api";
+import { severityLevels, statusesList } from "@allurereport/core-api";
+import { fetchReportJsonData } from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
+import type { StoreSignalState } from "@/stores/types";
+
+export enum ChartType {
+  Trend = "trend",
+  Pie = "pie",
+}
+
+enum ChartDataType {
+  Status = "status",
+  Severity = "severity",
+}
+
+type ChartId = string;
+
+interface Point {
+  x: Date | string | number;
+  y: number;
+}
+
+interface Slice {
+  min: number;
+  max: number;
+  metadata: { executionId: string };
+}
+
+interface ResponseTrendChartData {
+  type: ChartType.Trend;
+  dataType: ChartDataType;
+  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;
+  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>>({
+  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,
+    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,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const res = await fetchReportJsonData<ChartsResponse>("widgets/charts.json");
+
+    dashboardStore.value = {
+      data: createCharts(res),
+      error: undefined,
+      loading: false,
+    };
+  } catch (err) {
+    dashboardStore.value = {
+      data: undefined,
+      error: err.message,
+      loading: false,
+    };
+  }
+};

package/src/stores/locale.ts

@@ -0,0 +1,75 @@
+import { DEFAULT_LOCALE, LANG_LOCALE, type LangLocale, getReportOptions } from "@allurereport/web-commons";
+import { computed, signal } from "@preact/signals";
+import i18next, { type TOptions } from "i18next";
+import type { DashboardReportOptions } from "types";
+
+const namespaces = [
+  "empty",
+  "execution",
+  "filters",
+  "search",
+  "severity",
+  "sort-by",
+  "sort-by.directions",
+  "sort-by.values",
+  "statuses",
+  "tabs",
+  "testSummary",
+  "ui",
+  "welcome",
+  "controls",
+  "errors",
+  "split",
+  "modal",
+  "charts",
+];
+
+export const currentLocale = signal<LangLocale>("en" as LangLocale);
+export const currentLocaleIso = computed(() => LANG_LOCALE[currentLocale.value]?.iso ?? LANG_LOCALE.en.iso);
+export const currentLocaleIsRTL = computed(() => ["ar", "he", "fa"].includes(currentLocale.value));
+
+export const getLocale = async () => {
+  const { reportLanguage } = getReportOptions<DashboardReportOptions>() ?? {};
+  const locale = localStorage.getItem("currentLocale") || reportLanguage || DEFAULT_LOCALE;
+
+  await setLocale(locale as LangLocale);
+};
+
+export const waitForI18next = i18next
+  .use({
+    type: "backend",
+    read: async (
+      language: LangLocale,
+      namespace: string,
+      callback: (errorValue: unknown, translations: null) => void,
+    ) => {
+      await import(`@/locales/${language}.json`)
+        .then((resources: Record<string, null>) => {
+          callback(null, resources[namespace]);
+        })
+        .catch((error) => {
+          callback(error, null);
+        });
+    },
+  })
+  .init({
+    lng: currentLocale.value,
+    fallbackLng: "en",
+    ns: namespaces,
+    interpolation: { escapeValue: false },
+  });
+
+export const useI18n = (namespace?: string) => {
+  const t = computed(() => (key: string, options?: TOptions) => i18next.t(key, { ns: namespace, ...options }));
+
+  return {
+    t: t.value,
+    currentLocale: currentLocale.value,
+  };
+};
+
+export const setLocale = async (locale: LangLocale) => {
+  await i18next.changeLanguage(locale as string);
+  localStorage.setItem("currentLocale", locale as string);
+  currentLocale.value = locale;
+};