@openshift-migration-advisor/shared-components 0.28.0 → 0.29.0-24760762468f

package/dist/charts/MigrationDonutChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MigrationDonutChart.d.ts","sourceRoot":"","sources":["../../src/charts/MigrationDonutChart.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAC;AAG9C,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,WAAW,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,gCAAgC,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,wBAAwB,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC7B,KAAK,EAAE;YACL,CAAC,EAAE,MAAM,CAAC;YACV,CAAC,EAAE,MAAM,CAAC;YACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;YAC/B,cAAc,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,MAAM,CAAC;IACb,iDAAiD;IACjD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACvD,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mFAAmF;IACnF,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC5B,CAAC,EAAE,MAAM,CAAC;QACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAChC,KAAK,MAAM,CAAC;IACb;;;;OAIG;IACH,aAAa,CAAC,EAAE,gCAAgC,CAAC;IACjD,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA8ED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAiX5D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"MigrationDonutChart.d.ts","sourceRoot":"","sources":["../../src/charts/MigrationDonutChart.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAC;AAG9C,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,WAAW,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,gCAAgC,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,wBAAwB,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC7B,KAAK,EAAE;YACL,CAAC,EAAE,MAAM,CAAC;YACV,CAAC,EAAE,MAAM,CAAC;YACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;YAC/B,cAAc,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,MAAM,CAAC;IACb,iDAAiD;IACjD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACvD,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mFAAmF;IACnF,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC5B,CAAC,EAAE,MAAM,CAAC;QACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAChC,KAAK,MAAM,CAAC;IACb;;;;OAIG;IACH,aAAa,CAAC,EAAE,gCAAgC,CAAC;IACjD,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAoFD,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAgY5D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/charts/MigrationDonutChart.js

@@ -35,6 +35,8 @@ const themedChartTooltipFlyoutPadding = {
     left: 10,
     right: 10,
 };
+/** Victory SVG text defaults to a serif face; match PatternFly / html2canvas export. */
+const chartTextFontFamily = "RedHatText, Overpass, Helvetica, Arial, sans-serif";
 const styles = {
     legendIcon: css `
     margin-right: 4px;
@@ -63,6 +65,7 @@ const styles = {
     background: none;
     padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--ml);
     margin: 0;
+    font-family: ${chartTextFontFamily};
     transition: opacity var(--pf-t--global--motion--duration--short);
     white-space: nowrap;
 
@@ -73,6 +76,7 @@ const styles = {
     legendLabel: css `
     gap: var(--pf-t--global--spacer--lg);
     padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--ml);
+    font-family: ${chartTextFontFamily};
     white-space: nowrap;
   `,
     legendInner: css `
@@ -107,9 +111,13 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
             countDisplay: item.countDisplay ?? item.count,
         }));
     }, [data]);
-    const colorScale = useMemo(() => {
-        return chartData.map((item) => getColor(item.legendCategory));
-    }, [chartData, getColor]);
+    // Victory renders zero-value slices as degenerate zero-angle wedges but still
+    // keeps a `padAngle` gap around each one.
+    const donutChartData = useMemo(() => chartData.filter((item) => Number(item.y) > 0), [chartData]);
+    const donutColorScale = useMemo(() => donutChartData.map((item) => getColor(item.legendCategory)), [donutChartData, getColor]);
+    // A lone slice has no neighbour to pad against; forcing padAngle to 0 keeps it
+    // from leaving a gap against itself.
+    const effectivePadAngle = donutChartData.length <= 1 ? 0 : padAngle;
     const legendData = useMemo(() => {
         return chartData.map((item) => ({
             name: `${item.x} (${item.countDisplay})`,
@@ -214,9 +222,10 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
                         labels: {
                             fontSize: labelFontSize,
                             fill: "var(--pf-t--global--text--color--regular)",
+                            fontFamily: chartTextFontFamily,
                         },
                     } }) }) }) }));
-    return (_jsxs(Flex, { direction: { default: "column" }, alignItems: { default: "alignItemsCenter" }, className: `${onItemClick ? styles.cursorPointer : styles.cursorDefault} ${styles.chartContainer}`, children: [_jsxs("div", { className: styles.donutWrapper, children: [_jsx(ChartDonut, { ariaDesc: "Migration data donut chart", data: chartData, events: chartEvents, labelComponent: donutTooltip, labels: ({ datum, }) => formatLabel(datum), colorScale: colorScale, constrainToVisibleArea: true, innerRadius: innerRadius, padAngle: padAngle, title: title, subTitle: subTitle, height: height, width: width, padding: {
+    return (_jsxs(Flex, { direction: { default: "column" }, alignItems: { default: "alignItemsCenter" }, className: `${onItemClick ? styles.cursorPointer : styles.cursorDefault} ${styles.chartContainer}`, children: [_jsxs("div", { className: styles.donutWrapper, children: [_jsx(ChartDonut, { ariaDesc: "Migration data donut chart", data: donutChartData, events: chartEvents, labelComponent: donutTooltip, labels: ({ datum, }) => formatLabel(datum), colorScale: donutColorScale, constrainToVisibleArea: true, innerRadius: innerRadius, padAngle: effectivePadAngle, title: title, subTitle: subTitle, height: height, width: width, padding: {
                             bottom: 5,
                             left: 20,
                             right: 20,
@@ -226,11 +235,13 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
                                     fill: titleColor,
                                     fontSize: titleFontSize,
                                     fontWeight: "bold",
+                                    fontFamily: chartTextFontFamily,
                                 },
                             ] })) : undefined, subTitleComponent: subTitle ? (_jsx(ChartLabel, { dy: showChartLegend ? 7 : undefined, style: [
                                 {
                                     fill: subTitleColor,
                                     fontSize: subTitleFontSize,
+                                    fontFamily: chartTextFontFamily,
                                 },
                             ] })) : undefined }), onTitleClick && title && (_jsx("div", { onClick: onTitleClick, className: css `
               position: absolute;

package/dist/report/ChartExportProvider.d.ts

@@ -1,6 +1,6 @@
 import { type FC, type ReactNode } from "react";
 import { type ChartCaptureSource, type ChartExportFile, type PdfTextPage } from "./chartExport.js";
-export type CaptureChartElement = (element: HTMLElement) => Promise<HTMLCanvasElement>;
+export type CaptureChartElement = (element: HTMLElement, options?: import("./captureChartElement.js").CaptureChartElementOptions) => Promise<HTMLCanvasElement>;
 export type ZipChartFiles = (files: ChartExportFile[]) => Promise<Blob>;
 export type EncodeChartPng = (canvas: HTMLCanvasElement) => Promise<Blob>;
 export type BuildChartDocument = (charts: ChartCaptureSource[], documentTitle: string) => Promise<Blob>;

package/dist/report/ChartExportProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartExportProvider.d.ts","sourceRoot":"","sources":["../../src/report/ChartExportProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,eAAe,EAGpB,KAAK,WAAW,EAMjB,MAAM,kBAAkB,CAAC;AAU1B,MAAM,MAAM,mBAAmB,GAAG,CAChC,OAAO,EAAE,WAAW,KACjB,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AACxE,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,CAC/B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,KAClB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,MAAM,MAAM,gBAAgB,GAAG,CAC7B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,EACrB,UAAU,CAAC,EAAE,WAAW,EAAE,KACvB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,YAAY,EACV,cAAc,EACd,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3E,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,MAAM,CAAC;CAChC;AAsED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAiQ5D,CAAC"}
+{"version":3,"file":"ChartExportProvider.d.ts","sourceRoot":"","sources":["../../src/report/ChartExportProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,eAAe,EAGpB,KAAK,WAAW,EAMjB,MAAM,kBAAkB,CAAC;AAU1B,MAAM,MAAM,mBAAmB,GAAG,CAChC,OAAO,EAAE,WAAW,EACpB,OAAO,CAAC,EAAE,OAAO,0BAA0B,EAAE,0BAA0B,KACpE,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AACxE,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,CAC/B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,KAClB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,MAAM,MAAM,gBAAgB,GAAG,CAC7B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,EACrB,UAAU,CAAC,EAAE,WAAW,EAAE,KACvB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,YAAY,EACV,cAAc,EACd,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3E,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,MAAM,CAAC;CAChC;AAsED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAmQ5D,CAAC"}

package/dist/report/ChartExportProvider.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState, } from "react";
+import { CHART_CAPTURE_SCALE_SINGLE } from "./captureChartElement.js";
 import { canvasToBlob, downloadBlob, releaseCanvas, restoreChartExportViews, sortRegisteredChartsByDocumentOrder, toBulkChartCaptureSources, } from "./chartExport.js";
 import { ChartExportApiContext, ChartExportRegistryContext, } from "./chartExportContext.js";
 import { getChartExportFilename } from "./chartExportFilenames.js";
@@ -108,7 +109,9 @@ export const ChartExportProvider = ({ children, capture, zipFiles, encodePng = c
                 throw new Error("The chart is not ready to export yet.");
             }
             const captureFn = await resolveCapture(capture);
-            const canvas = await captureFn(chart.element);
+            const canvas = await captureFn(chart.element, {
+                scale: CHART_CAPTURE_SCALE_SINGLE,
+            });
             try {
                 downloadFile(await encodePng(canvas), chart.filename);
             }

package/dist/report/FeatureStatusBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureStatusBadge.d.ts","sourceRoot":"","sources":["../../src/report/FeatureStatusBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAkB1D,CAAC"}
+{"version":3,"file":"FeatureStatusBadge.d.ts","sourceRoot":"","sources":["../../src/report/FeatureStatusBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA0B1D,CAAC"}

package/dist/report/FeatureStatusBadge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Label } from "@patternfly/react-core";
+import { Icon, Label } from "@patternfly/react-core";
 import { CheckCircleIcon, TimesCircleIcon } from "@patternfly/react-icons";
 export const FeatureStatusBadge = ({ status }) => {
     if (status === "unknown") {
@@ -8,6 +8,6 @@ export const FeatureStatusBadge = ({ status }) => {
     if (status === "enabled") {
         return (_jsx(Label, { color: "green", isCompact: true, icon: _jsx(CheckCircleIcon, {}), children: "Enabled" }));
     }
-    return (_jsx(Label, { color: "grey", isCompact: true, icon: _jsx(TimesCircleIcon, {}), children: "Disabled" }));
+    return (_jsx(Label, { variant: "outline", isCompact: true, icon: _jsx(Icon, { status: "danger", children: _jsx(TimesCircleIcon, {}) }), children: "Disabled" }));
 };
 FeatureStatusBadge.displayName = "FeatureStatusBadge";

package/dist/report/OsUpgradeRecommendationPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OsUpgradeRecommendationPopover.d.ts","sourceRoot":"","sources":["../../src/report/OsUpgradeRecommendationPopover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAehC,UAAU,mCAAmC;IAC3C,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,8BAA8B,EAAE,EAAE,CAC7C,mCAAmC,CAiBpC,CAAC;AAIF,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAyB1C,CAAC"}
+{"version":3,"file":"OsUpgradeRecommendationPopover.d.ts","sourceRoot":"","sources":["../../src/report/OsUpgradeRecommendationPopover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQhC,UAAU,mCAAmC;IAC3C,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,8BAA8B,EAAE,EAAE,CAC7C,mCAAmC,CAgBpC,CAAC;AAIF,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAyB1C,CAAC"}

package/dist/report/OsUpgradeRecommendationPopover.js

@@ -3,17 +3,11 @@ import { css } from "@emotion/css";
 import { Button, Flex, FlexItem, Popover } from "@patternfly/react-core";
 import { InfoCircleIcon } from "@patternfly/react-icons";
 import { chartExportHideProps } from "./chartExport.js";
-const upgradeRecommendationPopoverCloseButton = css `
-  .pf-v6-c-popover__close .pf-v6-c-button.pf-m-plain,
-  .pf-v6-c-popover__close .pf-v6-c-button.pf-m-plain:hover {
-    color: var(--pf-t--global--text--color--regular);
-  }
-`;
 const infoButtonStyle = css `
   padding: 0;
   vertical-align: middle;
 `;
-export const OsUpgradeRecommendationPopover = ({ upgradeRecommendation }) => (_jsx(Popover, { className: upgradeRecommendationPopoverCloseButton, position: "bottom", headerContent: "Upgrade to get support", bodyContent: _jsx("div", { children: upgradeRecommendation }), children: _jsx(Button, { type: "button", "aria-label": "Open operating system upgrade information", variant: "plain", className: infoButtonStyle, children: _jsx(InfoCircleIcon, { color: "var(--pf-t--global--icon--color--status--info--default)" }) }) }));
+export const OsUpgradeRecommendationPopover = ({ upgradeRecommendation }) => (_jsx(Popover, { position: "bottom", headerContent: "Upgrade to get support", bodyContent: _jsx("div", { children: upgradeRecommendation }), children: _jsx(Button, { type: "button", "aria-label": "Open operating system upgrade information", variant: "plain", className: infoButtonStyle, children: _jsx(InfoCircleIcon, { color: "var(--pf-t--global--icon--color--status--info--default)" }) }) }));
 OsUpgradeRecommendationPopover.displayName = "OsUpgradeRecommendationPopover";
 export const OsNameCell = ({ osName, upgradeRecommendation, }) => {
     const hasUpgradeRecommendation = upgradeRecommendation && upgradeRecommendation.trim() !== "";

package/dist/report/ReportExportMenu.d.ts

@@ -14,6 +14,7 @@ export interface ExportReportButtonProps extends StandardReportExportHandlers {
     loadingLabel?: string | null;
     isDisabled?: boolean;
     toggleLabel?: string;
+    assessmentSectionLabel?: string;
 }
 export declare const ExportReportButton: FC<ExportReportButtonProps>;
 //# sourceMappingURL=ReportExportMenu.d.ts.map

package/dist/report/ReportExportMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportExportMenu.d.ts","sourceRoot":"","sources":["../../src/report/ReportExportMenu.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AACpD,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,4BAA4B,EAElC,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA8DtD,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,4BAA4B;IAC3E,YAAY,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAkB1D,CAAC"}
+{"version":3,"file":"ReportExportMenu.d.ts","sourceRoot":"","sources":["../../src/report/ReportExportMenu.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,EAAE,EAA+C,MAAM,OAAO,CAAC;AAC7E,OAAO,EACL,KAAK,kBAAkB,EAEvB,KAAK,4BAA4B,EAElC,MAAM,0BAA0B,CAAC;AA6BlC,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAqFtD,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,4BAA4B;IAC3E,YAAY,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAoB1D,CAAC"}

package/dist/report/ReportExportMenu.js

@@ -1,13 +1,46 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Dropdown, DropdownItem, DropdownList, MenuToggle, Spinner, } from "@patternfly/react-core";
+import { Divider, Dropdown, DropdownGroup, DropdownItem, DropdownList, MenuToggle, Spinner, } from "@patternfly/react-core";
 import { DownloadIcon } from "@patternfly/react-icons";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { standardReportExportOptions, } from "./reportExportOptions.js";
+function sectionGroupKey(section) {
+    return section?.id;
+}
+function groupExportOptions(options) {
+    const groups = [];
+    for (const option of options) {
+        const sectionKey = sectionGroupKey(option.section);
+        const last = groups.length > 0 ? groups[groups.length - 1] : undefined;
+        const lastKey = last ? sectionGroupKey(last.section) : undefined;
+        if (last && lastKey === sectionKey) {
+            last.options.push(option);
+        }
+        else {
+            groups.push({ section: option.section, options: [option] });
+        }
+    }
+    return groups;
+}
 export const ReportExportMenu = ({ options, isLoading = false, loadingLabel = null, isDisabled = false, toggleLabel = "Export", }) => {
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const optionGroups = useMemo(() => groupExportOptions(options), [options]);
     if (options.length === 0) {
         return null;
     }
+    const menuItems = [];
+    optionGroups.forEach((group, index) => {
+        if (index > 0) {
+            const dividerKey = group.section?.id ?? group.options[0]?.key ?? "ungrouped";
+            menuItems.push(_jsx(Divider, { component: "li" }, `divider-before-${dividerKey}`));
+        }
+        const items = group.options.map((option) => (_jsx(DropdownItem, { isDisabled: option.isDisabled, description: option.description, onClick: option.onSelect, children: option.label }, option.key)));
+        if (group.section) {
+            menuItems.push(_jsx(DropdownGroup, { label: group.section.label, children: items }, group.section.id));
+        }
+        else {
+            menuItems.push(...items);
+        }
+    });
     return (_jsx(Dropdown, { isOpen: isDropdownOpen, popperProps: {
             placement: "bottom-end",
             preventOverflow: true,
@@ -17,14 +50,15 @@ export const ReportExportMenu = ({ options, isLoading = false, loadingLabel = nu
             setIsDropdownOpen(isOpen);
         }, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: () => {
                 setIsDropdownOpen((open) => !open);
-            }, isExpanded: isDropdownOpen, variant: "secondary", isDisabled: isLoading || isDisabled, "aria-label": "Export report options", icon: isLoading ? (_jsx(Spinner, { size: "sm", "aria-hidden": "true" })) : (_jsx(DownloadIcon, { "aria-hidden": "true" })), children: isLoading ? (loadingLabel ?? "Generating...") : toggleLabel })), children: _jsx(DropdownList, { children: options.map((option) => (_jsx(DropdownItem, { isDisabled: option.isDisabled, description: option.description, onClick: option.onSelect, children: option.label }, option.key))) }) }));
+            }, isExpanded: isDropdownOpen, variant: "secondary", isDisabled: isLoading || isDisabled, "aria-label": "Export report options", icon: isLoading ? (_jsx(Spinner, { size: "sm", "aria-hidden": "true" })) : (_jsx(DownloadIcon, { "aria-hidden": "true" })), children: isLoading ? (loadingLabel ?? "Generating...") : toggleLabel })), children: _jsx(DropdownList, { children: menuItems }) }));
 };
 ReportExportMenu.displayName = "ReportExportMenu";
-export const ExportReportButton = ({ onExportPdf, onExportPng, onExportHtml, extraOptions = [], ...menuProps }) => (_jsx(ReportExportMenu, { options: [
+export const ExportReportButton = ({ onExportPdf, onExportPng, onExportHtml, extraOptions = [], assessmentSectionLabel, ...menuProps }) => (_jsx(ReportExportMenu, { options: [
         ...standardReportExportOptions({
             onExportPdf,
             onExportPng,
             onExportHtml,
+            assessmentSectionLabel,
         }),
         ...extraOptions,
     ], ...menuProps }));

package/dist/report/StorageOverview.d.ts

@@ -0,0 +1,27 @@
+import type { FC } from "react";
+import { type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+export interface StorageDiskTierData {
+    vmCount?: number;
+    totalSizeTB?: number;
+}
+export interface StorageOverviewProps {
+    diskSizeTier?: Record<string, StorageDiskTierData>;
+    diskTypes?: Record<string, StorageDiskTierData>;
+    totalVMs?: number;
+    totalWithSharedDisks?: number;
+    /**
+     * Disk-tier slice / center-title click. The argument is the tier's parsed
+     * disk-size range (in MB). Agent-ui maps it to a VM disk filter; ui-app omits
+     * it. Called with `undefined` for the center-title click (no tier filter).
+     */
+    onDiskTierSelect?: (diskRange: {
+        min: number;
+        max?: number;
+    }) => void;
+    /** Center-title click. Agent-ui opens the VM list with no extra filters. */
+    onTitleClick?: () => void;
+    /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+    legendVariant?: MigrationDonutChartLegendVariant;
+}
+export declare const StorageOverview: FC<StorageOverviewProps>;
+//# sourceMappingURL=StorageOverview.d.ts.map

package/dist/report/StorageOverview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorageOverview.d.ts","sourceRoot":"","sources":["../../src/report/StorageOverview.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAErC,OAAO,EAGL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAQ1C,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACtE,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,qDAAqD;IACrD,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AA0TD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA8QpD,CAAC"}

package/dist/report/StorageOverview.js

@@ -0,0 +1,331 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card, CardBody, CardTitle, Content, Dropdown, DropdownItem, DropdownList, Flex, FlexItem, MenuToggle, } from "@patternfly/react-core";
+import { DatabaseIcon } from "@patternfly/react-icons";
+import { chart_color_blue_300, chart_color_green_300, chart_color_orange_200, chart_color_purple_100, chart_color_purple_300, chart_color_red_orange_300, chart_color_teal_200, chart_color_teal_300, chart_color_yellow_400, } from "@patternfly/react-tokens";
+import { useMemo, useState } from "react";
+import { MigrationDonutChart, } from "../charts/MigrationDonutChart.js";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { chartExportViewsFromLabels } from "./chartExport.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+const VIEW_MODE_LABELS = {
+    totalSize: "Total disk size by tier",
+    vmCount: "VM count by disk size tier",
+    vmCountByDiskType: "VM count by disk type",
+    sharedDisks: "Shared disks VS. No shared disks",
+};
+const CHART_ID = "storage-overview";
+const CHART_TITLE = "Storage";
+const TIER_CONFIG = {
+    Easy: { order: 0, label: "0-10 TB", legendCategory: "Easy" },
+    Medium: { order: 1, label: "11-20 TB", legendCategory: "Medium" },
+    Hard: { order: 2, label: "21-50 TB", legendCategory: "Hard" },
+    White: { order: 3, label: "> 50 TB", legendCategory: "White glove" },
+};
+/**
+ * Categorical order shared by the agent-ui and ui-app storage donuts, mapped
+ * onto PatternFly `chart_color_*` tokens.
+ */
+const COLOR_PALETTE = [
+    chart_color_blue_300.value,
+    chart_color_purple_300.value,
+    chart_color_purple_100.value,
+    chart_color_teal_300.value,
+    chart_color_yellow_400.value,
+    chart_color_green_300.value,
+    chart_color_orange_200.value,
+    chart_color_red_orange_300.value,
+];
+const DISK_TYPE_BAR_COLORS = [
+    chart_color_blue_300.value,
+    chart_color_purple_300.value,
+    chart_color_purple_100.value,
+    chart_color_yellow_400.value,
+    chart_color_teal_200.value,
+];
+const SHARED_DISKS_COLORS = {
+    "With shared disks": chart_color_yellow_400.value,
+    "No shared disks": chart_color_blue_300.value,
+};
+const DISK_TYPE_PREFERRED_ORDER = ["VMFS", "NFS", "vSAN", "RDM", "vVols"];
+// --- Disk-tier label parsing (self-contained copy so the shared card does not
+// depend on agent-ui internals). Used for both tier ordering and drill-down. ---
+const MB_IN_GIB = 1024;
+const MB_IN_TIB = 1024 * 1024;
+const diskSizeRanges = [
+    { label: "0-100GiB", min: 0, max: 100 * MB_IN_GIB },
+    { label: "100-500GiB", min: 100 * MB_IN_GIB, max: 500 * MB_IN_GIB },
+    { label: "500GiB-1TiB", min: 500 * MB_IN_GIB, max: MB_IN_TIB },
+    { label: "1-2TiB", min: MB_IN_TIB, max: 2 * MB_IN_TIB },
+    { label: "2-5TiB", min: 2 * MB_IN_TIB, max: 5 * MB_IN_TIB },
+];
+const legacyDiskSizeRanges = [
+    { label: "0-10 TB", min: 0, max: 10 * MB_IN_TIB },
+    { label: "11-20 TB", min: 10 * MB_IN_TIB + 1, max: 20 * MB_IN_TIB },
+    { label: "21-50 TB", min: 20 * MB_IN_TIB + 1, max: 50 * MB_IN_TIB },
+    { label: "50+ TB", min: 50 * MB_IN_TIB + 1, max: undefined },
+];
+const sizeValueToMB = (value, unit) => {
+    const amount = Number.parseFloat(value);
+    if (!Number.isFinite(amount)) {
+        return Number.NaN;
+    }
+    switch (unit.toLowerCase()) {
+        case "gib":
+        case "gb":
+            return amount * MB_IN_GIB;
+        case "tib":
+        case "tb":
+            return amount * MB_IN_TIB;
+        case "mib":
+        case "mb":
+            return amount;
+        default:
+            return Number.NaN;
+    }
+};
+/** Parses inventory disk tier labels (GiB/TiB or legacy TB buckets) into MB ranges. */
+const parseDiskTierLabelToRange = (label) => {
+    const normalized = label.trim();
+    if (!normalized) {
+        return undefined;
+    }
+    const predefined = diskSizeRanges.find((range) => range.label === normalized) ??
+        legacyDiskSizeRanges.find((range) => range.label === normalized ||
+            (normalized === "> 50 TB" && range.label === "50+ TB"));
+    if (predefined) {
+        return { min: predefined.min, max: predefined.max };
+    }
+    const mixedUnitRange = /^(\d+(?:\.\d+)?)\s*(GiB|TiB|GB|TB|MIB|MB)\s*-\s*(\d+(?:\.\d+)?)\s*(GiB|TiB|GB|TB|MIB|MB)$/i.exec(normalized);
+    if (mixedUnitRange) {
+        const min = sizeValueToMB(mixedUnitRange[1], mixedUnitRange[2]);
+        const max = sizeValueToMB(mixedUnitRange[3], mixedUnitRange[4]);
+        if (Number.isFinite(min) && Number.isFinite(max)) {
+            return { min: Math.floor(min), max: Math.floor(max) };
+        }
+    }
+    const singleUnitRange = /^(\d+(?:\.\d+)?)\s*-\s*(\d+(?:\.\d+)?)\s*(GiB|TiB|GB|TB|MIB|MB)$/i.exec(normalized);
+    if (singleUnitRange) {
+        const min = sizeValueToMB(singleUnitRange[1], singleUnitRange[3]);
+        const max = sizeValueToMB(singleUnitRange[2], singleUnitRange[3]);
+        if (Number.isFinite(min) && Number.isFinite(max)) {
+            return { min: Math.floor(min), max: Math.floor(max) };
+        }
+    }
+    const openEndedRange = /^(\d+(?:\.\d+)?)\s*(GiB|TiB|GB|TB|MIB|MB)?\s*\+$/i.exec(normalized);
+    if (openEndedRange) {
+        const unit = openEndedRange[2] || "TB";
+        const min = sizeValueToMB(openEndedRange[1], unit);
+        if (Number.isFinite(min)) {
+            const minMB = Math.floor(min);
+            return { min: minMB > 0 ? minMB + 1 : minMB, max: undefined };
+        }
+    }
+    return undefined;
+};
+const buildTierChartData = (summary, selector) => {
+    if (!summary) {
+        return [];
+    }
+    const getTierPrefix = (key) => {
+        const normalizedKey = key.trim().toLowerCase();
+        for (const prefix of Object.keys(TIER_CONFIG)) {
+            if (normalizedKey.startsWith(prefix.toLowerCase())) {
+                return prefix;
+            }
+        }
+        return null;
+    };
+    return Object.entries(summary)
+        .map(([key, tier]) => {
+        const prefix = getTierPrefix(key);
+        const display = prefix
+            ? TIER_CONFIG[prefix]
+            : { label: key, legendCategory: key };
+        const { count, countDisplay } = selector(tier);
+        const label = display.label;
+        return {
+            name: label,
+            count,
+            countDisplay,
+            legendCategory: display.legendCategory,
+            diskRange: parseDiskTierLabelToRange(key) ?? parseDiskTierLabelToRange(label),
+            sortOrder: parseDiskTierLabelToRange(key)?.min ??
+                parseDiskTierLabelToRange(label)?.min ??
+                (prefix ? TIER_CONFIG[prefix].order : 999),
+        };
+    })
+        .sort((a, b) => a.sortOrder - b.sortOrder)
+        .map(({ sortOrder: _sortOrder, ...datum }) => datum);
+};
+const getContrastColor = (hexColor) => {
+    const hex = hexColor.replace("#", "");
+    const r = Number.parseInt(hex.substring(0, 2), 16);
+    const g = Number.parseInt(hex.substring(2, 4), 16);
+    const b = Number.parseInt(hex.substring(4, 6), 16);
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.5 ? "#000" : "#fff";
+};
+const DiskTypeBarChart = ({ data, colors }) => {
+    const maxCount = useMemo(() => (data.length > 0 ? Math.max(...data.map((d) => d.count)) : 0), [data]);
+    if (data.length === 0) {
+        return _jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.diskTypes });
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: dashboardStyles.storageChartWrapper, children: _jsx(Flex, { direction: { default: "row" }, alignItems: { default: "alignItemsFlexEnd" }, justifyContent: { default: "justifyContentCenter" }, spaceItems: { default: "spaceItemsMd" }, style: { height: "250px", width: "100%" }, children: data.map((item, index) => {
+                        const heightPercentage = maxCount > 0 ? (item.count / maxCount) * 100 : 0;
+                        const minHeight = item.count > 0 ? 10 : 0;
+                        const barColor = colors[index % colors.length];
+                        const textColor = getContrastColor(barColor);
+                        return (_jsxs(Flex, { direction: { default: "column" }, alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, style: { flex: "1", maxWidth: "120px" }, children: [_jsx(FlexItem, { style: {
+                                        height: "200px",
+                                        display: "flex",
+                                        alignItems: "flex-end",
+                                        width: "100%",
+                                        justifyContent: "center",
+                                    }, children: _jsx("div", { style: {
+                                            width: "40px",
+                                            height: `${Math.max(heightPercentage, minHeight)}%`,
+                                            backgroundColor: barColor,
+                                            transition: "height 0.3s ease",
+                                            borderRadius: "4px 4px 0 0",
+                                            display: "flex",
+                                            alignItems: "flex-start",
+                                            justifyContent: "center",
+                                            paddingTop: "4px",
+                                        }, title: `${item.name}: ${item.count} VMs`, children: _jsx(Content, { component: "small", style: {
+                                                color: textColor,
+                                                fontWeight: "bold",
+                                                fontSize: "10px",
+                                            }, children: item.count }) }) }), _jsx(FlexItem, { children: _jsx(Content, { component: "small", style: {
+                                            fontSize: "12px",
+                                            textAlign: "center",
+                                            wordBreak: "break-word",
+                                        }, children: item.name }) })] }, item.name));
+                    }) }) }), _jsx(Content, { component: "small", className: dashboardStyles.storageTotalsNote, children: "Totals may exceed the unique VM count because individual VMs can have multiple disk types" })] }));
+};
+const isViewMode = (value) => value === "totalSize" ||
+    value === "vmCount" ||
+    value === "vmCountByDiskType" ||
+    value === "sharedDisks";
+export const StorageOverview = ({ diskSizeTier = {}, diskTypes = {}, totalVMs, totalWithSharedDisks, onDiskTierSelect, onTitleClick, legendVariant = "html", }) => {
+    const [viewMode, setViewMode] = useState("vmCount");
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const totals = useMemo(() => Object.values(diskSizeTier).reduce((acc, tier) => ({
+        totalSize: acc.totalSize + (tier?.totalSizeTB || 0),
+        totalVMs: acc.totalVMs + (tier?.vmCount || 0),
+    }), { totalSize: 0, totalVMs: 0 }), [diskSizeTier]);
+    const chartData = useMemo(() => buildTierChartData(diskSizeTier, (tier) => {
+        const count = viewMode === "totalSize"
+            ? tier?.totalSizeTB || 0
+            : tier?.vmCount || 0;
+        return {
+            count,
+            countDisplay: viewMode === "totalSize" ? `${count.toFixed(2)}` : `${count}`,
+        };
+    }), [diskSizeTier, viewMode]);
+    const diskTypeChartData = useMemo(() => {
+        if (Object.keys(diskTypes).length === 0) {
+            return [];
+        }
+        const orderIndex = (name) => {
+            const idx = DISK_TYPE_PREFERRED_ORDER.indexOf(name);
+            return idx === -1 ? Number.MAX_SAFE_INTEGER : idx;
+        };
+        return Object.entries(diskTypes)
+            .map(([diskTypeName, summary]) => ({
+            name: diskTypeName,
+            count: summary?.vmCount || 0,
+        }))
+            .sort((a, b) => orderIndex(a.name) - orderIndex(b.name));
+    }, [diskTypes]);
+    const isSharedDisksViewAvailable = totalWithSharedDisks !== 0;
+    // Exclude the "Shared disks" view from the chart export cycle (used to
+    // build the PDF/PNG/HTML exports) when that view is disabled in the
+    // dropdown, so the exported report stays consistent with what's
+    // selectable on screen.
+    const availableExportViewLabels = useMemo(() => {
+        if (isSharedDisksViewAvailable) {
+            return VIEW_MODE_LABELS;
+        }
+        const { sharedDisks: _sharedDisks, ...rest } = VIEW_MODE_LABELS;
+        return rest;
+    }, [isSharedDisksViewAvailable]);
+    const sharedDisksChartData = useMemo(() => {
+        if (totalWithSharedDisks === undefined ||
+            totalVMs === undefined ||
+            totalWithSharedDisks === 0) {
+            return null;
+        }
+        const withSharedDisks = Math.min(totalWithSharedDisks, totalVMs);
+        const withoutSharedDisks = Math.max(0, totalVMs - withSharedDisks);
+        return [
+            {
+                name: "With shared disks",
+                count: withSharedDisks,
+                countDisplay: `${withSharedDisks}`,
+                legendCategory: "With shared disks",
+            },
+            {
+                name: "No shared disks",
+                count: withoutSharedDisks,
+                countDisplay: `${withoutSharedDisks}`,
+                legendCategory: "No shared disks",
+            },
+        ];
+    }, [totalVMs, totalWithSharedDisks]);
+    const tierLegend = useMemo(() => {
+        const legendMap = {};
+        chartData.forEach((slice, idx) => {
+            const color = COLOR_PALETTE[idx % COLOR_PALETTE.length];
+            if (color) {
+                legendMap[slice.legendCategory] = color;
+            }
+        });
+        return legendMap;
+    }, [chartData]);
+    const commonDonutProps = {
+        height: 300,
+        width: 420,
+        donutThickness: 18,
+        titleFontSize: 34,
+        subTitleColor: "var(--pf-t--global--text--color--subtle)",
+        legendVariant,
+    };
+    const handleDiskTierClick = (item) => {
+        const diskRange = item.diskRange ??
+            parseDiskTierLabelToRange(item.name) ??
+            parseDiskTierLabelToRange(item.legendCategory);
+        if (diskRange) {
+            onDiskTierSelect?.(diskRange);
+        }
+    };
+    const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+    return (_jsx(ChartExportSurface, { id: CHART_ID, title: chartTitle, exportViews: chartExportViewsFromLabels(CHART_TITLE, availableExportViewLabels), activeExportViewId: viewMode, onExportViewChange: (viewId) => {
+            if (isViewMode(viewId)) {
+                setViewMode(viewId);
+            }
+        }, children: _jsxs(Card, { className: `${dashboardStyles.card} ${dashboardStyles.storageCardOverflowHidden}`, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, className: dashboardStyles.storageFlexFullWidth, children: [_jsxs(FlexItem, { children: [_jsx(DatabaseIcon, {}), " Disks"] }), _jsx(ChartHeaderActions, { chartId: CHART_ID, title: chartTitle, children: _jsx(Dropdown, { isOpen: isDropdownOpen, onSelect: (_event, value) => {
+                                        if (isViewMode(value)) {
+                                            setViewMode(value);
+                                        }
+                                        setIsDropdownOpen(false);
+                                    }, onOpenChange: setIsDropdownOpen, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: () => setIsDropdownOpen((open) => !open), isExpanded: isDropdownOpen, className: dashboardStyles.storageMenuToggleMinWidth, children: VIEW_MODE_LABELS[viewMode] })), children: _jsxs(DropdownList, { children: [_jsx(DropdownItem, { value: "vmCount", children: VIEW_MODE_LABELS.vmCount }, "vmCount"), _jsx(DropdownItem, { value: "vmCountByDiskType", children: VIEW_MODE_LABELS.vmCountByDiskType }, "vmCountByDiskType"), _jsx(DropdownItem, { value: "totalSize", children: VIEW_MODE_LABELS.totalSize }, "totalSize"), _jsx(DropdownItem, { value: "sharedDisks", isDisabled: totalWithSharedDisks !== undefined &&
+                                                    totalWithSharedDisks === 0, children: VIEW_MODE_LABELS.sharedDisks }, "sharedDisks")] }) }) })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: viewMode === "vmCountByDiskType" ? (_jsx(DiskTypeBarChart, { data: diskTypeChartData, colors: DISK_TYPE_BAR_COLORS })) : viewMode === "sharedDisks" ? (sharedDisksChartData && totalVMs !== undefined ? (_jsx(MigrationDonutChart, { ...commonDonutProps, data: sharedDisksChartData.map((item) => ({
+                            ...item,
+                            countDisplay: `${item.countDisplay} VMs`,
+                        })), customColors: SHARED_DISKS_COLORS, title: `${totalVMs} VMs`, subTitle: `${totalWithSharedDisks ?? 0} with shared disks`, marginLeft: "25%", tooltipLabelFormatter: ({ datum, percent }) => `${datum.x}: ${datum.countDisplay}\n${percent.toFixed(1)}%` })) : (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.storage }))) : chartData.length === 0 ? (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.storage })) : (_jsx(MigrationDonutChart, { ...commonDonutProps, data: chartData.map((item) => ({
+                            ...item,
+                            countDisplay: viewMode === "totalSize"
+                                ? `${item.countDisplay} TB`
+                                : `${item.countDisplay} VMs`,
+                        })), legend: tierLegend, title: viewMode === "totalSize"
+                            ? `${totals.totalSize.toFixed(2)} TB`
+                            : `${totals.totalVMs} VMs`, subTitle: viewMode === "totalSize"
+                            ? `${totals.totalVMs} VMs`
+                            : `${totals.totalSize.toFixed(2)} TB`, legendLabelFormatter: ({ x, countDisplay }) => `${x} (${countDisplay})`, tooltipLabelFormatter: ({ datum, percent }) => `${datum.x}: ${datum.countDisplay}\n${percent.toFixed(1)}%`, onItemClick: viewMode === "vmCount" || viewMode === "totalSize"
+                            ? handleDiskTierClick
+                            : undefined, onTitleClick: onTitleClick })) })] }) }));
+};
+StorageOverview.displayName = "StorageOverview";