@object-ui/plugin-dashboard 3.0.2 → 3.1.0

package/src/DashboardConfigPanel.tsx

@@ -0,0 +1,158 @@
+/**
+ * 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 {
+  ConfigPanelRenderer,
+  useConfigDraft,
+} from '@object-ui/components';
+import type { ConfigPanelSchema } from '@object-ui/components';
+
+// ---------------------------------------------------------------------------
+// Schema — describes the full DashboardConfigPanel structure
+// ---------------------------------------------------------------------------
+
+const dashboardSchema: ConfigPanelSchema = {
+  breadcrumb: ['Dashboard', 'Configuration'],
+  sections: [
+    {
+      key: 'layout',
+      title: 'Layout',
+      fields: [
+        {
+          key: 'columns',
+          label: 'Columns',
+          type: 'slider',
+          defaultValue: 3,
+          min: 1,
+          max: 12,
+          step: 1,
+        },
+        {
+          key: 'gap',
+          label: 'Gap',
+          type: 'slider',
+          defaultValue: 4,
+          min: 0,
+          max: 16,
+          step: 1,
+        },
+        {
+          key: 'rowHeight',
+          label: 'Row height',
+          type: 'input',
+          defaultValue: '120',
+          placeholder: 'e.g. 120',
+        },
+      ],
+    },
+    {
+      key: 'data',
+      title: 'Data',
+      collapsible: true,
+      fields: [
+        {
+          key: 'refreshInterval',
+          label: 'Refresh interval',
+          type: 'select',
+          defaultValue: '0',
+          options: [
+            { value: '0', label: 'Manual' },
+            { value: '30', label: '30s' },
+            { value: '60', label: '1 min' },
+            { value: '300', label: '5 min' },
+          ],
+        },
+      ],
+    },
+    {
+      key: 'appearance',
+      title: 'Appearance',
+      collapsible: true,
+      defaultCollapsed: true,
+      fields: [
+        {
+          key: 'title',
+          label: 'Title',
+          type: 'input',
+          placeholder: 'Dashboard title',
+        },
+        {
+          key: 'showDescription',
+          label: 'Show description',
+          type: 'switch',
+          defaultValue: true,
+        },
+        {
+          key: 'theme',
+          label: 'Theme',
+          type: 'select',
+          defaultValue: 'auto',
+          options: [
+            { value: 'light', label: 'Light' },
+            { value: 'dark', label: 'Dark' },
+            { value: 'auto', label: 'Auto' },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface DashboardConfigPanelProps {
+  /** Whether the panel is open */
+  open: boolean;
+  /** Close handler */
+  onClose: () => void;
+  /** Initial / committed dashboard configuration */
+  config: Record<string, any>;
+  /** Persist the updated config */
+  onSave: (config: Record<string, any>) => void;
+  /** Optional live-update callback */
+  onFieldChange?: (field: string, value: any) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * DashboardConfigPanel — Schema-driven configuration panel for dashboards.
+ *
+ * Built entirely on the generic ConfigPanelRenderer + useConfigDraft,
+ * demonstrating that a full config panel can be expressed in ~60 lines
+ * of declarative schema rather than 1500+ lines of imperative code.
+ */
+export function DashboardConfigPanel({
+  open,
+  onClose,
+  config,
+  onSave,
+  onFieldChange,
+}: DashboardConfigPanelProps) {
+  const { draft, isDirty, updateField, discard } = useConfigDraft(config, {
+    onUpdate: onFieldChange,
+  });
+
+  return (
+    <ConfigPanelRenderer
+      open={open}
+      onClose={onClose}
+      schema={dashboardSchema}
+      draft={draft}
+      isDirty={isDirty}
+      onFieldChange={updateField}
+      onSave={() => onSave(draft)}
+      onDiscard={discard}
+    />
+  );
+}

package/src/DashboardGridLayout.tsx

@@ -5,6 +5,7 @@ import { cn, Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui
 import { Edit, GripVertical, Save, X, RefreshCw } from 'lucide-react';
 import { SchemaRenderer, useHasDndProvider, useDnd } from '@object-ui/react';
 import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
+import { isObjectProvider } from './utils';
 
 /** Bridges editMode transitions to the ObjectUI DnD system when a DndProvider is present. */
 function DndEditModeBridge({ editMode }: { editMode: boolean }) {
@@ -126,12 +127,59 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
   const getComponentSchema = React.useCallback((widget: DashboardWidgetSchema) => {
     if (widget.component) return widget.component;
 
-    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';
+    const widgetType = widget.type;
+    const options = (widget.options || {}) as Record<string, any>;
+    if (widgetType === 'bar' || widgetType === 'line' || widgetType === 'area' || widgetType === 'pie' || widgetType === 'donut' || widgetType === 'scatter') {
+      const widgetData = (widget as any).data || options.data;
+      // Widget-level fields (from config panel) override options-level fields
+      const xAxisKey = widget.categoryField || options.xField || 'name';
+      const yField = widget.valueField || options.yField || 'value';
+
+      // provider: 'object' — delegate to ObjectChart for async data loading
+      if (isObjectProvider(widgetData)) {
+        // Merge widget-level fields with data provider config.
+        // Widget-level fields take precedence so that config panel
+        // edits are immediately reflected in the live preview.
+        const providerAgg = widgetData.aggregate;
+        const effectiveAggregate = providerAgg ? {
+          field: widget.valueField || providerAgg.field,
+          function: widget.aggregate || providerAgg.function,
+          groupBy: widget.categoryField || providerAgg.groupBy,
+        } : undefined;
+        const effectiveYField = effectiveAggregate?.field || yField;
+        return {
+          type: 'object-chart',
+          chartType: widgetType,
+          objectName: widget.object || widgetData.object,
+          aggregate: effectiveAggregate,
+          xAxisKey: xAxisKey,
+          series: [{ dataKey: effectiveYField }],
+          colors: CHART_COLORS,
+          className: "h-full"
+        };
+      }
+
+      // No explicit data provider but widget has object binding
+      // (e.g. newly created widget via config panel) — build object-chart
+      if (!widgetData && widget.object) {
+        const aggregate = widget.aggregate ? {
+          field: widget.valueField || 'value',
+          function: widget.aggregate,
+          groupBy: widget.categoryField || 'name',
+        } : undefined;
+        return {
+          type: 'object-chart',
+          chartType: widgetType,
+          objectName: widget.object,
+          aggregate,
+          xAxisKey: xAxisKey,
+          series: [{ dataKey: widget.valueField || 'value' }],
+          colors: CHART_COLORS,
+          className: "h-full"
+        };
+      }
+
+      const dataItems = Array.isArray(widgetData) ? widgetData : widgetData?.items || [];
       
       return {
         type: 'chart',
@@ -145,17 +193,72 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
     }
 
     if (widgetType === 'table') {
+      const widgetData = (widget as any).data || options.data;
+
+      // provider: 'object' — pass through object config for async data loading
+      if (isObjectProvider(widgetData)) {
+        const { data: _data, ...restOptions } = options;
+        return {
+          type: 'data-table',
+          ...restOptions,
+          objectName: widget.object || widgetData.object,
+          dataProvider: widgetData,
+          data: [],
+          searchable: false,
+          pagination: false,
+          className: "border-0"
+        };
+      }
+
+      // No explicit data provider but widget has object binding
+      if (!widgetData && widget.object) {
+        return {
+          type: 'data-table',
+          ...options,
+          objectName: widget.object,
+          data: [],
+          searchable: false,
+          pagination: false,
+          className: "border-0"
+        };
+      }
+
       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"
       };
     }
 
-    return widget;
+    if (widgetType === 'pivot') {
+      const widgetData = (widget as any).data || options.data;
+
+      // provider: 'object' — pass through object config for async data loading
+      if (isObjectProvider(widgetData)) {
+        const { data: _data, ...restOptions } = options;
+        return {
+          type: 'pivot',
+          ...restOptions,
+          objectName: widget.object || widgetData.object,
+          dataProvider: widgetData,
+          data: [],
+        };
+      }
+
+      return {
+        type: 'pivot',
+        ...options,
+        data: Array.isArray(widgetData) ? widgetData : widgetData?.items || [],
+      };
+    }
+
+    return {
+      ...widget,
+      ...options
+    };
   }, []);
 
   return (
@@ -216,7 +319,7 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
           {schema.widgets?.map((widget, index) => {
             const widgetId = widget.id || `widget-${index}`;
             const componentSchema = getComponentSchema(widget);
-            const isSelfContained = (widget as any).type === 'metric';
+            const isSelfContained = widget.type === 'metric';
 
             return (
               <div key={widgetId} className="h-full">