@gram-ai/elements 1.27.4 → 1.27.5

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

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

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

@@ -1,7 +1,7 @@
-'use client'
+"use client";
 
-import { cn } from '@/lib/utils'
-import { FC } from 'react'
+import { cn } from "@/lib/utils";
+import { FC } from "react";
 import {
   PieChart as RechartsPieChart,
   Pie,
@@ -10,44 +10,44 @@ import {
   Legend,
   ResponsiveContainer,
   TooltipProps,
-} from 'recharts'
+} from "recharts";
 
 const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
-  if (!active || !payload || payload.length === 0) return null
-  const entry = payload[0]
+  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">
+    <div className="rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground shadow-sm">
       <span className="font-medium">
-        {typeof entry?.value === 'number'
+        {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)',
-]
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
+];
 
 interface DataPoint {
-  label: string
-  value: number
-  color?: string
+  label: string;
+  value: number;
+  color?: string;
 }
 
 export interface DonutChartProps {
-  title?: string
-  data: DataPoint[]
-  showLabels?: boolean
-  showLegend?: boolean
-  innerLabel?: string
-  innerValue?: string | number
-  className?: string
+  title?: string;
+  data: DataPoint[];
+  showLabels?: boolean;
+  showLegend?: boolean;
+  innerLabel?: string;
+  innerValue?: string | number;
+  className?: string;
 }
 
 export const DonutChart: FC<DonutChartProps> = ({
@@ -64,12 +64,12 @@ export const DonutChart: FC<DonutChartProps> = ({
     name: d.label,
     value: d.value,
     color: d.color,
-  }))
+  }));
 
   return (
-    <div className={cn('flex flex-col gap-2', className)}>
+    <div className={cn("flex flex-col gap-2", className)}>
       {title && (
-        <h3 className="text-foreground text-sm font-medium">{title}</h3>
+        <h3 className="text-sm font-medium text-foreground">{title}</h3>
       )}
       <div className="relative h-[320px] w-full">
         <ResponsiveContainer width="100%" height="100%">
@@ -94,33 +94,33 @@ export const DonutChart: FC<DonutChartProps> = ({
                       midAngle,
                       outerRadius,
                     }: {
-                      name?: string
-                      percent?: number
-                      cx?: number
-                      cy?: number
-                      midAngle?: number
-                      outerRadius?: number
+                      name?: string;
+                      percent?: number;
+                      cx?: number;
+                      cy?: number;
+                      midAngle?: number;
+                      outerRadius?: number;
                     }) => {
-                      const RADIAN = Math.PI / 180
-                      const radius = (outerRadius ?? 80) + 25
+                      const RADIAN = Math.PI / 180;
+                      const radius = (outerRadius ?? 80) + 25;
                       const x =
                         (cx ?? 0) +
-                        radius * Math.cos(-((midAngle ?? 0) * RADIAN))
+                        radius * Math.cos(-((midAngle ?? 0) * RADIAN));
                       const y =
                         (cy ?? 0) +
-                        radius * Math.sin(-((midAngle ?? 0) * RADIAN))
+                        radius * Math.sin(-((midAngle ?? 0) * RADIAN));
                       return (
                         <text
                           x={x}
                           y={y}
                           fill="var(--foreground)"
-                          textAnchor={x > (cx ?? 0) ? 'start' : 'end'}
+                          textAnchor={x > (cx ?? 0) ? "start" : "end"}
                           dominantBaseline="central"
                           fontSize={12}
                         >
-                          {`${name ?? ''} (${((percent ?? 0) * 100).toFixed(0)}%)`}
+                          {`${name ?? ""} (${((percent ?? 0) * 100).toFixed(0)}%)`}
                         </text>
-                      )
+                      );
                     }
                   : undefined
               }
@@ -138,9 +138,9 @@ export const DonutChart: FC<DonutChartProps> = ({
             {showLegend && (
               <Legend
                 verticalAlign="bottom"
-                wrapperStyle={{ color: 'var(--foreground)', paddingTop: 20 }}
+                wrapperStyle={{ color: "var(--foreground)", paddingTop: 20 }}
                 formatter={(value) => (
-                  <span style={{ color: 'var(--foreground)' }}>{value}</span>
+                  <span style={{ color: "var(--foreground)" }}>{value}</span>
                 )}
               />
             )}
@@ -150,12 +150,12 @@ export const DonutChart: FC<DonutChartProps> = ({
         {(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">
+              <span className="text-2xl font-bold text-foreground">
                 {innerValue}
               </span>
             )}
             {innerLabel && (
-              <span className="text-muted-foreground text-xs">
+              <span className="text-xs text-muted-foreground">
                 {innerLabel}
               </span>
             )}
@@ -163,5 +163,5 @@ export const DonutChart: FC<DonutChartProps> = ({
         )}
       </div>
     </div>
-  )
-}
+  );
+};

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

@@ -1,7 +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'
+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

@@ -1,7 +1,7 @@
-'use client'
+"use client";
 
-import { cn } from '@/lib/utils'
-import { FC, useMemo } from 'react'
+import { cn } from "@/lib/utils";
+import { FC, useMemo } from "react";
 import {
   LineChart as RechartsLineChart,
   Line,
@@ -12,12 +12,12 @@ import {
   Legend,
   ResponsiveContainer,
   TooltipProps,
-} from 'recharts'
+} from "recharts";
 
 const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
-  if (!active || !payload || payload.length === 0) return null
+  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">
+    <div className="rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground shadow-sm">
       {payload.map((entry, index) => (
         <div key={index} className="flex items-center gap-2">
           <span
@@ -26,38 +26,38 @@ const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
           />
           <span>{entry.name}:</span>
           <span className="font-medium">
-            {typeof entry.value === 'number'
+            {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)',
-]
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
+];
 
 interface SeriesDataPoint {
-  label: string
-  [key: string]: string | number
+  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
+  title?: string;
+  data: SeriesDataPoint[];
+  series?: string[];
+  showGrid?: boolean;
+  showLegend?: boolean;
+  showDots?: boolean;
+  curved?: boolean;
+  className?: string;
 }
 
 export const LineChart: FC<LineChartProps> = ({
@@ -72,16 +72,16 @@ export const LineChart: FC<LineChartProps> = ({
 }) => {
   // 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])
+    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)}>
+    <div className={cn("flex flex-col gap-2", className)}>
       {title && (
-        <h3 className="text-foreground text-sm font-medium">{title}</h3>
+        <h3 className="text-sm font-medium text-foreground">{title}</h3>
       )}
       <div className="h-[250px] w-full">
         <ResponsiveContainer width="100%" height="100%">
@@ -97,28 +97,28 @@ export const LineChart: FC<LineChartProps> = ({
             )}
             <XAxis
               dataKey="label"
-              tick={{ fill: 'var(--foreground)', fontSize: 12 }}
-              axisLine={{ stroke: 'var(--border)' }}
-              tickLine={{ stroke: 'var(--border)' }}
+              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)' }}
+              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)' }}
+                wrapperStyle={{ color: "var(--foreground)" }}
                 formatter={(value) => (
-                  <span style={{ color: 'var(--foreground)' }}>{value}</span>
+                  <span style={{ color: "var(--foreground)" }}>{value}</span>
                 )}
               />
             )}
             {seriesKeys.map((key, index) => (
               <Line
                 key={key}
-                type={curved ? 'monotone' : 'linear'}
+                type={curved ? "monotone" : "linear"}
                 dataKey={key}
                 stroke={COLORS[index % COLORS.length]}
                 strokeWidth={2}
@@ -131,5 +131,5 @@ export const LineChart: FC<LineChartProps> = ({
         </ResponsiveContainer>
       </div>
     </div>
-  )
-}
+  );
+};

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

@@ -1,7 +1,7 @@
-'use client'
+"use client";
 
-import { cn } from '@/lib/utils'
-import { FC } from 'react'
+import { cn } from "@/lib/utils";
+import { FC } from "react";
 import {
   PieChart as RechartsPieChart,
   Pie,
@@ -10,42 +10,42 @@ import {
   Legend,
   ResponsiveContainer,
   TooltipProps,
-} from 'recharts'
+} from "recharts";
 
 const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
-  if (!active || !payload || payload.length === 0) return null
-  const entry = payload[0]
+  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">
+    <div className="rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground shadow-sm">
       <span className="font-medium">
-        {typeof entry?.value === 'number'
+        {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)',
-]
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
+];
 
 interface DataPoint {
-  label: string
-  value: number
-  color?: string
+  label: string;
+  value: number;
+  color?: string;
 }
 
 export interface PieChartProps {
-  title?: string
-  data: DataPoint[]
-  showLabels?: boolean
-  showLegend?: boolean
-  className?: string
+  title?: string;
+  data: DataPoint[];
+  showLabels?: boolean;
+  showLegend?: boolean;
+  className?: string;
 }
 
 export const PieChart: FC<PieChartProps> = ({
@@ -60,12 +60,12 @@ export const PieChart: FC<PieChartProps> = ({
     name: d.label,
     value: d.value,
     color: d.color,
-  }))
+  }));
 
   return (
-    <div className={cn('flex flex-col gap-2', className)}>
+    <div className={cn("flex flex-col gap-2", className)}>
       {title && (
-        <h3 className="text-foreground text-sm font-medium">{title}</h3>
+        <h3 className="text-sm font-medium text-foreground">{title}</h3>
       )}
       <div className="h-[320px] w-full">
         <ResponsiveContainer width="100%" height="100%">
@@ -90,33 +90,33 @@ export const PieChart: FC<PieChartProps> = ({
                       midAngle,
                       outerRadius,
                     }: {
-                      name?: string
-                      percent?: number
-                      cx?: number
-                      cy?: number
-                      midAngle?: number
-                      outerRadius?: number
+                      name?: string;
+                      percent?: number;
+                      cx?: number;
+                      cy?: number;
+                      midAngle?: number;
+                      outerRadius?: number;
                     }) => {
-                      const RADIAN = Math.PI / 180
-                      const radius = (outerRadius ?? 80) + 25
+                      const RADIAN = Math.PI / 180;
+                      const radius = (outerRadius ?? 80) + 25;
                       const x =
                         (cx ?? 0) +
-                        radius * Math.cos(-((midAngle ?? 0) * RADIAN))
+                        radius * Math.cos(-((midAngle ?? 0) * RADIAN));
                       const y =
                         (cy ?? 0) +
-                        radius * Math.sin(-((midAngle ?? 0) * RADIAN))
+                        radius * Math.sin(-((midAngle ?? 0) * RADIAN));
                       return (
                         <text
                           x={x}
                           y={y}
                           fill="var(--foreground)"
-                          textAnchor={x > (cx ?? 0) ? 'start' : 'end'}
+                          textAnchor={x > (cx ?? 0) ? "start" : "end"}
                           dominantBaseline="central"
                           fontSize={12}
                         >
-                          {`${name ?? ''} (${((percent ?? 0) * 100).toFixed(0)}%)`}
+                          {`${name ?? ""} (${((percent ?? 0) * 100).toFixed(0)}%)`}
                         </text>
-                      )
+                      );
                     }
                   : undefined
               }
@@ -134,9 +134,9 @@ export const PieChart: FC<PieChartProps> = ({
             {showLegend && (
               <Legend
                 verticalAlign="bottom"
-                wrapperStyle={{ color: 'var(--foreground)', paddingTop: 20 }}
+                wrapperStyle={{ color: "var(--foreground)", paddingTop: 20 }}
                 formatter={(value) => (
-                  <span style={{ color: 'var(--foreground)' }}>{value}</span>
+                  <span style={{ color: "var(--foreground)" }}>{value}</span>
                 )}
               />
             )}
@@ -144,5 +144,5 @@ export const PieChart: FC<PieChartProps> = ({
         </ResponsiveContainer>
       </div>
     </div>
-  )
-}
+  );
+};