@object-ui/plugin-dashboard 3.0.2 → 3.0.3

package/src/DashboardRenderer.tsx

@@ -61,15 +61,17 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
       };
     }, [schema.refreshInterval, onRefresh, handleRefresh]);
 
-    const renderWidget = (widget: DashboardWidgetSchema) => {
+    const renderWidget = (widget: DashboardWidgetSchema, index: number) => {
         const getComponentSchema = () => {
             if (widget.component) return widget.component;
 
             // Handle Shorthand Registry Mappings
-            const widgetType = (widget as any).type;
+            const widgetType = widget.type;
+            const options = (widget.options || {}) as Record<string, any>;
             if (widgetType === 'bar' || widgetType === 'line' || widgetType === 'area' || widgetType === 'pie' || widgetType === 'donut') {
-                const dataItems = Array.isArray((widget as any).data) ? (widget as any).data : (widget as any).data?.items || [];
-                const options = (widget as any).options || {};
+                // Support data at widget level or nested inside options
+                const widgetData = (widget as any).data || options.data;
+                const dataItems = Array.isArray(widgetData) ? widgetData : widgetData?.items || [];
                 const xAxisKey = options.xField || 'name';
                 const yField = options.yField || 'value';
                 
@@ -85,10 +87,12 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
             }
 
             if (widgetType === 'table') {
+                // Support data at widget level or nested inside options
+                const widgetData = (widget as any).data || options.data;
                 return {
                     type: 'data-table',
-                    ...(widget as any).options,
-                    data: (widget as any).data?.items || [],
+                    ...options,
+                    data: widgetData?.items || [],
                     searchable: false,
                     pagination: false,
                     className: "border-0"
@@ -97,17 +101,18 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
 
             return {
                 ...widget,
-                ...((widget as any).options || {})
+                ...options
             };
         };
         
         const componentSchema = getComponentSchema();
-        const isSelfContained = (widget as any).type === 'metric';
+        const isSelfContained = widget.type === 'metric';
+        const widgetKey = widget.id || widget.title || `widget-${index}`;
 
         if (isSelfContained) {
             return (
                 <div 
-                    key={widget.id || widget.title}
+                    key={widgetKey}
                     className={cn("h-full w-full", isMobile && "w-[85vw] shrink-0 snap-center")}
                     style={!isMobile && widget.layout ? {
                         gridColumn: `span ${widget.layout.w}`,
@@ -121,7 +126,7 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
 
         return (
             <Card 
-                key={widget.id || widget.title}
+                key={widgetKey}
                 className={cn(
                     "overflow-hidden border-border/50 shadow-sm transition-all hover:shadow-md",
                     "bg-card/50 backdrop-blur-sm",
@@ -171,7 +176,7 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
             className="flex overflow-x-auto snap-x snap-mandatory gap-3 pb-4 [-webkit-overflow-scrolling:touch]"
             style={{ scrollPaddingLeft: '0.75rem' }}
           >
-            {schema.widgets?.map((widget: DashboardWidgetSchema) => renderWidget(widget))}
+            {schema.widgets?.map((widget: DashboardWidgetSchema, index: number) => renderWidget(widget, index))}
           </div>
         </div>
       );
@@ -192,7 +197,7 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
         {...props}
       >
         {refreshButton}
-        {schema.widgets?.map((widget: DashboardWidgetSchema) => renderWidget(widget))}
+        {schema.widgets?.map((widget: DashboardWidgetSchema, index: number) => renderWidget(widget, index))}
       </div>
     );
   }

package/src/__tests__/DashboardRenderer.widgetData.test.tsx

@@ -0,0 +1,261 @@
+/**
+ * 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 { render } from '@testing-library/react';
+import { DashboardRenderer } from '../DashboardRenderer';
+
+/**
+ * Extract component schemas rendered by SchemaRenderer from the DOM.
+ * When a component type is not registered, SchemaRenderer renders
+ * an error block containing a JSON <pre> element with the schema.
+ * We parse those to verify the schema shape produced by DashboardRenderer.
+ */
+function getRenderedSchemas(container: HTMLElement): any[] {
+  const pres = container.querySelectorAll('pre');
+  return Array.from(pres).map(el => JSON.parse(el.textContent!));
+}
+
+describe('DashboardRenderer widget data extraction', () => {
+  it('should extract chart data from options.data.items', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'bar',
+          title: 'Test Bar',
+          layout: { x: 0, y: 0, w: 2, h: 2 },
+          options: {
+            xField: 'name',
+            yField: 'value',
+            data: {
+              provider: 'value',
+              items: [
+                { name: 'A', value: 100 },
+                { name: 'B', value: 200 },
+              ],
+            },
+          },
+        },
+      ],
+    } as any;
+
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    const schemas = getRenderedSchemas(container);
+    const chartSchema = schemas.find(s => s.type === 'chart');
+
+    expect(chartSchema).toBeDefined();
+    expect(chartSchema.chartType).toBe('bar');
+    expect(chartSchema.data).toHaveLength(2);
+    expect(chartSchema.data[0]).toEqual({ name: 'A', value: 100 });
+    expect(chartSchema.xAxisKey).toBe('name');
+    expect(chartSchema.series).toEqual([{ dataKey: 'value' }]);
+  });
+
+  it('should extract chart data from widget.data.items (backward compat)', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'area',
+          title: 'Test Area',
+          layout: { x: 0, y: 0, w: 3, h: 2 },
+          options: { xField: 'month', yField: 'revenue' },
+          data: {
+            provider: 'value',
+            items: [
+              { month: 'Jan', revenue: 155000 },
+              { month: 'Feb', revenue: 87000 },
+            ],
+          },
+        },
+      ],
+    } as any;
+
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    const schemas = getRenderedSchemas(container);
+    const chartSchema = schemas.find(s => s.type === 'chart');
+
+    expect(chartSchema).toBeDefined();
+    expect(chartSchema.chartType).toBe('area');
+    expect(chartSchema.data).toHaveLength(2);
+    expect(chartSchema.data[0].month).toBe('Jan');
+  });
+
+  it('should extract table data from options.data.items', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'table',
+          title: 'Test Table',
+          layout: { x: 0, y: 0, w: 4, h: 2 },
+          options: {
+            columns: [
+              { header: 'Name', accessorKey: 'name' },
+              { header: 'Amount', accessorKey: 'amount' },
+            ],
+            data: {
+              provider: 'value',
+              items: [
+                { name: 'Item A', amount: '$100' },
+                { name: 'Item B', amount: '$200' },
+                { name: 'Item C', amount: '$300' },
+              ],
+            },
+          },
+        },
+      ],
+    } as any;
+
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    // data-table is a registered component that renders a real table,
+    // so we verify the data reaches it by checking for rendered cell content
+    expect(container.textContent).toContain('Item A');
+    expect(container.textContent).toContain('$200');
+    expect(container.textContent).toContain('Item C');
+  });
+
+  it('should handle donut chart data from options', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'donut',
+          title: 'Test Donut',
+          layout: { x: 0, y: 0, w: 1, h: 2 },
+          options: {
+            xField: 'source',
+            yField: 'value',
+            data: {
+              provider: 'value',
+              items: [
+                { source: 'Web', value: 2 },
+                { source: 'Referral', value: 1 },
+              ],
+            },
+          },
+        },
+      ],
+    } as any;
+
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    const schemas = getRenderedSchemas(container);
+    const chartSchema = schemas.find(s => s.type === 'chart');
+
+    expect(chartSchema).toBeDefined();
+    expect(chartSchema.chartType).toBe('donut');
+    expect(chartSchema.data).toHaveLength(2);
+    expect(chartSchema.xAxisKey).toBe('source');
+  });
+
+  it('should default to empty array when no data is provided', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'bar',
+          title: 'No Data Bar',
+          layout: { x: 0, y: 0, w: 2, h: 2 },
+          options: { xField: 'x', yField: 'y' },
+        },
+      ],
+    } as any;
+
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    const schemas = getRenderedSchemas(container);
+    const chartSchema = schemas.find(s => s.type === 'chart');
+
+    expect(chartSchema).toBeDefined();
+    expect(chartSchema.data).toEqual([]);
+  });
+
+  it('should render metric widgets using spec shorthand format', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'metric',
+          layout: { x: 0, y: 0, w: 1, h: 1 },
+          options: {
+            label: 'Total Revenue',
+            value: '$652,000',
+            trend: { value: 12.5, direction: 'up', label: 'vs last month' },
+            icon: 'DollarSign',
+          },
+        },
+        {
+          type: 'metric',
+          layout: { x: 1, y: 0, w: 1, h: 1 },
+          options: {
+            label: 'Active Deals',
+            value: '5',
+            trend: { value: 2.1, direction: 'down', label: 'vs last month' },
+            icon: 'Briefcase',
+          },
+        },
+      ],
+    } as any;
+
+    const { container } = render(<DashboardRenderer schema={schema} />);
+
+    // MetricWidget is registered in the ComponentRegistry, so it should render
+    // the label and value from the merged options
+    expect(container.textContent).toContain('Total Revenue');
+    expect(container.textContent).toContain('$652,000');
+    expect(container.textContent).toContain('Active Deals');
+    expect(container.textContent).toContain('5');
+  });
+
+  it('should assign unique keys to widgets without id or title', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'metric',
+          layout: { x: 0, y: 0, w: 1, h: 1 },
+          options: { label: 'Metric A', value: '100' },
+        },
+        {
+          type: 'metric',
+          layout: { x: 1, y: 0, w: 1, h: 1 },
+          options: { label: 'Metric B', value: '200' },
+        },
+        {
+          type: 'metric',
+          layout: { x: 2, y: 0, w: 1, h: 1 },
+          options: { label: 'Metric C', value: '300' },
+        },
+      ],
+    } as any;
+
+    const { container } = render(<DashboardRenderer schema={schema} />);
+
+    // All three metrics should render without React key warnings
+    expect(container.textContent).toContain('Metric A');
+    expect(container.textContent).toContain('Metric B');
+    expect(container.textContent).toContain('Metric C');
+    expect(container.textContent).toContain('100');
+    expect(container.textContent).toContain('200');
+    expect(container.textContent).toContain('300');
+  });
+});