fix: centralize extractRecords in @object-ui/core and unify data extraction across all 6 components

- Create shared extractRecords() utility in packages/core/src/utils/extract-records.ts
- ObjectMap: was missing results.value extraction
- ObjectCalendar: was missing results.records extraction
- ObjectGantt: was missing results.value extraction
- ObjectTimeline: was missing results.value, had inconsistent pattern
- ObjectKanban: was missing results.records extraction
- ObjectChart: re-exports from @object-ui/core for backward compatibility
- Add 8 unit tests for extractRecords in @object-ui/core
- Update ROADMAP.md

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

ROADMAP.md

@@ -854,7 +854,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`). Added 10 new tests.
+- [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

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,27 +49,8 @@ export function aggregateRecords(
   });
 }
 
-/**
- * Extract an array of records from various API response formats.
- * Supports: raw array, { records: [] }, { data: [] }, { value: [] }.
- */
-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 [];
-}
+// Re-export extractRecords from @object-ui/core for backward compatibility
+export { extractRecords } from '@object-ui/core';
 
 export const ObjectChart = (props: any) => {
   const { schema } = props;

packages/plugin-gantt/src/ObjectGantt.tsx

@@ -27,6 +27,7 @@ import type { ObjectGridSchema, DataSource, ViewData, GanttConfig } from '@objec
 import { GanttConfigSchema } from '@objectstack/spec/ui';
 import { useNavigationOverlay } from '@object-ui/react';
 import { NavigationOverlay } from '@object-ui/components';
+import { extractRecords } from '@object-ui/core';
 import { GanttView, type GanttTask } from './GanttView';
 
 export interface ObjectGanttProps {
@@ -178,16 +179,7 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
             $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).records)) {
-                items = (result as any).records;
-             }
-          }
+          let items: any[] = extractRecords(result);
           setData(items);
         } else if (dataConfig?.provider === 'api') {
           console.warn('API provider not yet implemented for ObjectGantt');

packages/plugin-kanban/src/ObjectKanban.tsx

@@ -10,6 +10,7 @@ import React, { useEffect, useState, useMemo } from 'react';
 import type { DataSource } from '@object-ui/types';
 import { useDataScope, useNavigationOverlay } from '@object-ui/react';
 import { NavigationOverlay } from '@object-ui/components';
+import { extractRecords } from '@object-ui/core';
 import { KanbanRenderer } from './index';
 import { KanbanSchema } from './types';
 
@@ -66,16 +67,7 @@ export const ObjectKanban: React.FC<ObjectKanbanProps> = ({
             });
 
             // Handle { value: [] } OData shape or { data: [] } shape or direct array
-            let data: any[] = [];
-            if (Array.isArray(results)) {
-                data = results;
-            } else if (results && typeof results === 'object') {
-                if (Array.isArray((results as any).value)) {
-                    data = (results as any).value;
-                } else if (Array.isArray((results as any).data)) {
-                    data = (results as any).data;
-                }
-            }
+            const data = extractRecords(results);
 
             console.log(`[ObjectKanban] Extracted data (length: ${data.length})`);
 

packages/plugin-map/src/ObjectMap.tsx

@@ -24,6 +24,7 @@ import React, { useEffect, useState, useMemo } from 'react';
 import type { ObjectGridSchema, DataSource, ViewData } from '@object-ui/types';
 import { useNavigationOverlay } from '@object-ui/react';
 import { NavigationOverlay, cn } from '@object-ui/components';
+import { extractRecords } from '@object-ui/core';
 import { z } from 'zod';
 import MapGL, { NavigationControl, Marker, Popup } from 'react-map-gl/maplibre';
 import maplibregl from 'maplibre-gl';
@@ -354,16 +355,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
             $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).records)) {
-                items = (result as any).records;
-             }
-          }
+          let items: any[] = extractRecords(result);
           setData(items);
         } else if (dataConfig?.provider === 'api') {
           console.warn('API provider not yet implemented for ObjectMap');

packages/plugin-timeline/src/ObjectTimeline.tsx

@@ -10,6 +10,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import type { DataSource, TimelineSchema, TimelineConfig } from '@object-ui/types';
 import { useDataScope, useNavigationOverlay } from '@object-ui/react';
 import { NavigationOverlay } from '@object-ui/components';
+import { extractRecords } from '@object-ui/core';
 import { usePullToRefresh } from '@object-ui/mobile';
 import { z } from 'zod';
 import { TimelineRenderer } from './renderer';
@@ -102,16 +103,8 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
             const results = await dataSource.find(schema.objectName, {
                 options: { $top: 100 }
             });
-            let data = results;
-            if ((results as any).records) {
-                data = (results as any).records;
-            } else if ((results as any).data) {
-                data = (results as any).data;
-            }
-
-            if (Array.isArray(data)) {
-                setFetchedData(data);
-            }
+            const data = extractRecords(results);
+            setFetchedData(data);
         } catch (e) {
             console.error(e);
             setError(e as Error);