feat: update objectstack configuration and enhance DashboardRenderer for improved widget rendering

Author: hotlong

examples/crm/objectstack.config.ts

@@ -92,9 +92,13 @@ export default defineStack({
             },
             // @ts-ignore
             data: {
-                object: 'opportunity',
-                aggregate: [
-                    { $group: { _id: '$stage', amount: { $sum: '$amount' } } }
+                provider: 'value',
+                items: [
+                    { stage: 'Prospecting', amount: 120000 },
+                    { stage: 'Qualification', amount: 85000 },
+                    { stage: 'Proposal', amount: 50000 },
+                    { stage: 'Negotiation', amount: 35000 },
+                    { stage: 'Closed Won', amount: 150000 }
                 ]
             }
         },
@@ -103,13 +107,22 @@ export default defineStack({
             type: 'table',
             layout: { x: 2, y: 0, w: 2, h: 2 },
             options: {
-                columns: ['name', 'amount', 'stage']
+                columns: [
+                    { header: 'Opportunity Name', accessorKey: 'name' }, 
+                    { header: 'Amount', accessorKey: 'amount' }, 
+                    { header: 'Stage', accessorKey: 'stage' }
+                ]
             },
             // @ts-ignore
             data: {
-                object: 'opportunity',
-                limit: 5,
-                sort: [['created_date', 'desc']]
+                provider: 'value',
+                items: [
+                   { name: 'TechCorp License', amount: '$50,000', stage: 'Proposal' },
+                   { name: 'Software Inc Pilot', amount: '$5,000', stage: 'Closed Won' },
+                   { name: 'Consulting Q2', amount: '$12,000', stage: 'Negotiation' },
+                   { name: 'Global Widget Deal', amount: '$85,000', stage: 'Qualification' },
+                   { name: 'Startup Bundle', amount: '$2,500', stage: 'Prospecting' }
+                ]
             }
         },
         {

packages/plugin-dashboard/src/DashboardRenderer.tsx

@@ -8,40 +8,103 @@
 
 import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
 import { SchemaRenderer } from '@object-ui/react';
-import { cn } from '@object-ui/components';
-import { forwardRef } from 'react';
+import { cn, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
+import { forwardRef, useMemo } from 'react';
+
+// Color palette for charts
+const CHART_COLORS = [
+  'hsl(var(--chart-1))',
+  'hsl(var(--chart-2))',
+  'hsl(var(--chart-3))',
+  'hsl(var(--chart-4))',
+  'hsl(var(--chart-5))',
+];
 
 export const DashboardRenderer = forwardRef<HTMLDivElement, { schema: DashboardSchema; className?: string; [key: string]: any }>(
   ({ schema, className, ...props }, ref) => {
-    const columns = schema.columns || 3;
+    const columns = schema.columns || 4; // Default to 4 columns for better density
     const gap = schema.gap || 4;
 
-    // Use style to convert gap number to pixels or use tailwind classes if possible
-    // Here using inline style for grid gap which maps to 0.25rem * 4 * gap = gap rem
-    
     return (
       <div 
         ref={ref} 
-        className={cn("grid", className)} 
+        className={cn("grid auto-rows-min", className)} 
         style={{
             gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
             gap: `${gap * 0.25}rem`
         }}
         {...props}
       >
-        {schema.widgets?.map((widget: DashboardWidgetSchema) => (
-            <div 
-                key={widget.id} 
-                className={cn("border rounded-lg p-4 bg-card text-card-foreground shadow-sm")}
-                style={widget.layout ? {
-                    gridColumn: `span ${widget.layout.w}`,
-                    gridRow: `span ${widget.layout.h}`
-                }: undefined}
-            >
-                {widget.title && <h3 className="font-semibold mb-2">{widget.title}</h3>}
-                <SchemaRenderer schema={widget.component} />
-            </div>
-        ))}
+        {schema.widgets?.map((widget: DashboardWidgetSchema) => {
+            // Logic to determine what to render
+            // Supports both Component Schema (widget.component) and Shorthand (widget.type)
+            
+            const componentSchema = useMemo(() => {
+                if (widget.component) return widget.component;
+
+                // Handle Shorthand Registry Mappings
+                if (widget.type === 'bar' || widget.type === 'line' || widget.type === 'area' || widget.type === 'pie' || widget.type === 'donut') {
+                    // Extract data from 'data.items' or 'data' array
+                    const dataItems = Array.isArray((widget as any).data) ? (widget as any).data : (widget as any).data?.items || [];
+                    
+                    // Map xField/yField to ChartRenderer expectations
+                    const options = (widget as any).options || {};
+                    const xAxisKey = options.xField || 'name';
+                    const yField = options.yField || 'value';
+                    
+                    return {
+                        type: 'chart',
+                        chartType: widget.type,
+                        data: dataItems,
+                        xAxisKey: xAxisKey,
+                        series: [{ dataKey: yField }],
+                        colors: CHART_COLORS,
+                        className: "h-[300px]" // Enforce height
+                    };
+                }
+
+                if (widget.type === 'table') {
+                    // Map to ObjectGrid
+                    return {
+                        type: 'data-table',
+                        ...(widget as any).options,
+                        data: (widget as any).data?.items || [],
+                        searchable: false, // Simple table for dashboard
+                        pagination: false,
+                        className: "border-0"
+                    };
+                }
+
+                return widget; // Fallback to widget itself as schema
+            }, [widget]);
+
+            return (
+                <Card 
+                    key={widget.id || widget.title}
+                    className={cn(
+                        "overflow-hidden border-border/50 shadow-sm transition-all hover:shadow-md",
+                        "bg-card/50 backdrop-blur-sm"
+                    )}
+                    style={widget.layout ? {
+                        gridColumn: `span ${widget.layout.w}`,
+                        gridRow: `span ${widget.layout.h}`
+                    }: undefined}
+                >
+                    {widget.title && (
+                        <CardHeader className="pb-2 border-b border-border/40 bg-muted/20">
+                            <CardTitle className="text-base font-medium tracking-tight truncate" title={widget.title}>
+                                {widget.title}
+                            </CardTitle>
+                        </CardHeader>
+                    )}
+                    <CardContent className="p-0">
+                        <div className={cn("h-full w-full", !widget.title ? "p-4" : "p-4")}>
+                            <SchemaRenderer schema={componentSchema} />
+                        </div>
+                    </CardContent>
+                </Card>
+            );
+        })}
       </div>
     );
   }