@splunk/visualizations 25.6.0 → 25.7.1

package/SingleValueIcon.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 459);
+/******/ 	return __webpack_require__(__webpack_require__.s = 466);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -95,21 +95,948 @@ module.exports =
 /***/ 0:
 /***/ (function(module, exports) {
 
+module.exports = require("react");
+
+/***/ }),
+
+/***/ 1:
+/***/ (function(module, exports) {
+
 module.exports = require("prop-types");
 
-/***/ }),
+/***/ }),
+
+/***/ 10:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes/variables");
+
+/***/ }),
+
+/***/ 100:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
+
+
+var StaticTrendColorEditor = {
+  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Trend value'),
+  option: 'trendColor',
+  editor: 'editor.color',
+  showEditor: function showEditor(_ref) {
+    var options = _ref.options;
+    return !Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.trendColor);
+  },
+  isDisabled: function isDisabled(_ref2) {
+    var options = _ref2.options;
+    return options.trendDisplay === 'off';
+  }
+};
+/* harmony default export */ __webpack_exports__["default"] = (StaticTrendColorEditor);
+
+/***/ }),
+
+/***/ 101:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TrellisBackgroundColorEditor = exports.TrellisEditorConfig = void 0;
+
+var React = __webpack_require__(0);
+
+var i18n_1 = __webpack_require__(2);
+
+var FeatureFlagContext_1 = __webpack_require__(20);
+
+var layoutUtils_1 = __webpack_require__(58);
+/* eslint-disable react-hooks/rules-of-hooks */
+
+
+exports.TrellisEditorConfig = [[{
+  label: i18n_1._('Trellis Layout'),
+  option: 'splitByLayout',
+  editor: 'editor.toggle',
+  showEditor: function showEditor() {
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    return isTrellisFeatureFlagOn;
+  }
+}], [{
+  label: i18n_1._('Split by'),
+  option: 'trellisSplitBy',
+  editor: 'editor.trellisSplitBy',
+  editorProps: {
+    dataSourceKey: 'primary'
+  },
+  showEditor: function showEditor(_ref) {
+    var options = _ref.options;
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
+  }
+}], [{
+  label: i18n_1._('Number of columns'),
+  option: 'trellisColumns',
+  editor: 'editor.number',
+  editorProps: {
+    min: 1
+  },
+  placeholder: i18n_1._('Auto'),
+  showEditor: function showEditor(_ref2) {
+    var options = _ref2.options;
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
+  }
+}], [{
+  label: i18n_1._('Min column width'),
+  option: 'trellisMinColumnWidth',
+  editor: 'editor.number',
+  editorProps: {
+    min: 1
+  },
+  showEditor: function showEditor(_ref3) {
+    var options = _ref3.options;
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
+  }
+}, {
+  label: i18n_1._('Row height'),
+  option: 'trellisRowHeight',
+  editor: 'editor.number',
+  editorProps: {
+    min: 1
+  },
+  showEditor: function showEditor(_ref4) {
+    var options = _ref4.options;
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
+  }
+}], [{
+  label: i18n_1._('Max number of components per page'),
+  option: 'trellisPageCount',
+  editor: 'editor.number',
+  editorProps: {
+    min: 1
+  },
+  showEditor: function showEditor(_ref5) {
+    var options = _ref5.options;
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
+  }
+}]];
+exports.TrellisBackgroundColorEditor = {
+  label: i18n_1._('Trellis background'),
+  option: 'trellisBackgroundColor',
+  editor: 'editor.color',
+  showEditor: function showEditor(_ref6) {
+    var options = _ref6.options;
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
+  }
+};
+
+/***/ }),
+
+/***/ 102:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _slicedToArray = __webpack_require__(17);
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(0);
+
+var react_1 = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(3);
+
+var styled_components_1 = __webpack_require__(4);
+
+var Paginator_1 = __webpack_require__(87);
+
+var i18n_1 = __webpack_require__(2);
+
+var themes_1 = __webpack_require__(59);
+
+var useSplunkTheme_1 = __webpack_require__(57);
+
+var FeatureFlagContext_1 = __webpack_require__(20);
+
+var SizeAwareWrapper_1 = __webpack_require__(18);
+
+var style_1 = __webpack_require__(14);
+
+var Message_1 = __webpack_require__(9);
+
+var trellisUtils_1 = __webpack_require__(76);
+
+var hocUtils_1 = __webpack_require__(26);
+
+var JSONSchemaUtils_1 = __webpack_require__(27);
+
+var Options_1 = __webpack_require__(29);
+
+var trellisUtils_2 = __webpack_require__(103);
+
+var layoutUtils_1 = __webpack_require__(58);
+
+var TrellisContainer = styled_components_1.default.div.withConfig({
+  displayName: "withTrellis__TrellisContainer",
+  componentId: "pjmeig-0"
+})(["overflow:hidden;display:flex;flex-direction:column;background-color:", ";", ";> [data-test='paginator']{align-self:flex-end;margin-bottom:10px;}"], function (props) {
+  return props.backgroundColor;
+}, function (props) {
+  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
+});
+var TrellisContainerGrid = styled_components_1.default.div.withConfig({
+  displayName: "withTrellis__TrellisContainerGrid",
+  componentId: "pjmeig-1"
+})(["display:grid;height:", ";gap:10px 10px;grid-template-columns:", ";overflow:auto;justify-items:stretch;grid-auto-rows:", ";.child{height:", ";}"], function (props) {
+  return "".concat(props.height, "px");
+}, function (props) {
+  return props.colCount ? "repeat(".concat(props.colCount, ", minmax(").concat(props.colMinWidth, "px, 1fr))") : "repeat(auto-fit, minmax(".concat(props.colMinWidth, "px, 1fr))");
+}, function (props) {
+  return "".concat(props.rowHeight, "px");
+}, function (props) {
+  return "".concat(props.rowHeight, "px");
+});
+
+var showErrorMessage = function showErrorMessage(errorCode, width, height) {
+  if (errorCode === 'INVALID_SPLIT_BY_FIELD') {
+    return React.createElement(Message_1.default, {
+      width: width,
+      height: height,
+      message: i18n_1._('Select a valid trellis split by field'),
+      level: "info"
+    });
+  }
+
+  if (errorCode === 'UNKNOWN_DATA_SPLIT_MODE') {
+    return React.createElement(Message_1.default, {
+      width: width,
+      height: height,
+      message: i18n_1._('Unknown data split mode'),
+      level: "info"
+    });
+  }
+
+  return React.createElement(Message_1.default, {
+    width: width,
+    height: height,
+    message: i18n_1._('Error render in trellis'),
+    level: "info"
+  });
+};
+
+var withTrellis = function withTrellis(Viz) {
+  var VizWithTrellis = function VizWithTrellis(opts) {
+    var _opts$options = opts.options,
+        options = _opts$options === void 0 ? {} : _opts$options,
+        height = opts.height,
+        width = opts.width,
+        otherProps = __rest(opts, ["options", "height", "width"]);
+
+    var defaultOptions = JSONSchemaUtils_1.pickFieldFromJSONSchema(Viz.config.optionsSchema, 'default');
+    var mergedOptions = hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions);
+    var trellisColumns = mergedOptions.trellisColumns,
+        trellisPageCount = mergedOptions.trellisPageCount,
+        trellisMinColumnWidth = mergedOptions.trellisMinColumnWidth,
+        trellisRowHeight = mergedOptions.trellisRowHeight,
+        splitByLayout = mergedOptions.splitByLayout,
+        trellisSplitBy = mergedOptions.trellisSplitBy;
+    var colCount = trellisColumns > 0 ? trellisColumns : defaultOptions.trellisColumns;
+    var pageCount = +trellisPageCount > 0 ? +trellisPageCount : defaultOptions.trellisPageCount;
+    var colMinWidth = trellisMinColumnWidth > 0 ? trellisMinColumnWidth : defaultOptions.trellisMinColumnWidth;
+    var rowHeight = trellisRowHeight > 0 ? trellisRowHeight : defaultOptions.trellisRowHeight;
+
+    var _react_1$useState = react_1.useState(1),
+        _react_1$useState2 = _slicedToArray(_react_1$useState, 2),
+        pageNum = _react_1$useState2[0],
+        setPageNum = _react_1$useState2[1];
+
+    var _react_1$useState3 = react_1.useState(null),
+        _react_1$useState4 = _slicedToArray(_react_1$useState3, 2),
+        pagedData = _react_1$useState4[0],
+        setPagedData = _react_1$useState4[1];
+
+    var splitByKeys = [];
+    var totalPages = 0;
+    var showPaginator = false;
+    var dataSources = otherProps.dataSources;
+    var theme = {
+      splunkThemeV1: useSplunkTheme_1.default()
+    };
+
+    var _themes_1$getSettings = themes_1.getSettingsFromThemedProps({
+      theme: theme
+    }),
+        currentThemeFamily = _themes_1$getSettings.family,
+        currentThemeColorScheme = _themes_1$getSettings.colorScheme,
+        currentThemeDensity = _themes_1$getSettings.density;
+
+    var trellisBackgroundColor = react_1.useMemo(function () {
+      var themeFunc = function themeFunc(themeVar) {
+        var _a, _b;
+
+        return (_b = (_a = Viz.config.themes)[themeVar]) === null || _b === void 0 ? void 0 : _b.call(_a, {
+          trellisBackgroundColor: mergedOptions.trellisBackgroundColor,
+          theme: theme
+        });
+      }; // trellisBackgroundColor option supports only static coloring and DSL option evaluation derived from the themes level only.
+
+
+      var evaluated = Options_1.Options.evaluate({
+        context: Viz.config.context,
+        options: {
+          trellisBackgroundColor: mergedOptions.trellisBackgroundColor
+        }
+      }, {}, themeFunc);
+      return evaluated.trellisBackgroundColor;
+    }, [mergedOptions.trellisBackgroundColor, currentThemeFamily, currentThemeColorScheme, currentThemeDensity]);
+    var columns = lodash_1.get(dataSources, 'primary.data.columns', undefined);
+    var fields = lodash_1.get(dataSources, 'primary.data.fields', undefined);
+    var noColumns = columns === undefined;
+    var noFields = fields === undefined;
+
+    var updateDataDisplay = function updateDataDisplay(currPage) {
+      if (!showPaginator) {
+        setPagedData(splitByKeys);
+        setPageNum(1);
+      } else {
+        var startIdx = pageCount * (currPage - 1);
+        var paged = splitByKeys.slice(startIdx, startIdx + pageCount);
+        setPagedData(paged);
+      }
+    };
+
+    react_1.useEffect(function () {
+      setPageNum(1);
+      updateDataDisplay(1);
+    }, [pageCount, trellisSplitBy]);
+    react_1.useEffect(function () {
+      updateDataDisplay(pageNum);
+    }, [columns, fields, trellisSplitBy, pageNum, splitByLayout]);
+    var handlePageChange = react_1.useCallback(function (event, _ref) {
+      var page = _ref.page;
+      setPageNum(page);
+    }, [pageNum, pagedData]);
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+
+    if (!isTrellisFeatureFlagOn || !splitByLayout || splitByLayout !== layoutUtils_1.LAYOUT_TYPE.Trellis) {
+      return React.createElement(Viz, Object.assign({}, opts));
+    }
+
+    if (splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis) {
+      if (noColumns || noFields) {
+        return React.createElement(Message_1.default, {
+          width: width,
+          height: height,
+          message: i18n_1._('Loading'),
+          level: "info"
+        });
+      } // If no trellisSplitBy value is passed in, assign default trellisSplitBy
+      // The default value will be the first value in the individual splitBy field list or 'aggregations'
+
+
+      var currTrellisSplitBy = trellisSplitBy;
+
+      if (!trellisSplitBy || trellisSplitBy.length === 0) {
+        var splitByPossibleFields = trellisUtils_1.getAllPossibleSplitByFields(fields);
+        currTrellisSplitBy = splitByPossibleFields.fields && splitByPossibleFields.fields.length ? splitByPossibleFields.fields[0] : trellisUtils_2.AGGREGATIONS;
+      }
+
+      var splitMode = trellisUtils_1.getTrellisDataSplitterMode(fields);
+      var dataSplitResult = trellisUtils_2.getTrellisDataSourcesBySplitMode(splitMode, dataSources, currTrellisSplitBy);
+      var modifiedDataSourceBySplitBy = dataSplitResult === null || dataSplitResult === void 0 ? void 0 : dataSplitResult.splitDataSources;
+      var dataSplitErrorCode = dataSplitResult === null || dataSplitResult === void 0 ? void 0 : dataSplitResult.errorCode;
+
+      if (!modifiedDataSourceBySplitBy || Object.keys(modifiedDataSourceBySplitBy).length === 0 || dataSplitErrorCode) {
+        return showErrorMessage(dataSplitErrorCode, width, height);
+      }
+
+      var splitByKeysModified = modifiedDataSourceBySplitBy ? Object.keys(modifiedDataSourceBySplitBy) : [];
+
+      if (splitByKeysModified) {
+        showPaginator = splitByKeysModified.length > pageCount;
+        splitByKeys = splitByKeysModified;
+        totalPages = splitByKeysModified ? Math.ceil(splitByKeysModified.length / pageCount) : 0;
+      }
+
+      return React.createElement(TrellisContainer, {
+        height: height,
+        width: width,
+        backgroundColor: trellisBackgroundColor
+      }, React.createElement(TrellisContainerGrid, {
+        height: height,
+        colCount: colCount,
+        colMinWidth: colMinWidth,
+        rowHeight: rowHeight
+      }, pagedData && pagedData.map(function (splitByKey, idx) {
+        return React.createElement("div", {
+          className: "child",
+          "data-test": "trellis-child",
+          key: "div-child-".concat(idx.toString())
+        }, React.createElement(SizeAwareWrapper_1.default, null, function (_ref2) {
+          var childWidth = _ref2.childWidth,
+              _ref2$childHeight = _ref2.childHeight,
+              childHeight = _ref2$childHeight === void 0 ? rowHeight : _ref2$childHeight;
+          return React.createElement(Viz, Object.assign({}, otherProps, {
+            trellisKey: splitByKey,
+            trellisSplitBy: currTrellisSplitBy,
+            dataSources: modifiedDataSourceBySplitBy[splitByKey],
+            options: options,
+            key: "viz-".concat(idx.toString()),
+            height: childHeight,
+            width: childWidth
+          }));
+        }));
+      })), showPaginator && totalPages >= pageNum && React.createElement(Paginator_1.default, {
+        onChange: handlePageChange,
+        current: pageNum,
+        alwaysShowLastPageLink: true,
+        totalPages: totalPages
+      }));
+    }
+
+    return null;
+  };
+
+  VizWithTrellis.propTypes = Viz.proptypes;
+  VizWithTrellis.defaultProps = Viz.defaultProps;
+  VizWithTrellis.config = Viz.config;
+  return VizWithTrellis;
+};
+
+exports.default = withTrellis;
+
+/***/ }),
+
+/***/ 103:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _toConsumableArray = __webpack_require__(7);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTrellisDataSourcesBySplitMode = exports.dataSourcesSplitByModeStatsorUnknown = exports.dataSourcesSplitByModeChart = exports.dataSourcesSplitByModeTimechart = exports.dataSourcesSplitByAggregationsStats = exports.dataSourcesSplitByAggregationsTimechartAndChart = exports.dataSourcesSplitByAggregationsUnknown = exports.AGGREGATIONS = void 0;
+
+var lodash_1 = __webpack_require__(3);
+
+var trellisUtils_1 = __webpack_require__(76);
+
+exports.AGGREGATIONS = 'aggregations';
+/**
+ * There can be certain SPL cmds that can produce dataSource without a specific field meta info (like group_by_rank, split_by_field etc),
+ * to categorize it,
+ * Example1:- `index = "_internal" | chart count`
+ * Example2:- `index=_internal | chart avg(count), max(count)`
+ * Example3:- `index = "_internal" | stats count`
+ * Example4:- `index=_internal | stats avg(count), max(count)`
+ */
+
+var dataSourcesSplitByAggregationsUnknown = function dataSourcesSplitByAggregationsUnknown(dataSource) {
+  var _a, _b, _c, _d;
+
+  var fields = (_b = (_a = dataSource === null || dataSource === void 0 ? void 0 : dataSource.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.fields;
+  var columns = (_d = (_c = dataSource === null || dataSource === void 0 ? void 0 : dataSource.primary) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.columns;
+  var splitDataSources = null;
+  var errorCode = null;
+
+  if (fields && fields.length) {
+    splitDataSources = {};
+
+    for (var i = 0; i < fields.length; i += 1) {
+      var fieldName = fields[i].name;
+
+      if (!(fieldName === null || fieldName === void 0 ? void 0 : fieldName.startsWith('_'))) {
+        splitDataSources[fieldName] = lodash_1.cloneDeep(lodash_1.omit(dataSource, ['primary.data.fields', 'primary.data.columns']));
+        splitDataSources[fieldName].primary.data.fields = [fields[i]];
+        splitDataSources[fieldName].primary.data.columns = [columns[i]];
+      }
+    }
+  } else {
+    errorCode = 'INVALID_SPLIT_BY_FIELD';
+  }
+
+  return {
+    splitDataSources: splitDataSources,
+    errorCode: errorCode
+  };
+};
+
+exports.dataSourcesSplitByAggregationsUnknown = dataSourcesSplitByAggregationsUnknown;
+
+var dataSourcesSplitByAggregationsTimechartAndChart = function dataSourcesSplitByAggregationsTimechartAndChart(dataSource) {
+  var _a, _b, _c, _d;
+
+  var fields = (_b = (_a = dataSource === null || dataSource === void 0 ? void 0 : dataSource.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.fields;
+  var columns = (_d = (_c = dataSource === null || dataSource === void 0 ? void 0 : dataSource.primary) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.columns;
+  var splitDataSources = null;
+  var splitByFields = [];
+  var errorCode = null;
+
+  if (typeof fields[0] !== 'string') {
+    splitByFields = trellisUtils_1.extractDataSourceAggregationKeysChart(fields);
+  }
+
+  if (splitByFields && splitByFields.length > 0) {
+    splitDataSources = {};
+    splitByFields.forEach(function (splitByField) {
+      splitDataSources[splitByField] = lodash_1.cloneDeep(lodash_1.omit(dataSource, ['primary.data.fields', 'primary.data.columns']));
+      splitDataSources[splitByField].primary.data.fields = [fields[0]];
+      splitDataSources[splitByField].primary.data.columns = [columns[0]];
+      fields.forEach(function (field, idx) {
+        var fieldName = field === null || field === void 0 ? void 0 : field.name;
+
+        if (fieldName !== '_time' && !(fieldName === null || fieldName === void 0 ? void 0 : fieldName.startsWith('_')) && field.data_source === splitByField) {
+          splitDataSources[splitByField].primary.data.fields.push(field);
+          splitDataSources[splitByField].primary.data.columns.push(columns[idx]);
+        }
+      });
+    });
+  } else if ((!splitByFields || !splitByFields.length) && fields.length > 1) {
+    // handle where data_source doesnot exist in fields
+    // example1 :- index=_internal | timechart count
+    // example2 :- index=_internal |  timechart max(count) avg(count)
+    splitDataSources = {};
+
+    for (var i = 1; i < fields.length; i += 1) {
+      var fieldName = fields[i].name;
+
+      if (!(fieldName === null || fieldName === void 0 ? void 0 : fieldName.startsWith('_'))) {
+        splitDataSources[fieldName] = lodash_1.cloneDeep(lodash_1.omit(dataSource, ['primary.data.fields', 'primary.data.columns']));
+        splitDataSources[fieldName].primary.data.fields = [fields[0], fields[i]];
+        splitDataSources[fieldName].primary.data.columns = [columns[0], columns[i]];
+      }
+    }
+  } else {
+    errorCode = 'INVALID_SPLIT_BY_FIELD';
+  }
+
+  return {
+    splitDataSources: splitDataSources,
+    errorCode: errorCode
+  };
+};
+
+exports.dataSourcesSplitByAggregationsTimechartAndChart = dataSourcesSplitByAggregationsTimechartAndChart;
+
+var dataSourcesSplitByAggregationsStats = function dataSourcesSplitByAggregationsStats(dataSource) {
+  var _a, _b, _c, _d;
+
+  var fields = (_b = (_a = dataSource === null || dataSource === void 0 ? void 0 : dataSource.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.fields;
+  var columns = (_d = (_c = dataSource === null || dataSource === void 0 ? void 0 : dataSource.primary) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.columns;
+  var splitDataSources = null;
+  var splitByFields = [];
+  var errorCode = null;
+
+  if (typeof fields[0] !== 'string') {
+    splitByFields = trellisUtils_1.extractDataSourceAggregationKeysStats(fields);
+  }
+
+  if (splitByFields && splitByFields.length > 0) {
+    splitDataSources = {};
+    splitByFields.forEach(function (splitByField) {
+      splitDataSources[splitByField] = lodash_1.cloneDeep(lodash_1.omit(dataSource, ['primary.data.fields', 'primary.data.columns']));
+      splitDataSources[splitByField].primary.data.fields = [fields[0]];
+      splitDataSources[splitByField].primary.data.columns = [columns[0]];
+      var idx = fields.findIndex(function (field) {
+        return field.name === splitByField;
+      });
+
+      if (idx > 0) {
+        splitDataSources[splitByField].primary.data.fields.push(fields[idx]);
+        splitDataSources[splitByField].primary.data.columns.push(columns[idx]);
+      }
+    });
+  } else {
+    errorCode = 'INVALID_SPLIT_BY_FIELD';
+  }
+
+  return {
+    splitDataSources: splitDataSources,
+    errorCode: errorCode
+  };
+};
+
+exports.dataSourcesSplitByAggregationsStats = dataSourcesSplitByAggregationsStats;
+
+var dataSourcesSplitByModeTimechart = function dataSourcesSplitByModeTimechart(dataSource, splitBy) {
+  var _a, _b, _c, _d, _e;
+
+  var fields = (_b = (_a = dataSource === null || dataSource === void 0 ? void 0 : dataSource.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.fields;
+  var columns = (_d = (_c = dataSource === null || dataSource === void 0 ? void 0 : dataSource.primary) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.columns;
+  var splitDataSources = null;
+  var splitByFields = [];
+  var errorCode = null;
+
+  if (typeof fields[0] !== 'string') {
+    splitByFields = trellisUtils_1.extractSplitByFieldsChartFields(fields);
+  }
+
+  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
+    splitDataSources = {};
+    var dataSourceKeys = trellisUtils_1.extractDataSourceAggregationKeysChart(fields);
+    var valueKeys = [];
+
+    for (var i = 1; i < fields.length; i += 1) {
+      // not including internal fields
+      if (!((_e = fields[i].name) === null || _e === void 0 ? void 0 : _e.startsWith('_'))) {
+        valueKeys.push(fields[i].splitby_value ? fields[i].splitby_value : fields[i].name);
+      }
+    }
+
+    valueKeys.forEach(function (val) {
+      splitDataSources[val] = lodash_1.cloneDeep(lodash_1.omit(dataSource, ['primary.data.fields', 'primary.data.columns']));
+      splitDataSources[val].primary.data.fields = [{
+        name: fields[0].name
+      }].concat(_toConsumableArray(dataSourceKeys.map(function (k) {
+        return {
+          name: k
+        };
+      })));
+      splitDataSources[val].primary.data.columns = [_toConsumableArray(columns[0])];
+      dataSourceKeys.forEach(function (dsKey) {
+        fields.forEach(function (field, idx) {
+          if (field.data_source === dsKey && (field.splitby_value === val || field.name === val)) {
+            splitDataSources[val].primary.data.columns.push(_toConsumableArray(columns[idx]));
+          }
+        });
+      });
+    });
+  } else {
+    errorCode = 'INVALID_SPLIT_BY_FIELD';
+  }
+
+  return {
+    splitDataSources: splitDataSources,
+    errorCode: errorCode
+  };
+};
+
+exports.dataSourcesSplitByModeTimechart = dataSourcesSplitByModeTimechart;
+
+var dataSourcesSplitByModeChart = function dataSourcesSplitByModeChart(dataSource, splitBy) {
+  var _a, _b, _c, _d;
+
+  var fields = (_b = (_a = dataSource === null || dataSource === void 0 ? void 0 : dataSource.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.fields;
+  var columns = (_d = (_c = dataSource === null || dataSource === void 0 ? void 0 : dataSource.primary) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.columns;
+  var splitDataSources = null;
+  var splitByFields = [];
+  var errorCode = null;
+
+  if (typeof fields[0] !== 'string') {
+    splitByFields = trellisUtils_1.extractSplitByFieldsChartFields(fields);
+  }
+
+  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
+    splitDataSources = {};
+    var splitByFieldIdx = splitByFields.findIndex(function (f) {
+      return f === splitBy;
+    });
+    var otherSplitBy = splitByFields.filter(function (f) {
+      return f !== splitBy;
+    });
+    var dataSourceKeys = trellisUtils_1.extractDataSourceAggregationKeysChart(fields);
+    var nonDataSourceAggregations = [];
+
+    if (!dataSourceKeys.length && fields[0].groupby_rank === '0' && fields.length && !fields[1].groupby_rank) {
+      /* check for another aggregation scenario where no key 'data_source' will be returned (applies for both chart and stats cmd)
+      For example :-
+      index=_internal | chart count by status
+      index = "_internal" | chart max(count) avg(count) by status
+      index = "_internal" |  stats max(count) avg(count) by status
+      where field meta info is in this format -
+       "fields": [
+              {
+                  "name": "status",
+                  "groupby_rank": "0"
+              },
+              {
+                  "name": "max(count)"
+              },
+              {
+                  "name": "avg(count)"
+              }
+          ]
+       */
+      for (var i = 1; i < fields.length; i += 1) {
+        nonDataSourceAggregations.push(fields[i].name);
+      }
+    }
+
+    if (splitByFieldIdx === 0) {
+      // if splitBy is the first field, split row wise
+      var valueKeys = lodash_1.cloneDeep(columns[0]);
+      valueKeys.forEach(function (val, idx) {
+        splitDataSources[val] = lodash_1.cloneDeep(lodash_1.omit(dataSource, ['primary.data.fields', 'primary.data.columns']));
+        splitDataSources[val].primary.data.fields = [];
+
+        if (otherSplitBy.length) {
+          splitDataSources[val].primary.data.fields = [{
+            name: otherSplitBy[0]
+          }]; // there can only be one otherSplitBy for chart cmd
+        }
+
+        if (dataSourceKeys.length) {
+          (function () {
+            var columnValues = [[]];
+            splitDataSources[val].primary.data.fields = [].concat(_toConsumableArray(splitDataSources[val].primary.data.fields), _toConsumableArray(dataSourceKeys.map(function (k) {
+              return {
+                name: k
+              };
+            })));
+            dataSourceKeys.forEach(function () {
+              columnValues.push([]);
+            });
+            /**
+             * There can be chart SPL cmd where there are multiple data_source keys in the field meta info.
+             * For eg - index = "_internal" | chart avg(count) max(count) by status , user) can result in fields and columns as below where "data_source" keys are "avg(count)" and "max(count)"
+             * 'fields' : [
+                    {
+                        "name": "status",
+                        "groupby_rank": "0"
+                    },
+                    {
+                        "name": "avg(count): userA",
+                        "data_source": "avg(count)",
+                        "splitby_field": "user",
+                        "splitby_value": "userA"
+                    },
+                    {
+                        "name": "avg(count): userB",
+                        "data_source": "avg(count)",
+                        "splitby_field": "user",
+                        "splitby_value": "userB"
+                    },
+                    {
+                        "name": "avg(count): userC",
+                        "data_source": "avg(count)",
+                        "splitby_field": "user",
+                        "splitby_value": "userC"
+                    },
+                    {
+                        "name": "max(count): userA",
+                        "data_source": "max(count)",
+                        "splitby_field": "user",
+                        "splitby_value": "userA"
+                    },
+                    {
+                        "name": "max(count): userB",
+                        "data_source": "max(count)",
+                        "splitby_field": "user",
+                        "splitby_value": "userB"
+                    },
+                    {
+                        "name": "max(count): userC",
+                        "data_source": "max(count)",
+                        "splitby_field": "user",
+                        "splitby_value": "userC"
+                    },
+                ]
+                'columns' : [['200','303','304','400'], ['1','2','3','4'], ['10','20','30','40'], ['100','200','300','400'], ['5','6','7','8'], ['50','60','70','80'],['500','600','700','800']]
+                 In this case when we split row wise, the data_source keys for userA appears in indices [1, 4, ..], the data_source keys for userB appears in indices [2, 5, ..]
+                The resulting dataSplit for status '200', will have the fields => ['user','avg(count)', 'max(count)'] columns  => [['userA', 'userB', 'userC'],['1','10','100'], ['5', '50', '500'] ]
+                 For the example above for..loop below will iterate from i= 1 to 3 (Math.ceil((fields.length - 1) / dataSourceKeys.length)). Exclude i = 0 as first column is the splitBy input.
+                Since there are 2 data_source keys 'avg(count)' and 'max(count)', dataSourceKeys.forEach loop will collect individual arrays specific to the columnValues[indx] as below.
+                columnValues[0] =  ['userA', 'userB', 'userC']
+                columnValues[1] = ['1','10','100']
+                columnValues[2] = ['5', '50', '500']
+             */
+
+            var _loop = function _loop(_i) {
+              columnValues[0].push(fields[_i].splitby_value ? fields[_i].splitby_value : fields[_i].name);
+              dataSourceKeys.forEach(function (dskey, dsIndx) {
+                var mul = (fields.length - 1) / dataSourceKeys.length; // This line does the index calculation
+
+                columnValues[dsIndx + 1].push(columns[_i + dsIndx * mul][idx]);
+              });
+            };
+
+            for (var _i = 1; _i <= Math.ceil((fields.length - 1) / dataSourceKeys.length); _i += 1) {
+              _loop(_i);
+            }
+
+            splitDataSources[val].primary.data.columns = columnValues;
+          })();
+        } else if (nonDataSourceAggregations.length) {
+          // There can be SPL where data_source field metainfo is not available and needs special handling
+          // For eg :-
+          // index=_internal |  chart count by status
+          // index = "_internal" | chart max(count) avg(count) by status
+          // index = "_internal" |  stats max(count) avg(count) by status
+          var columnValues = [];
+          fields.forEach(function (aggregationField, fieldIdx) {
+            if (fieldIdx > 0) {
+              splitDataSources[val].primary.data.fields.push(aggregationField);
+              columnValues.push([columns[fieldIdx][idx]]);
+            }
+          });
+          splitDataSources[val].primary.data.columns = columnValues;
+        }
+      });
+    } else {
+      // split column wise
+      var _valueKeys = [];
+
+      for (var _i2 = 1; _i2 < fields.length; _i2 += 1) {
+        _valueKeys.push(fields[_i2].splitby_value ? fields[_i2].splitby_value : fields[_i2].name);
+      }
+
+      _valueKeys.forEach(function (val) {
+        splitDataSources[val] = lodash_1.cloneDeep(lodash_1.omit(dataSource, ['primary.data.fields', 'primary.data.columns']));
+        splitDataSources[val].primary.data.fields = [{
+          name: otherSplitBy[0]
+        }].concat(_toConsumableArray(dataSourceKeys.map(function (k) {
+          return {
+            name: k
+          };
+        })));
+        splitDataSources[val].primary.data.columns = [_toConsumableArray(columns[0])];
+        dataSourceKeys.forEach(function (dsKey) {
+          fields.forEach(function (field, idx) {
+            if (field.data_source === dsKey && (field.splitby_value === val || field.name === val)) {
+              splitDataSources[val].primary.data.columns.push(_toConsumableArray(columns[idx]));
+            }
+          });
+        });
+      });
+    }
+  } else {
+    errorCode = 'INVALID_SPLIT_BY_FIELD';
+  }
+
+  return {
+    splitDataSources: splitDataSources,
+    errorCode: errorCode
+  };
+};
+
+exports.dataSourcesSplitByModeChart = dataSourcesSplitByModeChart;
+/**
+ * This method does datasplitting for 'stats' and generic cmds('makeresults','table' etc - categoried as 'unknown' splitMode).
+ * The main difference is for 'stats' cmd possible splitBy fields have 'group_by_rank' in field meta info, whereas for 'unknown' cmd it can be any fieldnames
+ */
+
+var dataSourcesSplitByModeStatsorUnknown = function dataSourcesSplitByModeStatsorUnknown(dataSource, splitBy, splitMode) {
+  var _a, _b, _c, _d, _e, _f;
+
+  var fields = (_b = (_a = dataSource === null || dataSource === void 0 ? void 0 : dataSource.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.fields;
+  var columns = (_d = (_c = dataSource === null || dataSource === void 0 ? void 0 : dataSource.primary) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.columns;
+  var splitDataSources = null;
+  var splitByFields = [];
+  var errorCode = null;
+
+  if (typeof fields[0] !== 'string') {
+    splitByFields = splitMode !== trellisUtils_1.UNKNOWN ? trellisUtils_1.extractSplitByFieldsForStats(fields) : trellisUtils_1.extractSplitByFieldsForUnknown(fields);
+  }
+
+  var splitByIndex = fields === null || fields === void 0 ? void 0 : fields.findIndex(function (field) {
+    return field === splitBy || field.name === splitBy;
+  });
+
+  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
+    var splitByColumn = (_f = (_e = dataSource === null || dataSource === void 0 ? void 0 : dataSource.primary) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.columns[splitByIndex];
+    splitDataSources = {};
+    splitByColumn.forEach(function (val, idx) {
+      if (!splitDataSources[val]) {
+        splitDataSources[val] = [idx];
+      } else {
+        splitDataSources[val].push(idx);
+      }
+    });
+    var cloneFields = lodash_1.cloneDeep(fields);
+    cloneFields.splice(splitByIndex, 1);
+    var valueKeys = Object.keys(splitDataSources);
+    valueKeys.forEach(function (val) {
+      var valIndices = lodash_1.cloneDeep(splitDataSources[val]);
+      splitDataSources[val] = lodash_1.cloneDeep(lodash_1.omit(dataSource, ['primary.data.fields', 'primary.data.columns']));
+      splitDataSources[val].primary.data.fields = cloneFields;
+      splitDataSources[val].primary.data.columns = [];
+      columns.forEach(function (col, idx) {
+        if (idx !== splitByIndex) {
+          var newCol = valIndices.map(function (valIdx) {
+            return col[valIdx];
+          });
+          splitDataSources[val].primary.data.columns.push(newCol);
+        }
+      });
+    });
+  } else {
+    errorCode = 'INVALID_SPLIT_BY_FIELD';
+  }
+
+  return {
+    splitDataSources: splitDataSources,
+    errorCode: errorCode
+  };
+};
 
-/***/ 1:
-/***/ (function(module, exports) {
+exports.dataSourcesSplitByModeStatsorUnknown = dataSourcesSplitByModeStatsorUnknown;
 
-module.exports = require("react");
+var getTrellisDataSourcesBySplitMode = function getTrellisDataSourcesBySplitMode(splitMode, dataSources, trellisSplitBy) {
+  var result = null;
 
-/***/ }),
+  try {
+    if (splitMode === trellisUtils_1.TIMECHART) {
+      result = trellisSplitBy === exports.AGGREGATIONS ? exports.dataSourcesSplitByAggregationsTimechartAndChart(dataSources) : exports.dataSourcesSplitByModeTimechart(dataSources, trellisSplitBy);
+    } else if (splitMode === trellisUtils_1.STATS) {
+      result = trellisSplitBy === exports.AGGREGATIONS ? exports.dataSourcesSplitByAggregationsStats(dataSources) : exports.dataSourcesSplitByModeStatsorUnknown(dataSources, trellisSplitBy, trellisUtils_1.STATS);
+    } else if (splitMode === trellisUtils_1.CHART) {
+      result = trellisSplitBy === exports.AGGREGATIONS ? exports.dataSourcesSplitByAggregationsTimechartAndChart(dataSources) : exports.dataSourcesSplitByModeChart(dataSources, trellisSplitBy);
+    } else if (splitMode === trellisUtils_1.UNKNOWN) {
+      result = trellisSplitBy === exports.AGGREGATIONS ? exports.dataSourcesSplitByAggregationsUnknown(dataSources) : exports.dataSourcesSplitByModeStatsorUnknown(dataSources, trellisSplitBy, trellisUtils_1.UNKNOWN);
+    }
+  } catch (ex) {
+    console.error('getTrellisDataSourcesBySplitMode ', ex);
+    result = {
+      splitDataSources: null,
+      errorCode: 'UNKNOWN'
+    };
+  }
 
-/***/ 10:
-/***/ (function(module, exports) {
+  return result;
+};
 
-module.exports = require("@splunk/visualizations-shared/Message");
+exports.getTrellisDataSourcesBySplitMode = getTrellisDataSourcesBySplitMode;
 
 /***/ }),
 
@@ -127,51 +1054,6 @@ module.exports = require("@splunk/visualizations-shared/colorUtils");
 
 /***/ }),
 
-/***/ 125:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.defaultContext = void 0;
-exports.defaultContext = {
-  trendColorConfig: [{
-    to: 0,
-    value: '#9E2520'
-  }, {
-    from: 0,
-    value: '#1C6B2D'
-  }],
-  majorColorConfig: [{
-    to: 20,
-    value: '#D41F1F'
-  }, {
-    from: 20,
-    to: 40,
-    value: '#D94E17'
-  }, {
-    from: 40,
-    to: 60,
-    value: '#CBA700'
-  }, {
-    from: 60,
-    to: 80,
-    value: '#669922'
-  }, {
-    from: 80,
-    value: '#118832'
-  }],
-  majorColorMatchConfig: [{
-    match: '',
-    value: '#5C33FF'
-  }]
-};
-
-/***/ }),
-
 /***/ 13:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -182,13 +1064,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SizeAwareWrapper_1 = __webpack_require__(21);
+var SizeAwareWrapper_1 = __webpack_require__(18);
 
-var style_1 = __webpack_require__(15);
+var style_1 = __webpack_require__(14);
 
 var colorUtils_1 = __webpack_require__(12);
 
@@ -247,7 +1129,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.6.0 - f5eb3abf9",
+      "data-splunk-visualization-version": "25.7.1 - 6a77c5530",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -269,7 +1151,52 @@ exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 131:
+/***/ 133:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultContext = void 0;
+exports.defaultContext = {
+  trendColorConfig: [{
+    to: 0,
+    value: '#9E2520'
+  }, {
+    from: 0,
+    value: '#1C6B2D'
+  }],
+  majorColorConfig: [{
+    to: 20,
+    value: '#D41F1F'
+  }, {
+    from: 20,
+    to: 40,
+    value: '#D94E17'
+  }, {
+    from: 40,
+    to: 60,
+    value: '#CBA700'
+  }, {
+    from: 60,
+    to: 80,
+    value: '#669922'
+  }, {
+    from: 80,
+    value: '#118832'
+  }],
+  majorColorMatchConfig: [{
+    match: '',
+    value: '#5C33FF'
+  }]
+};
+
+/***/ }),
+
+/***/ 139:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations/SingleValueBasic");
@@ -277,6 +1204,13 @@ module.exports = require("@splunk/visualizations/SingleValueBasic");
 /***/ }),
 
 /***/ 14:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/style");
+
+/***/ }),
+
+/***/ 15:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -309,13 +1243,6 @@ exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
 
-/***/ 15:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/style");
-
-/***/ }),
-
 /***/ 16:
 /***/ (function(module, exports) {
 
@@ -323,57 +1250,64 @@ module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 
-/***/ 160:
+/***/ 167:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Activity");
 
 /***/ }),
 
-/***/ 161:
+/***/ 168:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Clock");
 
 /***/ }),
 
-/***/ 162:
+/***/ 169:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Pencil");
 
 /***/ }),
 
-/***/ 163:
+/***/ 17:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/slicedToArray");
+
+/***/ }),
+
+/***/ 170:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Star");
 
 /***/ }),
 
-/***/ 164:
+/***/ 171:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Question");
 
 /***/ }),
 
-/***/ 17:
+/***/ 18:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/slicedToArray");
+module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 /***/ }),
 
-/***/ 18:
+/***/ 19:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(8);
+var _toConsumableArray = __webpack_require__(7);
 
-var _defineProperty = __webpack_require__(7);
+var _defineProperty = __webpack_require__(8);
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -602,13 +1536,6 @@ exports.insertLayout = insertLayout;
 
 /***/ }),
 
-/***/ 19:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/configUtils");
-
-/***/ }),
-
 /***/ 2:
 /***/ (function(module, exports) {
 
@@ -619,25 +1546,32 @@ module.exports = require("@splunk/ui-utils/i18n");
 /***/ 20:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/createClass");
+module.exports = require("@splunk/visualization-context/FeatureFlagContext");
 
 /***/ }),
 
 /***/ 21:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
+module.exports = require("@splunk/visualizations-shared/configUtils");
 
 /***/ }),
 
 /***/ 22:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/pick");
+module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
 
 /***/ 23:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes/pick");
+
+/***/ }),
+
+/***/ 24:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -672,15 +1606,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "lighten", function() { return lighten; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "darken", function() { return darken; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "handleValueClickCallback", function() { return handleValueClickCallback; });
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7);
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
 /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(29);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(30);
 /* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(54);
 /* harmony import */ var _splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(25);
+/* harmony import */ var _splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(28);
 /* harmony import */ var _splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(49);
 /* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__);
@@ -1634,11 +2568,22 @@ var darken = function darken(color) {
  */
 
 var handleValueClickCallback = function handleValueClickCallback(ev, majorValue, majorValueField, trendValue, onValueClick) {
+  var trellisEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var trellisSplityBy = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : '';
+  var trellisKey = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : '';
   var payload = {
     trendValue: trendValue,
     value: majorValue,
     name: majorValueField
   };
+
+  if (trellisEnabled) {
+    payload = _objectSpread(_objectSpread({}, payload), {}, {
+      'trellis.name': trellisSplityBy,
+      'trellis.value': trellisKey
+    });
+  }
+
   return onValueClick(_objectSpread(_objectSpread({}, ev), {}, {
     payload: payload
   }));
@@ -1646,45 +2591,38 @@ var handleValueClickCallback = function handleValueClickCallback(ev, majorValue,
 
 /***/ }),
 
-/***/ 24:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-context/TimezoneContext");
-
-/***/ }),
-
 /***/ 25:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/propUtils");
+module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
 
 /***/ 26:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-context/FeatureFlagContext");
+module.exports = require("@splunk/visualizations-shared/hocUtils");
 
 /***/ }),
 
 /***/ 27:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/hocUtils");
+module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
 
 /***/ }),
 
 /***/ 28:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
+module.exports = require("@splunk/visualizations-shared/propUtils");
 
 /***/ }),
 
 /***/ 29:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/numberUtils");
+module.exports = require("@splunk/visualization-encoding/Options");
 
 /***/ }),
 
@@ -1696,6 +2634,13 @@ module.exports = require("lodash");
 /***/ }),
 
 /***/ 30:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/numberUtils");
+
+/***/ }),
+
+/***/ 31:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1706,15 +2651,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.shouldShowIconPlaceholder = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
 var i18n_1 = __webpack_require__(2);
 
-var Message_1 = __webpack_require__(10);
+var Message_1 = __webpack_require__(9);
 
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
@@ -1787,27 +2732,27 @@ exports.default = FixedSizeContainer_1.default(IconPlaceholder);
 
 /***/ }),
 
-/***/ 31:
+/***/ 32:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 32:
+/***/ 33:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _defineProperty = __webpack_require__(7);
+var _defineProperty = __webpack_require__(8);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSortingParams = exports.SortParamsPropTypes = void 0;
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -1831,7 +2776,7 @@ var getSortingParams = function getSortingParams(_ref) {
   };
   var onSort;
 
-  if (lodash_1.isFunction(onRequestParamsChange)) {
+  if (typeof onRequestParamsChange === 'function') {
     if (requestParams && lodash_1.has(requestParams, 'sort')) {
       currentSortKey = Object.keys(requestParams.sort).shift();
       currentSortDir = requestParams.sort[currentSortKey];
@@ -1865,7 +2810,7 @@ exports.getSortingParams = getSortingParams;
 
 /***/ }),
 
-/***/ 33:
+/***/ 34:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1876,7 +2821,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -1896,7 +2841,7 @@ var getPaginationParams = function getPaginationParams(_ref) {
   var count = requestParams && requestParams.count;
   var totalPages = typeof count === 'number' && count > 0 ? Math.ceil(totalCount / count) : 0;
   var current = typeof count === 'number' && count > 0 ? Math.floor(offset / count) + 1 : 0;
-  var isPaging = totalPages > 1 && lodash_1.isFunction(onRequestParamsChange);
+  var isPaging = totalPages > 1 && typeof onRequestParamsChange === 'function';
 
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var page = _ref2.page,
@@ -1922,7 +2867,7 @@ var getPaginationParams = function getPaginationParams(_ref) {
     isPaging: isPaging,
     current: current,
     totalPages: totalPages,
-    onChange: lodash_1.isFunction(onRequestParamsChange) ? onChangeHandler : lodash_1.noop
+    onChange: typeof onRequestParamsChange === 'function' ? onChangeHandler : lodash_1.noop
   };
 };
 
@@ -1930,7 +2875,7 @@ exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
 
-/***/ 34:
+/***/ 35:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1959,7 +2904,7 @@ var VizCategory;
 
 /***/ }),
 
-/***/ 35:
+/***/ 36:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1971,39 +2916,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 
-var getSettingsFromThemedProps_1 = __webpack_require__(36);
+var getSettingsFromThemedProps_1 = __webpack_require__(37);
 
-var Options_1 = __webpack_require__(37);
+var Options_1 = __webpack_require__(29);
 
 var SanitizeProps_1 = __webpack_require__(38);
 
-var TimezoneContext_1 = __webpack_require__(24);
+var TimezoneContext_1 = __webpack_require__(25);
 
 var moment_1 = __webpack_require__(39);
 
-var FeatureFlagContext_1 = __webpack_require__(26);
+var FeatureFlagContext_1 = __webpack_require__(20);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(27);
+var hocUtils_1 = __webpack_require__(26);
 
-var JSONSchemaUtils_1 = __webpack_require__(28);
+var JSONSchemaUtils_1 = __webpack_require__(27);
 
 var async_dynamic_options_evaluator_1 = __webpack_require__(40);
 
-var id_1 = __webpack_require__(31);
+var id_1 = __webpack_require__(32);
 
 var SplunkVisualization_1 = __webpack_require__(41);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var getSorting_1 = __webpack_require__(32);
+var getSorting_1 = __webpack_require__(33);
 
-var getPagination_1 = __webpack_require__(33);
+var getPagination_1 = __webpack_require__(34);
 
 var useDeepMemo_1 = __webpack_require__(44);
 
@@ -2032,6 +2977,8 @@ var withDashboardViz = function withDashboardViz(opts) {
   var defaultOptions = JSONSchemaUtils_1.pickFieldFromJSONSchema(vizConfig.optionsSchema, 'default');
 
   var DashboardViz = function DashboardViz(props) {
+    var _a;
+
     var mode = props.mode,
         hasEventHandlers = props.hasEventHandlers,
         dataSources = props.dataSources,
@@ -2091,7 +3038,7 @@ var withDashboardViz = function withDashboardViz(opts) {
         _React$useState4 = _slicedToArray(_React$useState3, 1),
         visualizationID = _React$useState4[0];
 
-    var _React$useState5 = React.useState(Boolean(featureFlagContext && featureFlagContext['visualizations.useWebWorkersForDSL'] && typeof Worker !== 'undefined')),
+    var _React$useState5 = React.useState(Boolean(featureFlagContext && featureFlagContext.visualizations_useWebWorkersForDSL && typeof Worker !== 'undefined')),
         _React$useState6 = _slicedToArray(_React$useState5, 2),
         useAsyncEvaluatedOptions = _React$useState6[0],
         setUseAsyncEvaluatedOptions = _React$useState6[1];
@@ -2131,11 +3078,21 @@ var withDashboardViz = function withDashboardViz(opts) {
 
       return {};
     }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone, useAsyncEvaluatedOptions]);
-    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync; // useEffect hook needs to be initialized before any early returns
+    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync; // trellis specific backgroundColor update for onComputedProps
+    // if trellis is enabled following these three criteria - 1) trellis feature flag is enabled 2) vizConfig supports array has 'trellis' 3)  option 'splitByLayout' is set to 'trellis
+    // onComputedProps api should return back trellisBackgroundColor value for backgroundColor option to support coloring of sibling panels (for eg:- title/ description on UDF side)
+
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    var clonedEvaluatedOptions = lodash_1.cloneDeep(evaluatedOptionsToUse);
+
+    if (isTrellisFeatureFlagOn && ((_a = vizConfig === null || vizConfig === void 0 ? void 0 : vizConfig.supports) === null || _a === void 0 ? void 0 : _a.includes(VizBehavior_1.VizBehavior.TRELLIS)) && (clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.splitByLayout) === VizBehavior_1.VizBehavior.TRELLIS) {
+      clonedEvaluatedOptions.backgroundColor = clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor;
+    } // useEffect hook needs to be initialized before any early returns
     // this is in accordance with the order of hook calls being the same on each render https://reactjs.org/docs/hooks-rules.html#explanation
 
+
     React.useEffect(function () {
-      onComputedProps(evaluatedOptionsToUse);
+      onComputedProps(clonedEvaluatedOptions);
     });
     React.useEffect(function () {
       return function () {
@@ -2150,15 +3107,16 @@ var withDashboardViz = function withDashboardViz(opts) {
         supports = vizConfig.supports;
     var missing = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptionsToUse);
 
-    if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER)) {
-      return React.createElement(MissingPropsMessage_1.default, {
-        "data-test": "missing-props-message",
-        width: width,
-        height: height,
-        missingProps: missing,
-        backgroundColor: bgColorFromTheme
-      });
-    } // events
+    if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && vizConfig.key !== 'splunk.singlevalue' // For SV missing props msg is not displayed if required props majorValue is missing, instead this will be handled from the component, instead handled within component
+    ) {
+        return React.createElement(MissingPropsMessage_1.default, {
+          "data-test": "missing-props-message",
+          width: width,
+          height: height,
+          missingProps: missing,
+          backgroundColor: bgColorFromTheme
+        });
+      } // events
 
 
     var eventCallbackProps = {};
@@ -2262,17 +3220,10 @@ exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 36:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes/getSettingsFromThemedProps");
-
-/***/ }),
-
 /***/ 37:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/Options");
+module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
 
@@ -2318,7 +3269,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
 /* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -2464,7 +3415,7 @@ exports.default = SplunkVisualization;
 
 var _classCallCheck = __webpack_require__(11);
 
-var _createClass = __webpack_require__(20);
+var _createClass = __webpack_require__(22);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -2519,7 +3470,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDeepMemo = void 0;
 
-var react_1 = __webpack_require__(1);
+var react_1 = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 /**
@@ -2565,13 +3516,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var i18n_1 = __webpack_require__(2);
 
-var Message_1 = __webpack_require__(10);
+var Message_1 = __webpack_require__(9);
 
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
@@ -2631,64 +3582,7 @@ exports.MissingPropsMessage.defaultProps = {
   width: '100%',
   height: 250
 };
-exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
-
-/***/ }),
-
-/***/ 459:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.themes = exports.computeVizProps = exports.PureSingleValueIcon = exports.config = void 0;
-
-var React = __webpack_require__(1);
-
-var RemoteIcon_1 = __webpack_require__(460);
-
-var iconUtils_1 = __webpack_require__(461);
-
-var SingleValueIcon_1 = __webpack_require__(480);
-
-var withDashboardViz_1 = __webpack_require__(35);
-
-var config_1 = __webpack_require__(462);
-
-exports.config = config_1.default;
-exports.PureSingleValueIcon = SingleValueIcon_1.default;
-
-var computeVizProps = function computeVizProps(_ref) {
-  var icon = _ref.icon,
-      _ref$IconComponent = _ref.IconComponent,
-      IconComponent = _ref$IconComponent === void 0 ? null : _ref$IconComponent,
-      themeFunc = _ref.themeFunc;
-
-  if (icon && (iconUtils_1.isRemoteIcon(icon) || iconUtils_1.isDataURI(icon))) {
-    // eslint-disable-next-line no-param-reassign
-    IconComponent = React.createElement(RemoteIcon_1.default, {
-      iconURL: icon
-    });
-  }
-
-  return {
-    IconComponent: IconComponent,
-    defaultFontColor: themeFunc('defaultFontColor'),
-    defaultBlockFontColor: themeFunc('defaultBlockFontColor')
-  };
-};
-
-exports.computeVizProps = computeVizProps;
-var viz = withDashboardViz_1.default({
-  ReactViz: SingleValueIcon_1.default,
-  vizConfig: config_1.default,
-  computeVizProps: exports.computeVizProps
-});
-exports.themes = config_1.default.themes;
-exports.default = viz;
+exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
 
 /***/ }),
 
@@ -2702,18 +3596,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(14);
+var hocUtils_1 = __webpack_require__(15);
 
 var Cover = styled_components_1.default.div.withConfig({
   displayName: "withEditModeCover__Cover",
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "25.6.0 - f5eb3abf9"
+  'data-splunk-visualization-version': "25.7.1 - 6a77c5530"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -2745,27 +3639,90 @@ exports.default = withEditModeCover;
 
 /***/ }),
 
-/***/ 460:
+/***/ 466:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themes = exports.computeVizProps = exports.PureSingleValueIcon = exports.config = void 0;
+
+var React = __webpack_require__(0);
+
+var RemoteIcon_1 = __webpack_require__(467);
+
+var iconUtils_1 = __webpack_require__(468);
+
+var SingleValueIcon_1 = __webpack_require__(486);
+
+var withDashboardViz_1 = __webpack_require__(36);
+
+var config_1 = __webpack_require__(469);
+
+var withTrellis_1 = __webpack_require__(102);
+
+exports.config = config_1.default;
+exports.PureSingleValueIcon = SingleValueIcon_1.default;
+
+var computeVizProps = function computeVizProps(_ref) {
+  var icon = _ref.icon,
+      _ref$IconComponent = _ref.IconComponent,
+      IconComponent = _ref$IconComponent === void 0 ? null : _ref$IconComponent,
+      themeFunc = _ref.themeFunc,
+      trellisKey = _ref.trellisKey,
+      trellisSplitBy = _ref.trellisSplitBy;
+
+  if (icon && (iconUtils_1.isRemoteIcon(icon) || iconUtils_1.isDataURI(icon))) {
+    // eslint-disable-next-line no-param-reassign
+    IconComponent = React.createElement(RemoteIcon_1.default, {
+      iconURL: icon
+    });
+  }
+
+  return {
+    IconComponent: IconComponent,
+    defaultFontColor: themeFunc('defaultFontColor'),
+    defaultBlockFontColor: themeFunc('defaultBlockFontColor'),
+    trellisKey: trellisKey,
+    trellisSplitBy: trellisSplitBy
+  };
+};
+
+exports.computeVizProps = computeVizProps;
+var viz = withTrellis_1.default(withDashboardViz_1.default({
+  ReactViz: SingleValueIcon_1.default,
+  vizConfig: config_1.default,
+  computeVizProps: exports.computeVizProps
+}));
+exports.themes = config_1.default.themes;
+exports.default = viz;
+
+/***/ }),
+
+/***/ 467:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/RemoteIcon");
 
 /***/ }),
 
-/***/ 461:
+/***/ 468:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/iconUtils");
 
 /***/ }),
 
-/***/ 462:
+/***/ 469:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(8);
+var _toConsumableArray = __webpack_require__(7);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -2775,37 +3732,41 @@ var i18n_1 = __webpack_require__(2);
 
 var schemaUtils_1 = __webpack_require__(16);
 
-var PresetPalettes_1 = __webpack_require__(57);
+var PresetPalettes_1 = __webpack_require__(60);
 
-var pick_1 = __webpack_require__(22);
+var pick_1 = __webpack_require__(23);
 
-var variables_1 = __webpack_require__(9);
+var variables_1 = __webpack_require__(10);
 
-var configUtils_1 = __webpack_require__(19);
+var configUtils_1 = __webpack_require__(21);
 
-var singleValueContext_1 = __webpack_require__(125);
+var singleValueContext_1 = __webpack_require__(133);
 
-var StaticMajorAndTrendLayout_1 = __webpack_require__(94);
+var StaticMajorAndTrendLayout_1 = __webpack_require__(98);
 
-var StaticBackgroundColorEditor_1 = __webpack_require__(81);
+var StaticBackgroundColorEditor_1 = __webpack_require__(84);
 
-var StaticIconColorEditor_1 = __webpack_require__(463);
+var StaticIconColorEditor_1 = __webpack_require__(470);
 
-var StaticMajorColorEditor_1 = __webpack_require__(95);
+var StaticMajorColorEditor_1 = __webpack_require__(99);
 
-var StaticTrendColorEditor_1 = __webpack_require__(96);
+var StaticTrendColorEditor_1 = __webpack_require__(100);
 
-var DynamicMajorColorEditor_1 = __webpack_require__(91);
+var DynamicMajorColorEditor_1 = __webpack_require__(95);
 
-var DynamicTrendColorEditor_1 = __webpack_require__(92);
+var DynamicTrendColorEditor_1 = __webpack_require__(96);
 
-var DynamicBackgroundColorEditor_1 = __webpack_require__(93);
+var DynamicBackgroundColorEditor_1 = __webpack_require__(97);
+
+var TrellisEditors_1 = __webpack_require__(101);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var configUtils_2 = __webpack_require__(18);
+var configUtils_2 = __webpack_require__(19);
+
+var VizCategory_1 = __webpack_require__(35);
 
-var VizCategory_1 = __webpack_require__(34);
+var layoutUtils_1 = __webpack_require__(58);
 
 var dataContract = {
   requiredDataSources: [{
@@ -2894,6 +3855,13 @@ var optionsSchema = {
     description: 'Specify whether to enable or disable the value and trend indicator displays.',
     type: 'boolean'
   },
+  splitByLayout: {
+    default: 'off',
+    description: 'Specify the layout method by which to display the visualization, which splits the data into individual visualizations based on a certain category.',
+    type: 'string',
+    pattern: schemaUtils_1.getPattern([layoutUtils_1.LAYOUT_TYPE.Off, layoutUtils_1.LAYOUT_TYPE.Trellis]),
+    enum: [layoutUtils_1.LAYOUT_TYPE.Off, layoutUtils_1.LAYOUT_TYPE.Trellis]
+  },
   trendColor: {
     default: '> themes.defaultFontColor',
     description: 'Specify the color for the trend value. You may use a dataSource to apply the color. The hex value format should be “#FFFFFF”. The default for enterprise light is "#000000". The default for enterprise dark is "#ffffff". The default for prisma dark is "rgba(255, 255, 255, 0.98)".',
@@ -2915,6 +3883,37 @@ var optionsSchema = {
     description: 'The trend value to display in the visualization.',
     type: 'number'
   },
+  trellisBackgroundColor: {
+    default: '> themes.defaultBackgroundColor',
+    description: 'Specify the color used for the trellis container background by using a hexadecimal code. For example, #0000FF.',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
+    type: 'string'
+  },
+  trellisColumns: {
+    description: 'Specify the number of visualizations to display in a given row of the trellis container. The remaining visualizations will wrap accordingly. If nothing is specified, it will be auto-set based on the trellisMinColumnWidth.',
+    type: 'number',
+    minimum: 0
+  },
+  trellisMinColumnWidth: {
+    default: 100,
+    description: 'Specify the minimum width, in pixels, of each visualization in the trellis container. If the window or panel is resized, the remaining visualizations may be viewed by scrolling.',
+    type: 'number'
+  },
+  trellisPageCount: {
+    default: 20,
+    minimum: 0,
+    description: 'Specify the maximum number of visualizations to display in a single page in the trellis container. The remaining visualizations will paginate accordingly.',
+    type: 'number'
+  },
+  trellisRowHeight: {
+    default: 70,
+    description: 'Specify the height, in pixels, of each visualization in the trellis container. If the window or panel is resized, the remaining visualizations may be viewed by scrolling.',
+    type: 'number'
+  },
+  trellisSplitBy: {
+    description: 'Specify the field name of the column with categories used, or “aggregations”, to split the data into individual visualizations for trellis display, if applicable. If a SPL `timechart` command is used, this may default to the SPL `by` clause field. If a SPL `chart` command is used, this may default to the first string field.',
+    type: 'string'
+  },
   underLabel: {
     description: 'Specify the text that appears below the major value.',
     type: 'string'
@@ -3032,6 +4031,31 @@ var themes = {
   }
 };
 var editorConfig = [{
+  label: i18n_1._('Data configurations'),
+  layout: [[{
+    label: i18n_1._('Value'),
+    editor: 'editor.columnSelector',
+    option: 'majorValue',
+    context: 'valuesContext',
+    editorProps: {
+      dataSourceKey: 'primary',
+      prepareValue: function prepareValue(definition) {
+        var baseSPL = definition.options.majorValue;
+        return {
+          context: {},
+          options: {
+            majorValue: "".concat(baseSPL, " | lastPoint()"),
+            trendValue: "".concat(baseSPL, " | delta(-2)")
+          }
+        };
+      }
+    },
+    isDisabled: function isDisabled(_ref) {
+      var options = _ref.options;
+      return options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
+    }
+  }]]
+}, {
   label: i18n_1._('Data display'),
   layout: [[{
     label: i18n_1._('Show major and trend value'),
@@ -3053,11 +4077,11 @@ var editorConfig = [{
         value: 'off'
       }]
     },
-    showEditor: function showEditor(_ref) {
-      var options = _ref.options;
+    showEditor: function showEditor(_ref2) {
+      var options = _ref2.options;
       return options.showValue || options.showValue === undefined;
     }
-  }]])
+  }]], _toConsumableArray(TrellisEditors_1.TrellisEditorConfig))
 }, {
   label: i18n_1._('Color and style'),
   layout: [[{
@@ -3066,24 +4090,24 @@ var editorConfig = [{
     editor: 'editor.presetSelector',
     editorProps: {
       presets: presets,
-      value: function value(_ref2) {
-        var context = _ref2.context,
-            options = _ref2.options;
+      value: function value(_ref3) {
+        var context = _ref3.context,
+            options = _ref3.options;
         var initialPreset = configUtils_2.getInitialPreset(context, options, presets);
         return initialPreset && initialPreset.label || null;
       }
     }
   }], StaticIconColorEditor_1.default, [{
-    label: i18n_1._('Dynamic icon'),
+    label: i18n_1._('Icon'),
     option: 'iconColor',
     context: 'iconColorEditorConfig',
     editor: 'editor.dynamicColor',
-    showEditor: function showEditor(_ref3) {
-      var options = _ref3.options;
+    showEditor: function showEditor(_ref4) {
+      var options = _ref4.options;
       return configUtils_1.isDynamicOption(options.iconColor);
     },
     editorProps: {
-      labelPosition: 'left',
+      labelPosition: 'top',
       flyoutTitle: 'Dynamic coloring: icon',
       formatters: [{
         label: i18n_1._('Ranges'),
@@ -3110,7 +4134,6 @@ var editorConfig = [{
     }
   }], [Object.assign(Object.assign({}, StaticMajorColorEditor_1.default), {
     editorProps: {
-      labelPosition: 'left',
       themes: themes
     }
   })], [DynamicMajorColorEditor_1.getDynamicMajorColorEditor({
@@ -3118,7 +4141,6 @@ var editorConfig = [{
     defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
   })], [Object.assign(Object.assign({}, StaticTrendColorEditor_1.default), {
     editorProps: {
-      labelPosition: 'left',
       themes: themes
     }
   })], [DynamicTrendColorEditor_1.getDynamicTrendColorEditor({
@@ -3126,7 +4148,10 @@ var editorConfig = [{
     defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
   })], [Object.assign(Object.assign({}, StaticBackgroundColorEditor_1.default), {
     editorProps: {
-      labelPosition: 'left',
+      themes: themes
+    }
+  })], [Object.assign(Object.assign({}, TrellisEditors_1.TrellisBackgroundColorEditor), {
+    editorProps: {
       themes: themes
     }
   })], [DynamicBackgroundColorEditor_1.getDynamicBackgroundColorEditor({
@@ -3140,8 +4165,8 @@ var editorConfig = [{
       min: 1
     },
     placeholder: i18n_1._('Auto'),
-    showEditor: function showEditor(_ref4) {
-      var options = _ref4.options;
+    showEditor: function showEditor(_ref5) {
+      var options = _ref5.options;
       return options.showValue || options.showValue === undefined;
     }
   }, {
@@ -3152,12 +4177,12 @@ var editorConfig = [{
       min: 1
     },
     placeholder: i18n_1._('Auto'),
-    showEditor: function showEditor(_ref5) {
-      var options = _ref5.options;
+    showEditor: function showEditor(_ref6) {
+      var options = _ref6.options;
       return options.showValue || options.showValue === undefined;
     },
-    isDisabled: function isDisabled(_ref6) {
-      var options = _ref6.options;
+    isDisabled: function isDisabled(_ref7) {
+      var options = _ref7.options;
       return options.trendDisplay === 'off';
     }
   }]]
@@ -3193,48 +4218,13 @@ var config = {
       payloadKeys: ['majorValue', 'trendValue', 'icon']
     }
   },
-  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS],
+  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.TRELLIS],
   themes: themes
 };
 exports.default = configUtils_2.enhanceConfig(config);
 
 /***/ }),
 
-/***/ 463:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
-/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(49);
-/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(19);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3__);
-
-
-
-
-var StaticIconColorEditor = [{
-  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1__["_"])('Icon'),
-  option: 'iconColor',
-  editor: 'editor.color',
-  showEditor: function showEditor(_ref) {
-    var options = _ref.options;
-    return !Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3__["isDynamicOption"])(options.iconColor);
-  },
-  editorProps: {
-    labelPosition: 'left',
-    value: null,
-    palette: [null].concat(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__["COLOR_EDITOR_PALETTE"]))
-  }
-}];
-/* harmony default export */ __webpack_exports__["default"] = (StaticIconColorEditor);
-
-/***/ }),
-
 /***/ 47:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -3245,17 +4235,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var colorUtils_1 = __webpack_require__(12);
 
-var variables_1 = __webpack_require__(9);
+var variables_1 = __webpack_require__(10);
 
-var IconPlaceholder_1 = __webpack_require__(30);
+var IconPlaceholder_1 = __webpack_require__(31);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var hocUtils_1 = __webpack_require__(14);
+var hocUtils_1 = __webpack_require__(15);
 
 var withPlaceholder = function withPlaceholder(Visualization) {
   var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
@@ -3300,7 +4290,42 @@ exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 480:
+/***/ 470:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7);
+/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(49);
+/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(21);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3__);
+
+
+
+
+var StaticIconColorEditor = [{
+  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1__["_"])('Icon'),
+  option: 'iconColor',
+  editor: 'editor.color',
+  showEditor: function showEditor(_ref) {
+    var options = _ref.options;
+    return !Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3__["isDynamicOption"])(options.iconColor);
+  },
+  editorProps: {
+    labelPosition: 'top',
+    value: null,
+    palette: [null].concat(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__["COLOR_EDITOR_PALETTE"]))
+  }
+}];
+/* harmony default export */ __webpack_exports__["default"] = (StaticIconColorEditor);
+
+/***/ }),
+
+/***/ 486:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3312,11 +4337,11 @@ var extends_ = __webpack_require__(52);
 var extends_default = /*#__PURE__*/__webpack_require__.n(extends_);
 
 // EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(1);
+var external_react_ = __webpack_require__(0);
 var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
 
 // EXTERNAL MODULE: external "prop-types"
-var external_prop_types_ = __webpack_require__(0);
+var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -3324,60 +4349,70 @@ var external_styled_components_ = __webpack_require__(4);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "lodash/pick"
-var pick_ = __webpack_require__(74);
+var pick_ = __webpack_require__(77);
 var pick_default = /*#__PURE__*/__webpack_require__.n(pick_);
 
 // EXTERNAL MODULE: external "lodash/isEmpty"
-var isEmpty_ = __webpack_require__(75);
+var isEmpty_ = __webpack_require__(78);
 var isEmpty_default = /*#__PURE__*/__webpack_require__.n(isEmpty_);
 
+// EXTERNAL MODULE: external "@splunk/visualization-context/FeatureFlagContext"
+var FeatureFlagContext_ = __webpack_require__(20);
+var FeatureFlagContext_default = /*#__PURE__*/__webpack_require__.n(FeatureFlagContext_);
+
 // EXTERNAL MODULE: external "@splunk/visualizations-shared/style"
-var style_ = __webpack_require__(15);
+var style_ = __webpack_require__(14);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
 var i18n_ = __webpack_require__(2);
 
 // EXTERNAL MODULE: external "@splunk/visualizations-shared/SizeAwareWrapper"
-var SizeAwareWrapper_ = __webpack_require__(21);
+var SizeAwareWrapper_ = __webpack_require__(18);
 var SizeAwareWrapper_default = /*#__PURE__*/__webpack_require__.n(SizeAwareWrapper_);
 
 // EXTERNAL MODULE: external "@splunk/visualizations-shared/Message"
-var Message_ = __webpack_require__(10);
+var Message_ = __webpack_require__(9);
 var Message_default = /*#__PURE__*/__webpack_require__.n(Message_);
 
 // EXTERNAL MODULE: ./src/common/components/VizStyleWrapper.jsx
-var VizStyleWrapper = __webpack_require__(66);
+var VizStyleWrapper = __webpack_require__(68);
+
+// EXTERNAL MODULE: ./src/common/components/TrellisTitle.tsx
+var TrellisTitle = __webpack_require__(74);
+
+// EXTERNAL MODULE: ./src/common/utils/layoutUtils.ts
+var layoutUtils = __webpack_require__(58);
 
 // EXTERNAL MODULE: external "@babel/runtime/helpers/defineProperty"
-var defineProperty_ = __webpack_require__(7);
+var defineProperty_ = __webpack_require__(8);
 var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty_);
 
 // EXTERNAL MODULE: external "@splunk/visualizations/SingleValueBasic"
-var SingleValueBasic_ = __webpack_require__(131);
+var SingleValueBasic_ = __webpack_require__(139);
 var SingleValueBasic_default = /*#__PURE__*/__webpack_require__.n(SingleValueBasic_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/Activity"
-var Activity_ = __webpack_require__(160);
+var Activity_ = __webpack_require__(167);
 var Activity_default = /*#__PURE__*/__webpack_require__.n(Activity_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/Clock"
-var Clock_ = __webpack_require__(161);
+var Clock_ = __webpack_require__(168);
 var Clock_default = /*#__PURE__*/__webpack_require__.n(Clock_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/Pencil"
-var Pencil_ = __webpack_require__(162);
+var Pencil_ = __webpack_require__(169);
 var Pencil_default = /*#__PURE__*/__webpack_require__.n(Pencil_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/Star"
-var Star_ = __webpack_require__(163);
+var Star_ = __webpack_require__(170);
 var Star_default = /*#__PURE__*/__webpack_require__.n(Star_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/Question"
-var Question_ = __webpack_require__(164);
+var Question_ = __webpack_require__(171);
 var Question_default = /*#__PURE__*/__webpack_require__.n(Question_);
 
 // EXTERNAL MODULE: ./src/common/utils/singleValueUtils.js
-var singleValueUtils = __webpack_require__(23);
+var singleValueUtils = __webpack_require__(24);
 
 // CONCATENATED MODULE: ./src/SingleValueIcon/PureSingleValueIcon/utils/iconUtils.js
 // Todo: this will be replaced by IconLibrary.Registry
@@ -3750,6 +4785,9 @@ SingleValueIconLayout_SingleValueIconLayout.propTypes = _objectSpread(_objectSpr
 
 
 
+
+
+
 var Container = external_styled_components_default.a.div.withConfig({
   displayName: "SingleValueIcon__Container",
   componentId: "y660ip-0"
@@ -3780,7 +4818,12 @@ var SingleValueIcon_SingleValueIcon = function SingleValueIcon(_ref) {
       noResult = props.noResult,
       onValueClick = props.onValueClick,
       defaultFontColor = props.defaultFontColor,
-      defaultBlockFontColor = props.defaultBlockFontColor;
+      defaultBlockFontColor = props.defaultBlockFontColor,
+      splitByLayout = props.splitByLayout,
+      _props$trellisKey = props.trellisKey,
+      trellisKey = _props$trellisKey === void 0 ? '' : _props$trellisKey,
+      _props$trellisSplitBy = props.trellisSplitBy,
+      trellisSplitBy = _props$trellisSplitBy === void 0 ? '' : _props$trellisSplitBy;
   var defaultColors = {
     defaultBlockFontColor: defaultBlockFontColor,
     defaultFontColor: defaultFontColor
@@ -3798,9 +4841,12 @@ var SingleValueIcon_SingleValueIcon = function SingleValueIcon(_ref) {
     defaultFontColor: defaultColors.defaultFontColor,
     defaultBlockFontColor: defaultColors.defaultBlockFontColor
   });
+  var featureFlagContext = external_react_default.a.useContext(FeatureFlagContext_default.a);
+  var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+  var trellisEnabled = isTrellisFeatureFlagOn && splitByLayout === layoutUtils["LAYOUT_TYPE"].Trellis;
   var handleValueClick = Object(external_react_["useCallback"])(function (ev) {
-    return Object(singleValueUtils["handleValueClickCallback"])(ev, majorValue, majorValueField, trendValue, onValueClick);
-  }, [onValueClick, majorValue, majorValueField, trendValue]);
+    return Object(singleValueUtils["handleValueClickCallback"])(ev, majorValue, majorValueField, trendValue, onValueClick, trellisEnabled, trellisSplitBy, trellisKey);
+  }, [onValueClick, majorValue, majorValueField, trendValue, trellisEnabled, trellisSplitBy, trellisKey]);
 
   var renderVisualization = function renderVisualization(_ref2) {
     var containerWidth = _ref2.width,
@@ -3968,6 +5014,19 @@ var SingleValueIcon_SingleValueIcon = function SingleValueIcon(_ref) {
     }, IconLayout);
   };
 
+  if (isTrellisFeatureFlagOn && splitByLayout === layoutUtils["LAYOUT_TYPE"].Trellis) {
+    return /*#__PURE__*/external_react_default.a.createElement(external_react_default.a.Fragment, null, /*#__PURE__*/external_react_default.a.createElement(TrellisTitle["TrellisTitle"], {
+      fontColor: defaultFontColor,
+      backgroundColor: backgroundColor,
+      trellisKey: trellisKey
+    }), /*#__PURE__*/external_react_default.a.createElement(Container, {
+      width: width,
+      height: height - TrellisTitle["TRELLIS_TITLE_HEIGHT"]
+    }, /*#__PURE__*/external_react_default.a.createElement(SizeAwareWrapper_default.a, null, function (containerDimension) {
+      return renderVisualization(containerDimension);
+    })));
+  }
+
   return /*#__PURE__*/external_react_default.a.createElement(Container, {
     width: width,
     height: height
@@ -4005,7 +5064,10 @@ SingleValueIcon_SingleValueIcon.propTypes = {
   noResult: external_prop_types_default.a.bool,
   onValueClick: external_prop_types_default.a.func,
   defaultFontColor: external_prop_types_default.a.string,
-  defaultBlockFontColor: external_prop_types_default.a.string
+  defaultBlockFontColor: external_prop_types_default.a.string,
+  splitByLayout: external_prop_types_default.a.string,
+  trellisKey: external_prop_types_default.a.string,
+  trellisSplitBy: external_prop_types_default.a.string
 };
 SingleValueIcon_SingleValueIcon.defaultProps = {
   width: '100%',
@@ -4023,7 +5085,9 @@ SingleValueIcon_SingleValueIcon.defaultProps = {
   showValue: true,
   noDataSources: false,
   noResult: false,
-  onValueClick: function onValueClick() {}
+  onValueClick: function onValueClick() {},
+  trellisKey: '',
+  trellisSplitBy: ''
 };
 /* harmony default export */ var PureSingleValueIcon_SingleValueIcon = __webpack_exports__["default"] = (SingleValueIcon_SingleValueIcon);
 
@@ -4053,7 +5117,33 @@ module.exports = require("@splunk/visualizations-shared/domUtils");
 /***/ 57:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-color-palettes/editors/PresetPalettes");
+module.exports = require("@splunk/themes/useSplunkTheme");
+
+/***/ }),
+
+/***/ 58:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LAYOUT_TYPE = void 0;
+var LAYOUT_TYPE;
+
+(function (LAYOUT_TYPE) {
+  LAYOUT_TYPE["Off"] = "off";
+  LAYOUT_TYPE["Trellis"] = "trellis";
+})(LAYOUT_TYPE = exports.LAYOUT_TYPE || (exports.LAYOUT_TYPE = {}));
+
+/***/ }),
+
+/***/ 59:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes");
 
 /***/ }),
 
@@ -4091,11 +5181,19 @@ var VizBehavior;
 
   VizBehavior["PLACEHOLDER"] = "placeholder";
   VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
+  VizBehavior["TRELLIS"] = "trellis";
 })(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
 
 /***/ }),
 
-/***/ 66:
+/***/ 60:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-color-palettes/editors/PresetPalettes");
+
+/***/ }),
+
+/***/ 68:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4122,18 +5220,68 @@ VizStyleWrapper.displayName = 'VizStyleWrapper';
 /***/ 7:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/defineProperty");
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
 /***/ 74:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TrellisTitle = exports.TRELLIS_TITLE_HEIGHT = void 0;
+
+var React = __webpack_require__(0);
+
+var styled_components_1 = __webpack_require__(4);
+
+exports.TRELLIS_TITLE_HEIGHT = 28;
+var TrellisTitleText = styled_components_1.default.div.withConfig({
+  displayName: "TrellisTitle__TrellisTitleText",
+  componentId: "sc-2cu404-0"
+})(["margin-left:10px;margin-right:10px;padding-top:8px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;"]);
+var TrellisTitleDiv = styled_components_1.default.div.withConfig({
+  displayName: "TrellisTitle__TrellisTitleDiv",
+  componentId: "sc-2cu404-1"
+})(["height:", "px;font-size:14px;font-weight:700;color:", ";background-color:", ";box-shadow:0 1px ", ";"], exports.TRELLIS_TITLE_HEIGHT, function (props) {
+  return props.fontColor;
+}, function (props) {
+  return props.backgroundColor;
+}, function (props) {
+  return props.backgroundColor;
+});
+
+var TrellisTitle = function TrellisTitle(props) {
+  return React.createElement(TrellisTitleDiv, {
+    fontColor: props.fontColor,
+    backgroundColor: props.backgroundColor,
+    "data-test": "trellis-title"
+  }, React.createElement(TrellisTitleText, null, String(props.trellisKey).toString()));
+};
+
+exports.TrellisTitle = TrellisTitle;
+
+/***/ }),
+
+/***/ 76:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/trellisUtils");
+
+/***/ }),
+
+/***/ 77:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/pick");
 
 /***/ }),
 
-/***/ 75:
+/***/ 78:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/isEmpty");
@@ -4143,18 +5291,18 @@ module.exports = require("lodash/isEmpty");
 /***/ 8:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 
-/***/ 81:
+/***/ 84:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(19);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -4171,14 +5319,21 @@ var StaticBackgroundColorEditor = {
 
 /***/ }),
 
+/***/ 87:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Paginator");
+
+/***/ }),
+
 /***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/variables");
+module.exports = require("@splunk/visualizations-shared/Message");
 
 /***/ }),
 
-/***/ 91:
+/***/ 95:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4186,7 +5341,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicMajorColorEditor", function() { return getDynamicMajorColorEditor; });
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(19);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -4194,7 +5349,7 @@ var getDynamicMajorColorEditor = function getDynamicMajorColorEditor(_ref) {
   var defaultContext = _ref.defaultContext,
       defaultPalettesConfig = _ref.defaultPalettesConfig;
   return {
-    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic major value'),
+    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Major value'),
     option: 'majorColor',
     context: 'majorColorEditorConfig',
     editor: 'editor.dynamicColor',
@@ -4203,7 +5358,7 @@ var getDynamicMajorColorEditor = function getDynamicMajorColorEditor(_ref) {
       return Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.majorColor);
     },
     editorProps: {
-      labelPosition: 'left',
+      labelPosition: 'top',
       flyoutTitle: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic coloring: major value'),
       formatters: [{
         label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Ranges'),
@@ -4229,7 +5384,7 @@ var getDynamicMajorColorEditor = function getDynamicMajorColorEditor(_ref) {
 
 /***/ }),
 
-/***/ 92:
+/***/ 96:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4237,7 +5392,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicTrendColorEditor", function() { return getDynamicTrendColorEditor; });
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(19);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -4245,7 +5400,7 @@ var getDynamicTrendColorEditor = function getDynamicTrendColorEditor(_ref) {
   var defaultContext = _ref.defaultContext,
       defaultPalettesConfig = _ref.defaultPalettesConfig;
   return {
-    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic trend value'),
+    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Trend value'),
     option: 'trendColor',
     context: 'trendColorEditorConfig',
     editor: 'editor.dynamicColor',
@@ -4254,7 +5409,7 @@ var getDynamicTrendColorEditor = function getDynamicTrendColorEditor(_ref) {
       return Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.trendColor);
     },
     editorProps: {
-      labelPosition: 'left',
+      labelPosition: 'top',
       flyoutTitle: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic coloring: trend value'),
       formatters: [{
         label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Ranges'),
@@ -4274,7 +5429,7 @@ var getDynamicTrendColorEditor = function getDynamicTrendColorEditor(_ref) {
 
 /***/ }),
 
-/***/ 93:
+/***/ 97:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4282,7 +5437,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicBackgroundColorEditor", function() { return getDynamicBackgroundColorEditor; });
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(19);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -4290,7 +5445,7 @@ var getDynamicBackgroundColorEditor = function getDynamicBackgroundColorEditor(_
   var defaultContext = _ref.defaultContext,
       defaultPalettesConfig = _ref.defaultPalettesConfig;
   return {
-    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic background'),
+    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Background'),
     option: 'backgroundColor',
     context: 'backgroundColorEditorConfig',
     editor: 'editor.dynamicColor',
@@ -4299,7 +5454,7 @@ var getDynamicBackgroundColorEditor = function getDynamicBackgroundColorEditor(_
       return Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.backgroundColor);
     },
     editorProps: {
-      labelPosition: 'left',
+      labelPosition: 'top',
       flyoutTitle: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic coloring: background'),
       formatters: [{
         label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Ranges'),
@@ -4329,7 +5484,7 @@ var getDynamicBackgroundColorEditor = function getDynamicBackgroundColorEditor(_
 
 /***/ }),
 
-/***/ 94:
+/***/ 98:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4380,14 +5535,14 @@ var StaticMajorAndTrendLayout = [[{
 
 /***/ }),
 
-/***/ 95:
+/***/ 99:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(19);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -4402,34 +5557,6 @@ var StaticMajorColorEditor = {
 };
 /* harmony default export */ __webpack_exports__["default"] = (StaticMajorColorEditor);
 
-/***/ }),
-
-/***/ 96:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(19);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
-
-
-var StaticTrendColorEditor = {
-  label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Trend value'),
-  option: 'trendColor',
-  editor: 'editor.color',
-  showEditor: function showEditor(_ref) {
-    var options = _ref.options;
-    return !Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.trendColor);
-  },
-  isDisabled: function isDisabled(_ref2) {
-    var options = _ref2.options;
-    return options.trendDisplay === 'off';
-  }
-};
-/* harmony default export */ __webpack_exports__["default"] = (StaticTrendColorEditor);
-
 /***/ })
 
 /******/ });