@cdmx/wappler_ag_grid 0.8.3 → 0.8.5

package/README.md

@@ -186,6 +186,16 @@ These configurations help you create organized and logical groupings of columns
 
 ---
 
+### Total Row Footer
+
+The "Total Row Footer" feature allows you to define and display a footer row in a grid or table that shows the totals and counts of specified columns. This can be helpful for summarizing data in your grid and providing users with a quick overview of important statistics.
+
+Configuration includes:
+- **Columns To Count**: Specify the columns you want to count in the footer row. Separate column names with commas.
+- **Columns To Sum**: Specify the columns you want to calculate the sum of in the footer row. Separate column names with commas.
+
+---
+
 # Configure Actions Column
 The Configure Actions Column feature allows you to configure actions for the buttons in the Actions Column.
 

package/app_connect/components.hjson

@@ -1141,6 +1141,50 @@
             }
           ]
         },
+        {
+          "group": "📒 Total Row Footer",
+          "variables": [
+            {
+              "name": "totalRowFooter",
+              "title": "Total Row Footer",
+              "attribute": "total_row_footer",
+              "type": "boolean",
+              "defaultValue": false,
+              "display": "fieldset",
+              "show": [
+                "columnsToCount",
+                "columnValueMatchCount",
+                "columnsToSum"
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Define the Columns to Count and Sum in the Footer row"
+              "children": [
+                {
+                 "name": "columnsToCount",
+                  "attribute": "columns_to_count",
+                  "title": "Columns To Count",
+                  "type": "text",
+                  "initDisplay": "none"
+                },
+                {
+                 "name": "columnValueMatchCount",
+                  "attribute": "column_value_match_count",
+                  "title": "Unique Value To Count",
+                  "type": "text",
+                  "initDisplay": "none"
+                },
+                {
+                  "name": "columnsToSum",
+                  "attribute": "columns_to_sum",
+                  "title": "Columns To Sum",
+                  "type": "text",
+                  "initDisplay": "none"
+                }
+              ]
+            }
+          ]
+        },
         {
           "group": "📒 Configure Actions Column",
           "variables": [

package/dmx-ag-grid.js

@@ -140,7 +140,10 @@ dmx.Component('ag-grid', {
     compact_view: { type: Boolean, default: false },
     compact_view_grid_size: { type: Number, default: 3 },
     compact_view_item_height: { type: Number, default: 20 },
-    group_config: { type: Array, default: [] }
+    group_config: { type: Array, default: [] },
+    columns_to_count: { type: String, default: null },
+    column_value_match_count: { type: String, default: null },
+    columns_to_sum: { type: String, default: null }
   },
 
   methods: {
@@ -1000,6 +1003,64 @@ dmx.Component('ag-grid', {
         actionsRenderer: actionsRenderer
       }
     };
+    const totalRow = function (api, columnsToSum, columnsToCount, columnValueMatchCount) {
+      if (!columnsToSum && !columnsToCount) {
+        return;
+      }
+      let rowData = [];
+      api.forEachNodeAfterFilter(node => {
+        rowData.push({ "data": node.data, "index": node.childIndex });
+      });
+      let result = [{}];
+    
+      if (columnsToSum) {
+        // Initialize and calculate sum columns
+        columnsToSum.forEach(function (col) {
+          result[0][col] = 0;
+          rowData.forEach(function (line) {
+            if (line.index < rowData.length) {
+              result[0][col] += parseFloat(line.data[col]) || line.data[col];
+            }
+          });
+        });
+      }
+    
+      if (columnsToCount) {
+        if (columnValueMatchCount) {
+          // Count unique entries for a specific column
+          columnsToCount.forEach(function (col) {
+            result[0][col] = 0;
+            rowData.forEach(function (line) {
+              if (line.index < rowData.length) {
+                const value = line.data[col];
+                if (value == columnValueMatchCount) {
+                  result[0][col]++;
+                }
+              }
+            });
+          });
+        }
+        else {
+        // Initialize and calculate count columns
+        columnsToCount.forEach(function (col) {
+          result[0][col] = 0;
+          let uniqueValues = new Set();
+          rowData.forEach(function (line) {
+            if (line.index < rowData.length) {
+              const value = line.data[col];
+              if (!uniqueValues.has(value)) {
+                uniqueValues.add(value);
+                result[0][col]++;
+              }
+            }
+          });
+          result[0][col + '_unique_count'] = uniqueValues.size;
+        });
+      }
+    }
+      api.setPinnedBottomRowData(result);
+    }
+
     const gridDiv = document.getElementById(options.id+'-grid');
     
 
@@ -1017,6 +1078,22 @@ dmx.Component('ag-grid', {
       rowData: rowData,
       ...gridOptions
     };
+    // Conditionally add event listeners based on whether columnsToSum or columnsToCount are defined
+    if ((options.columns_to_sum && options.columns_to_sum.split(',').length > 0) || (options.columns_to_count && options.columns_to_count.split(',').length > 0)) {
+      let columnsToSum = options.columns_to_sum ? options.columns_to_sum.split(',') : [];
+      let columnsToCount = options.columns_to_count ? options.columns_to_count.split(',') : [];
+      let columnValueMatchCount = options.column_value_match_count
+
+      gridConfig.onFilterChanged = function (e) {
+        totalRow(e.api, columnsToSum, columnsToCount, columnValueMatchCount);
+      };
+      gridConfig.onFirstDataRendered = function (e) {
+        totalRow(e.api, columnsToSum, columnsToCount, columnValueMatchCount);
+      };
+      gridConfig.postSortRows = function (e) {
+        totalRow(e.api, columnsToSum, columnsToCount,columnValueMatchCount);
+      };
+    }
     // Create ag-Grid instance
     gridInstance = new agGrid.Grid(gridDiv, gridConfig);
     const gridElement = document.getElementById(options.id+'-grid');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "0.8.3",
+    "version": "0.8.5",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation.",
     "license": "MIT",