diff --git a/apps/web/src/app/app/(primary_layout)/(chat_experience)/reports/[reportId]/page.tsx b/apps/web/src/app/app/(primary_layout)/(chat_experience)/reports/[reportId]/page.tsx index 6247e7056..f6c0ade61 100644 --- a/apps/web/src/app/app/(primary_layout)/(chat_experience)/reports/[reportId]/page.tsx +++ b/apps/web/src/app/app/(primary_layout)/(chat_experience)/reports/[reportId]/page.tsx @@ -5,5 +5,5 @@ export default async function Page(props: { params: Promise<{ reportId: string } const { reportId } = params; - return ; + return ; } diff --git a/apps/web/src/components/ui/report/elements/MetricElement/MetricContent.tsx b/apps/web/src/components/ui/report/elements/MetricElement/MetricContent.tsx index d0a059a31..052da8b4b 100644 --- a/apps/web/src/components/ui/report/elements/MetricElement/MetricContent.tsx +++ b/apps/web/src/components/ui/report/elements/MetricElement/MetricContent.tsx @@ -10,13 +10,13 @@ export const MetricContent = React.memo( ({ metricId, metricVersionNumber, - isBaseElement = false, + isExportMode = false, readOnly = false }: { metricId: string; metricVersionNumber: number | undefined; readOnly?: boolean; - isBaseElement?: boolean; + isExportMode?: boolean; }) => { const chatId = useChatLayoutContextSelector((x) => x.chatId); const reportId = useChatLayoutContextSelector((x) => x.reportId) || ''; @@ -24,9 +24,9 @@ export const MetricContent = React.memo( const ref = useRef(null); const [inViewport] = useInViewport(ref, { - threshold: isBaseElement ? 0 : 0.33 + threshold: 0.33 }); - const renderChart = inViewport; + const renderChart = inViewport || isExportMode; const { data: metric, @@ -72,8 +72,9 @@ export const MetricContent = React.memo( return ( ) : ( diff --git a/apps/web/src/components/ui/report/useReportEditor.tsx b/apps/web/src/components/ui/report/useReportEditor.tsx index e099cfae2..7e6eab544 100644 --- a/apps/web/src/components/ui/report/useReportEditor.tsx +++ b/apps/web/src/components/ui/report/useReportEditor.tsx @@ -5,13 +5,12 @@ import { useEditorRef, usePlateEditor, type TPlateEditor } from 'platejs/react'; import { useMemo } from 'react'; import { EditorKit } from './editor-kit'; import { FIXED_TOOLBAR_KIT_KEY } from './plugins/fixed-toolbar-kit'; -import { CUSTOM_KEYS } from './config/keys'; import { GlobalVariablePlugin } from './plugins/global-variable-kit'; export const useReportEditor = ({ value, disabled, - mode, + mode = 'default', useFixedToolbarKit = false }: { value: Value; @@ -27,13 +26,11 @@ export const useReportEditor = ({ return [ ...EditorKit, - GlobalVariablePlugin.configurePlugin(GlobalVariablePlugin, { - options: { - mode - } + GlobalVariablePlugin.configure({ + options: { mode } }) - ]; - }, []); + ].filter((p) => !filteredKeys.includes(p.key)); + }, [useFixedToolbarKit, mode]); return usePlateEditor({ plugins, diff --git a/apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx b/apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx index 2cf6a4dce..61de8a4c0 100644 --- a/apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx +++ b/apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx @@ -2,7 +2,7 @@ import { useGetReport, useUpdateReport } from '@/api/buster_rest/reports'; import { cn } from '@/lib/utils'; -import React, { useEffect } from 'react'; +import React from 'react'; import { ReportPageHeader } from './ReportPageHeader'; import { useMemoizedFn } from '@/hooks/useMemoizedFn'; import { useDebounceFn } from '@/hooks/useDebounce'; diff --git a/apps/web/src/controllers/ReportPageControllers/useReportPageExport.tsx b/apps/web/src/controllers/ReportPageControllers/useReportPageExport.tsx index cfc1fe26f..67622fd04 100644 --- a/apps/web/src/controllers/ReportPageControllers/useReportPageExport.tsx +++ b/apps/web/src/controllers/ReportPageControllers/useReportPageExport.tsx @@ -4,6 +4,7 @@ import { useMemoizedFn } from '@/hooks/useMemoizedFn'; import { useRef, useState } from 'react'; import { ReportPageController } from './ReportPageController'; import { printHTMLPage } from '@/lib/print'; +import { timeout } from '@/lib'; const ExportContainerComponent: React.FC<{ reportId: string; @@ -18,13 +19,15 @@ const ExportContainerComponent: React.FC<{ ref={ref} style={{ width: '820px', + minWidth: '820px', + maxWidth: '820px', height: '100%', position: 'fixed', top: 0, - left: -1, + left: 0, right: 0, bottom: 0, - zIndex: 100 + zIndex: -1 }}> @@ -63,10 +66,11 @@ export const useReportPageExport = ({ const buildHtmlMethod = useMemoizedFn(async (node: HTMLElement, title: string) => { try { + await timeout(150); //wait for chart nodes to be rendered const result = await buildExportHtml({ root: node, title }); printHTMLPage({ html: result, filename: title, closeOnPrint: false }); } finally { - setIsExportingReport(false); + // setIsExportingReport(false); } }); @@ -156,6 +160,13 @@ const buildExportHtml = async (options?: { clone.removeAttribute('spellcheck'); } + // Ensure the cloned root has no padding and full width + const existingStyle = clonedRoot.getAttribute('style') || ''; + clonedRoot.setAttribute( + 'style', + `${existingStyle}; width: 100%; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: visible;`.trim() + ); + // Wrap content with a fixed width, centered container for consistency const wrapper = document.createElement('div'); wrapper.setAttribute(