@object-ui/plugin-charts 0.3.0

package/dist/src/AdvancedChartImpl.d.ts

@@ -0,0 +1,16 @@
+import { ChartConfig } from './ChartContainerImpl';
+export interface AdvancedChartImplProps {
+    chartType?: 'bar' | 'line' | 'area' | 'pie';
+    data?: Array<Record<string, any>>;
+    config?: ChartConfig;
+    xAxisKey?: string;
+    series?: Array<{
+        dataKey: string;
+    }>;
+    className?: string;
+}
+/**
+ * AdvancedChartImpl - The heavy implementation that imports Recharts with full features
+ * This component is lazy-loaded to avoid including Recharts in the initial bundle
+ */
+export default function AdvancedChartImpl({ chartType, data, config, xAxisKey, series, className, }: AdvancedChartImplProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ChartContainerImpl.d.ts

@@ -0,0 +1,31 @@
+import { ResponsiveContainer, Tooltip, Legend } from 'recharts';
+import * as React from "react";
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof ResponsiveContainer>["children"];
+}): import("react/jsx-runtime").JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => import("react/jsx-runtime").JSX.Element | null;
+declare const ChartTooltip: typeof Tooltip;
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: any): import("react/jsx-runtime").JSX.Element | null;
+declare const ChartLegend: typeof Legend;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: any): import("react/jsx-runtime").JSX.Element | null;
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/src/ChartImpl.d.ts

@@ -0,0 +1,13 @@
+export interface ChartImplProps {
+    data?: Array<Record<string, any>>;
+    dataKey?: string;
+    xAxisKey?: string;
+    height?: number;
+    className?: string;
+    color?: string;
+}
+/**
+ * ChartImpl - The heavy implementation that imports Recharts
+ * This component is lazy-loaded to avoid including Recharts in the initial bundle
+ */
+export default function ChartImpl({ data, dataKey, xAxisKey, height, className, color, }: ChartImplProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/index.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+export type { BarChartSchema } from './types';
+export interface ChartBarRendererProps {
+    schema: {
+        type: string;
+        id?: string;
+        className?: string;
+        data?: Array<Record<string, any>>;
+        dataKey?: string;
+        xAxisKey?: string;
+        height?: number;
+        color?: string;
+    };
+}
+/**
+ * ChartBarRenderer - The public API for the bar chart component
+ * This wrapper handles lazy loading internally using React.Suspense
+ */
+export declare const ChartBarRenderer: React.FC<ChartBarRendererProps>;
+export interface ChartRendererProps {
+    schema: {
+        type: string;
+        id?: string;
+        className?: string;
+        chartType?: 'bar' | 'line' | 'area';
+        data?: Array<Record<string, any>>;
+        config?: Record<string, any>;
+        xAxisKey?: string;
+        series?: Array<{
+            dataKey: string;
+        }>;
+    };
+}
+/**
+ * ChartRenderer - The public API for the advanced chart component
+ * Supports multiple chart types (bar, line, area) with full configuration
+ */
+export declare const ChartRenderer: React.FC<ChartRendererProps>;
+export declare const chartComponents: {
+    'chart-bar': React.FC<ChartBarRendererProps>;
+    chart: React.FC<ChartRendererProps>;
+};

package/dist/src/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/types.d.ts

@@ -0,0 +1,47 @@
+import { BaseSchema } from '@object-ui/types';
+/**
+ * Bar Chart component schema.
+ * Renders a bar chart using Recharts library.
+ *
+ * @example
+ * ```typescript
+ * import type { BarChartSchema } from '@object-ui/plugin-charts';
+ *
+ * const chartSchema: BarChartSchema = {
+ *   type: 'chart-bar',
+ *   data: [
+ *     { name: 'Jan', value: 400 },
+ *     { name: 'Feb', value: 300 }
+ *   ],
+ *   dataKey: 'value',
+ *   xAxisKey: 'name'
+ * }
+ * ```
+ */
+export interface BarChartSchema extends BaseSchema {
+    type: 'chart-bar';
+    /**
+     * Array of data points to display in the chart.
+     */
+    data?: Array<Record<string, any>>;
+    /**
+     * Key in the data object for the Y-axis values.
+     * @default 'value'
+     */
+    dataKey?: string;
+    /**
+     * Key in the data object for the X-axis labels.
+     * @default 'name'
+     */
+    xAxisKey?: string;
+    /**
+     * Height of the chart in pixels.
+     * @default 400
+     */
+    height?: number;
+    /**
+     * Color of the bars.
+     * @default '#8884d8'
+     */
+    color?: string;
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@object-ui/plugin-charts",
+  "version": "0.3.0",
+  "type": "module",
+  "license": "MIT",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "dependencies": {
+    "recharts": "^2.15.0",
+    "@object-ui/components": "0.3.0",
+    "@object-ui/core": "0.3.0",
+    "@object-ui/react": "0.3.0",
+    "@object-ui/types": "0.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint ."
+  }
+}

package/src/AdvancedChartImpl.tsx

@@ -0,0 +1,162 @@
+import * as React from "react"
+import {
+  Bar,
+  BarChart,
+  Line,
+  LineChart,
+  Area,
+  AreaChart,
+  Pie,
+  PieChart,
+  Cell,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+} from 'recharts';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartConfig
+} from './ChartContainerImpl';
+
+// Default color fallback for chart series
+const DEFAULT_CHART_COLOR = 'hsl(var(--primary))';
+
+// Simple color map for Tailwind names (Mock - ideal would be computed styles)
+const TW_COLORS: Record<string, string> = {
+  slate: '#64748b',
+  gray: '#6b7280',
+  zinc: '#71717a',
+  neutral: '#737373',
+  stone: '#78716c',
+  red: '#ef4444',
+  orange: '#f97316',
+  amber: '#f59e0b',
+  yellow: '#eab308',
+  lime: '#84cc16',
+  green: '#22c55e',
+  emerald: '#10b981',
+  teal: '#14b8a6',
+  cyan: '#06b6d4',
+  sky: '#0ea5e9',
+  blue: '#3b82f6',
+  indigo: '#6366f1',
+  violet: '#8b5cf6',
+  purple: '#a855f7',
+  fuchsia: '#d946ef',
+  pink: '#ec4899',
+  rose: '#f43f5e',
+};
+
+const resolveColor = (color: string) => TW_COLORS[color] || color;
+
+export interface AdvancedChartImplProps {
+  chartType?: 'bar' | 'line' | 'area' | 'pie';
+  data?: Array<Record<string, any>>;
+  config?: ChartConfig;
+  xAxisKey?: string;
+  series?: Array<{ dataKey: string }>;
+  className?: string;
+}
+
+/**
+ * AdvancedChartImpl - The heavy implementation that imports Recharts with full features
+ * This component is lazy-loaded to avoid including Recharts in the initial bundle
+ */
+export default function AdvancedChartImpl({
+  chartType = 'bar',
+  data = [],
+  config = {},
+  xAxisKey = 'name',
+  series = [],
+  className = '',
+}: AdvancedChartImplProps) {
+  const ChartComponent = {
+    bar: BarChart,
+    line: LineChart,
+    area: AreaChart,
+    pie: PieChart,
+  }[chartType] || BarChart;
+
+  console.log('📈 Rendering Chart:', { chartType, dataLength: data.length, config, series, xAxisKey });
+
+  if (chartType === 'pie') {
+    return (
+      <ChartContainer config={config} className={className}>
+        <PieChart>
+          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          <Pie
+            data={data}
+            dataKey={series[0]?.dataKey || 'value'}
+            nameKey={xAxisKey || 'name'}
+            innerRadius={60}
+            strokeWidth={5}
+            paddingAngle={2}
+            outerRadius={80}
+          >
+             {data.map((entry, index) => {
+                // 1. Try config by nameKey (category)
+                let c = config[entry[xAxisKey]]?.color;
+                
+                // 2. Try series config (if only 1 series defined with color list, logic fails here usually)
+                if (!c) {
+                   // Fallback: If 'colors' array was passed in schema, my adapter put it in config[seriesKey]?
+                   // Actually my adapter logic in index.tsx was: config[seriesKey].color = colors[idx]
+                   // But here we are iterating DATA items, not SERIES.
+                   // So we need a cycling palette.
+                   // Let's assume the user didn't provide per-category config here, so we cycle default colors.
+                   const palette = [
+                     'hsl(var(--chart-1))', 
+                     'hsl(var(--chart-2))', 
+                     'hsl(var(--chart-3))', 
+                     'hsl(var(--chart-4))',
+                     'hsl(var(--chart-5))'
+                   ];
+                   // Check if we can get colors from the first series config?
+                   // No, let's just use the palette or resolveColor from entry if provided in data.
+                   c = palette[index % palette.length];
+                }
+                
+                return <Cell key={`cell-${index}`} fill={resolveColor(c)} />;
+             })}
+          </Pie>
+          <ChartLegend content={<ChartLegendContent nameKey={xAxisKey} />} />
+        </PieChart>
+      </ChartContainer>
+    );
+  }
+
+  return (
+    <ChartContainer config={config} className={className}>
+      <ChartComponent data={data}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey={xAxisKey}
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => (value && typeof value === 'string') ? value.slice(0, 3) : value}
+        />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        {series.map((s: any) => {
+          const color = resolveColor(config[s.dataKey]?.color || DEFAULT_CHART_COLOR);
+          
+          if (chartType === 'bar') {
+            return <Bar key={s.dataKey} dataKey={s.dataKey} fill={color} radius={4} />;
+          }
+          if (chartType === 'line') {
+            return <Line key={s.dataKey} type="monotone" dataKey={s.dataKey} stroke={color} strokeWidth={2} dot={false} />;
+          }
+          if (chartType === 'area') {
+            return <Area key={s.dataKey} type="monotone" dataKey={s.dataKey} fill={color} stroke={color} fillOpacity={0.4} />;
+          }
+          return null;
+        })}
+      </ChartComponent>
+    </ChartContainer>
+  );
+}