@openshift-migration-advisor/shared-components 0.25.0 → 0.27.0-5d313f88dc52

package/dist/report/captureChartElement.js

@@ -0,0 +1,304 @@
+import { t_color_gray_20, t_color_white, t_global_text_color_regular, } from "@patternfly/react-tokens";
+import html2canvas from "html2canvas-pro";
+import { applyLightThemeToDocument, 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;
+const HIDDEN_LAYOUT_STYLE_KEYS = [
+    "display",
+    "position",
+    "left",
+    "top",
+    "width",
+    "maxHeight",
+    "overflow",
+    "zIndex",
+];
+function isDisplayNone(node) {
+    return window.getComputedStyle(node).display === "none";
+}
+/**
+ * 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 function revealHiddenChartAncestors(element) {
+    const saved = [];
+    let node = element;
+    while (node && node !== document.documentElement) {
+        if (node.hidden || isDisplayNone(node)) {
+            saved.push({
+                node,
+                hidden: node.hidden,
+                styles: {
+                    display: node.style.display,
+                    position: node.style.position,
+                    left: node.style.left,
+                    top: node.style.top,
+                    width: node.style.width,
+                    maxHeight: node.style.maxHeight,
+                    overflow: node.style.overflow,
+                    zIndex: node.style.zIndex,
+                },
+            });
+        }
+        node = node.parentElement;
+    }
+    if (saved.length === 0) {
+        return () => undefined;
+    }
+    const outermost = saved[saved.length - 1].node;
+    const parentWidth = outermost.parentElement?.clientWidth ?? 0;
+    const layoutWidth = parentWidth || document.documentElement.clientWidth || 1024;
+    for (const entry of saved) {
+        entry.node.hidden = false;
+        entry.node.style.display = "block";
+        entry.node.style.position = "fixed";
+        entry.node.style.left = "-10000px";
+        entry.node.style.top = "0";
+        entry.node.style.width = `${layoutWidth}px`;
+        entry.node.style.maxHeight = "none";
+        entry.node.style.overflow = "visible";
+        entry.node.style.zIndex = "-1";
+    }
+    return () => {
+        for (const entry of saved) {
+            entry.node.hidden = entry.hidden;
+            for (const key of HIDDEN_LAYOUT_STYLE_KEYS) {
+                entry.node.style[key] = entry.styles[key];
+            }
+        }
+    };
+}
+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)) {
+        cards.unshift(root);
+    }
+    return cards;
+}
+function resolvedFill(color) {
+    return TRANSPARENT_FILLS.has(color) ? "#ffffff" : color;
+}
+function applyComputedPadding(source, dest) {
+    const computed = window.getComputedStyle(source);
+    dest.style.paddingTop = computed.paddingTop;
+    dest.style.paddingRight = computed.paddingRight;
+    dest.style.paddingBottom = computed.paddingBottom;
+    dest.style.paddingLeft = computed.paddingLeft;
+}
+function readCardBorder(source) {
+    if (source.style.borderWidth && source.style.borderStyle) {
+        return {
+            width: source.style.borderWidth,
+            style: source.style.borderStyle,
+            color: source.style.borderColor,
+        };
+    }
+    const computed = window.getComputedStyle(source);
+    const before = window.getComputedStyle(source, "::before");
+    const width = before.borderTopWidth && before.borderTopWidth !== "0px"
+        ? before.borderTopWidth
+        : computed.borderTopWidth;
+    const style = before.borderTopStyle && before.borderTopStyle !== "none"
+        ? before.borderTopStyle
+        : computed.borderTopStyle;
+    const color = before.borderTopColor && before.borderTopColor !== "rgba(0, 0, 0, 0)"
+        ? before.borderTopColor
+        : computed.borderTopColor;
+    if (width === "0px" || style === "none") {
+        return null;
+    }
+    return { width, style, color };
+}
+function applyCardChrome(source, dest, colors) {
+    const computed = window.getComputedStyle(source);
+    dest.style.borderRadius = computed.borderRadius;
+    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 =
+            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;
+    }
+}
+function hideCardBeforePseudo() {
+    const style = document.createElement("style");
+    style.setAttribute("data-chart-export-hide-before", "");
+    style.textContent = `
+[${CHART_EXPORT_CAPTURING_ATTR}] .pf-v6-c-card::before,
+[${CHART_EXPORT_CAPTURING_ATTR}].pf-v6-c-card::before {
+  border: none !important;
+  box-shadow: none !important;
+}
+`;
+    document.head.append(style);
+    return () => {
+        style.remove();
+    };
+}
+function copyComputedPadding(node) {
+    const previous = {
+        paddingTop: node.style.paddingTop,
+        paddingRight: node.style.paddingRight,
+        paddingBottom: node.style.paddingBottom,
+        paddingLeft: node.style.paddingLeft,
+    };
+    applyComputedPadding(node, node);
+    return previous;
+}
+function copyCardChrome(node) {
+    const previous = {
+        borderRadius: node.style.borderRadius,
+        backgroundColor: node.style.backgroundColor,
+        overflow: node.style.getPropertyValue("overflow"),
+        overflowPriority: node.style.getPropertyPriority("overflow"),
+        borderWidth: node.style.borderWidth,
+        borderStyle: node.style.borderStyle,
+        borderColor: node.style.borderColor,
+        minHeight: node.style.minHeight,
+        height: node.style.height,
+        maxHeight: node.style.maxHeight,
+    };
+    applyCardChrome(node, node, "computed");
+    node.style.minHeight = "0px";
+    node.style.height = "auto";
+    node.style.maxHeight = "none";
+    return previous;
+}
+function applyComputedStylesToClone(sourceRoot, clonedRoot) {
+    const sourceCards = queryCards(sourceRoot);
+    const cloneCards = queryCards(clonedRoot);
+    sourceCards.forEach((source, index) => {
+        const dest = cloneCards[index];
+        if (dest) {
+            applyCardChrome(source, dest, "light");
+        }
+    });
+    const sources = sourceRoot.querySelectorAll(PADDED_CAPTURE_SELECTOR);
+    const dests = clonedRoot.querySelectorAll(PADDED_CAPTURE_SELECTOR);
+    sources.forEach((source, index) => {
+        const dest = dests[index];
+        if (dest) {
+            applyComputedPadding(source, dest);
+        }
+    });
+}
+function prepareCaptureLayout(element) {
+    const expandNodes = [
+        element,
+        ...Array.from(element.querySelectorAll(`[${CHART_EXPORT_SCROLL_ATTR}], .pf-v6-c-card__body`)),
+    ];
+    const cards = queryCards(element);
+    const paddedNodes = Array.from(element.querySelectorAll(PADDED_CAPTURE_SELECTOR));
+    const previousExpand = expandNodes.map((node) => ({
+        node,
+        overflow: node.style.getPropertyValue("overflow"),
+        overflowPriority: node.style.getPropertyPriority("overflow"),
+        maxHeight: node.style.maxHeight,
+        height: node.style.height,
+    }));
+    const previousChrome = cards.map((node) => ({
+        node,
+        ...copyCardChrome(node),
+    }));
+    const previousPadding = paddedNodes.map((node) => ({
+        node,
+        ...copyComputedPadding(node),
+    }));
+    for (const node of expandNodes) {
+        node.style.setProperty("overflow", "visible", "important");
+        node.style.maxHeight = "none";
+        node.style.height = "auto";
+    }
+    return () => {
+        for (const entry of previousExpand) {
+            if (entry.overflow) {
+                entry.node.style.setProperty("overflow", entry.overflow, entry.overflowPriority);
+            }
+            else {
+                entry.node.style.removeProperty("overflow");
+            }
+            entry.node.style.maxHeight = entry.maxHeight;
+            entry.node.style.height = entry.height;
+        }
+        for (const entry of previousChrome) {
+            entry.node.style.borderRadius = entry.borderRadius;
+            entry.node.style.backgroundColor = entry.backgroundColor;
+            if (entry.overflow) {
+                entry.node.style.setProperty("overflow", entry.overflow, entry.overflowPriority);
+            }
+            else {
+                entry.node.style.removeProperty("overflow");
+            }
+            entry.node.style.borderWidth = entry.borderWidth;
+            entry.node.style.borderStyle = entry.borderStyle;
+            entry.node.style.borderColor = entry.borderColor;
+            entry.node.style.minHeight = entry.minHeight;
+            entry.node.style.height = entry.height;
+            entry.node.style.maxHeight = entry.maxHeight;
+        }
+        for (const entry of previousPadding) {
+            entry.node.style.paddingTop = entry.paddingTop;
+            entry.node.style.paddingRight = entry.paddingRight;
+            entry.node.style.paddingBottom = entry.paddingBottom;
+            entry.node.style.paddingLeft = entry.paddingLeft;
+        }
+    };
+}
+export async function captureChartElement(element) {
+    const restoreHidden = revealHiddenChartAncestors(element);
+    const restoreLayout = prepareCaptureLayout(element);
+    element.setAttribute(CHART_EXPORT_CAPTURING_ATTR, "");
+    const restoreCardBefore = hideCardBeforePseudo();
+    try {
+        await new Promise((resolve) => {
+            requestAnimationFrame(() => resolve());
+        });
+        if (element.getBoundingClientRect().width < 1) {
+            await new Promise((resolve) => {
+                requestAnimationFrame(() => resolve());
+            });
+        }
+        return html2canvas(element, {
+            useCORS: true,
+            backgroundColor: LIGHT_EXPORT_BACKGROUND,
+            logging: false,
+            scale: CHART_CAPTURE_SCALE,
+            imageTimeout: 0,
+            ignoreElements: (node) => node instanceof Element &&
+                shouldIgnoreChartExportElement(node, element),
+            onclone: (clonedDoc, clonedElement) => {
+                applyLightThemeToDocument(clonedDoc);
+                applyComputedStylesToClone(element, clonedElement);
+                applyLightThemeSvgText(clonedElement);
+            },
+        });
+    }
+    finally {
+        restoreCardBefore();
+        element.removeAttribute(CHART_EXPORT_CAPTURING_ATTR);
+        restoreLayout();
+        restoreHidden();
+    }
+}

package/dist/report/chartExport.d.ts

@@ -0,0 +1,80 @@
+import type { CSSProperties } from "react";
+export declare const CHART_EXPORT_HIDE_ATTR = "data-chart-export-hide";
+export declare const CHART_EXPORT_SCROLL_ATTR = "data-chart-export-scroll";
+export declare const CHART_EXPORT_CAPTURING_ATTR = "data-chart-capturing";
+export declare const chartExportHideProps: {
+    readonly "data-chart-export-hide": "";
+};
+export declare const chartExportScrollProps: {
+    readonly "data-chart-export-scroll": "";
+};
+export declare const chartExportRootStyle: CSSProperties;
+export type ChartExportMeta = {
+    id: string;
+    title: string;
+    filename?: string;
+};
+export type ChartExportView = {
+    id: string;
+    title: string;
+    filename?: string;
+};
+export type RegisteredChart = {
+    id: string;
+    title: string;
+    filename: string;
+    element: HTMLElement;
+    exportViews?: ChartExportView[];
+    activeExportViewId?: string;
+    setExportView?: (viewId: string) => Promise<void>;
+};
+export type ChartExportFile = {
+    filename: string;
+    blob: Blob;
+};
+export type ChartCaptureSource = {
+    id: string;
+    title: string;
+    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>;
+export declare function sortRegisteredChartsByDocumentOrder(charts: RegisteredChart[]): RegisteredChart[];
+export declare function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob>;
+export declare function slugifyExportName(value: string): string;
+export declare function chartPngFilename(title: string, id?: string): string;
+/**
+ * html2canvas clones the whole document for every capture. Ignore everything
+ * except the target card (and ancestors / stylesheet nodes) so zip-all does
+ * not re-render every other chart.
+ */
+export declare function shouldIgnoreChartExportElement(node: Element, captureRoot?: Element | null): boolean;
+export declare function downloadBlob(blob: Blob, filename: string): void;
+//# sourceMappingURL=chartExport.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chartExport.d.ts","sourceRoot":"","sources":["../../src/report/chartExport.ts"],"names":[],"mappings":"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"}

package/dist/report/chartExport.js

@@ -0,0 +1,182 @@
+export const CHART_EXPORT_HIDE_ATTR = "data-chart-export-hide";
+export const CHART_EXPORT_SCROLL_ATTR = "data-chart-export-scroll";
+export const CHART_EXPORT_CAPTURING_ATTR = "data-chart-capturing";
+export const chartExportHideProps = {
+    [CHART_EXPORT_HIDE_ATTR]: "",
+};
+export const chartExportScrollProps = {
+    [CHART_EXPORT_SCROLL_ATTR]: "",
+};
+export const chartExportRootStyle = {
+    width: "100%",
+    height: "100%",
+};
+export function releaseCanvas(canvas) {
+    canvas.width = 0;
+    canvas.height = 0;
+}
+export function waitForChartExportPaint() {
+    if (typeof requestAnimationFrame !== "function") {
+        return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => resolve());
+        });
+    });
+}
+/** 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,
+        title: `${titlePrefix} — ${label}`,
+    }));
+}
+function shouldCycleExportViews(chart) {
+    return Boolean(chart.exportViews && chart.exportViews.length > 1 && chart.setExportView);
+}
+function bulkExportViews(chart) {
+    if (shouldCycleExportViews(chart) && chart.exportViews) {
+        return chart.exportViews;
+    }
+    return [
+        {
+            id: chart.id,
+            title: chart.title,
+            filename: chart.filename,
+        },
+    ];
+}
+export function toBulkChartCaptureSources(charts, capture, prepareElement) {
+    return charts.flatMap((chart) => {
+        const views = bulkExportViews(chart);
+        const cyclesViews = shouldCycleExportViews(chart);
+        return views.map((view) => ({
+            id: cyclesViews ? `${chart.id}--${view.id}` : chart.id,
+            title: view.title,
+            filename: view.filename ??
+                (cyclesViews
+                    ? chartPngFilename(view.title, `${chart.id}-${view.id}`)
+                    : chart.filename),
+            capture: async () => {
+                const restore = prepareElement?.(chart.element);
+                try {
+                    if (cyclesViews && chart.setExportView) {
+                        await chart.setExportView(view.id);
+                    }
+                    return await capture(chart.element);
+                }
+                finally {
+                    restore?.();
+                }
+            },
+        }));
+    });
+}
+export async function restoreChartExportViews(charts) {
+    for (const chart of charts) {
+        if (shouldCycleExportViews(chart) &&
+            chart.setExportView &&
+            chart.activeExportViewId) {
+            try {
+                await chart.setExportView(chart.activeExportViewId);
+            }
+            catch (error) {
+                console.error("Failed to restore the selected chart view:", error);
+            }
+        }
+    }
+}
+export function sortRegisteredChartsByDocumentOrder(charts) {
+    return [...charts].sort((left, right) => {
+        if (left.element === right.element) {
+            return 0;
+        }
+        const position = left.element.compareDocumentPosition(right.element);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+            return -1;
+        }
+        if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+            return 1;
+        }
+        return 0;
+    });
+}
+export function canvasToBlob(canvas) {
+    return new Promise((resolve, reject) => {
+        if (canvas.width < 1 || canvas.height < 1) {
+            reject(new Error("Failed to encode canvas as PNG"));
+            return;
+        }
+        canvas.toBlob((blob) => {
+            if (blob) {
+                resolve(blob);
+                return;
+            }
+            reject(new Error("Failed to encode canvas as PNG"));
+        }, "image/png");
+    });
+}
+export function slugifyExportName(value) {
+    const slug = value
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-|-$/g, "");
+    return slug || "chart";
+}
+export function chartPngFilename(title, id = "chart") {
+    return `${slugifyExportName(title) || slugifyExportName(id)}.png`;
+}
+const KEEP_TAGS = new Set(["HTML", "HEAD", "BODY", "STYLE", "LINK"]);
+function isHiddenForChartExport(node) {
+    return (node.hasAttribute(CHART_EXPORT_HIDE_ATTR) ||
+        Boolean(node.closest(`[${CHART_EXPORT_HIDE_ATTR}]`)));
+}
+/**
+ * html2canvas clones the whole document for every capture. Ignore everything
+ * except the target card (and ancestors / stylesheet nodes) so zip-all does
+ * not re-render every other chart.
+ */
+export function shouldIgnoreChartExportElement(node, captureRoot) {
+    if (!captureRoot) {
+        return isHiddenForChartExport(node);
+    }
+    if (KEEP_TAGS.has(node.tagName)) {
+        return false;
+    }
+    if (node !== captureRoot &&
+        !captureRoot.contains(node) &&
+        !node.contains(captureRoot)) {
+        return true;
+    }
+    return isHiddenForChartExport(node);
+}
+export function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+}

package/dist/report/chartExportContext.d.ts

@@ -0,0 +1,32 @@
+import { type RefCallback } from "react";
+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>;
+    /**
+     * @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;
+    exportLoadingLabel: string | null;
+    isExportingAll: boolean;
+    isBusy: boolean;
+    exportError: string | null;
+    clearExportError: () => void;
+};
+export type ChartExportRegistry = {
+    register: (chart: RegisteredChart) => () => void;
+};
+export declare const ChartExportRegistryContext: import("react").Context<ChartExportRegistry | null>;
+export declare const ChartExportApiContext: import("react").Context<ChartExportApi | null>;
+export declare function useChartExport(): ChartExportApi | null;
+export declare function useRegisterChart({ id, title, filename, exportViews, activeExportViewId, setExportView, }: ChartExportMeta & {
+    exportViews?: ChartExportView[];
+    activeExportViewId?: string;
+    setExportView?: (viewId: string) => Promise<void>;
+}): RefCallback<HTMLElement>;
+//# sourceMappingURL=chartExportContext.d.ts.map

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

@@ -0,0 +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,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/chartExportContext.js

@@ -0,0 +1,36 @@
+import { createContext, useContext, useEffect, useState, } from "react";
+import { chartPngFilename, } from "./chartExport.js";
+export const ChartExportRegistryContext = createContext(null);
+export const ChartExportApiContext = createContext(null);
+export function useChartExport() {
+    return useContext(ChartExportApiContext);
+}
+export function useRegisterChart({ id, title, filename, exportViews, activeExportViewId, setExportView, }) {
+    const registry = useContext(ChartExportRegistryContext);
+    const [element, setElement] = useState(null);
+    const resolvedFilename = filename ?? chartPngFilename(title, id);
+    useEffect(() => {
+        if (!registry || !element) {
+            return;
+        }
+        return registry.register({
+            id,
+            title,
+            filename: resolvedFilename,
+            element,
+            exportViews,
+            activeExportViewId,
+            setExportView,
+        });
+    }, [
+        activeExportViewId,
+        element,
+        exportViews,
+        id,
+        registry,
+        resolvedFilename,
+        setExportView,
+        title,
+    ]);
+    return setElement;
+}

package/dist/report/chartExportFilenames.d.ts

@@ -0,0 +1,4 @@
+export declare function getDatedChartExportBasename(date?: Date): string;
+export declare function getChartExportFilename(format: "pdf" | "html" | "zip", date?: Date): string;
+export declare function getChartZipFilename(date?: Date): string;
+//# sourceMappingURL=chartExportFilenames.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chartExportFilenames.d.ts","sourceRoot":"","sources":["../../src/report/chartExportFilenames.ts"],"names":[],"mappings":"AAAA,wBAAgB,2BAA2B,CAAC,IAAI,OAAa,GAAG,MAAM,CAKrE;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,EAC9B,IAAI,OAAa,GAChB,MAAM,CAMR;AAED,wBAAgB,mBAAmB,CAAC,IAAI,OAAa,GAAG,MAAM,CAE7D"}

package/dist/report/chartExportFilenames.js

@@ -0,0 +1,16 @@
+export function getDatedChartExportBasename(date = new Date()) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `migration-export-${year}-${month}-${day}`;
+}
+export function getChartExportFilename(format, date = new Date()) {
+    const base = getDatedChartExportBasename(date);
+    if (format === "zip") {
+        return `${base}-charts.zip`;
+    }
+    return `${base}.${format}`;
+}
+export function getChartZipFilename(date = new Date()) {
+    return getChartExportFilename("zip", date);
+}

package/dist/report/constants.d.ts

@@ -19,6 +19,8 @@ export declare const REPORT_CARD_EMPTY_STATE_TITLES: {
     readonly operatingSystems: "Operating system data not collected";
     readonly migrationStatus: "Migration status data not collected";
     readonly issuesBreakdown: "Issues breakdown data not collected";
+    readonly errors: "Error data not collected";
+    readonly warnings: "Warning data not collected";
     readonly hostPowerStates: "Host power state data not collected";
     readonly vmPowerStates: "VM power state data not collected";
 };