@splunk/visualizations 25.6.0 → 25.7.1

package/SingleValue.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 456);
+/******/ 	return __webpack_require__(__webpack_require__.s = 463);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -95,25 +95,952 @@ 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;
 
 /***/ }),
 
-/***/ 101:
+/***/ 108:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-sparkline/Line");
@@ -134,51 +1061,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__) {
 
@@ -189,13 +1071,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);
 
@@ -254,7 +1136,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
@@ -276,7 +1158,59 @@ exports.default = withFixedSizeContainer;
 
 /***/ }),
 
+/***/ 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'
+  }]
+};
+
+/***/ }),
+
 /***/ 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) {
 
@@ -331,14 +1258,21 @@ module.exports = require("@babel/runtime/helpers/slicedToArray");
 /***/ }),
 
 /***/ 18:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
+
+/***/ }),
+
+/***/ 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 = {};
@@ -567,13 +1501,6 @@ exports.insertLayout = insertLayout;
 
 /***/ }),
 
-/***/ 19:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/configUtils");
-
-/***/ }),
-
 /***/ 2:
 /***/ (function(module, exports) {
 
@@ -584,25 +1511,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";
@@ -637,15 +1571,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__);
@@ -1599,11 +2533,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
   }));
@@ -1611,45 +2556,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");
 
 /***/ }),
 
@@ -1661,6 +2599,13 @@ module.exports = require("lodash");
 /***/ }),
 
 /***/ 30:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/numberUtils");
+
+/***/ }),
+
+/***/ 31:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1671,15 +2616,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);
 /**
@@ -1752,27 +2697,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);
 
@@ -1796,7 +2741,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];
@@ -1830,7 +2775,7 @@ exports.getSortingParams = getSortingParams;
 
 /***/ }),
 
-/***/ 33:
+/***/ 34:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1841,7 +2786,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);
 
@@ -1861,7 +2806,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,
@@ -1887,7 +2832,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
   };
 };
 
@@ -1895,7 +2840,7 @@ exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
 
-/***/ 34:
+/***/ 35:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1924,7 +2869,7 @@ var VizCategory;
 
 /***/ }),
 
-/***/ 35:
+/***/ 36:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1936,39 +2881,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);
 
@@ -1997,6 +2942,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,
@@ -2056,7 +3003,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];
@@ -2096,11 +3043,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 () {
@@ -2115,15 +3072,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 = {};
@@ -2227,17 +3185,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");
 
 /***/ }),
 
@@ -2283,7 +3234,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);
 
@@ -2429,7 +3380,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
@@ -2484,7 +3435,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);
 /**
@@ -2530,13 +3481,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);
 /**
@@ -2573,34 +3524,87 @@ var propTypes = {
   missingProps: T.arrayOf(T.string)
 };
 /**
- * @method MissingPropsMessage
- * @param {MissingPropsProps} props
- * @returns {React.ReactElement}
+ * @method MissingPropsMessage
+ * @param {MissingPropsProps} props
+ * @returns {React.ReactElement}
+ */
+
+var MissingPropsMessage = function MissingPropsMessage(props) {
+  var width = props.width,
+      height = props.height,
+      missingProps = props.missingProps;
+  return React.createElement(Message_1.default, {
+    "data-test": "message",
+    width: width,
+    height: height,
+    message: i18n_1._("Missing property: ".concat(missingProps.join(', ')))
+  });
+};
+
+exports.MissingPropsMessage = MissingPropsMessage;
+exports.MissingPropsMessage.propTypes = propTypes;
+exports.MissingPropsMessage.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
+
+/***/ }),
+
+/***/ 46:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(0);
+
+var styled_components_1 = __webpack_require__(4);
+
+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.7.1 - 6a77c5530"
+}).withConfig({
+  displayName: "withEditModeCover__Blocker",
+  componentId: "sc-1gsbnxb-1"
+})(["position:relative;width:100%;height:100%;"]);
+/**
+ * HOC that renders a cover layer in edit mode
+ * @method withEditModeCover
+ * @param {ExtendedDashViz} Visualization
+ * @returns {ExtendedDashViz} Wrapper
  */
 
-var MissingPropsMessage = function MissingPropsMessage(props) {
-  var width = props.width,
-      height = props.height,
-      missingProps = props.missingProps;
-  return React.createElement(Message_1.default, {
-    "data-test": "message",
-    width: width,
-    height: height,
-    message: i18n_1._("Missing property: ".concat(missingProps.join(', ')))
+var withEditModeCover = function withEditModeCover(Visualization, disableEditModeCover) {
+  var Wrapper = function Wrapper(props) {
+    var mode = props.mode;
+    var showEditCover = mode === 'edit' && !disableEditModeCover;
+    return React.createElement(Blocker, null, React.createElement(Visualization, Object.assign({}, props)), showEditCover && React.createElement(Cover, {
+      "data-test": "edit-mode-cover"
+    }));
+  };
+
+  hocUtils_1.extendStaticWrapperProps({
+    Wrapper: Wrapper,
+    Visualization: Visualization
   });
+  return Wrapper;
 };
 
-exports.MissingPropsMessage = MissingPropsMessage;
-exports.MissingPropsMessage.propTypes = propTypes;
-exports.MissingPropsMessage.defaultProps = {
-  width: '100%',
-  height: 250
-};
-exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
+exports.default = withEditModeCover;
 
 /***/ }),
 
-/***/ 456:
+/***/ 463:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2624,13 +3628,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.themes = exports.computeVizProps = exports.PureSingleValue = exports.config = void 0;
 
-var SingleValue_1 = __webpack_require__(479);
+var SingleValue_1 = __webpack_require__(485);
+
+var withDashboardViz_1 = __webpack_require__(36);
 
-var withDashboardViz_1 = __webpack_require__(35);
+var singleValueUtils_1 = __webpack_require__(24);
 
-var singleValueUtils_1 = __webpack_require__(23);
+var config_1 = __webpack_require__(464);
 
-var config_1 = __webpack_require__(457);
+var withTrellis_1 = __webpack_require__(102);
 
 exports.config = config_1.default;
 exports.PureSingleValue = SingleValue_1.default;
@@ -2660,26 +3666,26 @@ var computeVizProps = function computeVizProps(_a) {
 };
 
 exports.computeVizProps = computeVizProps;
-var viz = withDashboardViz_1.default({
+var viz = withTrellis_1.default(withDashboardViz_1.default({
   ReactViz: SingleValue_1.default,
   vizConfig: config_1.default,
   computeVizProps: exports.computeVizProps,
   useIconPlaceholder: function useIconPlaceholder(dataSources, loading) {
     return singleValueUtils_1.isLoadingOrNoColumns(dataSources, loading);
   }
-});
+}));
 exports.themes = config_1.default.themes;
 exports.default = viz;
 
 /***/ }),
 
-/***/ 457:
+/***/ 464:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(8);
+var _toConsumableArray = __webpack_require__(7);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -2689,39 +3695,43 @@ 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 variables_1 = __webpack_require__(458);
+var variables_1 = __webpack_require__(465);
 
-var pick_1 = __webpack_require__(22);
+var pick_1 = __webpack_require__(23);
 
-var variables_2 = __webpack_require__(9);
+var variables_2 = __webpack_require__(10);
 
 var visualization_icons_1 = __webpack_require__(51);
 
 var placeholders_1 = __webpack_require__(48);
 
-var singleValueContext_1 = __webpack_require__(125);
+var singleValueContext_1 = __webpack_require__(133);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var DynamicMajorColorEditor_1 = __webpack_require__(91);
+var DynamicMajorColorEditor_1 = __webpack_require__(95);
+
+var DynamicTrendColorEditor_1 = __webpack_require__(96);
 
-var DynamicTrendColorEditor_1 = __webpack_require__(92);
+var DynamicBackgroundColorEditor_1 = __webpack_require__(97);
 
-var DynamicBackgroundColorEditor_1 = __webpack_require__(93);
+var StaticMajorAndTrendLayout_1 = __webpack_require__(98);
 
-var StaticMajorAndTrendLayout_1 = __webpack_require__(94);
+var StaticMajorColorEditor_1 = __webpack_require__(99);
 
-var StaticMajorColorEditor_1 = __webpack_require__(95);
+var StaticTrendColorEditor_1 = __webpack_require__(100);
 
-var StaticTrendColorEditor_1 = __webpack_require__(96);
+var StaticBackgroundColorEditor_1 = __webpack_require__(84);
 
-var StaticBackgroundColorEditor_1 = __webpack_require__(81);
+var configUtils_1 = __webpack_require__(19);
 
-var configUtils_1 = __webpack_require__(18);
+var TrellisEditors_1 = __webpack_require__(101);
 
-var VizCategory_1 = __webpack_require__(34);
+var VizCategory_1 = __webpack_require__(35);
+
+var layoutUtils_1 = __webpack_require__(58);
 
 var dataContract = {
   requiredDataSources: [{
@@ -2799,6 +3809,13 @@ var optionsSchema = {
     description: 'Show a tooltip to display values on the sparkline.',
     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]
+  },
   sparklineAreaColor: {
     default: '> sparklineStrokeColor',
     description: 'Specify the color for the sparkline area fill. You may use a dataSource to apply the color. The hex value format should be “#FFFFFF”. The graph area will have an opacity of 20% and will blend with the background color.',
@@ -2856,6 +3873,39 @@ 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: 1
+  },
+  trellisMinColumnWidth: {
+    default: 100,
+    minimum: 1,
+    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: 1,
+    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,
+    minimum: 1,
+    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'
@@ -3093,6 +4143,10 @@ var editorConfig = [{
           }
         };
       }
+    },
+    isDisabled: function isDisabled(_ref) {
+      var options = _ref.options;
+      return options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
     }
   }]]
 }, {
@@ -3113,8 +4167,8 @@ 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;
     }
   }, {
@@ -3136,7 +4190,7 @@ var editorConfig = [{
         value: 'after'
       }]
     }
-  }]])
+  }]], _toConsumableArray(TrellisEditors_1.TrellisEditorConfig))
 }, {
   label: i18n_1._('Color and style'),
   layout: [[{
@@ -3145,16 +4199,15 @@ 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_1.getInitialPreset(context, options, presets);
         return initialPreset && initialPreset.label || null;
       }
     }
   }], [Object.assign(Object.assign({}, StaticMajorColorEditor_1.default), {
     editorProps: {
-      labelPosition: 'left',
       themes: themes
     }
   })], [DynamicMajorColorEditor_1.getDynamicMajorColorEditor({
@@ -3162,7 +4215,6 @@ var editorConfig = [{
     defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
   })], [Object.assign(Object.assign({}, StaticTrendColorEditor_1.default), {
     editorProps: {
-      labelPosition: 'left',
       themes: themes
     }
   })], [DynamicTrendColorEditor_1.getDynamicTrendColorEditor({
@@ -3170,7 +4222,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({
@@ -3184,8 +4239,8 @@ var editorConfig = [{
       min: 1
     },
     placeholder: i18n_1._('Auto'),
-    showEditor: function showEditor(_ref3) {
-      var options = _ref3.options;
+    showEditor: function showEditor(_ref4) {
+      var options = _ref4.options;
       return options.showValue || options.showValue === undefined;
     }
   }, {
@@ -3196,12 +4251,12 @@ 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;
     },
-    isDisabled: function isDisabled(_ref5) {
-      var options = _ref5.options;
+    isDisabled: function isDisabled(_ref6) {
+      var options = _ref6.options;
       return options.trendDisplay === 'off';
     }
   }]]
@@ -3238,7 +4293,7 @@ var config = {
       payloadKeys: ['majorValue', 'trendValue']
     }
   },
-  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.PLACEHOLDER],
+  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.PLACEHOLDER, VizBehavior_1.VizBehavior.TRELLIS],
   themes: themes,
   requiredProps: ['majorValue']
 };
@@ -3246,66 +4301,13 @@ exports.default = configUtils_1.enhanceConfig(config);
 
 /***/ }),
 
-/***/ 458:
+/***/ 465:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-themes/variables");
 
 /***/ }),
 
-/***/ 46:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var React = __webpack_require__(1);
-
-var styled_components_1 = __webpack_require__(4);
-
-var hocUtils_1 = __webpack_require__(14);
-
-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"
-}).withConfig({
-  displayName: "withEditModeCover__Blocker",
-  componentId: "sc-1gsbnxb-1"
-})(["position:relative;width:100%;height:100%;"]);
-/**
- * HOC that renders a cover layer in edit mode
- * @method withEditModeCover
- * @param {ExtendedDashViz} Visualization
- * @returns {ExtendedDashViz} Wrapper
- */
-
-var withEditModeCover = function withEditModeCover(Visualization, disableEditModeCover) {
-  var Wrapper = function Wrapper(props) {
-    var mode = props.mode;
-    var showEditCover = mode === 'edit' && !disableEditModeCover;
-    return React.createElement(Blocker, null, React.createElement(Visualization, Object.assign({}, props)), showEditCover && React.createElement(Cover, {
-      "data-test": "edit-mode-cover"
-    }));
-  };
-
-  hocUtils_1.extendStaticWrapperProps({
-    Wrapper: Wrapper,
-    Visualization: Visualization
-  });
-  return Wrapper;
-};
-
-exports.default = withEditModeCover;
-
-/***/ }),
-
 /***/ 47:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -3316,17 +4318,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;
@@ -3371,7 +4373,14 @@ exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 479:
+/***/ 48:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-icons/placeholders");
+
+/***/ }),
+
+/***/ 485:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3387,11 +4396,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"
@@ -3399,36 +4408,46 @@ 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/visualizations-shared/style"
-var style_ = __webpack_require__(15);
+var style_ = __webpack_require__(14);
 
 // 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/visualization-context/FeatureFlagContext"
+var FeatureFlagContext_ = __webpack_require__(20);
+var FeatureFlagContext_default = /*#__PURE__*/__webpack_require__.n(FeatureFlagContext_);
+
 // 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: ./src/SingleValueBasic/SingleValueBasic.jsx + 2 modules
-var SingleValueBasic = __webpack_require__(73);
+var SingleValueBasic = __webpack_require__(75);
 
 // EXTERNAL MODULE: external "@splunk/react-sparkline/Line"
-var Line_ = __webpack_require__(101);
+var Line_ = __webpack_require__(108);
 var Line_default = /*#__PURE__*/__webpack_require__.n(Line_);
 
 // EXTERNAL MODULE: external "@splunk/visualizations-shared/propUtils"
-var propUtils_ = __webpack_require__(25);
+var propUtils_ = __webpack_require__(28);
 
 // CONCATENATED MODULE: ./src/SingleValue/PureSingleValue/SingleValueSparkline.jsx
 
@@ -3495,10 +4514,10 @@ SingleValueSparkline_SingleValueSparkline.propTypes = {
 var colorConstants_ = __webpack_require__(49);
 
 // EXTERNAL MODULE: external "@splunk/visualizations-shared/numberUtils"
-var numberUtils_ = __webpack_require__(29);
+var numberUtils_ = __webpack_require__(30);
 
 // EXTERNAL MODULE: ./src/common/utils/singleValueUtils.js
-var singleValueUtils = __webpack_require__(23);
+var singleValueUtils = __webpack_require__(24);
 
 // CONCATENATED MODULE: ./src/SingleValue/PureSingleValue/utils/displayUtils.js
 
@@ -3924,6 +4943,9 @@ StandardLayout_SingleValueContent.propTypes = _objectSpread(_objectSpread({}, Si
 
 
 
+
+
+
 var SingleValue_CONTENT_OVERFLOW_FADEOUT_AREA_PX = 16;
 var DEFAULT_CONTENT_HEIGHT_ALLOCATION_RATIO = 0.8;
 var DEFAULT_SPARKLINE_SEVERITY_COLORS = {
@@ -3989,16 +5011,25 @@ var SingleValue_SingleValue = function SingleValue(_ref) {
       defaultBlockFontColor = props.defaultBlockFontColor,
       _props$sparklineSever = props.sparklineSeverityColors,
       sparklineSeverityColors = _props$sparklineSever === void 0 ? DEFAULT_SPARKLINE_SEVERITY_COLORS : _props$sparklineSever,
-      sparklineAreaColor = props.sparklineAreaColor;
+      sparklineAreaColor = props.sparklineAreaColor,
+      defaultThemeColors = props.defaultThemeColors,
+      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 = {
     defaultFontColor: defaultFontColor,
     defaultBackgroundColor: defaultBackgroundColor,
     defaultBlockFontColor: defaultBlockFontColor,
     sparklineSeverityColors: sparklineSeverityColors
   };
+  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]); // FIXME todo 'compute colors' is not pure, it must be lifted into behavior or DSL
+    return Object(singleValueUtils["handleValueClickCallback"])(ev, majorValue, majorValueField, trendValue, onValueClick, trellisEnabled, trellisSplitBy, trellisKey);
+  }, [onValueClick, majorValue, majorValueField, trendValue, trellisEnabled, trellisSplitBy, trellisKey]); // FIXME todo 'compute colors' is not pure, it must be lifted into behavior or DSL
   // compute colors
 
   var _computeColors = Object(singleValueUtils["computeColors"])(props, defaultColors),
@@ -4160,6 +5191,19 @@ var SingleValue_SingleValue = function SingleValue(_ref) {
     }));
   };
 
+  if (trellisEnabled) {
+    return /*#__PURE__*/external_react_default.a.createElement(external_react_default.a.Fragment, null, /*#__PURE__*/external_react_default.a.createElement(TrellisTitle["TrellisTitle"], {
+      fontColor: defaultThemeColors === null || defaultThemeColors === void 0 ? void 0 : defaultThemeColors.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
@@ -4202,7 +5246,11 @@ SingleValue_SingleValue.propTypes = {
   defaultFontColor: external_prop_types_default.a.string,
   defaultBackgroundColor: external_prop_types_default.a.string,
   defaultBlockFontColor: external_prop_types_default.a.string,
-  sparklineSeverityColors: external_prop_types_default.a.object
+  sparklineSeverityColors: external_prop_types_default.a.object,
+  defaultThemeColors: external_prop_types_default.a.object,
+  splitByLayout: external_prop_types_default.a.string,
+  trellisKey: external_prop_types_default.a.string,
+  trellisSplitBy: external_prop_types_default.a.string
 };
 SingleValue_SingleValue.defaultProps = {
   width: '100%',
@@ -4222,7 +5270,9 @@ SingleValue_SingleValue.defaultProps = {
   sparklineHighlightSegments: 0,
   sparklineHighlightDots: 0,
   hasEventHandlers: false,
-  onValueClick: function onValueClick() {} // fixme todo: a pure viz should not be passed a map of severity colors! This should be resolved
+  onValueClick: function onValueClick() {},
+  trellisKey: '',
+  trellisSplitBy: '' // fixme todo: a pure viz should not be passed a map of severity colors! This should be resolved
   // by behaviors or DSL in future. Pure viz does not understand concepts such as severity.
 
 };
@@ -4230,13 +5280,6 @@ SingleValue_SingleValue.defaultProps = {
 
 /***/ }),
 
-/***/ 48:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-icons/placeholders");
-
-/***/ }),
-
 /***/ 49:
 /***/ (function(module, exports) {
 
@@ -4268,7 +5311,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");
 
 /***/ }),
 
@@ -4306,11 +5375,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";
@@ -4337,11 +5414,54 @@ 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;
 
 /***/ }),
 
-/***/ 73:
+/***/ 75:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4356,11 +5476,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"
@@ -4368,14 +5488,14 @@ var external_styled_components_ = __webpack_require__(4);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: ./src/common/utils/singleValueUtils.js
-var singleValueUtils = __webpack_require__(23);
+var singleValueUtils = __webpack_require__(24);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ArrowUp"
-var ArrowUp_ = __webpack_require__(76);
+var ArrowUp_ = __webpack_require__(79);
 var ArrowUp_default = /*#__PURE__*/__webpack_require__.n(ArrowUp_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ArrowDown"
-var ArrowDown_ = __webpack_require__(77);
+var ArrowDown_ = __webpack_require__(80);
 var ArrowDown_default = /*#__PURE__*/__webpack_require__.n(ArrowDown_);
 
 // CONCATENATED MODULE: ./src/SingleValueBasic/TrendValue.jsx
@@ -4445,7 +5565,7 @@ TrendValue_SingleValueContent.propTypes = {
 };
 /* harmony default export */ var TrendValue = (TrendValue_SingleValueContent);
 // EXTERNAL MODULE: external "cssesc"
-var external_cssesc_ = __webpack_require__(78);
+var external_cssesc_ = __webpack_require__(81);
 var external_cssesc_default = /*#__PURE__*/__webpack_require__.n(external_cssesc_);
 
 // CONCATENATED MODULE: ./src/SingleValueBasic/MajorValue.jsx
@@ -4642,56 +5762,63 @@ var SingleValueTrendValue = TrendValue;
 
 /***/ }),
 
-/***/ 74:
+/***/ 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");
 
 /***/ }),
 
-/***/ 76:
+/***/ 79:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ArrowUp");
 
 /***/ }),
 
-/***/ 77:
+/***/ 8:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/ArrowDown");
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 
-/***/ 78:
+/***/ 80:
 /***/ (function(module, exports) {
 
-module.exports = require("cssesc");
+module.exports = require("@splunk/react-icons/ArrowDown");
 
 /***/ }),
 
-/***/ 8:
+/***/ 81:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
+module.exports = require("cssesc");
 
 /***/ }),
 
-/***/ 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__);
 
 
@@ -4708,14 +5835,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";
@@ -4723,7 +5857,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__);
 
 
@@ -4731,7 +5865,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',
@@ -4740,7 +5874,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'),
@@ -4766,7 +5900,7 @@ var getDynamicMajorColorEditor = function getDynamicMajorColorEditor(_ref) {
 
 /***/ }),
 
-/***/ 92:
+/***/ 96:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4774,7 +5908,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__);
 
 
@@ -4782,7 +5916,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',
@@ -4791,7 +5925,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'),
@@ -4811,7 +5945,7 @@ var getDynamicTrendColorEditor = function getDynamicTrendColorEditor(_ref) {
 
 /***/ }),
 
-/***/ 93:
+/***/ 97:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4819,7 +5953,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__);
 
 
@@ -4827,7 +5961,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',
@@ -4836,7 +5970,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'),
@@ -4866,7 +6000,7 @@ var getDynamicBackgroundColorEditor = function getDynamicBackgroundColorEditor(_
 
 /***/ }),
 
-/***/ 94:
+/***/ 98:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4917,14 +6051,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__);
 
 
@@ -4939,34 +6073,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);
-
 /***/ })
 
 /******/ });