@object-ui/plugin-dashboard 0.5.0 → 3.0.0

package/src/DashboardRenderer.tsx

@@ -8,8 +8,9 @@
 
 import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
 import { SchemaRenderer } from '@object-ui/react';
-import { cn, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
-import { forwardRef } from 'react';
+import { cn, Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui/components';
+import { forwardRef, useState, useEffect, useCallback, useRef } from 'react';
+import { RefreshCw } from 'lucide-react';
 
 // Color palette for charts
 const CHART_COLORS = [
@@ -20,117 +21,178 @@ const CHART_COLORS = [
   'hsl(var(--chart-5))',
 ];
 
-export const DashboardRenderer = forwardRef<HTMLDivElement, { schema: DashboardSchema; className?: string; [key: string]: any }>(
-  ({ schema, className, ...props }, ref) => {
+export interface DashboardRendererProps {
+  schema: DashboardSchema;
+  className?: string;
+  /** Callback invoked when dashboard refresh is triggered (manual or auto) */
+  onRefresh?: () => void;
+  [key: string]: any;
+}
+
+export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererProps>(
+  ({ schema, className, dataSource, onRefresh, ...props }, ref) => {
     const columns = schema.columns || 4; // Default to 4 columns for better density
     const gap = schema.gap || 4;
+    const [refreshing, setRefreshing] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
-    return (
-      <div 
-        ref={ref} 
-        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) => {
-            // Logic to determine what to render
-            // Supports both Component Schema (widget.component) and Shorthand (widget.type)
-            
-            const getComponentSchema = () => {
-                if (widget.component) return widget.component;
-
-                // Handle Shorthand Registry Mappings
-                const widgetType = (widget as any).type;
-                if (widgetType === 'bar' || widgetType === 'line' || widgetType === 'area' || widgetType === 'pie' || widgetType === '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: widgetType,
-                        data: dataItems,
-                        xAxisKey: xAxisKey,
-                        series: [{ dataKey: yField }],
-                        colors: CHART_COLORS,
-                        className: "h-[300px]" // Enforce height
-                    };
-                }
-
-                if (widgetType === '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"
-                    };
-                }
-
-                // For generic widgets (like 'metric'), we simply spread the options into the schema
-                // so they appear as top-level props for the component.
+    useEffect(() => {
+      const checkMobile = () => setIsMobile(window.innerWidth < 640);
+      checkMobile();
+      window.addEventListener('resize', checkMobile);
+      return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+
+    const handleRefresh = useCallback(() => {
+      if (!onRefresh) return;
+      setRefreshing(true);
+      onRefresh();
+      // Reset refreshing indicator after a short delay
+      setTimeout(() => setRefreshing(false), 600);
+    }, [onRefresh]);
+
+    // Auto-refresh interval
+    useEffect(() => {
+      if (!schema.refreshInterval || schema.refreshInterval <= 0 || !onRefresh) return;
+      intervalRef.current = setInterval(handleRefresh, schema.refreshInterval * 1000);
+      return () => {
+        if (intervalRef.current) clearInterval(intervalRef.current);
+      };
+    }, [schema.refreshInterval, onRefresh, handleRefresh]);
+
+    const renderWidget = (widget: DashboardWidgetSchema) => {
+        const getComponentSchema = () => {
+            if (widget.component) return widget.component;
+
+            // Handle Shorthand Registry Mappings
+            const widgetType = (widget as any).type;
+            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 || {};
+                const xAxisKey = options.xField || 'name';
+                const yField = options.yField || 'value';
+                
                 return {
-                    ...widget,
-                    ...((widget as any).options || {})
+                    type: 'chart',
+                    chartType: widgetType,
+                    data: dataItems,
+                    xAxisKey: xAxisKey,
+                    series: [{ dataKey: yField }],
+                    colors: CHART_COLORS,
+                    className: "h-[200px] sm:h-[250px] md:h-[300px]"
+                };
+            }
+
+            if (widgetType === 'table') {
+                return {
+                    type: 'data-table',
+                    ...(widget as any).options,
+                    data: (widget as any).data?.items || [],
+                    searchable: false,
+                    pagination: false,
+                    className: "border-0"
                 };
-            };
-            
-            const componentSchema = getComponentSchema();
-
-            // Check if the widget is self-contained (like a Metric Card) to avoid double borders
-            const isSelfContained = (widget as any).type === 'metric';
-
-            if (isSelfContained) {
-                return (
-                    <div 
-                        key={widget.id || widget.title}
-                        className="h-full w-full"
-                        style={widget.layout ? {
-                            gridColumn: `span ${widget.layout.w}`,
-                            gridRow: `span ${widget.layout.h}`
-                        }: undefined}
-                    >
-                         <SchemaRenderer schema={componentSchema} className="h-full w-full" />
-                    </div>
-                );
             }
 
+            return {
+                ...widget,
+                ...((widget as any).options || {})
+            };
+        };
+        
+        const componentSchema = getComponentSchema();
+        const isSelfContained = (widget as any).type === 'metric';
+
+        if (isSelfContained) {
             return (
-                <Card 
+                <div 
                     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 ? {
+                    className={cn("h-full w-full", isMobile && "w-[85vw] shrink-0 snap-center")}
+                    style={!isMobile && 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>
+                     <SchemaRenderer schema={componentSchema} className="h-full w-full" />
+                </div>
             );
-        })}
+        }
+
+        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",
+                    isMobile && "w-[85vw] shrink-0 snap-center"
+                )}
+                style={!isMobile && 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 px-3 sm:px-6">
+                        <CardTitle className="text-sm sm: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", "p-3 sm:p-4 md:p-6")}>
+                        <SchemaRenderer schema={componentSchema} />
+                    </div>
+                </CardContent>
+            </Card>
+        );
+    };
+
+    const refreshButton = onRefresh && (
+      <div className={cn(isMobile ? "flex justify-end mb-2" : "col-span-full flex justify-end mb-2")}>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleRefresh}
+          disabled={refreshing}
+          aria-label="Refresh dashboard"
+        >
+          <RefreshCw className={cn("h-4 w-4 mr-2", refreshing && "animate-spin")} />
+          {refreshing ? 'Refreshing…' : 'Refresh All'}
+        </Button>
+      </div>
+    );
+
+    if (isMobile) {
+      return (
+        <div ref={ref} className={cn("flex flex-col", className)} {...props}>
+          {refreshButton}
+          <div
+            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))}
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid auto-rows-min",
+          "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+          className
+        )}
+        style={{
+            ...(columns > 4 && { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }),
+            gap: `${gap * 0.25}rem`
+        }}
+        {...props}
+      >
+        {refreshButton}
+        {schema.widgets?.map((widget: DashboardWidgetSchema) => renderWidget(widget))}
       </div>
     );
   }

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

@@ -0,0 +1,124 @@
+/**
+ * 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, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { DashboardRenderer } from '../DashboardRenderer';
+import type { DashboardSchema } from '@object-ui/types';
+
+describe('DashboardRenderer auto-refresh', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  const mockSchema: DashboardSchema = {
+    type: 'dashboard',
+    name: 'test_dashboard',
+    title: 'Test Dashboard',
+    widgets: [],
+  };
+
+  it('should not render refresh button when onRefresh is not provided', () => {
+    render(<DashboardRenderer schema={mockSchema} />);
+    expect(screen.queryByLabelText('Refresh dashboard')).not.toBeInTheDocument();
+  });
+
+  it('should render refresh button when onRefresh is provided', () => {
+    const onRefresh = vi.fn();
+    render(<DashboardRenderer schema={mockSchema} onRefresh={onRefresh} />);
+    expect(screen.getByLabelText('Refresh dashboard')).toBeInTheDocument();
+  });
+
+  it('should call onRefresh when refresh button is clicked', () => {
+    const onRefresh = vi.fn();
+    render(<DashboardRenderer schema={mockSchema} onRefresh={onRefresh} />);
+
+    const button = screen.getByLabelText('Refresh dashboard');
+    fireEvent.click(button);
+
+    expect(onRefresh).toHaveBeenCalledTimes(1);
+  });
+
+  it('should auto-refresh at the configured interval', () => {
+    const onRefresh = vi.fn();
+    const schemaWithRefresh: DashboardSchema = {
+      ...mockSchema,
+      refreshInterval: 30, // 30 seconds
+    };
+
+    render(<DashboardRenderer schema={schemaWithRefresh} onRefresh={onRefresh} />);
+
+    expect(onRefresh).not.toHaveBeenCalled();
+
+    // Advance past one interval
+    act(() => {
+      vi.advanceTimersByTime(30_000);
+    });
+    expect(onRefresh).toHaveBeenCalledTimes(1);
+
+    // Advance past another interval
+    act(() => {
+      vi.advanceTimersByTime(30_000);
+    });
+    expect(onRefresh).toHaveBeenCalledTimes(2);
+  });
+
+  it('should not auto-refresh when refreshInterval is 0', () => {
+    const onRefresh = vi.fn();
+    const schemaWithZeroInterval: DashboardSchema = {
+      ...mockSchema,
+      refreshInterval: 0,
+    };
+
+    render(<DashboardRenderer schema={schemaWithZeroInterval} onRefresh={onRefresh} />);
+
+    act(() => {
+      vi.advanceTimersByTime(60_000);
+    });
+
+    expect(onRefresh).not.toHaveBeenCalled();
+  });
+
+  it('should not auto-refresh when onRefresh is not provided', () => {
+    const schemaWithRefresh: DashboardSchema = {
+      ...mockSchema,
+      refreshInterval: 10,
+    };
+
+    // Should not throw
+    render(<DashboardRenderer schema={schemaWithRefresh} />);
+
+    act(() => {
+      vi.advanceTimersByTime(30_000);
+    });
+  });
+
+  it('should clean up interval on unmount', () => {
+    const onRefresh = vi.fn();
+    const schemaWithRefresh: DashboardSchema = {
+      ...mockSchema,
+      refreshInterval: 5,
+    };
+
+    const { unmount } = render(
+      <DashboardRenderer schema={schemaWithRefresh} onRefresh={onRefresh} />
+    );
+
+    unmount();
+
+    act(() => {
+      vi.advanceTimersByTime(30_000);
+    });
+
+    expect(onRefresh).not.toHaveBeenCalled();
+  });
+});

package/src/index.tsx

@@ -11,18 +11,15 @@ import { DashboardRenderer } from './DashboardRenderer';
 import { DashboardGridLayout } from './DashboardGridLayout';
 import { MetricWidget } from './MetricWidget';
 import { MetricCard } from './MetricCard';
-import { ReportRenderer } from './ReportRenderer';
-import { ReportViewer } from './ReportViewer';
-import { ReportBuilder } from './ReportBuilder';
 
-export { DashboardRenderer, DashboardGridLayout, MetricWidget, MetricCard, ReportRenderer, ReportViewer, ReportBuilder };
+export { DashboardRenderer, DashboardGridLayout, MetricWidget, MetricCard };
 
 // Register dashboard component
 ComponentRegistry.register(
   'dashboard',
   DashboardRenderer,
   {
-    namespace: 'plugin-dashboard',
+    namespace: 'view',
     label: 'Dashboard',
     category: 'Complex',
     icon: 'layout-dashboard',
@@ -80,57 +77,6 @@ ComponentRegistry.register(
   }
 );
 
-// Register report component (legacy)
-ComponentRegistry.register(
-  'report',
-  ReportRenderer,
-  {
-    namespace: 'plugin-dashboard',
-    label: 'Report',
-    category: 'Dashboard',
-    inputs: [
-        { name: 'title', type: 'string', label: 'Title' },
-        { name: 'description', type: 'string', label: 'Description' },
-        { name: 'chart', type: 'code', label: 'Chart Configuration' },
-    ]
-  }
-);
-
-// Register report viewer component
-ComponentRegistry.register(
-  'report-viewer',
-  ReportViewer,
-  {
-    namespace: 'plugin-dashboard',
-    label: 'Report Viewer',
-    category: 'Reports',
-    inputs: [
-        { name: 'report', type: 'code', label: 'Report Configuration', required: true },
-        { name: 'data', type: 'code', label: 'Report Data' },
-        { name: 'showToolbar', type: 'boolean', label: 'Show Toolbar', defaultValue: true },
-        { name: 'allowExport', type: 'boolean', label: 'Allow Export', defaultValue: true },
-        { name: 'allowPrint', type: 'boolean', label: 'Allow Print', defaultValue: true },
-    ]
-  }
-);
-
-// Register report builder component
-ComponentRegistry.register(
-  'report-builder',
-  ReportBuilder,
-  {
-    namespace: 'plugin-dashboard',
-    label: 'Report Builder',
-    category: 'Reports',
-    inputs: [
-        { name: 'report', type: 'code', label: 'Initial Report Config' },
-        { name: 'dataSources', type: 'code', label: 'Available Data Sources' },
-        { name: 'availableFields', type: 'code', label: 'Available Fields' },
-        { name: 'showPreview', type: 'boolean', label: 'Show Preview', defaultValue: true },
-    ]
-  }
-);
-
 // Register dashboard grid layout component
 ComponentRegistry.register(
   'dashboard-grid',
@@ -159,8 +105,4 @@ export const dashboardComponents = {
   DashboardGridLayout,
   MetricWidget,
   MetricCard,
-  ReportRenderer,
-  ReportViewer,
-  ReportBuilder,
 };
-

package/dist/src/ReportBuilder.d.ts

@@ -1,11 +0,0 @@
-import { default as React } from 'react';
-import { ReportBuilderSchema } from '../../types/src';
-export interface ReportBuilderProps {
-    schema: ReportBuilderSchema;
-}
-/**
- * ReportBuilder - Interactive report builder component
- * Allows users to configure report fields, filters, grouping, sections, and export settings
- */
-export declare const ReportBuilder: React.FC<ReportBuilderProps>;
-//# sourceMappingURL=ReportBuilder.d.ts.map

package/dist/src/ReportBuilder.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReportBuilder.d.ts","sourceRoot":"","sources":["../../src/ReportBuilder.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,mBAAmB,EAAyE,MAAM,kBAAkB,CAAC;AAInI,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,mBAAmB,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0lBtD,CAAC"}

package/dist/src/ReportRenderer.d.ts

@@ -1,15 +0,0 @@
-import { default as React } from 'react';
-export interface ReportRendererProps {
-    schema: {
-        type: string;
-        id?: string;
-        title?: string;
-        description?: string;
-        chart?: any;
-        data?: any[];
-        columns?: any[];
-        className?: string;
-    };
-}
-export declare const ReportRenderer: React.FC<ReportRendererProps>;
-//# sourceMappingURL=ReportRenderer.d.ts.map

package/dist/src/ReportRenderer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReportRenderer.d.ts","sourceRoot":"","sources":["../../src/ReportRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,CAAC,EAAE,GAAG,CAAC;QACZ,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuExD,CAAC"}

package/dist/src/ReportViewer.d.ts

@@ -1,11 +0,0 @@
-import { default as React } from 'react';
-import { ReportViewerSchema } from '../../types/src';
-export interface ReportViewerProps {
-    schema: ReportViewerSchema;
-}
-/**
- * ReportViewer - Display a generated report with optional toolbar
- * Supports rendering report sections, charts, tables, and export functionality
- */
-export declare const ReportViewer: React.FC<ReportViewerProps>;
-//# sourceMappingURL=ReportViewer.d.ts.map

package/dist/src/ReportViewer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReportViewer.d.ts","sourceRoot":"","sources":["../../src/ReportViewer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,kBAAkB,EAAiB,MAAM,kBAAkB,CAAC;AAG1E,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,kBAAkB,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgNpD,CAAC"}