From 8feff47f4cfc90288754faa08de61056c9fc9dd0 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Fri, 8 Aug 2025 17:27:28 -0600 Subject: [PATCH 1/2] add better export settings --- .../(chat_experience)/reports/[reportId]/page.tsx | 2 +- .../report/elements/MetricElement/MetricContent.tsx | 8 ++++---- .../report/elements/MetricElement/MetricElement.tsx | 5 +---- .../src/components/ui/report/useReportEditor.tsx | 13 +++++-------- .../ReportPageControllers/ReportPageController.tsx | 2 +- 5 files changed, 12 insertions(+), 18 deletions(-) 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..688e7734e 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,7 +24,7 @@ export const MetricContent = React.memo( const ref = useRef(null); const [inViewport] = useInViewport(ref, { - threshold: isBaseElement ? 0 : 0.33 + threshold: isExportMode ? 0 : 0.33 }); const renderChart = inViewport; @@ -73,7 +73,7 @@ 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'; From a175d11492a35491044b5c17031624e52497e8cc Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Fri, 8 Aug 2025 17:36:30 -0600 Subject: [PATCH 2/2] existing stlye update --- .../elements/MetricElement/MetricContent.tsx | 5 +++-- .../useReportPageExport.tsx | 19 +++++++++++++++---- 2 files changed, 18 insertions(+), 6 deletions(-) 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 688e7734e..052da8b4b 100644 --- a/apps/web/src/components/ui/report/elements/MetricElement/MetricContent.tsx +++ b/apps/web/src/components/ui/report/elements/MetricElement/MetricContent.tsx @@ -24,9 +24,9 @@ export const MetricContent = React.memo( const ref = useRef(null); const [inViewport] = useInViewport(ref, { - threshold: isExportMode ? 0 : 0.33 + threshold: 0.33 }); - const renderChart = inViewport; + const renderChart = inViewport || isExportMode; const { data: metric, @@ -72,6 +72,7 @@ export const MetricContent = React.memo( return ( @@ -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(