@object-ui/plugin-dashboard 3.0.3 → 3.1.0

package/src/MetricWidget.tsx

@@ -4,17 +4,24 @@ import { cn } from '@object-ui/components';
 import { ArrowDownIcon, ArrowUpIcon, MinusIcon } from 'lucide-react';
 import * as LucideIcons from 'lucide-react';
 
+/** Resolve an I18nLabel (string or {key, defaultValue}) to a plain string. */
+function resolveLabel(label: string | { key?: string; defaultValue?: string } | undefined): string | undefined {
+  if (label === undefined || label === null) return undefined;
+  if (typeof label === 'string') return label;
+  return label.defaultValue || label.key;
+}
+
 export interface MetricWidgetProps {
-  label: string;
+  label: string | { key?: string; defaultValue?: string };
   value: string | number;
   trend?: {
     value: number;
-    label?: string;
+    label?: string | { key?: string; defaultValue?: string };
     direction?: 'up' | 'down' | 'neutral';
   };
   icon?: React.ReactNode | string;
   className?: string;
-  description?: string;
+  description?: string | { key?: string; defaultValue?: string };
 }
 
 export const MetricWidget = ({
@@ -36,20 +43,20 @@ export const MetricWidget = ({
   }, [icon]);
 
   return (
-    <Card className={cn("h-full", className)} {...props}>
+    <Card className={cn("h-full overflow-hidden", className)} {...props}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">
-          {label}
+        <CardTitle className="text-sm font-medium truncate">
+          {resolveLabel(label)}
         </CardTitle>
-        {resolvedIcon && <div className="h-4 w-4 text-muted-foreground">{resolvedIcon}</div>}
+        {resolvedIcon && <div className="h-4 w-4 text-muted-foreground shrink-0">{resolvedIcon}</div>}
       </CardHeader>
       <CardContent>
-        <div className="text-2xl font-bold">{value}</div>
+        <div className="text-2xl font-bold truncate">{value}</div>
         {(trend || description) && (
-          <p className="text-xs text-muted-foreground flex items-center mt-1">
+          <p className="text-xs text-muted-foreground flex items-center mt-1 truncate">
             {trend && (
               <span className={cn(
-                "flex items-center mr-2",
+                "flex items-center mr-2 shrink-0",
                 trend.direction === 'up' && "text-green-500",
                 trend.direction === 'down' && "text-red-500",
                 trend.direction === 'neutral' && "text-yellow-500"
@@ -60,7 +67,7 @@ export const MetricWidget = ({
                 {trend.value}%
               </span>
             )}
-            {description || trend?.label}
+            <span className="truncate">{resolveLabel(description) || resolveLabel(trend?.label)}</span>
           </p>
         )}
       </CardContent>

package/src/ObjectDataTable.tsx

@@ -0,0 +1,191 @@
+/**
+ * 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 React, { useState, useEffect, useContext, useMemo } from 'react';
+import { useDataScope, SchemaRendererContext, SchemaRenderer } from '@object-ui/react';
+import { extractRecords } from '@object-ui/core';
+import { Skeleton, cn } from '@object-ui/components';
+
+export interface ObjectDataTableProps {
+  schema: {
+    type: string;
+    objectName?: string;
+    dataProvider?: { provider: string; object?: string };
+    bind?: string;
+    filter?: any;
+    data?: any[];
+    columns?: any[];
+    searchable?: boolean;
+    pagination?: boolean;
+    className?: string;
+    [key: string]: any;
+  };
+  dataSource?: any;
+  className?: string;
+}
+
+/**
+ * ObjectDataTable — Async-aware wrapper for data-table.
+ *
+ * When `objectName` is provided and a `dataSource` is available via context
+ * or props, fetches records automatically and passes them to the registered
+ * `data-table` component via SchemaRenderer.
+ *
+ * Also auto-derives columns from fetched data keys when no explicit columns
+ * are configured.
+ *
+ * Lifecycle states:
+ * - **Loading** → skeleton placeholder
+ * - **Error** → error message
+ * - **Empty** → friendly "No data available" message
+ * - **Data** → data-table with fetched rows
+ */
+export const ObjectDataTable: React.FC<ObjectDataTableProps> = ({ schema, dataSource: propDataSource, className }) => {
+  const context = useContext(SchemaRendererContext);
+  const dataSource = propDataSource || context?.dataSource;
+  const boundData = useDataScope(schema.bind);
+
+  const [fetchedData, setFetchedData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const fetchData = async () => {
+      if (!dataSource || !schema.objectName) return;
+      if (isMounted) {
+        setLoading(true);
+        setError(null);
+      }
+      try {
+        let data: any[];
+
+        if (typeof dataSource.find === 'function') {
+          const results = await dataSource.find(schema.objectName, {
+            $filter: schema.filter,
+          });
+          data = extractRecords(results);
+        } else {
+          return;
+        }
+
+        if (isMounted) {
+          setFetchedData(data);
+        }
+      } catch (e) {
+        console.error('[ObjectDataTable] Fetch error:', e);
+        if (isMounted) {
+          setError(e instanceof Error ? e.message : 'Failed to load data');
+        }
+      } finally {
+        if (isMounted) setLoading(false);
+      }
+    };
+
+    if (schema.objectName && !boundData && (!schema.data || schema.data.length === 0)) {
+      fetchData();
+    }
+
+    return () => { isMounted = false; };
+  }, [schema.objectName, dataSource, boundData, schema.data, schema.filter]);
+
+  // Resolve data: bound data > static schema data > fetched data
+  const rawData = boundData || schema.data || fetchedData;
+  const finalData = Array.isArray(rawData) ? rawData : [];
+
+  // Auto-derive columns from data keys when none are provided
+  const derivedColumns = useMemo(() => {
+    if (schema.columns && schema.columns.length > 0) return schema.columns;
+    if (finalData.length === 0) return [];
+    // Exclude internal/private fields (prefixed with '_') from auto-derived columns
+    const keys = Object.keys(finalData[0]).filter(k => !k.startsWith('_'));
+    // Convert camelCase keys to human-readable headers (e.g. firstName → First Name)
+    return keys.map(k => ({
+      header: k.charAt(0).toUpperCase() + k.slice(1).replace(/([A-Z])/g, ' $1'),
+      accessorKey: k,
+    }));
+  }, [schema.columns, finalData]);
+
+  // Loading skeleton
+  if (loading && finalData.length === 0) {
+    return (
+      <div className={cn('overflow-auto', className)} data-testid="table-loading">
+        <div className="space-y-2 p-2">
+          <div className="flex gap-2">
+            <Skeleton className="h-6 w-1/4" />
+            <Skeleton className="h-6 w-1/4" />
+            <Skeleton className="h-6 w-1/4" />
+            <Skeleton className="h-6 w-1/4" />
+          </div>
+          {[1, 2, 3, 4].map((i) => (
+            <div key={i} className="flex gap-2">
+              <Skeleton className="h-5 w-1/4" />
+              <Skeleton className="h-5 w-1/4" />
+              <Skeleton className="h-5 w-1/4" />
+              <Skeleton className="h-5 w-1/4" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className={cn('overflow-auto', className)} data-testid="table-error">
+        <div className="flex flex-col items-center justify-center py-8 text-destructive" data-testid="table-error-message">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 mb-2 opacity-60" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="8" x2="12" y2="12" />
+            <line x1="12" y1="16" x2="12.01" y2="16" />
+          </svg>
+          <p className="text-xs">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // No data source available but objectName configured
+  if (!dataSource && schema.objectName && finalData.length === 0) {
+    return (
+      <div className={cn('overflow-auto', className)}>
+        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+          <p className="text-xs">No data source available for &ldquo;{schema.objectName}&rdquo;</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Empty state
+  if (finalData.length === 0) {
+    return (
+      <div className={cn('overflow-auto', className)} data-testid="table-empty-state">
+        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 mb-2 opacity-40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+            <line x1="3" y1="9" x2="21" y2="9" />
+            <line x1="9" y1="21" x2="9" y2="9" />
+          </svg>
+          <p className="text-xs">No data available</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Delegate to data-table via SchemaRenderer
+  const tableSchema = {
+    ...schema,
+    type: 'data-table',
+    data: finalData,
+    columns: derivedColumns,
+  };
+
+  return <SchemaRenderer schema={tableSchema} className={className} />;
+};

package/src/ObjectPivotTable.tsx

@@ -0,0 +1,160 @@
+/**
+ * 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 React, { useState, useEffect, useContext } from 'react';
+import { useDataScope, SchemaRendererContext } from '@object-ui/react';
+import { extractRecords } from '@object-ui/core';
+import { Skeleton, cn } from '@object-ui/components';
+import { PivotTable } from './PivotTable';
+import type { PivotTableSchema } from '@object-ui/types';
+
+export interface ObjectPivotTableProps {
+  schema: PivotTableSchema & {
+    objectName?: string;
+    dataProvider?: { provider: string; object?: string };
+    bind?: string;
+    filter?: any;
+  };
+  dataSource?: any;
+  className?: string;
+}
+
+/**
+ * ObjectPivotTable — Async-aware wrapper around PivotTable.
+ *
+ * When `objectName` is provided and a `dataSource` is available via context
+ * or props, fetches records automatically and passes them to PivotTable.
+ *
+ * Lifecycle states:
+ * - **Loading** → skeleton placeholder
+ * - **Error** → error message
+ * - **Empty** → friendly "No data available" (delegated to PivotTable)
+ * - **Data** → PivotTable with fetched rows
+ */
+export const ObjectPivotTable: React.FC<ObjectPivotTableProps> = ({ schema, dataSource: propDataSource, className }) => {
+  const context = useContext(SchemaRendererContext);
+  const dataSource = propDataSource || context?.dataSource;
+  const boundData = useDataScope(schema.bind);
+
+  const [fetchedData, setFetchedData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const fetchData = async () => {
+      if (!dataSource || !schema.objectName) return;
+      if (isMounted) {
+        setLoading(true);
+        setError(null);
+      }
+      try {
+        let data: any[];
+
+        if (typeof dataSource.find === 'function') {
+          const results = await dataSource.find(schema.objectName, {
+            $filter: schema.filter,
+          });
+          data = extractRecords(results);
+        } else {
+          return;
+        }
+
+        if (isMounted) {
+          setFetchedData(data);
+        }
+      } catch (e) {
+        console.error('[ObjectPivotTable] Fetch error:', e);
+        if (isMounted) {
+          setError(e instanceof Error ? e.message : 'Failed to load data');
+        }
+      } finally {
+        if (isMounted) setLoading(false);
+      }
+    };
+
+    if (schema.objectName && !boundData && (!schema.data || schema.data.length === 0)) {
+      fetchData();
+    }
+
+    return () => { isMounted = false; };
+  }, [schema.objectName, dataSource, boundData, schema.data, schema.filter]);
+
+  // Resolve data: bound data > static schema data > fetched data
+  const rawData = boundData || schema.data || fetchedData;
+  const finalData = Array.isArray(rawData) ? rawData : [];
+
+  // Loading skeleton
+  if (loading && finalData.length === 0) {
+    return (
+      <div className={cn('overflow-auto', className)} data-testid="pivot-loading">
+        {schema.title && (
+          <h3 className="text-sm font-semibold mb-2">{schema.title}</h3>
+        )}
+        <div className="space-y-2 p-2">
+          <div className="flex gap-2">
+            <Skeleton className="h-6 w-24" />
+            <Skeleton className="h-6 w-20" />
+            <Skeleton className="h-6 w-20" />
+            <Skeleton className="h-6 w-20" />
+          </div>
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="flex gap-2">
+              <Skeleton className="h-5 w-24" />
+              <Skeleton className="h-5 w-20" />
+              <Skeleton className="h-5 w-20" />
+              <Skeleton className="h-5 w-20" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className={cn('overflow-auto', className)} data-testid="pivot-error">
+        {schema.title && (
+          <h3 className="text-sm font-semibold mb-2">{schema.title}</h3>
+        )}
+        <div className="flex flex-col items-center justify-center py-8 text-destructive" data-testid="pivot-error-message">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 mb-2 opacity-60" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="8" x2="12" y2="12" />
+            <line x1="12" y1="16" x2="12.01" y2="16" />
+          </svg>
+          <p className="text-xs">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // No data source available but objectName configured
+  if (!dataSource && schema.objectName && finalData.length === 0) {
+    return (
+      <div className={cn('overflow-auto', className)}>
+        {schema.title && (
+          <h3 className="text-sm font-semibold mb-2">{schema.title}</h3>
+        )}
+        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+          <p className="text-xs">No data source available for &ldquo;{schema.objectName}&rdquo;</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Delegate to PivotTable with resolved data
+  const finalSchema: PivotTableSchema = {
+    ...schema,
+    data: finalData,
+  };
+
+  return <PivotTable schema={finalSchema} className={className} />;
+};

package/src/PivotTable.tsx

@@ -0,0 +1,262 @@
+/**
+ * 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 React, { useMemo } from 'react';
+import type { PivotTableSchema, PivotAggregation } from '@object-ui/types';
+import { cn } from '@object-ui/components';
+
+export interface PivotTableProps {
+  schema: PivotTableSchema;
+  className?: string;
+}
+
+/** Apply a simple format string to a number. Supports prefix/suffix like "$,.2f". */
+function formatValue(value: number, format?: string): string {
+  if (!format) return String(value);
+
+  let prefix = '';
+  let suffix = '';
+  let useGrouping = false;
+  let decimals: number | undefined;
+
+  let fmt = format;
+
+  // Extract leading non-format characters as prefix (e.g. "$")
+  const prefixMatch = fmt.match(/^([^0-9.,#]*)/);
+  if (prefixMatch && prefixMatch[1]) {
+    // comma inside the prefix-ish area means grouping, not a literal prefix
+    const raw = prefixMatch[1];
+    prefix = raw.replace(',', '');
+    if (raw.includes(',')) useGrouping = true;
+    fmt = fmt.slice(prefixMatch[1].length);
+  }
+
+  // Grouping indicator anywhere remaining
+  if (fmt.includes(',')) {
+    useGrouping = true;
+    fmt = fmt.replace(/,/g, '');
+  }
+
+  // Decimal specifier e.g. ".2f"
+  const decMatch = fmt.match(/\.(\d+)f?/);
+  if (decMatch) {
+    decimals = Number(decMatch[1]);
+    fmt = fmt.slice(decMatch[0].length);
+  }
+
+  // Remaining characters become suffix
+  suffix = fmt.replace(/[0-9#.f]/g, '');
+
+  const formatted = decimals !== undefined ? value.toFixed(decimals) : String(value);
+
+  if (useGrouping) {
+    const [intPart, decPart] = formatted.split('.');
+    const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return prefix + (decPart !== undefined ? `${grouped}.${decPart}` : grouped) + suffix;
+  }
+
+  return prefix + formatted + suffix;
+}
+
+/** Aggregate an array of numbers with the given function. */
+function aggregate(values: number[], fn: PivotAggregation): number {
+  if (values.length === 0) return 0;
+  switch (fn) {
+    case 'sum':
+      return values.reduce((a, b) => a + b, 0);
+    case 'count':
+      return values.length;
+    case 'avg':
+      return values.reduce((a, b) => a + b, 0) / values.length;
+    case 'min':
+      return Math.min(...values);
+    case 'max':
+      return Math.max(...values);
+    default:
+      return values.reduce((a, b) => a + b, 0);
+  }
+}
+
+/**
+ * PivotTable – Cross-tabulation / Pivot Table component.
+ *
+ * Renders a matrix where rows correspond to `rowField`, columns to
+ * `columnField`, and cells show the aggregated `valueField`.
+ */
+export const PivotTable: React.FC<PivotTableProps> = ({ schema, className }) => {
+  const {
+    title,
+    rowField,
+    columnField,
+    valueField,
+    aggregation = 'sum',
+    data: rawData = [],
+    showRowTotals = false,
+    showColumnTotals = false,
+    format,
+    columnColors,
+  } = schema;
+
+  // Ensure data is always an array – provider config objects must not reach iteration
+  const data = Array.isArray(rawData) ? rawData : [];
+
+  const { rowKeys, colKeys, matrix, rowTotals, colTotals, grandTotal } = useMemo(() => {
+    // Collect unique row/column values preserving insertion order
+    const rowSet = new Map<string, true>();
+    const colSet = new Map<string, true>();
+    // Bucket raw values: bucket[row][col] = number[]
+    const bucket: Record<string, Record<string, number[]>> = {};
+
+    for (const item of data) {
+      const r = String(item[rowField] ?? '');
+      const c = String(item[columnField] ?? '');
+      const v = Number(item[valueField]) || 0;
+
+      rowSet.set(r, true);
+      colSet.set(c, true);
+
+      if (!bucket[r]) bucket[r] = {};
+      if (!bucket[r][c]) bucket[r][c] = [];
+      bucket[r][c].push(v);
+    }
+
+    const rKeys = Array.from(rowSet.keys());
+    const cKeys = Array.from(colSet.keys());
+
+    // Build aggregated matrix
+    const mat: Record<string, Record<string, number>> = {};
+    const rTotals: Record<string, number> = {};
+    const cTotals: Record<string, number> = {};
+
+    for (const r of rKeys) {
+      mat[r] = {};
+      const rowValues: number[] = [];
+      for (const c of cKeys) {
+        const cellValues = bucket[r]?.[c] ?? [];
+        const cellAgg = aggregate(cellValues, aggregation);
+        mat[r][c] = cellAgg;
+        rowValues.push(...cellValues);
+
+        // Accumulate column bucket values for column totals
+        if (!cTotals[c] && cTotals[c] !== 0) {
+          // Will compute after
+        }
+      }
+      rTotals[r] = aggregate(rowValues, aggregation);
+    }
+
+    // Column totals
+    for (const c of cKeys) {
+      const colValues: number[] = [];
+      for (const r of rKeys) {
+        const cellValues = bucket[r]?.[c] ?? [];
+        colValues.push(...cellValues);
+      }
+      cTotals[c] = aggregate(colValues, aggregation);
+    }
+
+    // Grand total
+    const allValues: number[] = [];
+    for (const item of data) {
+      allValues.push(Number(item[valueField]) || 0);
+    }
+    const gt = aggregate(allValues, aggregation);
+
+    return { rowKeys: rKeys, colKeys: cKeys, matrix: mat, rowTotals: rTotals, colTotals: cTotals, grandTotal: gt };
+  }, [data, rowField, columnField, valueField, aggregation]);
+
+  const fmt = (v: number) => formatValue(v, format);
+
+  if (data.length === 0) {
+    return (
+      <div className={cn('overflow-auto', className)}>
+        {title && (
+          <h3 className="text-sm font-semibold mb-2">{title}</h3>
+        )}
+        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground" data-testid="pivot-empty-state">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 mb-2 opacity-40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="3" y="3" width="7" height="7" />
+            <rect x="14" y="3" width="7" height="7" />
+            <rect x="3" y="14" width="7" height="7" />
+            <rect x="14" y="14" width="7" height="7" />
+          </svg>
+          <p className="text-xs">No data available</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('overflow-auto', className)}>
+      {title && (
+        <h3 className="text-sm font-semibold mb-2">{title}</h3>
+      )}
+      <table className="w-full text-sm border-collapse" role="table">
+        <thead>
+          <tr className="border-b border-border">
+            <th className="text-left p-2 font-medium text-muted-foreground">{rowField}</th>
+            {colKeys.map((col) => (
+              <th
+                key={col}
+                className={cn(
+                  'text-right p-2 font-medium',
+                  columnColors?.[col] ?? 'text-muted-foreground',
+                )}
+              >
+                {col}
+              </th>
+            ))}
+            {showRowTotals && (
+              <th className="text-right p-2 font-semibold text-muted-foreground bg-muted/20">Total</th>
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {rowKeys.map((row) => (
+            <tr key={row} className="border-b border-border/50 hover:bg-muted/30">
+              <td className="p-2 font-medium">{row}</td>
+              {colKeys.map((col) => (
+                <td
+                  key={col}
+                  className={cn(
+                    'text-right p-2 tabular-nums',
+                    columnColors?.[col],
+                  )}
+                >
+                  {fmt(matrix[row]?.[col] ?? 0)}
+                </td>
+              ))}
+              {showRowTotals && (
+                <td className="text-right p-2 font-semibold tabular-nums bg-muted/20">
+                  {fmt(rowTotals[row] ?? 0)}
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+        {showColumnTotals && (
+          <tfoot>
+            <tr className="border-t-2 border-border font-semibold bg-muted/40">
+              <td className="p-2">Total</td>
+              {colKeys.map((col) => (
+                <td key={col} className="text-right p-2 tabular-nums">
+                  {fmt(colTotals[col] ?? 0)}
+                </td>
+              ))}
+              {showRowTotals && (
+                <td className="text-right p-2 tabular-nums font-bold">
+                  {fmt(grandTotal)}
+                </td>
+              )}
+            </tr>
+          </tfoot>
+        )}
+      </table>
+    </div>
+  );
+};