dp-widgets-framework 1.2.5 → 1.2.7

package/dist/index.esm.js

@@ -15391,7 +15391,28 @@ function DataGrid({ title, data, className }) {
             return null;
         return (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { className: "border-b border-gray-200", children: [jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50 w-8" }), columns.map((column, index) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: column }, index)))] }) }), jsxRuntimeExports.jsx("tbody", { children: grouping.sections.map((section, sectionIndex) => {
                         const isExpanded = expandedGroups.has(section.group_value);
-                        return (jsxRuntimeExports.jsxs(React__default.Fragment, { children: [jsxRuntimeExports.jsxs("tr", { className: "bg-blue-50 border-b border-gray-200", children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3", children: section.collapsible && (jsxRuntimeExports.jsx("button", { onClick: () => toggleGroup(section.group_value), className: "flex items-center justify-center w-6 h-6 hover:bg-blue-100 rounded transition-colors", "aria-label": isExpanded ? "Collapse group" : "Expand group", children: isExpanded ? (jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4 text-blue-600" })) : (jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4 text-blue-600" })) })) }), jsxRuntimeExports.jsx("td", { colSpan: columns.length, className: "px-4 py-3 text-sm font-semibold text-blue-900", children: jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between", children: jsxRuntimeExports.jsxs("span", { children: [section.title, ": ", section.group_value, " (", section.row_count, " row", section.row_count !== 1 ? "s" : "", ")"] }) }) })] }), (!section.collapsible || isExpanded) && section.rows.map((row, rowIndex) => (jsxRuntimeExports.jsxs("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
+                        return (jsxRuntimeExports.jsxs(React__default.Fragment, { children: [jsxRuntimeExports.jsxs("tr", { className: "bg-blue-50 border-b border-gray-200", children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3", children: section.collapsible && (jsxRuntimeExports.jsx("button", { onClick: () => toggleGroup(section.group_value), className: "flex items-center justify-center w-6 h-6 hover:bg-blue-100 rounded transition-colors", "aria-label": isExpanded ? "Collapse group" : "Expand group", children: isExpanded ? (jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4 text-blue-600" })) : (jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4 text-blue-600" })) })) }), columns.map((column, columnIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm font-medium text-blue-700", children: columnIndex === 0 ? (jsxRuntimeExports.jsxs("span", { className: "font-semibold text-blue-900", children: [section.title, ": ", section.group_value] })) : (jsxRuntimeExports.jsx("div", { className: "text-left", children: (() => {
+                                                    var _a;
+                                                    // Find the statistic for this column
+                                                    const sectionStats = (_a = grouping.section_statistics) === null || _a === void 0 ? void 0 : _a[section.group_value];
+                                                    if (!sectionStats)
+                                                        return jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "\u2014" });
+                                                    // Look for exact column name match first
+                                                    if (sectionStats[column] &&
+                                                        typeof sectionStats[column].total === 'number' &&
+                                                        !isNaN(sectionStats[column].total)) {
+                                                        return (jsxRuntimeExports.jsx("span", { className: "whitespace-nowrap text-xs font-medium text-blue-800", children: sectionStats[column].total.toLocaleString() }));
+                                                    }
+                                                    // If exact match fails, try to find by partial match
+                                                    const matchingKey = Object.keys(sectionStats).find(key => key.toLowerCase().includes(column.toLowerCase()) ||
+                                                        column.toLowerCase().includes(key.toLowerCase()));
+                                                    if (matchingKey && sectionStats[matchingKey] &&
+                                                        typeof sectionStats[matchingKey].total === 'number' &&
+                                                        !isNaN(sectionStats[matchingKey].total)) {
+                                                        return (jsxRuntimeExports.jsx("span", { className: "whitespace-nowrap text-xs font-medium text-blue-800", children: sectionStats[matchingKey].total.toLocaleString() }));
+                                                    }
+                                                    return jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "\u2014" });
+                                                })() })) }, columnIndex)))] }), (!section.collapsible || isExpanded) && section.rows.map((row, rowIndex) => (jsxRuntimeExports.jsxs("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
                                         ? "bg-white"
                                         : "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3" }), row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: cell !== null && cell !== undefined ? String(cell) : "—" }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
                     }) })] }));
@@ -15399,15 +15420,19 @@ function DataGrid({ title, data, className }) {
     const renderRegularTable = () => (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsx("tr", { className: "border-b border-gray-200", children: columns.map((column, index) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: column }, index))) }) }), jsxRuntimeExports.jsx("tbody", { children: rows.map((row, rowIndex) => (jsxRuntimeExports.jsx("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
                         ? "bg-white"
                         : "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: cell !== null && cell !== undefined ? String(cell) : "—" }, cellIndex))) }, rowIndex))) })] }));
-    const getTotalRowCount = () => {
-        if (grouped && (grouping === null || grouping === void 0 ? void 0 : grouping.sections)) {
-            return grouping.sections.reduce((total, section) => total + section.row_count, 0);
-        }
-        return rows.length;
-    };
     return (jsxRuntimeExports.jsxs("div", { className: `h-full flex flex-col ${className || ""}`, children: [title && (jsxRuntimeExports.jsx("div", { className: "pb-4", children: jsxRuntimeExports.jsx("h3", { className: "text-lg font-bold", style: {
                         color: "#0F172A"
-                    }, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: jsxRuntimeExports.jsx("div", { className: "min-w-full", children: grouped && grouping ? renderGroupedTable() : renderRegularTable() }) }), jsxRuntimeExports.jsx("div", { className: "pt-2 text-xs text-gray-500", children: grouped && grouping ? (jsxRuntimeExports.jsxs("span", { children: ["Showing ", getTotalRowCount(), " row", getTotalRowCount() !== 1 ? "s" : "", " in ", grouping.total_groups, " group", grouping.total_groups !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] })) : (jsxRuntimeExports.jsxs("span", { children: ["Showing ", rows.length, " row", rows.length !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] })) })] }));
+                    }, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: jsxRuntimeExports.jsx("div", { className: "min-w-full", children: grouped && grouping ? renderGroupedTable() : renderRegularTable() }) }), jsxRuntimeExports.jsx("div", { className: "pt-2 text-xs text-gray-500", children: grouped && grouping && grouping.section_statistics ? (jsxRuntimeExports.jsxs("div", { className: "flex gap-6", children: [jsxRuntimeExports.jsxs("span", { children: [grouping.total_groups, " group", grouping.total_groups !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] }), jsxRuntimeExports.jsx("div", { className: "flex gap-4", children: (() => {
+                                const totals = {};
+                                Object.values(grouping.section_statistics).forEach(groupStats => {
+                                    Object.entries(groupStats).forEach(([column, stats]) => {
+                                        if (typeof stats.total === 'number' && !isNaN(stats.total)) {
+                                            totals[column] = (totals[column] || 0) + stats.total;
+                                        }
+                                    });
+                                });
+                                return Object.entries(totals).map(([column, total], index) => (jsxRuntimeExports.jsxs("span", { className: "font-medium", children: ["Total ", column, ": ", total.toLocaleString()] }, index)));
+                            })() })] })) : (jsxRuntimeExports.jsxs("span", { children: ["Showing ", rows.length, " row", rows.length !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] })) })] }));
 }
 
 function ok$1() {}
@@ -36093,7 +36118,7 @@ const clearChat = async (widgetBackendUrl, widgetId) => {
         console.error('Failed to clear chat:', error);
     }
 };
-const createLoadingComponent = (message = "Loading chart data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(RefreshCw, { className: "h-6 w-6 animate-spin text-blue-500" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
+const createLoadingComponent = (message = "Loading chart data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(RefreshCw, { className: "h-6 w-6 animate-spin text-gray-800" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
 const createInitialChartState = (agentType, widgetIds, datasetId) => {
     const baseState = { dataset_id: datasetId || "home_generation_dataset" };
     switch (agentType) {
@@ -36949,7 +36974,6 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
     };
     if (!isOpen)
         return null;
-    console.log(editingWidget, "==> editingWidget");
     return (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Edit Widget", size: "lg", 
         // initialFocusRef={inputRef}
         noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700", children: "Customize the widget\u2019s appearance" }), jsxRuntimeExports.jsx("div", { className: "pt-7", children: (editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.type) === "text" ?
@@ -36963,6 +36987,10 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
     const [selectedWidgetType, setSelectedWidgetType] = useState(null);
     const [query, setQuery] = useState('');
     const [showConfigStep, setShowConfigStep] = useState(false);
+    const [displayText, setDisplayText] = useState("Text goes here...");
+    const [blockType, setBlockType] = useState("paragraph");
+    const [alignment, setAlignment] = useState("left");
+    const [divider, setDivider] = useState("no");
     const widgetOptions = [
         // {
         //   type: 'bar-chart',
@@ -36976,7 +37004,7 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
             title: 'Text Widget',
             icon: Type,
             description: 'Add headings or paragraphs to your dashboard',
-            configRequired: false
+            configRequired: true
         },
         {
             type: 'spacer',
@@ -37043,14 +37071,9 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         }
         else {
             // For chatbot and text widget, create the default config
-            const config = Object.assign({ agentName: defaultAgentName }, (widgetType === "text" && {
-                content: {
-                    displayText: "Text goes here...",
-                    blockType: "paragraph",
-                    divider: "no",
-                },
-                styles: { textAlign: "left" }
-            }));
+            const config = {
+                agentName: defaultAgentName,
+            };
             handleAddWidget(widgetType, config);
         }
     };
@@ -37126,7 +37149,16 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         }
         else if (selectedWidgetType === 'text') {
             config = {
-                agentName: defaultAgentName
+                agentName: defaultAgentName,
+                agentType: "Text Agent",
+                content: {
+                    displayText,
+                    blockType,
+                    divider
+                },
+                styles: Object.assign({}, (alignment && alignment.length > 0
+                    ? { textAlign: alignment }
+                    : {})),
             };
         }
         else {
@@ -37134,7 +37166,8 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
                 agentName: defaultAgentName
             };
         }
-        handleAddWidget('agent', config);
+        const type = selectedWidgetType === 'text' ? selectedWidgetType : "agent";
+        handleAddWidget(type, config);
     };
     const resetModal = () => {
         setSelectedWidgetType(null);
@@ -37150,7 +37183,7 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
                                 return (jsxRuntimeExports.jsxs("button", { onClick: () => handleWidgetSelect(widget.type), className: "flex items-start gap-3 p-4 border border-slate-200 rounded-lg hover:bg-gray-50 transition-colors text-left", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 p-2 bg-primary-100 rounded-md", children: jsxRuntimeExports.jsx(IconComponent, { className: "w-5 h-5 text-primary-600" }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("h3", { className: "font-medium text-sm", children: widget.title }), jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 !mt-1", children: widget.description })] })] }, widget.type));
                             }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-2", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: selectedWidgetType === 'chatbot'
                                     ? 'Chatbot widget will be configured with the default agent.'
-                                    : 'Enter a query for your chart widget:' }) }), (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && (jsxRuntimeExports.jsx("div", { className: "mb-6", children: jsxRuntimeExports.jsx(Textarea, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "e.g., List out the product types by its count and render it on bar chart", className: "w-full h-24 resize-none" }) })), jsxRuntimeExports.jsxs("div", { className: "flex gap-3 justify-end", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => setShowConfigStep(false), children: "Back" }), jsxRuntimeExports.jsx(Button, { onClick: handleConfigSubmit, disabled: (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && !query.trim(), children: "Add Widget" })] })] })) }) }) }));
+                                    : selectedWidgetType === 'text' ? "Customize the widget's appearance" : 'Enter a query for your chart widget:' }) }), (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && (jsxRuntimeExports.jsx("div", { className: "mb-6", children: jsxRuntimeExports.jsx(Textarea, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "e.g., List out the product types by its count and render it on bar chart", className: "w-full h-24 resize-none" }) })), selectedWidgetType === 'text' && (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5 pb-5 pt-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }), jsxRuntimeExports.jsx(Input, { value: displayText, onChange: (e) => setDisplayText(e.target.value), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }), jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }), jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }), jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }), jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }), jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }), jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })] })] })] })] })), jsxRuntimeExports.jsxs("div", { className: "flex gap-3 justify-end", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => setShowConfigStep(false), children: "Back" }), jsxRuntimeExports.jsx(Button, { onClick: handleConfigSubmit, disabled: (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && !query.trim(), children: "Add Widget" })] })] })) }) }) }));
 }
 
 const RGL = WidthProvider(Responsive);
@@ -37323,7 +37356,6 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 throw new Error("Failed to load page data");
             }
             const data = await response.json();
-            console.log(data);
             setPageData(data);
             setWidgets(data.widgets || []);
             setDatasetId(data === null || data === void 0 ? void 0 : data.dataset_id);

package/dist/index.js

@@ -15418,7 +15418,28 @@ function DataGrid({ title, data, className }) {
             return null;
         return (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { className: "border-b border-gray-200", children: [jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50 w-8" }), columns.map((column, index) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: column }, index)))] }) }), jsxRuntimeExports.jsx("tbody", { children: grouping.sections.map((section, sectionIndex) => {
                         const isExpanded = expandedGroups.has(section.group_value);
-                        return (jsxRuntimeExports.jsxs(React.Fragment, { children: [jsxRuntimeExports.jsxs("tr", { className: "bg-blue-50 border-b border-gray-200", children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3", children: section.collapsible && (jsxRuntimeExports.jsx("button", { onClick: () => toggleGroup(section.group_value), className: "flex items-center justify-center w-6 h-6 hover:bg-blue-100 rounded transition-colors", "aria-label": isExpanded ? "Collapse group" : "Expand group", children: isExpanded ? (jsxRuntimeExports.jsx(lucideReact.ChevronDown, { className: "w-4 h-4 text-blue-600" })) : (jsxRuntimeExports.jsx(lucideReact.ChevronRight, { className: "w-4 h-4 text-blue-600" })) })) }), jsxRuntimeExports.jsx("td", { colSpan: columns.length, className: "px-4 py-3 text-sm font-semibold text-blue-900", children: jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between", children: jsxRuntimeExports.jsxs("span", { children: [section.title, ": ", section.group_value, " (", section.row_count, " row", section.row_count !== 1 ? "s" : "", ")"] }) }) })] }), (!section.collapsible || isExpanded) && section.rows.map((row, rowIndex) => (jsxRuntimeExports.jsxs("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
+                        return (jsxRuntimeExports.jsxs(React.Fragment, { children: [jsxRuntimeExports.jsxs("tr", { className: "bg-blue-50 border-b border-gray-200", children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3", children: section.collapsible && (jsxRuntimeExports.jsx("button", { onClick: () => toggleGroup(section.group_value), className: "flex items-center justify-center w-6 h-6 hover:bg-blue-100 rounded transition-colors", "aria-label": isExpanded ? "Collapse group" : "Expand group", children: isExpanded ? (jsxRuntimeExports.jsx(lucideReact.ChevronDown, { className: "w-4 h-4 text-blue-600" })) : (jsxRuntimeExports.jsx(lucideReact.ChevronRight, { className: "w-4 h-4 text-blue-600" })) })) }), columns.map((column, columnIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm font-medium text-blue-700", children: columnIndex === 0 ? (jsxRuntimeExports.jsxs("span", { className: "font-semibold text-blue-900", children: [section.title, ": ", section.group_value] })) : (jsxRuntimeExports.jsx("div", { className: "text-left", children: (() => {
+                                                    var _a;
+                                                    // Find the statistic for this column
+                                                    const sectionStats = (_a = grouping.section_statistics) === null || _a === void 0 ? void 0 : _a[section.group_value];
+                                                    if (!sectionStats)
+                                                        return jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "\u2014" });
+                                                    // Look for exact column name match first
+                                                    if (sectionStats[column] &&
+                                                        typeof sectionStats[column].total === 'number' &&
+                                                        !isNaN(sectionStats[column].total)) {
+                                                        return (jsxRuntimeExports.jsx("span", { className: "whitespace-nowrap text-xs font-medium text-blue-800", children: sectionStats[column].total.toLocaleString() }));
+                                                    }
+                                                    // If exact match fails, try to find by partial match
+                                                    const matchingKey = Object.keys(sectionStats).find(key => key.toLowerCase().includes(column.toLowerCase()) ||
+                                                        column.toLowerCase().includes(key.toLowerCase()));
+                                                    if (matchingKey && sectionStats[matchingKey] &&
+                                                        typeof sectionStats[matchingKey].total === 'number' &&
+                                                        !isNaN(sectionStats[matchingKey].total)) {
+                                                        return (jsxRuntimeExports.jsx("span", { className: "whitespace-nowrap text-xs font-medium text-blue-800", children: sectionStats[matchingKey].total.toLocaleString() }));
+                                                    }
+                                                    return jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "\u2014" });
+                                                })() })) }, columnIndex)))] }), (!section.collapsible || isExpanded) && section.rows.map((row, rowIndex) => (jsxRuntimeExports.jsxs("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
                                         ? "bg-white"
                                         : "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3" }), row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: cell !== null && cell !== undefined ? String(cell) : "—" }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
                     }) })] }));
@@ -15426,15 +15447,19 @@ function DataGrid({ title, data, className }) {
     const renderRegularTable = () => (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsx("tr", { className: "border-b border-gray-200", children: columns.map((column, index) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: column }, index))) }) }), jsxRuntimeExports.jsx("tbody", { children: rows.map((row, rowIndex) => (jsxRuntimeExports.jsx("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
                         ? "bg-white"
                         : "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: cell !== null && cell !== undefined ? String(cell) : "—" }, cellIndex))) }, rowIndex))) })] }));
-    const getTotalRowCount = () => {
-        if (grouped && (grouping === null || grouping === void 0 ? void 0 : grouping.sections)) {
-            return grouping.sections.reduce((total, section) => total + section.row_count, 0);
-        }
-        return rows.length;
-    };
     return (jsxRuntimeExports.jsxs("div", { className: `h-full flex flex-col ${className || ""}`, children: [title && (jsxRuntimeExports.jsx("div", { className: "pb-4", children: jsxRuntimeExports.jsx("h3", { className: "text-lg font-bold", style: {
                         color: "#0F172A"
-                    }, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: jsxRuntimeExports.jsx("div", { className: "min-w-full", children: grouped && grouping ? renderGroupedTable() : renderRegularTable() }) }), jsxRuntimeExports.jsx("div", { className: "pt-2 text-xs text-gray-500", children: grouped && grouping ? (jsxRuntimeExports.jsxs("span", { children: ["Showing ", getTotalRowCount(), " row", getTotalRowCount() !== 1 ? "s" : "", " in ", grouping.total_groups, " group", grouping.total_groups !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] })) : (jsxRuntimeExports.jsxs("span", { children: ["Showing ", rows.length, " row", rows.length !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] })) })] }));
+                    }, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: jsxRuntimeExports.jsx("div", { className: "min-w-full", children: grouped && grouping ? renderGroupedTable() : renderRegularTable() }) }), jsxRuntimeExports.jsx("div", { className: "pt-2 text-xs text-gray-500", children: grouped && grouping && grouping.section_statistics ? (jsxRuntimeExports.jsxs("div", { className: "flex gap-6", children: [jsxRuntimeExports.jsxs("span", { children: [grouping.total_groups, " group", grouping.total_groups !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] }), jsxRuntimeExports.jsx("div", { className: "flex gap-4", children: (() => {
+                                const totals = {};
+                                Object.values(grouping.section_statistics).forEach(groupStats => {
+                                    Object.entries(groupStats).forEach(([column, stats]) => {
+                                        if (typeof stats.total === 'number' && !isNaN(stats.total)) {
+                                            totals[column] = (totals[column] || 0) + stats.total;
+                                        }
+                                    });
+                                });
+                                return Object.entries(totals).map(([column, total], index) => (jsxRuntimeExports.jsxs("span", { className: "font-medium", children: ["Total ", column, ": ", total.toLocaleString()] }, index)));
+                            })() })] })) : (jsxRuntimeExports.jsxs("span", { children: ["Showing ", rows.length, " row", rows.length !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] })) })] }));
 }
 
 function ok$1() {}
@@ -36120,7 +36145,7 @@ const clearChat = async (widgetBackendUrl, widgetId) => {
         console.error('Failed to clear chat:', error);
     }
 };
-const createLoadingComponent = (message = "Loading chart data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.RefreshCw, { className: "h-6 w-6 animate-spin text-blue-500" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
+const createLoadingComponent = (message = "Loading chart data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.RefreshCw, { className: "h-6 w-6 animate-spin text-gray-800" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
 const createInitialChartState = (agentType, widgetIds, datasetId) => {
     const baseState = { dataset_id: datasetId || "home_generation_dataset" };
     switch (agentType) {
@@ -36976,7 +37001,6 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
     };
     if (!isOpen)
         return null;
-    console.log(editingWidget, "==> editingWidget");
     return (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Edit Widget", size: "lg", 
         // initialFocusRef={inputRef}
         noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700", children: "Customize the widget\u2019s appearance" }), jsxRuntimeExports.jsx("div", { className: "pt-7", children: (editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.type) === "text" ?
@@ -36990,6 +37014,10 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
     const [selectedWidgetType, setSelectedWidgetType] = React.useState(null);
     const [query, setQuery] = React.useState('');
     const [showConfigStep, setShowConfigStep] = React.useState(false);
+    const [displayText, setDisplayText] = React.useState("Text goes here...");
+    const [blockType, setBlockType] = React.useState("paragraph");
+    const [alignment, setAlignment] = React.useState("left");
+    const [divider, setDivider] = React.useState("no");
     const widgetOptions = [
         // {
         //   type: 'bar-chart',
@@ -37003,7 +37031,7 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
             title: 'Text Widget',
             icon: lucideReact.Type,
             description: 'Add headings or paragraphs to your dashboard',
-            configRequired: false
+            configRequired: true
         },
         {
             type: 'spacer',
@@ -37070,14 +37098,9 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         }
         else {
             // For chatbot and text widget, create the default config
-            const config = Object.assign({ agentName: defaultAgentName }, (widgetType === "text" && {
-                content: {
-                    displayText: "Text goes here...",
-                    blockType: "paragraph",
-                    divider: "no",
-                },
-                styles: { textAlign: "left" }
-            }));
+            const config = {
+                agentName: defaultAgentName,
+            };
             handleAddWidget(widgetType, config);
         }
     };
@@ -37153,7 +37176,16 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         }
         else if (selectedWidgetType === 'text') {
             config = {
-                agentName: defaultAgentName
+                agentName: defaultAgentName,
+                agentType: "Text Agent",
+                content: {
+                    displayText,
+                    blockType,
+                    divider
+                },
+                styles: Object.assign({}, (alignment && alignment.length > 0
+                    ? { textAlign: alignment }
+                    : {})),
             };
         }
         else {
@@ -37161,7 +37193,8 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
                 agentName: defaultAgentName
             };
         }
-        handleAddWidget('agent', config);
+        const type = selectedWidgetType === 'text' ? selectedWidgetType : "agent";
+        handleAddWidget(type, config);
     };
     const resetModal = () => {
         setSelectedWidgetType(null);
@@ -37177,7 +37210,7 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
                                 return (jsxRuntimeExports.jsxs("button", { onClick: () => handleWidgetSelect(widget.type), className: "flex items-start gap-3 p-4 border border-slate-200 rounded-lg hover:bg-gray-50 transition-colors text-left", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 p-2 bg-primary-100 rounded-md", children: jsxRuntimeExports.jsx(IconComponent, { className: "w-5 h-5 text-primary-600" }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("h3", { className: "font-medium text-sm", children: widget.title }), jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 !mt-1", children: widget.description })] })] }, widget.type));
                             }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-2", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: selectedWidgetType === 'chatbot'
                                     ? 'Chatbot widget will be configured with the default agent.'
-                                    : 'Enter a query for your chart widget:' }) }), (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && (jsxRuntimeExports.jsx("div", { className: "mb-6", children: jsxRuntimeExports.jsx(Textarea, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "e.g., List out the product types by its count and render it on bar chart", className: "w-full h-24 resize-none" }) })), jsxRuntimeExports.jsxs("div", { className: "flex gap-3 justify-end", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => setShowConfigStep(false), children: "Back" }), jsxRuntimeExports.jsx(Button, { onClick: handleConfigSubmit, disabled: (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && !query.trim(), children: "Add Widget" })] })] })) }) }) }));
+                                    : selectedWidgetType === 'text' ? "Customize the widget's appearance" : 'Enter a query for your chart widget:' }) }), (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && (jsxRuntimeExports.jsx("div", { className: "mb-6", children: jsxRuntimeExports.jsx(Textarea, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "e.g., List out the product types by its count and render it on bar chart", className: "w-full h-24 resize-none" }) })), selectedWidgetType === 'text' && (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5 pb-5 pt-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }), jsxRuntimeExports.jsx(Input, { value: displayText, onChange: (e) => setDisplayText(e.target.value), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }), jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }), jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }), jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }), jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }), jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }), jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })] })] })] })] })), jsxRuntimeExports.jsxs("div", { className: "flex gap-3 justify-end", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => setShowConfigStep(false), children: "Back" }), jsxRuntimeExports.jsx(Button, { onClick: handleConfigSubmit, disabled: (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && !query.trim(), children: "Add Widget" })] })] })) }) }) }));
 }
 
 const RGL = reactGridLayout.WidthProvider(reactGridLayout.Responsive);
@@ -37350,7 +37383,6 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 throw new Error("Failed to load page data");
             }
             const data = await response.json();
-            console.log(data);
             setPageData(data);
             setWidgets(data.widgets || []);
             setDatasetId(data === null || data === void 0 ? void 0 : data.dataset_id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dp-widgets-framework",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"