Merge pull request #836 from objectstack-ai/copilot/fix-revenue-by-account-chart

Author: hotlong

ROADMAP.md

@@ -856,6 +856,7 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 - [x] **P1: Opportunity ↔ Contact Junction** — `opportunity_contacts` object with role-based relationships + 7 seed records
 - [x] **P1: Contact ↔ Event Attendees** — `participants` field populated on all event seed data
 - [x] **P2: Dashboard Dynamic Data** — "Revenue by Account" widget using `provider: 'object'` aggregation. DashboardRenderer now delegates `provider: 'object'` widgets to ObjectChart (`type: 'object-chart'`) for async data loading + client-side aggregation (sum/count/avg/min/max)
+- [x] **P2: Fix Revenue by Account Chart** — Fixed 3 bugs preventing "Revenue by Account" chart from displaying data: (1) ObjectChart `extractRecords()` now handles `results.data` and `results.value` response formats in addition to `results.records`, (2) DashboardRenderer auto-adapts series `dataKey` from `aggregate.field` when aggregate config is present, (3) CRM dashboard `yField` aligned to aggregate field `amount` (was `total`). Centralized `extractRecords()` utility in `@object-ui/core` and unified data extraction across all 6 data components (ObjectChart, ObjectMap, ObjectCalendar, ObjectGantt, ObjectTimeline, ObjectKanban). Added 16 new tests.
 - [x] **P2: App Branding** — `logo`, `favicon`, `backgroundColor` fields on CRM app
 - [x] **P3: Pages** — Settings page (utility) and Getting Started page (onboarding)
 - [x] **P2: Spec Compliance Audit** — Fixed `variant: 'danger'` → `'destructive'` (4 actions), `columns: string` → `number` (33 form sections), added `type: 'dashboard'` to dashboard

examples/crm/src/dashboards/crm.dashboard.ts

@@ -181,12 +181,12 @@ export const CrmDashboard = {
         type: 'bar' as const,
         object: 'opportunity',
         categoryField: 'account',
-        valueField: 'total',
+        valueField: 'amount',
         aggregate: 'sum',
         layout: { x: 0, y: 7, w: 4, h: 2 },
         options: {
             xField: 'account',
-            yField: 'total',
+            yField: 'amount',
             data: {
                 provider: 'object' as const,
                 object: 'opportunity',

packages/core/src/index.ts

@@ -15,6 +15,7 @@ export * from './validation/index.js';
 export * from './builder/schema-builder.js';
 export * from './utils/filter-converter.js';
 export * from './utils/normalize-quick-filter.js';
+export * from './utils/extract-records.js';
 export * from './evaluator/index.js';
 export * from './actions/index.js';
 export * from './query/index.js';

packages/core/src/utils/__tests__/extract-records.test.ts

@@ -0,0 +1,50 @@
+/**
+ * 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.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { extractRecords } from '../extract-records';
+
+describe('extractRecords', () => {
+  const sampleData = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
+
+  it('should return the array directly when results is an array', () => {
+    expect(extractRecords(sampleData)).toEqual(sampleData);
+  });
+
+  it('should extract from results.records', () => {
+    expect(extractRecords({ records: sampleData })).toEqual(sampleData);
+  });
+
+  it('should extract from results.data', () => {
+    expect(extractRecords({ data: sampleData })).toEqual(sampleData);
+  });
+
+  it('should extract from results.value', () => {
+    expect(extractRecords({ value: sampleData })).toEqual(sampleData);
+  });
+
+  it('should return empty array for null/undefined', () => {
+    expect(extractRecords(null)).toEqual([]);
+    expect(extractRecords(undefined)).toEqual([]);
+  });
+
+  it('should return empty array for non-array/non-object', () => {
+    expect(extractRecords('string')).toEqual([]);
+    expect(extractRecords(42)).toEqual([]);
+  });
+
+  it('should return empty array for object without recognized keys', () => {
+    expect(extractRecords({ total: 100 })).toEqual([]);
+  });
+
+  it('should prefer records over data and value', () => {
+    const records = [{ id: 1 }];
+    const data = [{ id: 2 }];
+    expect(extractRecords({ records, data })).toEqual(records);
+  });
+});

packages/core/src/utils/extract-records.ts

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+
+/**
+ * Extract an array of records from various API response formats.
+ * Supports: raw array, { records: [] }, { data: [] }, { value: [] }.
+ *
+ * This utility normalises the different shapes returned by ObjectStack,
+ * OData, and MSW mock endpoints so that every data-fetching component
+ * can rely on a single extraction path.
+ */
+export function extractRecords(results: unknown): any[] {
+  if (Array.isArray(results)) {
+    return results;
+  }
+  if (results && typeof results === 'object') {
+    if (Array.isArray((results as any).records)) {
+      return (results as any).records;
+    }
+    if (Array.isArray((results as any).data)) {
+      return (results as any).data;
+    }
+    if (Array.isArray((results as any).value)) {
+      return (results as any).value;
+    }
+  }
+  return [];
+}

packages/plugin-calendar/src/ObjectCalendar.tsx

@@ -28,6 +28,7 @@ import { CalendarView, type CalendarEvent } from './CalendarView';
 import { usePullToRefresh } from '@object-ui/mobile';
 import { useNavigationOverlay } from '@object-ui/react';
 import { NavigationOverlay } from '@object-ui/components';
+import { extractRecords } from '@object-ui/core';
 
 export interface CalendarSchema {
   type: 'calendar';
@@ -219,17 +220,7 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
             $orderby: convertSortToQueryParams(schema.sort),
           });
 
-          let items: any[] = [];
-          
-          if (Array.isArray(result)) {
-            items = result;
-          } else if (result && typeof result === 'object') {
-            if (Array.isArray((result as any).data)) {
-              items = (result as any).data;
-            } else if (Array.isArray((result as any).value)) {
-              items = (result as any).value;
-            }
-          }
+          let items: any[] = extractRecords(result);
 
           if (isMounted) {
             setData(items);

packages/plugin-charts/src/ObjectChart.tsx

@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import { useDataScope, useSchemaContext } from '@object-ui/react';
 import { ChartRenderer } from './ChartRenderer';
-import { ComponentRegistry } from '@object-ui/core';
+import { ComponentRegistry, extractRecords } from '@object-ui/core';
 
 /**
  * Client-side aggregation for fetched records.
@@ -49,6 +49,9 @@ export function aggregateRecords(
   });
 }
 
+// Re-export extractRecords from @object-ui/core for backward compatibility
+export { extractRecords } from '@object-ui/core';
+
 export const ObjectChart = (props: any) => {
   const { schema } = props;
   const context = useSchemaContext();
@@ -68,14 +71,7 @@ export const ObjectChart = (props: any) => {
                $filter: schema.filter
             });
 
-            let data: any[] = [];
-            if (Array.isArray(results)) {
-                data = results;
-            } else if (results && typeof results === 'object') {
-                if (Array.isArray((results as any).records)) {
-                    data = (results as any).records;
-                }
-            }
+            let data: any[] = extractRecords(results);
 
             // Apply client-side aggregation when aggregate config is provided
             if (schema.aggregate && data.length > 0) {

packages/plugin-charts/src/__tests__/ObjectChart.aggregation.test.ts

@@ -7,7 +7,7 @@
  */
 
 import { describe, it, expect } from 'vitest';
-import { aggregateRecords } from '../ObjectChart';
+import { aggregateRecords, extractRecords } from '../ObjectChart';
 
 describe('aggregateRecords', () => {
   const records = [
@@ -124,3 +124,43 @@ describe('aggregateRecords', () => {
     expect(result[0].amount).toBe(100); // non-numeric value coerced to 0, sum is 0 + 100
   });
 });
+
+describe('extractRecords', () => {
+  const sampleData = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
+
+  it('should return the array directly when results is an array', () => {
+    expect(extractRecords(sampleData)).toEqual(sampleData);
+  });
+
+  it('should extract from results.records', () => {
+    expect(extractRecords({ records: sampleData })).toEqual(sampleData);
+  });
+
+  it('should extract from results.data', () => {
+    expect(extractRecords({ data: sampleData })).toEqual(sampleData);
+  });
+
+  it('should extract from results.value', () => {
+    expect(extractRecords({ value: sampleData })).toEqual(sampleData);
+  });
+
+  it('should return empty array for null/undefined', () => {
+    expect(extractRecords(null)).toEqual([]);
+    expect(extractRecords(undefined)).toEqual([]);
+  });
+
+  it('should return empty array for non-array/non-object', () => {
+    expect(extractRecords('string')).toEqual([]);
+    expect(extractRecords(42)).toEqual([]);
+  });
+
+  it('should return empty array for object without recognized keys', () => {
+    expect(extractRecords({ total: 100 })).toEqual([]);
+  });
+
+  it('should prefer records over data and value', () => {
+    const records = [{ id: 1 }];
+    const data = [{ id: 2 }];
+    expect(extractRecords({ records, data })).toEqual(records);
+  });
+});

packages/plugin-dashboard/src/DashboardRenderer.tsx

@@ -129,13 +129,17 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
 
                 // provider: 'object' — delegate to ObjectChart for async data loading
                 if (isObjectProvider(widgetData)) {
+                    // When aggregate is configured, use the aggregate field as the
+                    // series dataKey so it matches the output of aggregateRecords()
+                    // which produces { [groupBy]: key, [field]: result }.
+                    const effectiveYField = widgetData.aggregate?.field || yField;
                     return {
                         type: 'object-chart',
                         chartType: widgetType,
                         objectName: widgetData.object || widget.object,
                         aggregate: widgetData.aggregate,
                         xAxisKey: xAxisKey,
-                        series: [{ dataKey: yField }],
+                        series: [{ dataKey: effectiveYField }],
                         colors: CHART_COLORS,
                         className: "h-[200px] sm:h-[250px] md:h-[300px]"
                     };

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

@@ -296,7 +296,7 @@ describe('DashboardRenderer widget data extraction', () => {
       groupBy: 'account',
     });
     expect(chartSchema.xAxisKey).toBe('account');
-    expect(chartSchema.series).toEqual([{ dataKey: 'total' }]);
+    expect(chartSchema.series).toEqual([{ dataKey: 'amount' }]);
     // Must NOT have an empty data array – data comes from the object source
     expect(chartSchema.data).toBeUndefined();
   });
@@ -411,4 +411,68 @@ describe('DashboardRenderer widget data extraction', () => {
       expect(pivotSchema.data).toBeUndefined();
     }
   });
+
+  it('should use yField as series dataKey when provider: object has no aggregate', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'line',
+          title: 'No Aggregate',
+          object: 'opportunity',
+          layout: { x: 0, y: 0, w: 4, h: 2 },
+          options: {
+            xField: 'date',
+            yField: 'revenue',
+            data: {
+              provider: 'object',
+              object: 'opportunity',
+            },
+          },
+        },
+      ],
+    } as any;
+
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    const schemas = getRenderedSchemas(container);
+    const chartSchema = schemas.find(s => s.type === 'object-chart');
+
+    expect(chartSchema).toBeDefined();
+    expect(chartSchema.series).toEqual([{ dataKey: 'revenue' }]);
+  });
+
+  it('should auto-adapt series dataKey from aggregate.field even when yField differs', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'bar',
+          title: 'Mismatched yField',
+          object: 'opportunity',
+          layout: { x: 0, y: 0, w: 4, h: 2 },
+          options: {
+            xField: 'account',
+            yField: 'total',
+            data: {
+              provider: 'object',
+              object: 'opportunity',
+              aggregate: { field: 'amount', function: 'sum', groupBy: 'account' },
+            },
+          },
+        },
+      ],
+    } as any;
+
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    const schemas = getRenderedSchemas(container);
+    const chartSchema = schemas.find(s => s.type === 'object-chart');
+
+    expect(chartSchema).toBeDefined();
+    // Even though yField is 'total', the series should use aggregate.field ('amount')
+    expect(chartSchema.series).toEqual([{ dataKey: 'amount' }]);
+  });
 });