@object-ui/plugin-charts 3.0.2 → 3.1.0

package/dist/src/AdvancedChartImpl.d.ts

@@ -1,11 +1,12 @@
 import { ChartConfig } from './ChartContainerImpl';
 export interface AdvancedChartImplProps {
-    chartType?: 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter';
+    chartType?: 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'combo';
     data?: Array<Record<string, any>>;
     config?: ChartConfig;
     xAxisKey?: string;
     series?: Array<{
         dataKey: string;
+        chartType?: 'bar' | 'line' | 'area';
     }>;
     className?: string;
 }
@@ -13,4 +14,4 @@ export interface AdvancedChartImplProps {
  * AdvancedChartImpl - The heavy implementation that imports Recharts with full features
  * This component is lazy-loaded to avoid including Recharts in the initial bundle
  */
-export default function AdvancedChartImpl({ chartType, data, config, xAxisKey, series, className, }: AdvancedChartImplProps): import("react/jsx-runtime").JSX.Element;
+export default function AdvancedChartImpl({ chartType, data: rawData, config, xAxisKey, series, className, }: AdvancedChartImplProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ChartRenderer.d.ts

@@ -20,7 +20,7 @@ export interface ChartRendererProps {
         type: string;
         id?: string;
         className?: string;
-        chartType?: 'bar' | 'line' | 'area';
+        chartType?: 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'combo';
         data?: Array<Record<string, any>>;
         config?: Record<string, any>;
         xAxisKey?: string;

package/dist/src/ObjectChart.d.ts

@@ -1 +1,12 @@
+/**
+ * Client-side aggregation for fetched records.
+ * Groups records by `groupBy` field and applies the aggregation function
+ * to the `field` values in each group.
+ */
+export declare function aggregateRecords(records: any[], aggregate: {
+    field: string;
+    function: string;
+    groupBy: string;
+}): any[];
+export { extractRecords } from '../../core/src';
 export declare const ObjectChart: (props: any) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-charts",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "type": "module",
   "license": "MIT",
   "description": "Chart components plugin for Object UI, powered by Recharts",
@@ -25,17 +25,17 @@
   },
   "dependencies": {
     "recharts": "^3.7.0",
-    "@object-ui/components": "3.0.2",
-    "@object-ui/core": "3.0.2",
-    "@object-ui/react": "3.0.2",
-    "@object-ui/types": "3.0.2"
+    "@object-ui/components": "3.1.0",
+    "@object-ui/core": "3.1.0",
+    "@object-ui/react": "3.1.0",
+    "@object-ui/types": "3.1.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "19.2.13",
+    "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
     "typescript": "^5.9.3",

package/src/AdvancedChartImpl.tsx

@@ -70,11 +70,11 @@ const TW_COLORS: Record<string, string> = {
 const resolveColor = (color: string) => TW_COLORS[color] || color;
 
 export interface AdvancedChartImplProps {
-  chartType?: 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter';
+  chartType?: 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'combo';
   data?: Array<Record<string, any>>;
   config?: ChartConfig;
   xAxisKey?: string;
-  series?: Array<{ dataKey: string }>;
+  series?: Array<{ dataKey: string; chartType?: 'bar' | 'line' | 'area' }>;
   className?: string;
 }
 
@@ -84,12 +84,13 @@ export interface AdvancedChartImplProps {
  */
 export default function AdvancedChartImpl({
   chartType = 'bar',
-  data = [],
+  data: rawData = [],
   config = {},
   xAxisKey = 'name',
   series = [],
   className = '',
 }: AdvancedChartImplProps) {
+  const data = Array.isArray(rawData) ? rawData : [];
   const [isMobile, setIsMobile] = React.useState(false);
 
   React.useEffect(() => {
@@ -106,6 +107,7 @@ export default function AdvancedChartImpl({
     donut: PieChart,
     radar: RadarChart,
     scatter: ScatterChart,
+    combo: BarChart,
   }[chartType] || BarChart;
 
   console.log('📈 Rendering Chart:', { chartType, dataLength: data.length, config, series, xAxisKey });
@@ -231,6 +233,45 @@ export default function AdvancedChartImpl({
     );
   }
 
+  // Combo chart (mixed bar + line on same chart)
+  if (chartType === 'combo') {
+    return (
+      <ChartContainer config={config} className={className}>
+        <BarChart data={data}>
+          <CartesianGrid vertical={false} />
+          <XAxis
+            dataKey={xAxisKey}
+            tickLine={false}
+            tickMargin={10}
+            axisLine={false}
+            interval={isMobile ? Math.ceil(data.length / 5) : 0}
+            tickFormatter={(value) => (value && typeof value === 'string') ? value.slice(0, 3) : value}
+          />
+          <YAxis yAxisId="left" tickLine={false} axisLine={false} />
+          <YAxis yAxisId="right" orientation="right" tickLine={false} axisLine={false} />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <ChartLegend
+            content={<ChartLegendContent />}
+            {...(isMobile && { verticalAlign: "bottom", wrapperStyle: { fontSize: '11px', paddingTop: '8px' } })}
+          />
+          {series.map((s: any, index: number) => {
+            const color = resolveColor(config[s.dataKey]?.color || DEFAULT_CHART_COLOR);
+            const seriesType = s.chartType || (index === 0 ? 'bar' : 'line');
+            const yAxisId = seriesType === 'bar' ? 'left' : 'right';
+            
+            if (seriesType === 'line') {
+              return <Line key={s.dataKey} yAxisId={yAxisId} type="monotone" dataKey={s.dataKey} stroke={color} strokeWidth={2} dot={false} />;
+            }
+            if (seriesType === 'area') {
+              return <Area key={s.dataKey} yAxisId={yAxisId} type="monotone" dataKey={s.dataKey} fill={color} stroke={color} fillOpacity={0.4} />;
+            }
+            return <Bar key={s.dataKey} yAxisId={yAxisId} dataKey={s.dataKey} fill={color} radius={4} />;
+          })}
+        </BarChart>
+      </ChartContainer>
+    );
+  }
+
   return (
     <ChartContainer config={config} className={className}>
       <ChartComponent data={data}>

package/src/ChartRenderer.tsx

@@ -43,7 +43,7 @@ export interface ChartRendererProps {
     type: string;
     id?: string;
     className?: string;
-    chartType?: 'bar' | 'line' | 'area';
+    chartType?: 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'combo';
     data?: Array<Record<string, any>>;
     config?: Record<string, any>;
     xAxisKey?: string;
@@ -89,7 +89,7 @@ export const ChartRenderer: React.FC<ChartRendererProps> = ({ schema }) => {
 
     return {
       chartType: schema.chartType,
-      data: schema.data,
+      data: Array.isArray(schema.data) ? schema.data : [],
       config,
       xAxisKey,
       series,

package/src/ObjectChart.tsx

@@ -1,13 +1,61 @@
 
-import React, { useState, useEffect } from 'react';
-import { useDataScope, useSchemaContext } from '@object-ui/react';
+import React, { useState, useEffect, useContext } from 'react';
+import { useDataScope, SchemaRendererContext } 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.
+ * Groups records by `groupBy` field and applies the aggregation function
+ * to the `field` values in each group.
+ */
+export function aggregateRecords(
+  records: any[],
+  aggregate: { field: string; function: string; groupBy: string }
+): any[] {
+  const { field, function: aggFn, groupBy } = aggregate;
+  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 };
+  });
+}
+
+// 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();
-  const dataSource = props.dataSource || context.dataSource;
+  const context = useContext(SchemaRendererContext);
+  const dataSource = props.dataSource || context?.dataSource;
   const boundData = useDataScope(schema.bind);
   
   const [fetchedData, setFetchedData] = useState<any[]>([]);
@@ -19,18 +67,32 @@ export const ObjectChart = (props: any) => {
         if (!dataSource || !schema.objectName) return;
         if (isMounted) setLoading(true);
         try {
-            // Apply filtering?
-            const results = await dataSource.find(schema.objectName, {
-               $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[];
+
+            // 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) {
@@ -47,9 +109,10 @@ export const ObjectChart = (props: any) => {
         fetchData();
     }
     return () => { isMounted = false; };
-  }, [schema.objectName, dataSource, boundData, schema.data, schema.filter]);
+  }, [schema.objectName, dataSource, boundData, schema.data, schema.filter, schema.aggregate]);
 
-  const finalData = boundData || schema.data || fetchedData || [];
+  const rawData = boundData || schema.data || fetchedData;
+  const finalData = Array.isArray(rawData) ? rawData : [];
 
   // Merge data if not provided in schema
   const finalSchema = {
@@ -58,9 +121,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} />;
@@ -75,5 +140,6 @@ ComponentRegistry.register('object-chart', ObjectChart, {
         { name: 'objectName', type: 'string', label: 'Object Name', required: true },
         { name: 'data', type: 'array', label: 'Data', description: 'Optional static data' },
         { name: 'filter', type: 'array', label: 'Filter' },
+        { name: 'aggregate', type: 'object', label: 'Aggregate', description: 'Aggregation config: { field, function, groupBy }' },
     ]
 });

package/src/__tests__/ObjectChart.aggregation.test.ts

@@ -0,0 +1,166 @@
+/**
+ * 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 { aggregateRecords, extractRecords } from '../ObjectChart';
+
+describe('aggregateRecords', () => {
+  const records = [
+    { account: 'Acme Corp', amount: 100 },
+    { account: 'Acme Corp', amount: 200 },
+    { account: 'Globex', amount: 150 },
+    { account: 'Globex', amount: 50 },
+    { account: 'Initech', amount: 300 },
+  ];
+
+  it('should aggregate using sum', () => {
+    const result = aggregateRecords(records, {
+      field: 'amount',
+      function: 'sum',
+      groupBy: 'account',
+    });
+
+    expect(result).toHaveLength(3);
+    expect(result.find(r => r.account === 'Acme Corp')?.amount).toBe(300);
+    expect(result.find(r => r.account === 'Globex')?.amount).toBe(200);
+    expect(result.find(r => r.account === 'Initech')?.amount).toBe(300);
+  });
+
+  it('should aggregate using count', () => {
+    const result = aggregateRecords(records, {
+      field: 'amount',
+      function: 'count',
+      groupBy: 'account',
+    });
+
+    expect(result).toHaveLength(3);
+    expect(result.find(r => r.account === 'Acme Corp')?.amount).toBe(2);
+    expect(result.find(r => r.account === 'Globex')?.amount).toBe(2);
+    expect(result.find(r => r.account === 'Initech')?.amount).toBe(1);
+  });
+
+  it('should aggregate using avg', () => {
+    const result = aggregateRecords(records, {
+      field: 'amount',
+      function: 'avg',
+      groupBy: 'account',
+    });
+
+    expect(result).toHaveLength(3);
+    expect(result.find(r => r.account === 'Acme Corp')?.amount).toBe(150);
+    expect(result.find(r => r.account === 'Globex')?.amount).toBe(100);
+    expect(result.find(r => r.account === 'Initech')?.amount).toBe(300);
+  });
+
+  it('should aggregate using min', () => {
+    const result = aggregateRecords(records, {
+      field: 'amount',
+      function: 'min',
+      groupBy: 'account',
+    });
+
+    expect(result).toHaveLength(3);
+    expect(result.find(r => r.account === 'Acme Corp')?.amount).toBe(100);
+    expect(result.find(r => r.account === 'Globex')?.amount).toBe(50);
+  });
+
+  it('should aggregate using max', () => {
+    const result = aggregateRecords(records, {
+      field: 'amount',
+      function: 'max',
+      groupBy: 'account',
+    });
+
+    expect(result).toHaveLength(3);
+    expect(result.find(r => r.account === 'Acme Corp')?.amount).toBe(200);
+    expect(result.find(r => r.account === 'Globex')?.amount).toBe(150);
+  });
+
+  it('should handle records with missing groupBy field', () => {
+    const input = [
+      { account: 'Acme', amount: 100 },
+      { amount: 200 }, // missing account
+    ];
+
+    const result = aggregateRecords(input, {
+      field: 'amount',
+      function: 'sum',
+      groupBy: 'account',
+    });
+
+    expect(result).toHaveLength(2);
+    expect(result.find(r => r.account === 'Acme')?.amount).toBe(100);
+    expect(result.find(r => r.account === 'Unknown')?.amount).toBe(200);
+  });
+
+  it('should handle empty records', () => {
+    const result = aggregateRecords([], {
+      field: 'amount',
+      function: 'sum',
+      groupBy: 'account',
+    });
+
+    expect(result).toEqual([]);
+  });
+
+  it('should handle non-numeric values gracefully', () => {
+    const input = [
+      { account: 'Acme', amount: 'not-a-number' },
+      { account: 'Acme', amount: 100 },
+    ];
+
+    const result = aggregateRecords(input, {
+      field: 'amount',
+      function: 'sum',
+      groupBy: 'account',
+    });
+
+    expect(result).toHaveLength(1);
+    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);
+  });
+});