pmx-canvas 0.1.10 → 0.1.12

package/src/json-render/charts/components.tsx

@@ -84,6 +84,8 @@ interface PieChartProps {
   nameKey: string;
   valueKey: string;
   height?: number | null;
+  showLegend?: boolean | null;
+  showLabels?: boolean | null;
 }
 
 export const axisStyle = {
@@ -99,6 +101,11 @@ export const tooltipStyle = {
   fontSize: 13,
 };
 
+export const chartMargin = { top: 14, right: 28, bottom: 28, left: 10 };
+export const polarChartMargin = { top: 18, right: 40, bottom: 30, left: 40 };
+export const axisTickMargin = 8;
+export const legendMargin = { top: 10 };
+
 /** Shared wrapper for cartesian charts (Line + Bar). */
 export function CartesianChart({
   props,
@@ -127,10 +134,10 @@ function ChartLineChart({ props }: BaseComponentProps<CartesianChartProps>) {
   return (
     <CartesianChart props={props} className="pmx-chart--line">
       {(data) => (
-        <RechartsLineChart data={data}>
+        <RechartsLineChart data={data} margin={chartMargin}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
-          <XAxis dataKey={props.xKey} tick={axisStyle} />
-          <YAxis tick={axisStyle} />
+          <XAxis dataKey={props.xKey} tick={axisStyle} tickMargin={axisTickMargin} />
+          <YAxis tick={axisStyle} tickMargin={axisTickMargin} />
           <Tooltip contentStyle={tooltipStyle} />
           <Line
             type="monotone"
@@ -151,10 +158,10 @@ function ChartBarChart({ props }: BaseComponentProps<CartesianChartProps>) {
   return (
     <CartesianChart props={props} className="pmx-chart--bar">
       {(data) => (
-        <RechartsBarChart data={data}>
+        <RechartsBarChart data={data} margin={chartMargin}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
-          <XAxis dataKey={props.xKey} tick={axisStyle} />
-          <YAxis tick={axisStyle} />
+          <XAxis dataKey={props.xKey} tick={axisStyle} tickMargin={axisTickMargin} />
+          <YAxis tick={axisStyle} tickMargin={axisTickMargin} />
           <Tooltip contentStyle={tooltipStyle} cursor={false} />
           <Bar dataKey={props.yKey} fill={fill} radius={[4, 4, 0, 0]} />
         </RechartsBarChart>
@@ -171,17 +178,18 @@ function ChartPieChart({ props }: BaseComponentProps<PieChartProps>) {
     <div className="pmx-chart pmx-chart--pie">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
       <ResponsiveContainer width="100%" height={h}>
-        <RechartsPieChart>
+        <RechartsPieChart margin={polarChartMargin}>
           <Tooltip contentStyle={tooltipStyle} />
-          <Legend />
+          {props.showLegend !== false && <Legend wrapperStyle={legendMargin} />}
           <Pie
             data={data}
             dataKey={props.valueKey}
             nameKey={props.nameKey}
             cx="50%"
             cy="50%"
-            outerRadius="80%"
-            label
+            outerRadius="64%"
+            label={props.showLabels !== false}
+            labelLine={false}
           >
             {data.map((_, i) => (
               <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />

package/src/json-render/charts/definitions.ts

@@ -63,6 +63,8 @@ export const chartComponentDefinitions = {
       nameKey: z.string(),
       valueKey: z.string(),
       height: z.number().nullable(),
+      showLegend: z.boolean().optional(),
+      showLabels: z.boolean().optional(),
     }),
     description:
       'Pie chart for showing proportions. Provide data as an array of objects with nameKey and valueKey fields.',
@@ -76,6 +78,8 @@ export const chartComponentDefinitions = {
       nameKey: 'name',
       valueKey: 'share',
       height: null,
+      showLegend: true,
+      showLabels: true,
     },
   },
 } as const;

package/src/json-render/charts/extra-components.tsx

@@ -34,7 +34,11 @@ import {
 import {
   CHART_COLORS,
   CartesianChart,
+  axisTickMargin,
   axisStyle,
+  chartMargin,
+  legendMargin,
+  polarChartMargin,
   tooltipStyle,
   type CartesianChartProps,
 } from './components';
@@ -47,7 +51,7 @@ function ChartAreaChart({ props }: BaseComponentProps<AreaChartProps>) {
   return (
     <CartesianChart props={props} className="pmx-chart--area">
       {(data) => (
-        <RechartsAreaChart data={data}>
+        <RechartsAreaChart data={data} margin={chartMargin}>
           <defs>
             <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
               <stop offset="0%" stopColor={stroke} stopOpacity={0.45} />
@@ -55,8 +59,8 @@ function ChartAreaChart({ props }: BaseComponentProps<AreaChartProps>) {
             </linearGradient>
           </defs>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
-          <XAxis dataKey={props.xKey} tick={axisStyle} />
-          <YAxis tick={axisStyle} />
+          <XAxis dataKey={props.xKey} tick={axisStyle} tickMargin={axisTickMargin} />
+          <YAxis tick={axisStyle} tickMargin={axisTickMargin} />
           <Tooltip contentStyle={tooltipStyle} />
           <Area
             type="monotone"
@@ -91,10 +95,10 @@ function ChartScatterChart({ props }: BaseComponentProps<ScatterChartProps>) {
     <div className="pmx-chart pmx-chart--scatter">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
       <ResponsiveContainer width="100%" height={h}>
-        <RechartsScatterChart>
+        <RechartsScatterChart margin={chartMargin}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
-          <XAxis type="number" dataKey={props.xKey} tick={axisStyle} name={props.xKey} />
-          <YAxis type="number" dataKey={props.yKey} tick={axisStyle} name={props.yKey} />
+          <XAxis type="number" dataKey={props.xKey} tick={axisStyle} tickMargin={axisTickMargin} name={props.xKey} />
+          <YAxis type="number" dataKey={props.yKey} tick={axisStyle} tickMargin={axisTickMargin} name={props.yKey} />
           {props.zKey && <ZAxis type="number" dataKey={props.zKey} range={[40, 400]} name={props.zKey} />}
           <Tooltip contentStyle={tooltipStyle} cursor={{ strokeDasharray: '3 3' }} />
           <Scatter data={data} fill={fill} />
@@ -110,6 +114,7 @@ interface RadarChartProps {
   axisKey: string;
   metrics: string[];
   height?: number | null;
+  showLegend?: boolean | null;
 }
 
 function ChartRadarChart({ props }: BaseComponentProps<RadarChartProps>) {
@@ -121,12 +126,12 @@ function ChartRadarChart({ props }: BaseComponentProps<RadarChartProps>) {
     <div className="pmx-chart pmx-chart--radar">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
       <ResponsiveContainer width="100%" height={h}>
-        <RechartsRadarChart data={data} outerRadius="75%">
+        <RechartsRadarChart data={data} outerRadius="66%" margin={polarChartMargin}>
           <PolarGrid stroke="var(--border, #e5e5e5)" />
           <PolarAngleAxis dataKey={props.axisKey} tick={axisStyle} />
           <PolarRadiusAxis tick={axisStyle} />
           <Tooltip contentStyle={tooltipStyle} />
-          <Legend />
+          {props.showLegend !== false && <Legend wrapperStyle={legendMargin} />}
           {metrics.map((metric, i) => {
             const color = CHART_COLORS[i % CHART_COLORS.length];
             return (
@@ -153,6 +158,7 @@ interface StackedBarChartProps {
   series: string[];
   aggregate?: 'sum' | 'count' | 'avg' | null;
   height?: number | null;
+  showLegend?: boolean | null;
 }
 
 function ChartStackedBarChart({ props }: BaseComponentProps<StackedBarChartProps>) {
@@ -166,12 +172,12 @@ function ChartStackedBarChart({ props }: BaseComponentProps<StackedBarChartProps
     <div className="pmx-chart pmx-chart--stacked-bar">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
       <ResponsiveContainer width="100%" height={h}>
-        <RechartsBarChart data={chartData}>
+        <RechartsBarChart data={chartData} margin={chartMargin}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
-          <XAxis dataKey={props.xKey} tick={axisStyle} />
-          <YAxis tick={axisStyle} />
+          <XAxis dataKey={props.xKey} tick={axisStyle} tickMargin={axisTickMargin} />
+          <YAxis tick={axisStyle} tickMargin={axisTickMargin} />
           <Tooltip contentStyle={tooltipStyle} cursor={false} />
-          <Legend />
+          {props.showLegend !== false && <Legend wrapperStyle={legendMargin} />}
           {series.map((key, i) => (
             <Bar
               key={key}
@@ -225,6 +231,7 @@ interface ComposedChartProps {
   barColor?: string | null;
   lineColor?: string | null;
   height?: number | null;
+  showLegend?: boolean | null;
 }
 
 function ChartComposedChart({ props }: BaseComponentProps<ComposedChartProps>) {
@@ -237,12 +244,12 @@ function ChartComposedChart({ props }: BaseComponentProps<ComposedChartProps>) {
     <div className="pmx-chart pmx-chart--composed">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
       <ResponsiveContainer width="100%" height={h}>
-        <RechartsComposedChart data={data}>
+        <RechartsComposedChart data={data} margin={chartMargin}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
-          <XAxis dataKey={props.xKey} tick={axisStyle} />
-          <YAxis tick={axisStyle} />
+          <XAxis dataKey={props.xKey} tick={axisStyle} tickMargin={axisTickMargin} />
+          <YAxis tick={axisStyle} tickMargin={axisTickMargin} />
           <Tooltip contentStyle={tooltipStyle} cursor={false} />
-          <Legend />
+          {props.showLegend !== false && <Legend wrapperStyle={legendMargin} />}
           <Bar dataKey={props.barKey} fill={barFill} radius={[4, 4, 0, 0]} />
           <Line
             type="monotone"

package/src/json-render/charts/extra-definitions.ts

@@ -73,6 +73,7 @@ export const extraChartComponentDefinitions = {
       axisKey: z.string(),
       metrics: z.array(z.string()),
       height: z.number().nullable(),
+      showLegend: z.boolean().optional(),
     }),
     description:
       'Radar chart for comparing multiple metrics across categories. Each metric in `metrics` is plotted as its own polygon.',
@@ -86,6 +87,7 @@ export const extraChartComponentDefinitions = {
       axisKey: 'skill',
       metrics: ['alice', 'bob'],
       height: null,
+      showLegend: true,
     },
   },
 
@@ -97,6 +99,7 @@ export const extraChartComponentDefinitions = {
       series: z.array(z.string()),
       aggregate: z.enum(['sum', 'count', 'avg']).nullable(),
       height: z.number().nullable(),
+      showLegend: z.boolean().optional(),
     }),
     description:
       'Stacked bar chart for compositional data. Each entry in `series` is plotted as its own bar segment per x value.',
@@ -111,6 +114,7 @@ export const extraChartComponentDefinitions = {
       series: ['north', 'south', 'east'],
       aggregate: null,
       height: null,
+      showLegend: true,
     },
   },
 
@@ -124,6 +128,7 @@ export const extraChartComponentDefinitions = {
       barColor: z.string().nullable(),
       lineColor: z.string().nullable(),
       height: z.number().nullable(),
+      showLegend: z.boolean().optional(),
     }),
     description:
       'Combined bar + line chart for paired metrics (e.g. counts + a derived rate) on the same axis.',
@@ -140,6 +145,7 @@ export const extraChartComponentDefinitions = {
       barColor: null,
       lineColor: null,
       height: null,
+      showLegend: true,
     },
   },
 } as const;

package/src/json-render/server.ts

@@ -17,6 +17,7 @@ export interface JsonRenderNodeInput {
   y?: number;
   width?: number;
   height?: number;
+  strictSize?: boolean;
 }
 
 export interface GraphNodeInput {
@@ -38,10 +39,13 @@ export interface GraphNodeInput {
   barColor?: string;
   lineColor?: string;
   height?: number;
+  showLegend?: boolean;
+  showLabels?: boolean;
   x?: number;
   y?: number;
   width?: number;
   heightPx?: number;
+  strictSize?: boolean;
 }
 
 export const JSON_RENDER_NODE_SIZE = { width: 840, height: 620 };
@@ -514,6 +518,8 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
     case 'PieChart': {
       chartProps.nameKey = input.nameKey ?? 'name';
       chartProps.valueKey = input.valueKey ?? 'value';
+      chartProps.showLegend = input.showLegend !== false;
+      chartProps.showLabels = input.showLabels !== false;
       break;
     }
     case 'ScatterChart': {
@@ -533,6 +539,7 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
       }
       chartProps.axisKey = axisKey;
       chartProps.metrics = metrics;
+      chartProps.showLegend = input.showLegend !== false;
       break;
     }
     case 'StackedBarChart': {
@@ -546,6 +553,7 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
       chartProps.xKey = xKey;
       chartProps.series = series;
       chartProps.aggregate = input.aggregate ?? null;
+      chartProps.showLegend = input.showLegend !== false;
       break;
     }
     case 'ComposedChart': {
@@ -556,6 +564,7 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
         ?? 'rate';
       chartProps.barColor = input.barColor ?? null;
       chartProps.lineColor = input.lineColor ?? null;
+      chartProps.showLegend = input.showLegend !== false;
       break;
     }
     case 'AreaChart':
@@ -613,6 +622,8 @@ export function buildGraphConfig(input: GraphNodeInput): Record<string, unknown>
     ...(input.barColor ? { barColor: input.barColor } : {}),
     ...(input.lineColor ? { lineColor: input.lineColor } : {}),
     ...(typeof input.height === 'number' ? { height: input.height } : {}),
+    ...(typeof input.showLegend === 'boolean' ? { showLegend: input.showLegend } : {}),
+    ...(typeof input.showLabels === 'boolean' ? { showLabels: input.showLabels } : {}),
   };
 }