@object-ui/plugin-charts 3.1.5 → 3.3.1

package/dist/{jsx-runtime-C8d0IhUE.js → jsx-runtime-Caia9pQX.js}

@@ -1,5 +1,5 @@
 //#region \0rolldown/runtime.js
-var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), s = (e, n) => {
+var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), s = (e, n) => {
 	let r = {};
 	for (var i in e) t(r, i, {
 		get: e[i],

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,13 +1,13 @@
 {
   "name": "@object-ui/plugin-charts",
-  "version": "3.1.5",
+  "version": "3.3.1",
   "type": "module",
   "license": "MIT",
   "description": "Chart components plugin for Object UI, powered by Recharts",
-  "homepage": "https://www.objectui.org",
+  "homepage": "https://www.objectui.org/docs/plugins/plugin-charts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/objectstack-ai/objectui.git",
+    "url": "git+https://github.com/objectstack-ai/objectui.git",
     "directory": "packages/plugin-charts"
   },
   "bugs": {
@@ -24,11 +24,12 @@
     }
   },
   "dependencies": {
-    "recharts": "^3.8.0",
-    "@object-ui/components": "3.1.5",
-    "@object-ui/core": "3.1.5",
-    "@object-ui/react": "3.1.5",
-    "@object-ui/types": "3.1.5"
+    "lucide-react": "^1.8.0",
+    "recharts": "^3.8.1",
+    "@object-ui/components": "3.3.1",
+    "@object-ui/core": "3.3.1",
+    "@object-ui/react": "3.3.1",
+    "@object-ui/types": "3.3.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -38,10 +39,33 @@
     "@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.3",
+    "vite": "^8.0.9",
     "vite-plugin-dts": "^4.5.4"
   },
+  "keywords": [
+    "objectui",
+    "sdui",
+    "schema-driven-ui",
+    "react",
+    "tailwind",
+    "shadcn",
+    "objectstack",
+    "plugin",
+    "charts",
+    "recharts",
+    "visualization"
+  ],
+  "author": "ObjectStack Team <team@objectstack.ai>",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
   "scripts": {
     "build": "vite build",
     "test": "vitest run",

package/.turbo/turbo-build.log

@@ -1,26 +0,0 @@
-
-> @object-ui/plugin-charts@3.1.5 build /home/runner/work/objectui/objectui/packages/plugin-charts
-> vite build
-
-vite v8.0.1 building client environment for production...
-
-rendering chunks...
-
-[vite:dts] Start generate declaration files...
-[vite:dts] Declaration files built in 29474ms.
-
-computing gzip size...
-dist/ChartImpl-0VlpsMWG.js            3.70 kB │ gzip:   1.16 kB
-[PLUGIN_TIMINGS] Warning: Your build spent significant time in plugin `vite:dts`. See https://rolldown.rs/options/checks#plugintimings for more details.
-
-dist/index.js                         8.53 kB │ gzip:   2.53 kB
-dist/jsx-runtime-C8d0IhUE.js          8.60 kB │ gzip:   3.13 kB
-dist/AdvancedChartImpl-DmHTUUVD.js  120.71 kB │ gzip:  25.04 kB
-dist/BarChart-XZkfLmcU.js           533.19 kB │ gzip: 130.61 kB
-
-
-rendering chunks...
-computing gzip size...
-dist/index.umd.cjs  498.91 kB │ gzip: 143.06 kB
-
-✓ built in 34.99s

package/dist/src/ObjectChart.d.ts

@@ -1,12 +0,0 @@
-/**
- * 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[];
-export { extractRecords } from '../../core/src';
-export declare const ObjectChart: (props: any) => import("react/jsx-runtime").JSX.Element;

package/examples/chart-examples.ts

@@ -1,54 +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.
- */
-
-/**
- * Example: Using all new chart types
- * 
- * This example demonstrates the new Pie, Donut, Radar, and Scatter chart types
- */
-
-export const pieChartExample = {
-  type: 'pie-chart',
-  data: [
-    { name: 'Chrome', value: 65 },
-    { name: 'Firefox', value: 20 },
-    { name: 'Safari', value: 10 },
-    { name: 'Edge', value: 5 },
-  ],
-  xAxisKey: 'name',
-  series: [{ dataKey: 'value' }],
-  config: {
-    Chrome: { label: 'Chrome', color: 'hsl(var(--chart-1))' },
-    Firefox: { label: 'Firefox', color: 'hsl(var(--chart-2))' },
-    Safari: { label: 'Safari', color: 'hsl(var(--chart-3))' },
-    Edge: { label: 'Edge', color: 'hsl(var(--chart-4))' },
-  }
-};
-
-export const donutChartExample = {
-  type: 'donut-chart',
-  data: [
-    { category: 'Electronics', revenue: 45000 },
-    { category: 'Clothing', revenue: 32000 },
-    { category: 'Food', revenue: 28000 },
-    { category: 'Books', revenue: 15000 },
-  ],
-  xAxisKey: 'category',
-  series: [{ dataKey: 'revenue' }]
-};
-
-export const radarChartExample = {
-  type: 'radar-chart',
-  data: [
-    { skill: 'React', score: 90 },
-    { skill: 'TypeScript', score: 85 },
-    { skill: 'Node.js', score: 80 }
-  ],
-  xAxisKey: 'skill',
-  series: [{ dataKey: 'score' }]
-};

package/src/AdvancedChartImpl.tsx

@@ -1,309 +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 * as React from "react"
-import {
-  Bar,
-  BarChart,
-  Line,
-  LineChart,
-  Area,
-  AreaChart,
-  Pie,
-  PieChart,
-  Radar,
-  RadarChart,
-  PolarGrid,
-  PolarAngleAxis,
-  PolarRadiusAxis,
-  Scatter,
-  ScatterChart,
-  ZAxis,
-  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' | 'donut' | 'radar' | 'scatter' | 'combo';
-  data?: Array<Record<string, any>>;
-  config?: ChartConfig;
-  xAxisKey?: string;
-  series?: Array<{ dataKey: string; chartType?: 'bar' | 'line' | 'area' }>;
-  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: rawData = [],
-  config = {},
-  xAxisKey = 'name',
-  series = [],
-  className = '',
-}: AdvancedChartImplProps) {
-  const data = Array.isArray(rawData) ? rawData : [];
-  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,
-    area: AreaChart,
-    pie: PieChart,
-    donut: PieChart,
-    radar: RadarChart,
-    scatter: ScatterChart,
-    combo: BarChart,
-  }[chartType] || BarChart;
-
-  console.log('📈 Rendering Chart:', { chartType, dataLength: data.length, config, series, xAxisKey });
-
-  // Helper function to get color palette
-  const getPalette = () => [
-    'hsl(var(--chart-1))', 
-    'hsl(var(--chart-2))', 
-    'hsl(var(--chart-3))', 
-    'hsl(var(--chart-4))',
-    'hsl(var(--chart-5))'
-  ];
-
-  // Pie and Donut charts
-  if (chartType === 'pie' || chartType === 'donut') {
-    const innerRadius = chartType === 'donut' ? 60 : 0;
-    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={innerRadius}
-            strokeWidth={5}
-            paddingAngle={2}
-            outerRadius={80}
-          >
-             {data.map((entry, index) => {
-                // 1. Try config by nameKey (category)
-                let c = config[entry[xAxisKey]]?.color;
-                
-                // 2. Fallback to palette
-                if (!c) {
-                   const palette = getPalette();
-                   c = palette[index % palette.length];
-                }
-                
-                return <Cell key={`cell-${index}`} fill={resolveColor(c)} />;
-             })}
-          </Pie>
-          <ChartLegend
-            content={<ChartLegendContent nameKey={xAxisKey} />}
-            {...(isMobile && { verticalAlign: "bottom", wrapperStyle: { fontSize: '11px', paddingTop: '8px' } })}
-          />
-        </PieChart>
-      </ChartContainer>
-    );
-  }
-
-  // Radar chart
-  if (chartType === 'radar') {
-    return (
-      <ChartContainer config={config} className={className}>
-        <RadarChart data={data}>
-          <PolarGrid />
-          <PolarAngleAxis dataKey={xAxisKey} />
-          <PolarRadiusAxis />
-          <ChartTooltip content={<ChartTooltipContent />} />
-          <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 (
-              <Radar
-                key={s.dataKey}
-                dataKey={s.dataKey}
-                stroke={color}
-                fill={color}
-                fillOpacity={0.6}
-              />
-            );
-          })}
-        </RadarChart>
-      </ChartContainer>
-    );
-  }
-
-  // Scatter chart
-  if (chartType === 'scatter') {
-    return (
-      <ChartContainer config={config} className={className}>
-        <ScatterChart>
-          <CartesianGrid vertical={false} />
-          <XAxis 
-            type="number" 
-            dataKey={xAxisKey}
-            name={String(config[xAxisKey]?.label || xAxisKey)}
-            tickLine={false}
-            axisLine={false}
-            interval={isMobile ? Math.ceil(data.length / 5) : 0}
-          />
-          <YAxis 
-            type="number"
-            dataKey={series[0]?.dataKey || 'value'}
-            name={String(config[series[0]?.dataKey]?.label || series[0]?.dataKey)}
-            tickLine={false}
-            axisLine={false}
-          />
-          <ZAxis type="number" range={[60, 400]} />
-          <ChartTooltip content={<ChartTooltipContent />} />
-          <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]);
-            return (
-              <Scatter
-                key={s.dataKey}
-                name={config[s.dataKey]?.label || s.dataKey}
-                data={data}
-                fill={color}
-              />
-            );
-          })}
-        </ScatterChart>
-      </ChartContainer>
-    );
-  }
-
-  // Combo chart (mixed bar + line on same chart)
-  if (chartType === 'combo') {
-    return (
-      <ChartContainer config={config} className={className}>
-        <BarChart data={data}>
-          <CartesianGrid vertical={false} />
-          <XAxis
-            dataKey={xAxisKey}
-            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}
-          />
-          <YAxis yAxisId="left" tickLine={false} axisLine={false} />
-          <YAxis yAxisId="right" orientation="right" tickLine={false} axisLine={false} />
-          <ChartTooltip content={<ChartTooltipContent />} />
-          <ChartLegend
-            content={<ChartLegendContent />}
-            {...(isMobile && { verticalAlign: "bottom", wrapperStyle: { fontSize: '11px', paddingTop: '8px' } })}
-          />
-          {series.map((s: any, index: number) => {
-            const color = resolveColor(config[s.dataKey]?.color || DEFAULT_CHART_COLOR);
-            const seriesType = s.chartType || (index === 0 ? 'bar' : 'line');
-            const yAxisId = seriesType === 'bar' ? 'left' : 'right';
-            
-            if (seriesType === 'line') {
-              return <Line key={s.dataKey} yAxisId={yAxisId} type="monotone" dataKey={s.dataKey} stroke={color} strokeWidth={2} dot={false} />;
-            }
-            if (seriesType === 'area') {
-              return <Area key={s.dataKey} yAxisId={yAxisId} type="monotone" dataKey={s.dataKey} fill={color} stroke={color} fillOpacity={0.4} />;
-            }
-            return <Bar key={s.dataKey} yAxisId={yAxisId} dataKey={s.dataKey} fill={color} radius={4} />;
-          })}
-        </BarChart>
-      </ChartContainer>
-    );
-  }
-
-  return (
-    <ChartContainer config={config} className={className}>
-      <ChartComponent data={data}>
-        <CartesianGrid vertical={false} />
-        <XAxis
-          dataKey={xAxisKey}
-          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 />}
-          {...(isMobile && { verticalAlign: "bottom", wrapperStyle: { fontSize: '11px', paddingTop: '8px' } })}
-        />
-        {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>
-  );
-}