Merge pull request #853 from objectstack-ai/copilot/fix-chart-widget-data-loading

Author: hotlong

ROADMAP.md

@@ -943,6 +943,7 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 - [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.
 - [x] **P1: Dashboard Widget Data Blank — useDataScope/dataSource Injection Fix** — Fixed root cause of dashboard widgets showing blank data with no server requests: `useDataScope(undefined)` was returning the full context `dataSource` (service adapter) instead of `undefined` when no bind path was given, causing ObjectChart and all data components (ObjectKanban, ObjectGallery, ObjectTimeline, ObjectGrid) to treat the adapter as pre-bound data and skip async fetching. Fixed `useDataScope` to return `undefined` when no path is provided. Also improved ObjectChart fault tolerance: uses `useContext` directly instead of `useSchemaContext` (no throw without provider), validates `dataSource.find` is callable before invoking. 14 new tests (7 useDataScope + 7 ObjectChart data fetch/fault tolerance).
 - [x] **P1: URL-Driven Debug/Developer Panel** — Universal debug mode activated via `?__debug` URL parameter (amis devtools-style). `@object-ui/core`: exported `DebugFlags`, `DebugCollector` (perf/expr/event data collection, tree-shakeable), `parseDebugFlags()`, enhanced `isDebugEnabled()` (URL → globalThis → env resolution, SSR-safe). `@object-ui/react`: `useDebugMode` hook with URL detection, Ctrl+Shift+D shortcut, manual toggle; `SchemaRendererContext` extended with `debugFlags`; `SchemaRenderer` injects `data-debug-type`/`data-debug-id` attrs + reports render perf to `DebugCollector` when debug enabled. `@object-ui/components`: floating `DebugPanel` with 7 built-in tabs (Schema, Data, Perf, Expr, Events, Registry, Flags), plugin-extensible via `extraTabs`. Console `MetadataInspector` auto-opens when `?__debug` detected. Fine-grained sub-flags: `?__debug_schema`, `?__debug_perf`, `?__debug_data`, `?__debug_expr`, `?__debug_events`, `?__debug_registry`. 48 new tests.
+- [x] **P1: Chart Widget Server-Side Aggregation** — Fixed chart widgets (bar/line/area/pie/donut/scatter) downloading all raw data and aggregating client-side. Added optional `aggregate()` method to `DataSource` interface (`AggregateParams`, `AggregateResult` types) enabling server-side grouping/aggregation via analytics API (e.g. `GET /api/v1/analytics/{resource}?category=…&metric=…&agg=…`). `ObjectChart` now prefers `dataSource.aggregate()` when available, falling back to `dataSource.find()` + client-side aggregation for backward compatibility. Implemented `aggregate()` in `ValueDataSource` (in-memory), `ApiDataSource` (HTTP), and `ObjectStackAdapter` (analytics API with client-side fallback). Only detail widgets (grid/table/list) continue to fetch full data. 9 new tests.
 
 ### Ecosystem & Marketplace
 - Plugin marketplace website with search, ratings, and install count

packages/core/src/adapters/ApiDataSource.ts

@@ -15,6 +15,8 @@ import type {
   QueryResult,
   HttpRequest,
   HttpMethod,
+  AggregateParams,
+  AggregateResult,
 } from '@object-ui/types';
 
 // ---------------------------------------------------------------------------
@@ -297,6 +299,31 @@ export class ApiDataSource<T = any> implements DataSource<T> {
     return null;
   }
 
+  async aggregate(_resource: string, params: AggregateParams): Promise<AggregateResult[]> {
+    const queryParams: Record<string, unknown> = {
+      field: params.field,
+      function: params.function,
+      groupBy: params.groupBy,
+    };
+    if (params.filter) {
+      queryParams.filter = typeof params.filter === 'string'
+        ? params.filter
+        : JSON.stringify(params.filter);
+    }
+
+    const raw = await this.request<any>(this.readConfig, {
+      pathSuffix: 'aggregate',
+      method: 'GET',
+      queryParams,
+    });
+
+    // Normalize: the API might return an array or an object with data/results
+    if (Array.isArray(raw)) return raw;
+    if (raw?.data && Array.isArray(raw.data)) return raw.data;
+    if (raw?.results && Array.isArray(raw.results)) return raw.results;
+    return [];
+  }
+
   // -----------------------------------------------------------------------
   // Helpers
   // -----------------------------------------------------------------------

packages/core/src/adapters/ValueDataSource.ts

@@ -13,6 +13,8 @@ import type {
   DataSource,
   QueryParams,
   QueryResult,
+  AggregateParams,
+  AggregateResult,
 } from '@object-ui/types';
 
 // ---------------------------------------------------------------------------
@@ -383,6 +385,43 @@ export class ValueDataSource<T = any> implements DataSource<T> {
     return null;
   }
 
+  async aggregate(_resource: string, params: AggregateParams): Promise<AggregateResult[]> {
+    const { field, function: aggFn, groupBy } = params;
+    const groups: Record<string, any[]> = {};
+
+    for (const record of this.items as any[]) {
+      const key = String(record[groupBy] ?? 'Unknown');
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(record);
+    }
+
+    return Object.entries(groups).map(([key, group]) => {
+      const values = group.map(r => Number(r[field]) || 0);
+      let result: number;
+
+      switch (aggFn) {
+        case 'count':
+          result = group.length;
+          break;
+        case 'avg':
+          result = values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0;
+          break;
+        case 'min':
+          result = values.length > 0 ? Math.min(...values) : 0;
+          break;
+        case 'max':
+          result = values.length > 0 ? Math.max(...values) : 0;
+          break;
+        case 'sum':
+        default:
+          result = values.reduce((a, b) => a + b, 0);
+          break;
+      }
+
+      return { [groupBy]: key, [field]: result };
+    });
+  }
+
   // -----------------------------------------------------------------------
   // Extra utilities
   // -----------------------------------------------------------------------

packages/core/src/adapters/__tests__/ValueDataSource.test.ts

@@ -413,3 +413,60 @@ describe('ValueDataSource — isolation', () => {
     expect(ds.count).toBe(2);
   });
 });
+
+// ---------------------------------------------------------------------------
+// aggregate
+// ---------------------------------------------------------------------------
+
+describe('ValueDataSource — aggregate', () => {
+  const aggData = [
+    { _id: '1', category: 'A', amount: 10 },
+    { _id: '2', category: 'A', amount: 20 },
+    { _id: '3', category: 'B', amount: 30 },
+    { _id: '4', category: 'B', amount: 40 },
+    { _id: '5', category: 'B', amount: 50 },
+  ];
+
+  function createAggDS() {
+    return new ValueDataSource({ items: aggData });
+  }
+
+  it('should compute sum aggregation', async () => {
+    const ds = createAggDS();
+    const result = await ds.aggregate('items', { field: 'amount', function: 'sum', groupBy: 'category' });
+    expect(result).toHaveLength(2);
+    const groupA = result.find((r: any) => r.category === 'A');
+    const groupB = result.find((r: any) => r.category === 'B');
+    expect(groupA?.amount).toBe(30);
+    expect(groupB?.amount).toBe(120);
+  });
+
+  it('should compute count aggregation', async () => {
+    const ds = createAggDS();
+    const result = await ds.aggregate('items', { field: 'amount', function: 'count', groupBy: 'category' });
+    expect(result).toHaveLength(2);
+    expect(result.find((r: any) => r.category === 'A')?.amount).toBe(2);
+    expect(result.find((r: any) => r.category === 'B')?.amount).toBe(3);
+  });
+
+  it('should compute avg aggregation', async () => {
+    const ds = createAggDS();
+    const result = await ds.aggregate('items', { field: 'amount', function: 'avg', groupBy: 'category' });
+    expect(result.find((r: any) => r.category === 'A')?.amount).toBe(15);
+    expect(result.find((r: any) => r.category === 'B')?.amount).toBe(40);
+  });
+
+  it('should compute min aggregation', async () => {
+    const ds = createAggDS();
+    const result = await ds.aggregate('items', { field: 'amount', function: 'min', groupBy: 'category' });
+    expect(result.find((r: any) => r.category === 'A')?.amount).toBe(10);
+    expect(result.find((r: any) => r.category === 'B')?.amount).toBe(30);
+  });
+
+  it('should compute max aggregation', async () => {
+    const ds = createAggDS();
+    const result = await ds.aggregate('items', { field: 'amount', function: 'max', groupBy: 'category' });
+    expect(result.find((r: any) => r.category === 'A')?.amount).toBe(20);
+    expect(result.find((r: any) => r.category === 'B')?.amount).toBe(50);
+  });
+});

packages/data-objectstack/src/index.ts

@@ -690,6 +690,69 @@ export class ObjectStackAdapter<T = unknown> implements DataSource<T> {
     }
   }
 
+  /**
+   * Perform server-side aggregation via the ObjectStack analytics API.
+   * Uses `this.client.analytics.query()` from @objectstack/client to leverage
+   * the SDK's built-in auth, headers, and fetch configuration.
+   * Falls back to client-side aggregation via find() if the analytics endpoint
+   * is not available.
+   */
+  async aggregate(resource: string, params: { field: string; function: string; groupBy: string; filter?: any }): Promise<any[]> {
+    await this.connect();
+
+    try {
+      const payload: Record<string, unknown> = {
+        object: resource,
+        measures: [{ field: params.field, function: params.function }],
+        dimensions: [params.groupBy],
+      };
+      if (params.filter) {
+        payload.filters = params.filter;
+      }
+
+      const data = await this.client.analytics.query(payload);
+      if (Array.isArray(data)) return data;
+      if (data?.data && Array.isArray(data.data)) return data.data;
+      if (data?.results && Array.isArray(data.results)) return data.results;
+      return [];
+    } catch {
+      // If the analytics endpoint is not available, fall back to
+      // find() + client-side aggregation
+      const result = await this.find(resource as any);
+      const records = result.data || [];
+      if (records.length === 0) return [];
+
+      return this.aggregateClientSide(records, params);
+    }
+  }
+
+  /** Client-side aggregation fallback */
+  private aggregateClientSide(records: any[], params: { field: string; function: string; groupBy: string }): any[] {
+    const { field, function: aggFn, groupBy } = params;
+    const groups: Record<string, any[]> = {};
+
+    for (const record of records) {
+      const key = String(record[groupBy] ?? 'Unknown');
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(record);
+    }
+
+    return Object.entries(groups).map(([key, group]) => {
+      const values = group.map(r => Number(r[field]) || 0);
+      let result: number;
+
+      switch (aggFn) {
+        case 'count': result = group.length; break;
+        case 'avg': result = values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0; break;
+        case 'min': result = values.length > 0 ? Math.min(...values) : 0; break;
+        case 'max': result = values.length > 0 ? Math.max(...values) : 0; break;
+        case 'sum': default: result = values.reduce((a, b) => a + b, 0); break;
+      }
+
+      return { [groupBy]: key, [field]: result };
+    });
+  }
+
   /**
    * Get multiple metadata items from ObjectStack.
    * Uses v3.0.0 metadata API pattern: getItems for batch retrieval.

packages/plugin-charts/src/ObjectChart.tsx

@@ -64,18 +64,35 @@ export const ObjectChart = (props: any) => {
   useEffect(() => {
     let isMounted = true;
     const fetchData = async () => {
-        if (!dataSource || typeof dataSource.find !== 'function' || !schema.objectName) return;
+        if (!dataSource || !schema.objectName) return;
         if (isMounted) setLoading(true);
         try {
-            const results = await dataSource.find(schema.objectName, {
-               $filter: schema.filter
-            });
-            
-            let data: any[] = extractRecords(results);
-
-            // Apply client-side aggregation when aggregate config is provided
-            if (schema.aggregate && data.length > 0) {
-                data = aggregateRecords(data, schema.aggregate);
+            let data: any[];
+
+            // Prefer server-side aggregation when aggregate config is provided
+            // and dataSource supports the aggregate() method.
+            if (schema.aggregate && typeof dataSource.aggregate === 'function') {
+                const results = await dataSource.aggregate(schema.objectName, {
+                    field: schema.aggregate.field,
+                    function: schema.aggregate.function,
+                    groupBy: schema.aggregate.groupBy,
+                    filter: schema.filter,
+                });
+                data = Array.isArray(results) ? results : [];
+            } else if (typeof dataSource.find === 'function') {
+                // Fallback: fetch all records and aggregate client-side
+                const results = await dataSource.find(schema.objectName, {
+                   $filter: schema.filter
+                });
+                
+                data = extractRecords(results);
+
+                // Apply client-side aggregation when aggregate config is provided
+                if (schema.aggregate && data.length > 0) {
+                    data = aggregateRecords(data, schema.aggregate);
+                }
+            } else {
+                return;
             }
 
             if (isMounted) {