@optifye/dashboard-core 4.3.5 → 4.3.6

package/dist/index.mjs

@@ -24427,6 +24427,7 @@ var AIAgentView = () => {
   const entityConfig = useEntityConfig();
   const dateTimeConfig = useDateTimeConfig();
   const shiftConfig = useShiftConfig();
+  const { formatNumber } = useFormatNumber();
   const [inputValue, setInputValue] = useState("");
   const [loadingThreads, setLoadingThreads] = useState(/* @__PURE__ */ new Set());
   const [lastError, setLastError] = useState(null);
@@ -25253,71 +25254,142 @@ var AIAgentView = () => {
     };
     const renderChart = (chartType, args, key) => {
       console.log(`[DEBUG] Attempting to render chart type: ${chartType}`, args);
+      const CHART_COLORS = {
+        primary: "#3b82f6",
+        // blue-500
+        secondary: "#10b981",
+        // green-500
+        accent: "#f59e0b",
+        // amber-500
+        danger: "#ef4444",
+        // red-500
+        violet: "#8b5cf6",
+        // violet-500
+        cyan: "#06b6d4",
+        // cyan-500
+        orange: "#f97316",
+        // orange-500
+        indigo: "#6366f1"
+        // indigo-500
+      };
+      const CHART_COLOR_PALETTE = Object.values(CHART_COLORS);
+      const CHART_STYLES = {
+        grid: {
+          strokeDasharray: "3 3",
+          stroke: "#e5e7eb"
+          // gray-300
+        },
+        axis: {
+          tick: { fontSize: 12, fill: "#4b5563" },
+          // gray-600
+          stroke: "#9ca3af"
+          // gray-400
+        },
+        margin: { top: 10, right: 30, left: 20, bottom: 40 },
+        barRadius: [4, 4, 0, 0]
+        // Top corners rounded
+      };
+      const CustomTooltip = ({ active, payload, label }) => {
+        if (active && payload && payload.length) {
+          return /* @__PURE__ */ jsxs("div", { className: "bg-white px-4 py-3 shadow-lg rounded-lg border border-gray-200", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 mb-1", children: label }),
+            payload.map((entry, index) => /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", style: { color: entry.color }, children: [
+              entry.name,
+              ": ",
+              typeof entry.value === "number" ? formatNumber(entry.value) : entry.value,
+              args.unit || ""
+            ] }, index))
+          ] });
+        }
+        return null;
+      };
+      const ChartWrapper = ({ children, title }) => /* @__PURE__ */ jsxs("div", { className: "my-6 bg-white rounded-xl shadow-sm border border-gray-200 p-6", children: [
+        title && /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-gray-900 mb-4", children: title }),
+        children
+      ] });
       switch (chartType) {
         case "create_gauge_chart":
           console.log("[DEBUG] Rendering gauge chart");
-          return /* @__PURE__ */ jsx("div", { className: "my-6 h-64 w-full flex justify-center", children: /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "h-64 w-full flex justify-center", children: /* @__PURE__ */ jsx(
             GaugeChart,
             {
               value: args.value || 0,
               min: args.min_value || 0,
               max: args.max_value || 100,
               target: args.target,
-              label: args.title || "",
+              label: args.label || "",
               unit: args.unit || "",
               thresholds: args.thresholds,
               className: "w-full max-w-sm"
             }
-          ) }, `gauge-${key}`);
+          ) }) }, `gauge-${key}`);
         case "create_bar_chart":
           console.log("[DEBUG] Rendering bar chart");
           if (!args.data || !args.x_field || !args.y_field) {
             console.error("Bar chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
             return null;
           }
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", style: { maxWidth: args.max_width || "100%" }, children: [
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-64", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart$1, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
             /* @__PURE__ */ jsx(
-              BarChart,
+              XAxis,
               {
-                data: args.data,
-                bars: [{
-                  dataKey: args.y_field,
-                  fill: args.color || "#3b82f6",
-                  labelList: args.show_values
-                }],
-                xAxisDataKey: args.x_field,
-                className: "h-64",
-                showLegend: false
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis
               }
             ),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `bar-${key}`);
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(
+              Bar,
+              {
+                dataKey: args.y_field,
+                fill: args.color || CHART_COLORS.primary,
+                radius: CHART_STYLES.barRadius
+              }
+            )
+          ] }) }) }) }, `bar-${key}`);
         case "create_line_chart":
           console.log("[DEBUG] Rendering line chart");
           if (!args.data || !args.x_field || !args.y_field) {
             console.error("Line chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
             return null;
           }
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", style: {
-            height: args.height || 256,
-            width: args.width || "100%"
-          }, children: [
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-64", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
             /* @__PURE__ */ jsx(
-              LineChart,
+              XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
               {
-                data: args.data,
-                lines: [{
-                  dataKey: args.y_field,
-                  stroke: "#3b82f6",
-                  strokeWidth: 2
-                }],
-                xAxisDataKey: args.x_field,
-                className: "h-full",
-                showLegend: false
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
               }
             ),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `line-${key}`);
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsx(
+              Line,
+              {
+                type: "monotone",
+                dataKey: args.y_field,
+                stroke: CHART_COLORS.primary,
+                strokeWidth: 2,
+                dot: { r: 4, fill: CHART_COLORS.primary },
+                activeDot: { r: 6 }
+              }
+            )
+          ] }) }) }) }, `line-${key}`);
         case "create_pie_chart":
           console.log("[DEBUG] Rendering pie chart");
           if (!args.data || !args.label_field || !args.value_field) {
@@ -25330,16 +25402,14 @@ var AIAgentView = () => {
             value: item[args.value_field]
           }));
           console.log("[DEBUG] Pie chart data transformed:", pieData);
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full flex flex-col items-center", children: [
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
-            /* @__PURE__ */ jsx("div", { className: "h-64 w-full max-w-md", children: /* @__PURE__ */ jsx(
-              PieChart4,
-              {
-                data: pieData,
-                showPercentages: args.show_percentages || false
-              }
-            ) })
-          ] }, `pie-${key}`);
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "h-64 w-full max-w-md mx-auto", children: /* @__PURE__ */ jsx(
+            PieChart4,
+            {
+              data: pieData,
+              showPercentages: args.show_percentages || false,
+              colors: CHART_COLOR_PALETTE
+            }
+          ) }) }, `pie-${key}`);
         case "create_comparison_table":
           console.log("[DEBUG] Rendering comparison table");
           if (!args.data) {
@@ -25356,27 +25426,24 @@ var AIAgentView = () => {
               return args.sort_descending === false ? comparison : -comparison;
             });
           }
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full overflow-x-auto", children: [
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
-            /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
-              /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
-                "th",
-                {
-                  className: `px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ${col === args.highlight_column ? "bg-blue-50" : ""}`,
-                  children: col
-                },
-                col
-              )) }) }),
-              /* @__PURE__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: sortedData.map((row, rowIdx) => /* @__PURE__ */ jsx("tr", { className: rowIdx % 2 === 0 ? "bg-white" : "bg-gray-50", children: columns.map((col) => /* @__PURE__ */ jsx(
-                "td",
-                {
-                  className: `px-4 py-2 whitespace-nowrap text-sm ${col === args.highlight_column ? "font-medium text-blue-600 bg-blue-50" : "text-gray-900"}`,
-                  children: row[col]
-                },
-                col
-              )) }, rowIdx)) })
-            ] })
-          ] }, `table-${key}`);
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border border-gray-200", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
+            /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
+              "th",
+              {
+                className: `px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider ${col === args.highlight_column ? "bg-blue-50" : ""}`,
+                children: col
+              },
+              col
+            )) }) }),
+            /* @__PURE__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: sortedData.map((row, rowIdx) => /* @__PURE__ */ jsx("tr", { className: rowIdx % 2 === 0 ? "bg-white" : "bg-gray-50", children: columns.map((col) => /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: `px-6 py-4 whitespace-nowrap text-sm ${col === args.highlight_column ? "font-medium text-blue-600 bg-blue-50" : "text-gray-900"}`,
+                children: typeof row[col] === "number" ? formatNumber(row[col]) : row[col]
+              },
+              col
+            )) }, rowIdx)) })
+          ] }) }) }, `table-${key}`);
         case "create_multi_line_chart":
           console.log("[DEBUG] Rendering multi-line chart");
           if (!args.data || !args.x_field || !args.y_fields || !args.legend) {
@@ -25388,30 +25455,44 @@ var AIAgentView = () => {
             });
             return null;
           }
-          const colors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(LineChart$1, { data: args.data, children: [
-              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field }),
-              /* @__PURE__ */ jsx(YAxis, {}),
-              /* @__PURE__ */ jsx(Tooltip, {}),
-              /* @__PURE__ */ jsx(Legend, {}),
-              args.y_fields.map((field, index) => /* @__PURE__ */ jsx(
-                Line,
-                {
-                  type: "monotone",
-                  dataKey: field,
-                  stroke: colors[index % colors.length],
-                  strokeWidth: 2,
-                  name: args.legend[index] || field,
-                  dot: { r: 4 },
-                  activeDot: { r: 6 }
-                },
-                field
-              ))
-            ] }) }),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `multi-line-${key}`);
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsx(
+              Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            args.y_fields.map((field, index) => /* @__PURE__ */ jsx(
+              Line,
+              {
+                type: "monotone",
+                dataKey: field,
+                stroke: CHART_COLOR_PALETTE[index % CHART_COLOR_PALETTE.length],
+                strokeWidth: 2,
+                name: args.legend[index] || field,
+                dot: { r: 4 },
+                activeDot: { r: 6 }
+              },
+              field
+            ))
+          ] }) }) }) }, `multi-line-${key}`);
         case "create_stacked_bar_chart":
           console.log("[DEBUG] Rendering stacked bar chart");
           if (!args.data || !args.x_field || !args.stack_fields) {
@@ -25422,27 +25503,42 @@ var AIAgentView = () => {
             });
             return null;
           }
-          const stackColors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(BarChart$1, { data: args.data, children: [
-              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field }),
-              /* @__PURE__ */ jsx(YAxis, {}),
-              /* @__PURE__ */ jsx(Tooltip, {}),
-              /* @__PURE__ */ jsx(Legend, {}),
-              args.stack_fields.map((field, index) => /* @__PURE__ */ jsx(
-                Bar,
-                {
-                  dataKey: field,
-                  stackId: "stack",
-                  fill: stackColors[index % stackColors.length],
-                  name: field
-                },
-                field
-              ))
-            ] }) }),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `stacked-bar-${key}`);
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart$1, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(
+              Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            args.stack_fields.map((field, index) => /* @__PURE__ */ jsx(
+              Bar,
+              {
+                dataKey: field,
+                stackId: "stack",
+                fill: CHART_COLOR_PALETTE[index % CHART_COLOR_PALETTE.length],
+                name: field,
+                radius: index === args.stack_fields.length - 1 ? CHART_STYLES.barRadius : void 0
+              },
+              field
+            ))
+          ] }) }) }) }, `stacked-bar-${key}`);
         case "create_dual_axis_chart":
           console.log("[DEBUG] Rendering dual-axis chart");
           if (!args.data || !args.x_field || !args.left_y_field || !args.right_y_field) {
@@ -25454,19 +25550,67 @@ var AIAgentView = () => {
             });
             return null;
           }
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(ComposedChart, { data: args.data, children: [
-              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field }),
-              /* @__PURE__ */ jsx(YAxis, { yAxisId: "left", orientation: "left", label: { value: args.left_label || "", angle: -90, position: "insideLeft" } }),
-              /* @__PURE__ */ jsx(YAxis, { yAxisId: "right", orientation: "right", label: { value: args.right_label || "", angle: 90, position: "insideRight" } }),
-              /* @__PURE__ */ jsx(Tooltip, {}),
-              /* @__PURE__ */ jsx(Legend, {}),
-              /* @__PURE__ */ jsx(Bar, { yAxisId: "left", dataKey: args.left_y_field, fill: "#3b82f6", name: args.left_label || args.left_y_field }),
-              /* @__PURE__ */ jsx(Line, { yAxisId: "right", type: "monotone", dataKey: args.right_y_field, stroke: "#ef4444", strokeWidth: 2, name: args.right_label || args.right_y_field })
-            ] }) }),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `dual-axis-${key}`);
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ComposedChart, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                yAxisId: "left",
+                orientation: "left",
+                label: { value: args.left_label || "", angle: -90, position: "insideLeft" },
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                yAxisId: "right",
+                orientation: "right",
+                label: { value: args.right_label || "", angle: 90, position: "insideRight" },
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(
+              Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Bar,
+              {
+                yAxisId: "left",
+                dataKey: args.left_y_field,
+                fill: CHART_COLORS.primary,
+                name: args.left_label || args.left_y_field,
+                radius: CHART_STYLES.barRadius
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Line,
+              {
+                yAxisId: "right",
+                type: "monotone",
+                dataKey: args.right_y_field,
+                stroke: CHART_COLORS.danger,
+                strokeWidth: 2,
+                name: args.right_label || args.right_y_field,
+                dot: { r: 4 },
+                activeDot: { r: 6 }
+              }
+            )
+          ] }) }) }) }, `dual-axis-${key}`);
         case "create_scatter_plot":
           console.log("[DEBUG] Rendering scatter plot");
           if (!args.data || !args.x_field || !args.y_field || !args.group_field) {
@@ -25486,26 +25630,50 @@ var AIAgentView = () => {
             acc[group].push(item);
             return acc;
           }, {});
-          const scatterColors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(ScatterChart, { children: [
-              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field, type: "number", name: args.x_field }),
-              /* @__PURE__ */ jsx(YAxis, { dataKey: args.y_field, type: "number", name: args.y_field }),
-              /* @__PURE__ */ jsx(Tooltip, { cursor: { strokeDasharray: "3 3" } }),
-              /* @__PURE__ */ jsx(Legend, {}),
-              Object.entries(groupedData).map(([group, data], index) => /* @__PURE__ */ jsx(
-                Scatter,
-                {
-                  name: group,
-                  data,
-                  fill: scatterColors[index % scatterColors.length]
-                },
-                group
-              ))
-            ] }) }),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `scatter-${key}`);
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ScatterChart, { margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: args.x_field,
+                type: "number",
+                name: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                dataKey: args.y_field,
+                type: "number",
+                name: args.y_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                cursor: { strokeDasharray: "3 3" },
+                content: /* @__PURE__ */ jsx(CustomTooltip, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            Object.entries(groupedData).map(([group, data], index) => /* @__PURE__ */ jsx(
+              Scatter,
+              {
+                name: group,
+                data,
+                fill: CHART_COLOR_PALETTE[index % CHART_COLOR_PALETTE.length]
+              },
+              group
+            ))
+          ] }) }) }) }, `scatter-${key}`);
         case "create_combo_chart":
           console.log("[DEBUG] Rendering combo chart");
           if (!args.data || !args.x_field || !args.bar_field || !args.line_field) {
@@ -25517,19 +25685,65 @@ var AIAgentView = () => {
             });
             return null;
           }
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(ComposedChart, { data: args.data, children: [
-              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field }),
-              /* @__PURE__ */ jsx(YAxis, { yAxisId: "left", orientation: "left" }),
-              /* @__PURE__ */ jsx(YAxis, { yAxisId: "right", orientation: "right" }),
-              /* @__PURE__ */ jsx(Tooltip, {}),
-              /* @__PURE__ */ jsx(Legend, {}),
-              /* @__PURE__ */ jsx(Bar, { yAxisId: "left", dataKey: args.bar_field, fill: "#3b82f6", name: args.bar_field }),
-              /* @__PURE__ */ jsx(Line, { yAxisId: "right", type: "monotone", dataKey: args.line_field, stroke: "#ef4444", strokeWidth: 2, name: args.line_field })
-            ] }) }),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `combo-${key}`);
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ComposedChart, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                yAxisId: "left",
+                orientation: "left",
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                yAxisId: "right",
+                orientation: "right",
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(
+              Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Bar,
+              {
+                yAxisId: "left",
+                dataKey: args.bar_field,
+                fill: CHART_COLORS.primary,
+                name: args.bar_field,
+                radius: CHART_STYLES.barRadius
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Line,
+              {
+                yAxisId: "right",
+                type: "monotone",
+                dataKey: args.line_field,
+                stroke: CHART_COLORS.danger,
+                strokeWidth: 2,
+                name: args.line_field,
+                dot: { r: 4 },
+                activeDot: { r: 6 }
+              }
+            )
+          ] }) }) }) }, `combo-${key}`);
         case "create_area_chart":
           console.log("[DEBUG] Rendering area chart");
           if (!args.data || !args.x_field || !args.y_field) {
@@ -25540,27 +25754,48 @@ var AIAgentView = () => {
             });
             return null;
           }
-          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(ComposedChart, { data: args.data, children: [
-              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field }),
-              /* @__PURE__ */ jsx(YAxis, {}),
-              /* @__PURE__ */ jsx(Tooltip, {}),
-              /* @__PURE__ */ jsx(Legend, {}),
-              /* @__PURE__ */ jsx(
-                Area,
-                {
-                  type: "monotone",
-                  dataKey: args.y_field,
-                  stroke: "#3b82f6",
-                  fill: args.fill ? "#3b82f6" : "none",
-                  fillOpacity: args.fill ? 0.6 : 0,
-                  name: args.y_field
-                }
-              )
+          return /* @__PURE__ */ jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ComposedChart, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "colorGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: CHART_COLORS.primary, stopOpacity: 0.8 }),
+              /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: CHART_COLORS.primary, stopOpacity: 0.1 })
             ] }) }),
-            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `area-${key}`);
+            /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsx(
+              Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Area,
+              {
+                type: "monotone",
+                dataKey: args.y_field,
+                stroke: CHART_COLORS.primary,
+                strokeWidth: 2,
+                fill: args.fill !== false ? "url(#colorGradient)" : "none",
+                name: args.y_field,
+                dot: { r: 4, fill: CHART_COLORS.primary },
+                activeDot: { r: 6 }
+              }
+            )
+          ] }) }) }) }, `area-${key}`);
         default:
           console.warn(`Unknown chart type: ${chartType}`);
           return null;