npm - @openshift-migration-advisor/shared-components - Versions diffs - 0.21.0-8e9be07f572f → 0.22.0-aaabd4569e38 - Mend

@openshift-migration-advisor/shared-components 0.21.0-8e9be07f572f → 0.22.0-aaabd4569e38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/charts/MigrationDonutChart.d.ts +18 -1
package/dist/charts/MigrationDonutChart.d.ts.map +1 -1
package/dist/charts/MigrationDonutChart.js +109 -43
package/dist/index.d.ts +3 -3
package/dist/index.d.ts.map +1 -1
package/dist/index.js +3 -3
package/dist/report/constants.d.ts.map +1 -1
package/dist/report/constants.js +1 -2
package/dist/report/osSupportTier.d.ts.map +1 -1
package/dist/report/osSupportTier.js +1 -8
package/package.json +3 -2
package/src/charts/MigrationDonutChart.tsx +241 -111
package/src/index.ts +3 -3
package/src/report/constants.ts +4 -2
package/src/report/osSupportTier.ts +10 -8

package/dist/charts/MigrationDonutChart.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MigrationDonutChart.d.ts","sourceRoot":"","sources":["../../src/charts/MigrationDonutChart.tsx"],"names":[],"mappings":"~~AASA~~,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"}
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"}

package/dist/charts/MigrationDonutChart.js CHANGED Viewed

@@ -1,10 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { css } from "@emotion/css";
-import { ChartDonut, ChartLabel } from "@patternfly/react-charts/victory";
-import { EmptyState, EmptyStateVariant, Flex, FlexItem, } from "@patternfly/react-core";
-import { InboxIcon } from "@patternfly/react-icons";
+// Workaround
+// Shared-components ships as strict ESM ("type": "module"), so webpack
+// enforces fully-specified imports in consuming apps. The documented
+// "@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, 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;
@@ -50,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,
@@ -76,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;
@@ -124,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,
@@ -152,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,
@@ -172,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/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export * from "./charts/index.js";
-export * from "./forms/index.js";
-export * from "./report/index.js";
+export * from "./charts";
+export * from "./forms";
+export * from "./report";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,~~mBAAmB~~,CAAC;~~AAClC~~,cAAc,~~kBAAkB~~,CAAC;~~AACjC~~,cAAc,~~mBAAmB~~,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/dist/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
-export * from "./charts/index.js";
-export * from "./forms/index.js";
-export * from "./report/index.js";
+export * from "./charts";
+export * from "./forms";
+export * from "./report";

package/dist/report/constants.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/report/constants.ts"],"names":[],"mappings":"~~AAGA~~;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,WAA6B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,WAA+B,CAAC;AAE9D,eAAO,MAAM,8BAA8B;;;;;;;;;;;;;;CAcjC,CAAC"}
1	+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/report/constants.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,WAA6B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,WAA+B,CAAC;AAE9D,eAAO,MAAM,8BAA8B;;;;;;;;;;;;;;CAcjC,CAAC"}

package/dist/report/constants.js CHANGED Viewed

@@ -1,5 +1,4 @@
-import { chart_color_blue_300 } from "@patternfly/react-tokens/dist/esm/chart_color_blue_300";
-import { chart_color_yellow_300 } from "@patternfly/react-tokens/dist/esm/chart_color_yellow_300";
+import { chart_color_blue_300, chart_color_yellow_300, } from "@patternfly/react-tokens";
 /**
  * PatternFly chart color semantics (https://www.patternfly.org/charts/colors-for-charts/design-guidelines/#best-practices):
  *   Blue  → success / migratable / supported

package/dist/report/osSupportTier.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"osSupportTier.d.ts","sourceRoot":"","sources":["../../src/report/osSupportTier.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;~~AAUzD~~;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAEzE,eAAO,MAAM,2BAA2B,+CACM,CAAC;AAE/C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AASD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAK3D,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAShE,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,WAAW,EAK9C,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,WAAW,EACX,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAMjC,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,4FAA4F;AAC5F,eAAO,MAAM,gCAAgC,EAAE,MAAM,CACnD,WAAW,EACX,qBAAqB,CAkBtB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,WAAW,GAAG,SAAS,EACpC,SAAS,EAAE,OAAO,GACjB,WAAW,CAMb;AAED,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,GAC1C,OAAO,CAeT;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAEjE;AAED,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAEnE;AAED,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAElE;AAED,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,WAAW,GAChB,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAElC;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,WAAW,GAChB,qBAAqB,CAEvB"}
1	+ {"version":3,"file":"osSupportTier.d.ts","sourceRoot":"","sources":["../../src/report/osSupportTier.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAYzD;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAEzE,eAAO,MAAM,2BAA2B,+CACM,CAAC;AAE/C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AASD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAK3D,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAShE,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,WAAW,EAK9C,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,WAAW,EACX,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAMjC,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,4FAA4F;AAC5F,eAAO,MAAM,gCAAgC,EAAE,MAAM,CACnD,WAAW,EACX,qBAAqB,CAkBtB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,WAAW,GAAG,SAAS,EACpC,SAAS,EAAE,OAAO,GACjB,WAAW,CAMb;AAED,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,GAC1C,OAAO,CAeT;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAEjE;AAED,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAEnE;AAED,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAElE;AAED,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,WAAW,GAChB,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAElC;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,WAAW,GAChB,qBAAqB,CAEvB"}

package/dist/report/osSupportTier.js CHANGED Viewed

@@ -1,11 +1,4 @@
-import { t_color_blue_20 } from "@patternfly/react-tokens/dist/esm/t_color_blue_20";
-import { t_color_blue_60 } from "@patternfly/react-tokens/dist/esm/t_color_blue_60";
-import { t_color_green_20 } from "@patternfly/react-tokens/dist/esm/t_color_green_20";
-import { t_color_green_60 } from "@patternfly/react-tokens/dist/esm/t_color_green_60";
-import { t_color_orange_20 } from "@patternfly/react-tokens/dist/esm/t_color_orange_20";
-import { t_color_orange_60 } from "@patternfly/react-tokens/dist/esm/t_color_orange_60";
-import { t_color_yellow_20 } from "@patternfly/react-tokens/dist/esm/t_color_yellow_20";
-import { t_color_yellow_60 } from "@patternfly/react-tokens/dist/esm/t_color_yellow_60";
+import { t_color_blue_20, t_color_blue_60, t_color_green_20, t_color_green_60, t_color_orange_20, t_color_orange_60, t_color_yellow_20, t_color_yellow_60, } from "@patternfly/react-tokens";
 /**
  * Guest OS support tiers (matches agent-sdk / planner-sdk `OsInfoSupportTierEnum` values).
  * Defined locally so this package stays SDK-agnostic.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@openshift-migration-advisor/shared-components",
-  "version": "0.21.0-8e9be07f572f",
+  "version": "0.22.0-aaabd4569e38",
   "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",
@@ -35,7 +35,8 @@
     "clean": "rm -rf node_modules dist .tmp",
     "check": "yarn run -T biome check .",
     "check:fix": "yarn run -T biome check --write .",
-    "test": "echo 'No tests configured for this package'",
+    "test": "yarn run -T vitest run",
+    "test:watch": "yarn run -T vitest",
     "typecheck": "yarn run -T tsc -b --noEmit"
   },
   "files": [

package/src/charts/MigrationDonutChart.tsx CHANGED Viewed

@@ -1,13 +1,18 @@
 import { css } from "@emotion/css";
-import { ChartDonut, ChartLabel } from "@patternfly/react-charts/victory";
+// Workaround
+// Shared-components ships as strict ESM ("type": "module"), so webpack
+// enforces fully-specified imports in consuming apps. The documented
+// "@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 {
-  EmptyState,
-  EmptyStateVariant,
-  Flex,
-  FlexItem,
-} from "@patternfly/react-core";
-import { InboxIcon } from "@patternfly/react-icons";
-import type { FC } from "react";
+  ChartDonut,
+  ChartLabel,
+  ChartLegend,
+  ChartTooltip,
+} from "@patternfly/react-charts/dist/esm/victory/index.js";
+import { Flex, FlexItem } from "@patternfly/react-core";
+import type { FC, ReactElement } from "react";
 import { useCallback, useMemo } from "react";
 export interface MigrationDonutChartDatum {
@@ -21,6 +26,8 @@ export interface MigrationDonutChartDatum {
   networkNames?: string[];
 }
+export type MigrationDonutChartLegendVariant = "html" | "chart";
 export interface MigrationDonutChartProps {
   data: MigrationDonutChartDatum[];
   legend?: Record<string, string>;
@@ -46,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`
@@ -111,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,
@@ -122,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],
   );
@@ -162,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;
@@ -221,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" }}
@@ -243,6 +441,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
           ariaDesc="Migration data donut chart"
           data={chartData}
           events={chartEvents}
+          labelComponent={donutTooltip}
           labels={({
             datum,
           }: {
@@ -252,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}
@@ -297,6 +482,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
           subTitleComponent={
             subTitle ? (
               <ChartLabel
+                dy={showChartLegend ? 7 : undefined}
                 style={[
                   {
                     fill: subTitleColor,
@@ -334,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/index.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-export * from "./charts/index.js";
-export * from "./forms/index.js";
-export * from "./report/index.js";
+export * from "./charts";
+export * from "./forms";
+export * from "./report";

package/src/report/constants.ts CHANGED Viewed

@@ -1,5 +1,7 @@
-import { chart_color_blue_300 } from "@patternfly/react-tokens/dist/esm/chart_color_blue_300";
-import { chart_color_yellow_300 } from "@patternfly/react-tokens/dist/esm/chart_color_yellow_300";
+import {
+  chart_color_blue_300,
+  chart_color_yellow_300,
+} from "@patternfly/react-tokens";
 /**
  * PatternFly chart color semantics (https://www.patternfly.org/charts/colors-for-charts/design-guidelines/#best-practices):

package/src/report/osSupportTier.ts CHANGED Viewed

@@ -1,12 +1,14 @@
 import type { LabelProps } from "@patternfly/react-core";
-import { t_color_blue_20 } from "@patternfly/react-tokens/dist/esm/t_color_blue_20";
-import { t_color_blue_60 } from "@patternfly/react-tokens/dist/esm/t_color_blue_60";
-import { t_color_green_20 } from "@patternfly/react-tokens/dist/esm/t_color_green_20";
-import { t_color_green_60 } from "@patternfly/react-tokens/dist/esm/t_color_green_60";
-import { t_color_orange_20 } from "@patternfly/react-tokens/dist/esm/t_color_orange_20";
-import { t_color_orange_60 } from "@patternfly/react-tokens/dist/esm/t_color_orange_60";
-import { t_color_yellow_20 } from "@patternfly/react-tokens/dist/esm/t_color_yellow_20";
-import { t_color_yellow_60 } from "@patternfly/react-tokens/dist/esm/t_color_yellow_60";
+import {
+  t_color_blue_20,
+  t_color_blue_60,
+  t_color_green_20,
+  t_color_green_60,
+  t_color_orange_20,
+  t_color_orange_60,
+  t_color_yellow_20,
+  t_color_yellow_60,
+} from "@patternfly/react-tokens";
 /**
  * Guest OS support tiers (matches agent-sdk / planner-sdk `OsInfoSupportTierEnum` values).