Fullscreen from the legend

Author: matt-aitken

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

@@ -28,6 +28,8 @@ interface QueryResultsChartProps {
   columns: OutputColumnMetadata[];
   config: ChartConfiguration;
   fullLegend?: boolean;
+  /** Callback when "View all" legend button is clicked */
+  onViewAllLegendItems?: () => void;
 }
 
 interface TransformedData {
@@ -699,6 +701,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
   columns,
   config,
   fullLegend = false,
+  onViewAllLegendItems,
 }: QueryResultsChartProps) {
   const {
     xAxisColumn,
@@ -853,6 +856,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
         showLegend={showLegend}
         maxLegendItems={fullLegend ? Infinity : 5}
         minHeight="300px"
+        onViewAllLegendItems={onViewAllLegendItems}
       >
         <Chart.Bar
           xAxisProps={xAxisPropsForBar}
@@ -875,6 +879,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
       showLegend={showLegend}
       maxLegendItems={fullLegend ? Infinity : 5}
       minHeight="300px"
+      onViewAllLegendItems={onViewAllLegendItems}
     >
       <Chart.Line
         xAxisProps={xAxisPropsForLine}

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

@@ -15,6 +15,8 @@ export type ChartLegendCompoundProps = {
   className?: string;
   /** Label for the total row */
   totalLabel?: string;
+  /** Callback when "View all" button is clicked */
+  onViewAllLegendItems?: () => void;
 };
 
 /**
@@ -34,6 +36,7 @@ export function ChartLegendCompound({
   hidden = false,
   className,
   totalLabel = "Total",
+  onViewAllLegendItems,
 }: ChartLegendCompoundProps) {
   const { config, dataKey, dataKeys, highlight, labelFormatter } = useChartContext();
   const totals = useSeriesTotal();
@@ -194,19 +197,26 @@ export function ChartLegendCompound({
             remainingCount={legendItems.remaining - 1}
           />
         ) : (
-          <ViewAllDataRow remainingCount={legendItems.remaining} />
+          <ViewAllDataRow remainingCount={legendItems.remaining} onViewAll={onViewAllLegendItems} />
         ))}
     </div>
   );
 }
 
 type ViewAllDataRowProps = {
   remainingCount: number;
+  onViewAll?: () => void;
 };
 
-function ViewAllDataRow({ remainingCount }: ViewAllDataRowProps) {
+function ViewAllDataRow({ remainingCount, onViewAll }: ViewAllDataRowProps) {
   return (
-    <Button variant="minimal/small" fullWidth iconSpacing="justify-between" className="px-2 py-1">
+    <Button
+      variant="minimal/small"
+      fullWidth
+      iconSpacing="justify-between"
+      className="px-2 py-1"
+      onClick={onViewAll}
+    >
       <div className="flex items-center gap-1.5 text-text-dimmed">
         <div className="h-3 w-1 rounded-[2px] border border-charcoal-600" />
         <Paragraph variant="extra-small" className="tabular-nums">

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

@@ -29,6 +29,8 @@ export type ChartRootProps = {
   maxLegendItems?: number;
   /** Label for the total row in the legend */
   legendTotalLabel?: string;
+  /** Callback when "View all" legend button is clicked */
+  onViewAllLegendItems?: () => void;
   children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
 };
 
@@ -67,6 +69,7 @@ export function ChartRoot({
   showLegend = false,
   maxLegendItems = 5,
   legendTotalLabel,
+  onViewAllLegendItems,
   children,
 }: ChartRootProps) {
   return (
@@ -87,6 +90,7 @@ export function ChartRoot({
         showLegend={showLegend}
         maxLegendItems={maxLegendItems}
         legendTotalLabel={legendTotalLabel}
+        onViewAllLegendItems={onViewAllLegendItems}
       >
         {children}
       </ChartRootInner>
@@ -100,6 +104,7 @@ type ChartRootInnerProps = {
   showLegend?: boolean;
   maxLegendItems?: number;
   legendTotalLabel?: string;
+  onViewAllLegendItems?: () => void;
   children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
 };
 
@@ -109,6 +114,7 @@ function ChartRootInner({
   showLegend = false,
   maxLegendItems = 5,
   legendTotalLabel,
+  onViewAllLegendItems,
   children,
 }: ChartRootInnerProps) {
   const { config, zoom } = useChartContext();
@@ -134,7 +140,11 @@ function ChartRootInner({
       </div>
       {/* Legend rendered outside the chart container */}
       {showLegend && (
-        <ChartLegendCompound maxItems={maxLegendItems} totalLabel={legendTotalLabel} />
+        <ChartLegendCompound
+          maxItems={maxLegendItems}
+          totalLabel={legendTotalLabel}
+          onViewAllLegendItems={onViewAllLegendItems}
+        />
       )}
     </div>
   );

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

@@ -872,7 +872,7 @@ function ResultsChart({
               </Card.Accessory>
             </Card.Header>
             <Card.Content>
-              <QueryResultsChart rows={rows} columns={columns} config={chartConfig} />
+              <QueryResultsChart rows={rows} columns={columns} config={chartConfig} onViewAllLegendItems={() => setIsOpen(true)} />
             </Card.Content>
           </Card>