@object-ui/plugin-charts 3.3.0 → 3.3.1

package/src/ChartImpl.tsx

@@ -1,91 +0,0 @@
-/**
- * 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 { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
-
-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 = 'value',
-  xAxisKey = 'name',
-  height = 400,
-  className = '',
-  // Default to standard primary color
-  color = 'hsl(var(--primary))',
-}: ChartImplProps) {
-  return (
-    <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: 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} />
-              <stop offset="90%" stopColor={color} stopOpacity={0.6} />
-              <stop offset="100%" stopColor={color} stopOpacity={0.3} />
-            </linearGradient>
-            <filter id="glow" height="130%">
-              <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
-              <feOffset in="blur" dx="0" dy="0" result="offsetBlur" />
-              <feFlood floodColor={color} floodOpacity="0.5" result="offsetColor" />
-              <feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur" />
-              <feMerge>
-                <feMergeNode in="offsetBlur" />
-                <feMergeNode in="SourceGraphic" />
-              </feMerge>
-            </filter>
-          </defs>
-          <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" vertical={false} />
-          <XAxis 
-            dataKey={xAxisKey} 
-            tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12, fontFamily: 'monospace' }} 
-            tickLine={false}
-            axisLine={{ stroke: 'hsl(var(--border))' }}
-            dy={10}
-          />
-          <YAxis 
-            tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12, fontFamily: 'monospace' }} 
-            tickLine={false}
-            axisLine={false}
-          />
-          <Tooltip 
-            cursor={{ fill: 'hsl(var(--muted))', opacity: 0.2 }}
-            contentStyle={{ 
-              backgroundColor: 'hsl(var(--popover))', 
-              borderColor: 'hsl(var(--border))', 
-              color: 'hsl(var(--popover-foreground))',
-              borderRadius: '8px',
-              fontFamily: 'monospace',
-              boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
-            }}
-            itemStyle={{ color: 'hsl(var(--primary))' }}
-          />
-          <Legend wrapperStyle={{ paddingTop: '20px', fontFamily: 'monospace' }} />
-          <Bar 
-            dataKey={dataKey} 
-            fill="url(#barGradient)" 
-            radius={[4, 4, 0, 0]}
-            filter="url(#glow)"
-            animationDuration={1500}
-          />
-        </BarChart>
-      </ResponsiveContainer>
-    </div>
-  );
-}

package/src/ChartRenderer.tsx

@@ -1,112 +0,0 @@
-
-import React, { Suspense } from 'react';
-import { Skeleton } from '@object-ui/components';
-import type { ChartConfig } from './ChartContainerImpl';
-
-// 🚀 Lazy load the implementation files
-const LazyChart = React.lazy(() => import('./ChartImpl'));
-const LazyAdvancedChart = React.lazy(() => import('./AdvancedChartImpl'));
-
-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
- */
-export const ChartBarRenderer: React.FC<ChartBarRendererProps> = ({ schema }) => {
-  return (
-    <Suspense fallback={<Skeleton className="w-full h-48 sm:h-64 md:h-80 lg:h-[400px]" />}>
-      <LazyChart
-        data={schema.data}
-        dataKey={schema.dataKey}
-        xAxisKey={schema.xAxisKey}
-        height={schema.height}
-        className={schema.className}
-        color={schema.color}
-      />
-    </Suspense>
-  );
-};
-
-export interface ChartRendererProps {
-  schema: {
-    type: string;
-    id?: string;
-    className?: string;
-    chartType?: 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'combo';
-    data?: Array<Record<string, any>>;
-    config?: Record<string, any>;
-    xAxisKey?: string;
-    series?: Array<{ dataKey: string }>;
-  };
-}
-
-/**
- * ChartRenderer - The public API for the advanced chart component
- */
-export const ChartRenderer: React.FC<ChartRendererProps> = ({ schema }) => {
-  // ⚡️ Adapter: Normalize JSON schema to Recharts Props
-  const props = React.useMemo(() => {
-    // 1. Defaults
-    let series = schema.series;
-    let xAxisKey = schema.xAxisKey;
-    let config = schema.config;
-
-    // 2. Adapt Tremor/Simple format (categories -> series, index -> xAxisKey)
-    if (!xAxisKey) {
-       if ((schema as any).index) xAxisKey = (schema as any).index;
-       else if ((schema as any).category) xAxisKey = (schema as any).category; // Support Pie/Donut category
-    }
-
-    if (!series) {
-       if ((schema as any).categories) {
-          series = (schema as any).categories.map((cat: string) => ({ dataKey: cat }));
-       } else if ((schema as any).value) {
-          // Single value adapter (for Pie/Simple charts)
-          series = [{ dataKey: (schema as any).value }];
-       }
-    }
-    
-    // 3. Auto-generate config/colors if missing
-    if (!config && series) {
-       const colors = (schema as any).colors || ['hsl(var(--chart-1))', 'hsl(var(--chart-2))', 'hsl(var(--chart-3))']; 
-       const newConfig: ChartConfig = {};
-       series.forEach((s: any, idx: number) => {
-         newConfig[s.dataKey] = { label: s.dataKey, color: colors[idx % colors.length] };
-       });
-       config = newConfig;
-    }
-
-    return {
-      chartType: schema.chartType,
-      data: Array.isArray(schema.data) ? schema.data : [],
-      config,
-      xAxisKey,
-      series,
-      className: schema.className
-    };
-  }, [schema]);
-
-  return (
-    <Suspense fallback={<Skeleton className="w-full h-48 sm:h-64 md:h-80 lg:h-[400px]" />}>
-      <LazyAdvancedChart
-        chartType={props.chartType}
-        data={props.data}
-        config={props.config}
-        xAxisKey={props.xAxisKey}
-        series={props.series}
-        className={props.className}
-      />
-    </Suspense>
-  );
-};

package/src/ObjectChart.stories.tsx

@@ -1,104 +0,0 @@
-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

@@ -1,298 +0,0 @@
-
-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.
- * Groups records by `groupBy` field and applies the aggregation function
- * to the `field` values in each group.
- */
-export function aggregateRecords(
-  records: any[],
-  aggregate: { field: string; function: string; groupBy: string }
-): any[] {
-  const { field, function: aggFn, groupBy } = aggregate;
-  const groups: Record<string, any[]> = {};
-
-  for (const record of records) {
-    const key = String(record[groupBy] ?? 'Unknown');
-    if (!groups[key]) groups[key] = [];
-    groups[key].push(record);
-  }
-
-  return Object.entries(groups).map(([key, group]) => {
-    const values = group.map(r => Number(r[field]) || 0);
-    let result: number;
-
-    switch (aggFn) {
-      case 'count':
-        result = group.length;
-        break;
-      case 'avg':
-        result = values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0;
-        break;
-      case 'min':
-        result = values.length > 0 ? Math.min(...values) : 0;
-        break;
-      case 'max':
-        result = values.length > 0 ? Math.max(...values) : 0;
-        break;
-      case 'sum':
-      default:
-        result = values.reduce((a, b) => a + b, 0);
-        break;
-    }
-
-    return { [groupBy]: key, [field]: result };
-  });
-}
-
-/**
- * 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';
-
-export const ObjectChart = (props: any) => {
-  const { schema } = props;
-  const context = useContext(SchemaRendererContext);
-  const dataSource = props.dataSource || context?.dataSource;
-  const boundData = useDataScope(schema.bind);
-  
-  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(() => {
-    const mounted = { current: true };
-
-    if (schema.objectName && !boundData && !schema.data) {
-        fetchData(dataSource, mounted);
-    }
-    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 : [];
-
-  // Merge data if not provided in schema
-  const finalSchema = {
-    ...schema,
-    data: finalData
-  };
-  
-  if (loading && finalData.length === 0) {
-      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 || '')} data-testid="chart-no-datasource">No data source available for &ldquo;{schema.objectName}&rdquo;</div>;
-  }
-
-  return <ChartRenderer {...props} schema={finalSchema} />;
-};
-
-// Register it
-ComponentRegistry.register('object-chart', ObjectChart, {
-    namespace: 'plugin-charts',
-    label: 'Object Chart',
-    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' },
-        { name: 'aggregate', type: 'object', label: 'Aggregate', description: 'Aggregation config: { field, function, groupBy }' },
-    ]
-});