@splunk/visualizations 28.0.0 → 28.1.0

package/Table.js

@@ -72,122 +72,131 @@ __export(Table_exports2, {
 });
 module.exports = __toCommonJS(Table_exports2);
 
+// esm-externals:react
+var react_exports = {};
+__export(react_exports, {
+  default: () => react_default
+});
+var defaultImport = __toESM(require("react"));
+__reExport(react_exports, require("react"));
+var react_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+
 // esm-externals:lodash
 var lodash_exports = {};
 __export(lodash_exports, {
   default: () => lodash_default
 });
-var defaultImport = __toESM(require("lodash"));
+var defaultImport2 = __toESM(require("lodash"));
 __reExport(lodash_exports, require("lodash"));
-var lodash_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+var lodash_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
 
 // esm-externals:@splunk/visualizations-shared/colorUtils
 var colorUtils_exports = {};
 __export(colorUtils_exports, {
   default: () => colorUtils_default
 });
-var defaultImport2 = __toESM(require("@splunk/visualizations-shared/colorUtils"));
+var defaultImport3 = __toESM(require("@splunk/visualizations-shared/colorUtils"));
 __reExport(colorUtils_exports, require("@splunk/visualizations-shared/colorUtils"));
-var colorUtils_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+var colorUtils_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
 
 // esm-externals:@splunk/ui-utils/i18n
 var i18n_exports = {};
 __export(i18n_exports, {
   default: () => i18n_default
 });
-var defaultImport3 = __toESM(require("@splunk/ui-utils/i18n"));
+var defaultImport4 = __toESM(require("@splunk/ui-utils/i18n"));
 __reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
-var i18n_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+var i18n_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
 
 // esm-externals:@splunk/visualization-schemas
 var visualization_schemas_exports = {};
 __export(visualization_schemas_exports, {
   default: () => visualization_schemas_default
 });
-var defaultImport4 = __toESM(require("@splunk/visualization-schemas"));
+var defaultImport5 = __toESM(require("@splunk/visualization-schemas"));
 __reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+var visualization_schemas_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
 
 // esm-externals:@splunk/visualizations-shared/colorConstants
 var colorConstants_exports = {};
 __export(colorConstants_exports, {
   default: () => colorConstants_default
 });
-var defaultImport5 = __toESM(require("@splunk/visualizations-shared/colorConstants"));
+var defaultImport6 = __toESM(require("@splunk/visualizations-shared/colorConstants"));
 __reExport(colorConstants_exports, require("@splunk/visualizations-shared/colorConstants"));
-var colorConstants_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+var colorConstants_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
 
 // esm-externals:@splunk/visualization-icons
 var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport6 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport7 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+var visualization_icons_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport7 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport8 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+var placeholders_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
 
 // esm-externals:@splunk/themes/variables
 var variables_exports = {};
 __export(variables_exports, {
   default: () => variables_default
 });
-var defaultImport8 = __toESM(require("@splunk/themes/variables"));
+var defaultImport9 = __toESM(require("@splunk/themes/variables"));
 __reExport(variables_exports, require("@splunk/themes/variables"));
-var variables_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+var variables_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
 
 // esm-externals:@splunk/themes/pick
 var pick_exports = {};
 __export(pick_exports, {
   default: () => pick_default
 });
-var defaultImport9 = __toESM(require("@splunk/themes/pick"));
+var defaultImport10 = __toESM(require("@splunk/themes/pick"));
 __reExport(pick_exports, require("@splunk/themes/pick"));
-var pick_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+var pick_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
 
 // esm-externals:@splunk/react-icons/TextAlignCenter
 var TextAlignCenter_exports = {};
 __export(TextAlignCenter_exports, {
   default: () => TextAlignCenter_default
 });
-var defaultImport10 = __toESM(require("@splunk/react-icons/TextAlignCenter"));
+var defaultImport11 = __toESM(require("@splunk/react-icons/TextAlignCenter"));
 __reExport(TextAlignCenter_exports, require("@splunk/react-icons/TextAlignCenter"));
-var TextAlignCenter_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+var TextAlignCenter_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
 
 // esm-externals:@splunk/react-icons/TextAlignLeft
 var TextAlignLeft_exports = {};
 __export(TextAlignLeft_exports, {
   default: () => TextAlignLeft_default
 });
-var defaultImport11 = __toESM(require("@splunk/react-icons/TextAlignLeft"));
+var defaultImport12 = __toESM(require("@splunk/react-icons/TextAlignLeft"));
 __reExport(TextAlignLeft_exports, require("@splunk/react-icons/TextAlignLeft"));
-var TextAlignLeft_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+var TextAlignLeft_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
 
 // esm-externals:@splunk/react-icons/TextAlignRight
 var TextAlignRight_exports = {};
 __export(TextAlignRight_exports, {
   default: () => TextAlignRight_default
 });
-var defaultImport12 = __toESM(require("@splunk/react-icons/TextAlignRight"));
+var defaultImport13 = __toESM(require("@splunk/react-icons/TextAlignRight"));
 __reExport(TextAlignRight_exports, require("@splunk/react-icons/TextAlignRight"));
-var TextAlignRight_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+var TextAlignRight_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport13 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport14 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+var configUtils_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
@@ -229,7 +238,8 @@ var dataContract = {
     primary: (options = {}) => ({
       offset: 0,
       count: options.count ? options.count : 10,
-      requestTotalCount: true
+      requestTotalCount: true,
+      add_summary_to_metadata: true
     })
   }
 };
@@ -463,6 +473,26 @@ var editorConfig = [
             labelWidth: EDITOR_LABEL_WIDTH
           }
         }
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Footer totals row"),
+          option: "showFooterTotals",
+          editor: "editor.checkbox",
+          editorProps: {
+            labelWidth: EDITOR_LABEL_WIDTH
+          }
+        }
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Footer percentages row"),
+          option: "showFooterPercentages",
+          editor: "editor.checkbox",
+          editorProps: {
+            labelWidth: EDITOR_LABEL_WIDTH
+          }
+        }
       ]
     ]
   },
@@ -692,15 +722,6 @@ var config = {
 };
 var config_default = enhanceConfig(config);
 
-// esm-externals:react
-var react_exports = {};
-__export(react_exports, {
-  default: () => react_default
-});
-var defaultImport14 = __toESM(require("react"));
-__reExport(react_exports, require("react"));
-var react_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
-
 // esm-externals:@splunk/themes/getSettingsFromThemedProps
 var getSettingsFromThemedProps_exports = {};
 __export(getSettingsFromThemedProps_exports, {
@@ -1087,7 +1108,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.0.0 - 0c5f07712",
+        "data-splunk-visualization-version": "28.1.0 - 4a1bff08b",
         width,
         height,
         backgroundColor
@@ -1153,7 +1174,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.0.0 - 0c5f07712"
+  "data-splunk-visualization-version": "28.1.0 - 4a1bff08b"
 })`
     position: relative;
     width: 100%;
@@ -1867,7 +1888,7 @@ var withDashboardViz = (opts) => {
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
           if (ev && ev.payload) {
-            payload = ev.payload;
+            payload = __spreadValues({}, ev.payload);
           }
           return onEventTrigger({
             originalEvent: ev,
@@ -1970,6 +1991,36 @@ var defaultImport36 = __toESM(require("@splunk/react-ui/Message"));
 __reExport(Message_exports2, require("@splunk/react-ui/Message"));
 var Message_default2 = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
+// src/common/utils/tableUtils.ts
+var hasSummarySum = (fields) => {
+  return fields.some((field) => typeof field === "object" && field["summary.sum"] !== void 0);
+};
+var updateSumTotalValues = (primaryDataSource) => {
+  const { data } = primaryDataSource;
+  const { columns, fields } = data;
+  if (!data || !columns || !fields) {
+    return primaryDataSource;
+  }
+  if (hasSummarySum(fields)) {
+    fields.forEach((field, idx) => {
+      let footerTotal = "";
+      if (typeof field === "object" && field["summary.sum"] !== void 0) {
+        footerTotal = field["summary.sum"];
+      }
+      if (columns[idx]) {
+        columns[idx] = [...columns[idx], footerTotal];
+      }
+    });
+  }
+  return primaryDataSource;
+};
+var findFooterTotal = (headersMetadata) => {
+  return headersMetadata.reduce((total, field) => {
+    const value = field["summary.sum"] ? +field["summary.sum"] : 0;
+    return total + value;
+  }, 0);
+};
+
 // src/Table/hooks.tsx
 var isArray = (v) => Array.isArray(v);
 var textOverflowStyles = {
@@ -2254,6 +2305,7 @@ var validValueSelector = (v1, v2, v3, defaultValue) => {
 };
 var useTable = (tableArgs = {}) => {
   let { table = [], headers = [], columnIds = [] } = tableArgs;
+  const { headersMetadata = [] } = tableArgs;
   const {
     headerVisibility = "inline",
     showRowNumbers = false,
@@ -2345,6 +2397,9 @@ var useTable = (tableArgs = {}) => {
   const tableBody = {
     rows: []
   };
+  const tableFooter = {
+    rows: []
+  };
   for (let currentRow = 0; currentRow < longestColumnLength; currentRow += 1) {
     const row = {
       key: `row-${currentRow}`,
@@ -2397,11 +2452,53 @@ var useTable = (tableArgs = {}) => {
         showCell
       });
     });
-    tableBody.rows.push(row);
+    if (hasSummarySum(headersMetadata) && currentRow === longestColumnLength - 1) {
+      row.key = "footer-totals";
+      tableFooter.rows.push(row);
+      row.cells = row.cells.map((cell, i) => {
+        const headerCell = tableHeader.cells[i];
+        let newCell = __spreadValues({}, cell);
+        if (headerCell) {
+          newCell = __spreadProps(__spreadValues({}, newCell), {
+            style: __spreadProps(__spreadValues({}, newCell.style), {
+              backgroundColor: tableFormat.headerBackgroundColor
+            })
+          });
+        }
+        if (i === 0 && showRowNumbers) {
+          newCell = __spreadProps(__spreadValues({}, newCell), {
+            value: "",
+            rawValue: ""
+          });
+        }
+        return newCell;
+      });
+    } else {
+      tableBody.rows.push(row);
+    }
+  }
+  if (tableFooter.rows.length === 1 && hasSummarySum(headersMetadata)) {
+    const totalRowIndex = tableFooter.rows[0].index;
+    const footerTotal = findFooterTotal(headersMetadata);
+    const percentageRow = {
+      key: "footer-percentage",
+      index: totalRowIndex + 1,
+      cells: tableFooter.rows[0].cells.map((cell) => {
+        let percentageValue = "";
+        if (cell.rawValue !== "") {
+          percentageValue = footerTotal ? `${(0, numberUtils_exports.formatNumber)(+cell.rawValue / footerTotal * 100, 2)}%` : "";
+        }
+        return __spreadProps(__spreadValues({}, cell), {
+          value: percentageValue
+        });
+      })
+    };
+    tableFooter.rows.push(percentageRow);
   }
   return {
     tableHeader,
-    tableBody
+    tableBody,
+    tableFooter
   };
 };
 
@@ -3091,6 +3188,19 @@ var VizTableContainer = styled_components_default.div`
     * > td:hover {
         color: ${({ isCellClickable }) => isCellClickable ? variables_default.linkColor : variables_default.textColor};
     }
+
+    /* footer totals row styling */
+    tr[data-test='footer-row-totals'] td[data-test='cell'] {
+        color: ${variables_default.contentColorActive} !important;
+        cursor: default;
+        font-weight: bold;
+    }
+
+    /* footer percentage row styling */
+    tr[data-test='footer-row-percentages'] td[data-test='cell'] {
+        color: ${variables_default.contentColorDefault} !important;
+        cursor: default;
+    }
 `;
 VizTableContainer.displayName = "VizTableContainer";
 var PAGINATOR_CONTAINER_HEIGHT = 38;
@@ -3161,15 +3271,17 @@ var withEmptyTableMessage = (Viz) => {
       tableFormat,
       columnFormat,
       paginatorParams,
-      count
+      count,
+      headersMetadata
     } = props;
-    const { tableHeader, tableBody } = useTable({
+    const { tableHeader, tableBody, tableFooter } = useTable({
       headers,
       columnIds,
       table,
       headerVisibility,
       showRowNumbers,
       showInternalFields,
+      headersMetadata,
       tableFormat: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, tableFormat), (tableFormat == null ? void 0 : tableFormat.headerAlign) && {
         headerAlign: (0, lodash_exports.cloneDeep)(tableFormat.headerAlign)
       }), (tableFormat == null ? void 0 : tableFormat.align) && {
@@ -3184,7 +3296,7 @@ var withEmptyTableMessage = (Viz) => {
     if (tableBody.rows.length === 0) {
       return /* @__PURE__ */ react_exports.createElement(Message_default2, { type: "warning" }, (0, i18n_exports._)("No data!"));
     }
-    return /* @__PURE__ */ react_exports.createElement(Viz, __spreadProps(__spreadValues({}, props), { tableHeader, tableBody }));
+    return /* @__PURE__ */ react_exports.createElement(Viz, __spreadProps(__spreadValues({}, props), { tableHeader, tableBody, tableFooter }));
   };
   Wrapper.displayName = "PureTableWrapper";
   return Wrapper;
@@ -3228,7 +3340,10 @@ var PureTable = (props) => {
     backgroundColor,
     tableHeader,
     tableBody,
+    tableFooter,
     showRowNumbers,
+    showFooterTotals,
+    showFooterPercentages,
     sortParams: { currentSortKey, currentSortDir, onSort },
     paginatorParams: _b
   } = _a, _c = _b, { isPaging, onChange: paginatorOnChange } = _c, paginatorProps = __objRest(_c, ["isPaging", "onChange"]), {
@@ -3468,7 +3583,43 @@ var PureTable = (props) => {
               }
             ));
           }))
-        ))
+        ), tableFooter && /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, showFooterTotals && tableFooter.rows[0] && /* @__PURE__ */ react_exports.createElement(
+          Table_default.Row,
+          {
+            key: tableFooter.rows[0].key,
+            "data-test": "footer-row-totals",
+            "data-row-index": "0"
+          },
+          tableFooter.rows[0].cells.filter((c) => c.showCell).map(
+            (c) => /* @__PURE__ */ react_exports.createElement(
+              TextCell,
+              {
+                key: `footer-total-cell-${c.key}`,
+                cell: c,
+                useMouseOverEffect: false,
+                "data-test": "footer-total-cell"
+              }
+            )
+          )
+        ), showFooterPercentages && tableFooter.rows[1] && /* @__PURE__ */ react_exports.createElement(
+          Table_default.Row,
+          {
+            key: tableFooter.rows[1].key,
+            "data-test": "footer-row-percentages",
+            "data-row-index": "1"
+          },
+          tableFooter.rows[1].cells.filter((c) => c.showCell).map(
+            (c) => /* @__PURE__ */ react_exports.createElement(
+              TextCell,
+              {
+                key: `footer-percent-cell-${c.key}`,
+                cell: c,
+                useMouseOverEffect: false,
+                "data-test": "footer-percent-cell"
+              }
+            )
+          )
+        )))
       )
     ),
     isPaging ? /* @__PURE__ */ react_exports.createElement(PaginatorContainer, null, /* @__PURE__ */ react_exports.createElement(Paginator_default, __spreadValues({ onChange: paginatorOnChange }, paginatorProps))) : null
@@ -3498,6 +3649,7 @@ PureTable.propTypes = {
   onCellClick: prop_types_exports.func,
   paginatorParams: PaginatorParamsPropTypes,
   showRowNumbers: prop_types_exports.bool,
+  showFooterTotals: prop_types_exports.bool,
   sortParams: SortParamsPropTypes,
   table: prop_types_exports.arrayOf(prop_types_exports.arrayOf(cellDataType)),
   tableFormat: prop_types_exports.shape({
@@ -3531,6 +3683,8 @@ PureTable.defaultProps = {
     onChange: lodash_exports.noop
   },
   showRowNumbers: false,
+  showFooterTotals: false,
+  showFooterPercentages: false,
   sortParams: {
     onSort: lodash_exports.noop
   },
@@ -3548,8 +3702,16 @@ var PureTable_default = withEmptyTableMessage(FixedSizeContainer_default(PureTab
 // src/Table/Table.tsx
 var computeVizProps = (_a) => {
   var props = __objRest(_a, []);
-  var _a2, _b, _c, _d;
+  var _a2, _b, _c, _d, _e, _f, _g;
   const vizProps = __spreadValues({}, props);
+  vizProps.columnIds = (_d = (_c = (_b = (_a2 = vizProps.dataSources) == null ? void 0 : _a2.primary) == null ? void 0 : _b.data) == null ? void 0 : _c.fields.map((field) => {
+    var _a3;
+    return (_a3 = field.name) != null ? _a3 : field;
+  })) != null ? _d : [];
+  if (vizProps.columnIds.length === 0) {
+    vizProps.columnIds = vizProps.headers;
+  }
+  vizProps.headersMetadata = (_g = (_f = (_e = vizProps.dataSources) == null ? void 0 : _e.primary) == null ? void 0 : _f.data) == null ? void 0 : _g.fields;
   if (vizProps.columnFormat) {
     const columns = vizProps.columnFormat;
     const themeRowBackgroundColorOdd = vizProps.themeFunc("rowBackgroundColorOdd");
@@ -3575,13 +3737,6 @@ var computeVizProps = (_a) => {
         rowBackgroundColors
       }), columnProperties.rowColors && { rowColors });
     });
-    vizProps.columnIds = (_d = (_c = (_b = (_a2 = vizProps.dataSources) == null ? void 0 : _a2.primary) == null ? void 0 : _b.data) == null ? void 0 : _c.fields.map((field) => {
-      var _a3;
-      return (_a3 = field.name) != null ? _a3 : field;
-    })) != null ? _d : [];
-    if (vizProps.columnIds.length === 0) {
-      vizProps.columnIds = vizProps.headers;
-    }
   }
   if (vizProps.onOptionsChange) {
     const handleColumnFormatChange = (updatedColumnFormat) => {
@@ -3606,12 +3761,31 @@ var computeVizProps = (_a) => {
   }
   return vizProps;
 };
-var Table = withDashboardViz_default({
-  ReactViz: PureTable_default,
-  vizConfig: config_default,
-  disableEditModeCover: true,
-  computeVizProps
-});
+var withTableFooter = (Viz) => {
+  const VizWithTableFooter = (_a) => {
+    var _b = _a, { dataSources } = _b, otherProps = __objRest(_b, ["dataSources"]);
+    var _a2;
+    if (!((_a2 = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a2.data)) {
+      return /* @__PURE__ */ react_exports.createElement(Viz, __spreadValues({}, otherProps));
+    }
+    const clonedDataSources = (0, lodash_exports.cloneDeep)(dataSources);
+    const { primary } = clonedDataSources;
+    clonedDataSources.primary = updateSumTotalValues(primary);
+    return /* @__PURE__ */ react_exports.createElement(Viz, __spreadValues({ dataSources: clonedDataSources }, otherProps));
+  };
+  VizWithTableFooter.propTypes = Viz.propTypes;
+  VizWithTableFooter.defaultProps = Viz.defaultProps;
+  VizWithTableFooter.config = Viz.config;
+  return VizWithTableFooter;
+};
+var Table = withTableFooter(
+  withDashboardViz_default({
+    ReactViz: PureTable_default,
+    vizConfig: config_default,
+    disableEditModeCover: true,
+    computeVizProps
+  })
+);
 var { themes: themes2 } = config_default;
 var Table_default2 = Table;
 //# sourceMappingURL=Table.js.map