fix: table charts should update when underlying data updates (#6809)

## 📝 Summary

<!--
Provide a concise summary of what this pull request is addressing.

If this PR fixes any issues, list them here by number (e.g., Fixes
#123).
-->

Fixes #6791 

## 🔍 Description of Changes

<!--
Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->

## 📋 Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] I have added tests for the changes made.
- [x] I have run the code and verified that it works as expected.

Author: Light2Dark

frontend/src/components/data-table/charts/charts.tsx

@@ -48,6 +48,7 @@ const CHART_HEIGHT = 290;
 
 export interface TablePanelProps {
   cellId: CellId | null;
+  data: unknown[];
   dataTable: JSX.Element;
   displayHeader: boolean;
   getDataUrl?: GetDataUrl;
@@ -56,6 +57,7 @@ export interface TablePanelProps {
 
 export const TablePanel: React.FC<TablePanelProps> = ({
   cellId,
+  data,
   dataTable,
   getDataUrl,
   fieldTypes,
@@ -211,6 +213,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
         return (
           <TabsContent key={idx} value={tab.tabName} className="h-[400px] mt-1">
             <ChartPanel
+              tableData={data}
               chartConfig={tab.config}
               chartType={tab.chartType}
               saveChart={saveChart}
@@ -228,13 +231,15 @@ export const TablePanel: React.FC<TablePanelProps> = ({
 const CHART_PLACEHOLDER_CODE = "X and Y columns are not set";
 
 export const ChartPanel: React.FC<{
+  tableData: unknown[];
   chartConfig: ChartSchemaType | null;
   chartType: ChartType;
   saveChart: (formValues: ChartSchemaType) => void;
   saveChartType: (chartType: ChartType) => void;
   getDataUrl?: GetDataUrl;
   fieldTypes?: FieldTypesWithExternalType | null;
 }> = ({
+  tableData,
   chartConfig,
   chartType,
   saveChart,
@@ -255,7 +260,7 @@ export const ChartPanel: React.FC<{
   const { ref: chartContainerRef } = useResizeObserver();
 
   const { data, isPending, error } = useAsyncData(async () => {
-    if (!getDataUrl) {
+    if (!getDataUrl || tableData.length === 0) {
       return [];
     }
 
@@ -276,7 +281,8 @@ export const ChartPanel: React.FC<{
       },
     );
     return chartData;
-  }, []);
+    // Re-run when the data table changes
+  }, [tableData]);
 
   const formValues = form.watch();
 

frontend/src/plugins/impl/DataTablePlugin.tsx

@@ -691,6 +691,7 @@ export const LoadingDataTableComponent = memo(
         {props.showChartBuilder ? (
           <TablePanel
             displayHeader={displayHeader}
+            data={data?.rows || []}
             dataTable={dataTable}
             getDataUrl={props.get_data_url}
             fieldTypes={props.fieldTypes}