@openshift-migration-advisor/shared-components 0.22.0-dd51551836b7 → 0.23.0

package/dist/charts/MigrationDonutChart.d.ts

@@ -15,6 +15,7 @@ export interface MigrationDonutChartDatum {
     clusterNames?: string[];
     networkNames?: string[];
 }
+export type MigrationDonutChartLegendVariant = "html" | "chart";
 export interface MigrationDonutChartProps {
     data: MigrationDonutChartDatum[];
     legend?: Record<string, string>;
@@ -40,13 +41,29 @@ export interface MigrationDonutChartProps {
         percent: number;
         total: number;
     }) => string;
+    /** Agent-ui: slice / legend click drill-down. */
     onItemClick?: (item: MigrationDonutChartDatum) => void;
+    /** Agent-ui: clickable center title overlay. */
     onTitleClick?: () => void;
-    /** When set, used for legend label instead of "name (countDisplay)". */
+    /** Agent-ui: custom HTML legend labels (ignored when legendVariant is "chart"). */
     legendLabelFormatter?: (item: {
         x: string;
         countDisplay?: string | number;
     }) => string;
+    /**
+     * Legend rendering mode.
+     * - `"html"` (default): custom clickable legend used by agent-ui
+     * - `"chart"`: PatternFly ChartLegend used by ui-app
+     */
+    legendVariant?: MigrationDonutChartLegendVariant;
+    /** ui-app ChartLegend: total legend width. */
+    legendWidth?: number;
+    /** ui-app ChartLegend: columns per row. */
+    itemsPerRow?: number;
+    /** ui-app ChartLegend: label font size. */
+    labelFontSize?: number;
+    /** Prefer themed Victory ChartTooltip (default true for chart legend). */
+    useThemedTooltip?: boolean;
 }
 export declare const MigrationDonutChart: FC<MigrationDonutChartProps>;
 export default MigrationDonutChart;

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

@@ -1 +1 @@
-{"version":3,"file":"MigrationDonutChart.d.ts","sourceRoot":"","sources":["../../src/charts/MigrationDonutChart.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,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,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,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACvD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,wEAAwE;IACxE,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC5B,CAAC,EAAE,MAAM,CAAC;QACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAChC,KAAK,MAAM,CAAC;CACd;AAkDD,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAkS5D,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;AA8ED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAiX5D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/charts/MigrationDonutChart.js

@@ -6,11 +6,35 @@ import { css } from "@emotion/css";
 // "@patternfly/react-charts/victory" subpath has no exports map entry and
 // resolves to a directory, which webpack refuses under fully-specified —
 // breaking the ui-app federated build.
-import { ChartDonut, ChartLabel, } from "@patternfly/react-charts/dist/esm/victory/index.js";
-import { EmptyState, EmptyStateVariant, Flex, FlexItem, } from "@patternfly/react-core";
-import { InboxIcon } from "@patternfly/react-icons";
+import { ChartDonut, ChartLabel, ChartLegend, ChartTooltip, } from "@patternfly/react-charts/dist/esm/victory/index.js";
+import { Flex, FlexItem } from "@patternfly/react-core";
 import { useCallback, useMemo } from "react";
-const legendColors = ["#0066cc", "#5e40be", "#b6a6e9", "#b98412"];
+const legendColors = [
+    "#0066cc",
+    "#5e40be",
+    "#009596",
+    "#4cb140",
+    "#f0ab00",
+    "#b98412",
+    "#a30000",
+    "#b6a6e9",
+];
+/** Victory chart tooltips that respect PatternFly light/dark themes. */
+const themedChartTooltipStyle = {
+    fontSize: 9,
+    fill: "var(--pf-t--global--text--color--regular)",
+};
+const themedChartTooltipFlyoutStyle = {
+    stroke: "var(--pf-t--global--border--color--default)",
+    strokeWidth: 1,
+    fill: "var(--pf-t--global--background--color--floating--default)",
+};
+const themedChartTooltipFlyoutPadding = {
+    top: 6,
+    bottom: 6,
+    left: 10,
+    right: 10,
+};
 const styles = {
     legendIcon: css `
     margin-right: 4px;
@@ -56,21 +80,25 @@ const styles = {
     padding: var(--pf-t--global--spacer--ml);
   `,
 };
-export const MigrationDonutChart = ({ data, legend, customColors, height = 260, width = 420, title, subTitle, titleColor = "#000000", subTitleColor = "#000000", marginLeft = "0%", titleFontSize = 28, subTitleFontSize = 14, donutThickness = 45, padAngle = 1, tooltipLabelFormatter, onItemClick, onTitleClick, legendLabelFormatter, }) => {
+export const MigrationDonutChart = ({ data, legend, customColors, height = 260, width = 420, title, subTitle, titleColor = "var(--pf-t--global--text--color--regular)", subTitleColor = "var(--pf-t--global--text--color--subtle)", marginLeft = "0%", titleFontSize = 28, subTitleFontSize = 14, donutThickness = 45, padAngle = 1, tooltipLabelFormatter, onItemClick, onTitleClick, legendLabelFormatter, legendVariant = "html", legendWidth, itemsPerRow = 1, labelFontSize = 25, useThemedTooltip, }) => {
+    const showChartLegend = legendVariant === "chart";
+    const themedTooltipEnabled = useThemedTooltip ?? showChartLegend;
     const dynamicLegend = useMemo(() => {
-        return data.reduce((acc, current) => {
-            const key = `${current.legendCategory}`;
-            if (!acc.seen.has(key)) {
-                acc.seen.add(key);
-                const color = customColors?.[key] ??
-                    legendColors[(acc.seen.size - 1) % legendColors.length];
-                acc.result.push({ [key]: color });
+        const legendMap = {};
+        const seen = new Set();
+        for (const item of data) {
+            const key = item.legendCategory;
+            if (!seen.has(key)) {
+                seen.add(key);
+                legendMap[key] =
+                    customColors?.[key] ??
+                        legendColors[(seen.size - 1) % legendColors.length];
             }
-            return acc;
-        }, { seen: new Set(), result: [] }).result;
+        }
+        return legendMap;
     }, [data, customColors]);
-    const chartLegend = legend ? legend : Object.assign({}, ...dynamicLegend);
-    const getColor = useCallback((name) => chartLegend[name], [chartLegend]);
+    const chartLegend = legend ?? dynamicLegend;
+    const getColor = useCallback((name) => chartLegend[name] ?? legendColors[0], [chartLegend]);
     const chartData = useMemo(() => {
         return data.map((item) => ({
             x: item.name,
@@ -82,6 +110,29 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
     const colorScale = useMemo(() => {
         return chartData.map((item) => getColor(item.legendCategory));
     }, [chartData, getColor]);
+    const legendData = useMemo(() => {
+        return chartData.map((item) => ({
+            name: `${item.x} (${item.countDisplay})`,
+            symbol: { fill: getColor(item.legendCategory) },
+        }));
+    }, [chartData, getColor]);
+    const legendWidthValue = legendWidth ?? 800;
+    const legendX = useMemo(() => {
+        const symbolAndGap = 34;
+        const charWidth = labelFontSize * 0.55;
+        const itemWidths = legendData.map((d) => symbolAndGap + d.name.length * charWidth);
+        const numCols = Math.min(legendData.length, itemsPerRow);
+        const gutter = 16;
+        let contentWidth = (numCols - 1) * gutter;
+        for (let c = 0; c < numCols; c++) {
+            let maxW = 0;
+            for (let i = c; i < itemWidths.length; i += itemsPerRow) {
+                maxW = Math.max(maxW, itemWidths[i] ?? 0);
+            }
+            contentWidth += maxW;
+        }
+        return Math.max(0, (legendWidthValue - contentWidth) / 2);
+    }, [legendData, itemsPerRow, legendWidthValue, labelFontSize]);
     const innerRadius = useMemo(() => {
         const outerApprox = Math.min(width, height) / 2;
         const computed = outerApprox - donutThickness;
@@ -130,24 +181,42 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
             },
         ];
     }, [onItemClick, handleClick]);
+    const donutTooltip = useMemo(() => themedTooltipEnabled ? (_jsx(ChartTooltip, { style: themedChartTooltipStyle, flyoutStyle: themedChartTooltipFlyoutStyle, flyoutPadding: themedChartTooltipFlyoutPadding })) : undefined, [themedTooltipEnabled]);
+    const formatLabel = useCallback((datum) => {
+        const percent = totalY > 0 ? (Number(datum.y) / totalY) * 100 : 0;
+        return tooltipLabelFormatter
+            ? tooltipLabelFormatter({
+                datum: {
+                    x: datum.x,
+                    y: Number(datum.y),
+                    countDisplay: datum.countDisplay,
+                    legendCategory: datum.legendCategory,
+                },
+                percent,
+                total: totalY,
+            })
+            : `${datum.x}: ${datum.countDisplay ?? datum.y}`;
+    }, [tooltipLabelFormatter, totalY]);
     if (!data || data.length === 0) {
-        return (_jsx(EmptyState, { headingLevel: "h3", titleText: "No data available", icon: InboxIcon, variant: EmptyStateVariant.xs }));
+        return null;
     }
-    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, labels: ({ datum, }) => {
-                            const percent = totalY > 0 ? (Number(datum.y) / totalY) * 100 : 0;
-                            return tooltipLabelFormatter
-                                ? tooltipLabelFormatter({
-                                    datum: {
-                                        x: datum.x,
-                                        y: Number(datum.y),
-                                        countDisplay: datum.countDisplay,
-                                        legendCategory: datum.legendCategory,
-                                    },
-                                    percent,
-                                    total: totalY,
-                                })
-                                : `${datum.x}: ${datum.countDisplay ?? datum.y}`;
-                        }, colorScale: colorScale, constrainToVisibleArea: true, innerRadius: innerRadius, padAngle: padAngle, title: title, subTitle: subTitle, height: height, width: width, padding: {
+    const htmlLegend = (_jsx(Flex, { className: `${styles.legendContainer} ${css `margin-left: ${marginLeft};`}`, justifyContent: { default: "justifyContentCenter" }, alignItems: { default: "alignItemsFlexStart" }, children: _jsx(Flex, { className: styles.legendInner, spaceItems: { default: "spaceItemsMd" }, justifyContent: { default: "justifyContentCenter" }, alignItems: { default: "alignItemsCenter" }, flexWrap: { default: "wrap" }, children: data.map((item) => {
+                const label = legendLabelFormatter
+                    ? legendLabelFormatter({
+                        x: item.name,
+                        countDisplay: item.countDisplay,
+                    })
+                    : item.name;
+                const content = (_jsxs(_Fragment, { children: [_jsxs("svg", { width: "10", height: "10", "aria-hidden": "true", className: styles.legendIcon, children: [_jsx("title", { children: "Legend color indicator" }), _jsx("rect", { width: "10", height: "10", fill: getColor(item.legendCategory) })] }), _jsx("span", { children: label })] }));
+                return (_jsx(FlexItem, { children: onItemClick ? (_jsx("button", { type: "button", onClick: () => onItemClick(item), className: styles.legendButton, children: content })) : (_jsx("span", { className: styles.legendLabel, children: content })) }, `${item.legendCategory}-${item.name}`));
+            }) }) }));
+    const chartLegendElement = (_jsx(FlexItem, { flex: { default: "flex_1" }, children: _jsx(Flex, { justifyContent: { default: "justifyContentCenter" }, alignItems: { default: "alignItemsCenter" }, children: _jsx(FlexItem, { children: _jsx(ChartLegend, { data: legendData, orientation: "horizontal", height: 200, width: legendWidthValue, x: legendX, itemsPerRow: itemsPerRow, style: {
+                        labels: {
+                            fontSize: labelFontSize,
+                            fill: "var(--pf-t--global--text--color--regular)",
+                        },
+                    } }) }) }) }));
+    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: {
                             bottom: 5,
                             left: 20,
                             right: 20,
@@ -158,7 +227,7 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
                                     fontSize: titleFontSize,
                                     fontWeight: "bold",
                                 },
-                            ] })) : undefined, subTitleComponent: subTitle ? (_jsx(ChartLabel, { style: [
+                            ] })) : undefined, subTitleComponent: subTitle ? (_jsx(ChartLabel, { dy: showChartLegend ? 7 : undefined, style: [
                                 {
                                     fill: subTitleColor,
                                     fontSize: subTitleFontSize,
@@ -178,15 +247,6 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
                                 e.preventDefault();
                                 onTitleClick();
                             }
-                        } }))] }), _jsx(Flex, { className: `${styles.legendContainer} ${css `margin-left: ${marginLeft};`}`, justifyContent: { default: "justifyContentCenter" }, alignItems: { default: "alignItemsFlexStart" }, children: _jsx(Flex, { className: styles.legendInner, spaceItems: { default: "spaceItemsMd" }, justifyContent: { default: "justifyContentCenter" }, alignItems: { default: "alignItemsCenter" }, flexWrap: { default: "wrap" }, children: data.map((item) => {
-                        const label = legendLabelFormatter
-                            ? legendLabelFormatter({
-                                x: item.name,
-                                countDisplay: item.countDisplay,
-                            })
-                            : item.name;
-                        const content = (_jsxs(_Fragment, { children: [_jsxs("svg", { width: "10", height: "10", "aria-hidden": "true", className: styles.legendIcon, children: [_jsx("title", { children: "Legend color indicator" }), _jsx("rect", { width: "10", height: "10", fill: getColor(item.legendCategory) })] }), _jsx("span", { children: label })] }));
-                        return (_jsx(FlexItem, { children: onItemClick ? (_jsx("button", { type: "button", onClick: () => onItemClick(item), className: styles.legendButton, children: content })) : (_jsx("span", { className: styles.legendLabel, children: content })) }, `${item.legendCategory}-${item.name}`));
-                    }) }) })] }));
+                        } }))] }), showChartLegend ? chartLegendElement : htmlLegend] }));
 };
 export default MigrationDonutChart;

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

@@ -1 +1 @@
-{"version":3,"file":"OsSupportTiersHelpPopover.d.ts","sourceRoot":"","sources":["../../src/report/OsSupportTiersHelpPopover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAwEhC,eAAO,MAAM,yBAAyB,EAAE,EASvC,CAAC"}
+{"version":3,"file":"OsSupportTiersHelpPopover.d.ts","sourceRoot":"","sources":["../../src/report/OsSupportTiersHelpPopover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAyEhC,eAAO,MAAM,yBAAyB,EAAE,EASvC,CAAC"}

package/dist/report/OsSupportTiersHelpPopover.js

@@ -32,6 +32,6 @@ const learnMoreLinkStyle = css `
   gap: var(--pf-t--global--spacer--xs);
   margin-top: var(--pf-t--global--spacer--400);
 `;
-const OsSupportTiersHelpBody = () => (_jsxs("div", { children: [_jsx("ul", { className: tierListStyle, children: ORDERED_SUPPORT_TIERS.map((tier) => (_jsxs("li", { className: tierItemStyle, children: [_jsx(Label, { className: tierBadgeStyle, color: getSupportTierBadgeColor(tier), isCompact: true, children: getSupportTierLegendLabel(tier) }), _jsx("p", { className: tierDescriptionStyle, children: getSupportTierDefinition(tier) })] }, tier))) }), _jsxs("a", { className: learnMoreLinkStyle, href: SUPPORT_TIER_LEARN_MORE_URL, target: "_blank", rel: "noopener noreferrer", children: ["Learn more ", _jsx(ExternalLinkAltIcon, {})] })] }));
+const OsSupportTiersHelpBody = () => (_jsxs("div", { children: [_jsx("ul", { className: tierListStyle, children: ORDERED_SUPPORT_TIERS.map((tier) => (_jsxs("li", { className: tierItemStyle, children: [_jsx(Label, { className: tierBadgeStyle, color: getSupportTierBadgeColor(tier), isCompact: true, children: getSupportTierLegendLabel(tier) }), _jsx("p", { className: tierDescriptionStyle, children: getSupportTierDefinition(tier) })] }, tier))) }), _jsxs("a", { "aria-label": "Learn more about operating system support tiers", className: learnMoreLinkStyle, href: SUPPORT_TIER_LEARN_MORE_URL, target: "_blank", rel: "noopener noreferrer", children: ["Learn more ", _jsx(ExternalLinkAltIcon, {})] })] }));
 export const OsSupportTiersHelpPopover = () => (_jsx(PopoverIcon, { noVerticalAlign: true, maxWidth: "40rem", headerContent: "Guest OS support tiers", bodyContent: _jsx(OsSupportTiersHelpBody, {}), buttonOuiaId: "guest-os-support-tiers-help", "aria-label": "Guest OS support tiers help" }));
 OsSupportTiersHelpPopover.displayName = "OsSupportTiersHelpPopover";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openshift-migration-advisor/shared-components",
-  "version": "0.22.0-dd51551836b7",
+  "version": "0.23.0",
   "description": "Shared React UI components for Migration Advisor apps (report charts, forms, OS support tiers)",
   "author": "Montse Ortega <mortegag@redhat.com>",
   "license": "Apache-2.0",

package/src/charts/MigrationDonutChart.tsx

@@ -8,15 +8,11 @@ import { css } from "@emotion/css";
 import {
   ChartDonut,
   ChartLabel,
+  ChartLegend,
+  ChartTooltip,
 } from "@patternfly/react-charts/dist/esm/victory/index.js";
-import {
-  EmptyState,
-  EmptyStateVariant,
-  Flex,
-  FlexItem,
-} from "@patternfly/react-core";
-import { InboxIcon } from "@patternfly/react-icons";
-import type { FC } from "react";
+import { Flex, FlexItem } from "@patternfly/react-core";
+import type { FC, ReactElement } from "react";
 import { useCallback, useMemo } from "react";
 
 export interface MigrationDonutChartDatum {
@@ -30,6 +26,8 @@ export interface MigrationDonutChartDatum {
   networkNames?: string[];
 }
 
+export type MigrationDonutChartLegendVariant = "html" | "chart";
+
 export interface MigrationDonutChartProps {
   data: MigrationDonutChartDatum[];
   legend?: Record<string, string>;
@@ -55,16 +53,60 @@ export interface MigrationDonutChartProps {
     percent: number;
     total: number;
   }) => string;
+  /** Agent-ui: slice / legend click drill-down. */
   onItemClick?: (item: MigrationDonutChartDatum) => void;
+  /** Agent-ui: clickable center title overlay. */
   onTitleClick?: () => void;
-  /** When set, used for legend label instead of "name (countDisplay)". */
+  /** Agent-ui: custom HTML legend labels (ignored when legendVariant is "chart"). */
   legendLabelFormatter?: (item: {
     x: string;
     countDisplay?: string | number;
   }) => string;
+  /**
+   * Legend rendering mode.
+   * - `"html"` (default): custom clickable legend used by agent-ui
+   * - `"chart"`: PatternFly ChartLegend used by ui-app
+   */
+  legendVariant?: MigrationDonutChartLegendVariant;
+  /** ui-app ChartLegend: total legend width. */
+  legendWidth?: number;
+  /** ui-app ChartLegend: columns per row. */
+  itemsPerRow?: number;
+  /** ui-app ChartLegend: label font size. */
+  labelFontSize?: number;
+  /** Prefer themed Victory ChartTooltip (default true for chart legend). */
+  useThemedTooltip?: boolean;
 }
 
-const legendColors = ["#0066cc", "#5e40be", "#b6a6e9", "#b98412"];
+const legendColors = [
+  "#0066cc",
+  "#5e40be",
+  "#009596",
+  "#4cb140",
+  "#f0ab00",
+  "#b98412",
+  "#a30000",
+  "#b6a6e9",
+];
+
+/** Victory chart tooltips that respect PatternFly light/dark themes. */
+const themedChartTooltipStyle = {
+  fontSize: 9,
+  fill: "var(--pf-t--global--text--color--regular)",
+} as const;
+
+const themedChartTooltipFlyoutStyle = {
+  stroke: "var(--pf-t--global--border--color--default)",
+  strokeWidth: 1,
+  fill: "var(--pf-t--global--background--color--floating--default)",
+} as const;
+
+const themedChartTooltipFlyoutPadding = {
+  top: 6,
+  bottom: 6,
+  left: 10,
+  right: 10,
+} as const;
 
 const styles = {
   legendIcon: css`
@@ -120,8 +162,8 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
   width = 420,
   title,
   subTitle,
-  titleColor = "#000000",
-  subTitleColor = "#000000",
+  titleColor = "var(--pf-t--global--text--color--regular)",
+  subTitleColor = "var(--pf-t--global--text--color--subtle)",
   marginLeft = "0%",
   titleFontSize = 28,
   subTitleFontSize = 14,
@@ -131,30 +173,35 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
   onItemClick,
   onTitleClick,
   legendLabelFormatter,
+  legendVariant = "html",
+  legendWidth,
+  itemsPerRow = 1,
+  labelFontSize = 25,
+  useThemedTooltip,
 }) => {
+  const showChartLegend = legendVariant === "chart";
+  const themedTooltipEnabled = useThemedTooltip ?? showChartLegend;
+
   const dynamicLegend = useMemo(() => {
-    return data.reduce(
-      (acc, current) => {
-        const key = `${current.legendCategory}`;
-        if (!acc.seen.has(key)) {
-          acc.seen.add(key);
-          const color =
-            customColors?.[key] ??
-            legendColors[(acc.seen.size - 1) % legendColors.length];
-          acc.result.push({ [key]: color });
-        }
-        return acc;
-      },
-      { seen: new Set(), result: [] } as {
-        seen: Set<string>;
-        result: Record<string, string>[];
-      },
-    ).result;
+    const legendMap: Record<string, string> = {};
+    const seen = new Set<string>();
+
+    for (const item of data) {
+      const key = item.legendCategory;
+      if (!seen.has(key)) {
+        seen.add(key);
+        legendMap[key] =
+          customColors?.[key] ??
+          legendColors[(seen.size - 1) % legendColors.length];
+      }
+    }
+
+    return legendMap;
   }, [data, customColors]);
 
-  const chartLegend = legend ? legend : Object.assign({}, ...dynamicLegend);
+  const chartLegend = legend ?? dynamicLegend;
   const getColor = useCallback(
-    (name: string): string => chartLegend[name],
+    (name: string): string => chartLegend[name] ?? legendColors[0],
     [chartLegend],
   );
 
@@ -171,6 +218,33 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
     return chartData.map((item) => getColor(item.legendCategory));
   }, [chartData, getColor]);
 
+  const legendData = useMemo(() => {
+    return chartData.map((item) => ({
+      name: `${item.x} (${item.countDisplay})`,
+      symbol: { fill: getColor(item.legendCategory) },
+    }));
+  }, [chartData, getColor]);
+
+  const legendWidthValue = legendWidth ?? 800;
+  const legendX = useMemo(() => {
+    const symbolAndGap = 34;
+    const charWidth = labelFontSize * 0.55;
+    const itemWidths = legendData.map(
+      (d) => symbolAndGap + d.name.length * charWidth,
+    );
+    const numCols = Math.min(legendData.length, itemsPerRow);
+    const gutter = 16;
+    let contentWidth = (numCols - 1) * gutter;
+    for (let c = 0; c < numCols; c++) {
+      let maxW = 0;
+      for (let i = c; i < itemWidths.length; i += itemsPerRow) {
+        maxW = Math.max(maxW, itemWidths[i] ?? 0);
+      }
+      contentWidth += maxW;
+    }
+    return Math.max(0, (legendWidthValue - contentWidth) / 2);
+  }, [legendData, itemsPerRow, legendWidthValue, labelFontSize]);
+
   const innerRadius = useMemo(() => {
     const outerApprox = Math.min(width, height) / 2;
     const computed = outerApprox - donutThickness;
@@ -230,17 +304,132 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
     ];
   }, [onItemClick, handleClick]);
 
+  const donutTooltip = useMemo(
+    () =>
+      themedTooltipEnabled ? (
+        <ChartTooltip
+          style={themedChartTooltipStyle}
+          flyoutStyle={themedChartTooltipFlyoutStyle}
+          flyoutPadding={themedChartTooltipFlyoutPadding}
+        />
+      ) : undefined,
+    [themedTooltipEnabled],
+  );
+
+  const formatLabel = useCallback(
+    (datum: {
+      x: string;
+      y: number;
+      legendCategory: string;
+      countDisplay?: string | number;
+    }) => {
+      const percent = totalY > 0 ? (Number(datum.y) / totalY) * 100 : 0;
+      return tooltipLabelFormatter
+        ? tooltipLabelFormatter({
+            datum: {
+              x: datum.x,
+              y: Number(datum.y),
+              countDisplay: datum.countDisplay,
+              legendCategory: datum.legendCategory,
+            },
+            percent,
+            total: totalY,
+          })
+        : `${datum.x}: ${datum.countDisplay ?? datum.y}`;
+    },
+    [tooltipLabelFormatter, totalY],
+  );
+
   if (!data || data.length === 0) {
-    return (
-      <EmptyState
-        headingLevel="h3"
-        titleText="No data available"
-        icon={InboxIcon}
-        variant={EmptyStateVariant.xs}
-      />
-    );
+    return null;
   }
 
+  const htmlLegend: ReactElement = (
+    <Flex
+      className={`${styles.legendContainer} ${css`margin-left: ${marginLeft};`}`}
+      justifyContent={{ default: "justifyContentCenter" }}
+      alignItems={{ default: "alignItemsFlexStart" }}
+    >
+      <Flex
+        className={styles.legendInner}
+        spaceItems={{ default: "spaceItemsMd" }}
+        justifyContent={{ default: "justifyContentCenter" }}
+        alignItems={{ default: "alignItemsCenter" }}
+        flexWrap={{ default: "wrap" }}
+      >
+        {data.map((item) => {
+          const label = legendLabelFormatter
+            ? legendLabelFormatter({
+                x: item.name,
+                countDisplay: item.countDisplay,
+              })
+            : item.name;
+
+          const content = (
+            <>
+              <svg
+                width="10"
+                height="10"
+                aria-hidden="true"
+                className={styles.legendIcon}
+              >
+                <title>Legend color indicator</title>
+                <rect
+                  width="10"
+                  height="10"
+                  fill={getColor(item.legendCategory)}
+                />
+              </svg>
+              <span>{label}</span>
+            </>
+          );
+
+          return (
+            <FlexItem key={`${item.legendCategory}-${item.name}`}>
+              {onItemClick ? (
+                <button
+                  type="button"
+                  onClick={() => onItemClick(item)}
+                  className={styles.legendButton}
+                >
+                  {content}
+                </button>
+              ) : (
+                <span className={styles.legendLabel}>{content}</span>
+              )}
+            </FlexItem>
+          );
+        })}
+      </Flex>
+    </Flex>
+  );
+
+  const chartLegendElement: ReactElement = (
+    <FlexItem flex={{ default: "flex_1" }}>
+      <Flex
+        justifyContent={{ default: "justifyContentCenter" }}
+        alignItems={{ default: "alignItemsCenter" }}
+      >
+        <FlexItem>
+          <ChartLegend
+            data={legendData}
+            orientation="horizontal"
+            height={200}
+            width={legendWidthValue}
+            x={legendX}
+            itemsPerRow={itemsPerRow}
+            style={{
+              labels: {
+                fontSize: labelFontSize,
+                fill: "var(--pf-t--global--text--color--regular)",
+              },
+            }}
+          />
+        </FlexItem>
+      </Flex>
+    </FlexItem>
+  );
+
   return (
     <Flex
       direction={{ default: "column" }}
@@ -252,6 +441,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
           ariaDesc="Migration data donut chart"
           data={chartData}
           events={chartEvents}
+          labelComponent={donutTooltip}
           labels={({
             datum,
           }: {
@@ -261,21 +451,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
               legendCategory: string;
               countDisplay?: string | number;
             };
-          }) => {
-            const percent = totalY > 0 ? (Number(datum.y) / totalY) * 100 : 0;
-            return tooltipLabelFormatter
-              ? tooltipLabelFormatter({
-                  datum: {
-                    x: datum.x,
-                    y: Number(datum.y),
-                    countDisplay: datum.countDisplay,
-                    legendCategory: datum.legendCategory,
-                  },
-                  percent,
-                  total: totalY,
-                })
-              : `${datum.x}: ${datum.countDisplay ?? datum.y}`;
-          }}
+          }) => formatLabel(datum)}
           colorScale={colorScale}
           constrainToVisibleArea
           innerRadius={innerRadius}
@@ -306,6 +482,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
           subTitleComponent={
             subTitle ? (
               <ChartLabel
+                dy={showChartLegend ? 7 : undefined}
                 style={[
                   {
                     fill: subTitleColor,
@@ -343,63 +520,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
           />
         )}
       </div>
-      <Flex
-        className={`${styles.legendContainer} ${css`margin-left: ${marginLeft};`}`}
-        justifyContent={{ default: "justifyContentCenter" }}
-        alignItems={{ default: "alignItemsFlexStart" }}
-      >
-        <Flex
-          className={styles.legendInner}
-          spaceItems={{ default: "spaceItemsMd" }}
-          justifyContent={{ default: "justifyContentCenter" }}
-          alignItems={{ default: "alignItemsCenter" }}
-          flexWrap={{ default: "wrap" }}
-        >
-          {data.map((item) => {
-            const label = legendLabelFormatter
-              ? legendLabelFormatter({
-                  x: item.name,
-                  countDisplay: item.countDisplay,
-                })
-              : item.name;
-
-            const content = (
-              <>
-                <svg
-                  width="10"
-                  height="10"
-                  aria-hidden="true"
-                  className={styles.legendIcon}
-                >
-                  <title>Legend color indicator</title>
-                  <rect
-                    width="10"
-                    height="10"
-                    fill={getColor(item.legendCategory)}
-                  />
-                </svg>
-                <span>{label}</span>
-              </>
-            );
-
-            return (
-              <FlexItem key={`${item.legendCategory}-${item.name}`}>
-                {onItemClick ? (
-                  <button
-                    type="button"
-                    onClick={() => onItemClick(item)}
-                    className={styles.legendButton}
-                  >
-                    {content}
-                  </button>
-                ) : (
-                  <span className={styles.legendLabel}>{content}</span>
-                )}
-              </FlexItem>
-            );
-          })}
-        </Flex>
-      </Flex>
+      {showChartLegend ? chartLegendElement : htmlLegend}
     </Flex>
   );
 };

package/src/report/OsSupportTiersHelpPopover.tsx

@@ -63,6 +63,7 @@ const OsSupportTiersHelpBody: FC = () => (
       ))}
     </ul>
     <a
+      aria-label="Learn more about operating system support tiers"
       className={learnMoreLinkStyle}
       href={SUPPORT_TIER_LEARN_MORE_URL}
       target="_blank"