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(