@optifye/dashboard-core 4.3.5 → 4.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +409 -174
- package/dist/index.mjs +409 -174
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -24456,6 +24456,7 @@ var AIAgentView = () => {
|
|
|
24456
24456
|
const entityConfig = useEntityConfig();
|
|
24457
24457
|
const dateTimeConfig = useDateTimeConfig();
|
|
24458
24458
|
const shiftConfig = useShiftConfig();
|
|
24459
|
+
const { formatNumber } = useFormatNumber();
|
|
24459
24460
|
const [inputValue, setInputValue] = React14.useState("");
|
|
24460
24461
|
const [loadingThreads, setLoadingThreads] = React14.useState(/* @__PURE__ */ new Set());
|
|
24461
24462
|
const [lastError, setLastError] = React14.useState(null);
|
|
@@ -25282,71 +25283,142 @@ var AIAgentView = () => {
|
|
|
25282
25283
|
};
|
|
25283
25284
|
const renderChart = (chartType, args, key) => {
|
|
25284
25285
|
console.log(`[DEBUG] Attempting to render chart type: ${chartType}`, args);
|
|
25286
|
+
const CHART_COLORS = {
|
|
25287
|
+
primary: "#3b82f6",
|
|
25288
|
+
// blue-500
|
|
25289
|
+
secondary: "#10b981",
|
|
25290
|
+
// green-500
|
|
25291
|
+
accent: "#f59e0b",
|
|
25292
|
+
// amber-500
|
|
25293
|
+
danger: "#ef4444",
|
|
25294
|
+
// red-500
|
|
25295
|
+
violet: "#8b5cf6",
|
|
25296
|
+
// violet-500
|
|
25297
|
+
cyan: "#06b6d4",
|
|
25298
|
+
// cyan-500
|
|
25299
|
+
orange: "#f97316",
|
|
25300
|
+
// orange-500
|
|
25301
|
+
indigo: "#6366f1"
|
|
25302
|
+
// indigo-500
|
|
25303
|
+
};
|
|
25304
|
+
const CHART_COLOR_PALETTE = Object.values(CHART_COLORS);
|
|
25305
|
+
const CHART_STYLES = {
|
|
25306
|
+
grid: {
|
|
25307
|
+
strokeDasharray: "3 3",
|
|
25308
|
+
stroke: "#e5e7eb"
|
|
25309
|
+
// gray-300
|
|
25310
|
+
},
|
|
25311
|
+
axis: {
|
|
25312
|
+
tick: { fontSize: 12, fill: "#4b5563" },
|
|
25313
|
+
// gray-600
|
|
25314
|
+
stroke: "#9ca3af"
|
|
25315
|
+
// gray-400
|
|
25316
|
+
},
|
|
25317
|
+
margin: { top: 10, right: 30, left: 20, bottom: 40 },
|
|
25318
|
+
barRadius: [4, 4, 0, 0]
|
|
25319
|
+
// Top corners rounded
|
|
25320
|
+
};
|
|
25321
|
+
const CustomTooltip = ({ active, payload, label }) => {
|
|
25322
|
+
if (active && payload && payload.length) {
|
|
25323
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white px-4 py-3 shadow-lg rounded-lg border border-gray-200", children: [
|
|
25324
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 mb-1", children: label }),
|
|
25325
|
+
payload.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600", style: { color: entry.color }, children: [
|
|
25326
|
+
entry.name,
|
|
25327
|
+
": ",
|
|
25328
|
+
typeof entry.value === "number" ? formatNumber(entry.value) : entry.value,
|
|
25329
|
+
args.unit || ""
|
|
25330
|
+
] }, index))
|
|
25331
|
+
] });
|
|
25332
|
+
}
|
|
25333
|
+
return null;
|
|
25334
|
+
};
|
|
25335
|
+
const ChartWrapper = ({ children, title }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 bg-white rounded-xl shadow-sm border border-gray-200 p-6", children: [
|
|
25336
|
+
title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-900 mb-4", children: title }),
|
|
25337
|
+
children
|
|
25338
|
+
] });
|
|
25285
25339
|
switch (chartType) {
|
|
25286
25340
|
case "create_gauge_chart":
|
|
25287
25341
|
console.log("[DEBUG] Rendering gauge chart");
|
|
25288
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "
|
|
25342
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 w-full flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
25289
25343
|
GaugeChart,
|
|
25290
25344
|
{
|
|
25291
25345
|
value: args.value || 0,
|
|
25292
25346
|
min: args.min_value || 0,
|
|
25293
25347
|
max: args.max_value || 100,
|
|
25294
25348
|
target: args.target,
|
|
25295
|
-
label: args.
|
|
25349
|
+
label: args.label || "",
|
|
25296
25350
|
unit: args.unit || "",
|
|
25297
25351
|
thresholds: args.thresholds,
|
|
25298
25352
|
className: "w-full max-w-sm"
|
|
25299
25353
|
}
|
|
25300
|
-
) }, `gauge-${key}`);
|
|
25354
|
+
) }) }, `gauge-${key}`);
|
|
25301
25355
|
case "create_bar_chart":
|
|
25302
25356
|
console.log("[DEBUG] Rendering bar chart");
|
|
25303
25357
|
if (!args.data || !args.x_field || !args.y_field) {
|
|
25304
25358
|
console.error("Bar chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
|
|
25305
25359
|
return null;
|
|
25306
25360
|
}
|
|
25307
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
25361
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-64", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data: args.data, margin: CHART_STYLES.margin, children: [
|
|
25362
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
|
|
25308
25363
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25309
|
-
|
|
25364
|
+
recharts.XAxis,
|
|
25310
25365
|
{
|
|
25311
|
-
|
|
25312
|
-
|
|
25313
|
-
dataKey: args.y_field,
|
|
25314
|
-
fill: args.color || "#3b82f6",
|
|
25315
|
-
labelList: args.show_values
|
|
25316
|
-
}],
|
|
25317
|
-
xAxisDataKey: args.x_field,
|
|
25318
|
-
className: "h-64",
|
|
25319
|
-
showLegend: false
|
|
25366
|
+
dataKey: args.x_field,
|
|
25367
|
+
...CHART_STYLES.axis
|
|
25320
25368
|
}
|
|
25321
25369
|
),
|
|
25322
|
-
|
|
25323
|
-
|
|
25370
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25371
|
+
recharts.YAxis,
|
|
25372
|
+
{
|
|
25373
|
+
...CHART_STYLES.axis,
|
|
25374
|
+
tickFormatter: (value) => formatNumber(value)
|
|
25375
|
+
}
|
|
25376
|
+
),
|
|
25377
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
|
|
25378
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25379
|
+
recharts.Bar,
|
|
25380
|
+
{
|
|
25381
|
+
dataKey: args.y_field,
|
|
25382
|
+
fill: args.color || CHART_COLORS.primary,
|
|
25383
|
+
radius: CHART_STYLES.barRadius
|
|
25384
|
+
}
|
|
25385
|
+
)
|
|
25386
|
+
] }) }) }) }, `bar-${key}`);
|
|
25324
25387
|
case "create_line_chart":
|
|
25325
25388
|
console.log("[DEBUG] Rendering line chart");
|
|
25326
25389
|
if (!args.data || !args.x_field || !args.y_field) {
|
|
25327
25390
|
console.error("Line chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
|
|
25328
25391
|
return null;
|
|
25329
25392
|
}
|
|
25330
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
25331
|
-
|
|
25332
|
-
width: args.width || "100%"
|
|
25333
|
-
}, children: [
|
|
25393
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-64", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data: args.data, margin: CHART_STYLES.margin, children: [
|
|
25394
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
|
|
25334
25395
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25335
|
-
|
|
25396
|
+
recharts.XAxis,
|
|
25397
|
+
{
|
|
25398
|
+
dataKey: args.x_field,
|
|
25399
|
+
...CHART_STYLES.axis
|
|
25400
|
+
}
|
|
25401
|
+
),
|
|
25402
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25403
|
+
recharts.YAxis,
|
|
25336
25404
|
{
|
|
25337
|
-
|
|
25338
|
-
|
|
25339
|
-
dataKey: args.y_field,
|
|
25340
|
-
stroke: "#3b82f6",
|
|
25341
|
-
strokeWidth: 2
|
|
25342
|
-
}],
|
|
25343
|
-
xAxisDataKey: args.x_field,
|
|
25344
|
-
className: "h-full",
|
|
25345
|
-
showLegend: false
|
|
25405
|
+
...CHART_STYLES.axis,
|
|
25406
|
+
tickFormatter: (value) => formatNumber(value)
|
|
25346
25407
|
}
|
|
25347
25408
|
),
|
|
25348
|
-
|
|
25349
|
-
|
|
25409
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
|
|
25410
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25411
|
+
recharts.Line,
|
|
25412
|
+
{
|
|
25413
|
+
type: "monotone",
|
|
25414
|
+
dataKey: args.y_field,
|
|
25415
|
+
stroke: CHART_COLORS.primary,
|
|
25416
|
+
strokeWidth: 2,
|
|
25417
|
+
dot: { r: 4, fill: CHART_COLORS.primary },
|
|
25418
|
+
activeDot: { r: 6 }
|
|
25419
|
+
}
|
|
25420
|
+
)
|
|
25421
|
+
] }) }) }) }, `line-${key}`);
|
|
25350
25422
|
case "create_pie_chart":
|
|
25351
25423
|
console.log("[DEBUG] Rendering pie chart");
|
|
25352
25424
|
if (!args.data || !args.label_field || !args.value_field) {
|
|
@@ -25359,16 +25431,14 @@ var AIAgentView = () => {
|
|
|
25359
25431
|
value: item[args.value_field]
|
|
25360
25432
|
}));
|
|
25361
25433
|
console.log("[DEBUG] Pie chart data transformed:", pieData);
|
|
25362
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
25363
|
-
|
|
25364
|
-
|
|
25365
|
-
|
|
25366
|
-
|
|
25367
|
-
|
|
25368
|
-
|
|
25369
|
-
|
|
25370
|
-
) })
|
|
25371
|
-
] }, `pie-${key}`);
|
|
25434
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 w-full max-w-md mx-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
25435
|
+
PieChart4,
|
|
25436
|
+
{
|
|
25437
|
+
data: pieData,
|
|
25438
|
+
showPercentages: args.show_percentages || false,
|
|
25439
|
+
colors: CHART_COLOR_PALETTE
|
|
25440
|
+
}
|
|
25441
|
+
) }) }, `pie-${key}`);
|
|
25372
25442
|
case "create_comparison_table":
|
|
25373
25443
|
console.log("[DEBUG] Rendering comparison table");
|
|
25374
25444
|
if (!args.data) {
|
|
@@ -25385,27 +25455,24 @@ var AIAgentView = () => {
|
|
|
25385
25455
|
return args.sort_descending === false ? comparison : -comparison;
|
|
25386
25456
|
});
|
|
25387
25457
|
}
|
|
25388
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
25389
|
-
|
|
25390
|
-
|
|
25391
|
-
|
|
25392
|
-
"
|
|
25393
|
-
|
|
25394
|
-
|
|
25395
|
-
|
|
25396
|
-
|
|
25397
|
-
|
|
25398
|
-
|
|
25399
|
-
|
|
25400
|
-
"
|
|
25401
|
-
|
|
25402
|
-
|
|
25403
|
-
|
|
25404
|
-
|
|
25405
|
-
|
|
25406
|
-
)) }, rowIdx)) })
|
|
25407
|
-
] })
|
|
25408
|
-
] }, `table-${key}`);
|
|
25458
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded-lg border border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
|
|
25459
|
+
/* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
25460
|
+
"th",
|
|
25461
|
+
{
|
|
25462
|
+
className: `px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider ${col === args.highlight_column ? "bg-blue-50" : ""}`,
|
|
25463
|
+
children: col
|
|
25464
|
+
},
|
|
25465
|
+
col
|
|
25466
|
+
)) }) }),
|
|
25467
|
+
/* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: sortedData.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: rowIdx % 2 === 0 ? "bg-white" : "bg-gray-50", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
25468
|
+
"td",
|
|
25469
|
+
{
|
|
25470
|
+
className: `px-6 py-4 whitespace-nowrap text-sm ${col === args.highlight_column ? "font-medium text-blue-600 bg-blue-50" : "text-gray-900"}`,
|
|
25471
|
+
children: typeof row[col] === "number" ? formatNumber(row[col]) : row[col]
|
|
25472
|
+
},
|
|
25473
|
+
col
|
|
25474
|
+
)) }, rowIdx)) })
|
|
25475
|
+
] }) }) }, `table-${key}`);
|
|
25409
25476
|
case "create_multi_line_chart":
|
|
25410
25477
|
console.log("[DEBUG] Rendering multi-line chart");
|
|
25411
25478
|
if (!args.data || !args.x_field || !args.y_fields || !args.legend) {
|
|
@@ -25417,30 +25484,44 @@ var AIAgentView = () => {
|
|
|
25417
25484
|
});
|
|
25418
25485
|
return null;
|
|
25419
25486
|
}
|
|
25420
|
-
|
|
25421
|
-
|
|
25422
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25423
|
-
|
|
25424
|
-
|
|
25425
|
-
|
|
25426
|
-
|
|
25427
|
-
|
|
25428
|
-
|
|
25429
|
-
|
|
25430
|
-
|
|
25431
|
-
|
|
25432
|
-
|
|
25433
|
-
|
|
25434
|
-
|
|
25435
|
-
|
|
25436
|
-
|
|
25437
|
-
|
|
25438
|
-
|
|
25439
|
-
|
|
25440
|
-
|
|
25441
|
-
|
|
25442
|
-
|
|
25443
|
-
|
|
25487
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data: args.data, margin: CHART_STYLES.margin, children: [
|
|
25488
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
|
|
25489
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25490
|
+
recharts.XAxis,
|
|
25491
|
+
{
|
|
25492
|
+
dataKey: args.x_field,
|
|
25493
|
+
...CHART_STYLES.axis
|
|
25494
|
+
}
|
|
25495
|
+
),
|
|
25496
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25497
|
+
recharts.YAxis,
|
|
25498
|
+
{
|
|
25499
|
+
...CHART_STYLES.axis,
|
|
25500
|
+
tickFormatter: (value) => formatNumber(value)
|
|
25501
|
+
}
|
|
25502
|
+
),
|
|
25503
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
|
|
25504
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25505
|
+
recharts.Legend,
|
|
25506
|
+
{
|
|
25507
|
+
wrapperStyle: { paddingTop: "20px" },
|
|
25508
|
+
formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
|
|
25509
|
+
}
|
|
25510
|
+
),
|
|
25511
|
+
args.y_fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
25512
|
+
recharts.Line,
|
|
25513
|
+
{
|
|
25514
|
+
type: "monotone",
|
|
25515
|
+
dataKey: field,
|
|
25516
|
+
stroke: CHART_COLOR_PALETTE[index % CHART_COLOR_PALETTE.length],
|
|
25517
|
+
strokeWidth: 2,
|
|
25518
|
+
name: args.legend[index] || field,
|
|
25519
|
+
dot: { r: 4 },
|
|
25520
|
+
activeDot: { r: 6 }
|
|
25521
|
+
},
|
|
25522
|
+
field
|
|
25523
|
+
))
|
|
25524
|
+
] }) }) }) }, `multi-line-${key}`);
|
|
25444
25525
|
case "create_stacked_bar_chart":
|
|
25445
25526
|
console.log("[DEBUG] Rendering stacked bar chart");
|
|
25446
25527
|
if (!args.data || !args.x_field || !args.stack_fields) {
|
|
@@ -25451,27 +25532,42 @@ var AIAgentView = () => {
|
|
|
25451
25532
|
});
|
|
25452
25533
|
return null;
|
|
25453
25534
|
}
|
|
25454
|
-
|
|
25455
|
-
|
|
25456
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25457
|
-
|
|
25458
|
-
|
|
25459
|
-
|
|
25460
|
-
|
|
25461
|
-
|
|
25462
|
-
|
|
25463
|
-
|
|
25464
|
-
|
|
25465
|
-
|
|
25466
|
-
|
|
25467
|
-
|
|
25468
|
-
|
|
25469
|
-
|
|
25470
|
-
|
|
25471
|
-
|
|
25472
|
-
|
|
25473
|
-
|
|
25474
|
-
|
|
25535
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data: args.data, margin: CHART_STYLES.margin, children: [
|
|
25536
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
|
|
25537
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25538
|
+
recharts.XAxis,
|
|
25539
|
+
{
|
|
25540
|
+
dataKey: args.x_field,
|
|
25541
|
+
...CHART_STYLES.axis
|
|
25542
|
+
}
|
|
25543
|
+
),
|
|
25544
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25545
|
+
recharts.YAxis,
|
|
25546
|
+
{
|
|
25547
|
+
...CHART_STYLES.axis,
|
|
25548
|
+
tickFormatter: (value) => formatNumber(value)
|
|
25549
|
+
}
|
|
25550
|
+
),
|
|
25551
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
|
|
25552
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25553
|
+
recharts.Legend,
|
|
25554
|
+
{
|
|
25555
|
+
wrapperStyle: { paddingTop: "20px" },
|
|
25556
|
+
formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
|
|
25557
|
+
}
|
|
25558
|
+
),
|
|
25559
|
+
args.stack_fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
25560
|
+
recharts.Bar,
|
|
25561
|
+
{
|
|
25562
|
+
dataKey: field,
|
|
25563
|
+
stackId: "stack",
|
|
25564
|
+
fill: CHART_COLOR_PALETTE[index % CHART_COLOR_PALETTE.length],
|
|
25565
|
+
name: field,
|
|
25566
|
+
radius: index === args.stack_fields.length - 1 ? CHART_STYLES.barRadius : void 0
|
|
25567
|
+
},
|
|
25568
|
+
field
|
|
25569
|
+
))
|
|
25570
|
+
] }) }) }) }, `stacked-bar-${key}`);
|
|
25475
25571
|
case "create_dual_axis_chart":
|
|
25476
25572
|
console.log("[DEBUG] Rendering dual-axis chart");
|
|
25477
25573
|
if (!args.data || !args.x_field || !args.left_y_field || !args.right_y_field) {
|
|
@@ -25483,19 +25579,67 @@ var AIAgentView = () => {
|
|
|
25483
25579
|
});
|
|
25484
25580
|
return null;
|
|
25485
25581
|
}
|
|
25486
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
25487
|
-
/* @__PURE__ */ jsxRuntime.jsx(recharts.
|
|
25488
|
-
|
|
25489
|
-
|
|
25490
|
-
|
|
25491
|
-
|
|
25492
|
-
|
|
25493
|
-
|
|
25494
|
-
|
|
25495
|
-
|
|
25496
|
-
|
|
25497
|
-
|
|
25498
|
-
|
|
25582
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, margin: CHART_STYLES.margin, children: [
|
|
25583
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
|
|
25584
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25585
|
+
recharts.XAxis,
|
|
25586
|
+
{
|
|
25587
|
+
dataKey: args.x_field,
|
|
25588
|
+
...CHART_STYLES.axis
|
|
25589
|
+
}
|
|
25590
|
+
),
|
|
25591
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25592
|
+
recharts.YAxis,
|
|
25593
|
+
{
|
|
25594
|
+
yAxisId: "left",
|
|
25595
|
+
orientation: "left",
|
|
25596
|
+
label: { value: args.left_label || "", angle: -90, position: "insideLeft" },
|
|
25597
|
+
...CHART_STYLES.axis,
|
|
25598
|
+
tickFormatter: (value) => formatNumber(value)
|
|
25599
|
+
}
|
|
25600
|
+
),
|
|
25601
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25602
|
+
recharts.YAxis,
|
|
25603
|
+
{
|
|
25604
|
+
yAxisId: "right",
|
|
25605
|
+
orientation: "right",
|
|
25606
|
+
label: { value: args.right_label || "", angle: 90, position: "insideRight" },
|
|
25607
|
+
...CHART_STYLES.axis,
|
|
25608
|
+
tickFormatter: (value) => formatNumber(value)
|
|
25609
|
+
}
|
|
25610
|
+
),
|
|
25611
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
|
|
25612
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25613
|
+
recharts.Legend,
|
|
25614
|
+
{
|
|
25615
|
+
wrapperStyle: { paddingTop: "20px" },
|
|
25616
|
+
formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
|
|
25617
|
+
}
|
|
25618
|
+
),
|
|
25619
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25620
|
+
recharts.Bar,
|
|
25621
|
+
{
|
|
25622
|
+
yAxisId: "left",
|
|
25623
|
+
dataKey: args.left_y_field,
|
|
25624
|
+
fill: CHART_COLORS.primary,
|
|
25625
|
+
name: args.left_label || args.left_y_field,
|
|
25626
|
+
radius: CHART_STYLES.barRadius
|
|
25627
|
+
}
|
|
25628
|
+
),
|
|
25629
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25630
|
+
recharts.Line,
|
|
25631
|
+
{
|
|
25632
|
+
yAxisId: "right",
|
|
25633
|
+
type: "monotone",
|
|
25634
|
+
dataKey: args.right_y_field,
|
|
25635
|
+
stroke: CHART_COLORS.danger,
|
|
25636
|
+
strokeWidth: 2,
|
|
25637
|
+
name: args.right_label || args.right_y_field,
|
|
25638
|
+
dot: { r: 4 },
|
|
25639
|
+
activeDot: { r: 6 }
|
|
25640
|
+
}
|
|
25641
|
+
)
|
|
25642
|
+
] }) }) }) }, `dual-axis-${key}`);
|
|
25499
25643
|
case "create_scatter_plot":
|
|
25500
25644
|
console.log("[DEBUG] Rendering scatter plot");
|
|
25501
25645
|
if (!args.data || !args.x_field || !args.y_field || !args.group_field) {
|
|
@@ -25515,26 +25659,50 @@ var AIAgentView = () => {
|
|
|
25515
25659
|
acc[group].push(item);
|
|
25516
25660
|
return acc;
|
|
25517
25661
|
}, {});
|
|
25518
|
-
|
|
25519
|
-
|
|
25520
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25521
|
-
|
|
25522
|
-
|
|
25523
|
-
|
|
25524
|
-
|
|
25525
|
-
|
|
25526
|
-
|
|
25527
|
-
|
|
25528
|
-
|
|
25529
|
-
|
|
25530
|
-
|
|
25531
|
-
|
|
25532
|
-
|
|
25533
|
-
|
|
25534
|
-
|
|
25535
|
-
|
|
25536
|
-
|
|
25537
|
-
|
|
25662
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ScatterChart, { margin: CHART_STYLES.margin, children: [
|
|
25663
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
|
|
25664
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25665
|
+
recharts.XAxis,
|
|
25666
|
+
{
|
|
25667
|
+
dataKey: args.x_field,
|
|
25668
|
+
type: "number",
|
|
25669
|
+
name: args.x_field,
|
|
25670
|
+
...CHART_STYLES.axis
|
|
25671
|
+
}
|
|
25672
|
+
),
|
|
25673
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25674
|
+
recharts.YAxis,
|
|
25675
|
+
{
|
|
25676
|
+
dataKey: args.y_field,
|
|
25677
|
+
type: "number",
|
|
25678
|
+
name: args.y_field,
|
|
25679
|
+
...CHART_STYLES.axis
|
|
25680
|
+
}
|
|
25681
|
+
),
|
|
25682
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25683
|
+
recharts.Tooltip,
|
|
25684
|
+
{
|
|
25685
|
+
cursor: { strokeDasharray: "3 3" },
|
|
25686
|
+
content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {})
|
|
25687
|
+
}
|
|
25688
|
+
),
|
|
25689
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25690
|
+
recharts.Legend,
|
|
25691
|
+
{
|
|
25692
|
+
wrapperStyle: { paddingTop: "20px" },
|
|
25693
|
+
formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
|
|
25694
|
+
}
|
|
25695
|
+
),
|
|
25696
|
+
Object.entries(groupedData).map(([group, data], index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
25697
|
+
recharts.Scatter,
|
|
25698
|
+
{
|
|
25699
|
+
name: group,
|
|
25700
|
+
data,
|
|
25701
|
+
fill: CHART_COLOR_PALETTE[index % CHART_COLOR_PALETTE.length]
|
|
25702
|
+
},
|
|
25703
|
+
group
|
|
25704
|
+
))
|
|
25705
|
+
] }) }) }) }, `scatter-${key}`);
|
|
25538
25706
|
case "create_combo_chart":
|
|
25539
25707
|
console.log("[DEBUG] Rendering combo chart");
|
|
25540
25708
|
if (!args.data || !args.x_field || !args.bar_field || !args.line_field) {
|
|
@@ -25546,19 +25714,65 @@ var AIAgentView = () => {
|
|
|
25546
25714
|
});
|
|
25547
25715
|
return null;
|
|
25548
25716
|
}
|
|
25549
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
25550
|
-
/* @__PURE__ */ jsxRuntime.jsx(recharts.
|
|
25551
|
-
|
|
25552
|
-
|
|
25553
|
-
|
|
25554
|
-
|
|
25555
|
-
|
|
25556
|
-
|
|
25557
|
-
|
|
25558
|
-
|
|
25559
|
-
|
|
25560
|
-
|
|
25561
|
-
|
|
25717
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, margin: CHART_STYLES.margin, children: [
|
|
25718
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
|
|
25719
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25720
|
+
recharts.XAxis,
|
|
25721
|
+
{
|
|
25722
|
+
dataKey: args.x_field,
|
|
25723
|
+
...CHART_STYLES.axis
|
|
25724
|
+
}
|
|
25725
|
+
),
|
|
25726
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25727
|
+
recharts.YAxis,
|
|
25728
|
+
{
|
|
25729
|
+
yAxisId: "left",
|
|
25730
|
+
orientation: "left",
|
|
25731
|
+
...CHART_STYLES.axis,
|
|
25732
|
+
tickFormatter: (value) => formatNumber(value)
|
|
25733
|
+
}
|
|
25734
|
+
),
|
|
25735
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25736
|
+
recharts.YAxis,
|
|
25737
|
+
{
|
|
25738
|
+
yAxisId: "right",
|
|
25739
|
+
orientation: "right",
|
|
25740
|
+
...CHART_STYLES.axis,
|
|
25741
|
+
tickFormatter: (value) => formatNumber(value)
|
|
25742
|
+
}
|
|
25743
|
+
),
|
|
25744
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
|
|
25745
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25746
|
+
recharts.Legend,
|
|
25747
|
+
{
|
|
25748
|
+
wrapperStyle: { paddingTop: "20px" },
|
|
25749
|
+
formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
|
|
25750
|
+
}
|
|
25751
|
+
),
|
|
25752
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25753
|
+
recharts.Bar,
|
|
25754
|
+
{
|
|
25755
|
+
yAxisId: "left",
|
|
25756
|
+
dataKey: args.bar_field,
|
|
25757
|
+
fill: CHART_COLORS.primary,
|
|
25758
|
+
name: args.bar_field,
|
|
25759
|
+
radius: CHART_STYLES.barRadius
|
|
25760
|
+
}
|
|
25761
|
+
),
|
|
25762
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25763
|
+
recharts.Line,
|
|
25764
|
+
{
|
|
25765
|
+
yAxisId: "right",
|
|
25766
|
+
type: "monotone",
|
|
25767
|
+
dataKey: args.line_field,
|
|
25768
|
+
stroke: CHART_COLORS.danger,
|
|
25769
|
+
strokeWidth: 2,
|
|
25770
|
+
name: args.line_field,
|
|
25771
|
+
dot: { r: 4 },
|
|
25772
|
+
activeDot: { r: 6 }
|
|
25773
|
+
}
|
|
25774
|
+
)
|
|
25775
|
+
] }) }) }) }, `combo-${key}`);
|
|
25562
25776
|
case "create_area_chart":
|
|
25563
25777
|
console.log("[DEBUG] Rendering area chart");
|
|
25564
25778
|
if (!args.data || !args.x_field || !args.y_field) {
|
|
@@ -25569,27 +25783,48 @@ var AIAgentView = () => {
|
|
|
25569
25783
|
});
|
|
25570
25784
|
return null;
|
|
25571
25785
|
}
|
|
25572
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
25573
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25574
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25575
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25576
|
-
/* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
|
|
25577
|
-
/* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
|
|
25578
|
-
/* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
|
|
25579
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25580
|
-
recharts.Area,
|
|
25581
|
-
{
|
|
25582
|
-
type: "monotone",
|
|
25583
|
-
dataKey: args.y_field,
|
|
25584
|
-
stroke: "#3b82f6",
|
|
25585
|
-
fill: args.fill ? "#3b82f6" : "none",
|
|
25586
|
-
fillOpacity: args.fill ? 0.6 : 0,
|
|
25587
|
-
name: args.y_field
|
|
25588
|
-
}
|
|
25589
|
-
)
|
|
25786
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, margin: CHART_STYLES.margin, children: [
|
|
25787
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "colorGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
|
25788
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "5%", stopColor: CHART_COLORS.primary, stopOpacity: 0.8 }),
|
|
25789
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "95%", stopColor: CHART_COLORS.primary, stopOpacity: 0.1 })
|
|
25590
25790
|
] }) }),
|
|
25591
|
-
|
|
25592
|
-
|
|
25791
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
|
|
25792
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25793
|
+
recharts.XAxis,
|
|
25794
|
+
{
|
|
25795
|
+
dataKey: args.x_field,
|
|
25796
|
+
...CHART_STYLES.axis
|
|
25797
|
+
}
|
|
25798
|
+
),
|
|
25799
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25800
|
+
recharts.YAxis,
|
|
25801
|
+
{
|
|
25802
|
+
...CHART_STYLES.axis,
|
|
25803
|
+
tickFormatter: (value) => formatNumber(value)
|
|
25804
|
+
}
|
|
25805
|
+
),
|
|
25806
|
+
/* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
|
|
25807
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25808
|
+
recharts.Legend,
|
|
25809
|
+
{
|
|
25810
|
+
wrapperStyle: { paddingTop: "20px" },
|
|
25811
|
+
formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
|
|
25812
|
+
}
|
|
25813
|
+
),
|
|
25814
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
25815
|
+
recharts.Area,
|
|
25816
|
+
{
|
|
25817
|
+
type: "monotone",
|
|
25818
|
+
dataKey: args.y_field,
|
|
25819
|
+
stroke: CHART_COLORS.primary,
|
|
25820
|
+
strokeWidth: 2,
|
|
25821
|
+
fill: args.fill !== false ? "url(#colorGradient)" : "none",
|
|
25822
|
+
name: args.y_field,
|
|
25823
|
+
dot: { r: 4, fill: CHART_COLORS.primary },
|
|
25824
|
+
activeDot: { r: 6 }
|
|
25825
|
+
}
|
|
25826
|
+
)
|
|
25827
|
+
] }) }) }) }, `area-${key}`);
|
|
25593
25828
|
default:
|
|
25594
25829
|
console.warn(`Unknown chart type: ${chartType}`);
|
|
25595
25830
|
return null;
|