diff --git a/apps/web/src/components/features/metrics/MetricChartCard/MetricChartCard.tsx b/apps/web/src/components/features/metrics/MetricChartCard/MetricChartCard.tsx index 6967bbe5f..a3f1b9bcd 100644 --- a/apps/web/src/components/features/metrics/MetricChartCard/MetricChartCard.tsx +++ b/apps/web/src/components/features/metrics/MetricChartCard/MetricChartCard.tsx @@ -153,7 +153,7 @@ const MetricViewChartCardContainer = React.forwardRef< >(({ children, loadingData, hasData, errorData, isTable, className }, ref) => { const cardClass = React.useMemo(() => { if (loadingData || errorData || !hasData) return 'h-full max-h-[600px]'; - if (isTable) return ''; + if (isTable) return 'h-full'; return 'h-full max-h-[600px]'; }, [isTable, loadingData, hasData, errorData]); @@ -162,7 +162,7 @@ const MetricViewChartCardContainer = React.forwardRef<
x?.chart_config?.selectedChartType, []) } + ); + const isTable = selectedChartType === 'table'; + const content = metricId ? ( - + = ({ children }) => { +const MetricResizeContainer: React.FC> = ({ + children, + isTable, +}) => { const width = (useResizableValue('width') as number) || 700; const ref = useRef(null); const element = useElement(); const editor = useEditorRef(); const editorWidth = useSize(ref)?.width ?? 700; const isSelected = useSelected(); - // const { isDragging, handleRef } = useDraggable({ - // element: element, - // }); const align = 'center'; // Default align for metrics const selectNode = () => { @@ -86,11 +94,11 @@ const MetricResizeContainer: React.FC = ({ children }) => { }; const height = useMemo(() => { + if (isTable) return undefined; const ratio = 9 / 16; if (typeof width !== 'number') return (editorWidth ?? 400) * ratio; - return width * ratio; - }, [width, editorWidth]); + }, [width, editorWidth, isTable]); return (
= ({ children }) => {