@object-ui/plugin-charts 4.0.7 → 4.0.8

package/dist/index.umd.cjs

@@ -4,4 +4,4 @@ ${n.map(([e,n])=>{let r=n.theme?.[t]||n.color;return r?`  --color-${e}: ${r};`:n
 `)}
 }
 `).join(`
-`)}}):null},A=a.Tooltip,j=a.Legend})),N=g({default:()=>P});function P({chartType:e=`bar`,data:t=[],config:r={},xAxisKey:o=`name`,series:s=[],className:c=``}){let l=Array.isArray(t)?t:[],[u,d]=n.useState(!1);n.useEffect(()=>{let e=()=>d(window.innerWidth<640);return e(),window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let f={bar:a.BarChart,line:a.LineChart,area:a.AreaChart,pie:a.PieChart,donut:a.PieChart,radar:a.RadarChart,scatter:a.ScatterChart,combo:a.BarChart}[e]||a.BarChart,p=n.useMemo(()=>l.some(e=>String(e[o]||``).length>5),[l,o]),m=()=>[`hsl(var(--chart-1))`,`hsl(var(--chart-2))`,`hsl(var(--chart-3))`,`hsl(var(--chart-4))`,`hsl(var(--chart-5))`];if(e===`pie`||e===`donut`){let t=e===`donut`?60:0;return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.PieChart,{children:[(0,i.jsx)(A,{cursor:!1,content:(0,i.jsx)(C,{hideLabel:!0})}),(0,i.jsx)(a.Pie,{data:l,dataKey:s[0]?.dataKey||`value`,nameKey:o||`name`,innerRadius:t,strokeWidth:5,paddingAngle:2,outerRadius:80,children:l.map((e,t)=>{let n=r[e[o]]?.color;if(!n){let e=m();n=e[t%e.length]}return(0,i.jsx)(a.Cell,{fill:L(n)},`cell-${t}`)})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{nameKey:o}),...u&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}})]})})}return e===`radar`?(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.RadarChart,{data:l,children:[(0,i.jsx)(a.PolarGrid,{}),(0,i.jsx)(a.PolarAngleAxis,{dataKey:o}),(0,i.jsx)(a.PolarRadiusAxis,{}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...u&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map(e=>{let t=L(r[e.dataKey]?.color||F);return(0,i.jsx)(a.Radar,{dataKey:e.dataKey,stroke:t,fill:t,fillOpacity:.6},e.dataKey)})]})}):e===`scatter`?(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.ScatterChart,{children:[(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{type:`number`,dataKey:o,name:String(r[o]?.label||o),tickLine:!1,axisLine:!1,interval:u?Math.ceil(l.length/5):0}),(0,i.jsx)(a.YAxis,{type:`number`,dataKey:s[0]?.dataKey||`value`,name:String(r[s[0]?.dataKey]?.label||s[0]?.dataKey),tickLine:!1,axisLine:!1}),(0,i.jsx)(a.ZAxis,{type:`number`,range:[60,400]}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...u&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map((e,t)=>{let n=m(),o=L(r[e.dataKey]?.color||n[t%n.length]);return(0,i.jsx)(a.Scatter,{name:r[e.dataKey]?.label||e.dataKey,data:l,fill:o},e.dataKey)})]})}):e===`combo`?(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.BarChart,{data:l,children:[(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{dataKey:o,tickLine:!1,tickMargin:10,axisLine:!1,interval:u?Math.ceil(l.length/5):0,tickFormatter:e=>!e||typeof e!=`string`?e:u&&e.length>8?e.slice(0,8)+`…`:e,...!u&&p&&{angle:-35,textAnchor:`end`,height:60}}),(0,i.jsx)(a.YAxis,{yAxisId:`left`,tickLine:!1,axisLine:!1}),(0,i.jsx)(a.YAxis,{yAxisId:`right`,orientation:`right`,tickLine:!1,axisLine:!1}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...u&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map((e,t)=>{let n=L(r[e.dataKey]?.color||F),o=e.chartType||(t===0?`bar`:`line`),s=o===`bar`?`left`:`right`;return o===`line`?(0,i.jsx)(a.Line,{yAxisId:s,type:`monotone`,dataKey:e.dataKey,stroke:n,strokeWidth:2,dot:!1},e.dataKey):o===`area`?(0,i.jsx)(a.Area,{yAxisId:s,type:`monotone`,dataKey:e.dataKey,fill:n,stroke:n,fillOpacity:.4},e.dataKey):(0,i.jsx)(a.Bar,{yAxisId:s,dataKey:e.dataKey,fill:n,radius:4},e.dataKey)})]})}):(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(f,{data:l,children:[(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{dataKey:o,tickLine:!1,tickMargin:10,axisLine:!1,interval:u?Math.ceil(l.length/5):0,tickFormatter:e=>!e||typeof e!=`string`?e:u&&e.length>8?e.slice(0,8)+`…`:e,...!u&&p&&{angle:-35,textAnchor:`end`,height:60}}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...u&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map((t,n)=>{let o=m(),c=L(r[t.dataKey]?.color||o[n%o.length]||F);if(e===`bar`){let e=s.length===1&&l.length>1;return(0,i.jsx)(a.Bar,{dataKey:t.dataKey,fill:c,radius:4,children:e&&l.map((e,t)=>(0,i.jsx)(a.Cell,{fill:L(o[t%o.length])},`cell-${t}`))},t.dataKey)}return e===`line`?(0,i.jsx)(a.Line,{type:`monotone`,dataKey:t.dataKey,stroke:c,strokeWidth:2,dot:!1},t.dataKey):e===`area`?(0,i.jsx)(a.Area,{type:`monotone`,dataKey:t.dataKey,fill:c,stroke:c,fillOpacity:.4},t.dataKey):null})]})})}var F,I,L,R=h((()=>{M(),F=`hsl(var(--primary))`,I={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`},L=e=>I[e]||e})),z=n.default.lazy(()=>Promise.resolve().then(()=>(b(),v))),B=n.default.lazy(()=>Promise.resolve().then(()=>(R(),N))),V=({schema:e})=>(0,i.jsx)(n.Suspense,{fallback:(0,i.jsx)(r.Skeleton,{className:`w-full h-48 sm:h-64 md:h-80 lg:h-[400px]`}),children:(0,i.jsx)(z,{data:e.data,dataKey:e.dataKey,xAxisKey:e.xAxisKey,height:e.height,className:e.className,color:e.color})}),H=({schema:e})=>{let t=n.default.useMemo(()=>{let t=e.series,n=e.xAxisKey,r=e.config;if(n||(e.index?n=e.index:e.category&&(n=e.category)),t||(e.categories?t=e.categories.map(e=>({dataKey:e})):e.value&&(t=[{dataKey:e.value}])),!r&&t){let n=e.colors||[`hsl(var(--chart-1))`,`hsl(var(--chart-2))`,`hsl(var(--chart-3))`],i={};t.forEach((e,t)=>{i[e.dataKey]={label:e.label||e.dataKey,color:n[t%n.length]}}),r=i}return{chartType:e.chartType,data:Array.isArray(e.data)?e.data:[],config:r,xAxisKey:n,series:t,className:e.className}},[e]);return(0,i.jsx)(n.Suspense,{fallback:(0,i.jsx)(r.Skeleton,{className:`w-full h-48 sm:h-64 md:h-80 lg:h-[400px]`}),children:(0,i.jsx)(B,{chartType:t.chartType,data:t.data,config:t.config,xAxisKey:t.xAxisKey,series:t.series,className:t.className})})};function U(e){return e.replace(/[_-]/g,` `).replace(/\b\w/g,e=>e.toUpperCase())}function W(e,t){let{field:n,function:r,groupBy:i}=t,a={};for(let t of e){let e=String(t[i]??`Unknown`);a[e]||(a[e]=[]),a[e].push(t)}return Object.entries(a).map(([e,t])=>{let a=t.map(e=>Number(e[n])||0),o;switch(r){case`count`:o=t.length;break;case`avg`:o=a.length>0?a.reduce((e,t)=>e+t,0)/a.length:0;break;case`min`:o=a.length>0?Math.min(...a):0;break;case`max`:o=a.length>0?Math.max(...a):0;break;default:o=a.reduce((e,t)=>e+t,0);break}return{[i]:e,[n]:o}})}async function G(e,n,r,i,a){if(!e.length||!n)return e;let o=a||((e,t)=>t),s=r?.fields?.[n];if(!s)return e.map(e=>{let t=String(e[n]??``),r=U(t);return{...e,[n]:o(t,r)}});let c=s.type;if(c===`select`||c===`picklist`||c===`dropdown`){let t=s.options||[];if(t.length===0)return e.map(e=>{let t=String(e[n]??``),r=U(t);return{...e,[n]:o(t,r)}});let r={};for(let e of t)typeof e==`string`?r[e]=e:e&&typeof e==`object`&&(r[String(e.value)]=e.label||String(e.value));return e.map(e=>{let t=String(e[n]??``),i=r[t]||U(t);return{...e,[n]:o(t,i)}})}if(c===`lookup`||c===`master_detail`){let r=s.reference_to||s.reference;if(!r||!i||typeof i.find!=`function`)return e;let a=[...new Set(e.map(e=>e[n]).filter(e=>e!=null))];if(a.length===0)return e;let o=s.id_field||`id`;try{let c=(0,t.extractRecords)(await i.find(r,{$filter:{[o]:{$in:a}},$top:a.length})),l=s.reference_field||s.display_field||`name`,u={};for(let e of c){let t=String(e[o]??e.id??e._id??``),n=e[l]||e.name||e.label||e.title||t;t&&(u[t]=String(n))}return e.map(e=>{let t=String(e[n]??``);return{...e,[n]:u[t]||t}})}catch(t){return console.warn(`[ObjectChart] Failed to resolve lookup labels:`,t),e}}return e.map(e=>({...e,[n]:U(String(e[n]??``))}))}var K=e=>{let{schema:r}=e,a=(0,n.useContext)(o.SchemaRendererContext),l=e.dataSource||a?.dataSource,u=(0,o.useDataScope)(r.bind),{fieldOptionLabel:d}=(0,c.useSafeFieldLabel)(),f=(0,n.useRef)(d);(0,n.useEffect)(()=>{f.current=d},[d]);let[p,m]=(0,n.useState)([]),[h,g]=(0,n.useState)(!1),[_,v]=(0,n.useState)(null),y=(0,n.useMemo)(()=>r.aggregate?JSON.stringify(r.aggregate):``,[r.aggregate]),b=(0,n.useMemo)(()=>r.filter?JSON.stringify(r.filter):``,[r.filter]),x=(0,n.useCallback)(async(e,n)=>{if(!(!e||!r.objectName)){n.current&&(g(!0),v(null));try{let i;if(r.aggregate&&typeof e.aggregate==`function`){let t=await e.aggregate(r.objectName,{field:r.aggregate.field,function:r.aggregate.function,groupBy:r.aggregate.groupBy,filter:r.filter});i=Array.isArray(t)?t:[]}else if(typeof e.find==`function`)i=(0,t.extractRecords)(await e.find(r.objectName,{$filter:r.filter})),r.aggregate&&i.length>0&&(i=W(i,r.aggregate));else return;let a=r.aggregate?.groupBy||r.xAxisKey;if(a&&typeof e.getObjectSchema==`function`)try{let t=await e.getObjectSchema(r.objectName);i=await G(i,a,t,e,(e,t)=>f.current(r.objectName,a,e,t))}catch{}n.current&&m(i)}catch(e){console.error(`[ObjectChart] Fetch error:`,e),n.current&&v(e instanceof Error?e.message:`Failed to load chart data`)}finally{n.current&&g(!1)}}},[r.objectName,y,b,r.xAxisKey]);(0,n.useEffect)(()=>{let e={current:!0};return r.objectName&&!u&&!r.data&&x(l,e),()=>{e.current=!1}},[r.objectName,l,u,r.data,b,y,x]);let S=u||r.data||p,C=Array.isArray(S)?S:[],w={...r,data:C};return h&&C.length===0?(0,i.jsx)(`div`,{className:`flex items-center justify-center text-muted-foreground text-sm p-4 `+(r.className||``),"data-testid":`chart-loading`,children:`Loading chart data…`}):_?(0,i.jsxs)(`div`,{className:`flex flex-col items-center justify-center gap-2 p-4 `+(r.className||``),"data-testid":`chart-error`,role:`alert`,children:[(0,i.jsx)(s.AlertCircle,{className:`h-6 w-6 text-destructive opacity-60`}),(0,i.jsx)(`p`,{className:`text-xs text-destructive font-medium`,children:`Failed to load chart data`}),(0,i.jsx)(`p`,{className:`text-xs text-muted-foreground max-w-xs text-center`,children:_})]}):!l&&r.objectName&&C.length===0?(0,i.jsxs)(`div`,{className:`flex items-center justify-center text-muted-foreground text-sm p-4 `+(r.className||``),"data-testid":`chart-no-datasource`,children:[`No data source available for “`,r.objectName,`”`]}):(0,i.jsx)(H,{...e,schema:w})};t.ComponentRegistry.register(`object-chart`,K,{namespace:`plugin-charts`,label:`Object Chart`,category:`view`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{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 }`}]});var q={"bar-chart":V,chart:H};t.ComponentRegistry.register(`bar-chart`,V,{namespace:`plugin-charts`,label:`Bar Chart`,category:`plugin`,inputs:[{name:`data`,type:`array`,label:`Data`,required:!0},{name:`dataKey`,type:`string`,label:`Data Key`,defaultValue:`value`},{name:`xAxisKey`,type:`string`,label:`X-Axis Key`,defaultValue:`name`},{name:`height`,type:`number`,label:`Height`,defaultValue:400},{name:`color`,type:`color`,label:`Color`,defaultValue:`#8884d8`}],defaultProps:{data:[{name:`Jan`,value:400},{name:`Feb`,value:300},{name:`Mar`,value:600},{name:`Apr`,value:800},{name:`May`,value:500}],dataKey:`value`,xAxisKey:`name`,height:400,color:`#8884d8`}}),t.ComponentRegistry.register(`chart`,K,{namespace:`view`,category:`view`,label:`Chart`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{name:`type`,type:`string`,label:`Chart Type`},{name:`categoryField`,type:`string`,label:`Category Field`},{name:`valueField`,type:`string`,label:`Value Field`}]}),t.ComponentRegistry.register(`chart`,H,{namespace:`plugin-charts`,label:`Chart`,category:`plugin`,inputs:[{name:`chartType`,type:`enum`,label:`Chart Type`,enum:[{label:`Bar`,value:`bar`},{label:`Line`,value:`line`},{label:`Area`,value:`area`},{label:`Pie`,value:`pie`},{label:`Donut`,value:`donut`},{label:`Radar`,value:`radar`},{label:`Scatter`,value:`scatter`}],defaultValue:`bar`},{name:`data`,type:`code`,label:`Data (JSON)`,required:!0},{name:`config`,type:`code`,label:`Config (JSON)`},{name:`xAxisKey`,type:`string`,label:`X Axis Key`,defaultValue:`name`},{name:`series`,type:`code`,label:`Series (JSON Array)`,required:!0},{name:`className`,type:`string`,label:`CSS Class`}],defaultProps:{chartType:`bar`,data:[{name:`Jan`,sales:400,revenue:240},{name:`Feb`,sales:300,revenue:139},{name:`Mar`,sales:600,revenue:380},{name:`Apr`,sales:800,revenue:430},{name:`May`,sales:500,revenue:220}],config:{sales:{label:`Sales`,color:`#8884d8`},revenue:{label:`Revenue`,color:`#82ca9d`}},xAxisKey:`name`,series:[{dataKey:`sales`},{dataKey:`revenue`}]}}),t.ComponentRegistry.register(`chart:bar`,H,{namespace:`plugin-charts`,label:`Bar Chart (Alias)`,category:`plugin`,defaultProps:{chartType:`bar`}}),t.ComponentRegistry.register(`pie-chart`,H,{namespace:`plugin-charts`,label:`Pie Chart`,category:`plugin`,defaultProps:{chartType:`pie`}}),t.ComponentRegistry.register(`donut-chart`,H,{namespace:`plugin-charts`,label:`Donut Chart`,category:`plugin`,defaultProps:{chartType:`donut`}}),t.ComponentRegistry.register(`radar-chart`,H,{namespace:`plugin-charts`,label:`Radar Chart`,category:`plugin`,defaultProps:{chartType:`radar`}}),t.ComponentRegistry.register(`scatter-chart`,H,{namespace:`plugin-charts`,label:`Scatter Chart`,category:`plugin`,defaultProps:{chartType:`scatter`}}),e.ChartBarRenderer=V,e.ChartRenderer=H,e.ObjectChart=K,e.chartComponents=q});
+`)}}):null},A=a.Tooltip,j=a.Legend})),N=g({default:()=>P});function P({chartType:e=`bar`,data:t=[],config:r={},xAxisKey:o=`name`,series:s=[],className:c=``,onChartClick:l}){let u=Array.isArray(t)?t:[],[d,f]=n.useState(!1),p=n.useCallback(e=>{if(!l||!e)return;let t=Array.isArray(e.activePayload)?e.activePayload[0]:void 0;l({category:e.activeLabel==null?void 0:String(e.activeLabel),series:t?.dataKey?String(t.dataKey):void 0,value:typeof t?.value==`number`?t.value:void 0})},[l]),m=n.useCallback(e=>{if(!l||!e)return;let t=e.payload?.[o],n=s[0]?.dataKey||`value`;l({category:t==null?void 0:String(t),series:n,value:typeof e.payload?.[n]==`number`?e.payload[n]:void 0})},[l,o,s]),h=l?{onClick:p,style:{cursor:`pointer`}}:{},g=l?{onClick:m,style:{cursor:`pointer`}}:{};n.useEffect(()=>{let e=()=>f(window.innerWidth<640);return e(),window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let _={bar:a.BarChart,"horizontal-bar":a.BarChart,line:a.LineChart,area:a.AreaChart,pie:a.PieChart,donut:a.PieChart,radar:a.RadarChart,scatter:a.ScatterChart,funnel:a.FunnelChart,combo:a.BarChart}[e]||a.BarChart,v=n.useCallback(e=>{if(e==null||e===``)return``;let t=typeof e==`string`?e:String(e);if(/^\d{4}-\d{2}-\d{2}/.test(t)){let e=new Date(t);if(!Number.isNaN(e.getTime())){let t=(u.length>1?Math.abs(new Date(String(u[u.length-1][o]??``)).getTime()-new Date(String(u[0][o]??``)).getTime()):0)/(1e3*60*60*24);try{return t<=62?e.toLocaleDateString(void 0,{month:`short`,day:`numeric`}):e.toLocaleDateString(void 0,{month:`short`,year:`numeric`})}catch{return e.toISOString().slice(0,10)}}}return d&&t.length>8?t.slice(0,8)+`…`:t},[u,o,d]),y=n.useMemo(()=>u.some(e=>String(e[o]||``).length>5),[u,o]),b=()=>[`hsl(var(--chart-1))`,`hsl(var(--chart-2))`,`hsl(var(--chart-3))`,`hsl(var(--chart-4))`,`hsl(var(--chart-5))`];if(e===`pie`||e===`donut`){let t=e===`donut`?60:0;return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.PieChart,{children:[(0,i.jsx)(A,{cursor:!1,content:(0,i.jsx)(C,{hideLabel:!0})}),(0,i.jsx)(a.Pie,{data:u,dataKey:s[0]?.dataKey||`value`,nameKey:o||`name`,innerRadius:t,strokeWidth:5,paddingAngle:2,outerRadius:80,...g,children:u.map((e,t)=>{let n=r[e[o]]?.color;if(!n){let e=b();n=e[t%e.length]}return(0,i.jsx)(a.Cell,{fill:L(n)},`cell-${t}`)})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{nameKey:o}),...d&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}})]})})}if(e===`funnel`){let e=s[0]?.dataKey||`value`,t=b(),n=l?t=>{t&&l({category:t?.payload?.[o]??t?.[o],value:t?.payload?.[e]??t?.[e]})}:void 0;return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.FunnelChart,{children:[(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsxs)(a.Funnel,{dataKey:e,data:u,nameKey:o,isAnimationActive:!0,...n?{onClick:n,style:{cursor:`pointer`}}:{},children:[(0,i.jsx)(a.LabelList,{position:`right`,fill:`hsl(var(--foreground))`,stroke:`none`,dataKey:o}),u.map((e,n)=>(0,i.jsx)(a.Cell,{fill:L(t[n%t.length])},`funnel-cell-${n}`))]})]})})}if(e===`radar`)return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.RadarChart,{data:u,children:[(0,i.jsx)(a.PolarGrid,{}),(0,i.jsx)(a.PolarAngleAxis,{dataKey:o}),(0,i.jsx)(a.PolarRadiusAxis,{}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...d&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map(e=>{let t=L(r[e.dataKey]?.color||F);return(0,i.jsx)(a.Radar,{dataKey:e.dataKey,stroke:t,fill:t,fillOpacity:.6},e.dataKey)})]})});if(e===`scatter`)return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.ScatterChart,{children:[(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{type:`number`,dataKey:o,name:String(r[o]?.label||o),tickLine:!1,axisLine:!1,interval:d?Math.ceil(u.length/5):0}),(0,i.jsx)(a.YAxis,{type:`number`,dataKey:s[0]?.dataKey||`value`,name:String(r[s[0]?.dataKey]?.label||s[0]?.dataKey),tickLine:!1,axisLine:!1}),(0,i.jsx)(a.ZAxis,{type:`number`,range:[60,400]}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...d&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map((e,t)=>{let n=b(),o=L(r[e.dataKey]?.color||n[t%n.length]);return(0,i.jsx)(a.Scatter,{name:r[e.dataKey]?.label||e.dataKey,data:u,fill:o},e.dataKey)})]})});if(e===`combo`)return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.BarChart,{data:u,children:[(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{dataKey:o,tickLine:!1,tickMargin:10,axisLine:!1,interval:d?Math.ceil(u.length/5):0,tickFormatter:v,...!d&&y&&{angle:-35,textAnchor:`end`,height:60}}),(0,i.jsx)(a.YAxis,{yAxisId:`left`,tickLine:!1,axisLine:!1}),(0,i.jsx)(a.YAxis,{yAxisId:`right`,orientation:`right`,tickLine:!1,axisLine:!1}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...d&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map((e,t)=>{let n=L(r[e.dataKey]?.color||F),o=e.chartType||(t===0?`bar`:`line`),s=o===`bar`?`left`:`right`;return o===`line`?(0,i.jsx)(a.Line,{yAxisId:s,type:`monotone`,dataKey:e.dataKey,stroke:n,strokeWidth:2,dot:!1},e.dataKey):o===`area`?(0,i.jsx)(a.Area,{yAxisId:s,type:`monotone`,dataKey:e.dataKey,fill:n,stroke:n,fillOpacity:.4},e.dataKey):(0,i.jsx)(a.Bar,{yAxisId:s,dataKey:e.dataKey,fill:n,radius:4},e.dataKey)})]})});let x=e===`horizontal-bar`;return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(_,{data:u,layout:x?`vertical`:`horizontal`,...h,children:[(0,i.jsx)(a.CartesianGrid,{vertical:!1}),x?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(a.XAxis,{type:`number`,tickLine:!1,axisLine:!1}),(0,i.jsx)(a.YAxis,{type:`category`,dataKey:o,tickLine:!1,axisLine:!1,width:Math.min(140,Math.max(60,Math.max(...u.map(e=>String(e[o]??``).length))*7)),tickFormatter:v})]}):(0,i.jsx)(a.XAxis,{dataKey:o,tickLine:!1,tickMargin:10,axisLine:!1,interval:d?Math.ceil(u.length/5):0,tickFormatter:v,...!d&&y&&{angle:-35,textAnchor:`end`,height:60}}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...d&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map((t,n)=>{let o=b(),c=L(r[t.dataKey]?.color||o[n%o.length]||F);if(e===`bar`||e===`horizontal-bar`){let e=s.length===1&&u.length>1;return(0,i.jsx)(a.Bar,{dataKey:t.dataKey,fill:c,radius:4,children:e&&u.map((e,t)=>(0,i.jsx)(a.Cell,{fill:L(o[t%o.length])},`cell-${t}`))},t.dataKey)}return e===`line`?(0,i.jsx)(a.Line,{type:`monotone`,dataKey:t.dataKey,stroke:c,strokeWidth:2,dot:!1},t.dataKey):e===`area`?(0,i.jsx)(a.Area,{type:`monotone`,dataKey:t.dataKey,fill:c,stroke:c,fillOpacity:.4},t.dataKey):null})]})})}var F,I,L,R=h((()=>{M(),F=`hsl(var(--primary))`,I={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`},L=e=>I[e]||e})),z=n.default.lazy(()=>Promise.resolve().then(()=>(b(),v))),B=n.default.lazy(()=>Promise.resolve().then(()=>(R(),N))),V=({schema:e})=>(0,i.jsx)(n.Suspense,{fallback:(0,i.jsx)(r.Skeleton,{className:`w-full h-48 sm:h-64 md:h-80 lg:h-[400px]`}),children:(0,i.jsx)(z,{data:e.data,dataKey:e.dataKey,xAxisKey:e.xAxisKey,height:e.height,className:e.className,color:e.color})}),H=({schema:e,onChartClick:t})=>{let a=n.default.useMemo(()=>{let t=e.series,n=e.xAxisKey,r=e.config;if(n||(e.index?n=e.index:e.category&&(n=e.category)),t||(e.categories?t=e.categories.map(e=>({dataKey:e})):e.value&&(t=[{dataKey:e.value}])),!r&&t){let n=e.colors||[`hsl(var(--chart-1))`,`hsl(var(--chart-2))`,`hsl(var(--chart-3))`],i={};t.forEach((e,t)=>{i[e.dataKey]={label:e.label||e.dataKey,color:n[t%n.length]}}),r=i}return{chartType:e.chartType,data:Array.isArray(e.data)?e.data:[],config:r,xAxisKey:n,series:t,className:e.className}},[e]);return(0,i.jsx)(n.Suspense,{fallback:(0,i.jsx)(r.Skeleton,{className:`w-full h-48 sm:h-64 md:h-80 lg:h-[400px]`}),children:(0,i.jsx)(B,{chartType:a.chartType,data:a.data,config:a.config,xAxisKey:a.xAxisKey,series:a.series,className:a.className,onChartClick:t})})};function U(e){return e.replace(/[_-]/g,` `).replace(/\b\w/g,e=>e.toUpperCase())}function W(e,t){let{field:n,function:r,groupBy:i}=t,a={};for(let t of e){let e=String(t[i]??`Unknown`);a[e]||(a[e]=[]),a[e].push(t)}return Object.entries(a).map(([e,t])=>{let a=t.map(e=>Number(e[n])||0),o;switch(r){case`count`:o=t.length;break;case`avg`:o=a.length>0?a.reduce((e,t)=>e+t,0)/a.length:0;break;case`min`:o=a.length>0?Math.min(...a):0;break;case`max`:o=a.length>0?Math.max(...a):0;break;default:o=a.reduce((e,t)=>e+t,0);break}return{[i]:e,[n]:o}})}async function G(e,n,r,i,a){if(!e.length||!n)return e;let o=a||((e,t)=>t),s=`__raw_${n}`,c=r?.fields?.[n];if(!c){let t=/^\d{4}-\d{2}-\d{2}/;return e.map(e=>{let r=e[n],i=String(r??``),a=t.test(i)?i:U(i);return{...e,[n]:o(i,a),[s]:r}})}let l=c.type;if(l===`select`||l===`picklist`||l===`dropdown`){let t=c.options||[];if(t.length===0)return e.map(e=>{let t=e[n],r=String(t??``),i=U(r);return{...e,[n]:o(r,i),[s]:t}});let r={};for(let e of t)typeof e==`string`?r[e]=e:e&&typeof e==`object`&&(r[String(e.value)]=e.label||String(e.value));return e.map(e=>{let t=e[n],i=String(t??``),a=r[i]||U(i);return{...e,[n]:o(i,a),[s]:t}})}if(l===`lookup`||l===`master_detail`){let r=c.reference_to||c.reference;if(!r||!i||typeof i.find!=`function`)return e.map(e=>({...e,[s]:e[n]}));let a=[...new Set(e.map(e=>e[n]).filter(e=>e!=null))];if(a.length===0)return e.map(e=>({...e,[s]:e[n]}));let o=c.id_field||`id`;try{let l=(0,t.extractRecords)(await i.find(r,{$filter:{[o]:{$in:a}},$top:a.length})),u=c.reference_field||c.display_field||`name`,d={};for(let e of l){let t=String(e[o]??e.id??e._id??``),n=e[u]||e.name||e.label||e.title||t;t&&(d[t]=String(n))}return e.map(e=>{let t=e[n],r=String(t??``);return{...e,[n]:d[r]||r,[s]:t}})}catch(t){return console.warn(`[ObjectChart] Failed to resolve lookup labels:`,t),e.map(e=>({...e,[s]:e[n]}))}}if(l===`date`||l===`datetime`||l===`date_time`||l===`timestamp`||l===`time`)return e.map(e=>({...e,[s]:e[n]}));let u=/^\d{4}-\d{2}-\d{2}/;return e.map(e=>{let t=e[n],r=String(t??``);return{...e,[n]:u.test(r)?r:U(r),[s]:t}})}var K=e=>{let{schema:a}=e,l=(0,n.useContext)(o.SchemaRendererContext),u=e.dataSource||l?.dataSource,d=(0,o.useDataScope)(a.bind),{fieldOptionLabel:f}=(0,c.useSafeFieldLabel)(),p=(0,n.useRef)(f);(0,n.useEffect)(()=>{p.current=f},[f]);let[m,h]=(0,n.useState)([]),[g,_]=(0,n.useState)(!1),[v,y]=(0,n.useState)(null),[b,x]=(0,n.useState)(null),S=(0,n.useMemo)(()=>a.aggregate?JSON.stringify(a.aggregate):``,[a.aggregate]),C=(0,n.useMemo)(()=>a.filter?JSON.stringify(a.filter):``,[a.filter]),w=(0,n.useCallback)(async(e,n)=>{if(!(!e||!a.objectName)){n.current&&(_(!0),y(null));try{let r,i=(0,t.resolveDateMacros)(a.filter);if(a.aggregate&&typeof e.aggregate==`function`){let t=await e.aggregate(a.objectName,{field:a.aggregate.field,function:a.aggregate.function,groupBy:a.aggregate.groupBy,filter:i});r=Array.isArray(t)?t:[]}else if(typeof e.find==`function`)r=(0,t.extractRecords)(await e.find(a.objectName,{$filter:i})),a.aggregate&&r.length>0&&(r=W(r,a.aggregate));else return;let o=a.aggregate?.groupBy||a.xAxisKey;if(o&&typeof e.getObjectSchema==`function`)try{let t=await e.getObjectSchema(a.objectName);r=await G(r,o,t,e,(e,t)=>p.current(a.objectName,o,e,t))}catch{}n.current&&h(r)}catch(e){console.error(`[ObjectChart] Fetch error:`,e),n.current&&y(e instanceof Error?e.message:`Failed to load chart data`)}finally{n.current&&_(!1)}}},[a.objectName,S,C,a.xAxisKey]);(0,n.useEffect)(()=>{let e={current:!0};return a.objectName&&!d&&!a.data&&w(u,e),()=>{e.current=!1}},[a.objectName,u,d,a.data,C,S,w]);let T=d||a.data||m,E=Array.isArray(T)?T:[],D=a.drillDown,O=a.aggregate?.groupBy||a.xAxisKey,k=(0,n.useMemo)(()=>{if(!O)return new Map;let e=new Map,t=`__raw_${O}`;for(let n of E){let r=n?.[O];if(r==null)continue;let i=t in(n||{})?n[t]:r;e.set(String(r),i)}return e},[E,O]),A={...a,data:E};if(g&&E.length===0)return(0,i.jsx)(`div`,{className:`flex items-center justify-center text-muted-foreground text-sm p-4 `+(a.className||``),"data-testid":`chart-loading`,children:`Loading chart data…`});if(v)return(0,i.jsxs)(`div`,{className:`flex flex-col items-center justify-center gap-2 p-4 `+(a.className||``),"data-testid":`chart-error`,role:`alert`,children:[(0,i.jsx)(s.AlertCircle,{className:`h-6 w-6 text-destructive opacity-60`}),(0,i.jsx)(`p`,{className:`text-xs text-destructive font-medium`,children:`Failed to load chart data`}),(0,i.jsx)(`p`,{className:`text-xs text-muted-foreground max-w-xs text-center`,children:v})]});if(!u&&a.objectName&&E.length===0)return(0,i.jsxs)(`div`,{className:`flex items-center justify-center text-muted-foreground text-sm p-4 `+(a.className||``),"data-testid":`chart-no-datasource`,children:[`No data source available for “`,a.objectName,`”`]});let j=(0,t.isDrillEnabled)(D)?e=>{let t=e.category,n=t!=null&&k.has(String(t))?k.get(String(t)):t;x({...e,category:n,categoryLabel:t,scope:`cell`})}:void 0,M=b&&a.objectName?(()=>{let e=(0,t.computeDrillFilter)(D,b,{groupByField:O}),n={...a.filter||{},...e},s=(0,t.resolveDrillTitle)(D,b,a.title||`Details`),c=D?.target??`drawer`,l=(0,i.jsx)(`div`,{className:`overflow-auto`,"data-testid":`chart-drill-body`,children:(0,i.jsx)(o.SchemaRenderer,{schema:{type:`object-data-table`,objectName:a.objectName,filter:n,pagination:!0,pageSize:D?.maxRows,columns:D?.columns?.map(e=>({accessorKey:e,header:e}))},dataSource:u})});return c===`dialog`?(0,i.jsx)(r.Dialog,{open:!0,onOpenChange:e=>!e&&x(null),children:(0,i.jsxs)(r.DialogContent,{className:`max-w-4xl`,children:[(0,i.jsx)(r.DialogHeader,{children:(0,i.jsx)(r.DialogTitle,{children:s})}),l]})}):(0,i.jsx)(r.Sheet,{open:!0,onOpenChange:e=>!e&&x(null),children:(0,i.jsxs)(r.SheetContent,{side:`right`,className:`w-full sm:max-w-2xl md:max-w-3xl lg:max-w-4xl flex flex-col`,children:[(0,i.jsx)(r.SheetHeader,{children:(0,i.jsx)(r.SheetTitle,{children:s})}),(0,i.jsx)(`div`,{className:`flex-1 overflow-hidden mt-2`,children:l})]})})})():null;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(H,{...e,schema:A,onChartClick:j}),M]})};t.ComponentRegistry.register(`object-chart`,K,{namespace:`plugin-charts`,label:`Object Chart`,category:`view`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{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 }`}]});var q={"bar-chart":V,chart:H};t.ComponentRegistry.register(`bar-chart`,V,{namespace:`plugin-charts`,label:`Bar Chart`,category:`plugin`,inputs:[{name:`data`,type:`array`,label:`Data`,required:!0},{name:`dataKey`,type:`string`,label:`Data Key`,defaultValue:`value`},{name:`xAxisKey`,type:`string`,label:`X-Axis Key`,defaultValue:`name`},{name:`height`,type:`number`,label:`Height`,defaultValue:400},{name:`color`,type:`color`,label:`Color`,defaultValue:`#8884d8`}],defaultProps:{data:[{name:`Jan`,value:400},{name:`Feb`,value:300},{name:`Mar`,value:600},{name:`Apr`,value:800},{name:`May`,value:500}],dataKey:`value`,xAxisKey:`name`,height:400,color:`#8884d8`}}),t.ComponentRegistry.register(`chart`,K,{namespace:`view`,category:`view`,label:`Chart`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{name:`type`,type:`string`,label:`Chart Type`},{name:`categoryField`,type:`string`,label:`Category Field`},{name:`valueField`,type:`string`,label:`Value Field`}]}),t.ComponentRegistry.register(`chart`,H,{namespace:`plugin-charts`,label:`Chart`,category:`plugin`,inputs:[{name:`chartType`,type:`enum`,label:`Chart Type`,enum:[{label:`Bar`,value:`bar`},{label:`Line`,value:`line`},{label:`Area`,value:`area`},{label:`Pie`,value:`pie`},{label:`Donut`,value:`donut`},{label:`Radar`,value:`radar`},{label:`Scatter`,value:`scatter`}],defaultValue:`bar`},{name:`data`,type:`code`,label:`Data (JSON)`,required:!0},{name:`config`,type:`code`,label:`Config (JSON)`},{name:`xAxisKey`,type:`string`,label:`X Axis Key`,defaultValue:`name`},{name:`series`,type:`code`,label:`Series (JSON Array)`,required:!0},{name:`className`,type:`string`,label:`CSS Class`}],defaultProps:{chartType:`bar`,data:[{name:`Jan`,sales:400,revenue:240},{name:`Feb`,sales:300,revenue:139},{name:`Mar`,sales:600,revenue:380},{name:`Apr`,sales:800,revenue:430},{name:`May`,sales:500,revenue:220}],config:{sales:{label:`Sales`,color:`#8884d8`},revenue:{label:`Revenue`,color:`#82ca9d`}},xAxisKey:`name`,series:[{dataKey:`sales`},{dataKey:`revenue`}]}}),t.ComponentRegistry.register(`chart:bar`,H,{namespace:`plugin-charts`,label:`Bar Chart (Alias)`,category:`plugin`,defaultProps:{chartType:`bar`}}),t.ComponentRegistry.register(`pie-chart`,H,{namespace:`plugin-charts`,label:`Pie Chart`,category:`plugin`,defaultProps:{chartType:`pie`}}),t.ComponentRegistry.register(`donut-chart`,H,{namespace:`plugin-charts`,label:`Donut Chart`,category:`plugin`,defaultProps:{chartType:`donut`}}),t.ComponentRegistry.register(`radar-chart`,H,{namespace:`plugin-charts`,label:`Radar Chart`,category:`plugin`,defaultProps:{chartType:`radar`}}),t.ComponentRegistry.register(`scatter-chart`,H,{namespace:`plugin-charts`,label:`Scatter Chart`,category:`plugin`,defaultProps:{chartType:`scatter`}}),e.ChartBarRenderer=V,e.ChartRenderer=H,e.ObjectChart=K,e.chartComponents=q});

package/dist/packages/plugin-charts/src/AdvancedChartImpl.d.ts

@@ -1,6 +1,6 @@
 import { ChartConfig } from './ChartContainerImpl';
 export interface AdvancedChartImplProps {
-    chartType?: 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'combo';
+    chartType?: 'bar' | 'horizontal-bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'funnel' | 'combo';
     data?: Array<Record<string, any>>;
     config?: ChartConfig;
     xAxisKey?: string;
@@ -9,9 +9,19 @@ export interface AdvancedChartImplProps {
         chartType?: 'bar' | 'line' | 'area';
     }>;
     className?: string;
+    /**
+     * Optional drill-down click handler. Fires when a chart segment is clicked
+     * with `{ category, series, value }`. Wired for bar/horizontal-bar/line/
+     * area/pie/donut. Other chart types are no-ops in L1.
+     */
+    onChartClick?: (event: {
+        category?: string;
+        series?: string;
+        value?: number;
+    }) => void;
 }
 /**
  * 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: rawData, config, xAxisKey, series, className, }: AdvancedChartImplProps): import("react/jsx-runtime").JSX.Element;
+export default function AdvancedChartImpl({ chartType, data: rawData, config, xAxisKey, series, className, onChartClick, }: AdvancedChartImplProps): import("react/jsx-runtime").JSX.Element;

package/dist/packages/plugin-charts/src/ChartRenderer.d.ts

@@ -20,7 +20,7 @@ export interface ChartRendererProps {
         type: string;
         id?: string;
         className?: string;
-        chartType?: 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'combo';
+        chartType?: 'bar' | 'horizontal-bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'funnel' | 'combo';
         data?: Array<Record<string, any>>;
         config?: Record<string, any>;
         xAxisKey?: string;
@@ -29,6 +29,12 @@ export interface ChartRendererProps {
             label?: string;
         }>;
     };
+    /** Drill-down click handler — wired by ObjectChart when drillDown is enabled. */
+    onChartClick?: (event: {
+        category?: string;
+        series?: string;
+        value?: number;
+    }) => void;
 }
 /**
  * ChartRenderer - The public API for the advanced chart component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-charts",
-  "version": "4.0.7",
+  "version": "4.0.8",
   "type": "module",
   "license": "MIT",
   "description": "Chart components plugin for Object UI, powered by Recharts",
@@ -26,11 +26,11 @@
   "dependencies": {
     "lucide-react": "^1.14.0",
     "recharts": "^3.8.1",
-    "@object-ui/components": "4.0.7",
-    "@object-ui/core": "4.0.7",
-    "@object-ui/i18n": "4.0.7",
-    "@object-ui/react": "4.0.7",
-    "@object-ui/types": "4.0.7"
+    "@object-ui/components": "4.0.8",
+    "@object-ui/core": "4.0.8",
+    "@object-ui/i18n": "4.0.8",
+    "@object-ui/react": "4.0.8",
+    "@object-ui/types": "4.0.8"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -41,7 +41,7 @@
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "typescript": "^6.0.3",
-    "vite": "^8.0.10",
+    "vite": "^8.0.12",
     "vite-plugin-dts": "^5.0.0"
   },
   "keywords": [