@object-ui/plugin-charts 3.1.4 → 3.3.0

package/dist/packages/plugin-charts/src/ObjectChart.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Humanize a snake_case or kebab-case string into Title Case.
+ * Local implementation to avoid a dependency on @object-ui/fields.
+ */
+export declare function humanizeLabel(value: string): string;
+/**
+ * Client-side aggregation for fetched records.
+ * Groups records by `groupBy` field and applies the aggregation function
+ * to the `field` values in each group.
+ */
+export declare function aggregateRecords(records: any[], aggregate: {
+    field: string;
+    function: string;
+    groupBy: string;
+}): any[];
+/**
+ * Resolve groupBy field values to human-readable labels using field metadata.
+ *
+ * - **select/picklist** fields: maps value→label via `field.options`.
+ * - **lookup/master_detail** fields: batch-fetches referenced records
+ *   via `dataSource.find()` and maps id→name.
+ * - **fallback**: applies `humanizeLabel()` to convert snake_case/kebab-case
+ *   values into Title Case.
+ *
+ * The resolved data is a new array with the groupBy key replaced by its label.
+ * This function is pure data-layer logic — the rendering layer does not need
+ * to perform any value→label conversion.
+ */
+export declare function resolveGroupByLabels(data: any[], groupByField: string, objectSchema: any, dataSource?: any): Promise<any[]>;
+export { extractRecords } from '../../core/src';
+export declare const ObjectChart: (props: any) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-charts",
-  "version": "3.1.4",
+  "version": "3.3.0",
   "type": "module",
   "license": "MIT",
   "description": "Chart components plugin for Object UI, powered by Recharts",
@@ -24,11 +24,12 @@
     }
   },
   "dependencies": {
-    "recharts": "^3.8.0",
-    "@object-ui/components": "3.1.4",
-    "@object-ui/core": "3.1.4",
-    "@object-ui/react": "3.1.4",
-    "@object-ui/types": "3.1.4"
+    "lucide-react": "^1.8.0",
+    "recharts": "^3.8.1",
+    "@object-ui/components": "3.3.0",
+    "@object-ui/core": "3.3.0",
+    "@object-ui/react": "3.3.0",
+    "@object-ui/types": "3.3.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -38,8 +39,8 @@
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.1",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.8",
     "vite-plugin-dts": "^4.5.4"
   },
   "scripts": {

package/src/AdvancedChartImpl.tsx

@@ -110,7 +110,11 @@ export default function AdvancedChartImpl({
     combo: BarChart,
   }[chartType] || BarChart;
 
-  console.log('📈 Rendering Chart:', { chartType, dataLength: data.length, config, series, xAxisKey });
+  // Memoize whether any X-axis label is long enough to warrant angle rotation
+  const hasLongLabels = React.useMemo(
+    () => data.some((d: any) => String(d[xAxisKey] || '').length > 5),
+    [data, xAxisKey],
+  );
 
   // Helper function to get color palette
   const getPalette = () => [
@@ -245,7 +249,12 @@ export default function AdvancedChartImpl({
             tickMargin={10}
             axisLine={false}
             interval={isMobile ? Math.ceil(data.length / 5) : 0}
-            tickFormatter={(value) => (value && typeof value === 'string') ? value.slice(0, 3) : value}
+            tickFormatter={(value) => {
+              if (!value || typeof value !== 'string') return value;
+              if (isMobile && value.length > 8) return value.slice(0, 8) + '…';
+              return value;
+            }}
+            {...(!isMobile && hasLongLabels && { angle: -35, textAnchor: 'end', height: 60 })}
           />
           <YAxis yAxisId="left" tickLine={false} axisLine={false} />
           <YAxis yAxisId="right" orientation="right" tickLine={false} axisLine={false} />
@@ -282,7 +291,12 @@ export default function AdvancedChartImpl({
           tickMargin={10}
           axisLine={false}
           interval={isMobile ? Math.ceil(data.length / 5) : 0}
-          tickFormatter={(value) => (value && typeof value === 'string') ? value.slice(0, 3) : value}
+          tickFormatter={(value) => {
+            if (!value || typeof value !== 'string') return value;
+            if (isMobile && value.length > 8) return value.slice(0, 8) + '…';
+            return value;
+          }}
+          {...(!isMobile && hasLongLabels && { angle: -35, textAnchor: 'end', height: 60 })}
         />
         <ChartTooltip content={<ChartTooltipContent />} />
         <ChartLegend

package/src/ObjectChart.tsx

@@ -1,8 +1,17 @@
 
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useCallback } from 'react';
 import { useDataScope, SchemaRendererContext } from '@object-ui/react';
 import { ChartRenderer } from './ChartRenderer';
 import { ComponentRegistry, extractRecords } from '@object-ui/core';
+import { AlertCircle } from 'lucide-react';
+
+/**
+ * Humanize a snake_case or kebab-case string into Title Case.
+ * Local implementation to avoid a dependency on @object-ui/fields.
+ */
+export function humanizeLabel(value: string): string {
+  return value.replace(/[_-]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+}
 
 /**
  * Client-side aggregation for fetched records.
@@ -49,6 +58,119 @@ export function aggregateRecords(
   });
 }
 
+/**
+ * Resolve groupBy field values to human-readable labels using field metadata.
+ *
+ * - **select/picklist** fields: maps value→label via `field.options`.
+ * - **lookup/master_detail** fields: batch-fetches referenced records
+ *   via `dataSource.find()` and maps id→name.
+ * - **fallback**: applies `humanizeLabel()` to convert snake_case/kebab-case
+ *   values into Title Case.
+ *
+ * The resolved data is a new array with the groupBy key replaced by its label.
+ * This function is pure data-layer logic — the rendering layer does not need
+ * to perform any value→label conversion.
+ */
+export async function resolveGroupByLabels(
+  data: any[],
+  groupByField: string,
+  objectSchema: any,
+  dataSource?: any,
+): Promise<any[]> {
+  if (!data.length || !groupByField) return data;
+
+  const fieldDef = objectSchema?.fields?.[groupByField];
+  if (!fieldDef) {
+    // No metadata available — apply humanizeLabel as fallback
+    return data.map(row => ({
+      ...row,
+      [groupByField]: humanizeLabel(String(row[groupByField] ?? '')),
+    }));
+  }
+
+  const fieldType = fieldDef.type;
+
+  // --- select / picklist / dropdown fields ---
+  if (fieldType === 'select' || fieldType === 'picklist' || fieldType === 'dropdown') {
+    const options: Array<{ value: string; label: string } | string> = fieldDef.options || [];
+    if (options.length === 0) {
+      return data.map(row => ({
+        ...row,
+        [groupByField]: humanizeLabel(String(row[groupByField] ?? '')),
+      }));
+    }
+
+    // Build value→label map (options can be {value,label} objects or plain strings)
+    const labelMap: Record<string, string> = {};
+    for (const opt of options) {
+      if (typeof opt === 'string') {
+        labelMap[opt] = opt;
+      } else if (opt && typeof opt === 'object') {
+        labelMap[String(opt.value)] = opt.label || String(opt.value);
+      }
+    }
+
+    return data.map(row => {
+      const rawValue = String(row[groupByField] ?? '');
+      return {
+        ...row,
+        [groupByField]: labelMap[rawValue] || humanizeLabel(rawValue),
+      };
+    });
+  }
+
+  // --- lookup / master_detail fields ---
+  if (fieldType === 'lookup' || fieldType === 'master_detail') {
+    const referenceTo = fieldDef.reference_to || fieldDef.reference;
+    if (!referenceTo || !dataSource || typeof dataSource.find !== 'function') {
+      // Cannot resolve — return as-is
+      return data;
+    }
+
+    // Collect unique IDs to fetch
+    const ids = [...new Set(data.map(row => row[groupByField]).filter(v => v != null))];
+    if (ids.length === 0) return data;
+
+    // Derive the ID field from metadata (fallback to 'id')
+    const idField: string = fieldDef.id_field || 'id';
+
+    try {
+      const results = await dataSource.find(referenceTo, {
+        $filter: { [idField]: { $in: ids } },
+        $top: ids.length,
+      });
+      const records = extractRecords(results);
+
+      // Build id→label map using display field from metadata with sensible fallbacks
+      const displayField: string =
+        fieldDef.reference_field || fieldDef.display_field || 'name';
+      const idToName: Record<string, string> = {};
+      for (const rec of records) {
+        const id = String(rec[idField] ?? rec.id ?? rec._id ?? '');
+        const name = rec[displayField] || rec.name || rec.label || rec.title || id;
+        if (id) idToName[id] = String(name);
+      }
+
+      return data.map(row => {
+        const rawValue = String(row[groupByField] ?? '');
+        return {
+          ...row,
+          [groupByField]: idToName[rawValue] || rawValue,
+        };
+      });
+    } catch (e) {
+      console.warn('[ObjectChart] Failed to resolve lookup labels:', e);
+      return data;
+    }
+  }
+
+  // --- fallback for other field types ---
+  return data.map(row => ({
+    ...row,
+    [groupByField]: humanizeLabel(String(row[groupByField] ?? '')),
+  }));
+}
+
 // Re-export extractRecords from @object-ui/core for backward compatibility
 export { extractRecords } from '@object-ui/core';
 
@@ -60,56 +182,76 @@ export const ObjectChart = (props: any) => {
   
   const [fetchedData, setFetchedData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async (ds: any, mounted: { current: boolean }) => {
+      if (!ds || !schema.objectName) return;
+      if (mounted.current) {
+        setLoading(true);
+        setError(null);
+      }
+      try {
+          let data: any[];
+
+          // Prefer server-side aggregation when aggregate config is provided
+          // and dataSource supports the aggregate() method.
+          if (schema.aggregate && typeof ds.aggregate === 'function') {
+              const results = await ds.aggregate(schema.objectName, {
+                  field: schema.aggregate.field,
+                  function: schema.aggregate.function,
+                  groupBy: schema.aggregate.groupBy,
+                  filter: schema.filter,
+              });
+              data = Array.isArray(results) ? results : [];
+          } else if (typeof ds.find === 'function') {
+              // Fallback: fetch all records and aggregate client-side
+              const results = await ds.find(schema.objectName, {
+                 $filter: schema.filter
+              });
+              
+              data = extractRecords(results);
+
+              // Apply client-side aggregation when aggregate config is provided
+              if (schema.aggregate && data.length > 0) {
+                  data = aggregateRecords(data, schema.aggregate);
+              }
+          } else {
+              return;
+          }
+
+          // Resolve groupBy value→label using field metadata.
+          // The groupBy field is determined from aggregate config or xAxisKey.
+          const groupByField = schema.aggregate?.groupBy || schema.xAxisKey;
+          if (groupByField && typeof ds.getObjectSchema === 'function') {
+              try {
+                  const objectSchema = await ds.getObjectSchema(schema.objectName);
+                  data = await resolveGroupByLabels(data, groupByField, objectSchema, ds);
+              } catch {
+                  // Schema fetch failed — continue with raw values
+              }
+          }
+
+          if (mounted.current) {
+              setFetchedData(data);
+          }
+      } catch (e) {
+          console.error('[ObjectChart] Fetch error:', e);
+          if (mounted.current) {
+              setError(e instanceof Error ? e.message : 'Failed to load chart data');
+          }
+      } finally {
+          if (mounted.current) setLoading(false);
+      }
+  }, [schema.objectName, schema.aggregate, schema.filter, schema.xAxisKey]);
 
   useEffect(() => {
-    let isMounted = true;
-    const fetchData = async () => {
-        if (!dataSource || !schema.objectName) return;
-        if (isMounted) setLoading(true);
-        try {
-            let data: any[];
-
-            // Prefer server-side aggregation when aggregate config is provided
-            // and dataSource supports the aggregate() method.
-            if (schema.aggregate && typeof dataSource.aggregate === 'function') {
-                const results = await dataSource.aggregate(schema.objectName, {
-                    field: schema.aggregate.field,
-                    function: schema.aggregate.function,
-                    groupBy: schema.aggregate.groupBy,
-                    filter: schema.filter,
-                });
-                data = Array.isArray(results) ? results : [];
-            } else if (typeof dataSource.find === 'function') {
-                // Fallback: fetch all records and aggregate client-side
-                const results = await dataSource.find(schema.objectName, {
-                   $filter: schema.filter
-                });
-                
-                data = extractRecords(results);
-
-                // Apply client-side aggregation when aggregate config is provided
-                if (schema.aggregate && data.length > 0) {
-                    data = aggregateRecords(data, schema.aggregate);
-                }
-            } else {
-                return;
-            }
-
-            if (isMounted) {
-                setFetchedData(data);
-            }
-        } catch (e) {
-            console.error('[ObjectChart] Fetch error:', e);
-        } finally {
-            if (isMounted) setLoading(false);
-        }
-    };
+    const mounted = { current: true };
 
     if (schema.objectName && !boundData && !schema.data) {
-        fetchData();
+        fetchData(dataSource, mounted);
     }
-    return () => { isMounted = false; };
-  }, [schema.objectName, dataSource, boundData, schema.data, schema.filter, schema.aggregate]);
+    return () => { mounted.current = false; };
+  }, [schema.objectName, dataSource, boundData, schema.data, schema.filter, schema.aggregate, fetchData]);
 
   const rawData = boundData || schema.data || fetchedData;
   const finalData = Array.isArray(rawData) ? rawData : [];
@@ -121,11 +263,22 @@ export const ObjectChart = (props: any) => {
   };
   
   if (loading && finalData.length === 0) {
-      return <div className={"flex items-center justify-center text-muted-foreground text-sm p-4 " + (schema.className || '')}>Loading chart data…</div>;
+      return <div className={"flex items-center justify-center text-muted-foreground text-sm p-4 " + (schema.className || '')} data-testid="chart-loading">Loading chart data…</div>;
+  }
+
+  // Error state — show the error prominently so issues are not hidden
+  if (error) {
+      return (
+        <div className={"flex flex-col items-center justify-center gap-2 p-4 " + (schema.className || '')} data-testid="chart-error" role="alert">
+          <AlertCircle className="h-6 w-6 text-destructive opacity-60" />
+          <p className="text-xs text-destructive font-medium">Failed to load chart data</p>
+          <p className="text-xs text-muted-foreground max-w-xs text-center">{error}</p>
+        </div>
+      );
   }
 
   if (!dataSource && schema.objectName && finalData.length === 0) {
-      return <div className={"flex items-center justify-center text-muted-foreground text-sm p-4 " + (schema.className || '')}>No data source available for "{schema.objectName}"</div>;
+      return <div className={"flex items-center justify-center text-muted-foreground text-sm p-4 " + (schema.className || '')} data-testid="chart-no-datasource">No data source available for &ldquo;{schema.objectName}&rdquo;</div>;
   }
 
   return <ChartRenderer {...props} schema={finalSchema} />;