Merge pull request #840 from objectstack-ai/copilot/fix-dashboard-chart-rendering

Author: hotlong

ROADMAP.md

@@ -864,6 +864,7 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 - [x] **P2: i18n (10 locales)** — Full CRM metadata translations for en, zh, ja, ko, de, fr, es, pt, ru, ar — objects, fields, fieldOptions, navigation, actions, views, formSections, dashboard, reports, pages (24 tests)
 - [x] **P2: Full Examples Metadata Audit** — Systematic spec compliance audit across all 4 examples: added `type: 'dashboard'` + `description` to todo/kitchen-sink dashboards, refactored msw-todo to use `ObjectSchema.create` + `Field.*` with snake_case field names, added explicit views to kitchen-sink and msw-todo, added missing `successMessage` on CRM opportunity action, 21 automated compliance tests
 - [x] **P2: CRM Dashboard Full provider:'object' Adaptation** — Converted all chart and table widgets in CRM dashboard from static `provider: 'value'` to dynamic `provider: 'object'` with aggregation configs. 12 widgets total: 4 KPI metrics (static), 7 charts (sum/count/avg/max aggregation across opportunity, product, order objects), 1 table (dynamic fetch). Cross-object coverage (order), diverse aggregate functions (sum, count, avg, max). Fixed table `close_date` field alignment. Added i18n for 2 new widgets (10 locales). 9 new CRM metadata tests, 6 new DashboardRenderer rendering tests (area/donut/line/cross-object + edge cases). All provider:'object' paths covered.
+- [x] **P1: Dashboard provider:'object' Crash & Blank Rendering Fixes** — Fixed 3 critical bugs causing all charts to be blank and tables to crash on provider:'object' dashboards: (1) DashboardRenderer `...options` spread was leaking provider config objects as `data` in data-table and pivot schemas — fixed by destructuring `data` out before spread, (2) DataTableRenderer and PivotTable now guard with `Array.isArray()` for graceful degradation when non-array data arrives, (3) ObjectChart now shows visible loading/warning messages instead of silently rendering blank when `dataSource` is missing. Also added provider:'object' support to DashboardGridLayout (charts, tables, pivots). 2 new regression tests.
 
 ### Ecosystem & Marketplace
 - Plugin marketplace website with search, ratings, and install count

packages/components/src/renderers/complex/data-table.tsx

@@ -91,7 +91,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
   const {
     caption,
     columns: rawColumns = [],
-    data = [],
+    data: rawData = [],
     pagination = true,
     pageSize: initialPageSize = 10,
     searchable = true,
@@ -109,6 +109,10 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     showAddRow = false,
   } = schema;
 
+  // Ensure data is always an array – provider config objects or null/undefined
+  // must not reach array operations like .filter() / .some()
+  const data = Array.isArray(rawData) ? rawData : [];
+
   // Normalize columns to support legacy keys (label/name) from existing JSONs
   const initialColumns = useMemo(() => {
     return rawColumns.map((col: any) => ({

packages/plugin-charts/src/ObjectChart.tsx

@@ -104,9 +104,11 @@ export const ObjectChart = (props: any) => {
   };
 
   if (loading && finalData.length === 0) {
-      // Return skeleton or loading state?
-      // ChartRenderer has suspense/skeleton handling but needs to be triggered.
-      // We pass empty data but it might render empty chart.
+      return <div className={"flex items-center justify-center text-muted-foreground text-sm p-4 " + (schema.className || '')}>Loading chart data…</div>;
+  }
+
+  if (!dataSource && schema.objectName && finalData.length === 0) {
+      return <div className={"flex items-center justify-center text-muted-foreground text-sm p-4 " + (schema.className || '')}>No data source available for "{schema.objectName}"</div>;
   }
 
   return <ChartRenderer {...props} schema={finalSchema} />;

packages/plugin-dashboard/src/DashboardGridLayout.tsx

@@ -5,6 +5,7 @@ import { cn, Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui
 import { Edit, GripVertical, Save, X, RefreshCw } from 'lucide-react';
 import { SchemaRenderer, useHasDndProvider, useDnd } from '@object-ui/react';
 import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
+import { isObjectProvider } from './utils';
 
 /** Bridges editMode transitions to the ObjectUI DnD system when a DndProvider is present. */
 function DndEditModeBridge({ editMode }: { editMode: boolean }) {
@@ -130,9 +131,25 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
     const options = (widget.options || {}) as Record<string, any>;
     if (widgetType === 'bar' || widgetType === 'line' || widgetType === 'area' || widgetType === 'pie' || widgetType === 'donut') {
       const widgetData = (widget as any).data || options.data;
-      const dataItems = Array.isArray(widgetData) ? widgetData : widgetData?.items || [];
       const xAxisKey = options.xField || 'name';
       const yField = options.yField || 'value';
+
+      // provider: 'object' — delegate to ObjectChart for async data loading
+      if (isObjectProvider(widgetData)) {
+        const effectiveYField = widgetData.aggregate?.field || yField;
+        return {
+          type: 'object-chart',
+          chartType: widgetType,
+          objectName: widgetData.object || widget.object,
+          aggregate: widgetData.aggregate,
+          xAxisKey: xAxisKey,
+          series: [{ dataKey: effectiveYField }],
+          colors: CHART_COLORS,
+          className: "h-full"
+        };
+      }
+
+      const dataItems = Array.isArray(widgetData) ? widgetData : widgetData?.items || [];
 
       return {
         type: 'chart',
@@ -147,6 +164,22 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
 
     if (widgetType === 'table') {
       const widgetData = (widget as any).data || options.data;
+
+      // provider: 'object' — pass through object config for async data loading
+      if (isObjectProvider(widgetData)) {
+        const { data: _data, ...restOptions } = options;
+        return {
+          type: 'data-table',
+          ...restOptions,
+          objectName: widgetData.object || widget.object,
+          dataProvider: widgetData,
+          data: [],
+          searchable: false,
+          pagination: false,
+          className: "border-0"
+        };
+      }
+
       return {
         type: 'data-table',
         ...options,
@@ -157,6 +190,28 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
       };
     }
 
+    if (widgetType === 'pivot') {
+      const widgetData = (widget as any).data || options.data;
+
+      // provider: 'object' — pass through object config for async data loading
+      if (isObjectProvider(widgetData)) {
+        const { data: _data, ...restOptions } = options;
+        return {
+          type: 'pivot',
+          ...restOptions,
+          objectName: widgetData.object || widget.object,
+          dataProvider: widgetData,
+          data: [],
+        };
+      }
+
+      return {
+        type: 'pivot',
+        ...options,
+        data: Array.isArray(widgetData) ? widgetData : widgetData?.items || [],
+      };
+    }
+
     return {
       ...widget,
       ...options

packages/plugin-dashboard/src/DashboardRenderer.tsx

@@ -11,6 +11,7 @@ import { SchemaRenderer } from '@object-ui/react';
 import { cn, Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui/components';
 import { forwardRef, useState, useEffect, useCallback, useRef } from 'react';
 import { RefreshCw } from 'lucide-react';
+import { isObjectProvider } from './utils';
 
 // Color palette for charts
 const CHART_COLORS = [
@@ -21,16 +22,6 @@ const CHART_COLORS = [
   'hsl(var(--chart-5))',
 ];
 
-/** Returns true when the widget data config uses provider: 'object' (async data source). */
-function isObjectProvider(widgetData: unknown): widgetData is { provider: 'object'; object?: string; aggregate?: any } {
-  return (
-    widgetData != null &&
-    typeof widgetData === 'object' &&
-    !Array.isArray(widgetData) &&
-    (widgetData as any).provider === 'object'
-  );
-}
-
 export interface DashboardRendererProps {
   schema: DashboardSchema;
   className?: string;
@@ -164,11 +155,13 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
 
                 // provider: 'object' — pass through object config for async data loading
                 if (isObjectProvider(widgetData)) {
+                    const { data: _data, ...restOptions } = options;
                     return {
                         type: 'data-table',
-                        ...options,
+                        ...restOptions,
                         objectName: widgetData.object || widget.object,
                         dataProvider: widgetData,
+                        data: [],
                         searchable: false,
                         pagination: false,
                         className: "border-0"
@@ -190,11 +183,13 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
 
                 // provider: 'object' — pass through object config for async data loading
                 if (isObjectProvider(widgetData)) {
+                    const { data: _data, ...restOptions } = options;
                     return {
                         type: 'pivot',
-                        ...options,
+                        ...restOptions,
                         objectName: widgetData.object || widget.object,
                         dataProvider: widgetData,
+                        data: [],
                     };
                 }
 

packages/plugin-dashboard/src/PivotTable.tsx

@@ -95,13 +95,16 @@ export const PivotTable: React.FC<PivotTableProps> = ({ schema, className }) =>
     columnField,
     valueField,
     aggregation = 'sum',
-    data = [],
+    data: rawData = [],
     showRowTotals = false,
     showColumnTotals = false,
     format,
     columnColors,
   } = schema;
 
+  // Ensure data is always an array – provider config objects must not reach iteration
+  const data = Array.isArray(rawData) ? rawData : [];
+
   const { rowKeys, colKeys, matrix, rowTotals, colTotals, grandTotal } = useMemo(() => {
     // Collect unique row/column values preserving insertion order
     const rowSet = new Map<string, true>();

packages/plugin-dashboard/src/__tests__/DashboardRenderer.widgetData.test.tsx

@@ -659,4 +659,70 @@ describe('DashboardRenderer widget data extraction', () => {
     expect(chartSchema).toBeDefined();
     expect(chartSchema.data).toEqual([]);
   });
+
+  it('should not crash data-table when provider:object leaks data config via options spread', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'table',
+          title: 'Provider Object Table',
+          object: 'opportunity',
+          layout: { x: 0, y: 0, w: 4, h: 2 },
+          options: {
+            columns: [
+              { header: 'Name', accessorKey: 'name' },
+              { header: 'Amount', accessorKey: 'amount' },
+            ],
+            data: {
+              provider: 'object',
+              object: 'opportunity',
+            },
+          },
+        },
+      ],
+    } as any;
+
+    // Must render without throwing. Previously this crashed with
+    // "paginatedData.some is not a function" because the provider
+    // config object leaked through as data.
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    expect(container).toBeDefined();
+    // The component should not show a crash error
+    expect(container.textContent).not.toContain('is not a function');
+  });
+
+  it('should not crash pivot table when provider:object leaks data config via options spread', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'pivot',
+          title: 'Provider Object Pivot',
+          object: 'sales',
+          layout: { x: 0, y: 0, w: 4, h: 2 },
+          options: {
+            rowField: 'region',
+            columnField: 'quarter',
+            valueField: 'revenue',
+            data: {
+              provider: 'object',
+              object: 'sales',
+            },
+          },
+        },
+      ],
+    } as any;
+
+    // Must render without throwing. Previously this crashed with
+    // "data is not iterable" because the provider config object
+    // leaked through as data.
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    expect(container).toBeDefined();
+    expect(container.textContent).not.toContain('is not iterable');
+  });
 });

packages/plugin-dashboard/src/utils.ts

@@ -0,0 +1,17 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** Returns true when the widget data config uses provider: 'object' (async data source). */
+export function isObjectProvider(widgetData: unknown): widgetData is { provider: 'object'; object?: string; aggregate?: any } {
+  return (
+    widgetData != null &&
+    typeof widgetData === 'object' &&
+    !Array.isArray(widgetData) &&
+    (widgetData as any).provider === 'object'
+  );
+}