dp-widgets-framework 1.3.8 → 1.4.0

package/dist/index.esm.js

@@ -17652,7 +17652,6 @@ function DataGrid({ title, data, className }) {
     var _a;
     const { columns, rows, units, grouped = false, grouping } = data;
     const [expandedGroups, setExpandedGroups] = useState(new Set(((_a = grouping === null || grouping === void 0 ? void 0 : grouping.sections) === null || _a === void 0 ? void 0 : _a.filter(s => s.expanded).map(s => s.group_value)) || []));
-    console.log('units==>', units);
     const toggleGroup = (groupValue) => {
         const newExpanded = new Set(expandedGroups);
         if (newExpanded.has(groupValue)) {
@@ -17663,19 +17662,25 @@ function DataGrid({ title, data, className }) {
         }
         setExpandedGroups(newExpanded);
     };
+    const formatWithCommas = (value) => {
+        if (value == null || value === "")
+            return "";
+        let str = value.toString().trim();
+        let num = Number(str);
+        if (isNaN(num))
+            return str;
+        let [integer, decimal] = str.split(".");
+        integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        return decimal ? `${integer}.${decimal}` : integer;
+    };
     const formatValueWithUnit = (value, columnIndex) => {
         if (value === null || value === undefined)
             return "—";
         const unit = units === null || units === void 0 ? void 0 : units[columnIndex];
         // Format the value with commas if it's a number or numeric string
         let valueStr;
-        if (typeof value === 'number') {
-            valueStr = value.toLocaleString();
-        }
-        else {
-            const numValue = parseFloat(String(value));
-            valueStr = !isNaN(numValue) ? numValue.toLocaleString() : String(value);
-        }
+        valueStr = formatWithCommas(value);
+        console.log('value==>', valueStr, unit);
         // If no unit or unit length > 3, return value only
         if (!unit || unit.length > 3) {
             return valueStr;
@@ -17723,12 +17728,12 @@ function DataGrid({ title, data, className }) {
                                                     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: formatValueWithUnit(cell, cellIndex) }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
+                                        : "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 whitespace-nowrap", children: formatValueWithUnit(cell, cellIndex) }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
                     }) })] }));
     };
     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.jsxs("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: [column, (units === null || units === void 0 ? void 0 : units[index]) ? ` (${units[index]})` : ''] }, 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: formatValueWithUnit(cell, cellIndex) }, cellIndex))) }, rowIndex))) })] }));
+                        : "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 whitespace-nowrap", children: formatValueWithUnit(cell, cellIndex) }, cellIndex))) }, rowIndex))) })] }));
     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 && 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: (() => {
@@ -39999,22 +40004,17 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
             return true;
         })
             .map((widget) => {
-            const isText = widget.type === "text";
+            widget.type === "text";
             return {
                 i: widget.id,
                 x: widget.position_x,
                 y: widget.position_y,
                 w: widget.width,
-                h: isText
-                    ? (isEditing ? widget.height : Math.max(widget.height - 1, 1))
-                    : widget.height,
+                h: widget.height,
                 minW: 0,
-                minH: isText ? widget.height : 1,
-                maxH: isText ? widget.height : undefined,
+                minH: 1,
                 isResizable: isEditing,
-                resizeHandles: isText
-                    ? ["w", "e"] // only horizontal
-                    : ["sw", "nw", "se", "ne"],
+                resizeHandles: ["sw", "nw", "se", "ne"],
             };
         });
     };

package/dist/index.js

@@ -17679,7 +17679,6 @@ function DataGrid({ title, data, className }) {
     var _a;
     const { columns, rows, units, grouped = false, grouping } = data;
     const [expandedGroups, setExpandedGroups] = React.useState(new Set(((_a = grouping === null || grouping === void 0 ? void 0 : grouping.sections) === null || _a === void 0 ? void 0 : _a.filter(s => s.expanded).map(s => s.group_value)) || []));
-    console.log('units==>', units);
     const toggleGroup = (groupValue) => {
         const newExpanded = new Set(expandedGroups);
         if (newExpanded.has(groupValue)) {
@@ -17690,19 +17689,25 @@ function DataGrid({ title, data, className }) {
         }
         setExpandedGroups(newExpanded);
     };
+    const formatWithCommas = (value) => {
+        if (value == null || value === "")
+            return "";
+        let str = value.toString().trim();
+        let num = Number(str);
+        if (isNaN(num))
+            return str;
+        let [integer, decimal] = str.split(".");
+        integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        return decimal ? `${integer}.${decimal}` : integer;
+    };
     const formatValueWithUnit = (value, columnIndex) => {
         if (value === null || value === undefined)
             return "—";
         const unit = units === null || units === void 0 ? void 0 : units[columnIndex];
         // Format the value with commas if it's a number or numeric string
         let valueStr;
-        if (typeof value === 'number') {
-            valueStr = value.toLocaleString();
-        }
-        else {
-            const numValue = parseFloat(String(value));
-            valueStr = !isNaN(numValue) ? numValue.toLocaleString() : String(value);
-        }
+        valueStr = formatWithCommas(value);
+        console.log('value==>', valueStr, unit);
         // If no unit or unit length > 3, return value only
         if (!unit || unit.length > 3) {
             return valueStr;
@@ -17750,12 +17755,12 @@ function DataGrid({ title, data, className }) {
                                                     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: formatValueWithUnit(cell, cellIndex) }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
+                                        : "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 whitespace-nowrap", children: formatValueWithUnit(cell, cellIndex) }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
                     }) })] }));
     };
     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.jsxs("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: [column, (units === null || units === void 0 ? void 0 : units[index]) ? ` (${units[index]})` : ''] }, 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: formatValueWithUnit(cell, cellIndex) }, cellIndex))) }, rowIndex))) })] }));
+                        : "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 whitespace-nowrap", children: formatValueWithUnit(cell, cellIndex) }, cellIndex))) }, rowIndex))) })] }));
     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 && 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: (() => {
@@ -40026,22 +40031,17 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
             return true;
         })
             .map((widget) => {
-            const isText = widget.type === "text";
+            widget.type === "text";
             return {
                 i: widget.id,
                 x: widget.position_x,
                 y: widget.position_y,
                 w: widget.width,
-                h: isText
-                    ? (isEditing ? widget.height : Math.max(widget.height - 1, 1))
-                    : widget.height,
+                h: widget.height,
                 minW: 0,
-                minH: isText ? widget.height : 1,
-                maxH: isText ? widget.height : undefined,
+                minH: 1,
                 isResizable: isEditing,
-                resizeHandles: isText
-                    ? ["w", "e"] // only horizontal
-                    : ["sw", "nw", "se", "ne"],
+                resizeHandles: ["sw", "nw", "se", "ne"],
             };
         });
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dp-widgets-framework",
-  "version": "1.3.8",
+  "version": "1.4.0",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -136,4 +136,4 @@
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }
-}
+}