@object-ui/plugin-charts 0.3.1 → 2.0.0

package/src/index.tsx

@@ -6,49 +6,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { Suspense } from 'react';
 import { ComponentRegistry } from '@object-ui/core';
-import { Skeleton } from '@object-ui/components';
-import type { ChartConfig } from './ChartContainerImpl';
+import { ChartBarRenderer, ChartRenderer } from './ChartRenderer';
+import { ObjectChart } from './ObjectChart';
 
 // Export types for external use
 export type { BarChartSchema } from './types';
+export { ChartBarRenderer, ChartRenderer };
+export { ObjectChart } from './ObjectChart';
 
-// 🚀 Lazy load the implementation files
-// This ensures Recharts is only loaded when the component is actually rendered
-const LazyChart = React.lazy(() => import('./ChartImpl'));
-const LazyAdvancedChart = React.lazy(() => import('./AdvancedChartImpl'));
-
-export interface ChartBarRendererProps {
-  schema: {
-    type: string;
-    id?: string;
-    className?: string;
-    data?: Array<Record<string, any>>;
-    dataKey?: string;
-    xAxisKey?: string;
-    height?: number;
-    color?: string;
-  };
-}
-
-/**
- * ChartBarRenderer - The public API for the bar chart component
- * This wrapper handles lazy loading internally using React.Suspense
- */
-export const ChartBarRenderer: React.FC<ChartBarRendererProps> = ({ schema }) => {
-  return (
-    <Suspense fallback={<Skeleton className="w-full h-[400px]" />}>
-      <LazyChart
-        data={schema.data}
-        dataKey={schema.dataKey}
-        xAxisKey={schema.xAxisKey}
-        height={schema.height}
-        className={schema.className}
-        color={schema.color}
-      />
-    </Suspense>
-  );
+// Standard Export Protocol - for manual integration
+export const chartComponents = {
+  'bar-chart': ChartBarRenderer,
+  'chart': ChartRenderer,
 };
 
 // Register the component with the ComponentRegistry
@@ -56,6 +26,7 @@ ComponentRegistry.register(
   'bar-chart',
   ChartBarRenderer,
   {
+    namespace: 'plugin-charts',
     label: 'Bar Chart',
     category: 'plugin',
     inputs: [
@@ -80,88 +51,24 @@ ComponentRegistry.register(
     },
   }
 );
-
-// Advanced Chart Renderer with multiple chart types
-export interface ChartRendererProps {
-  schema: {
-    type: string;
-    id?: string;
-    className?: string;
-    chartType?: 'bar' | 'line' | 'area';
-    data?: Array<Record<string, any>>;
-    config?: Record<string, any>;
-    xAxisKey?: string;
-    series?: Array<{ dataKey: string }>;
-  };
-}
-
-/**
- * ChartRenderer - The public API for the advanced chart component
- * Supports multiple chart types (bar, line, area) with full configuration
- */
-export const ChartRenderer: React.FC<ChartRendererProps> = ({ schema }) => {
-  // ⚡️ Adapter: Normalize JSON schema to Recharts Props
-  const props = React.useMemo(() => {
-    // 1. Defaults
-    let series = schema.series;
-    let xAxisKey = schema.xAxisKey;
-    let config = schema.config;
-
-    // 2. Adapt Tremor/Simple format (categories -> series, index -> xAxisKey)
-    if (!xAxisKey) {
-       if ((schema as any).index) xAxisKey = (schema as any).index;
-       else if ((schema as any).category) xAxisKey = (schema as any).category; // Support Pie/Donut category
-    }
-
-    if (!series) {
-       if ((schema as any).categories) {
-          series = (schema as any).categories.map((cat: string) => ({ dataKey: cat }));
-       } else if ((schema as any).value) {
-          // Single value adapter (for Pie/Simple charts)
-          series = [{ dataKey: (schema as any).value }];
-       }
-    }
-    
-    // 3. Auto-generate config/colors if missing
-    if (!config && series) {
-       const colors = (schema as any).colors || ['hsl(var(--chart-1))', 'hsl(var(--chart-2))', 'hsl(var(--chart-3))']; 
-       const newConfig: ChartConfig = {};
-       series.forEach((s: any, idx: number) => {
-         newConfig[s.dataKey] = { label: s.dataKey, color: colors[idx % colors.length] };
-       });
-       config = newConfig;
-    }
-
-    return {
-      chartType: schema.chartType,
-      data: schema.data,
-      config,
-      xAxisKey,
-      series,
-      className: schema.className
-    };
-  }, [schema]);
-
-  return (
-    <Suspense fallback={<Skeleton className="w-full h-[400px]" />}>
-      <LazyAdvancedChart
-        // Pass adapted props
-        chartType={props.chartType}
-        data={props.data}
-        config={props.config}
-        xAxisKey={props.xAxisKey}
-        series={props.series}
-        className={props.className}
-      />
-    </Suspense>
-  );
-};
-
+// Alias for generic view
+ComponentRegistry.register('chart', ObjectChart, {
+  namespace: 'view',
+  category: 'view',
+  label: 'Chart',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'type', type: 'string', label: 'Chart Type' },
+    { name: 'categoryField', type: 'string', label: 'Category Field' },
+    { name: 'valueField', type: 'string', label: 'Value Field' },
+  ]
+});
 // Register the advanced chart component
 ComponentRegistry.register(
   'chart',
   ChartRenderer,
   {
+    namespace: 'plugin-charts',
     label: 'Chart',
     category: 'plugin',
     inputs: [
@@ -172,7 +79,11 @@ ComponentRegistry.register(
         enum: [
           { label: 'Bar', value: 'bar' },
           { label: 'Line', value: 'line' },
-          { label: 'Area', value: 'area' }
+          { label: 'Area', value: 'area' },
+          { label: 'Pie', value: 'pie' },
+          { label: 'Donut', value: 'donut' },
+          { label: 'Radar', value: 'radar' },
+          { label: 'Scatter', value: 'scatter' }
         ],
         defaultValue: 'bar'
       },
@@ -204,8 +115,58 @@ ComponentRegistry.register(
   }
 );
 
-// Standard Export Protocol - for manual integration
-export const chartComponents = {
-  'bar-chart': ChartBarRenderer,
-  'chart': ChartRenderer,
-};
+// Alias for CRM App compatibility
+ComponentRegistry.register(
+  'chart:bar',
+  ChartRenderer, 
+  {
+    namespace: 'plugin-charts',
+    label: 'Bar Chart (Alias)',
+    category: 'plugin',
+    defaultProps: { chartType: 'bar' }
+  }
+);
+
+ComponentRegistry.register(
+  'pie-chart',
+  ChartRenderer,
+  {
+    namespace: 'plugin-charts',
+    label: 'Pie Chart',
+    category: 'plugin',
+    defaultProps: { chartType: 'pie' }
+  }
+);
+
+ComponentRegistry.register(
+  'donut-chart',
+  ChartRenderer,
+  {
+    namespace: 'plugin-charts',
+    label: 'Donut Chart',
+    category: 'plugin',
+    defaultProps: { chartType: 'donut' }
+  }
+);
+
+ComponentRegistry.register(
+  'radar-chart',
+  ChartRenderer,
+  {
+    namespace: 'plugin-charts',
+    label: 'Radar Chart',
+    category: 'plugin',
+    defaultProps: { chartType: 'radar' }
+  }
+);
+
+ComponentRegistry.register(
+  'scatter-chart',
+  ChartRenderer,
+  {
+    namespace: 'plugin-charts',
+    label: 'Scatter Chart',
+    category: 'plugin',
+    defaultProps: { chartType: 'scatter' }
+  }
+);

package/src/registration.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeAll } from 'vitest';
+import { ComponentRegistry } from '@object-ui/core';
+
+describe('Plugin Charts Registration', () => {
+  beforeAll(async () => {
+    await import('./index');
+  }, 30000);
+
+  it('registers bar-chart component', () => {
+    const config = ComponentRegistry.get('bar-chart');
+    expect(config).toBeDefined();
+  });
+
+   it('registers chart component types', () => {
+    expect(ComponentRegistry.get('chart')).toBeDefined(); // Assuming base
+    // Verify aliases if they exist
+    expect(ComponentRegistry.get('pie-chart')).toBeDefined();
+    expect(ComponentRegistry.get('donut-chart')).toBeDefined();
+  });
+});

package/vite.config.ts

@@ -24,6 +24,13 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': resolve(__dirname, './src'),
+      '@object-ui/core': resolve(__dirname, '../core/src'),
+      '@object-ui/types': resolve(__dirname, '../types/src'),
+      '@object-ui/react': resolve(__dirname, '../react/src'),
+      '@object-ui/components': resolve(__dirname, '../components/src'),
+      '@object-ui/fields': resolve(__dirname, '../fields/src'),
+      '@object-ui/plugin-dashboard': resolve(__dirname, '../plugin-dashboard/src'),
+      '@object-ui/plugin-grid': resolve(__dirname, '../plugin-grid/src'),
     },
   },
   build: {
@@ -45,4 +52,10 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['../../vitest.setup.tsx'],
+    passWithNoTests: true,
+  },
 });

package/vitest.config.ts

@@ -0,0 +1,13 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    setupFiles: ['./vitest.setup.ts'],
+  },
+});

package/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';