@gram-ai/elements 1.25.2 → 1.26.0

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'

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

@@ -0,0 +1,135 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { FC, useMemo } from 'react'
+import {
+  LineChart as RechartsLineChart,
+  Line,
+  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 LineChartProps {
+  title?: string
+  data: SeriesDataPoint[]
+  series?: string[]
+  showGrid?: boolean
+  showLegend?: boolean
+  showDots?: boolean
+  curved?: boolean
+  className?: string
+}
+
+export const LineChart: FC<LineChartProps> = ({
+  title,
+  data,
+  series,
+  showGrid = true,
+  showLegend = true,
+  showDots = true,
+  curved = 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%">
+          <RechartsLineChart
+            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) => (
+              <Line
+                key={key}
+                type={curved ? 'monotone' : 'linear'}
+                dataKey={key}
+                stroke={COLORS[index % COLORS.length]}
+                strokeWidth={2}
+                dot={showDots}
+                activeDot={{ r: 6 }}
+                isAnimationActive={false}
+              />
+            ))}
+          </RechartsLineChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,148 @@
+'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 PieChartProps {
+  title?: string
+  data: DataPoint[]
+  showLabels?: boolean
+  showLegend?: boolean
+  className?: string
+}
+
+export const PieChart: FC<PieChartProps> = ({
+  title,
+  data,
+  showLabels = true,
+  showLegend = true,
+  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="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={0}
+              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>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,105 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { FC } from 'react'
+import {
+  RadarChart as RechartsRadarChart,
+  Radar,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  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 RadarChartProps {
+  title?: string
+  data: DataPoint[]
+  showLegend?: boolean
+  className?: string
+}
+
+export const RadarChart: FC<RadarChartProps> = ({
+  title,
+  data,
+  showLegend = false,
+  className,
+}) => {
+  // Transform data for Recharts (uses 'subject' for labels)
+  const chartData = data.map((d) => ({ subject: d.label, value: d.value }))
+
+  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%">
+          <RechartsRadarChart
+            data={chartData}
+            cx="50%"
+            cy="50%"
+            outerRadius="80%"
+          >
+            <PolarGrid stroke="var(--border)" />
+            <PolarAngleAxis
+              dataKey="subject"
+              tick={{ fill: 'var(--foreground)', fontSize: 12 }}
+            />
+            <PolarRadiusAxis
+              tick={{ fill: 'var(--foreground)', fontSize: 10 }}
+              axisLine={{ stroke: 'var(--border)' }}
+            />
+            <Tooltip content={<CustomTooltip />} />
+            {showLegend && (
+              <Legend
+                wrapperStyle={{ color: 'var(--foreground)' }}
+                formatter={(value) => (
+                  <span style={{ color: 'var(--foreground)' }}>{value}</span>
+                )}
+              />
+            )}
+            <Radar
+              name="Value"
+              dataKey="value"
+              stroke={COLORS[0]}
+              fill={COLORS[0]}
+              fillOpacity={0.3}
+              isAnimationActive={false}
+            />
+          </RechartsRadarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}