Custom chart export

js/packages/react-ui/package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "name": "@crayonai/react-ui",
   "license": "MIT",
-  "version": "0.9.14",
+  "version": "0.9.15",
   "description": "Component library for Generative UI SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx

@@ -5,7 +5,12 @@ import { usePrintContext } from "../../../context/PrintContext";
 import { useId } from "../../../polyfills";
 import { ChartConfig, ChartContainer, ChartTooltip } from "../Charts";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
-import { useMaxLabelHeight, useTransformedKeys, useYAxisLabelWidth } from "../hooks";
+import {
+  useExportChartData,
+  useMaxLabelHeight,
+  useTransformedKeys,
+  useYAxisLabelWidth,
+} from "../hooks";
 import {
   ActiveDot,
   cartesianGrid,
@@ -229,6 +234,17 @@ const AreaChartComponent = <T extends AreaChartData>({
     return getLegendItems(dataKeys, colors, icons);
   }, [dataKeys, colors, icons]);
 
+  const exportData = useExportChartData({
+    type: "area",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+  });
+
   const id = useId();
 
   const gradientID = useMemo(() => `area-chart-gradient-${id}`, [id]);
@@ -304,6 +320,7 @@ const AreaChartComponent = <T extends AreaChartData>({
       >
         <div
           className={clsx("crayon-area-chart-container", className)}
+          data-crayon-chart={exportData}
           style={{
             width: width ? `${width}px` : undefined,
           }}

js/packages/react-ui/src/components/Charts/AreaChartCondensed/AreaChartCondensed.tsx

@@ -9,6 +9,7 @@ import { DEFAULT_X_AXIS_HEIGHT, X_AXIS_PADDING } from "../constants";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
 import {
   useAutoAngleCalculation,
+  useExportChartData,
   useMaxLabelWidth,
   useTransformedKeys,
   useYAxisLabelWidth,
@@ -134,6 +135,17 @@ const AreaChartCondensedComponent = <T extends AreaChartData>({
   }, [dataKeys, icons, colors, transformedKeys]);
 
   const id = useId();
+
+  const exportData = useExportChartData({
+    type: "area",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+  });
   const gradientID = useMemo(() => `area-chart-condensed-gradient-${id}`, [id]);
 
   const chartMargin = useMemo(
@@ -279,6 +291,7 @@ const AreaChartCondensedComponent = <T extends AreaChartData>({
       >
         <div
           className={clsx("crayon-area-chart-condensed-container", className)}
+          data-crayon-chart={exportData}
           style={{
             width: width ? `${width}px` : undefined,
           }}

js/packages/react-ui/src/components/Charts/BarChart/BarChart.tsx

@@ -6,7 +6,12 @@ import { useId } from "../../../polyfills";
 import { useTheme } from "../../ThemeProvider";
 import { ChartConfig, ChartContainer, ChartTooltip } from "../Charts";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
-import { useMaxLabelHeight, useTransformedKeys, useYAxisLabelWidth } from "../hooks";
+import {
+  useExportChartData,
+  useMaxLabelHeight,
+  useTransformedKeys,
+  useYAxisLabelWidth,
+} from "../hooks";
 import {
   cartesianGrid,
   CustomTooltipContent,
@@ -253,6 +258,17 @@ const BarChartComponent = <T extends BarChartData>({
     return getLegendItems(dataKeys, colors, icons);
   }, [dataKeys, colors, icons]);
 
+  const exportData = useExportChartData({
+    type: "bar",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+  });
+
   const id = useId();
 
   const yAxis = useMemo(() => {
@@ -428,6 +444,7 @@ const BarChartComponent = <T extends BarChartData>({
       >
         <div
           className={clsx("crayon-bar-chart-container", className)}
+          data-crayon-chart={exportData}
           style={{
             width: width ? `${width}px` : undefined,
           }}

js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx

@@ -10,6 +10,7 @@ import { DEFAULT_X_AXIS_HEIGHT, X_AXIS_PADDING } from "../constants";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
 import {
   useAutoAngleCalculation,
+  useExportChartData,
   useMaxLabelWidth,
   useTransformedKeys,
   useYAxisLabelWidth,
@@ -140,6 +141,17 @@ const BarChartCondensedComponent = <T extends BarChartData>({
 
   const id = useId();
 
+  const exportData = useExportChartData({
+    type: "bar",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+  });
+
   const chartMargin = useMemo(
     () => ({
       top: 10,
@@ -378,6 +390,7 @@ const BarChartCondensedComponent = <T extends BarChartData>({
       >
         <div
           className={clsx("crayon-bar-chart-condensed-container", className)}
+          data-crayon-chart={exportData}
           style={{
             width: width ? `${width}px` : undefined,
           }}

js/packages/react-ui/src/components/Charts/Charts.tsx

@@ -41,6 +41,34 @@ export type ChartConfig = {
   );
 };
 
+/**
+ * Data structure for chart export (e.g., to PPTX)
+ */
+export type ExportChartData = {
+  type: "line" | "bar" | "area" | "pie" | "radar" | "scatter";
+  data: {
+    name: string;
+    labels?: string[];
+    values?: number[];
+    x?: number[];
+    y?: number[];
+  }[];
+  options?: {
+    chartColors?: string[];
+    showLegend?: boolean;
+    legendPos?: "b" | "t" | "l" | "r";
+    title?: string;
+    showTitle?: boolean;
+    catAxisTitle?: string;
+    showCatAxisTitle?: boolean;
+    valAxisTitle?: string;
+    showValAxisTitle?: boolean;
+    lineSize?: number;
+    barDir?: "bar" | "col";
+    barGrouping?: "stacked" | "clustered" | "percent" | "standard";
+  };
+};
+
 /**
  * Context props for chart configuration
  */

js/packages/react-ui/src/components/Charts/HorizontalBarChart/HorizontalBarChart.tsx

@@ -6,7 +6,7 @@ import { useId } from "../../../polyfills";
 import { useTheme } from "../../ThemeProvider";
 import { ChartConfig, ChartContainer, ChartTooltip } from "../Charts";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
-import { useTransformedKeys } from "../hooks";
+import { useExportChartData, useTransformedKeys } from "../hooks";
 import { useHorizontalBarLabelHeight } from "../hooks/useMaxLabelHeight";
 import {
   CustomTooltipContent,
@@ -245,6 +245,20 @@ const HorizontalBarChartComponent = <T extends HorizontalBarChartData>({
     return getLegendItems(dataKeys, colors, icons);
   }, [dataKeys, colors, icons]);
 
+  const exportData = useExportChartData({
+    type: "bar",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+    extraOptions: {
+      barDir: "bar",
+    },
+  });
+
   const id = useId();
 
   const xAxis = useMemo(() => {
@@ -347,7 +361,10 @@ const HorizontalBarChartComponent = <T extends HorizontalBarChartData>({
         data={sideBarTooltipData}
         setData={setSideBarTooltipData}
       >
-        <div className={clsx("crayon-horizontal-bar-chart-container", className)}>
+        <div
+          className={clsx("crayon-horizontal-bar-chart-container", className)}
+          data-crayon-chart={exportData}
+        >
           <div
             className="crayon-horizontal-bar-chart-container-inner-wrapper"
             style={{

js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx

@@ -5,7 +5,12 @@ import { usePrintContext } from "../../../context/PrintContext";
 import { useId } from "../../../polyfills";
 import { ChartConfig, ChartContainer, ChartTooltip } from "../Charts";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
-import { useMaxLabelHeight, useTransformedKeys, useYAxisLabelWidth } from "../hooks";
+import {
+  useExportChartData,
+  useMaxLabelHeight,
+  useTransformedKeys,
+  useYAxisLabelWidth,
+} from "../hooks";
 import {
   ActiveDot,
   cartesianGrid,
@@ -228,6 +233,20 @@ export const LineChart = <T extends LineChartData>({
     return getLegendItems(dataKeys, colors, icons);
   }, [dataKeys, colors, icons]);
 
+  const exportData = useExportChartData({
+    type: "line",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+    extraOptions: {
+      lineSize: strokeWidth,
+    },
+  });
+
   const id = useId();
 
   const onLineClick = useCallback(
@@ -314,6 +333,7 @@ export const LineChart = <T extends LineChartData>({
       >
         <div
           className={clsx("crayon-line-chart-container", className)}
+          data-crayon-chart={exportData}
           style={{
             width: width ? `${width}px` : undefined,
           }}

js/packages/react-ui/src/components/Charts/LineChartCondensed/LineChartCondensed.tsx

@@ -8,6 +8,7 @@ import { DEFAULT_X_AXIS_HEIGHT, X_AXIS_PADDING } from "../constants";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
 import {
   useAutoAngleCalculation,
+  useExportChartData,
   useMaxLabelWidth,
   useTransformedKeys,
   useYAxisLabelWidth,
@@ -136,6 +137,20 @@ const LineChartCondensedComponent = <T extends LineChartData>({
 
   const id = useId();
 
+  const exportData = useExportChartData({
+    type: "line",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+    extraOptions: {
+      lineSize: strokeWidth,
+    },
+  });
+
   const chartMargin = useMemo(
     () => ({
       top: 10,
@@ -279,6 +294,7 @@ const LineChartCondensedComponent = <T extends LineChartData>({
       >
         <div
           className={clsx("crayon-line-chart-condensed-container", className)}
+          data-crayon-chart={exportData}
           style={{
             width: width ? `${width}px` : undefined,
           }}

js/packages/react-ui/src/components/Charts/PieChart/PieChart.tsx

@@ -4,7 +4,7 @@ import { Cell, Pie, PieChart as RechartsPieChart } from "recharts";
 import { usePrintContext } from "../../../context/PrintContext.js";
 import { useTheme } from "../../ThemeProvider/ThemeProvider.js";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../Charts.js";
-import { useTransformedKeys } from "../hooks/index.js";
+import { useExportChartData, useTransformedKeys } from "../hooks/index.js";
 import { DefaultLegend } from "../shared/DefaultLegend/DefaultLegend.js";
 import { StackedLegend } from "../shared/StackedLegend/StackedLegend.js";
 import { LegendItem } from "../types/Legend.js";
@@ -146,6 +146,15 @@ const PieChartComponent = <T extends PieChartData>({
     dataLength: sortedProcessedData.length,
   });
 
+  const exportData = useExportChartData({
+    type: "pie",
+    data: sortedProcessedData,
+    categoryKey: categoryKey as string,
+    dataKeys: [dataKey as string],
+    colors,
+    legend,
+  });
+
   // Memoize expensive data transformations and configurations
   const transformedData = useMemo(
     () => transformDataWithPercentages(sortedProcessedData as T, dataKey),
@@ -445,7 +454,12 @@ const PieChartComponent = <T extends PieChartData>({
   }, [width, height]);
 
   return (
-    <div ref={wrapperRef} className={wrapperClassName} style={wrapperStyle}>
+    <div
+      ref={wrapperRef}
+      className={wrapperClassName}
+      style={wrapperStyle}
+      data-crayon-chart={exportData}
+    >
       <div className="crayon-pie-chart-container">
         <div className="crayon-pie-chart-container-inner">
           <div style={chartSizeStyle}>

js/packages/react-ui/src/components/Charts/RadarChart/RadarChart.tsx

@@ -10,7 +10,7 @@ import {
 import { usePrintContext } from "../../../context/PrintContext";
 import { ChartConfig, ChartContainer, ChartTooltip } from "../Charts";
 import { SideBarTooltipProvider } from "../context/SideBarTooltipContext";
-import { useTransformedKeys } from "../hooks/useTransformKey";
+import { useExportChartData, useTransformedKeys } from "../hooks";
 import { ActiveDot, CustomTooltipContent, DefaultLegend } from "../shared";
 import { LegendItem } from "../types";
 import { useChartPalette } from "../utils/PalletUtils";
@@ -77,6 +77,15 @@ const RadarChartComponent = <T extends RadarChartData>({
     return getLegendItems(dataKeys, colors, icons);
   }, [dataKeys, colors, icons]);
 
+  const exportData = useExportChartData({
+    type: "radar",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+  });
+
   const [isLegendExpanded, setIsLegendExpanded] = useState(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [wrapperRect, setWrapperRect] = useState({ width: 0, height: 0 });
@@ -195,7 +204,12 @@ const RadarChartComponent = <T extends RadarChartData>({
       data={undefined}
       setData={() => {}}
     >
-      <div ref={wrapperRef} className={wrapperClassName} style={wrapperStyle}>
+      <div
+        ref={wrapperRef}
+        className={wrapperClassName}
+        style={wrapperStyle}
+        data-crayon-chart={exportData}
+      >
         <div className="crayon-radar-chart-container">
           <div className="crayon-radar-chart-container-inner">
             <div style={chartSizeStyle}>