Merge pull request #831 from objectstack-ai/copilot/fix-object-chart-rendering

Author: hotlong

ROADMAP.md

@@ -738,6 +738,7 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 - [ ] `@object-ui/components`: ErrorBoundary wrapper per component
 - [ ] `@object-ui/fields`: Inline validation message rendering
 - [ ] `@object-ui/plugin-charts`: Drill-down click handler for chart segments
+- [x] `@object-ui/plugin-charts`: Fix `object-chart` crash when data is non-array — added `Array.isArray()` guards in ObjectChart, ChartRenderer, and AdvancedChartImpl to prevent Recharts `r.slice is not a function` error
 - [x] `@object-ui/plugin-workflow`: **FlowDesigner** — canvas-based flow editor (`flow-designer` component) with drag-to-reposition nodes, edge creation UI, undo/redo, Ctrl+S save, property panel, and BPMN export
 - [x] `@object-ui/plugin-workflow`: Support v3.0.9 BPMN interop types — `FlowBpmnInteropResult` with `bpmnXml` export, `nodeCount`, `edgeCount`, `warnings`
 - [x] `@object-ui/plugin-workflow`: Support v3.0.9 node executor descriptors — `FlowNodeExecutorDescriptor` with `inputSchema`, `outputSchema`, wait event config, retry policy

packages/plugin-charts/src/AdvancedChartImpl.tsx

@@ -84,12 +84,13 @@ export interface AdvancedChartImplProps {
  */
 export default function AdvancedChartImpl({
   chartType = 'bar',
-  data = [],
+  data: rawData = [],
   config = {},
   xAxisKey = 'name',
   series = [],
   className = '',
 }: AdvancedChartImplProps) {
+  const data = Array.isArray(rawData) ? rawData : [];
   const [isMobile, setIsMobile] = React.useState(false);
 
   React.useEffect(() => {

packages/plugin-charts/src/ChartRenderer.tsx

@@ -89,7 +89,7 @@ export const ChartRenderer: React.FC<ChartRendererProps> = ({ schema }) => {
 
     return {
       chartType: schema.chartType,
-      data: schema.data,
+      data: Array.isArray(schema.data) ? schema.data : [],
       config,
       xAxisKey,
       series,

packages/plugin-charts/src/ObjectChart.tsx

@@ -98,7 +98,8 @@ export const ObjectChart = (props: any) => {
     return () => { isMounted = false; };
   }, [schema.objectName, dataSource, boundData, schema.data, schema.filter, schema.aggregate]);
 
-  const finalData = boundData || schema.data || fetchedData || [];
+  const rawData = boundData || schema.data || fetchedData;
+  const finalData = Array.isArray(rawData) ? rawData : [];
 
   // Merge data if not provided in schema
   const finalSchema = {