@openshift-migration-advisor/shared-components 0.27.0 → 0.28.0-9da6a7613f16

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,CA6PpD,CAAC"}

package/dist/report/StorageOverview.js

@@ -0,0 +1,319 @@
+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 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, VIEW_MODE_LABELS), 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";

package/dist/report/captureChartElement.d.ts

@@ -1,8 +1,13 @@
+export declare const CHART_CAPTURE_SCALE_SINGLE = 2;
+export type CaptureChartElementOptions = {
+    /** Higher scale sharpens text in PNG exports; keep at 1 for bulk PDF/zip. */
+    scale?: number;
+};
 /**
  * Tab panels stay mounted with `hidden` / `display:none` when another tab is
  * active. html2canvas then measures a 0×0 box. Reveal those ancestors off-screen
  * for the duration of the capture, then restore.
  */
 export declare function revealHiddenChartAncestors(element: HTMLElement): () => void;
-export declare function captureChartElement(element: HTMLElement): Promise<HTMLCanvasElement>;
+export declare function captureChartElement(element: HTMLElement, options?: CaptureChartElementOptions): Promise<HTMLCanvasElement>;
 //# sourceMappingURL=captureChartElement.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"captureChartElement.d.ts","sourceRoot":"","sources":["../../src/report/captureChartElement.ts"],"names":[],"mappings":"AAgCA;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,IAAI,CAqD3E;AAiPD,wBAAsB,mBAAmB,CACvC,OAAO,EAAE,WAAW,GACnB,OAAO,CAAC,iBAAiB,CAAC,CAkC5B"}
+{"version":3,"file":"captureChartElement.d.ts","sourceRoot":"","sources":["../../src/report/captureChartElement.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,0BAA0B,IAAI,CAAC;AAG5C,MAAM,MAAM,0BAA0B,GAAG;IACvC,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAwBF;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,IAAI,CAqD3E;AAwQD,wBAAsB,mBAAmB,CACvC,OAAO,EAAE,WAAW,EACpB,OAAO,GAAE,0BAA+B,GACvC,OAAO,CAAC,iBAAiB,CAAC,CA0C5B"}

package/dist/report/captureChartElement.js

@@ -1,7 +1,10 @@
+import { t_color_gray_20, t_color_white, t_global_text_color_regular, } from "@patternfly/react-tokens";
 import html2canvas from "html2canvas-pro";
-import { CHART_EXPORT_CAPTURING_ATTR, CHART_EXPORT_SCROLL_ATTR, shouldIgnoreChartExportElement, } from "./chartExport.js";
-/** CSS-pixel scale; 2x made zip-all of ~15 live cards too slow. */
-const CHART_CAPTURE_SCALE = 1;
+import { applyLightThemeToDocument, CHART_EXPORT_CAPTURING_ATTR, CHART_EXPORT_SCROLL_ATTR, shouldIgnoreChartExportElement, } from "./chartExport.js";
+/** Default scale for bulk exports; single-chart PNG uses a higher scale. */
+const CHART_CAPTURE_SCALE_DEFAULT = 1;
+export const CHART_CAPTURE_SCALE_SINGLE = 2;
+const EXPORT_FONT_FAMILY = "RedHatText, Overpass, Helvetica, Arial, sans-serif";
 const HIDDEN_LAYOUT_STYLE_KEYS = [
     "display",
     "position",
@@ -71,6 +74,10 @@ export function revealHiddenChartAncestors(element) {
 const PADDED_CAPTURE_SELECTOR = ".pf-v6-c-card__title, .pf-v6-c-card__header, .pf-v6-c-card__body";
 const CARD_CAPTURE_SELECTOR = ".pf-v6-c-card";
 const TRANSPARENT_FILLS = new Set(["", "transparent", "rgba(0, 0, 0, 0)"]);
+/** PatternFly light-theme chrome. html2canvas inlines live computed SVG styles. */
+const LIGHT_EXPORT_BACKGROUND = t_color_white.value;
+const LIGHT_EXPORT_BORDER = t_color_gray_20.value;
+const LIGHT_EXPORT_TEXT = t_global_text_color_regular.value;
 function queryCards(root) {
     const cards = Array.from(root.querySelectorAll(CARD_CAPTURE_SELECTOR));
     if (root.matches(CARD_CAPTURE_SELECTOR)) {
@@ -112,16 +119,30 @@ function readCardBorder(source) {
     }
     return { width, style, color };
 }
-function applyCardChrome(source, dest) {
+function applyCardChrome(source, dest, colors) {
     const computed = window.getComputedStyle(source);
     dest.style.borderRadius = computed.borderRadius;
-    dest.style.backgroundColor = resolvedFill(computed.backgroundColor);
     dest.style.overflow = "hidden";
+    dest.style.backgroundColor =
+        colors === "light"
+            ? LIGHT_EXPORT_BACKGROUND
+            : resolvedFill(computed.backgroundColor);
     const border = readCardBorder(source);
     if (border) {
         dest.style.borderWidth = border.width;
         dest.style.borderStyle = border.style;
-        dest.style.borderColor = border.color;
+        dest.style.borderColor =
+            colors === "light" ? LIGHT_EXPORT_BORDER : border.color;
+    }
+}
+function applyLightThemeSvgText(root) {
+    for (const node of root.querySelectorAll("text, tspan")) {
+        if (!(node instanceof SVGElement)) {
+            continue;
+        }
+        node.style.fill = LIGHT_EXPORT_TEXT;
+        node.style.color = LIGHT_EXPORT_TEXT;
+        node.style.fontFamily = EXPORT_FONT_FAMILY;
     }
 }
 function hideCardBeforePseudo() {
@@ -162,7 +183,7 @@ function copyCardChrome(node) {
         height: node.style.height,
         maxHeight: node.style.maxHeight,
     };
-    applyCardChrome(node, node);
+    applyCardChrome(node, node, "computed");
     node.style.minHeight = "0px";
     node.style.height = "auto";
     node.style.maxHeight = "none";
@@ -174,7 +195,7 @@ function applyComputedStylesToClone(sourceRoot, clonedRoot) {
     sourceCards.forEach((source, index) => {
         const dest = cloneCards[index];
         if (dest) {
-            applyCardChrome(source, dest);
+            applyCardChrome(source, dest, "light");
         }
     });
     const sources = sourceRoot.querySelectorAll(PADDED_CAPTURE_SELECTOR);
@@ -248,7 +269,8 @@ function prepareCaptureLayout(element) {
         }
     };
 }
-export async function captureChartElement(element) {
+export async function captureChartElement(element, options = {}) {
+    const scale = options.scale ?? CHART_CAPTURE_SCALE_DEFAULT;
     const restoreHidden = revealHiddenChartAncestors(element);
     const restoreLayout = prepareCaptureLayout(element);
     element.setAttribute(CHART_EXPORT_CAPTURING_ATTR, "");
@@ -264,14 +286,21 @@ export async function captureChartElement(element) {
         }
         return html2canvas(element, {
             useCORS: true,
-            backgroundColor: null,
+            backgroundColor: LIGHT_EXPORT_BACKGROUND,
             logging: false,
-            scale: CHART_CAPTURE_SCALE,
+            scale,
             imageTimeout: 0,
             ignoreElements: (node) => node instanceof Element &&
                 shouldIgnoreChartExportElement(node, element),
-            onclone: (_clonedDoc, clonedElement) => {
+            onclone: (clonedDoc, clonedElement) => {
+                // Dropping the dark-theme class off the clone root makes every
+                // PatternFly CSS-variable surface (cards, tables, labels) resolve to
+                // light automatically — html2canvas reads computed styles from this
+                // clone. Only Victory's inlined SVG text needs explicit recoloring.
+                applyLightThemeToDocument(clonedDoc);
                 applyComputedStylesToClone(element, clonedElement);
+                applyLightThemeSvgText(clonedElement);
+                clonedElement.style.fontFamily = EXPORT_FONT_FAMILY;
             },
         });
     }

package/dist/report/chartExport.d.ts

@@ -38,8 +38,31 @@ export type ChartCaptureSource = {
     filename: string;
     capture: () => Promise<HTMLCanvasElement>;
 };
+/** One label/value row rendered on a {@link PdfTextPage}. */
+export type PdfTextPageItem = {
+    label: string;
+    value: string;
+};
+/**
+ * A native-text PDF page appended after the captured chart images.
+ *
+ * Used for content that is not a chart/card (e.g. calculated recommendations)
+ * but still needs to be part of the exported PDF.
+ */
+export type PdfTextPage = {
+    title: string;
+    items: PdfTextPageItem[];
+    footer?: string;
+};
 export declare function releaseCanvas(canvas: HTMLCanvasElement): void;
 export declare function waitForChartExportPaint(): Promise<void>;
+/** PatternFly applies dark tokens when this class is on `:root`. */
+export declare const PATTERNFLY_DARK_THEME_CLASSES: readonly ["pf-v6-theme-dark", "pf-v5-theme-dark"];
+/**
+ * Force PatternFly light tokens on a document (the html2canvas clone).
+ * Does not touch the live page.
+ */
+export declare function applyLightThemeToDocument(root: Document): void;
 export declare function chartExportViewsFromLabels(titlePrefix: string, labels: Record<string, string>): ChartExportView[];
 export declare function toBulkChartCaptureSources(charts: RegisteredChart[], capture: (element: HTMLElement) => Promise<HTMLCanvasElement>, prepareElement?: (element: HTMLElement) => () => void): ChartCaptureSource[];
 export declare function restoreChartExportViews(charts: RegisteredChart[]): Promise<void>;

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

@@ -1 +1 @@
-{"version":3,"file":"chartExport.d.ts","sourceRoot":"","sources":["../../src/report/chartExport.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAC/D,eAAO,MAAM,wBAAwB,6BAA6B,CAAC;AACnE,eAAO,MAAM,2BAA2B,yBAAyB,CAAC;AAElE,eAAO,MAAM,oBAAoB;;CAEvB,CAAC;AAEX,eAAO,MAAM,sBAAsB;;CAEzB,CAAC;AAEX,eAAO,MAAM,oBAAoB,EAAE,aAGlC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,iBAAiB,CAAC,CAAC;CAC3C,CAAC;AAEF,wBAAgB,aAAa,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAG7D;AAED,wBAAgB,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC,CASvD;AAED,wBAAgB,0BAA0B,CACxC,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,eAAe,EAAE,CAKnB;AAqBD,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,eAAe,EAAE,EACzB,OAAO,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAC,iBAAiB,CAAC,EAC7D,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,IAAI,GACpD,kBAAkB,EAAE,CAyBtB;AAED,wBAAsB,uBAAuB,CAC3C,MAAM,EAAE,eAAe,EAAE,GACxB,OAAO,CAAC,IAAI,CAAC,CAcf;AAED,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,eAAe,EAAE,GACxB,eAAe,EAAE,CAcnB;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAcrE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMvD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,SAAU,GAAG,MAAM,CAEpE;AAWD;;;;GAIG;AACH,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,OAAO,EACb,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,GAC3B,OAAO,CAeT;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAS/D"}
+{"version":3,"file":"chartExport.d.ts","sourceRoot":"","sources":["../../src/report/chartExport.ts"],"names":[],"mappings":"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"}

package/dist/report/chartExport.js

@@ -9,7 +9,7 @@ export const chartExportScrollProps = {
 };
 export const chartExportRootStyle = {
     width: "100%",
-    height: "100%",
+    height: "auto",
 };
 export function releaseCanvas(canvas) {
     canvas.width = 0;
@@ -25,6 +25,26 @@ export function waitForChartExportPaint() {
         });
     });
 }
+/** PatternFly applies dark tokens when this class is on `:root`. */
+export const PATTERNFLY_DARK_THEME_CLASSES = [
+    "pf-v6-theme-dark",
+    "pf-v5-theme-dark",
+];
+/**
+ * Force PatternFly light tokens on a document (the html2canvas clone).
+ * Does not touch the live page.
+ */
+export function applyLightThemeToDocument(root) {
+    for (const node of [root.documentElement, root.body]) {
+        if (!node) {
+            continue;
+        }
+        for (const className of PATTERNFLY_DARK_THEME_CLASSES) {
+            node.classList.remove(className);
+        }
+        node.style.colorScheme = "light";
+    }
+}
 export function chartExportViewsFromLabels(titlePrefix, labels) {
     return Object.entries(labels).map(([id, label]) => ({
         id,

package/dist/report/chartExportContext.d.ts

@@ -1,10 +1,14 @@
 import { type RefCallback } from "react";
-import { type ChartExportMeta, type ChartExportView, type RegisteredChart } from "./chartExport.js";
+import { type ChartExportMeta, type ChartExportView, type PdfTextPage, type RegisteredChart } from "./chartExport.js";
 export type ChartExportFormat = "pdf" | "png" | "html";
 export type ChartExportApi = {
     downloadChart: (id: string) => Promise<void>;
     downloadAll: () => Promise<void>;
-    downloadPdf: (documentTitle: string) => Promise<void>;
+    /**
+     * @param extraPages - Native-text pages appended after the captured chart
+     * images (e.g. calculated recommendations that aren't rendered as charts).
+     */
+    downloadPdf: (documentTitle: string, extraPages?: PdfTextPage[]) => Promise<void>;
     downloadHtml: (documentTitle: string) => Promise<void>;
     downloadingChartId: string | null;
     exportingFormat: ChartExportFormat | null;

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

@@ -1 +1 @@
-{"version":3,"file":"chartExportContext.d.ts","sourceRoot":"","sources":["../../src/report/chartExportContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,EAIjB,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,eAAe,EAEpB,KAAK,eAAe,EACrB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG;IAC3B,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,WAAW,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,YAAY,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,eAAe,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC1C,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,cAAc,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,0BAA0B,qDACU,CAAC;AAClD,eAAO,MAAM,qBAAqB,gDAA6C,CAAC;AAEhF,wBAAgB,cAAc,IAAI,cAAc,GAAG,IAAI,CAEtD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,KAAK,EACL,QAAQ,EACR,WAAW,EACX,kBAAkB,EAClB,aAAa,GACd,EAAE,eAAe,GAAG;IACnB,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnD,GAAG,WAAW,CAAC,WAAW,CAAC,CA8B3B"}
+{"version":3,"file":"chartExportContext.d.ts","sourceRoot":"","sources":["../../src/report/chartExportContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,EAIjB,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,eAAe,EAEpB,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG;IAC3B,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC;;;OAGG;IACH,WAAW,EAAE,CACX,aAAa,EAAE,MAAM,EACrB,UAAU,CAAC,EAAE,WAAW,EAAE,KACvB,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,YAAY,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,eAAe,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC1C,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,cAAc,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,0BAA0B,qDACU,CAAC;AAClD,eAAO,MAAM,qBAAqB,gDAA6C,CAAC;AAEhF,wBAAgB,cAAc,IAAI,cAAc,GAAG,IAAI,CAEtD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,KAAK,EACL,QAAQ,EACR,WAAW,EACX,kBAAkB,EAClB,aAAa,GACd,EAAE,eAAe,GAAG;IACnB,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnD,GAAG,WAAW,CAAC,WAAW,CAAC,CA8B3B"}

package/dist/report/dashboardStyles.d.ts

@@ -3,6 +3,12 @@ export declare const dashboardStyles: {
     cardScroll: string;
     equalHeightRow: string;
     equalHeight: string;
+    /**
+     * Flex child of {@link dashboardStyles.card}. `min-height: 0` lets the body
+     * shrink inside the card max-height; `overflow: auto` scrolls tables and tall
+     * charts when needed (phantom scrollbars on donut cards are avoided by the
+     * card layout and ChartExportSurface sizing, not a second body class).
+     */
     cardBodyScrollable: string;
     card: string;
     storageCardOverflowHidden: string;

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

@@ -1 +1 @@
-{"version":3,"file":"dashboardStyles.d.ts","sourceRoot":"","sources":["../../src/report/dashboardStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAkF3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAM/B,CAAC"}
+{"version":3,"file":"dashboardStyles.d.ts","sourceRoot":"","sources":["../../src/report/dashboardStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;IA8B1B;;;;;OAKG;;;;;;;;;CAkDJ,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAM/B,CAAC"}

package/dist/report/dashboardStyles.js

@@ -25,6 +25,12 @@ export const dashboardStyles = {
     flex: 1 1 0;
     height: 100%;
   `,
+    /**
+     * Flex child of {@link dashboardStyles.card}. `min-height: 0` lets the body
+     * shrink inside the card max-height; `overflow: auto` scrolls tables and tall
+     * charts when needed (phantom scrollbars on donut cards are avoided by the
+     * card layout and ChartExportSurface sizing, not a second body class).
+     */
     cardBodyScrollable: css `
     overflow: auto;
   `,
@@ -32,12 +38,9 @@ export const dashboardStyles = {
     // at the same specificity, which wins in the production build due to stylesheet
     // injection order. `!important` forces `hidden` regardless of that order.
     card: css `
-    min-height: 430px;
-    max-height: 520px;
-    height: 100%;
+    height: 520px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     overflow: hidden !important;
   `,
     storageCardOverflowHidden: css `