@object-ui/plugin-charts 0.3.0 → 0.5.0

package/dist/src/AdvancedChartImpl.d.ts

@@ -1,6 +1,6 @@
 import { ChartConfig } from './ChartContainerImpl';
 export interface AdvancedChartImplProps {
-    chartType?: 'bar' | 'line' | 'area' | 'pie';
+    chartType?: 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter';
     data?: Array<Record<string, any>>;
     config?: ChartConfig;
     xAxisKey?: string;

package/dist/src/ChartContainerImpl.d.ts

@@ -1,4 +1,11 @@
 import { ResponsiveContainer, Tooltip, Legend } from 'recharts';
+/**
+ * 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 * as React from "react";
 declare const THEMES: {
     readonly light: "";

package/dist/src/ChartImpl.d.ts

@@ -1,3 +1,10 @@
+/**
+ * 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.
+ */
 export interface ChartImplProps {
     data?: Array<Record<string, any>>;
     dataKey?: string;

package/dist/src/ChartRenderer.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+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
+ */
+export declare const ChartBarRenderer: React.FC<ChartBarRendererProps>;
+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
+ */
+export declare const ChartRenderer: React.FC<ChartRendererProps>;

package/dist/src/ObjectChart.d.ts

@@ -0,0 +1 @@
+export declare const ObjectChart: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/src/index.d.ts

@@ -1,42 +1,8 @@
-import { default as React } from 'react';
+import { ChartBarRenderer, ChartRenderer } from './ChartRenderer';
 export type { BarChartSchema } from './types';
-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 declare const ChartBarRenderer: React.FC<ChartBarRendererProps>;
-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 declare const ChartRenderer: React.FC<ChartRendererProps>;
+export { ChartBarRenderer, ChartRenderer };
+export { ObjectChart } from './ObjectChart';
 export declare const chartComponents: {
-    'chart-bar': React.FC<ChartBarRendererProps>;
-    chart: React.FC<ChartRendererProps>;
+    'bar-chart': import('react').FC<import('./ChartRenderer').ChartBarRendererProps>;
+    chart: import('react').FC<import('./ChartRenderer').ChartRendererProps>;
 };

package/dist/src/types.d.ts

@@ -1,4 +1,4 @@
-import { BaseSchema } from '@object-ui/types';
+import { BaseSchema } from '../../types/src';
 /**
  * Bar Chart component schema.
  * Renders a bar chart using Recharts library.
@@ -8,7 +8,7 @@ import { BaseSchema } from '@object-ui/types';
  * import type { BarChartSchema } from '@object-ui/plugin-charts';
  *
  * const chartSchema: BarChartSchema = {
- *   type: 'chart-bar',
+ *   type: 'bar-chart',
  *   data: [
  *     { name: 'Jan', value: 400 },
  *     { name: 'Feb', value: 300 }
@@ -19,7 +19,7 @@ import { BaseSchema } from '@object-ui/types';
  * ```
  */
 export interface BarChartSchema extends BaseSchema {
-    type: 'chart-bar';
+    type: 'bar-chart';
     /**
      * Array of data points to display in the chart.
      */

package/examples/chart-examples.ts

@@ -0,0 +1,54 @@
+/**
+ * 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.
+ */
+
+/**
+ * Example: Using all new chart types
+ * 
+ * This example demonstrates the new Pie, Donut, Radar, and Scatter chart types
+ */
+
+export const pieChartExample = {
+  type: 'pie-chart',
+  data: [
+    { name: 'Chrome', value: 65 },
+    { name: 'Firefox', value: 20 },
+    { name: 'Safari', value: 10 },
+    { name: 'Edge', value: 5 },
+  ],
+  xAxisKey: 'name',
+  series: [{ dataKey: 'value' }],
+  config: {
+    Chrome: { label: 'Chrome', color: 'hsl(var(--chart-1))' },
+    Firefox: { label: 'Firefox', color: 'hsl(var(--chart-2))' },
+    Safari: { label: 'Safari', color: 'hsl(var(--chart-3))' },
+    Edge: { label: 'Edge', color: 'hsl(var(--chart-4))' },
+  }
+};
+
+export const donutChartExample = {
+  type: 'donut-chart',
+  data: [
+    { category: 'Electronics', revenue: 45000 },
+    { category: 'Clothing', revenue: 32000 },
+    { category: 'Food', revenue: 28000 },
+    { category: 'Books', revenue: 15000 },
+  ],
+  xAxisKey: 'category',
+  series: [{ dataKey: 'revenue' }]
+};
+
+export const radarChartExample = {
+  type: 'radar-chart',
+  data: [
+    { skill: 'React', score: 90 },
+    { skill: 'TypeScript', score: 85 },
+    { skill: 'Node.js', score: 80 }
+  ],
+  xAxisKey: 'skill',
+  series: [{ dataKey: 'score' }]
+};

package/package.json

@@ -1,8 +1,18 @@
 {
   "name": "@object-ui/plugin-charts",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "license": "MIT",
+  "description": "Chart components plugin for Object UI, powered by Recharts",
+  "homepage": "https://www.objectui.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/objectstack-ai/objectui.git",
+    "directory": "packages/plugin-charts"
+  },
+  "bugs": {
+    "url": "https://github.com/objectstack-ai/objectui/issues"
+  },
   "main": "dist/index.umd.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,20 +24,20 @@
     }
   },
   "dependencies": {
-    "recharts": "^2.15.0",
-    "@object-ui/components": "0.3.0",
-    "@object-ui/core": "0.3.0",
-    "@object-ui/react": "0.3.0",
-    "@object-ui/types": "0.3.0"
+    "recharts": "^3.7.0",
+    "@object-ui/components": "0.5.0",
+    "@object-ui/core": "0.5.0",
+    "@object-ui/react": "0.5.0",
+    "@object-ui/types": "0.5.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.3",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

package/src/AdvancedChartImpl.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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 * as React from "react"
 import {
   Bar,
@@ -8,6 +16,14 @@ import {
   AreaChart,
   Pie,
   PieChart,
+  Radar,
+  RadarChart,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  Scatter,
+  ScatterChart,
+  ZAxis,
   Cell,
   XAxis,
   YAxis,
@@ -54,7 +70,7 @@ const TW_COLORS: Record<string, string> = {
 const resolveColor = (color: string) => TW_COLORS[color] || color;
 
 export interface AdvancedChartImplProps {
-  chartType?: 'bar' | 'line' | 'area' | 'pie';
+  chartType?: 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter';
   data?: Array<Record<string, any>>;
   config?: ChartConfig;
   xAxisKey?: string;
@@ -79,11 +95,25 @@ export default function AdvancedChartImpl({
     line: LineChart,
     area: AreaChart,
     pie: PieChart,
+    donut: PieChart,
+    radar: RadarChart,
+    scatter: ScatterChart,
   }[chartType] || BarChart;
 
   console.log('📈 Rendering Chart:', { chartType, dataLength: data.length, config, series, xAxisKey });
 
-  if (chartType === 'pie') {
+  // Helper function to get color palette
+  const getPalette = () => [
+    'hsl(var(--chart-1))', 
+    'hsl(var(--chart-2))', 
+    'hsl(var(--chart-3))', 
+    'hsl(var(--chart-4))',
+    'hsl(var(--chart-5))'
+  ];
+
+  // Pie and Donut charts
+  if (chartType === 'pie' || chartType === 'donut') {
+    const innerRadius = chartType === 'donut' ? 60 : 0;
     return (
       <ChartContainer config={config} className={className}>
         <PieChart>
@@ -92,7 +122,7 @@ export default function AdvancedChartImpl({
             data={data}
             dataKey={series[0]?.dataKey || 'value'}
             nameKey={xAxisKey || 'name'}
-            innerRadius={60}
+            innerRadius={innerRadius}
             strokeWidth={5}
             paddingAngle={2}
             outerRadius={80}
@@ -101,22 +131,9 @@ export default function AdvancedChartImpl({
                 // 1. Try config by nameKey (category)
                 let c = config[entry[xAxisKey]]?.color;
                 
-                // 2. Try series config (if only 1 series defined with color list, logic fails here usually)
+                // 2. Fallback to palette
                 if (!c) {
-                   // Fallback: If 'colors' array was passed in schema, my adapter put it in config[seriesKey]?
-                   // Actually my adapter logic in index.tsx was: config[seriesKey].color = colors[idx]
-                   // But here we are iterating DATA items, not SERIES.
-                   // So we need a cycling palette.
-                   // Let's assume the user didn't provide per-category config here, so we cycle default colors.
-                   const palette = [
-                     'hsl(var(--chart-1))', 
-                     'hsl(var(--chart-2))', 
-                     'hsl(var(--chart-3))', 
-                     'hsl(var(--chart-4))',
-                     'hsl(var(--chart-5))'
-                   ];
-                   // Check if we can get colors from the first series config?
-                   // No, let's just use the palette or resolveColor from entry if provided in data.
+                   const palette = getPalette();
                    c = palette[index % palette.length];
                 }
                 
@@ -129,6 +146,73 @@ export default function AdvancedChartImpl({
     );
   }
 
+  // Radar chart
+  if (chartType === 'radar') {
+    return (
+      <ChartContainer config={config} className={className}>
+        <RadarChart data={data}>
+          <PolarGrid />
+          <PolarAngleAxis dataKey={xAxisKey} />
+          <PolarRadiusAxis />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <ChartLegend content={<ChartLegendContent />} />
+          {series.map((s: any) => {
+            const color = resolveColor(config[s.dataKey]?.color || DEFAULT_CHART_COLOR);
+            return (
+              <Radar
+                key={s.dataKey}
+                dataKey={s.dataKey}
+                stroke={color}
+                fill={color}
+                fillOpacity={0.6}
+              />
+            );
+          })}
+        </RadarChart>
+      </ChartContainer>
+    );
+  }
+
+  // Scatter chart
+  if (chartType === 'scatter') {
+    return (
+      <ChartContainer config={config} className={className}>
+        <ScatterChart>
+          <CartesianGrid vertical={false} />
+          <XAxis 
+            type="number" 
+            dataKey={xAxisKey}
+            name={String(config[xAxisKey]?.label || xAxisKey)}
+            tickLine={false}
+            axisLine={false}
+          />
+          <YAxis 
+            type="number"
+            dataKey={series[0]?.dataKey || 'value'}
+            name={String(config[series[0]?.dataKey]?.label || series[0]?.dataKey)}
+            tickLine={false}
+            axisLine={false}
+          />
+          <ZAxis type="number" range={[60, 400]} />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <ChartLegend content={<ChartLegendContent />} />
+          {series.map((s: any, index: number) => {
+            const palette = getPalette();
+            const color = resolveColor(config[s.dataKey]?.color || palette[index % palette.length]);
+            return (
+              <Scatter
+                key={s.dataKey}
+                name={config[s.dataKey]?.label || s.dataKey}
+                data={data}
+                fill={color}
+              />
+            );
+          })}
+        </ScatterChart>
+      </ChartContainer>
+    );
+  }
+
   return (
     <ChartContainer config={config} className={className}>
       <ChartComponent data={data}>

package/src/ChartContainerImpl.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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.
+ */
+
 "use client"
 
 import * as React from "react"

package/src/ChartImpl.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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 { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
 export interface ChartImplProps {

package/src/ChartRenderer.tsx

@@ -0,0 +1,112 @@
+
+import React, { Suspense } from 'react';
+import { Skeleton } from '@object-ui/components';
+import type { ChartConfig } from './ChartContainerImpl';
+
+// 🚀 Lazy load the implementation files
+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
+ */
+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>
+  );
+};
+
+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
+ */
+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
+        chartType={props.chartType}
+        data={props.data}
+        config={props.config}
+        xAxisKey={props.xAxisKey}
+        series={props.series}
+        className={props.className}
+      />
+    </Suspense>
+  );
+};

package/src/ObjectChart.tsx

@@ -0,0 +1,74 @@
+
+import React, { useState, useEffect } from 'react';
+import { useDataScope, useSchemaContext } from '@object-ui/react';
+import { ChartRenderer } from './ChartRenderer';
+import { ComponentRegistry } from '@object-ui/core';
+
+export const ObjectChart = (props: any) => {
+  const { schema } = props;
+  const context = useSchemaContext();
+  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 {
+            // 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).value)) {
+                    data = (results as any).value;
+                }
+            }
+
+            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]);
+
+  const finalData = boundData || schema.data || fetchedData || [];
+
+  // Merge data if not provided in schema
+  const finalSchema = {
+    ...schema,
+    data: finalData
+  };
+  
+  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 <ChartRenderer {...props} schema={finalSchema} />;
+};
+
+// Register it
+ComponentRegistry.register('object-chart', ObjectChart, {
+    namespace: 'plugin-charts',
+    label: 'Object Chart',
+    category: 'view'
+});