@object-ui/plugin-charts 0.5.0 → 3.0.0

package/dist/src/ObjectChart.stories.d.ts

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<{
+        schema: import('../../core/src').SchemaNode;
+    } & Record<string, any>, "ref"> & import('react').RefAttributes<any>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        schema: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const LineChart: Story;
+export declare const PieChart: Story;
+export declare const AreaChart: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-charts",
-  "version": "0.5.0",
+  "version": "3.0.0",
   "type": "module",
   "license": "MIT",
   "description": "Chart components plugin for Object UI, powered by Recharts",
@@ -25,19 +25,19 @@
   },
   "dependencies": {
     "recharts": "^3.7.0",
-    "@object-ui/components": "0.5.0",
-    "@object-ui/core": "0.5.0",
-    "@object-ui/react": "0.5.0",
-    "@object-ui/types": "0.5.0"
+    "@object-ui/components": "3.0.0",
+    "@object-ui/core": "3.0.0",
+    "@object-ui/react": "3.0.0",
+    "@object-ui/types": "3.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.10",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.3",
+    "@types/react": "19.2.13",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

package/src/AdvancedChartImpl.tsx

@@ -90,6 +90,14 @@ export default function AdvancedChartImpl({
   series = [],
   className = '',
 }: AdvancedChartImplProps) {
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 640);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
   const ChartComponent = {
     bar: BarChart,
     line: LineChart,
@@ -140,7 +148,10 @@ export default function AdvancedChartImpl({
                 return <Cell key={`cell-${index}`} fill={resolveColor(c)} />;
              })}
           </Pie>
-          <ChartLegend content={<ChartLegendContent nameKey={xAxisKey} />} />
+          <ChartLegend
+            content={<ChartLegendContent nameKey={xAxisKey} />}
+            {...(isMobile && { verticalAlign: "bottom", wrapperStyle: { fontSize: '11px', paddingTop: '8px' } })}
+          />
         </PieChart>
       </ChartContainer>
     );
@@ -155,7 +166,10 @@ export default function AdvancedChartImpl({
           <PolarAngleAxis dataKey={xAxisKey} />
           <PolarRadiusAxis />
           <ChartTooltip content={<ChartTooltipContent />} />
-          <ChartLegend content={<ChartLegendContent />} />
+          <ChartLegend
+            content={<ChartLegendContent />}
+            {...(isMobile && { verticalAlign: "bottom", wrapperStyle: { fontSize: '11px', paddingTop: '8px' } })}
+          />
           {series.map((s: any) => {
             const color = resolveColor(config[s.dataKey]?.color || DEFAULT_CHART_COLOR);
             return (
@@ -185,6 +199,7 @@ export default function AdvancedChartImpl({
             name={String(config[xAxisKey]?.label || xAxisKey)}
             tickLine={false}
             axisLine={false}
+            interval={isMobile ? Math.ceil(data.length / 5) : 0}
           />
           <YAxis 
             type="number"
@@ -195,7 +210,10 @@ export default function AdvancedChartImpl({
           />
           <ZAxis type="number" range={[60, 400]} />
           <ChartTooltip content={<ChartTooltipContent />} />
-          <ChartLegend content={<ChartLegendContent />} />
+          <ChartLegend
+            content={<ChartLegendContent />}
+            {...(isMobile && { verticalAlign: "bottom", wrapperStyle: { fontSize: '11px', paddingTop: '8px' } })}
+          />
           {series.map((s: any, index: number) => {
             const palette = getPalette();
             const color = resolveColor(config[s.dataKey]?.color || palette[index % palette.length]);
@@ -222,10 +240,14 @@ export default function AdvancedChartImpl({
           tickLine={false}
           tickMargin={10}
           axisLine={false}
+          interval={isMobile ? Math.ceil(data.length / 5) : 0}
           tickFormatter={(value) => (value && typeof value === 'string') ? value.slice(0, 3) : value}
         />
         <ChartTooltip content={<ChartTooltipContent />} />
-        <ChartLegend content={<ChartLegendContent />} />
+        <ChartLegend
+          content={<ChartLegendContent />}
+          {...(isMobile && { verticalAlign: "bottom", wrapperStyle: { fontSize: '11px', paddingTop: '8px' } })}
+        />
         {series.map((s: any) => {
           const color = resolveColor(config[s.dataKey]?.color || DEFAULT_CHART_COLOR);
           

package/src/ChartImpl.tsx

@@ -31,9 +31,9 @@ export default function ChartImpl({
   color = 'hsl(var(--primary))',
 }: ChartImplProps) {
   return (
-    <div className={`p-4 rounded-xl border border-border bg-card/40 backdrop-blur-sm shadow-lg shadow-background/5 ${className}`}>
+    <div className={`p-2 sm:p-3 md:p-4 rounded-xl border border-border bg-card/40 backdrop-blur-sm shadow-lg shadow-background/5 ${className}`}>
       <ResponsiveContainer width="100%" height={height}>
-        <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+        <BarChart data={data} margin={{ top: 10, right: 10, left: 10, bottom: 5 }}>
           <defs>
             <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
               <stop offset="0%" stopColor={color} stopOpacity={1} />

package/src/ChartRenderer.tsx

@@ -25,7 +25,7 @@ export interface ChartBarRendererProps {
  */
 export const ChartBarRenderer: React.FC<ChartBarRendererProps> = ({ schema }) => {
   return (
-    <Suspense fallback={<Skeleton className="w-full h-[400px]" />}>
+    <Suspense fallback={<Skeleton className="w-full h-48 sm:h-64 md:h-80 lg:h-[400px]" />}>
       <LazyChart
         data={schema.data}
         dataKey={schema.dataKey}
@@ -98,7 +98,7 @@ export const ChartRenderer: React.FC<ChartRendererProps> = ({ schema }) => {
   }, [schema]);
 
   return (
-    <Suspense fallback={<Skeleton className="w-full h-[400px]" />}>
+    <Suspense fallback={<Skeleton className="w-full h-48 sm:h-64 md:h-80 lg:h-[400px]" />}>
       <LazyAdvancedChart
         chartType={props.chartType}
         data={props.data}

package/src/ObjectChart.stories.tsx

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Plugins/ObjectChart',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+export const Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'chart',
+    chartType: 'bar',
+    data: [
+      { month: 'Jan', revenue: 4200 },
+      { month: 'Feb', revenue: 3800 },
+      { month: 'Mar', revenue: 5100 },
+      { month: 'Apr', revenue: 6300 },
+      { month: 'May', revenue: 5800 },
+      { month: 'Jun', revenue: 7200 },
+    ],
+    xAxisKey: 'month',
+    series: [{ dataKey: 'revenue' }],
+    config: {
+      revenue: { label: 'Revenue', color: '#3b82f6' },
+    },
+  } as any,
+};
+
+export const LineChart: Story = {
+  render: renderStory,
+  args: {
+    type: 'chart',
+    chartType: 'line',
+    data: [
+      { month: 'Jan', users: 150, sessions: 520 },
+      { month: 'Feb', users: 210, sessions: 680 },
+      { month: 'Mar', users: 280, sessions: 910 },
+      { month: 'Apr', users: 350, sessions: 1250 },
+      { month: 'May', users: 430, sessions: 1600 },
+      { month: 'Jun', users: 540, sessions: 2050 },
+    ],
+    config: {
+      users: { label: 'Active Users', color: '#8b5cf6' },
+      sessions: { label: 'Sessions', color: '#ec4899' },
+    },
+    xAxisKey: 'month',
+    series: [{ dataKey: 'users' }, { dataKey: 'sessions' }],
+  } as any,
+};
+
+export const PieChart: Story = {
+  render: renderStory,
+  args: {
+    type: 'pie-chart',
+    data: [
+      { name: 'Desktop', value: 55 },
+      { name: 'Mobile', value: 35 },
+      { name: 'Tablet', value: 10 },
+    ],
+    xAxisKey: 'name',
+    series: [{ dataKey: 'value' }],
+    config: {
+      Desktop: { label: 'Desktop', color: 'hsl(var(--chart-1))' },
+      Mobile: { label: 'Mobile', color: 'hsl(var(--chart-2))' },
+      Tablet: { label: 'Tablet', color: 'hsl(var(--chart-3))' },
+    },
+  } as any,
+};
+
+export const AreaChart: Story = {
+  render: renderStory,
+  args: {
+    type: 'chart',
+    chartType: 'area',
+    data: [
+      { date: 'Mon', traffic: 3200 },
+      { date: 'Tue', traffic: 2800 },
+      { date: 'Wed', traffic: 4100 },
+      { date: 'Thu', traffic: 3600 },
+      { date: 'Fri', traffic: 4800 },
+      { date: 'Sat', traffic: 2900 },
+      { date: 'Sun', traffic: 3400 },
+    ],
+    config: {
+      traffic: { label: 'Page Views', color: '#06b6d4' },
+    },
+    xAxisKey: 'date',
+    series: [{ dataKey: 'traffic' }],
+  } as any,
+};

package/src/ObjectChart.tsx

@@ -28,8 +28,8 @@ export const ObjectChart = (props: any) => {
             if (Array.isArray(results)) {
                 data = results;
             } else if (results && typeof results === 'object') {
-                if (Array.isArray((results as any).value)) {
-                    data = (results as any).value;
+                if (Array.isArray((results as any).records)) {
+                    data = (results as any).records;
                 }
             }
 
@@ -70,5 +70,10 @@ export const ObjectChart = (props: any) => {
 ComponentRegistry.register('object-chart', ObjectChart, {
     namespace: 'plugin-charts',
     label: 'Object Chart',
-    category: 'view'
+    category: 'view',
+    inputs: [
+        { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+        { name: 'data', type: 'array', label: 'Data', description: 'Optional static data' },
+        { name: 'filter', type: 'array', label: 'Filter' },
+    ]
 });

package/src/index.tsx

@@ -8,7 +8,7 @@
 
 import { ComponentRegistry } from '@object-ui/core';
 import { ChartBarRenderer, ChartRenderer } from './ChartRenderer';
-import './ObjectChart'; // Import for side-effects (registration of object-chart)
+import { ObjectChart } from './ObjectChart';
 
 // Export types for external use
 export type { BarChartSchema } from './types';
@@ -51,7 +51,18 @@ ComponentRegistry.register(
     },
   }
 );
-
+// Alias for generic view
+ComponentRegistry.register('chart', ObjectChart, {
+  namespace: 'view',
+  category: 'view',
+  label: 'Chart',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'type', type: 'string', label: 'Chart Type' },
+    { name: 'categoryField', type: 'string', label: 'Category Field' },
+    { name: 'valueField', type: 'string', label: 'Value Field' },
+  ]
+});
 // Register the advanced chart component
 ComponentRegistry.register(
   'chart',