@allurereport/web-dashboard 3.0.0-beta.27 → 3.0.1

package/src/assets/scss/theme.scss

@@ -1,9 +1,6 @@
 :root:not([data-theme="dark"]) {
   --ad-other-focus: var(--ad-other-focus-day);
   --ad-other-modal-overlay: var(--ad-other-modal-overlay-day);
-  --bg-alpha-capella-heavy: var(--bg-alpha-capella-heavy-day);
-  --bg-alpha-capella: var(--bg-alpha-capella-day);
-  --bg-alpha-castor-heavy: var(--bg-alpha-castor-heavy-day);
   --bg-base-modal: var(--bg-base-modal-day);
   --bg-base-neutral: var(--bg-base-neutral-day);
   --bg-base-primary: var(--bg-base-primary-day);
@@ -14,18 +11,68 @@
   --bg-control-secondary-heavy: var(--bg-control-secondary-heavy-day);
   --bg-control-secondary-medium: var(--bg-control-secondary-medium-day);
   --bg-control-secondary: var(--bg-control-secondary-day);
-  --bg-support-aldebaran-heavy: var(--bg-support-aldebaran-heavy-day);
-  --bg-support-aldebaran-medium: var(--bg-support-aldebaran-medium-day);
-  --bg-support-aldebaran: var(--bg-support-aldebaran-day);
-  --bg-support-atlas: var(--bg-support-atlas-day);
-  --bg-support-capella-heavy: var(--bg-support-capella-heavy-day);
-  --bg-support-capella-medium: var(--bg-support-capella-medium-day);
-  --bg-support-capella: var(--bg-support-capella-day);
-  --bg-support-castor-heavy: var(--bg-support-castor-heavy-day);
-  --bg-support-castor-medium: var(--bg-support-castor-medium-day);
-  --bg-support-castor: var(--bg-support-castor-day);
-  --bg-support-rau: var(--bg-support-rau-day);
-  --bg-support-skat: var(--bg-support-skat-day);
+  --bg-support-aldebaran: var(--aldebaran-day-darken-1);
+  --bg-support-aldebaran-heavy: var(--aldebaran-day-darken-4);
+  --bg-support-aldebaran-medium: var(--aldebaran-day-darken-2);
+  --bg-support-antares: var(--antares-day-darken-1);
+  --bg-support-antares-heavy: var(--antares-day-darken-4);
+  --bg-support-antares-medium: var(--antares-day-darken-2);
+  --bg-support-atlas: var(--atlas-day-darken-1);
+  --bg-support-atlas-heavy: var(--atlas-day-darken-4);
+  --bg-support-atlas-medium: var(--atlas-day-darken-2);
+  --bg-support-betelgeuse: var(--betelgeuse-day-darken-1);
+  --bg-support-betelgeuse-heavy: var(--betelgeuse-day-darken-4);
+  --bg-support-betelgeuse-medium: var(--betelgeuse-day-darken-2);
+  --bg-support-capella: var(--capella-day-darken-1);
+  --bg-support-capella-heavy: var(--capella-day-darken-4);
+  --bg-support-capella-medium: var(--capella-day-darken-2);
+  --bg-support-castor: var(--castor-day-darken-1);
+  --bg-support-castor-heavy: var(--castor-day-darken-4);
+  --bg-support-castor-medium: var(--castor-day-darken-2);
+  --bg-support-gliese: var(--gliese-day-darken-1);
+  --bg-support-gliese-heavy: var(--gliese-day-darken-4);
+  --bg-support-gliese-medium: var(--gliese-day-darken-2);
+  --bg-support-mirach: var(--mirach-day-darken-1);
+  --bg-support-mirach-heavy: var(--mirach-day-darken-4);
+  --bg-support-mirach-medium: var(--mirach-day-darken-2);
+  --bg-support-rau: var(--rau-day-darken-1);
+  --bg-support-rau-heavy: var(--rau-day-darken-4);
+  --bg-support-rau-medium: var(--rau-day-darken-2);
+  --bg-support-rigel: var(--rigel-day-darken-1);
+  --bg-support-rigel-heavy: var(--rigel-day-darken-4);
+  --bg-support-rigel-medium: var(--rigel-day-darken-2);
+  --bg-support-sirius: var(--sirius-day-darken-1);
+  --bg-support-sirius-heavy: var(--sirius-day-darken-4);
+  --bg-support-sirius-medium: var(--sirius-day-darken-2);
+  --bg-support-skat: var(--skat-day-darken-1);
+  --bg-support-skat-heavy: var(--skat-day-darken-4);
+  --bg-support-skat-medium: var(--skat-day-darken-2);
+  --bg-dashboard-neutral: rgb(206 211 222 / 100%);
+  --bg-dashboard-neutral-medium: rgb(180 188 205 / 100%);
+  --bg-dashboard-atlas: var(--atlas-day-base);
+  --bg-dashboard-capella: var(--capella-day-base);
+  --bg-dashboard-skat: var(--skat-day-base);
+  --bg-dashboard-betelgeuse: var(--betelgeuse-day-base);
+  --bg-dashboard-antares: var(--antares-day-base);
+  --bg-dashboard-castor: var(--castor-day-base);
+  --bg-dashboard-aldebaran: var(--aldebaran-day-base);
+  --bg-dashboard-gliese: var(--gliese-day-base);
+  --bg-dashboard-aldebaran-medium: var(--aldebaran-day-darken-1);
+  --bg-dashboard-castor-medium: var(--castor-day-darken-1);
+  --bg-dashboard-atlas-medium: var(--atlas-day-darken-1);
+  --bg-dashboard-capella-medium: var(--capella-day-darken-1);
+  --bg-dashboard-skat-medium: var(--skat-day-darken-1);
+  --bg-dashboard-betelgeuse-medium: var(--betelgeuse-day-darken-1);
+  --bg-dashboard-antares-medium: var(--antares-day-darken-1);
+  --bg-dashboard-gliese-medium: var(--gliese-day-darken-1);
+  --bg-dashboard-mirach: var(--mirach-day-base);
+  --bg-dashboard-mirach-medium: var(--mirach-day-darken-1);
+  --bg-dashboard-rigel: var(--rigel-day-base);
+  --bg-dashboard-rigel-medium: var(--rigel-day-darken-1);
+  --bg-dashboard-sirius: var(--sirius-day-base);
+  --bg-dashboard-sirius-medium: var(--sirius-day-darken-1);
+  --bg-dashboard-rau: var(--rau-day-base);
+  --bg-dashboard-rau-medium: var(--rau-day-darken-1);
   --constant-bg-base-modal: var(--constant-bg-base-modal-day);
   --constant-on-border-heavy: var(--constant-on-border-heavy-day);
   --constant-on-icon-primary: var(--constant-on-icon-primary-day);
@@ -55,6 +102,42 @@
   --on-text-primary: var(--on-text-primary-day);
   --on-text-secondary: var(--on-text-secondary-day);
   --scrollbar-color: var(--gray-300);
+  --bg-alpha-aldebaran: var(--aldebaran-day-darken-1-8);
+  --bg-alpha-aldebaran-heavy: var(--aldebaran-day-darken-1-24);
+  --bg-alpha-aldebaran-medium: var(--aldebaran-day-darken-1-16);
+  --bg-alpha-antares: var(--antares-day-darken-1-8);
+  --bg-alpha-antares-heavy: var(--antares-day-darken-1-24);
+  --bg-alpha-antares-medium: var(--antares-day-darken-1-16);
+  --bg-alpha-atlas: var(--atlas-day-darken-1-8);
+  --bg-alpha-atlas-heavy: var(--atlas-day-darken-1-24);
+  --bg-alpha-atlas-medium: var(--atlas-day-darken-1-16);
+  --bg-alpha-betelgeuse: var(--betelgeuse-day-darken-1-8);
+  --bg-alpha-betelgeuse-heavy: var(--betelgeuse-day-darken-1-24);
+  --bg-alpha-betelgeuse-medium: var(--betelgeuse-day-darken-1-16);
+  --bg-alpha-capella: var(--capella-day-darken-1-8);
+  --bg-alpha-capella-heavy: var(--capella-day-darken-1-24);
+  --bg-alpha-capella-medium: var(--capella-day-darken-1-16);
+  --bg-alpha-castor: var(--castor-day-darken-1-8);
+  --bg-alpha-castor-heavy: var(--castor-day-darken-1-24);
+  --bg-alpha-castor-medium: var(--castor-day-darken-1-16);
+  --bg-alpha-gliese: var(--gliese-day-darken-1-8);
+  --bg-alpha-gliese-heavy: var(--gliese-day-darken-1-24);
+  --bg-alpha-gliese-medium: var(--gliese-day-darken-1-16);
+  --bg-alpha-mirach: var(--mirach-day-darken-1-8);
+  --bg-alpha-mirach-heavy: var(--mirach-day-darken-1-24);
+  --bg-alpha-mirach-medium: var(--mirach-day-darken-1-16);
+  --bg-alpha-rau: var(--rau-day-darken-1-8);
+  --bg-alpha-rau-heavy: var(--rau-day-darken-1-24);
+  --bg-alpha-rau-medium: var(--rau-day-darken-1-16);
+  --bg-alpha-rigel: var(--rigel-day-darken-1-8);
+  --bg-alpha-rigel-heavy: var(--rigel-day-darken-1-24);
+  --bg-alpha-rigel-medium: var(--rigel-day-darken-1-16);
+  --bg-alpha-sirius: var(--sirius-day-darken-1-8);
+  --bg-alpha-sirius-heavy: var(--sirius-day-darken-1-24);
+  --bg-alpha-sirius-medium: var(--sirius-day-darken-1-16);
+  --bg-alpha-skat: var(--skat-day-darken-1-8);
+  --bg-alpha-skat-heavy: var(--skat-day-darken-1-24);
+  --bg-alpha-skat-medium: var(--skat-day-darken-1-16);
 
   color-scheme: light;
 }
@@ -62,10 +145,6 @@
 :root[data-theme="dark"] {
   --ad-other-focus: var(--ad-other-focus-night);
   --ad-other-modal-overlay: var(--ad-other-modal-overlay-night);
-  --bg-alpha-capella-heavy: var(--bg-alpha-capella-heavy-night);
-  --bg-alpha-capella-medium: var(--bg-alpha-capella-medium-night);
-  --bg-alpha-capella: var(--bg-alpha-capella-night);
-  --bg-alpha-castor-heavy: var(--bg-alpha-castor-heavy-night);
   --bg-base-modal: var(--bg-base-modal-night);
   --bg-base-neutral: var(--bg-base-neutral-night);
   --bg-base-primary: var(--bg-base-primary-night);
@@ -76,20 +155,60 @@
   --bg-control-secondary-heavy: var(--bg-control-secondary-heavy-night);
   --bg-control-secondary-medium: var(--bg-control-secondary-medium-night);
   --bg-control-secondary: var(--bg-control-secondary-night);
-  --bg-support-aldebaran-heavy: var(--bg-support-aldebaran-heavy-night);
-  --bg-support-aldebaran-medium: var(--bg-support-aldebaran-medium-night);
-  --bg-support-aldebaran: var(--bg-support-aldebaran-night);
-  --bg-support-atlas-heavy: var(--bg-support-atlas-heavy-night);
-  --bg-support-atlas-medium: var(--bg-support-atlas-medium-night);
-  --bg-support-atlas: var(--bg-support-atlas-night);
-  --bg-support-capella-heavy: var(--bg-support-capella-heavy-night);
-  --bg-support-capella-medium: var(--bg-support-capella-medium-night);
-  --bg-support-capella: var(--bg-support-capella-night);
-  --bg-support-castor-heavy: var(--bg-support-castor-heavy-night);
-  --bg-support-castor-medium: var(--bg-support-castor-medium-night);
-  --bg-support-castor: var(--bg-support-castor-night);
-  --bg-support-rau: var(--bg-support-rau-night);
-  --bg-support-skat: var(--bg-support-skat-night);
+  --bg-support-aldebaran-heavy: var(--aldebaran-night-darken-7);
+  --bg-support-aldebaran-medium: var(--aldebaran-night-darken-6);
+  --bg-support-aldebaran: var(--aldebaran-night-darken-5);
+  --bg-support-antares-heavy: var(--antares-night-darken-7);
+  --bg-support-antares-medium: var(--antares-night-darken-6);
+  --bg-support-antares: var(--antares-night-darken-4);
+  --bg-support-atlas-heavy: var(--atlas-night-darken-7);
+  --bg-support-atlas-medium: var(--atlas-night-darken-6);
+  --bg-support-atlas: var(--atlas-night-darken-4);
+  --bg-support-betelgeuse-heavy: var(--betelgeuse-night-darken-7);
+  --bg-support-betelgeuse-medium: var(--betelgeuse-night-darken-6);
+  --bg-support-betelgeuse: var(--betelgeuse-night-darken-5);
+  --bg-support-capella-heavy: var(--capella-night-darken-7);
+  --bg-support-capella-medium: var(--capella-night-darken-6);
+  --bg-support-capella: var(--capella-night-darken-4);
+  --bg-support-castor-heavy: var(--castor-night-darken-7);
+  --bg-support-castor-medium: var(--castor-night-darken-6);
+  --bg-support-castor: var(--castor-night-darken-5);
+  --bg-support-gliese-heavy: var(--gliese-night-darken-7);
+  --bg-support-gliese-medium: var(--gliese-night-darken-6);
+  --bg-support-gliese: var(--gliese-night-darken-4);
+  --bg-support-mirach-heavy: var(--mirach-night-darken-7);
+  --bg-support-mirach-medium: var(--mirach-night-darken-6);
+  --bg-support-mirach: var(--mirach-night-darken-5);
+  --bg-support-rau-heavy: var(--rau-night-darken-7);
+  --bg-support-rau-medium: var(--rau-night-darken-6);
+  --bg-support-rau: var(--rau-night-darken-5);
+  --bg-support-rigel-heavy: var(--rigel-night-darken-7);
+  --bg-support-rigel-medium: var(--rigel-night-darken-6);
+  --bg-support-rigel: var(--rigel-night-darken-4);
+  --bg-support-sirius-heavy: var(--sirius-night-darken-7);
+  --bg-support-sirius-medium: var(--sirius-night-darken-6);
+  --bg-support-sirius: var(--sirius-night-darken-5);
+  --bg-support-skat-heavy: var(--skat-night-darken-7);
+  --bg-support-skat-medium: var(--skat-night-darken-6);
+  --bg-support-skat: var(--skat-night-darken-5);
+  --bg-dashboard-neutral: rgb(207 214 229 / 100%);
+  --bg-dashboard-neutral-medium: rgb(177 188 213 / 100%);
+  --bg-dashboard-atlas: var(--atlas-night-darken-1);
+  --bg-dashboard-capella: var(--capella-night-darken-1);
+  --bg-dashboard-skat: var(--skat-night-darken-2);
+  --bg-dashboard-betelgeuse: var(--betelgeuse-night-darken-2);
+  --bg-dashboard-antares: var(--antares-night-darken-1);
+  --bg-dashboard-castor: var(--castor-night-darken-3);
+  --bg-dashboard-aldebaran: var(--aldebaran-night-darken-2);
+  --bg-dashboard-gliese: var(--gliese-night-darken-1);
+  --bg-dashboard-mirach: var(--mirach-night-darken-3);
+  --bg-dashboard-mirach-medium: var(--mirach-night-darken-4);
+  --bg-dashboard-rigel: var(--rigel-night-darken-1);
+  --bg-dashboard-rigel-medium: var(--rigel-night-darken-3);
+  --bg-dashboard-sirius: var(--sirius-night-darken-2);
+  --bg-dashboard-sirius-medium: var(--sirius-night-darken-4);
+  --bg-dashboard-rau: var(--rau-night-darken-2);
+  --bg-dashboard-rau-medium: var(--rau-night-darken-4);
   --constant-bg-base-modal: var(--constant-bg-base-modal-night);
   --constant-bg-base-primary: var(--constant-bg-base-primary-night);
   --constant-on-border-heavy: var(--constant-on-border-heavy-night);
@@ -126,6 +245,43 @@
   --on-text-primary: var(--on-text-primary-night);
   --on-text-secondary: var(--on-text-secondary-night);
 
+  --bg-alpha-aldebaran-heavy: var(--aldebaran-night-darken-5-28);
+  --bg-alpha-aldebaran-medium: var(--aldebaran-night-darken-5-20);
+  --bg-alpha-aldebaran: var(--aldebaran-night-darken-5-12);
+  --bg-alpha-antares-heavy: var(--antares-night-darken-4-28);
+  --bg-alpha-antares-medium: var(--antares-night-darken-4-20);
+  --bg-alpha-antares: var(--antares-night-darken-4-12);
+  --bg-alpha-atlas-heavy: var(--atlas-night-darken-4-28);
+  --bg-alpha-atlas-medium: var(--atlas-night-darken-4-20);
+  --bg-alpha-atlas: var(--atlas-night-darken-4-12);
+  --bg-alpha-betelgeuse-heavy: var(--betelgeuse-night-darken-5-28);
+  --bg-alpha-betelgeuse-medium: var(--betelgeuse-night-darken-5-20);
+  --bg-alpha-betelgeuse: var(--betelgeuse-night-darken-5-12);
+  --bg-alpha-capella-heavy: var(--capella-night-darken-4-28);
+  --bg-alpha-capella-medium: var(--capella-night-darken-4-20);
+  --bg-alpha-capella: var(--capella-night-darken-4-12);
+  --bg-alpha-castor-heavy: var(--castor-night-darken-5-28);
+  --bg-alpha-castor-medium: var(--castor-night-darken-5-20);
+  --bg-alpha-castor: var(--castor-night-darken-5-12);
+  --bg-alpha-gliese-heavy: var(--gliese-night-darken-4-28);
+  --bg-alpha-gliese-medium: var(--gliese-night-darken-4-20);
+  --bg-alpha-gliese: var(--gliese-night-darken-4-12);
+  --bg-alpha-mirach-heavy: var(--mirach-night-darken-5-28);
+  --bg-alpha-mirach-medium: var(--mirach-night-darken-5-20);
+  --bg-alpha-mirach: var(--mirach-night-darken-5-12);
+  --bg-alpha-rau-heavy: var(--rau-night-darken-5-28);
+  --bg-alpha-rau-medium: var(--rau-night-darken-5-20);
+  --bg-alpha-rau: var(--rau-night-darken-5-12);
+  --bg-alpha-rigel-heavy: var(--rigel-night-darken-4-28);
+  --bg-alpha-rigel-medium: var(--rigel-night-darken-4-20);
+  --bg-alpha-rigel: var(--rigel-night-darken-4-12);
+  --bg-alpha-sirius-heavy: var(--sirius-night-darken-5-28);
+  --bg-alpha-sirius-medium: var(--sirius-night-darken-5-20);
+  --bg-alpha-sirius: var(--sirius-night-darken-5-12);
+  --bg-alpha-skat-heavy: var(--skat-night-darken-5-28);
+  --bg-alpha-skat-medium: var(--skat-night-darken-5-20);
+  --bg-alpha-skat: var(--skat-night-darken-5-12);
+
   --scrollbar-color: var(--gray-400);
   color-scheme: dark;
 }

package/src/components/Dashboard/index.tsx

@@ -1,26 +1,30 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { BarChartType, ChartType, FunnelChartType } from "@allurereport/charts-api";
-import { capitalize } from "@allurereport/core-api";
+import { ChartType } from "@allurereport/charts-api";
 import { type UIChartData } from "@allurereport/web-commons";
 import {
-  BarChartWidget,
-  ComingSoonChartWidget,
   CurrentStatusChartWidget,
+  DurationDynamicsChartWidget,
+  DurationsChartWidget,
+  FBSUAgePyramidChartWidget,
   Grid,
   GridItem,
   HeatMapWidget,
   Loadable,
   PageLoader,
-  StabilityRateDistributionWidget,
+  StabilityDistributionWidget,
   StatusDynamicsChartWidget,
+  StatusTransitionsChartWidget,
+  TestBaseGrowthDynamicsChartWidget,
   TestingPyramidWidget,
+  ThemeProvider,
+  TrSeveritiesChartWidget,
   TreeMapChartWidget,
-  TrendChartWidget,
 } from "@allurereport/web-components";
 import { useEffect } from "preact/hooks";
 import { dashboardStore, fetchDashboardData } from "@/stores/dashboard";
 import { currentEnvironment, fetchEnvironments } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
+import { themeStore } from "@/stores/theme";
 import * as styles from "./styles.scss";
 
 const getChartWidgetByType = (
@@ -28,22 +32,6 @@ const getChartWidgetByType = (
   { t, empty }: Record<string, (key: string, options?: any) => string>,
 ) => {
   switch (chartData.type) {
-    case ChartType.Trend: {
-      const type = t(`trend.type.${chartData.dataType}`);
-      const title = chartData.title ?? t("trend.title", { type: capitalize(type) });
-
-      return (
-        <TrendChartWidget
-          title={title}
-          mode={chartData.mode}
-          items={chartData.items}
-          slices={chartData.slices}
-          min={chartData.min}
-          max={chartData.max}
-          translations={{ "no-results": empty("no-results") }}
-        />
-      );
-    }
     case ChartType.CurrentStatus: {
       const title = chartData.title ?? t("currentStatus.title");
 
@@ -70,47 +58,113 @@ const getChartWidgetByType = (
         />
       );
     }
-    case ChartType.Bar: {
-      const type = t(`bar.type.${chartData.dataType}`);
-      const title = chartData.title ?? t("bar.title", { type: capitalize(type) });
-
-      if (chartData.dataType === BarChartType.StabilityRateDistribution) {
-        return (
-          <StabilityRateDistributionWidget
-            title={title}
-            mode={chartData.mode}
-            data={chartData.data}
-            keys={chartData.keys}
-            indexBy={chartData.indexBy}
-            colors={chartData.colors}
-            groupMode={chartData.groupMode}
-            xAxisConfig={chartData.xAxisConfig}
-            yAxisConfig={chartData.yAxisConfig}
-            layout={chartData.layout}
-            threshold={chartData.threshold}
-            translations={{ "no-results": empty("no-results") }}
-          />
-        );
-      }
+    case ChartType.StatusTransitions: {
+      const title = chartData.title ?? t("statusTransitions.title");
+
+      return (
+        <StatusTransitionsChartWidget
+          title={title}
+          data={chartData.data}
+          i18n={(key, props = {}) => t(`statusTransitions.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.Durations: {
+      const title =
+        chartData.title ??
+        (chartData.groupBy === "none"
+          ? t("durations.title_none")
+          : t("durations.title", { groupBy: chartData.groupBy }));
 
       return (
-        <BarChartWidget
+        <DurationsChartWidget
           title={title}
-          mode={chartData.mode}
           data={chartData.data}
+          groupBy={chartData.groupBy}
           keys={chartData.keys}
-          indexBy={chartData.indexBy}
+          i18n={(key, props = {}) => t(`durations.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.StabilityDistribution: {
+      const title = chartData.title ?? t("stabilityDistribution.title");
+
+      return (
+        <StabilityDistributionWidget
+          title={title}
+          data={chartData.data}
+          keys={chartData.keys}
+          i18n={(key, props = {}) => t(`stabilityDistribution.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.TestBaseGrowthDynamics: {
+      const title = chartData.title ?? t("testBaseGrowthDynamics.title");
+
+      return (
+        <TestBaseGrowthDynamicsChartWidget
+          title={title}
+          data={chartData.data}
+          statuses={chartData.statuses}
+          i18n={(key, props = {}) => t(`testBaseGrowthDynamics.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.FBSUAgePyramid: {
+      const title = chartData.title ?? t("fbsuAgePyramid.title");
+
+      return (
+        <FBSUAgePyramidChartWidget
+          title={title}
+          data={chartData.data}
+          statuses={chartData.statuses}
+          i18n={(key, props = {}) => t(`fbsuAgePyramid.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.TrSeverities: {
+      const title = chartData.title ?? t("trSeverities.title");
+
+      return (
+        <TrSeveritiesChartWidget
+          title={title}
+          data={chartData.data}
+          levels={chartData.levels}
+          statuses={chartData.statuses}
+          i18n={(key, props = {}) => t(`trSeverities.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.DurationDynamics: {
+      const title = chartData.title ?? t("durationDynamics.title");
+
+      return (
+        <DurationDynamicsChartWidget
+          title={title}
+          data={chartData.data}
+          i18n={(key, props = {}) => t(`durationDynamics.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.CoverageDiff: {
+      return (
+        <TreeMapChartWidget
+          chartType={ChartType.CoverageDiff}
+          data={chartData.treeMap}
+          title={chartData.title}
+          formatLegend={chartData.formatLegend}
           colors={chartData.colors}
-          groupMode={chartData.groupMode}
-          xAxisConfig={chartData.xAxisConfig}
-          yAxisConfig={chartData.yAxisConfig}
+          legendDomain={chartData.legendDomain}
+          tooltipRows={chartData.tooltipRows}
           translations={{ "no-results": empty("no-results") }}
         />
       );
     }
-    case ChartType.TreeMap: {
+
+    case ChartType.SuccessRateDistribution: {
       return (
         <TreeMapChartWidget
+          chartType={ChartType.SuccessRateDistribution}
           data={chartData.treeMap}
           title={chartData.title}
           formatLegend={chartData.formatLegend}
@@ -121,33 +175,28 @@ const getChartWidgetByType = (
         />
       );
     }
-    case ChartType.HeatMap: {
+    case ChartType.ProblemsDistribution: {
       return (
         <HeatMapWidget
           title={chartData.title}
           data={chartData.data}
-          colors={chartData.colors}
           translations={{ "no-results": empty("no-results") }}
         />
       );
     }
-    case ChartType.Funnel: {
-      if (chartData.dataType !== FunnelChartType.TestingPyramid) {
-        return null;
-      }
+    case ChartType.TestingPyramid: {
+      const isDataEmpty = !chartData.data.some((item) => item.testCount > 0);
 
       return (
         <TestingPyramidWidget
           title={chartData.title}
-          data={chartData.data}
+          data={isDataEmpty ? [] : chartData.data}
           translations={{ "no-results": empty("no-results") }}
         />
       );
     }
     default: {
-      const title = chartData.title ?? t(`charts.${chartData.type}.title`, { fallback: `${chartData.type} Chart` });
-
-      return <ComingSoonChartWidget title={title} />;
+      return null;
     }
   }
 };
@@ -162,29 +211,31 @@ export const Dashboard = () => {
   }, []);
 
   return (
-    <Loadable
-      source={dashboardStore}
-      renderLoader={() => <PageLoader />}
-      renderData={(data) => {
-        const currentChartsData = currentEnvironment.value ? data.byEnv[currentEnvironment.value] : data.general;
-
-        const charts = Object.entries(currentChartsData).map(([chartId, value]) => {
-          const chartWidget = getChartWidgetByType(value, { t, empty });
+    <ThemeProvider theme={themeStore.value}>
+      <Loadable
+        source={dashboardStore}
+        renderLoader={() => <PageLoader />}
+        renderData={(data) => {
+          const currentChartsData = currentEnvironment.value ? data.byEnv[currentEnvironment.value] : data.general;
+
+          const charts = Object.entries(currentChartsData).map(([chartId, value]) => {
+            const chartWidget = getChartWidgetByType(value, { t, empty });
+            return (
+              <GridItem key={chartId} className={styles["overview-grid-item"]}>
+                {chartWidget}
+              </GridItem>
+            );
+          });
+
           return (
-            <GridItem key={chartId} className={styles["overview-grid-item"]}>
-              {chartWidget}
-            </GridItem>
+            <div className={styles.overview}>
+              <Grid kind="swap" className={styles["overview-grid"]}>
+                {charts}
+              </Grid>
+            </div>
           );
-        });
-
-        return (
-          <div className={styles.overview}>
-            <Grid kind="swap" className={styles["overview-grid"]}>
-              {charts}
-            </Grid>
-          </div>
-        );
-      }}
-    />
+        }}
+      />
+    </ThemeProvider>
   );
 };

package/src/components/EnvironmentPicker/index.tsx

@@ -17,7 +17,7 @@ export const EnvironmentPicker = () => {
   }
 
   return (
-    <div className={styles["environment-picker"]} data-testid={"environment-picker"}>
+    <div className={styles["environment-picker"]}>
       <SvgIcon id={allureIcons.environment} size={"s"} />
       <Text className={styles["environment-picker-label"]} type={"ui"} size={"s"} bold>
         {t("environment", { count: 1 })}:
@@ -36,11 +36,20 @@ export const EnvironmentPicker = () => {
         )}
       >
         <Menu.Section>
-          <Menu.ItemWithCheckmark onClick={() => handleSelect("")} isChecked={!environment}>
+          <Menu.ItemWithCheckmark
+            data-testid={"environment-picker-item"}
+            onClick={() => handleSelect("")}
+            isChecked={!environment}
+          >
             {t("all")}
           </Menu.ItemWithCheckmark>
           {environmentsStore.value.data.map((env) => (
-            <Menu.ItemWithCheckmark onClick={() => handleSelect(env)} key={env} isChecked={env === environment}>
+            <Menu.ItemWithCheckmark
+              data-testid={"environment-picker-item"}
+              onClick={() => handleSelect(env)}
+              key={env}
+              isChecked={env === environment}
+            >
               {env}
             </Menu.ItemWithCheckmark>
           ))}