@object-ui/plugin-charts 3.1.5 → 3.3.1

package/src/ObjectChart.tsx

@@ -1,145 +0,0 @@
-
-import React, { useState, useEffect, useContext } from 'react';
-import { useDataScope, SchemaRendererContext } from '@object-ui/react';
-import { ChartRenderer } from './ChartRenderer';
-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 = useContext(SchemaRendererContext);
-  const dataSource = props.dataSource || context?.dataSource;
-  const boundData = useDataScope(schema.bind);
-  
-  const [fetchedData, setFetchedData] = useState<any[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    let isMounted = true;
-    const fetchData = async () => {
-        if (!dataSource || !schema.objectName) return;
-        if (isMounted) setLoading(true);
-        try {
-            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) {
-                setFetchedData(data);
-            }
-        } catch (e) {
-            console.error('[ObjectChart] Fetch error:', e);
-        } finally {
-            if (isMounted) setLoading(false);
-        }
-    };
-
-    if (schema.objectName && !boundData && !schema.data) {
-        fetchData();
-    }
-    return () => { isMounted = false; };
-  }, [schema.objectName, dataSource, boundData, schema.data, schema.filter, schema.aggregate]);
-
-  const rawData = boundData || schema.data || fetchedData;
-  const finalData = Array.isArray(rawData) ? rawData : [];
-
-  // Merge data if not provided in schema
-  const finalSchema = {
-    ...schema,
-    data: finalData
-  };
-  
-  if (loading && finalData.length === 0) {
-      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} />;
-};
-
-// Register it
-ComponentRegistry.register('object-chart', ObjectChart, {
-    namespace: 'plugin-charts',
-    label: 'Object Chart',
-    category: 'view',
-    inputs: [
-        { 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

@@ -1,166 +0,0 @@
-/**
- * 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);
-  });
-});

package/src/__tests__/ObjectChart.dataFetch.test.tsx

@@ -1,303 +0,0 @@
-/**
- * Tests for ObjectChart data fetching & fault tolerance.
- *
- * Verifies that ObjectChart:
- * - Calls dataSource.find() when objectName is set and no bound data
- * - Handles missing/invalid dataSource gracefully
- * - Works without a SchemaRendererProvider
- */
-
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, waitFor } from '@testing-library/react';
-import React from 'react';
-import { SchemaRendererProvider } from '@object-ui/react';
-import { ObjectChart } from '../ObjectChart';
-
-// Suppress console.error from React error boundary / fetch errors
-const originalConsoleError = console.error;
-beforeEach(() => {
-  console.error = vi.fn();
-});
-afterEach(() => {
-  console.error = originalConsoleError;
-});
-
-describe('ObjectChart data fetching', () => {
-  it('should call dataSource.find when objectName is set and no bind path', async () => {
-    const mockFind = vi.fn().mockResolvedValue([
-      { stage: 'Prospect', amount: 100 },
-      { stage: 'Proposal', amount: 200 },
-    ]);
-    const dataSource = { find: mockFind };
-
-    render(
-      <SchemaRendererProvider dataSource={dataSource}>
-        <ObjectChart
-          schema={{
-            type: 'object-chart',
-            objectName: 'opportunity',
-            chartType: 'bar',
-            xAxisKey: 'stage',
-            series: [{ dataKey: 'amount' }],
-          }}
-        />
-      </SchemaRendererProvider>
-    );
-
-    await waitFor(() => {
-      expect(mockFind).toHaveBeenCalledWith('opportunity', { $filter: undefined });
-    });
-  });
-
-  it('should NOT call dataSource.find when schema.data is provided', () => {
-    const mockFind = vi.fn();
-    const dataSource = { find: mockFind };
-
-    render(
-      <SchemaRendererProvider dataSource={dataSource}>
-        <ObjectChart
-          schema={{
-            type: 'object-chart',
-            objectName: 'opportunity',
-            chartType: 'bar',
-            data: [{ stage: 'A', amount: 100 }],
-            xAxisKey: 'stage',
-            series: [{ dataKey: 'amount' }],
-          }}
-        />
-      </SchemaRendererProvider>
-    );
-
-    expect(mockFind).not.toHaveBeenCalled();
-  });
-
-  it('should apply aggregation to fetched data', async () => {
-    const mockFind = vi.fn().mockResolvedValue([
-      { stage: 'Prospect', amount: 100 },
-      { stage: 'Prospect', amount: 200 },
-      { stage: 'Proposal', amount: 300 },
-    ]);
-    const dataSource = { find: mockFind };
-
-    const { container } = render(
-      <SchemaRendererProvider dataSource={dataSource}>
-        <ObjectChart
-          schema={{
-            type: 'object-chart',
-            objectName: 'opportunity',
-            chartType: 'bar',
-            xAxisKey: 'stage',
-            series: [{ dataKey: 'amount' }],
-            aggregate: { field: 'amount', function: 'sum', groupBy: 'stage' },
-          }}
-        />
-      </SchemaRendererProvider>
-    );
-
-    await waitFor(() => {
-      expect(mockFind).toHaveBeenCalled();
-    });
-  });
-
-  it('should prefer dataSource.aggregate() over find() when aggregate config is set', async () => {
-    const mockFind = vi.fn().mockResolvedValue([]);
-    const mockAggregate = vi.fn().mockResolvedValue([
-      { stage: 'Prospect', amount: 300 },
-      { stage: 'Proposal', amount: 300 },
-    ]);
-    const dataSource = { find: mockFind, aggregate: mockAggregate };
-
-    render(
-      <SchemaRendererProvider dataSource={dataSource}>
-        <ObjectChart
-          schema={{
-            type: 'object-chart',
-            objectName: 'opportunity',
-            chartType: 'bar',
-            xAxisKey: 'stage',
-            series: [{ dataKey: 'amount' }],
-            aggregate: { field: 'amount', function: 'sum', groupBy: 'stage' },
-          }}
-        />
-      </SchemaRendererProvider>
-    );
-
-    await waitFor(() => {
-      expect(mockAggregate).toHaveBeenCalledWith('opportunity', {
-        field: 'amount',
-        function: 'sum',
-        groupBy: 'stage',
-        filter: undefined,
-      });
-    });
-    // find() should NOT be called when aggregate() is available
-    expect(mockFind).not.toHaveBeenCalled();
-  });
-
-  it('should fall back to find() when aggregate() is not available', async () => {
-    const mockFind = vi.fn().mockResolvedValue([
-      { stage: 'Prospect', amount: 100 },
-      { stage: 'Prospect', amount: 200 },
-    ]);
-    // dataSource without aggregate method
-    const dataSource = { find: mockFind };
-
-    render(
-      <SchemaRendererProvider dataSource={dataSource}>
-        <ObjectChart
-          schema={{
-            type: 'object-chart',
-            objectName: 'opportunity',
-            chartType: 'bar',
-            xAxisKey: 'stage',
-            series: [{ dataKey: 'amount' }],
-            aggregate: { field: 'amount', function: 'sum', groupBy: 'stage' },
-          }}
-        />
-      </SchemaRendererProvider>
-    );
-
-    await waitFor(() => {
-      expect(mockFind).toHaveBeenCalledWith('opportunity', { $filter: undefined });
-    });
-  });
-
-  it('should NOT use aggregate() when no aggregate config is set', async () => {
-    const mockFind = vi.fn().mockResolvedValue([
-      { stage: 'Prospect', amount: 100 },
-    ]);
-    const mockAggregate = vi.fn().mockResolvedValue([]);
-    const dataSource = { find: mockFind, aggregate: mockAggregate };
-
-    render(
-      <SchemaRendererProvider dataSource={dataSource}>
-        <ObjectChart
-          schema={{
-            type: 'object-chart',
-            objectName: 'opportunity',
-            chartType: 'bar',
-            xAxisKey: 'stage',
-            series: [{ dataKey: 'amount' }],
-          }}
-        />
-      </SchemaRendererProvider>
-    );
-
-    await waitFor(() => {
-      expect(mockFind).toHaveBeenCalled();
-    });
-    // aggregate() should NOT be called when no aggregate config
-    expect(mockAggregate).not.toHaveBeenCalled();
-  });
-
-  it('should pass filter to aggregate() when both aggregate and filter are set', async () => {
-    const mockAggregate = vi.fn().mockResolvedValue([
-      { stage: 'Won', amount: 500 },
-    ]);
-    const dataSource = { find: vi.fn(), aggregate: mockAggregate };
-    const filter = { status: 'active' };
-
-    render(
-      <SchemaRendererProvider dataSource={dataSource}>
-        <ObjectChart
-          schema={{
-            type: 'object-chart',
-            objectName: 'opportunity',
-            chartType: 'bar',
-            xAxisKey: 'stage',
-            series: [{ dataKey: 'amount' }],
-            filter,
-            aggregate: { field: 'amount', function: 'sum', groupBy: 'stage' },
-          }}
-        />
-      </SchemaRendererProvider>
-    );
-
-    await waitFor(() => {
-      expect(mockAggregate).toHaveBeenCalledWith('opportunity', {
-        field: 'amount',
-        function: 'sum',
-        groupBy: 'stage',
-        filter: { status: 'active' },
-      });
-    });
-  });
-});
-
-describe('ObjectChart fault tolerance', () => {
-  it('should not crash when dataSource has no find method', () => {
-    const { container } = render(
-      <SchemaRendererProvider dataSource={{}}>
-        <ObjectChart
-          schema={{
-            type: 'object-chart',
-            objectName: 'opportunity',
-            chartType: 'bar',
-            xAxisKey: 'stage',
-            series: [{ dataKey: 'amount' }],
-          }}
-        />
-      </SchemaRendererProvider>
-    );
-
-    // Should render without crashing
-    expect(container).toBeDefined();
-  });
-
-  it('should not crash when rendered outside SchemaRendererProvider', () => {
-    const { container } = render(
-      <ObjectChart
-        schema={{
-          type: 'object-chart',
-          chartType: 'bar',
-          xAxisKey: 'stage',
-          series: [{ dataKey: 'amount' }],
-        }}
-      />
-    );
-
-    // Should render without crashing
-    expect(container).toBeDefined();
-  });
-
-  it('should show "No data source available" when no dataSource and objectName set', () => {
-    const { container } = render(
-      <ObjectChart
-        schema={{
-          type: 'object-chart',
-          objectName: 'opportunity',
-          chartType: 'bar',
-          xAxisKey: 'stage',
-          series: [{ dataKey: 'amount' }],
-        }}
-      />
-    );
-
-    expect(container.textContent).toContain('No data source available');
-  });
-
-  it('should use dataSource prop over context when both are present', async () => {
-    const contextFind = vi.fn().mockResolvedValue([]);
-    const propFind = vi.fn().mockResolvedValue([{ stage: 'A', amount: 1 }]);
-
-    render(
-      <SchemaRendererProvider dataSource={{ find: contextFind }}>
-        <ObjectChart
-          dataSource={{ find: propFind }}
-          schema={{
-            type: 'object-chart',
-            objectName: 'opportunity',
-            chartType: 'bar',
-            xAxisKey: 'stage',
-            series: [{ dataKey: 'amount' }],
-          }}
-        />
-      </SchemaRendererProvider>
-    );
-
-    await waitFor(() => {
-      expect(propFind).toHaveBeenCalled();
-    });
-    expect(contextFind).not.toHaveBeenCalled();
-  });
-});