@gram-ai/elements 1.25.1 → 1.26.0

package/src/plugins/chart/index.ts

@@ -2,108 +2,160 @@ import { Plugin } from '@/types/plugins'
 import { ChartRenderer } from './component'
 
 /**
- * This plugin renders Vega charts.
+ * This plugin renders charts using json-render format.
  */
 export const chart: Plugin = {
-  language: 'vega',
-  prompt: `When a user requests a chart or visualization, respond with a valid Vega specification (https://vega.github.io/vega/) in a code block annotated with the language identifier 'vega'.
+  language: 'chart',
+  prompt: `WHEN TO USE CHARTS:
+Create charts to visualize numerical data when it helps users understand patterns, trends, or comparisons. Use the 'chart' code block format.
 
 CRITICAL JSON REQUIREMENTS:
 - The code block MUST contain ONLY valid, parseable JSON
 - NO comments (no // or /* */ anywhere)
 - NO trailing commas
 - Use double quotes for all strings and keys
-- NO text before or after the JSON object
 - The JSON must start with { and end with }
 
+AVAILABLE CHART TYPES:
+
+BarChart - Compare categorical data
+  props: {
+    title?: string,
+    data: [{ label: string, value: number, color?: string }],
+    layout?: "vertical" | "horizontal",
+    showGrid?: boolean,
+    showLegend?: boolean
+  }
+
+LineChart - Show trends over time
+  props: {
+    title?: string,
+    data: [{ label: string, [series]: number }],
+    series?: string[],
+    showGrid?: boolean,
+    showLegend?: boolean,
+    showDots?: boolean,
+    curved?: boolean
+  }
+
+AreaChart - Show volume over time
+  props: {
+    title?: string,
+    data: [{ label: string, [series]: number }],
+    series?: string[],
+    stacked?: boolean,
+    showGrid?: boolean,
+    showLegend?: boolean
+  }
+
+PieChart - Show proportions (2-6 categories)
+  props: {
+    title?: string,
+    data: [{ label: string, value: number, color?: string }],
+    showLabels?: boolean,
+    showLegend?: boolean
+  }
+
+DonutChart - Proportions with center metric
+  props: {
+    title?: string,
+    data: [{ label: string, value: number, color?: string }],
+    showLabels?: boolean,
+    showLegend?: boolean,
+    innerLabel?: string,
+    innerValue?: string | number
+  }
+
+ScatterChart - Show correlation
+  props: {
+    title?: string,
+    data: [{ x: number, y: number, label?: string, size?: number, color?: string }],
+    xLabel?: string,
+    yLabel?: string,
+    showGrid?: boolean
+  }
+
+RadarChart - Compare multiple attributes (3-8 dimensions)
+  props: {
+    title?: string,
+    data: [{ label: string, value: number }],
+    showLegend?: boolean
+  }
+
+STRUCTURE:
+{
+  "type": "ChartType",
+  "props": { ... }
+}
+
+EXAMPLE - BAR CHART:
+{
+  "type": "BarChart",
+  "props": {
+    "title": "Sales by Region",
+    "data": [
+      { "label": "North", "value": 120000 },
+      { "label": "South", "value": 98000 },
+      { "label": "East", "value": 145000 },
+      { "label": "West", "value": 87000 }
+    ]
+  }
+}
+
+EXAMPLE - LINE CHART (multiple series):
+{
+  "type": "LineChart",
+  "props": {
+    "title": "Monthly Revenue",
+    "data": [
+      { "label": "Jan", "revenue": 45000, "costs": 32000 },
+      { "label": "Feb", "revenue": 52000, "costs": 35000 },
+      { "label": "Mar", "revenue": 61000, "costs": 38000 }
+    ],
+    "series": ["revenue", "costs"]
+  }
+}
+
+EXAMPLE - PIE CHART:
+{
+  "type": "PieChart",
+  "props": {
+    "title": "Market Share",
+    "data": [
+      { "label": "Product A", "value": 45 },
+      { "label": "Product B", "value": 30 },
+      { "label": "Product C", "value": 25 }
+    ]
+  }
+}
+
+EXAMPLE - DONUT CHART:
+{
+  "type": "DonutChart",
+  "props": {
+    "title": "Budget Allocation",
+    "data": [
+      { "label": "Marketing", "value": 35 },
+      { "label": "Engineering", "value": 45 },
+      { "label": "Operations", "value": 20 }
+    ],
+    "innerValue": "$1.2M",
+    "innerLabel": "Total Budget"
+  }
+}
+
+CHART SELECTION GUIDE:
+- Comparing categories → BarChart
+- Trends over time → LineChart
+- Volume/magnitude over time → AreaChart
+- Part-to-whole (2-6 items) → PieChart or DonutChart
+- Correlation between variables → ScatterChart
+- Multi-dimensional comparison → RadarChart
+
 CONTENT GUIDELINES:
 - Outside the code block, describe trends and insights found in the data
 - Do not describe visual properties or technical implementation details
-- Do not mention "Vega" or other technical terms - this is user-facing
-
-The Vega spec will be parsed with JSON.parse() - if it fails, the chart will error. Ensure strict JSON validity.
-
-REQUIRED STRUCTURE:
-Every spec needs: "$schema", "width", "height", "data", "scales", "marks". Include "padding" (5 or object) and "axes" for readability.
-Data format:
-{"name": "table", "values": [{"category": "A", "amount": 28}]}
-SCALES - Choose the right type:
-- "band": categorical x-axis (bar charts) - domain from data field, range: "width", padding: 0.1
-- "linear": numerical axes - domain from data field, range: "width"/"height", nice: true
-- "time"/"utc": temporal data
-- "ordinal": for colors use range: {"scheme": "category10"} or range: ["#1f77b4", "#ff7f0e", "#2ca02c"]
-MARKS - Common types:
-- "rect": bar charts (requires x, width, y, y2)
-- "line": time series (requires x, y)
-- "area": filled areas (requires x, y, y2)
-- "symbol": scatter plots (requires x, y)
-CHART PATTERNS:
-Bar: band scale (x) + linear scale (y) + rect marks. Set y2: {"scale": "yscale", "value": 0}
-Line: linear/point scale (x) + linear scale (y) + line mark. Add "interpolate": "monotone"
-Scatter: linear scales (both) + symbol marks
-Area: like line but use area mark with y2: {"scale": "yscale", "value": 0}
-Stacked: add transform [{"type": "stack", "groupby": ["x"], "field": "y"}], use y0/y1 fields
-CRITICAL RULES:
-1. Data must contain at least one record with valid (non-null) values for ALL fields used in scales
-2. ONLY reference fields that actually exist in your data - never use datum.meta, datum.id, or any field not in your values array
-3. Always include y2 for rect/area marks (or bars/areas have zero height)
-4. Use "band" for categories, not "linear"
-5. For position scales use "range": "width" or "height". For color scales NEVER use "range": "category10" - use "range": {"scheme": "category10"} or an array
-6. Match scale/data names exactly between definition and usage
-7. Include "from": {"data": "dataName"} on marks
-8. Add padding to prevent label cutoff
-EXAMPLE: COMPLETE BAR CHART
-{
-  "$schema": "https://vega.github.io/schema/vega/v5.json",
-  "width": 500,
-  "height": 300,
-  "padding": 5,
-  "data": [
-    {
-      "name": "table",
-      "values": [
-        {"category": "A", "amount": 28},
-        {"category": "B", "amount": 55},
-        {"category": "C", "amount": 43}
-      ]
-    }
-  ],
-  "scales": [
-    {
-      "name": "xscale",
-      "type": "band",
-      "domain": {"data": "table", "field": "category"},
-      "range": "width",
-      "padding": 0.1
-    },
-    {
-      "name": "yscale",
-      "type": "linear",
-      "domain": {"data": "table", "field": "amount"},
-      "range": "height",
-      "nice": true
-    }
-  ],
-  "axes": [
-    {"scale": "xscale", "orient": "bottom"},
-    {"scale": "yscale", "orient": "left", "title": "Amount"}
-  ],
-  "marks": [
-    {
-      "type": "rect",
-      "from": {"data": "table"},
-      "encode": {
-        "enter": {
-          "x": {"scale": "xscale", "field": "category"},
-          "width": {"scale": "xscale", "band": 1},
-          "y": {"scale": "yscale", "field": "amount"},
-          "y2": {"scale": "yscale", "value": 0},
-          "fill": {"value": "steelblue"}
-        }
-      }
-    }
-  ]
-}`,
+- Focus on what the data means, not how it's displayed`,
   Component: ChartRenderer,
   Header: undefined,
 }

package/src/plugins/chart/ui/area-chart.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { FC, useMemo } from 'react'
+import {
+  AreaChart as RechartsAreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  TooltipProps,
+} from 'recharts'
+
+const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
+  if (!active || !payload || payload.length === 0) return null
+  return (
+    <div className="bg-background text-foreground border-border rounded-md border px-2 py-1.5 text-xs shadow-sm">
+      {payload.map((entry, index) => (
+        <div key={index} className="flex items-center gap-2">
+          <span
+            className="h-2 w-2 rounded-full"
+            style={{ backgroundColor: entry.color }}
+          />
+          <span>{entry.name}:</span>
+          <span className="font-medium">
+            {typeof entry.value === 'number'
+              ? entry.value.toLocaleString()
+              : entry.value}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const COLORS = [
+  'var(--chart-1)',
+  'var(--chart-2)',
+  'var(--chart-3)',
+  'var(--chart-4)',
+  'var(--chart-5)',
+]
+
+interface SeriesDataPoint {
+  label: string
+  [key: string]: string | number
+}
+
+export interface AreaChartProps {
+  title?: string
+  data: SeriesDataPoint[]
+  series?: string[]
+  stacked?: boolean
+  showGrid?: boolean
+  showLegend?: boolean
+  className?: string
+}
+
+export const AreaChart: FC<AreaChartProps> = ({
+  title,
+  data,
+  series,
+  stacked = false,
+  showGrid = true,
+  showLegend = true,
+  className,
+}) => {
+  // Auto-detect series from data keys if not provided
+  const seriesKeys = useMemo(() => {
+    if (series && series.length > 0) return series
+    if (data.length === 0) return []
+    const keys = Object.keys(data[0]).filter((k) => k !== 'label')
+    return keys
+  }, [data, series])
+
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      {title && (
+        <h3 className="text-foreground text-sm font-medium">{title}</h3>
+      )}
+      <div className="h-[250px] w-full">
+        <ResponsiveContainer width="100%" height="100%">
+          <RechartsAreaChart
+            data={data}
+            margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
+          >
+            {showGrid && (
+              <CartesianGrid
+                strokeDasharray="3 3"
+                className="stroke-muted/30"
+              />
+            )}
+            <XAxis
+              dataKey="label"
+              tick={{ fill: 'var(--foreground)', fontSize: 12 }}
+              axisLine={{ stroke: 'var(--border)' }}
+              tickLine={{ stroke: 'var(--border)' }}
+            />
+            <YAxis
+              tick={{ fill: 'var(--foreground)', fontSize: 12 }}
+              axisLine={{ stroke: 'var(--border)' }}
+              tickLine={{ stroke: 'var(--border)' }}
+            />
+            <Tooltip content={<CustomTooltip />} />
+            {showLegend && seriesKeys.length > 1 && (
+              <Legend
+                wrapperStyle={{ color: 'var(--foreground)' }}
+                formatter={(value) => (
+                  <span style={{ color: 'var(--foreground)' }}>{value}</span>
+                )}
+              />
+            )}
+            {seriesKeys.map((key, index) => (
+              <Area
+                key={key}
+                type="monotone"
+                dataKey={key}
+                stackId={stacked ? 'stack' : undefined}
+                stroke={COLORS[index % COLORS.length]}
+                fill={COLORS[index % COLORS.length]}
+                fillOpacity={0.3}
+                isAnimationActive={false}
+              />
+            ))}
+          </RechartsAreaChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}

package/src/plugins/chart/ui/bar-chart.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { FC } from 'react'
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  Cell,
+  ResponsiveContainer,
+  TooltipProps,
+} from 'recharts'
+
+const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
+  if (!active || !payload || payload.length === 0) return null
+  const value = payload[0]?.value
+  return (
+    <div className="bg-background text-foreground border-border rounded-md border px-2 py-1 text-xs shadow-sm">
+      {typeof value === 'number' ? value.toLocaleString() : value}
+    </div>
+  )
+}
+
+const COLORS = [
+  'var(--chart-1)',
+  'var(--chart-2)',
+  'var(--chart-3)',
+  'var(--chart-4)',
+  'var(--chart-5)',
+]
+
+interface DataPoint {
+  label: string
+  value: number
+  color?: string
+}
+
+export interface BarChartProps {
+  title?: string
+  data: DataPoint[]
+  layout?: 'vertical' | 'horizontal'
+  showGrid?: boolean
+  showLegend?: boolean
+  className?: string
+}
+
+export const BarChart: FC<BarChartProps> = ({
+  title,
+  data,
+  layout = 'vertical',
+  showGrid = true,
+  showLegend = false,
+  className,
+}) => {
+  const isHorizontal = layout === 'horizontal'
+
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      {title && (
+        <h3 className="text-foreground text-sm font-medium">{title}</h3>
+      )}
+      <div className="h-[250px] w-full">
+        <ResponsiveContainer width="100%" height="100%">
+          <RechartsBarChart
+            data={data}
+            layout={isHorizontal ? 'vertical' : 'horizontal'}
+            margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
+          >
+            {showGrid && (
+              <CartesianGrid
+                strokeDasharray="3 3"
+                className="stroke-muted/30"
+              />
+            )}
+            {isHorizontal ? (
+              <>
+                <XAxis
+                  type="number"
+                  tick={{ fill: 'var(--foreground)', fontSize: 12 }}
+                  axisLine={{ stroke: 'var(--border)' }}
+                  tickLine={{ stroke: 'var(--border)' }}
+                />
+                <YAxis
+                  dataKey="label"
+                  type="category"
+                  width={80}
+                  tick={{ fill: 'var(--foreground)', fontSize: 12 }}
+                  axisLine={{ stroke: 'var(--border)' }}
+                  tickLine={{ stroke: 'var(--border)' }}
+                />
+              </>
+            ) : (
+              <>
+                <XAxis
+                  dataKey="label"
+                  tick={{ fill: 'var(--foreground)', fontSize: 12 }}
+                  axisLine={{ stroke: 'var(--border)' }}
+                  tickLine={{ stroke: 'var(--border)' }}
+                />
+                <YAxis
+                  tick={{ fill: 'var(--foreground)', fontSize: 12 }}
+                  axisLine={{ stroke: 'var(--border)' }}
+                  tickLine={{ stroke: 'var(--border)' }}
+                />
+              </>
+            )}
+            <Tooltip content={<CustomTooltip />} />
+            {showLegend && (
+              <Legend
+                wrapperStyle={{ color: 'var(--foreground)' }}
+                formatter={(value) => (
+                  <span style={{ color: 'var(--foreground)' }}>{value}</span>
+                )}
+              />
+            )}
+            <Bar
+              dataKey="value"
+              radius={[4, 4, 0, 0]}
+              isAnimationActive={false}
+            >
+              {data.map((entry, index) => (
+                <Cell
+                  key={`cell-${index}`}
+                  fill={entry.color || COLORS[index % COLORS.length]}
+                />
+              ))}
+            </Bar>
+          </RechartsBarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}

package/src/plugins/chart/ui/donut-chart.tsx

@@ -0,0 +1,167 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { FC } from 'react'
+import {
+  PieChart as RechartsPieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  TooltipProps,
+} from 'recharts'
+
+const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
+  if (!active || !payload || payload.length === 0) return null
+  const entry = payload[0]
+  return (
+    <div className="bg-background text-foreground border-border rounded-md border px-2 py-1 text-xs shadow-sm">
+      <span className="font-medium">
+        {typeof entry?.value === 'number'
+          ? entry.value.toLocaleString()
+          : entry?.value}
+      </span>
+    </div>
+  )
+}
+
+const COLORS = [
+  'var(--chart-1)',
+  'var(--chart-2)',
+  'var(--chart-3)',
+  'var(--chart-4)',
+  'var(--chart-5)',
+]
+
+interface DataPoint {
+  label: string
+  value: number
+  color?: string
+}
+
+export interface DonutChartProps {
+  title?: string
+  data: DataPoint[]
+  showLabels?: boolean
+  showLegend?: boolean
+  innerLabel?: string
+  innerValue?: string | number
+  className?: string
+}
+
+export const DonutChart: FC<DonutChartProps> = ({
+  title,
+  data,
+  showLabels = false,
+  showLegend = true,
+  innerLabel,
+  innerValue,
+  className,
+}) => {
+  // Transform data to use 'name' for Recharts
+  const chartData = data.map((d) => ({
+    name: d.label,
+    value: d.value,
+    color: d.color,
+  }))
+
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      {title && (
+        <h3 className="text-foreground text-sm font-medium">{title}</h3>
+      )}
+      <div className="relative h-[320px] w-full">
+        <ResponsiveContainer width="100%" height="100%">
+          <RechartsPieChart
+            margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+          >
+            <Pie
+              data={chartData}
+              cx="50%"
+              cy="45%"
+              innerRadius={50}
+              outerRadius={80}
+              paddingAngle={2}
+              dataKey="value"
+              label={
+                showLabels
+                  ? ({
+                      name,
+                      percent,
+                      cx,
+                      cy,
+                      midAngle,
+                      outerRadius,
+                    }: {
+                      name?: string
+                      percent?: number
+                      cx?: number
+                      cy?: number
+                      midAngle?: number
+                      outerRadius?: number
+                    }) => {
+                      const RADIAN = Math.PI / 180
+                      const radius = (outerRadius ?? 80) + 25
+                      const x =
+                        (cx ?? 0) +
+                        radius * Math.cos(-((midAngle ?? 0) * RADIAN))
+                      const y =
+                        (cy ?? 0) +
+                        radius * Math.sin(-((midAngle ?? 0) * RADIAN))
+                      return (
+                        <text
+                          x={x}
+                          y={y}
+                          fill="var(--foreground)"
+                          textAnchor={x > (cx ?? 0) ? 'start' : 'end'}
+                          dominantBaseline="central"
+                          fontSize={12}
+                        >
+                          {`${name ?? ''} (${((percent ?? 0) * 100).toFixed(0)}%)`}
+                        </text>
+                      )
+                    }
+                  : undefined
+              }
+              labelLine={showLabels}
+              isAnimationActive={false}
+            >
+              {chartData.map((entry, index) => (
+                <Cell
+                  key={`cell-${index}`}
+                  fill={entry.color || COLORS[index % COLORS.length]}
+                />
+              ))}
+            </Pie>
+            <Tooltip content={<CustomTooltip />} />
+            {showLegend && (
+              <Legend
+                verticalAlign="bottom"
+                wrapperStyle={{ color: 'var(--foreground)', paddingTop: 20 }}
+                formatter={(value) => (
+                  <span style={{ color: 'var(--foreground)' }}>{value}</span>
+                )}
+              />
+            )}
+          </RechartsPieChart>
+        </ResponsiveContainer>
+        {/* Center label - positioned at 45% from top to match pie cy */}
+        {(innerLabel !== undefined || innerValue !== undefined) && (
+          <div className="pointer-events-none absolute inset-x-0 top-[45%] flex -translate-y-1/2 flex-col items-center">
+            {innerValue !== undefined && (
+              <span className="text-foreground text-2xl font-bold">
+                {innerValue}
+              </span>
+            )}
+            {innerLabel && (
+              <span className="text-muted-foreground text-xs">
+                {innerLabel}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/plugins/chart/ui/index.ts

@@ -0,0 +1,7 @@
+export { BarChart, type BarChartProps } from './bar-chart'
+export { LineChart, type LineChartProps } from './line-chart'
+export { AreaChart, type AreaChartProps } from './area-chart'
+export { PieChart, type PieChartProps } from './pie-chart'
+export { DonutChart, type DonutChartProps } from './donut-chart'
+export { ScatterChart, type ScatterChartProps } from './scatter-chart'
+export { RadarChart, type RadarChartProps } from './radar-chart'