pmx-canvas 0.1.0

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

@@ -0,0 +1,81 @@
+/**
+ * Chart component definitions for json-render catalogs.
+ *
+ * Provides LineChart, BarChart, and PieChart components built on Recharts.
+ * Mirrors the chart definitions from the Vercel json-render chat example.
+ */
+
+import { z } from 'zod';
+
+const cartesianProps = z.object({
+  title: z.string().nullable(),
+  data: z.array(z.record(z.string(), z.unknown())),
+  xKey: z.string(),
+  yKey: z.string(),
+  aggregate: z.enum(['sum', 'count', 'avg']).nullable(),
+  color: z.string().nullable(),
+  height: z.number().nullable(),
+});
+
+export const chartComponentDefinitions = {
+  LineChart: {
+    props: cartesianProps,
+    description:
+      'Line chart for time-series or trend data. Provide data as an array of objects with xKey and yKey fields.',
+    example: {
+      title: 'Weekly trend',
+      data: [
+        { day: 'Mon', value: 10 },
+        { day: 'Tue', value: 25 },
+        { day: 'Wed', value: 18 },
+      ],
+      xKey: 'day',
+      yKey: 'value',
+      aggregate: null,
+      color: null,
+      height: null,
+    },
+  },
+
+  BarChart: {
+    props: cartesianProps,
+    description:
+      'Bar chart for comparing categories. Provide data as an array of objects with xKey and yKey fields.',
+    example: {
+      title: 'Sales by region',
+      data: [
+        { region: 'North', sales: 120 },
+        { region: 'South', sales: 98 },
+        { region: 'East', sales: 150 },
+      ],
+      xKey: 'region',
+      yKey: 'sales',
+      aggregate: null,
+      color: null,
+      height: null,
+    },
+  },
+
+  PieChart: {
+    props: z.object({
+      title: z.string().nullable(),
+      data: z.array(z.record(z.string(), z.unknown())),
+      nameKey: z.string(),
+      valueKey: z.string(),
+      height: z.number().nullable(),
+    }),
+    description:
+      'Pie chart for showing proportions. Provide data as an array of objects with nameKey and valueKey fields.',
+    example: {
+      title: 'Market share',
+      data: [
+        { name: 'Product A', share: 45 },
+        { name: 'Product B', share: 30 },
+        { name: 'Product C', share: 25 },
+      ],
+      nameKey: 'name',
+      valueKey: 'share',
+      height: null,
+    },
+  },
+} as const;

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

@@ -0,0 +1,267 @@
+/** @jsxImportSource react */
+
+/**
+ * Additional chart components for json-render.
+ *
+ * Lives alongside ./components.tsx so the original chart set stays
+ * unchanged and the merge point in ./catalog.ts is the only contact
+ * surface with the upstream `@json-render/*` packages.
+ */
+
+import type { BaseComponentProps } from '@json-render/react';
+import {
+  Area,
+  AreaChart as RechartsAreaChart,
+  Bar,
+  BarChart as RechartsBarChart,
+  CartesianGrid,
+  ComposedChart as RechartsComposedChart,
+  Legend,
+  Line,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart as RechartsRadarChart,
+  ResponsiveContainer,
+  Scatter,
+  ScatterChart as RechartsScatterChart,
+  Tooltip,
+  XAxis,
+  YAxis,
+  ZAxis,
+} from 'recharts';
+import {
+  CHART_COLORS,
+  CartesianChart,
+  axisStyle,
+  tooltipStyle,
+  type CartesianChartProps,
+} from './components';
+
+type AreaChartProps = CartesianChartProps;
+
+function ChartAreaChart({ props }: BaseComponentProps<AreaChartProps>) {
+  const stroke = props.color ?? CHART_COLORS[0];
+  const gradientId = `pmx-area-${props.yKey ?? 'value'}`;
+  return (
+    <CartesianChart props={props}>
+      {(data) => (
+        <RechartsAreaChart data={data}>
+          <defs>
+            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor={stroke} stopOpacity={0.45} />
+              <stop offset="100%" stopColor={stroke} stopOpacity={0.05} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
+          <XAxis dataKey={props.xKey} tick={axisStyle} />
+          <YAxis tick={axisStyle} />
+          <Tooltip contentStyle={tooltipStyle} />
+          <Area
+            type="monotone"
+            dataKey={props.yKey}
+            stroke={stroke}
+            strokeWidth={2}
+            fill={`url(#${gradientId})`}
+            activeDot={{ r: 5 }}
+          />
+        </RechartsAreaChart>
+      )}
+    </CartesianChart>
+  );
+}
+
+interface ScatterChartProps {
+  title?: string | null;
+  data: Record<string, unknown>[];
+  xKey: string;
+  yKey: string;
+  zKey?: string | null;
+  color?: string | null;
+  height?: number | null;
+}
+
+function ChartScatterChart({ props }: BaseComponentProps<ScatterChartProps>) {
+  const fill = props.color ?? CHART_COLORS[0];
+  const data = props.data ?? [];
+  const h = props.height ?? 300;
+
+  return (
+    <div className="pmx-chart">
+      {props.title && <div className="pmx-chart__title">{props.title}</div>}
+      <ResponsiveContainer width="100%" height={h}>
+        <RechartsScatterChart>
+          <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} />
+          {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} />
+        </RechartsScatterChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+interface RadarChartProps {
+  title?: string | null;
+  data: Record<string, unknown>[];
+  axisKey: string;
+  metrics: string[];
+  height?: number | null;
+}
+
+function ChartRadarChart({ props }: BaseComponentProps<RadarChartProps>) {
+  const data = props.data ?? [];
+  const metrics = (props.metrics ?? []).filter((m) => typeof m === 'string' && m.length > 0);
+  const h = props.height ?? 320;
+
+  return (
+    <div className="pmx-chart">
+      {props.title && <div className="pmx-chart__title">{props.title}</div>}
+      <ResponsiveContainer width="100%" height={h}>
+        <RechartsRadarChart data={data} outerRadius="75%">
+          <PolarGrid stroke="var(--border, #e5e5e5)" />
+          <PolarAngleAxis dataKey={props.axisKey} tick={axisStyle} />
+          <PolarRadiusAxis tick={axisStyle} />
+          <Tooltip contentStyle={tooltipStyle} />
+          <Legend />
+          {metrics.map((metric, i) => {
+            const color = CHART_COLORS[i % CHART_COLORS.length];
+            return (
+              <Radar
+                key={metric}
+                name={metric}
+                dataKey={metric}
+                stroke={color}
+                fill={color}
+                fillOpacity={0.25}
+              />
+            );
+          })}
+        </RechartsRadarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+interface StackedBarChartProps {
+  title?: string | null;
+  data: Record<string, unknown>[];
+  xKey: string;
+  series: string[];
+  aggregate?: 'sum' | 'count' | 'avg' | null;
+  height?: number | null;
+}
+
+function ChartStackedBarChart({ props }: BaseComponentProps<StackedBarChartProps>) {
+  const series = (props.series ?? []).filter((s) => typeof s === 'string' && s.length > 0);
+  const chartData = props.aggregate
+    ? mergeAggregated(props.data ?? [], props.xKey, series, props.aggregate)
+    : props.data ?? [];
+  const h = props.height ?? 300;
+
+  return (
+    <div className="pmx-chart">
+      {props.title && <div className="pmx-chart__title">{props.title}</div>}
+      <ResponsiveContainer width="100%" height={h}>
+        <RechartsBarChart data={chartData}>
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
+          <XAxis dataKey={props.xKey} tick={axisStyle} />
+          <YAxis tick={axisStyle} />
+          <Tooltip contentStyle={tooltipStyle} cursor={false} />
+          <Legend />
+          {series.map((key, i) => (
+            <Bar
+              key={key}
+              dataKey={key}
+              stackId="stack"
+              fill={CHART_COLORS[i % CHART_COLORS.length]}
+              radius={i === series.length - 1 ? [4, 4, 0, 0] : [0, 0, 0, 0]}
+            />
+          ))}
+        </RechartsBarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+function mergeAggregated(
+  data: Record<string, unknown>[],
+  xKey: string,
+  series: string[],
+  aggregate: 'sum' | 'count' | 'avg',
+): Record<string, unknown>[] {
+  const grouped = new Map<string, Record<string, number[]>>();
+  for (const row of data) {
+    const k = String(row[xKey] ?? '');
+    if (!grouped.has(k)) grouped.set(k, {});
+    const bucket = grouped.get(k)!;
+    for (const s of series) {
+      const n = Number(row[s] ?? 0);
+      if (!bucket[s]) bucket[s] = [];
+      bucket[s].push(Number.isNaN(n) ? 0 : n);
+    }
+  }
+  const reducer = aggregate === 'count'
+    ? (vs: number[]) => vs.length
+    : aggregate === 'avg'
+      ? (vs: number[]) => vs.reduce((a, b) => a + b, 0) / vs.length
+      : (vs: number[]) => vs.reduce((a, b) => a + b, 0);
+  return Array.from(grouped.entries()).map(([key, buckets]) => {
+    const out: Record<string, unknown> = { [xKey]: key };
+    for (const s of series) out[s] = reducer(buckets[s] ?? []);
+    return out;
+  });
+}
+
+interface ComposedChartProps {
+  title?: string | null;
+  data: Record<string, unknown>[];
+  xKey: string;
+  barKey: string;
+  lineKey: string;
+  barColor?: string | null;
+  lineColor?: string | null;
+  height?: number | null;
+}
+
+function ChartComposedChart({ props }: BaseComponentProps<ComposedChartProps>) {
+  const data = props.data ?? [];
+  const barFill = props.barColor ?? CHART_COLORS[0];
+  const lineStroke = props.lineColor ?? CHART_COLORS[3];
+  const h = props.height ?? 300;
+
+  return (
+    <div className="pmx-chart">
+      {props.title && <div className="pmx-chart__title">{props.title}</div>}
+      <ResponsiveContainer width="100%" height={h}>
+        <RechartsComposedChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
+          <XAxis dataKey={props.xKey} tick={axisStyle} />
+          <YAxis tick={axisStyle} />
+          <Tooltip contentStyle={tooltipStyle} cursor={false} />
+          <Legend />
+          <Bar dataKey={props.barKey} fill={barFill} radius={[4, 4, 0, 0]} />
+          <Line
+            type="monotone"
+            dataKey={props.lineKey}
+            stroke={lineStroke}
+            strokeWidth={2}
+            dot={{ r: 3, fill: lineStroke }}
+            activeDot={{ r: 5 }}
+          />
+        </RechartsComposedChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+export const extraChartComponents = {
+  AreaChart: ChartAreaChart,
+  ScatterChart: ChartScatterChart,
+  RadarChart: ChartRadarChart,
+  StackedBarChart: ChartStackedBarChart,
+  ComposedChart: ChartComposedChart,
+};

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

@@ -0,0 +1,145 @@
+/**
+ * Definitions for the extra chart components in ./extra-components.tsx.
+ *
+ * Kept separate from ./definitions.ts so the original chart catalog stays
+ * untouched and the merge in ./catalog.ts is the only contact surface.
+ */
+
+import { z } from 'zod';
+
+const cartesianProps = z.object({
+  title: z.string().nullable(),
+  data: z.array(z.record(z.string(), z.unknown())),
+  xKey: z.string(),
+  yKey: z.string(),
+  aggregate: z.enum(['sum', 'count', 'avg']).nullable(),
+  color: z.string().nullable(),
+  height: z.number().nullable(),
+});
+
+export const extraChartComponentDefinitions = {
+  AreaChart: {
+    props: cartesianProps,
+    description:
+      'Area chart for cumulative or trend data. Same shape as LineChart but draws a filled area under the line.',
+    example: {
+      title: 'Daily signups',
+      data: [
+        { day: 'Mon', value: 12 },
+        { day: 'Tue', value: 24 },
+        { day: 'Wed', value: 19 },
+        { day: 'Thu', value: 31 },
+      ],
+      xKey: 'day',
+      yKey: 'value',
+      aggregate: null,
+      color: null,
+      height: null,
+    },
+  },
+
+  ScatterChart: {
+    props: z.object({
+      title: z.string().nullable(),
+      data: z.array(z.record(z.string(), z.unknown())),
+      xKey: z.string(),
+      yKey: z.string(),
+      zKey: z.string().nullable(),
+      color: z.string().nullable(),
+      height: z.number().nullable(),
+    }),
+    description:
+      'Scatter plot for correlation or distribution. Both axes are numeric; optional zKey scales point size.',
+    example: {
+      title: 'Latency vs payload size',
+      data: [
+        { size: 10, latency: 25 },
+        { size: 40, latency: 80 },
+        { size: 80, latency: 110 },
+        { size: 120, latency: 180 },
+      ],
+      xKey: 'size',
+      yKey: 'latency',
+      zKey: null,
+      color: null,
+      height: null,
+    },
+  },
+
+  RadarChart: {
+    props: z.object({
+      title: z.string().nullable(),
+      data: z.array(z.record(z.string(), z.unknown())),
+      axisKey: z.string(),
+      metrics: z.array(z.string()),
+      height: z.number().nullable(),
+    }),
+    description:
+      'Radar chart for comparing multiple metrics across categories. Each metric in `metrics` is plotted as its own polygon.',
+    example: {
+      title: 'Skill comparison',
+      data: [
+        { skill: 'Speed', alice: 80, bob: 60 },
+        { skill: 'Accuracy', alice: 70, bob: 90 },
+        { skill: 'Stamina', alice: 85, bob: 75 },
+      ],
+      axisKey: 'skill',
+      metrics: ['alice', 'bob'],
+      height: null,
+    },
+  },
+
+  StackedBarChart: {
+    props: z.object({
+      title: z.string().nullable(),
+      data: z.array(z.record(z.string(), z.unknown())),
+      xKey: z.string(),
+      series: z.array(z.string()),
+      aggregate: z.enum(['sum', 'count', 'avg']).nullable(),
+      height: z.number().nullable(),
+    }),
+    description:
+      'Stacked bar chart for compositional data. Each entry in `series` is plotted as its own bar segment per x value.',
+    example: {
+      title: 'Revenue by region',
+      data: [
+        { quarter: 'Q1', north: 30, south: 18, east: 22 },
+        { quarter: 'Q2', north: 42, south: 25, east: 28 },
+        { quarter: 'Q3', north: 38, south: 30, east: 26 },
+      ],
+      xKey: 'quarter',
+      series: ['north', 'south', 'east'],
+      aggregate: null,
+      height: null,
+    },
+  },
+
+  ComposedChart: {
+    props: z.object({
+      title: z.string().nullable(),
+      data: z.array(z.record(z.string(), z.unknown())),
+      xKey: z.string(),
+      barKey: z.string(),
+      lineKey: z.string(),
+      barColor: z.string().nullable(),
+      lineColor: z.string().nullable(),
+      height: z.number().nullable(),
+    }),
+    description:
+      'Combined bar + line chart for paired metrics (e.g. counts + a derived rate) on the same axis.',
+    example: {
+      title: 'Visits and conversion',
+      data: [
+        { day: 'Mon', visits: 120, conversion: 4.2 },
+        { day: 'Tue', visits: 145, conversion: 3.8 },
+        { day: 'Wed', visits: 160, conversion: 5.1 },
+      ],
+      xKey: 'day',
+      barKey: 'visits',
+      lineKey: 'conversion',
+      barColor: null,
+      lineColor: null,
+      height: null,
+    },
+  },
+} as const;

package/src/json-render/renderer/index.css

@@ -0,0 +1,174 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../../../../node_modules/@json-render/shadcn/dist/index.js";
+
+@custom-variant dark (&:is([data-theme="dark"] *));
+
+:root {
+  --radius: 0.5rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.1 0 0);
+  --card: oklch(0.98 0 0);
+  --card-foreground: oklch(0.1 0 0);
+  --popover: oklch(0.98 0 0);
+  --popover-foreground: oklch(0.1 0 0);
+  --primary: oklch(0.1 0 0);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.92 0 0);
+  --secondary-foreground: oklch(0.1 0 0);
+  --muted: oklch(0.92 0 0);
+  --muted-foreground: oklch(0.45 0 0);
+  --accent: oklch(0.92 0 0);
+  --accent-foreground: oklch(0.1 0 0);
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.85 0 0);
+  --input: oklch(0.85 0 0);
+  --ring: oklch(0.6 0 0);
+  /* Slot 1 mirrors the canvas accent (light theme); slots 2-6 keep
+     enough hue variety to distinguish series. */
+  --chart-1: #1A7ABF;
+  --chart-2: #1a9f55;
+  --chart-3: #c89b2a;
+  --chart-4: #7c4dff;
+  --chart-5: #d32f2f;
+  --chart-6: #00838F;
+}
+
+:root[data-theme='dark'] {
+  --background: oklch(0 0 0);
+  --foreground: oklch(0.98 0 0);
+  --card: oklch(0.08 0 0);
+  --card-foreground: oklch(0.98 0 0);
+  --popover: oklch(0.08 0 0);
+  --popover-foreground: oklch(0.98 0 0);
+  --primary: oklch(0.98 0 0);
+  --primary-foreground: oklch(0 0 0);
+  --secondary: oklch(0.15 0 0);
+  --secondary-foreground: oklch(0.98 0 0);
+  --muted: oklch(0.15 0 0);
+  --muted-foreground: oklch(0.6 0 0);
+  --accent: oklch(0.15 0 0);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.65 0.2 25);
+  --destructive-foreground: oklch(0.98 0 0);
+  --border: oklch(0.25 0 0);
+  --input: oklch(0.25 0 0);
+  --ring: oklch(0.4 0 0);
+  /* Dark theme: slot 1 = canvas cyan accent. */
+  --chart-1: #4BBCFF;
+  --chart-2: #2fd07f;
+  --chart-3: #f4c542;
+  --chart-4: #b07aff;
+  --chart-5: #ff6a7f;
+  --chart-6: #00E5FF;
+}
+
+:root[data-theme='high-contrast'] {
+  --background: oklch(0 0 0);
+  --foreground: oklch(1 0 0);
+  --card: oklch(0.05 0 0);
+  --card-foreground: oklch(1 0 0);
+  --popover: oklch(0.05 0 0);
+  --popover-foreground: oklch(1 0 0);
+  --primary: oklch(1 0 0);
+  --primary-foreground: oklch(0 0 0);
+  --secondary: oklch(0.12 0 0);
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.12 0 0);
+  --muted-foreground: oklch(0.7 0 0);
+  --accent: oklch(0.12 0 0);
+  --accent-foreground: oklch(1 0 0);
+  --destructive: oklch(0.55 0.25 25);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.5 0 0);
+  --input: oklch(0.5 0 0);
+  --ring: oklch(0.7 0 0);
+  /* High-contrast: pure primaries that survive the harsh background. */
+  --chart-1: #00ffff;
+  --chart-2: #00ff00;
+  --chart-3: #ffff00;
+  --chart-4: #e040fb;
+  --chart-5: #ff8000;
+  --chart-6: #ffffff;
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+    box-sizing: border-box;
+  }
+
+  html,
+  body,
+  #root {
+    min-height: 100%;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    margin: 0;
+    font-family: system-ui, sans-serif;
+  }
+}
+
+button {
+  cursor: pointer;
+}
+
+/* -- Chart components -- */
+
+.pmx-chart {
+  width: 100%;
+  padding: 0.5rem 0;
+}
+
+.pmx-chart__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--foreground);
+  margin-bottom: 0.75rem;
+}
+
+/* Recharts overrides for theme integration */
+.recharts-cartesian-grid-horizontal line,
+.recharts-cartesian-grid-vertical line {
+  stroke: var(--border);
+}
+
+.recharts-default-tooltip {
+  background-color: var(--popover) !important;
+  border-color: var(--border) !important;
+  color: var(--popover-foreground) !important;
+}
+
+.recharts-legend-item-text {
+  color: var(--foreground) !important;
+}