Fit the chart in the container (inc legend)

Author: matt-aitken

apps/webapp/app/components/code/QueryResultsChart.tsx

@@ -856,6 +856,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
         showLegend={showLegend}
         maxLegendItems={fullLegend ? Infinity : 5}
         minHeight="300px"
+        fillContainer
         onViewAllLegendItems={onViewAllLegendItems}
       >
         <Chart.Bar
@@ -879,6 +880,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
       showLegend={showLegend}
       maxLegendItems={fullLegend ? Infinity : 5}
       minHeight="300px"
+      fillContainer
       onViewAllLegendItems={onViewAllLegendItems}
     >
       <Chart.Line

apps/webapp/app/components/primitives/charts/ChartRoot.tsx

@@ -31,6 +31,8 @@ export type ChartRootProps = {
   legendTotalLabel?: string;
   /** Callback when "View all" legend button is clicked */
   onViewAllLegendItems?: () => void;
+  /** When true, chart fills its parent container height and distributes space between chart and legend */
+  fillContainer?: boolean;
   children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
 };
 
@@ -70,6 +72,7 @@ export function ChartRoot({
   maxLegendItems = 5,
   legendTotalLabel,
   onViewAllLegendItems,
+  fillContainer = false,
   children,
 }: ChartRootProps) {
   return (
@@ -91,6 +94,7 @@ export function ChartRoot({
         maxLegendItems={maxLegendItems}
         legendTotalLabel={legendTotalLabel}
         onViewAllLegendItems={onViewAllLegendItems}
+        fillContainer={fillContainer}
       >
         {children}
       </ChartRootInner>
@@ -105,6 +109,7 @@ type ChartRootInnerProps = {
   maxLegendItems?: number;
   legendTotalLabel?: string;
   onViewAllLegendItems?: () => void;
+  fillContainer?: boolean;
   children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
 };
 
@@ -115,25 +120,36 @@ function ChartRootInner({
   maxLegendItems = 5,
   legendTotalLabel,
   onViewAllLegendItems,
+  fillContainer = false,
   children,
 }: ChartRootInnerProps) {
   const { config, zoom } = useChartContext();
   const enableZoom = zoom !== null;
 
   return (
-    <div className={cn("relative flex w-full flex-col", className)}>
+    <div
+      className={cn(
+        "relative flex w-full flex-col",
+        fillContainer && "h-full",
+        className
+      )}
+    >
       <div
-        className={cn("h-full w-full", enableZoom && "mt-8 cursor-crosshair")}
+        className={cn(
+          fillContainer ? "min-h-0 flex-1" : "h-full w-full",
+          enableZoom && "mt-8 cursor-crosshair"
+        )}
         style={{ touchAction: "none", userSelect: "none" }}
       >
         <ChartContainer
           config={config}
           className={cn(
             "h-full w-full",
+            fillContainer && "!aspect-auto",
             enableZoom &&
               "[&_.recharts-surface]:cursor-crosshair [&_.recharts-wrapper]:cursor-crosshair"
           )}
-          style={minHeight ? { minHeight } : undefined}
+          style={fillContainer ? undefined : minHeight ? { minHeight } : undefined}
         >
           {children}
         </ChartContainer>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx

@@ -860,8 +860,8 @@ function ResultsChart({
   return (
     <><ResizablePanelGroup className="h-full overflow-hidden">
       <ResizablePanel id="chart-results">
-        <div className="h-full bg-charcoal-900 p-2 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-          <Card>
+        <div className="h-full bg-charcoal-900 p-2 overflow-hidden">
+          <Card className="h-full">
             <Card.Header>
               <div className="flex items-center gap-1.5">
                 <ArrowTrendingUpIcon className="size-5 text-indigo-500" />
@@ -871,7 +871,7 @@ function ResultsChart({
                 <Button variant="minimal/small" LeadingIcon={ArrowsPointingOutIcon} onClick={() => setIsOpen(true)} />
               </Card.Accessory>
             </Card.Header>
-            <Card.Content>
+            <Card.Content className="h-full flex-1 min-h-0">
               <QueryResultsChart rows={rows} columns={columns} config={chartConfig} onViewAllLegendItems={() => setIsOpen(true)} />
             </Card.Content>
           </Card>
@@ -888,7 +888,7 @@ function ResultsChart({
           <DialogHeader>
             Chart
           </DialogHeader>
-          <div className="overflow-hidden w-full">
+          <div className="h-full min-h-0 flex-1 overflow-hidden w-full pt-4">
             <QueryResultsChart rows={rows} columns={columns} config={chartConfig} fullLegend={true} />
           </div>
         </DialogContent>