@splunk/visualizations 25.13.1 → 26.1.0

package/SingleValueIcon.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 467);
+/******/ 	return __webpack_require__(__webpack_require__.s = 470);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -116,57 +116,6 @@ module.exports = require("@splunk/visualizations-shared/Message");
 /***/ 100:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-"use strict";
-__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__(22);
-/* 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 getDynamicMajorColorEditor = function getDynamicMajorColorEditor(_ref) {
-  var defaultContext = _ref.defaultContext,
-    defaultPalettesConfig = _ref.defaultPalettesConfig;
-  return {
-    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Major value'),
-    option: 'majorColor',
-    context: 'majorColorEditorConfig',
-    editor: 'editor.dynamicColor',
-    showEditor: function showEditor(_ref2) {
-      var options = _ref2.options;
-      return Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.majorColor);
-    },
-    editorProps: {
-      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'),
-        value: 'rangeValue',
-        defaults: {
-          majorValue: defaultContext.majorColorConfig
-        }
-      }, {
-        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Matches'),
-        value: 'matchValue',
-        defaults: {
-          majorValue: defaultContext.majorColorMatchConfig
-        }
-      }],
-      dataSelectors: [{
-        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Major value'),
-        value: 'majorValue'
-      }],
-      defaultPalettesConfig: defaultPalettesConfig
-    }
-  };
-};
-
-/***/ }),
-
-/***/ 101:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicTrendColorEditor", function() { return getDynamicTrendColorEditor; });
@@ -178,7 +127,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var getDynamicTrendColorEditor = function getDynamicTrendColorEditor(_ref) {
   var defaultContext = _ref.defaultContext,
-    defaultPalettesConfig = _ref.defaultPalettesConfig;
+      defaultPalettesConfig = _ref.defaultPalettesConfig;
   return {
     label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Trend value'),
     option: 'trendColor',
@@ -209,7 +158,7 @@ var getDynamicTrendColorEditor = function getDynamicTrendColorEditor(_ref) {
 
 /***/ }),
 
-/***/ 102:
+/***/ 101:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -223,7 +172,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var getDynamicBackgroundColorEditor = function getDynamicBackgroundColorEditor(_ref) {
   var defaultContext = _ref.defaultContext,
-    defaultPalettesConfig = _ref.defaultPalettesConfig;
+      defaultPalettesConfig = _ref.defaultPalettesConfig;
   return {
     label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Background'),
     option: 'backgroundColor',
@@ -264,7 +213,7 @@ var getDynamicBackgroundColorEditor = function getDynamicBackgroundColorEditor(_
 
 /***/ }),
 
-/***/ 103:
+/***/ 102:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -315,7 +264,7 @@ var StaticMajorAndTrendLayout = [[{
 
 /***/ }),
 
-/***/ 104:
+/***/ 103:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -339,7 +288,7 @@ var StaticMajorColorEditor = {
 
 /***/ }),
 
-/***/ 105:
+/***/ 104:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -367,7 +316,7 @@ var StaticTrendColorEditor = {
 
 /***/ }),
 
-/***/ 106:
+/***/ 105:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -377,13 +326,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TrellisBackgroundColorEditor = exports.TrellisEditorConfig = void 0;
+
 var React = __webpack_require__(1);
+
 var i18n_1 = __webpack_require__(2);
+
 var FeatureFlagContext_1 = __webpack_require__(21);
+
 var layoutUtils_1 = __webpack_require__(58);
 /* eslint-disable react-hooks/rules-of-hooks */
+
+
 exports.TrellisEditorConfig = [[{
-  label: i18n_1._('Trellis layout'),
+  label: (0, i18n_1._)('Trellis layout'),
   option: 'splitByLayout',
   editor: 'editor.toggle',
   showEditor: function showEditor() {
@@ -392,7 +347,7 @@ exports.TrellisEditorConfig = [[{
     return isTrellisFeatureFlagOn;
   }
 }], [{
-  label: i18n_1._('Split by'),
+  label: (0, i18n_1._)('Split by'),
   option: 'trellisSplitBy',
   editor: 'editor.trellisSplitBy',
   editorProps: {
@@ -405,13 +360,13 @@ exports.TrellisEditorConfig = [[{
     return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
   }
 }], [{
-  label: i18n_1._('Number of columns'),
+  label: (0, i18n_1._)('Number of columns'),
   option: 'trellisColumns',
   editor: 'editor.number',
   editorProps: {
     min: 1
   },
-  placeholder: i18n_1._('Auto'),
+  placeholder: (0, i18n_1._)('Auto'),
   showEditor: function showEditor(_ref2) {
     var options = _ref2.options;
     var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
@@ -419,7 +374,7 @@ exports.TrellisEditorConfig = [[{
     return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
   }
 }], [{
-  label: i18n_1._('Min column width'),
+  label: (0, i18n_1._)('Min column width'),
   option: 'trellisMinColumnWidth',
   editor: 'editor.number',
   editorProps: {
@@ -432,7 +387,7 @@ exports.TrellisEditorConfig = [[{
     return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
   }
 }, {
-  label: i18n_1._('Row height'),
+  label: (0, i18n_1._)('Row height'),
   option: 'trellisRowHeight',
   editor: 'editor.number',
   editorProps: {
@@ -445,7 +400,7 @@ exports.TrellisEditorConfig = [[{
     return isTrellisFeatureFlagOn && options.splitByLayout === layoutUtils_1.LAYOUT_TYPE.Trellis;
   }
 }], [{
-  label: i18n_1._('Max number of components per page'),
+  label: (0, i18n_1._)('Max number of components per page'),
   option: 'trellisPageCount',
   editor: 'editor.number',
   editorProps: {
@@ -459,7 +414,7 @@ exports.TrellisEditorConfig = [[{
   }
 }]];
 exports.TrellisBackgroundColorEditor = {
-  label: i18n_1._('Trellis background'),
+  label: (0, i18n_1._)('Trellis background'),
   option: 'trellisBackgroundColor',
   editor: 'editor.color',
   showEditor: function showEditor(_ref6) {
@@ -472,51 +427,74 @@ exports.TrellisBackgroundColorEditor = {
 
 /***/ }),
 
-/***/ 107:
+/***/ 106:
 /***/ (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__(1);
+
 var react_1 = __webpack_require__(1);
+
 var lodash_1 = __webpack_require__(3);
+
 var styled_components_1 = __webpack_require__(4);
-var Paginator_1 = __webpack_require__(92);
+
+var Paginator_1 = __webpack_require__(94);
+
 var i18n_1 = __webpack_require__(2);
-var themes_1 = __webpack_require__(59);
+
+var themes_1 = __webpack_require__(60);
+
 var useSplunkTheme_1 = __webpack_require__(57);
+
 var FeatureFlagContext_1 = __webpack_require__(21);
+
 var SizeAwareWrapper_1 = __webpack_require__(19);
+
 var style_1 = __webpack_require__(14);
+
 var Message_1 = __webpack_require__(10);
-var trellisUtils_1 = __webpack_require__(80);
-var hocUtils_1 = __webpack_require__(26);
-var JSONSchemaUtils_1 = __webpack_require__(27);
-var Options_1 = __webpack_require__(29);
-var trellisUtils_2 = __webpack_require__(108);
+
+var trellisUtils_1 = __webpack_require__(84);
+
+var hocUtils_1 = __webpack_require__(27);
+
+var JSONSchemaUtils_1 = __webpack_require__(28);
+
+var Options_1 = __webpack_require__(30);
+
+var trellisUtils_2 = __webpack_require__(107);
+
 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']));
+  return (0, style_1.toDimension)((0, lodash_1.pick)(props, ['width', 'height']));
 });
 var TrellisContainerGrid = styled_components_1.default.div.withConfig({
   displayName: "withTrellis__TrellisContainerGrid",
@@ -530,79 +508,91 @@ var TrellisContainerGrid = styled_components_1.default.div.withConfig({
 }, 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'),
+      message: (0, 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'),
+      message: (0, 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'),
+    message: (0, 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);
+        options = _opts$options === void 0 ? {} : _opts$options,
+        height = opts.height,
+        width = opts.width,
+        otherProps = __rest(opts, ["options", "height", "width"]);
+
+    var defaultOptions = (0, JSONSchemaUtils_1.pickFieldFromJSONSchema)(Viz.config.optionsSchema, 'default');
+    var mergedOptions = (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions);
     var trellisColumns = mergedOptions.trellisColumns,
-      trellisPageCount = mergedOptions.trellisPageCount,
-      trellisMinColumnWidth = mergedOptions.trellisMinColumnWidth,
-      trellisRowHeight = mergedOptions.trellisRowHeight,
-      splitByLayout = mergedOptions.splitByLayout,
-      trellisSplitBy = mergedOptions.trellisSplitBy;
+        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 _ref = (0, react_1.useState)(1),
+        _ref2 = _slicedToArray(_ref, 2),
+        pageNum = _ref2[0],
+        setPageNum = _ref2[1];
+
+    var _ref3 = (0, react_1.useState)(null),
+        _ref4 = _slicedToArray(_ref3, 2),
+        pagedData = _ref4[0],
+        setPagedData = _ref4[1];
+
     var splitByKeys = [];
     var totalPages = 0;
     var showPaginator = false;
     var dataSources = otherProps.dataSources;
     var theme = {
-      splunkThemeV1: useSplunkTheme_1.default()
+      splunkThemeV1: (0, 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 _ref5 = (0, themes_1.getSettingsFromThemedProps)({
+      theme: theme
+    }),
+        currentThemeFamily = _ref5.family,
+        currentThemeColorScheme = _ref5.colorScheme,
+        currentThemeDensity = _ref5.density;
+
+    var trellisBackgroundColor = (0, 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.
+      }; // 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: {
@@ -611,10 +601,11 @@ var withTrellis = function withTrellis(Viz) {
       }, {}, 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 columns = (0, lodash_1.get)(dataSources, 'primary.data.columns', undefined);
+    var fields = (0, 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);
@@ -625,51 +616,61 @@ var withTrellis = function withTrellis(Viz) {
         setPagedData(paged);
       }
     };
-    react_1.useEffect(function () {
+
+    (0, react_1.useEffect)(function () {
       setPageNum(1);
       updateDataDisplay(1);
     }, [pageCount, trellisSplitBy]);
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
       updateDataDisplay(pageNum);
     }, [columns, fields, trellisSplitBy, pageNum, splitByLayout]);
-    var handlePageChange = react_1.useCallback(function (event, _ref) {
-      var page = _ref.page;
+    var handlePageChange = (0, react_1.useCallback)(function (event, _ref6) {
+      var page = _ref6.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'),
+          message: (0, i18n_1._)('Loading'),
           level: "info"
         });
-      }
-      // If no trellisSplitBy value is passed in, assign default trellisSplitBy
+      } // 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);
+        var splitByPossibleFields = (0, 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 splitMode = (0, trellisUtils_1.getTrellisDataSplitterMode)(fields);
+      var dataSplitResult = (0, 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,
@@ -684,10 +685,10 @@ var withTrellis = function withTrellis(Viz) {
           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;
+        }, React.createElement(SizeAwareWrapper_1.default, null, function (_ref7) {
+          var childWidth = _ref7.childWidth,
+              _ref7$childHeight = _ref7.childHeight,
+              childHeight = _ref7$childHeight === void 0 ? rowHeight : _ref7$childHeight;
           return React.createElement(Viz, Object.assign({}, otherProps, {
             trellisKey: splitByKey,
             trellisSplitBy: currTrellisSplitBy,
@@ -705,30 +706,37 @@ var withTrellis = function withTrellis(Viz) {
         totalPages: totalPages
       }));
     }
+
     return null;
   };
+
   VizWithTrellis.propTypes = Viz.proptypes;
   VizWithTrellis.defaultProps = Viz.defaultProps;
   VizWithTrellis.config = Viz.config;
   return VizWithTrellis;
 };
+
 exports.default = withTrellis;
 
 /***/ }),
 
-/***/ 108:
+/***/ 107:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _toConsumableArray = __webpack_require__(8);
+
 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__(80);
+
+var trellisUtils_1 = __webpack_require__(84);
+
 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),
@@ -738,18 +746,23 @@ exports.AGGREGATIONS = 'aggregations';
  * 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] = (0, lodash_1.cloneDeep)((0, lodash_1.omit)(dataSource, ['primary.data.fields', 'primary.data.columns']));
         splitDataSources[fieldName].primary.data.fields = [fields[i]];
         splitDataSources[fieldName].primary.data.columns = [columns[i]];
       }
@@ -757,30 +770,37 @@ var dataSourcesSplitByAggregationsUnknown = function dataSourcesSplitByAggregati
   } 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);
+    splitByFields = (0, 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] = (0, lodash_1.cloneDeep)((0, 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]);
@@ -792,10 +812,12 @@ var dataSourcesSplitByAggregationsTimechartAndChart = function dataSourcesSplitB
     // 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] = (0, lodash_1.cloneDeep)((0, 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]];
       }
@@ -803,31 +825,38 @@ var dataSourcesSplitByAggregationsTimechartAndChart = function dataSourcesSplitB
   } 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);
+    splitByFields = (0, 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] = (0, lodash_1.cloneDeep)((0, 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]);
@@ -836,34 +865,42 @@ var dataSourcesSplitByAggregationsStats = function dataSourcesSplitByAggregation
   } 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);
+    splitByFields = (0, trellisUtils_1.extractSplitByFieldsChartFields)(fields);
   }
+
   if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
     splitDataSources = {};
-    var dataSourceKeys = trellisUtils_1.extractDataSourceAggregationKeysChart(fields);
+    var dataSourceKeys = (0, 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] = (0, lodash_1.cloneDeep)((0, 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) {
@@ -883,22 +920,28 @@ var dataSourcesSplitByModeTimechart = function dataSourcesSplitByModeTimechart(d
   } 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);
+    splitByFields = (0, trellisUtils_1.extractSplitByFieldsChartFields)(fields);
   }
+
   if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
     splitDataSources = {};
     var splitByFieldIdx = splitByFields.findIndex(function (f) {
@@ -907,8 +950,9 @@ var dataSourcesSplitByModeChart = function dataSourcesSplitByModeChart(dataSourc
     var otherSplitBy = splitByFields.filter(function (f) {
       return f !== splitBy;
     });
-    var dataSourceKeys = trellisUtils_1.extractDataSourceAggregationKeysChart(fields);
+    var dataSourceKeys = (0, 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 :-
@@ -933,12 +977,14 @@ var dataSourcesSplitByModeChart = function dataSourcesSplitByModeChart(dataSourc
         nonDataSourceAggregations.push(fields[i].name);
       }
     }
+
     if (splitByFieldIdx === 0) {
       // if splitBy is the first field, split row wise
-      var valueKeys = lodash_1.cloneDeep(columns[0]);
+      var valueKeys = (0, 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] = (0, lodash_1.cloneDeep)((0, 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]
@@ -1010,16 +1056,20 @@ var dataSourcesSplitByModeChart = function dataSourcesSplitByModeChart(dataSourc
                 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) {
@@ -1041,11 +1091,13 @@ var dataSourcesSplitByModeChart = function dataSourcesSplitByModeChart(dataSourc
     } 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] = (0, lodash_1.cloneDeep)((0, lodash_1.omit)(dataSource, ['primary.data.fields', 'primary.data.columns']));
         splitDataSources[val].primary.data.fields = [{
           name: otherSplitBy[0]
         }].concat(_toConsumableArray(dataSourceKeys.map(function (k) {
@@ -1066,29 +1118,36 @@ var dataSourcesSplitByModeChart = function dataSourcesSplitByModeChart(dataSourc
   } 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);
+    splitByFields = splitMode !== trellisUtils_1.UNKNOWN ? (0, trellisUtils_1.extractSplitByFieldsForStats)(fields) : (0, 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 = {};
@@ -1099,12 +1158,12 @@ var dataSourcesSplitByModeStatsorUnknown = function dataSourcesSplitByModeStatso
         splitDataSources[val].push(idx);
       }
     });
-    var cloneFields = lodash_1.cloneDeep(fields);
+    var cloneFields = (0, 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']));
+      var valIndices = (0, lodash_1.cloneDeep)(splitDataSources[val]);
+      splitDataSources[val] = (0, lodash_1.cloneDeep)((0, 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) {
@@ -1119,23 +1178,27 @@ var dataSourcesSplitByModeStatsorUnknown = function dataSourcesSplitByModeStatso
   } else {
     errorCode = 'INVALID_SPLIT_BY_FIELD';
   }
+
   return {
     splitDataSources: splitDataSources,
     errorCode: errorCode
   };
 };
+
 exports.dataSourcesSplitByModeStatsorUnknown = dataSourcesSplitByModeStatsorUnknown;
+
 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);
+      result = trellisSplitBy === exports.AGGREGATIONS ? (0, exports.dataSourcesSplitByAggregationsTimechartAndChart)(dataSources) : (0, exports.dataSourcesSplitByModeTimechart)(dataSources, trellisSplitBy);
     } else if (splitMode === trellisUtils_1.STATS) {
-      result = trellisSplitBy === exports.AGGREGATIONS ? exports.dataSourcesSplitByAggregationsStats(dataSources) : exports.dataSourcesSplitByModeStatsorUnknown(dataSources, trellisSplitBy, trellisUtils_1.STATS);
+      result = trellisSplitBy === exports.AGGREGATIONS ? (0, exports.dataSourcesSplitByAggregationsStats)(dataSources) : (0, exports.dataSourcesSplitByModeStatsorUnknown)(dataSources, trellisSplitBy, trellisUtils_1.STATS);
     } else if (splitMode === trellisUtils_1.CHART) {
-      result = trellisSplitBy === exports.AGGREGATIONS ? exports.dataSourcesSplitByAggregationsTimechartAndChart(dataSources) : exports.dataSourcesSplitByModeChart(dataSources, trellisSplitBy);
+      result = trellisSplitBy === exports.AGGREGATIONS ? (0, exports.dataSourcesSplitByAggregationsTimechartAndChart)(dataSources) : (0, exports.dataSourcesSplitByModeChart)(dataSources, trellisSplitBy);
     } else if (splitMode === trellisUtils_1.UNKNOWN) {
-      result = trellisSplitBy === exports.AGGREGATIONS ? exports.dataSourcesSplitByAggregationsUnknown(dataSources) : exports.dataSourcesSplitByModeStatsorUnknown(dataSources, trellisSplitBy, trellisUtils_1.UNKNOWN);
+      result = trellisSplitBy === exports.AGGREGATIONS ? (0, exports.dataSourcesSplitByAggregationsUnknown)(dataSources) : (0, exports.dataSourcesSplitByModeStatsorUnknown)(dataSources, trellisSplitBy, trellisUtils_1.UNKNOWN);
     }
   } catch (ex) {
     console.error('getTrellisDataSourcesBySplitMode ', ex);
@@ -1144,12 +1207,28 @@ var getTrellisDataSourcesBySplitMode = function getTrellisDataSourcesBySplitMode
       errorCode: 'UNKNOWN'
     };
   }
+
   return result;
 };
+
 exports.getTrellisDataSourcesBySplitMode = getTrellisDataSourcesBySplitMode;
 
 /***/ }),
 
+/***/ 108:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/pick");
+
+/***/ }),
+
+/***/ 109:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/isEmpty");
+
+/***/ }),
+
 /***/ 11:
 /***/ (function(module, exports) {
 
@@ -1173,40 +1252,46 @@ module.exports = require("@splunk/visualizations-shared/colorUtils");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var styled_components_1 = __webpack_require__(4);
+
 var SizeAwareWrapper_1 = __webpack_require__(19);
+
 var style_1 = __webpack_require__(14);
+
 var colorUtils_1 = __webpack_require__(12);
+
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
   return {
     style: {
-      width: style_1.toPx(width)
+      width: (0, style_1.toPx)(width)
     }
   };
 }).withConfig({
   displayName: "FixedSizeContainer__Item",
   componentId: "sc-1yhgpod-0"
 })(["position:relative;background-color:", "};"], function (props) {
-  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
-});
-// Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+}); // Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+
 var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
   var width = _ref2.width,
-    height = _ref2.height;
+      height = _ref2.height;
   return {
     style: Object.assign(Object.assign({}, width && {
-      width: style_1.toPx(width)
+      width: (0, style_1.toPx)(width)
     }), height && {
-      height: style_1.toPx(height)
+      height: (0, style_1.toPx)(height)
     })
   };
 }).withConfig({
   displayName: "FixedSizeContainer__FixSizeItem",
   componentId: "sc-1yhgpod-1"
 })(["position:relative;flex-direction:column;flex:1;display:flex;background-color:", "};"], function (props) {
-  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
 });
 var ItemContent = styled_components_1.default.div.withConfig({
   displayName: "FixedSizeContainer__ItemContent",
@@ -1216,11 +1301,13 @@ var FixSizeItemContent = styled_components_1.default.div.withConfig({
   displayName: "FixedSizeContainer__FixSizeItemContent",
   componentId: "sc-1yhgpod-3"
 })(["min-height:0px;flex:1;position:relative;box-sizing:border-box;"]);
+
 var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
   var FixedSizeContainer = function FixedSizeContainer(props) {
     var width = props.width,
-      height = props.height,
-      backgroundColor = props.backgroundColor;
+        height = props.height,
+        backgroundColor = props.backgroundColor;
+
     if (!height) {
       return React.createElement(Item, {
         "data-test": "item",
@@ -1228,29 +1315,32 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
         backgroundColor: backgroundColor
       }, React.createElement(ItemContent, null, React.createElement(Viz, Object.assign({}, props))));
     }
+
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.13.1 - ea48ec41e",
+      "data-splunk-visualization-version": "26.1.0 - fc8bf8d77",
       width: width,
       height: height,
       backgroundColor: backgroundColor
     }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, null, function (_ref3) {
       var newWidth = _ref3.width,
-        newHeight = _ref3.height;
+          newHeight = _ref3.height;
       return React.createElement(Viz, Object.assign({}, props, {
         width: newWidth,
         height: newHeight
       }));
     })));
   };
+
   FixedSizeContainer.displayName = 'withFixedSizeContainer';
   return FixedSizeContainer;
 };
+
 exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 134:
+/***/ 135:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1295,69 +1385,108 @@ exports.defaultContext = {
 
 /***/ }),
 
-/***/ 14:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/style");
-
-/***/ }),
-
-/***/ 140:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations/SingleValueBasic");
-
-/***/ }),
-
-/***/ 15:
-/***/ (function(module, exports, __webpack_require__) {
+/***/ 136:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
+__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__(22);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.extendStaticWrapperProps = void 0;
-/**
- * @method extendStaticWrapperProps
- * @param {Object} props
- * @param {DashboardVizType} props.Wrapper
- * @param {DashboardVizType} props.Visualization
- */
-var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
-  var Wrapper = _ref.Wrapper,
-    Visualization = _ref.Visualization;
-  var extendProperties = ['propTypes', 'defaultProps', 'config'];
-  extendProperties.forEach(function (prop) {
-    if (Visualization[prop]) {
-      // eslint-disable-next-line no-param-reassign
-      Wrapper[prop] = Visualization[prop];
-    }
-  });
-};
-exports.extendStaticWrapperProps = extendStaticWrapperProps;
+var getDynamicMajorColorEditor = function getDynamicMajorColorEditor(_ref) {
+  var defaultContext = _ref.defaultContext,
+      defaultPalettesConfig = _ref.defaultPalettesConfig;
+  return {
+    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Major value'),
+    option: 'majorColor',
+    context: 'majorColorEditorConfig',
+    editor: 'editor.dynamicColor',
+    showEditor: function showEditor(_ref2) {
+      var options = _ref2.options;
+      return Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.majorColor);
+    },
+    editorProps: {
+      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'),
+        value: 'rangeValue',
+        defaults: {
+          majorValue: defaultContext.majorColorConfig
+        }
+      }, {
+        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Matches'),
+        value: 'matchValue',
+        defaults: {
+          majorValue: defaultContext.majorColorMatchConfig
+        }
+      }],
+      dataSelectors: [{
+        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Major value'),
+        value: 'majorValue'
+      }],
+      defaultPalettesConfig: defaultPalettesConfig
+    }
+  };
+};
 
 /***/ }),
 
-/***/ 16:
+/***/ 14:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/schemaUtils");
+module.exports = require("@splunk/visualizations-shared/style");
 
 /***/ }),
 
-/***/ 168:
+/***/ 142:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/enterprise/Activity");
+module.exports = require("@splunk/visualizations/SingleValueBasic");
+
+/***/ }),
+
+/***/ 15:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extendStaticWrapperProps = void 0;
+/**
+ * @method extendStaticWrapperProps
+ * @param {Object} props
+ * @param {DashboardVizType} props.Wrapper
+ * @param {DashboardVizType} props.Visualization
+ */
+
+var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
+  var Wrapper = _ref.Wrapper,
+      Visualization = _ref.Visualization;
+  var extendProperties = ['propTypes', 'defaultProps', 'config'];
+  extendProperties.forEach(function (prop) {
+    if (Visualization[prop]) {
+      // eslint-disable-next-line no-param-reassign
+      Wrapper[prop] = Visualization[prop];
+    }
+  });
+};
+
+exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
 
-/***/ 169:
+/***/ 16:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/enterprise/Clock");
+module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 
@@ -1368,21 +1497,35 @@ module.exports = require("@babel/runtime/helpers/slicedToArray");
 
 /***/ }),
 
-/***/ 170:
+/***/ 171:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/enterprise/Activity");
+
+/***/ }),
+
+/***/ 172:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/enterprise/Clock");
+
+/***/ }),
+
+/***/ 173:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/Pencil");
 
 /***/ }),
 
-/***/ 171:
+/***/ 174:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/Star");
 
 /***/ }),
 
-/***/ 172:
+/***/ 175:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/Question");
@@ -1417,24 +1560,33 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 
 var _toConsumableArray = __webpack_require__(8);
+
 var _defineProperty = __webpack_require__(7);
+
 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
 });
 exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
+
 var lodash_1 = __webpack_require__(3);
+
 var schemaUtils_1 = __webpack_require__(16);
+
 var VizBehavior_1 = __webpack_require__(6);
+
 var dynamicOptionsDSLType = {
   type: 'string',
   pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
@@ -1444,20 +1596,22 @@ var dynamicOptionsDSLType = {
  * @param optionsSchema a visualization's options schema
  * @returns an updated options schema that additionally allows strings starting with > for each option
  */
+
 function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
   var enhancedOptionsSchema = {};
   Object.keys(optionsSchema).forEach(function (key) {
     var _a = optionsSchema[key],
-      title = _a.title,
-      description = _a.description,
-      readOnly = _a.readOnly,
-      writeOnly = _a.writeOnly,
-      examples = _a.examples,
-      defaultValue = _a.default,
-      type = _a.type,
-      properties = _a.properties,
-      patternProperties = _a.patternProperties,
-      remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
+        title = _a.title,
+        description = _a.description,
+        readOnly = _a.readOnly,
+        writeOnly = _a.writeOnly,
+        examples = _a.examples,
+        defaultValue = _a.default,
+        type = _a.type,
+        properties = _a.properties,
+        patternProperties = _a.patternProperties,
+        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
+
     var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
       title: title
     }), description !== undefined && {
@@ -1471,12 +1625,14 @@ function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
     }), defaultValue !== undefined && {
       default: defaultValue
     });
+
     if (type === 'object') {
       enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
         type: type
       }), properties && {
         properties: enhanceOptionsSchemaWithDynamicOptions(properties)
       });
+
       if (patternProperties) {
         var enhancedPatternProperties = {};
         Object.keys(patternProperties).forEach(function (opt) {
@@ -1494,6 +1650,7 @@ function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
   });
   return enhancedOptionsSchema;
 }
+
 exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
 /**
  * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
@@ -1502,11 +1659,14 @@ exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamic
  * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
  * and containing `open: false` for all editor panels in editorConfig
  */
+
 function enhanceConfig(vizConfig) {
   var enhancedConfig = Object.assign({}, vizConfig);
+
   if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
     enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
   }
+
   enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
     return Object.assign(Object.assign({}, config), {
       open: config.open || false
@@ -1514,6 +1674,7 @@ function enhanceConfig(vizConfig) {
   });
   return enhancedConfig;
 }
+
 exports.enhanceConfig = enhanceConfig;
 /**
  * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
@@ -1521,6 +1682,7 @@ exports.enhanceConfig = enhanceConfig;
  * @param vizConfig a Visualization Config
  * @returns a Visualization Config containing `open: true` for all editor panels in editorConfig
  */
+
 function uncollapseEditorConfig(vizConfig) {
   var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
   editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
@@ -1530,13 +1692,16 @@ function uncollapseEditorConfig(vizConfig) {
   });
   return editorPanelUncollapsedConfig;
 }
+
 exports.uncollapseEditorConfig = uncollapseEditorConfig;
+
 function isDynamicOption(option) {
   return option && typeof option === 'string' && option.trim().startsWith('>') || false;
 }
-exports.isDynamicOption = isDynamicOption;
-// private helpers to improve readability of getInitialPreset
+
+exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
 // this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
+
 /**
  * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
  * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
@@ -1545,6 +1710,7 @@ exports.isDynamicOption = isDynamicOption;
  *
  * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
  */
+
 function hasCompatibleContexts(vizContext, presetContext) {
   var presetContextKeys = Object.keys(presetContext);
   return presetContextKeys.every(function (contextKey) {
@@ -1554,6 +1720,8 @@ function hasCompatibleContexts(vizContext, presetContext) {
 /**
  * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
  */
+
+
 function hasCompatibleOptions(vizOptions, presetOptions) {
   var presetOptionKeys = Object.keys(presetOptions);
   return presetOptionKeys.every(function (optionKey) {
@@ -1568,18 +1736,21 @@ function hasCompatibleOptions(vizOptions, presetOptions) {
  * @param {Object} vizOptions - the current vizOptions definition
  * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
  */
+
+
 function getInitialPreset(vizContext, vizOptions, presets) {
   return presets.find(function (preset) {
-    var presetContext = lodash_1.get(preset, ['value', 'context'], {});
-    var presetOptions = lodash_1.get(preset, ['value', 'options'], {});
+    var presetContext = (0, lodash_1.get)(preset, ['value', 'context'], {});
+    var presetOptions = (0, lodash_1.get)(preset, ['value', 'options'], {});
     var presetContextKeys = Object.keys(presetContext);
-    var presetOptionKeys = Object.keys(presetOptions);
-    // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
+    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
     // if not, then the preset is invalid in config.ts
+
     if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
     return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
   });
 }
+
 exports.getInitialPreset = getInitialPreset;
 /**
  * generates number precision values for a Select editor
@@ -1587,14 +1758,16 @@ exports.getInitialPreset = getInitialPreset;
  * @param {Number} numPrecisionValues - number of integer precision values to generate
  * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
  */
+
 function generatePrecisionValues(numPrecisionValues) {
-  return lodash_1.range(0, numPrecisionValues + 1).map(function (i) {
+  return (0, lodash_1.range)(0, numPrecisionValues + 1).map(function (i) {
     return {
       label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
       value: i
     };
   });
 }
+
 exports.generatePrecisionValues = generatePrecisionValues;
 /**
  * insert layout in layout array, return a new layout array instead of updating the original
@@ -1604,12 +1777,15 @@ exports.generatePrecisionValues = generatePrecisionValues;
  * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
  * @returns {EditorLayoutConfig[][]} new editor layout with insertion
  */
+
 var insertLayout = function insertLayout(layout, index) {
   for (var _len = arguments.length, layoutItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     layoutItems[_key - 2] = arguments[_key];
   }
+
   return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
 };
+
 exports.insertLayout = insertLayout;
 
 /***/ }),
@@ -1674,34 +1850,47 @@ __webpack_require__.r(__webpack_exports__);
 /* 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__(30);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(31);
 /* 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__(28);
+/* harmony import */ var _splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(29);
 /* 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__(50);
+/* 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__);
 
+
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
+
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    });
+    keys.push.apply(keys, symbols);
   }
+
   return keys;
 }
+
 function _objectSpread(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
   }
+
   return target;
 }
 
@@ -1709,6 +1898,7 @@ function _objectSpread(target) {
 
 
 
+
 var DEFAULT_FONT = 12;
 var DEFAULT_FONT_FAMILY = '"Splunk Platform Sans", "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif';
 var SVR_PADDING = {
@@ -1717,28 +1907,27 @@ var SVR_PADDING = {
   left: 16,
   right: 16
 };
-
 /**
  * @method shouldShowTrend
  * @param {String} trendDisplay
  * @returns {Bool}
  */
+
 var shouldShowTrend = function shouldShowTrend(trendDisplay) {
   return trendDisplay === 'absolute' || trendDisplay === 'percent';
 };
-
 /**
  * @method isLoadingOrNoColumns
  * @param {Object} dataSources
  * @param {Boolean} loading
  * @returns {Boolean} return true if loading or without columns in dataSources
  */
+
 var isLoadingOrNoColumns = function isLoadingOrNoColumns(dataSources, loading) {
   var data = Object(lodash__WEBPACK_IMPORTED_MODULE_1__["get"])(dataSources, 'primary.data.columns[0]', undefined);
   var noColumns = data === undefined;
   return loading || noColumns;
 };
-
 /**
  * Retrieve the valid formatted color
  * @method getFormattedColor
@@ -1746,30 +1935,30 @@ var isLoadingOrNoColumns = function isLoadingOrNoColumns(dataSources, loading) {
  * @param {String} defaultColor
  * @returns {String} the formatted color
  */
+
 var getFormattedColor = function getFormattedColor(color, defaultColor) {
   return Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(color) || Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(defaultColor);
 };
-
 /**
  * Determines if there is a background color
  * @method hasBackground
  * @param {String} backgroundColor
  * @returns true for non-transparent background color
  */
+
 var hasBackground = function hasBackground(backgroundColor) {
   return !!backgroundColor && backgroundColor !== 'transparent';
 };
-
 /**
  * @method isIdenticalColor
  * @param {String} colorA
  * @param {String} colorB
  * @returns {Boolean}
  */
+
 var isIdenticalColor = function isIdenticalColor(colorA, colorB) {
   return !!colorA && !!colorB && Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(colorA.toLowerCase()) === Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(colorB.toLowerCase());
 };
-
 /*
  * @method getDefaultColorWithBg
  * @param {Object} props
@@ -1778,13 +1967,13 @@ var isIdenticalColor = function isIdenticalColor(colorA, colorB) {
  * @param {String} props.defaultBlockFontColor
  * @returns {String} defaultColor
  */
+
 var getDefaultColorWithBg = function getDefaultColorWithBg(_ref) {
   var backgroundColor = _ref.backgroundColor,
-    defaultFontColor = _ref.defaultFontColor,
-    defaultBlockFontColor = _ref.defaultBlockFontColor;
+      defaultFontColor = _ref.defaultFontColor,
+      defaultBlockFontColor = _ref.defaultBlockFontColor;
   return isIdenticalColor(backgroundColor, defaultBlockFontColor) ? defaultFontColor : defaultBlockFontColor;
 };
-
 /*
  * @method getMajorColor
  * return formatted majorColor.
@@ -1795,15 +1984,16 @@ var getDefaultColorWithBg = function getDefaultColorWithBg(_ref) {
  * @param {String} props.defaultBlockFontColor
  * @returns {String} majorColor
  */
+
 var getMajorColor = function getMajorColor(_ref2) {
   var majorColor = _ref2.majorColor,
-    backgroundColor = _ref2.backgroundColor,
-    defaultFontColor = _ref2.defaultFontColor,
-    defaultBlockFontColor = _ref2.defaultBlockFontColor;
-  // If backgroundColor is set, but no majorColor,
+      backgroundColor = _ref2.backgroundColor,
+      defaultFontColor = _ref2.defaultFontColor,
+      defaultBlockFontColor = _ref2.defaultBlockFontColor; // If backgroundColor is set, but no majorColor,
   // the default majorColor will turn to be defaultBlockFontColor.
   // eg: major color will turn to be white in enterprise mode.
   // however, if the bgColor is the same as defaultBlockFontColor, use defaultFontColor.
+
   if (hasBackground(backgroundColor) && !majorColor) {
     return getDefaultColorWithBg({
       backgroundColor: backgroundColor,
@@ -1811,9 +2001,9 @@ var getMajorColor = function getMajorColor(_ref2) {
       defaultBlockFontColor: defaultBlockFontColor
     });
   }
+
   return getFormattedColor(majorColor, defaultFontColor);
 };
-
 /**
  * Get the color for the trend components
  * @method getTrendColor
@@ -1826,35 +2016,41 @@ var getMajorColor = function getMajorColor(_ref2) {
  * @param {Object} defaultColors
  * @returns {String} trendColor
  */
+
 var getTrendColor = function getTrendColor(_ref3) {
   var trendColor = _ref3.trendColor,
-    trendValue = _ref3.trendValue,
-    majorValue = _ref3.majorValue,
-    customizedBgColor = _ref3.customizedBgColor,
-    trendDisplay = _ref3.trendDisplay,
-    defaultColors = _ref3.defaultColors;
+      trendValue = _ref3.trendValue,
+      majorValue = _ref3.majorValue,
+      customizedBgColor = _ref3.customizedBgColor,
+      trendDisplay = _ref3.trendDisplay,
+      defaultColors = _ref3.defaultColors;
+
   if (trendColor) {
     return trendColor;
   }
+
   if (Number.isNaN(Number(trendValue))) {
     return undefined;
   }
+
   var defaultFontColor = defaultColors.defaultFontColor,
-    defaultBlockFontColor = defaultColors.defaultBlockFontColor,
-    defaultBackgroundColor = defaultColors.defaultBackgroundColor; // if user defined a backgroundColor, the default trend color will be defaultBlockFontColor
+      defaultBlockFontColor = defaultColors.defaultBlockFontColor,
+      defaultBackgroundColor = defaultColors.defaultBackgroundColor; // if user defined a backgroundColor, the default trend color will be defaultBlockFontColor
+
   if (hasBackground(customizedBgColor) && !isIdenticalColor(customizedBgColor, defaultBackgroundColor) && !isIdenticalColor(customizedBgColor, defaultBlockFontColor)) {
     return defaultBlockFontColor;
-  }
-
-  // if trendDisplay is percent, and trendValue === value
+  } // if trendDisplay is percent, and trendValue === value
   // the trend percent = trendValue / (value - trendValue) will return Infinity
+
+
   var isInvalidTrend = trendDisplay === 'percent' && trendValue === parseFloat(majorValue);
+
   if (trendValue === 0 || isInvalidTrend) {
     return defaultFontColor;
   }
+
   return trendValue > 0 ? _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__["DELTA_GREEN"] : _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__["DELTA_RED"];
 };
-
 /**
  * Computes visualization properties for display component
  * @method computeColors
@@ -1867,6 +2063,7 @@ var getTrendColor = function getTrendColor(_ref3) {
  * @returns {String} trendColor
  * @returns {String} underLabelColor
  */
+
 var computeColors = function computeColors(props, defaultColors) {
   var backgroundColor = getFormattedColor(props.backgroundColor, defaultColors.defaultBackgroundColor);
   var backgroundEnabled = hasBackground(backgroundColor);
@@ -1883,8 +2080,8 @@ var computeColors = function computeColors(props, defaultColors) {
     customizedBgColor: props.backgroundColor,
     trendDisplay: props.trendDisplay,
     defaultColors: defaultColors
-  });
-  // todo: need change it to not depend on majorColor
+  }); // todo: need change it to not depend on majorColor
+
   var underLabelColor = majorColor;
   return {
     backgroundColor: backgroundColor,
@@ -1894,7 +2091,6 @@ var computeColors = function computeColors(props, defaultColors) {
     underLabelColor: underLabelColor
   };
 };
-
 /**
  * Format and return the value (major/trend)
  * @method computeText
@@ -1905,21 +2101,21 @@ var computeColors = function computeColors(props, defaultColors) {
  * @param {Bool} props.shouldAbbreviateTrendValue
  * @returns {Number} major or trend text
  */
+
 var computeText = function computeText(_ref4) {
   var value = _ref4.value,
-    numberPrecision = _ref4.numberPrecision,
-    shouldUseThousandSeparators = _ref4.shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue = _ref4.shouldAbbreviateTrendValue;
+      numberPrecision = _ref4.numberPrecision,
+      shouldUseThousandSeparators = _ref4.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = _ref4.shouldAbbreviateTrendValue;
   var text = Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(value) ? Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["formatNumber"])(value, numberPrecision, {
     useThousandSeparators: shouldUseThousandSeparators,
     // todo: need update formatNumber
     useTrendUnits: shouldAbbreviateTrendValue
-  }) : value;
-  // When text is undefined, return empty string
+  }) : value; // When text is undefined, return empty string
+
   text = text || '';
   return text;
 };
-
 /*
  * @method getMajorText
  * @param {Object} props
@@ -1928,10 +2124,11 @@ var computeText = function computeText(_ref4) {
  * @param {Bool} props.shouldUseThousandSeparators
  * @returns {String} majorText
  */
+
 var getMajorText = function getMajorText(_ref5) {
   var majorValue = _ref5.majorValue,
-    numberPrecision = _ref5.numberPrecision,
-    shouldUseThousandSeparators = _ref5.shouldUseThousandSeparators;
+      numberPrecision = _ref5.numberPrecision,
+      shouldUseThousandSeparators = _ref5.shouldUseThousandSeparators;
   return computeText({
     value: majorValue === null ? 'N/A' : majorValue,
     // if majorValue is null, use `N/A`.
@@ -1940,7 +2137,6 @@ var getMajorText = function getMajorText(_ref5) {
     shouldAbbreviateTrendValue: false
   });
 };
-
 /*
  * @method getTrendText
  * @param {Object} props
@@ -1952,13 +2148,15 @@ var getMajorText = function getMajorText(_ref5) {
  * @param {Bool} props.shouldAbbreviateTrendValue
  * @returns {String} trendText
  */
+
 var getTrendText = function getTrendText(_ref6) {
   var majorValue = _ref6.majorValue,
-    trendValue = _ref6.trendValue,
-    trendDisplay = _ref6.trendDisplay,
-    numberPrecision = _ref6.numberPrecision,
-    shouldUseThousandSeparators = _ref6.shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue = _ref6.shouldAbbreviateTrendValue;
+      trendValue = _ref6.trendValue,
+      trendDisplay = _ref6.trendDisplay,
+      numberPrecision = _ref6.numberPrecision,
+      shouldUseThousandSeparators = _ref6.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = _ref6.shouldAbbreviateTrendValue;
+
   var compute = function compute(value) {
     return computeText({
       value: value,
@@ -1967,25 +2165,31 @@ var getTrendText = function getTrendText(_ref6) {
       shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
     });
   };
+
   if (trendValue === '' || !Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(trendValue)) {
     return '';
   }
+
   var showPercent = trendDisplay === 'percent';
+
   if (!showPercent) {
     return compute(trendValue);
   }
+
   var diff = Math.abs(trendValue - majorValue);
   var val = Math.round(trendValue / diff * 100);
+
   if (trendValue === 0 && diff === 0) {
     val = 0;
   }
+
   if (!Number.isFinite(val)) {
     return 'N/A';
   }
+
   var text = compute(val);
   return "".concat(text, "%");
 };
-
 /**
  * Helper to determine the font size for an element
  * @method computeFontSize
@@ -1997,16 +2201,16 @@ var getTrendText = function getTrendText(_ref6) {
  * @param {String} [fontWeight='normal']    Boldness of font
  * @returns {Number} The size to use for fontSize styles
  */
+
 var computeFontSize = function computeFontSize(text, _ref7) {
   var width = _ref7.width,
-    height = _ref7.height;
+      height = _ref7.height;
   var fontFamily = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_FONT_FAMILY;
   var fontWeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'normal';
   var widthInDefaultFont = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])(text, "".concat(fontWeight, " ").concat(DEFAULT_FONT, "px ").concat(fontFamily));
   var fontSize = Math.min(width / widthInDefaultFont * DEFAULT_FONT, height / DEFAULT_FONT * DEFAULT_FONT);
   return parseInt(fontSize, 10);
 };
-
 /*
  * @method getMajorFontSize
  * @param {Object} props
@@ -2017,20 +2221,20 @@ var computeFontSize = function computeFontSize(text, _ref7) {
  * @param {Number} props.spaceRatio
  * @returns {Number} majorFontSize
  */
+
 var getMajorFontSize = function getMajorFontSize(_ref8) {
   var width = _ref8.width,
-    height = _ref8.height,
-    unit = _ref8.unit,
-    majorText = _ref8.majorText,
-    _ref8$spaceRatio = _ref8.spaceRatio,
-    spaceRatio = _ref8$spaceRatio === void 0 ? 1 : _ref8$spaceRatio;
+      height = _ref8.height,
+      unit = _ref8.unit,
+      majorText = _ref8.majorText,
+      _ref8$spaceRatio = _ref8.spaceRatio,
+      spaceRatio = _ref8$spaceRatio === void 0 ? 1 : _ref8$spaceRatio;
   var majorTextCalc = unit ? "".concat(unit).concat(majorText) : majorText;
   return computeFontSize(majorTextCalc, {
     width: width * spaceRatio,
     height: height
   });
 };
-
 /*
  * @method getTrendFontSize
  * @param {Object} props
@@ -2040,13 +2244,15 @@ var getMajorFontSize = function getMajorFontSize(_ref8) {
  * @param {Number} props.spaceRatio
  * @returns {Number} trendFontSize
  */
+
 var getTrendFontSize = function getTrendFontSize(_ref9) {
   var width = _ref9.width,
-    height = _ref9.height,
-    trendText = _ref9.trendText,
-    _ref9$spaceRatio = _ref9.spaceRatio,
-    spaceRatio = _ref9$spaceRatio === void 0 ? 1 : _ref9$spaceRatio;
+      height = _ref9.height,
+      trendText = _ref9.trendText,
+      _ref9$spaceRatio = _ref9.spaceRatio,
+      spaceRatio = _ref9$spaceRatio === void 0 ? 1 : _ref9$spaceRatio;
   var trendFontSize = 12;
+
   if (spaceRatio > 0) {
     trendFontSize = computeFontSize(trendText, {
       width: width * spaceRatio,
@@ -2054,18 +2260,18 @@ var getTrendFontSize = function getTrendFontSize(_ref9) {
     });
     trendFontSize = parseInt(trendFontSize, 10) * spaceRatio;
   }
+
   return trendFontSize;
 };
-
 /*
  * The height of underLabel should no more than 12px
  * @param {Number} height
  * @return {Number} height || DEFAULT_FONT
  */
+
 var getUnderLabelHeight = function getUnderLabelHeight(height) {
   return height > DEFAULT_FONT ? DEFAULT_FONT : height;
 };
-
 /*
  * @param {Object} config
  * @param {String} underLabel
@@ -2073,19 +2279,18 @@ var getUnderLabelHeight = function getUnderLabelHeight(height) {
  * @param {Number} height    height of underLabel
  * @param {Number} fond size of underLabel
  */
+
 var getUnderLabel = function getUnderLabel(_ref10) {
   var underLabel = _ref10.underLabel,
-    width = _ref10.width,
-    height = _ref10.height;
-  return (
-    // todo: may need truncate underLabel later
+      width = _ref10.width,
+      height = _ref10.height;
+  return (// todo: may need truncate underLabel later
     computeFontSize(underLabel, {
       width: width,
       height: height
     })
   );
 };
-
 /**
  * Compute value and font size for major and trend
  * @method getMajorAndTrend
@@ -2103,18 +2308,19 @@ var getUnderLabel = function getUnderLabel(_ref10) {
  * @param {Bool} props.shouldAbbreviateTrendValue
  * @returns {Number, Number, Number, Number} Major text, trend text, major text size, trend text size
  */
+
 var getMajorAndTrend = function getMajorAndTrend(_ref11) {
   var width = _ref11.width,
-    height = _ref11.height,
-    majorValue = _ref11.majorValue,
-    trendValue = _ref11.trendValue,
-    majorFontSize = _ref11.majorFontSize,
-    trendFontSize = _ref11.trendFontSize,
-    trendDisplay = _ref11.trendDisplay,
-    unit = _ref11.unit,
-    numberPrecision = _ref11.numberPrecision,
-    shouldUseThousandSeparators = _ref11.shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue = _ref11.shouldAbbreviateTrendValue;
+      height = _ref11.height,
+      majorValue = _ref11.majorValue,
+      trendValue = _ref11.trendValue,
+      majorFontSize = _ref11.majorFontSize,
+      trendFontSize = _ref11.trendFontSize,
+      trendDisplay = _ref11.trendDisplay,
+      unit = _ref11.unit,
+      numberPrecision = _ref11.numberPrecision,
+      shouldUseThousandSeparators = _ref11.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = _ref11.shouldAbbreviateTrendValue;
   var majorTextSpaceRatio = Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(trendValue) && shouldShowTrend(trendDisplay) ? 0.6 : 1;
   var textContentWidth = width * 0.9;
   var textContentHeight = height * 0.9;
@@ -2151,7 +2357,6 @@ var getMajorAndTrend = function getMajorAndTrend(_ref11) {
     trendTextFontSize: trendTextFontSize
   };
 };
-
 /*
  * @method updateVizInSmallSpace
  * @param {Object} props
@@ -2171,25 +2376,26 @@ var getMajorAndTrend = function getMajorAndTrend(_ref11) {
  * @returns {Object} results.newMajorAndTrend
  * @returns {Object} results.updatedProps
  */
+
 var updateVizInSmallSpace = function updateVizInSmallSpace(_ref12) {
   var width = _ref12.width,
-    height = _ref12.height,
-    toRemoveList = _ref12.toRemoveList,
-    majorValue = _ref12.majorValue,
-    trendValue = _ref12.trendValue,
-    majorFontSize = _ref12.majorFontSize,
-    trendFontSize = _ref12.trendFontSize,
-    majorTextFontSize = _ref12.majorTextFontSize,
-    unit = _ref12.unit,
-    numberPrecision = _ref12.numberPrecision,
-    shouldUseThousandSeparators = _ref12.shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue = _ref12.shouldAbbreviateTrendValue;
+      height = _ref12.height,
+      toRemoveList = _ref12.toRemoveList,
+      majorValue = _ref12.majorValue,
+      trendValue = _ref12.trendValue,
+      majorFontSize = _ref12.majorFontSize,
+      trendFontSize = _ref12.trendFontSize,
+      majorTextFontSize = _ref12.majorTextFontSize,
+      unit = _ref12.unit,
+      numberPrecision = _ref12.numberPrecision,
+      shouldUseThousandSeparators = _ref12.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = _ref12.shouldAbbreviateTrendValue;
   var removeIndex = 0;
   var newProps = {}; // options need to be updated
+
   var newMajorAndTrend = {};
-  var newTextSize = majorTextFontSize;
+  var newTextSize = majorTextFontSize; // remove info on viz to make textFontSize >= 12px;
 
-  // remove info on viz to make textFontSize >= 12px;
   while (newTextSize < 12 && removeIndex < toRemoveList.length) {
     var toRemove = toRemoveList[removeIndex];
     newProps = _objectSpread(_objectSpread({}, newProps), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()({}, toRemove.key, toRemove.value));
@@ -2207,9 +2413,9 @@ var updateVizInSmallSpace = function updateVizInSmallSpace(_ref12) {
     }, newProps));
     newTextSize = newMajorAndTrend.majorTextFontSize;
     removeIndex += 1;
-  }
+  } // truncate text if textFontSize is still less than 12
+
 
-  // truncate text if textFontSize is still less than 12
   if (newTextSize < 12) {
     var truncateValue = "".concat(majorValue.toString().slice(0, 3), "...");
     newMajorAndTrend = getMajorAndTrend(_objectSpread({
@@ -2225,12 +2431,12 @@ var updateVizInSmallSpace = function updateVizInSmallSpace(_ref12) {
       shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
     }, newProps));
   }
+
   return {
     newMajorAndTrend: newMajorAndTrend,
     updatedProps: newProps
   };
 };
-
 /*
  * @method computeSingleValueContent
  * @param {Object} props
@@ -2256,67 +2462,71 @@ var updateVizInSmallSpace = function updateVizInSmallSpace(_ref12) {
  * @returns {String} results.majorValueTitle
  * @returns {Object} results.smallVizProps
  */
+
 var computeSingleValueContent = function computeSingleValueContent(_ref13) {
   var contentWidth = _ref13.contentWidth,
-    contentHeight = _ref13.contentHeight,
-    containerWidth = _ref13.containerWidth,
-    containerHeight = _ref13.containerHeight,
-    majorValue = _ref13.majorValue,
-    trendValue = _ref13.trendValue,
-    majorFontSize = _ref13.majorFontSize,
-    trendFontSize = _ref13.trendFontSize,
-    trendDisplay = _ref13.trendDisplay,
-    unit = _ref13.unit,
-    numberPrecision = _ref13.numberPrecision,
-    shouldUseThousandSeparators = _ref13.shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue = _ref13.shouldAbbreviateTrendValue,
-    toRemoveList = _ref13.toRemoveList;
+      contentHeight = _ref13.contentHeight,
+      containerWidth = _ref13.containerWidth,
+      containerHeight = _ref13.containerHeight,
+      majorValue = _ref13.majorValue,
+      trendValue = _ref13.trendValue,
+      majorFontSize = _ref13.majorFontSize,
+      trendFontSize = _ref13.trendFontSize,
+      trendDisplay = _ref13.trendDisplay,
+      unit = _ref13.unit,
+      numberPrecision = _ref13.numberPrecision,
+      shouldUseThousandSeparators = _ref13.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = _ref13.shouldAbbreviateTrendValue,
+      toRemoveList = _ref13.toRemoveList;
+
   var _getMajorAndTrend = getMajorAndTrend({
+    majorValue: majorValue,
+    trendValue: trendValue,
+    majorFontSize: majorFontSize,
+    trendFontSize: trendFontSize,
+    trendDisplay: trendDisplay,
+    width: contentWidth,
+    height: contentHeight,
+    unit: unit,
+    numberPrecision: numberPrecision,
+    shouldUseThousandSeparators: shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+  }),
+      majorText = _getMajorAndTrend.majorText,
+      trendText = _getMajorAndTrend.trendText,
+      majorTextFontSize = _getMajorAndTrend.majorTextFontSize,
+      trendTextFontSize = _getMajorAndTrend.trendTextFontSize;
+
+  var majorValueTitle = majorText;
+  var smallVizProps = {}; // update viz in small space
+  // if textFontSize is less than 12, remove extra info like sparkline, trendvalue, unit
+  // or truncate major value to make the major font size >= 12
+
+  if (majorTextFontSize < 12) {
+    var _updateVizInSmallSpac = updateVizInSmallSpace({
+      width: containerWidth,
+      height: containerHeight,
+      toRemoveList: toRemoveList,
       majorValue: majorValue,
       trendValue: trendValue,
       majorFontSize: majorFontSize,
       trendFontSize: trendFontSize,
-      trendDisplay: trendDisplay,
-      width: contentWidth,
-      height: contentHeight,
+      majorTextFontSize: majorTextFontSize,
       unit: unit,
       numberPrecision: numberPrecision,
       shouldUseThousandSeparators: shouldUseThousandSeparators,
       shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
     }),
-    majorText = _getMajorAndTrend.majorText,
-    trendText = _getMajorAndTrend.trendText,
-    majorTextFontSize = _getMajorAndTrend.majorTextFontSize,
-    trendTextFontSize = _getMajorAndTrend.trendTextFontSize;
-  var majorValueTitle = majorText;
-  var smallVizProps = {};
+        newMajorAndTrend = _updateVizInSmallSpac.newMajorAndTrend,
+        updatedProps = _updateVizInSmallSpac.updatedProps;
 
-  // update viz in small space
-  // if textFontSize is less than 12, remove extra info like sparkline, trendvalue, unit
-  // or truncate major value to make the major font size >= 12
-  if (majorTextFontSize < 12) {
-    var _updateVizInSmallSpac = updateVizInSmallSpace({
-        width: containerWidth,
-        height: containerHeight,
-        toRemoveList: toRemoveList,
-        majorValue: majorValue,
-        trendValue: trendValue,
-        majorFontSize: majorFontSize,
-        trendFontSize: trendFontSize,
-        majorTextFontSize: majorTextFontSize,
-        unit: unit,
-        numberPrecision: numberPrecision,
-        shouldUseThousandSeparators: shouldUseThousandSeparators,
-        shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-      }),
-      newMajorAndTrend = _updateVizInSmallSpac.newMajorAndTrend,
-      updatedProps = _updateVizInSmallSpac.updatedProps;
     majorText = newMajorAndTrend.majorText;
     trendText = newMajorAndTrend.trendText;
     majorTextFontSize = newMajorAndTrend.majorTextFontSize;
     trendTextFontSize = newMajorAndTrend.trendTextFontSize;
     smallVizProps = updatedProps;
   }
+
   return {
     majorText: majorText,
     trendText: trendText,
@@ -2328,17 +2538,17 @@ var computeSingleValueContent = function computeSingleValueContent(_ref13) {
 };
 var minimallyTruncateStringToWidth = function minimallyTruncateStringToWidth(_ref14) {
   var text = _ref14.text,
-    _ref14$fontSize = _ref14.fontSize,
-    fontSize = _ref14$fontSize === void 0 ? DEFAULT_FONT : _ref14$fontSize,
-    _ref14$fontFamily = _ref14.fontFamily,
-    fontFamily = _ref14$fontFamily === void 0 ? DEFAULT_FONT_FAMILY : _ref14$fontFamily,
-    _ref14$fontWeight = _ref14.fontWeight,
-    fontWeight = _ref14$fontWeight === void 0 ? 'normal' : _ref14$fontWeight,
-    containerWidth = _ref14.containerWidth;
+      _ref14$fontSize = _ref14.fontSize,
+      fontSize = _ref14$fontSize === void 0 ? DEFAULT_FONT : _ref14$fontSize,
+      _ref14$fontFamily = _ref14.fontFamily,
+      fontFamily = _ref14$fontFamily === void 0 ? DEFAULT_FONT_FAMILY : _ref14$fontFamily,
+      _ref14$fontWeight = _ref14.fontWeight,
+      fontWeight = _ref14$fontWeight === void 0 ? 'normal' : _ref14$fontWeight,
+      containerWidth = _ref14.containerWidth;
   var textWidth = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])(text, "".concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily));
   var modifiedText = text;
-  var ellipsesLength = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])('...', "".concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily));
-  //  `containerWidth - ellipsesLength > 0` condition ensures space even exists for text.
+  var ellipsesLength = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])('...', "".concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily)); //  `containerWidth - ellipsesLength > 0` condition ensures space even exists for text.
+
   if (containerWidth - ellipsesLength > 0 && textWidth > containerWidth) {
     // Truncates the content such that the truncated value + ellipses fit within the allocated space for the ellipses.
     //  `textWidth > containerWidth - ellipsesLength` condition checks if text + ellipses exceeds container width.
@@ -2347,11 +2557,12 @@ var minimallyTruncateStringToWidth = function minimallyTruncateStringToWidth(_re
       modifiedText = modifiedText.substring(0, modifiedText.length - 1);
       textWidth = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])(modifiedText, "normal ".concat(fontSize, "px ").concat(fontFamily));
     }
+
     modifiedText = "".concat(modifiedText, "...");
   }
+
   return modifiedText;
 };
-
 /*
  * @method computeSingleValueRadialContent
  * @param {Object} props
@@ -2378,44 +2589,46 @@ var minimallyTruncateStringToWidth = function minimallyTruncateStringToWidth(_re
  * @returns {String} results.majorValueTitle
  * @returns {Object} results.smallVizProps
  */
+
 var computeSingleValueRadialContent = function computeSingleValueRadialContent(_ref15) {
   var contentWidth = _ref15.contentWidth,
-    contentHeight = _ref15.contentHeight,
-    containerWidth = _ref15.containerWidth,
-    containerHeight = _ref15.containerHeight,
-    majorValue = _ref15.majorValue,
-    trendValue = _ref15.trendValue,
-    majorFontSize = _ref15.majorFontSize,
-    trendFontSize = _ref15.trendFontSize,
-    trendDisplay = _ref15.trendDisplay,
-    unit = _ref15.unit,
-    numberPrecision = _ref15.numberPrecision,
-    shouldUseThousandSeparators = _ref15.shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue = _ref15.shouldAbbreviateTrendValue,
-    smallViz = _ref15.smallViz;
+      contentHeight = _ref15.contentHeight,
+      containerWidth = _ref15.containerWidth,
+      containerHeight = _ref15.containerHeight,
+      majorValue = _ref15.majorValue,
+      trendValue = _ref15.trendValue,
+      majorFontSize = _ref15.majorFontSize,
+      trendFontSize = _ref15.trendFontSize,
+      trendDisplay = _ref15.trendDisplay,
+      unit = _ref15.unit,
+      numberPrecision = _ref15.numberPrecision,
+      shouldUseThousandSeparators = _ref15.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = _ref15.shouldAbbreviateTrendValue,
+      smallViz = _ref15.smallViz;
+
   var _getMajorAndTrend2 = getMajorAndTrend({
-      majorValue: majorValue,
-      trendValue: trendValue,
-      majorFontSize: majorFontSize,
-      trendFontSize: trendFontSize,
-      trendDisplay: trendDisplay,
-      width: contentWidth,
-      height: contentHeight,
-      unit: unit,
-      numberPrecision: numberPrecision,
-      shouldUseThousandSeparators: shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-    }),
-    majorText = _getMajorAndTrend2.majorText,
-    trendText = _getMajorAndTrend2.trendText,
-    majorTextFontSize = _getMajorAndTrend2.majorTextFontSize,
-    trendTextFontSize = _getMajorAndTrend2.trendTextFontSize;
-  var majorValueTitle = majorText;
-  var smallVizProps = {};
+    majorValue: majorValue,
+    trendValue: trendValue,
+    majorFontSize: majorFontSize,
+    trendFontSize: trendFontSize,
+    trendDisplay: trendDisplay,
+    width: contentWidth,
+    height: contentHeight,
+    unit: unit,
+    numberPrecision: numberPrecision,
+    shouldUseThousandSeparators: shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+  }),
+      majorText = _getMajorAndTrend2.majorText,
+      trendText = _getMajorAndTrend2.trendText,
+      majorTextFontSize = _getMajorAndTrend2.majorTextFontSize,
+      trendTextFontSize = _getMajorAndTrend2.trendTextFontSize;
 
-  // custom logic for viz in small space
+  var majorValueTitle = majorText;
+  var smallVizProps = {}; // custom logic for viz in small space
   // if not showing the radial graph (if `smallViz` is true), then compute truncated major value
   //  and font sizes
+
   if (smallViz) {
     var truncateValue = minimallyTruncateStringToWidth({
       text: majorValue,
@@ -2423,6 +2636,7 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
       fontSize: 12,
       containerWidth: containerWidth
     });
+
     var _getMajorAndTrend3 = getMajorAndTrend({
       majorValue: truncateValue,
       trendValue: trendValue,
@@ -2436,6 +2650,7 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
       shouldUseThousandSeparators: shouldUseThousandSeparators,
       shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
     });
+
     majorText = _getMajorAndTrend3.majorText;
     trendText = _getMajorAndTrend3.trendText;
     majorTextFontSize = _getMajorAndTrend3.majorTextFontSize;
@@ -2445,6 +2660,7 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
       unit: unit
     };
   }
+
   return {
     majorText: majorText,
     trendText: trendText,
@@ -2454,7 +2670,6 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
     smallVizProps: smallVizProps
   };
 };
-
 /**
  * Get the colors for a graph
  *
@@ -2467,21 +2682,22 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
  * @returns {Object} { background, stroke } colors
  * @private
  */
+
 var getGraphColors = function getGraphColors(_ref16) {
   var backgroundEnabled = _ref16.backgroundEnabled,
-    backgroundColor = _ref16.backgroundColor,
-    defaultColors = _ref16.defaultColors,
-    customColorFormatter = _ref16.customColorFormatter;
-  // Only do custom colors in block mode
+      backgroundColor = _ref16.backgroundColor,
+      defaultColors = _ref16.defaultColors,
+      customColorFormatter = _ref16.customColorFormatter; // Only do custom colors in block mode
+
   if (backgroundEnabled) {
     // Check if the user defined colors to use
     if (backgroundColor && typeof customColorFormatter === 'function') {
       return customColorFormatter(backgroundColor);
     }
   }
+
   return defaultColors.none;
 };
-
 /**
  * Adjust rgb value if it equals to 0 or 255
  * @method adjustRGB
@@ -2490,16 +2706,18 @@ var getGraphColors = function getGraphColors(_ref16) {
  * @returns {Number} adjusted rgb
  * @private
  */
+
 var adjustRGB = function adjustRGB(rgb, delta) {
   if (rgb === 255) {
     return rgb - delta;
   }
+
   if (rgb === 0) {
     return rgb + delta;
   }
+
   return rgb;
 };
-
 /**
  * Modifies colors by multiplying by a given ratio
  * @method changeColor
@@ -2508,18 +2726,16 @@ var adjustRGB = function adjustRGB(rgb, delta) {
  * @returns {String} new color
  * @private
  */
+
 var changeColor = function changeColor(color, ratio) {
   var hex = color.replace(/(0x|#)/, '');
   var r = parseInt(hex.substr(0, 2), 16);
   var g = parseInt(hex.substr(2, 2), 16);
-  var b = parseInt(hex.substr(4, 2), 16);
+  var b = parseInt(hex.substr(4, 2), 16); // Multiply by given ratio, make sure is between 0 and 255;
 
-  // Multiply by given ratio, make sure is between 0 and 255;
   var newR = Math.max(Math.min(Math.floor(r * ratio), 255), 0);
   var newG = Math.max(Math.min(Math.floor(g * ratio), 255), 0);
-  var newB = Math.max(Math.min(Math.floor(b * ratio), 255), 0);
-
-  // If the color is not changed
+  var newB = Math.max(Math.min(Math.floor(b * ratio), 255), 0); // If the color is not changed
   // case 1: the color is (0, 0 0)
   //         lighten color (80, 80, 80)
   //         darken color (40, 40, 40)
@@ -2528,6 +2744,7 @@ var changeColor = function changeColor(color, ratio) {
   //         darken color (175, 175, 175)
   // case 3: the color is e.g. (0, 255, 0)
   //         new color (20, 235, 20)
+
   if (newR === r && newG === g && newB === b) {
     if (newR === 0 && newG === 0 && newB === 0) {
       if (ratio > 1) {
@@ -2555,9 +2772,9 @@ var changeColor = function changeColor(color, ratio) {
       newB = adjustRGB(newB, 20);
     }
   }
+
   return "#".concat(newR.toString(16).padStart(2, 0)) + "".concat(newG.toString(16).padStart(2, 0)) + "".concat(newB.toString(16).padStart(2, 0));
 };
-
 /**
  * Lighten a given color
  * @method lighten
@@ -2565,10 +2782,11 @@ var changeColor = function changeColor(color, ratio) {
  * @returns {String}
  * @private
  */
+
+
 var lighten = function lighten(color) {
   return changeColor(color, 1.3);
 };
-
 /**
  * Darkens a given color
  * @method darken
@@ -2576,10 +2794,10 @@ var lighten = function lighten(color) {
  * @returns {String}
  * @private
  */
+
 var darken = function darken(color) {
   return changeColor(color, 0.5);
 };
-
 /** consistent token structure: handle callback to add value and name in event payload
  * @method handleValueClickCallback
  * @param {Object} ev
@@ -2588,6 +2806,7 @@ var darken = function darken(color) {
  * @param {Number} trendValue
  * @param {Function} onValueClick
  */
+
 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] : '';
@@ -2597,12 +2816,14 @@ var handleValueClickCallback = function handleValueClickCallback(ev, majorValue,
     value: majorValue,
     name: majorValueField
   };
+
   if (trellisEnabled) {
     payload = _objectSpread(_objectSpread({}, payload), {}, {
       'trellis.name': trellisSplityBy,
       'trellis.value': trellisKey
     });
   }
+
   return onValueClick(_objectSpread(_objectSpread({}, ev), {}, {
     payload: payload
   }));
@@ -2613,35 +2834,35 @@ var handleValueClickCallback = function handleValueClickCallback(ev, majorValue,
 /***/ 25:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-context/TimezoneContext");
+module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
 /***/ 26:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/hocUtils");
+module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
 
 /***/ 27:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
+module.exports = require("@splunk/visualizations-shared/hocUtils");
 
 /***/ }),
 
 /***/ 28:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/propUtils");
+module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
 
 /***/ }),
 
 /***/ 29:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/Options");
+module.exports = require("@splunk/visualizations-shared/propUtils");
 
 /***/ }),
 
@@ -2655,11 +2876,18 @@ module.exports = require("lodash");
 /***/ 30:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/numberUtils");
+module.exports = require("@splunk/visualization-encoding/Options");
 
 /***/ }),
 
 /***/ 31:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/numberUtils");
+
+/***/ }),
+
+/***/ 32:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2669,11 +2897,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.shouldShowIconPlaceholder = void 0;
+
 var React = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
+
 var i18n_1 = __webpack_require__(2);
+
 var Message_1 = __webpack_require__(10);
+
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method shouldShowIconPlaceholder
@@ -2681,14 +2915,17 @@ var FixedSizeContainer_1 = __webpack_require__(13);
  * @param {boolean} loading
  * @returns {boolean}
  */
+
+
 var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
   var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
+  var data = (0, lodash_1.get)(dataSources, 'primary.data.columns[0]', undefined);
   var noData = data === undefined;
-  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
+  var fields = (0, lodash_1.get)(dataSources, 'primary.data.fields[0]', undefined);
   var noFields = fields === undefined;
   return loading || noData || noFields;
 };
+
 exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
 var propTypes = {
   icon: T.func,
@@ -2703,11 +2940,13 @@ var propTypes = {
  * @param {IconPlaceholderProps} props
  * @returns {React.ReactElement}
  */
+
 var IconPlaceholder = function IconPlaceholder(props) {
   var width = props.width,
-    height = props.height,
-    icon = props.icon,
-    iconColor = props.iconColor;
+      height = props.height,
+      icon = props.icon,
+      iconColor = props.iconColor;
+
   if (icon) {
     return React.createElement(icon, {
       style: {
@@ -2722,26 +2961,21 @@ var IconPlaceholder = function IconPlaceholder(props) {
       height: '50%'
     });
   }
+
   return React.createElement(Message_1.default, {
     width: width,
     height: height,
     level: "warning",
-    message: i18n_1._('No DataSource Connected')
+    message: (0, i18n_1._)('No DataSource Connected')
   });
 };
+
 IconPlaceholder.propTypes = propTypes;
 IconPlaceholder.defaultProps = {
   width: '100%',
   height: 250
 };
-exports.default = FixedSizeContainer_1.default(IconPlaceholder);
-
-/***/ }),
-
-/***/ 32:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/id");
+exports.default = (0, FixedSizeContainer_1.default)(IconPlaceholder);
 
 /***/ }),
 
@@ -2752,21 +2986,27 @@ module.exports = require("@splunk/ui-utils/id");
 
 
 var _defineProperty = __webpack_require__(7);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSortingParams = exports.SortParamsPropTypes = void 0;
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
-var DataSource_1 = __webpack_require__(43);
+
+var DataSource_1 = __webpack_require__(34);
+
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
   currentSortDir: T.oneOf(DataSource_1.validSortDirs),
   onSort: T.func
 });
+
 var getSortingParams = function getSortingParams(_ref) {
   var requestParams = _ref.requestParams,
-    onRequestParamsChange = _ref.onRequestParamsChange;
+      onRequestParamsChange = _ref.onRequestParamsChange;
   var currentSortKey;
   var currentSortDir;
   var nextSortDirMap = {
@@ -2775,17 +3015,20 @@ var getSortingParams = function getSortingParams(_ref) {
     none: 'asc'
   };
   var onSort;
+
   if (typeof onRequestParamsChange === 'function') {
-    if (requestParams && lodash_1.has(requestParams, 'sort')) {
+    if (requestParams && (0, lodash_1.has)(requestParams, 'sort')) {
       currentSortKey = Object.keys(requestParams.sort).shift();
       currentSortDir = requestParams.sort[currentSortKey];
-    }
-    // undid memoization since there is a dependency on requestParams, which is a deeply nested object
+    } // undid memoization since there is a dependency on requestParams, which is a deeply nested object
+
+
     onSort = function onSort(e, _ref2) {
       var sortKey = _ref2.sortKey,
-        sortDir = _ref2.sortDir;
+          sortDir = _ref2.sortDir;
+
       if (typeof sortKey === 'string') {
-        var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
+        var nextSortDir = (0, lodash_1.has)(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
         onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
           offset: 0,
           sort: _defineProperty({}, sortKey, nextSortDir)
@@ -2795,12 +3038,14 @@ var getSortingParams = function getSortingParams(_ref) {
       }
     };
   }
+
   return {
     currentSortKey: currentSortKey,
     currentSortDir: currentSortDir,
     onSort: onSort
   };
 };
+
 exports.getSortingParams = getSortingParams;
 
 /***/ }),
@@ -2811,43 +3056,69 @@ exports.getSortingParams = getSortingParams;
 "use strict";
 
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validOutputModes = exports.validSegmentationModes = exports.validSortDirs = void 0;
+exports.validSortDirs = ['asc', 'desc', 'none'];
+exports.validSegmentationModes = ['none', 'inner'];
+exports.validOutputModes = ['json_cols', 'json'];
+
+/***/ }),
+
+/***/ 35:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
+
 exports.PaginatorParamsPropTypes = T.shape({
   isPaging: T.bool,
   current: T.number,
   totalPages: T.number,
   onChange: T.func
 });
+
 var getPaginationParams = function getPaginationParams(_ref) {
   var requestParams = _ref.requestParams,
-    meta = _ref.meta,
-    onRequestParamsChange = _ref.onRequestParamsChange;
+      meta = _ref.meta,
+      onRequestParamsChange = _ref.onRequestParamsChange;
   var totalCount = meta && meta.totalCount || 0;
   var offset = requestParams && requestParams.offset || 0;
   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 && typeof onRequestParamsChange === 'function';
+
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var page = _ref2.page,
-      countArg = _ref2.count;
-    var newParams = lodash_1.cloneDeep(requestParams);
+        countArg = _ref2.count;
+    var newParams = (0, lodash_1.cloneDeep)(requestParams);
+
     if (typeof countArg === 'number') {
       newParams.count = countArg;
       newParams.offset = 0;
     }
+
     var pageCount = typeof newParams.count === 'number' ? newParams.count : 10;
+
     if (typeof page === 'number' && page > 0) {
       newParams.count = pageCount;
       newParams.offset = (page - 1) * pageCount;
     }
+
     onRequestParamsChange(newParams);
   };
+
   return {
     isPaging: isPaging,
     current: current,
@@ -2855,11 +3126,12 @@ var getPaginationParams = function getPaginationParams(_ref) {
     onChange: typeof onRequestParamsChange === 'function' ? onChangeHandler : lodash_1.noop
   };
 };
+
 exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
 
-/***/ 35:
+/***/ 36:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2870,6 +3142,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizCategory = void 0;
 var VizCategory;
+
 (function (VizCategory) {
   VizCategory["SINGLE_VALUE"] = "Single Value";
   VizCategory["TRENDS"] = "Trends";
@@ -2887,67 +3160,96 @@ var VizCategory;
 
 /***/ }),
 
-/***/ 36:
+/***/ 37:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var lodash_1 = __webpack_require__(3);
-var getSettingsFromThemedProps_1 = __webpack_require__(37);
-var Options_1 = __webpack_require__(29);
-var SanitizeProps_1 = __webpack_require__(38);
-var TimezoneContext_1 = __webpack_require__(25);
-var moment_1 = __webpack_require__(39);
+
+var getSettingsFromThemedProps_1 = __webpack_require__(38);
+
+var Options_1 = __webpack_require__(30);
+
+var SanitizeProps_1 = __webpack_require__(39);
+
+var TimezoneContext_1 = __webpack_require__(26);
+
+var moment_1 = __webpack_require__(40);
+
 var FeatureFlagContext_1 = __webpack_require__(21);
+
 var styled_components_1 = __webpack_require__(4);
-var hocUtils_1 = __webpack_require__(26);
-var JSONSchemaUtils_1 = __webpack_require__(27);
-var async_dynamic_options_evaluator_1 = __webpack_require__(40);
-var id_1 = __webpack_require__(32);
-var SplunkVisualization_1 = __webpack_require__(41);
+
+var hocUtils_1 = __webpack_require__(27);
+
+var JSONSchemaUtils_1 = __webpack_require__(28);
+
+var async_dynamic_options_evaluator_1 = __webpack_require__(41);
+
+var id_1 = __webpack_require__(25);
+
+var SplunkVisualization_1 = __webpack_require__(42);
+
 var VizBehavior_1 = __webpack_require__(6);
+
 var getSorting_1 = __webpack_require__(33);
-var getPagination_1 = __webpack_require__(34);
+
+var getPagination_1 = __webpack_require__(35);
+
 var useDeepMemo_1 = __webpack_require__(44);
+
 var MissingPropsMessage_1 = __webpack_require__(45);
+
 var withEditModeCover_1 = __webpack_require__(46);
+
 var withPlaceholder_1 = __webpack_require__(47);
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
  * @returns {HOC}
  */
+
+
 var withDashboardViz = function withDashboardViz(opts) {
   var ReactViz = opts.ReactViz,
-    vizConfig = opts.vizConfig,
-    _opts$computeVizProps = opts.computeVizProps,
-    computeVizProps = _opts$computeVizProps === void 0 ? function () {} : _opts$computeVizProps,
-    disableEditModeCover = opts.disableEditModeCover,
-    useIconPlaceholder = opts.useIconPlaceholder; // sanitizing props before sending them to reactviz.
-  var SanitizedReactViz = SanitizeProps_1.withSanitizedProps(ReactViz);
-  var defaultOptions = JSONSchemaUtils_1.pickFieldFromJSONSchema(vizConfig.optionsSchema, 'default');
+      vizConfig = opts.vizConfig,
+      _opts$computeVizProps = opts.computeVizProps,
+      computeVizProps = _opts$computeVizProps === void 0 ? function () {} : _opts$computeVizProps,
+      disableEditModeCover = opts.disableEditModeCover,
+      useIconPlaceholder = opts.useIconPlaceholder; // sanitizing props before sending them to reactviz.
+
+  var SanitizedReactViz = (0, SanitizeProps_1.withSanitizedProps)(ReactViz);
+  var defaultOptions = (0, JSONSchemaUtils_1.pickFieldFromJSONSchema)(vizConfig.optionsSchema, 'default');
+
   var DashboardViz = function DashboardViz(props) {
     var _a;
+
     var mode = props.mode,
-      hasEventHandlers = props.hasEventHandlers,
-      dataSources = props.dataSources,
-      options = props.options,
-      _props$context = props.context,
-      context = _props$context === void 0 ? {} : _props$context,
-      width = props.width,
-      height = props.height,
-      onComputedProps = props.onComputedProps,
-      onEventTrigger = props.onEventTrigger,
-      theme = props.theme,
-      onRequestParamsChange = props.onRequestParamsChange;
+        hasEventHandlers = props.hasEventHandlers,
+        dataSources = props.dataSources,
+        options = props.options,
+        _props$context = props.context,
+        context = _props$context === void 0 ? {} : _props$context,
+        width = props.width,
+        height = props.height,
+        onComputedProps = props.onComputedProps,
+        onEventTrigger = props.onEventTrigger,
+        theme = props.theme,
+        onRequestParamsChange = props.onRequestParamsChange;
+
     var _React$useContext = React.useContext(TimezoneContext_1.default),
-      serializedTimezone = _React$useContext.serializedTimezone;
+        serializedTimezone = _React$useContext.serializedTimezone;
+
     if (serializedTimezone) {
       /*
           @splunk/moment currently does not allow us to customize the timezone on a per visualization basis.
@@ -2961,44 +3263,58 @@ var withDashboardViz = function withDashboardViz(opts) {
         moment_1.default.setDefaultSplunkTimezone(serializedTimezone);
       }
     }
+
     var themeFunc = function themeFunc(themeVar) {
       var _a, _b;
+
       return (_b = (_a = vizConfig.themes)[themeVar]) === null || _b === void 0 ? void 0 : _b.call(_a, props);
     };
+
     var bgColorFromTheme = themeFunc('defaultBackgroundColor');
-    var _getSettingsFromTheme = getSettingsFromThemedProps_1.default({
-        theme: theme
-      }),
-      currentThemeFamily = _getSettingsFromTheme.family,
-      currentThemeColorScheme = _getSettingsFromTheme.colorScheme,
-      currentThemeDensity = _getSettingsFromTheme.density;
+
+    var _ref = (0, getSettingsFromThemedProps_1.default)({
+      theme: theme
+    }),
+        currentThemeFamily = _ref.family,
+        currentThemeColorScheme = _ref.colorScheme,
+        currentThemeDensity = _ref.density;
+
     var evaluatedOptions = {}; // evaluatedOptions need to be initialized as an empty object
+
     var _React$useState = React.useState({}),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      evaluatedOptionsAsync = _React$useState2[0],
-      setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        evaluatedOptionsAsync = _React$useState2[0],
+        setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
+
+
     var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
-    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat(id_1.createGUID())),
-      _React$useState4 = _slicedToArray(_React$useState3, 1),
-      visualizationID = _React$useState4[0];
+
+    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat((0, id_1.createGUID)())),
+        _React$useState4 = _slicedToArray(_React$useState3, 1),
+        visualizationID = _React$useState4[0];
+
     var _React$useState5 = React.useState({}),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      dataSourcesInState = _React$useState6[0],
-      setDataSourcesInState = _React$useState6[1];
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        dataSourcesInState = _React$useState6[0],
+        setDataSourcesInState = _React$useState6[1];
+
     var _React$useState7 = React.useState(),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      dataFramesInState = _React$useState8[0],
-      setDataFramesInState = _React$useState8[1];
-    var _React$useState9 = React.useState(Boolean(featureFlagContext && featureFlagContext.visualizations_useWebWorkersForDSL && typeof Worker !== 'undefined')),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      useAsyncEvaluatedOptions = _React$useState10[0],
-      setUseAsyncEvaluatedOptions = _React$useState10[1];
-    evaluatedOptions = useDeepMemo_1.useDeepMemo(function () {
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        dataFramesInState = _React$useState8[0],
+        setDataFramesInState = _React$useState8[1];
+
+    var _React$useState9 = React.useState(Boolean(featureFlagContext === null || featureFlagContext === void 0 ? void 0 : featureFlagContext.visualizations_useWebWorkersForDSL)),
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        useAsyncEvaluatedOptions = _React$useState10[0],
+        setUseAsyncEvaluatedOptions = _React$useState10[1];
+
+    var isMounted = React.useRef(true);
+    evaluatedOptions = (0, useDeepMemo_1.useDeepMemo)(function () {
       try {
         if (useAsyncEvaluatedOptions) {
           var optionsToEvaluate = {
-            context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
-            options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
+            context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
+            options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
           };
           var asyncDynamicOptionsEvaluatorParams = {
             visualizationID: visualizationID,
@@ -3009,21 +3325,23 @@ var withDashboardViz = function withDashboardViz(opts) {
           };
           async_dynamic_options_evaluator_1.default.evaluate(asyncDynamicOptionsEvaluatorParams).then(function (results) {
             setEvaluatedOptionsAsync(results.results);
-          }).catch(function (e) {
-            // eslint-disable-next-line no-console
-            console.error("unexpected error evaluating options - async: ".concat(e.message));
-            setUseAsyncEvaluatedOptions(false);
+          }).catch(function () {
+            if (isMounted.current) {
+              setUseAsyncEvaluatedOptions(false);
+            }
           });
         } else {
           var dataFrames = dataFramesInState;
+
           if (dataSources !== dataSourcesInState) {
             setDataSourcesInState(dataSources);
             dataFrames = Options_1.Options.dataFrameFromDataSource(dataSources);
             setDataFramesInState(dataFrames);
           }
+
           return Options_1.Options.evaluate({
-            context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
-            options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
+            context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
+            options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
           }, dataSources, themeFunc, dataFrames);
         }
       } catch (e) {
@@ -3031,67 +3349,76 @@ var withDashboardViz = function withDashboardViz(opts) {
         console.error("unexpected error evaluating options: ".concat(e.message));
         return {};
       }
+
       return {};
     }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone, useAsyncEvaluatedOptions]);
-    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
-    // trellis specific backgroundColor update for onComputedProps
+    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 = 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 = Object.assign(Object.assign({}, evaluatedOptionsToUse), {
         backgroundColor: clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
       });
-    }
-    // useEffect hook needs to be initialized before any early returns
+    } // 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(clonedEvaluatedOptions);
     });
     React.useEffect(function () {
       return function () {
         if (useAsyncEvaluatedOptions) {
+          isMounted.current = false;
           async_dynamic_options_evaluator_1.default.reset(visualizationID);
         }
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // present warning message if any required props are missing
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // present warning message if any required props are missing
+
     var _vizConfig$requiredPr = vizConfig.requiredProps,
-      requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
-      supports = vizConfig.supports;
-    var missing = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptionsToUse);
+        requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
+        supports = vizConfig.supports;
+    var missing = (0, MissingPropsMessage_1.missingKeys)(requiredProps, evaluatedOptionsToUse);
+
     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
+        return React.createElement(MissingPropsMessage_1.default, {
+          "data-test": "missing-props-message",
+          width: width,
+          height: height,
+          missingProps: missing,
+          backgroundColor: bgColorFromTheme
+        });
+      } // events
+
+
     var eventCallbackProps = {};
+
     if (hasEventHandlers && mode === 'view' && vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.EVENTS) > -1) {
       var supportedEvents = vizConfig.events;
       Object.keys(supportedEvents).forEach(function (eventName) {
-        var eventCallbackPropName = lodash_1.camelCase("on.".concat(eventName));
-        eventCallbackProps[eventCallbackPropName] = null;
-        // todo: refactor single value and single value icon to send payload from viz
+        var eventCallbackPropName = (0, lodash_1.camelCase)("on.".concat(eventName));
+        eventCallbackProps[eventCallbackPropName] = null; // todo: refactor single value and single value icon to send payload from viz
         // then remove these lines
+
         var payloadKeys = supportedEvents[eventName].payloadKeys;
         var payload = {};
+
         if (Array.isArray(payloadKeys) && payloadKeys.length) {
           payloadKeys.forEach(function (p) {
             payload[p] = evaluatedOptionsToUse[p];
           });
         }
+
         eventCallbackProps[eventCallbackPropName] = function (ev) {
           if (ev && ev.payload) {
             payload = ev.payload;
           }
+
           return onEventTrigger({
             originalEvent: ev,
             payload: payload,
@@ -3099,8 +3426,9 @@ var withDashboardViz = function withDashboardViz(opts) {
           });
         };
       });
-    }
-    // compute pure viz props which are not from options
+    } // compute pure viz props which are not from options
+
+
     var computedVizProps = computeVizProps(Object.assign(Object.assign(Object.assign(Object.assign({}, props), evaluatedOptionsToUse), eventCallbackProps), {
       themeFunc: themeFunc
     }));
@@ -3118,21 +3446,25 @@ var withDashboardViz = function withDashboardViz(opts) {
      * In future, we could automatically detect which all datasources are being used
      * and bind those magically to pagination/sorting behavior.
      */
+
     var dataSourceMetadata = {};
     var OptionKey = 'paginateDataSourceKey';
-    var paginateDataSourceKey = lodash_1.has(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
-    if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && lodash_1.has(dataSources, paginateDataSourceKey)) {
-      var requestParams = lodash_1.get(dataSources, [paginateDataSourceKey, 'requestParams'], {});
-      var meta = lodash_1.get(dataSources, [paginateDataSourceKey, 'meta'], {});
+    var paginateDataSourceKey = (0, lodash_1.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
+
+    if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && (0, lodash_1.has)(dataSources, paginateDataSourceKey)) {
+      var requestParams = (0, lodash_1.get)(dataSources, [paginateDataSourceKey, 'requestParams'], {});
+      var meta = (0, lodash_1.get)(dataSources, [paginateDataSourceKey, 'meta'], {});
+
       var handleRequestParamsChange = function handleRequestParamsChange(payload) {
         return onRequestParamsChange(paginateDataSourceKey, payload);
       };
-      var sortParams = getSorting_1.getSortingParams({
+
+      var sortParams = (0, getSorting_1.getSortingParams)({
         requestParams: requestParams,
         meta: meta,
         onRequestParamsChange: handleRequestParamsChange
       });
-      var paginatorParams = getPagination_1.getPaginationParams({
+      var paginatorParams = (0, getPagination_1.getPaginationParams)({
         requestParams: requestParams,
         meta: meta,
         onRequestParamsChange: handleRequestParamsChange
@@ -3141,115 +3473,132 @@ var withDashboardViz = function withDashboardViz(opts) {
         sortParams: sortParams,
         paginatorParams: paginatorParams
       };
-    }
-    // if were using webworkers and this is the first render we dont want to show a viz with missing data so we return null
+    } // if were using webworkers and this is the first render we dont want to show a viz with missing data so we return null
+
+
     if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
       return null;
     }
+
     return React.createElement(SanitizedReactViz, Object.assign({
       mode: mode,
       width: width,
       height: height
     }, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
   };
+
   DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
   DashboardViz.defaultProps = Object.assign(Object.assign(Object.assign({}, SplunkVisualization_1.default.defaultProps), ReactViz.defaultProps), {
     // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
     theme: {}
-  });
-  // attach viz config
-  DashboardViz.config = vizConfig;
-  // @ts-ignore: TODO fix sc upgrade TS issues
-  return styled_components_1.withTheme(withPlaceholder_1.default(withEditModeCover_1.default(DashboardViz, disableEditModeCover), useIconPlaceholder));
+  }); // attach viz config
+
+  DashboardViz.config = vizConfig; // @ts-ignore: TODO fix sc upgrade TS issues
+
+  return (0, styled_components_1.withTheme)((0, withPlaceholder_1.default)((0, withEditModeCover_1.default)(DashboardViz, disableEditModeCover), useIconPlaceholder));
 };
+
 exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 37:
+/***/ 38:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
 
-/***/ 38:
+/***/ 39:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
 
-/***/ 39:
+/***/ 4:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/moment");
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 4:
+/***/ 40:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+module.exports = require("@splunk/moment");
 
 /***/ }),
 
-/***/ 40:
+/***/ 41:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/async-dynamic-options-evaluator");
 
 /***/ }),
 
-/***/ 41:
+/***/ 42:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _classCallCheck = __webpack_require__(9);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 lodash_1 = __webpack_require__(3);
-var VizActionHandler_1 = __webpack_require__(42);
-// this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+
+var VizActionHandler_1 = __webpack_require__(43); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+
+
 exports.INITIAL_WIDTH = 250;
 exports.INITIAL_HEIGHT = 250;
 /**
  * A Splunk visualization
  */
+
 var SplunkVisualization = function SplunkVisualization() {
   _classCallCheck(this, SplunkVisualization);
 };
+
 SplunkVisualization.propTypes = {
   /**
    * display mode
    */
   mode: T.oneOf(['view', 'edit', 'export']).isRequired,
+
   /**
    * width in pixel or string, defaults to 100%
    */
   width: T.oneOfType([T.string, T.number]).isRequired,
+
   /**
    * height in pixel or string
    */
   height: T.oneOfType([T.string, T.number]).isRequired,
+
   /**
    * visualization context used for dynamic option evaluation
    */
   context: T.object,
+
   /**
    * visualization formatting options
    */
   options: T.object,
+
   /**
    * A callback to update formatting options
    */
   onOptionsChange: T.func,
+
   /**
    * datasource state which include data and request params, object key indicate the datasource type.
    */
@@ -3258,6 +3607,7 @@ SplunkVisualization.propTypes = {
      * current request params
      */
     requestParams: T.object,
+
     /**
      * current dataset
      */
@@ -3265,6 +3615,7 @@ SplunkVisualization.propTypes = {
       fields: T.array,
       columns: T.array
     }),
+
     /**
      * error
      */
@@ -3272,29 +3623,35 @@ SplunkVisualization.propTypes = {
       level: T.string,
       message: T.string
     }),
+
     /**
      * meta data that came with the dataset
      */
     meta: T.object
   })),
+
   /**
    * A callback to trigger event
    */
   onEventTrigger: T.func,
+
   /**
    * Inform viz if there are handlers listening to events
    */
   hasEventHandlers: T.bool,
+
   /**
    * A callback to communicate computed props to a consumer
    */
   onComputedProps: T.func,
+
   /**
    * A callback to obtain visualization api
    */
   vizActionHandlerRef: T.func,
   loading: T.bool,
   theme: T.object,
+
   /**
    * A callback to request new data with updated request params
    */
@@ -3303,6 +3660,7 @@ SplunkVisualization.propTypes = {
 /**
  *
  */
+
 SplunkVisualization.defaultProps = {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: '100%',
@@ -3331,26 +3689,29 @@ exports.default = SplunkVisualization;
 
 /***/ }),
 
-/***/ 42:
+/***/ 43:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _classCallCheck = __webpack_require__(9);
+
 var _createClass = __webpack_require__(18);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DefaultVizActionHandler = void 0;
+
 var DefaultVizActionHandler = /*#__PURE__*/function () {
   function DefaultVizActionHandler() {
     _classCallCheck(this, DefaultVizActionHandler);
   }
+
   _createClass(DefaultVizActionHandler, [{
     key: "focus",
-    value: function focus() {
-      // noop
+    value: function focus() {// noop
     }
   }, {
     key: "snapshot",
@@ -3358,23 +3719,11 @@ var DefaultVizActionHandler = /*#__PURE__*/function () {
       return null; // noop
     }
   }]);
+
   return DefaultVizActionHandler;
 }();
-exports.DefaultVizActionHandler = DefaultVizActionHandler;
-
-/***/ }),
-
-/***/ 43:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.validSortDirs = void 0;
-exports.validSortDirs = ['asc', 'desc', 'none'];
+exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
 
@@ -3388,7 +3737,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDeepMemo = void 0;
+
 var react_1 = __webpack_require__(1);
+
 var lodash_1 = __webpack_require__(3);
 /**
  * This hook evaluates and stores the result of a passed function and only
@@ -3403,16 +3754,21 @@ var lodash_1 = __webpack_require__(3);
  * @param fn the function to be executed and
  * @param dependencies an array of dependencies
  */
+
+
 var useDeepMemo = function useDeepMemo(fn, dependencies) {
-  var ref = react_1.useRef();
-  if (!ref.current || !lodash_1.isEqual(dependencies, ref.current.dependencies)) {
+  var ref = (0, react_1.useRef)();
+
+  if (!ref.current || !(0, lodash_1.isEqual)(dependencies, ref.current.dependencies)) {
     ref.current = {
       dependencies: dependencies,
       value: fn()
     };
   }
+
   return ref.current.value;
 };
+
 exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
@@ -3427,19 +3783,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
+
 var React = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
 var i18n_1 = __webpack_require__(2);
+
 var Message_1 = __webpack_require__(10);
+
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method isMissing
  * @param {any} v
  * @returns {boolean} true if the input value === null or undefined
  */
+
+
 var isMissing = function isMissing(v) {
   return v === null || v === undefined;
 };
+
 exports.isMissing = isMissing;
 /**
  * @method misskingKeys
@@ -3447,11 +3811,13 @@ exports.isMissing = isMissing;
  * @param {object} target
  * @returns {string[]} the keys of missing required props
  */
+
 var missingKeys = function missingKeys(keys, target) {
   return keys.filter(function (k) {
-    return exports.isMissing(target[k]);
+    return (0, exports.isMissing)(target[k]);
   });
 };
+
 exports.missingKeys = missingKeys;
 var propTypes = {
   width: T.oneOfType([T.string, T.number]),
@@ -3465,74 +3831,148 @@ var propTypes = {
  * @param {MissingPropsProps} props
  * @returns {React.ReactElement}
  */
+
 var MissingPropsMessage = function MissingPropsMessage(props) {
   var width = props.width,
-    height = props.height,
-    missingProps = props.missingProps;
+      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(', ')))
+    message: (0, 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);
+exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage);
 
 /***/ }),
 
 /***/ 46:
 /***/ (function(module, exports, __webpack_require__) {
 
-"use strict";
+"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__(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': "26.1.0 - fc8bf8d77"
+}).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"
+    }));
+  };
+
+  (0, hocUtils_1.extendStaticWrapperProps)({
+    Wrapper: Wrapper,
+    Visualization: Visualization
+  });
+  return Wrapper;
+};
+
+exports.default = withEditModeCover;
+
+/***/ }),
+
+/***/ 47:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(1);
+
+var colorUtils_1 = __webpack_require__(12);
+
+var variables_1 = __webpack_require__(11);
+
+var IconPlaceholder_1 = __webpack_require__(32);
+
+var VizBehavior_1 = __webpack_require__(6);
+
+var hocUtils_1 = __webpack_require__(15);
+
+var withPlaceholder = function withPlaceholder(Visualization) {
+  var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
+  var config = Visualization.config;
+  var themes = config.themes;
+
+  var Wrapper = function Wrapper(props) {
+    var _a, _b;
+
+    var dataSources = props.dataSources,
+        loading = props.loading,
+        options = props.options,
+        height = props.height,
+        width = props.width;
+    var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
+    var bgColorFromTheme = (0, colorUtils_1.isColor)(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
+    var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
+    var iconColor = variables_1.default.contentColorActive(props);
 
+    if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
+      return React.createElement(IconPlaceholder_1.default, {
+        "data-test": "icon-placeholder",
+        icon: icon,
+        width: width,
+        height: height,
+        backgroundColor: bgColorFromTheme,
+        iconColor: iconColor
+      });
+    }
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var React = __webpack_require__(1);
-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.13.1 - ea48ec41e"
-}).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"
-    }));
+    return React.createElement(Visualization, Object.assign({}, props));
   };
-  hocUtils_1.extendStaticWrapperProps({
+
+  (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
   return Wrapper;
 };
-exports.default = withEditModeCover;
+
+exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 467:
+/***/ 470:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3542,28 +3982,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.themes = exports.computeVizProps = exports.PureSingleValueIcon = exports.config = void 0;
+
 var React = __webpack_require__(1);
-var RemoteIcon_1 = __webpack_require__(468);
-var iconUtils_1 = __webpack_require__(469);
-var SingleValueIcon_1 = __webpack_require__(486);
-var withDashboardViz_1 = __webpack_require__(36);
-var config_1 = __webpack_require__(470);
-var withTrellis_1 = __webpack_require__(107);
+
+var RemoteIcon_1 = __webpack_require__(471);
+
+var iconUtils_1 = __webpack_require__(472);
+
+var SingleValueIcon_1 = __webpack_require__(490);
+
+var withDashboardViz_1 = __webpack_require__(37);
+
+var config_1 = __webpack_require__(473);
+
+var withTrellis_1 = __webpack_require__(106);
+
 exports.config = config_1.default;
 exports.PureSingleValueIcon = SingleValueIcon_1.default;
+
 var computeVizProps = function computeVizProps(_ref) {
   var icon = _ref.icon,
-    _ref$IconComponent = _ref.IconComponent,
-    IconComponent = _ref$IconComponent === void 0 ? null : _ref$IconComponent,
-    themeFunc = _ref.themeFunc,
-    trellisKey = _ref.trellisKey,
-    trellisSplitBy = _ref.trellisSplitBy;
-  if (icon && (iconUtils_1.isRemoteIcon(icon) || iconUtils_1.isDataURI(icon))) {
+      _ref$IconComponent = _ref.IconComponent,
+      IconComponent = _ref$IconComponent === void 0 ? null : _ref$IconComponent,
+      themeFunc = _ref.themeFunc,
+      trellisKey = _ref.trellisKey,
+      trellisSplitBy = _ref.trellisSplitBy;
+
+  if (icon && ((0, iconUtils_1.isRemoteIcon)(icon) || (0, iconUtils_1.isDataURI)(icon))) {
     // eslint-disable-next-line no-param-reassign
     IconComponent = React.createElement(RemoteIcon_1.default, {
       iconURL: icon
     });
   }
+
   return {
     IconComponent: IconComponent,
     defaultFontColor: themeFunc('defaultFontColor'),
@@ -3572,8 +4023,9 @@ var computeVizProps = function computeVizProps(_ref) {
     trellisSplitBy: trellisSplitBy
   };
 };
+
 exports.computeVizProps = computeVizProps;
-var viz = withTrellis_1.default(withDashboardViz_1.default({
+var viz = (0, withTrellis_1.default)((0, withDashboardViz_1.default)({
   ReactViz: SingleValueIcon_1.default,
   vizConfig: config_1.default,
   computeVizProps: exports.computeVizProps
@@ -3583,102 +4035,72 @@ exports.default = viz;
 
 /***/ }),
 
-/***/ 468:
+/***/ 471:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/RemoteIcon");
 
 /***/ }),
 
-/***/ 469:
+/***/ 472:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/iconUtils");
 
 /***/ }),
 
-/***/ 47:
+/***/ 473:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _toConsumableArray = __webpack_require__(8);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var React = __webpack_require__(1);
-var colorUtils_1 = __webpack_require__(12);
-var variables_1 = __webpack_require__(11);
-var IconPlaceholder_1 = __webpack_require__(31);
-var VizBehavior_1 = __webpack_require__(6);
-var hocUtils_1 = __webpack_require__(15);
-var withPlaceholder = function withPlaceholder(Visualization) {
-  var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
-  var config = Visualization.config;
-  var themes = config.themes;
-  var Wrapper = function Wrapper(props) {
-    var _a, _b;
-    var dataSources = props.dataSources,
-      loading = props.loading,
-      options = props.options,
-      height = props.height,
-      width = props.width;
-    var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
-    var bgColorFromTheme = colorUtils_1.isColor(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
-    var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
-    var iconColor = variables_1.default.contentColorActive(props);
-    if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
-      return React.createElement(IconPlaceholder_1.default, {
-        "data-test": "icon-placeholder",
-        icon: icon,
-        width: width,
-        height: height,
-        backgroundColor: bgColorFromTheme,
-        iconColor: iconColor
-      });
-    }
-    return React.createElement(Visualization, Object.assign({}, props));
-  };
-  hocUtils_1.extendStaticWrapperProps({
-    Wrapper: Wrapper,
-    Visualization: Visualization
-  });
-  return Wrapper;
-};
-exports.default = withPlaceholder;
-
-/***/ }),
 
-/***/ 470:
-/***/ (function(module, exports, __webpack_require__) {
+var i18n_1 = __webpack_require__(2);
 
-"use strict";
+var schemaUtils_1 = __webpack_require__(16);
 
+var PresetPalettes_1 = __webpack_require__(61);
 
-var _toConsumableArray = __webpack_require__(8);
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var i18n_1 = __webpack_require__(2);
-var schemaUtils_1 = __webpack_require__(16);
-var PresetPalettes_1 = __webpack_require__(60);
 var pick_1 = __webpack_require__(23);
+
 var variables_1 = __webpack_require__(11);
+
 var configUtils_1 = __webpack_require__(22);
-var singleValueContext_1 = __webpack_require__(134);
-var StaticMajorAndTrendLayout_1 = __webpack_require__(103);
-var StaticBackgroundColorEditor_1 = __webpack_require__(89);
-var StaticIconColorEditor_1 = __webpack_require__(471);
-var StaticMajorColorEditor_1 = __webpack_require__(104);
-var StaticTrendColorEditor_1 = __webpack_require__(105);
-var DynamicMajorColorEditor_1 = __webpack_require__(100);
-var DynamicTrendColorEditor_1 = __webpack_require__(101);
-var DynamicBackgroundColorEditor_1 = __webpack_require__(102);
-var TrellisEditors_1 = __webpack_require__(106);
+
+var singleValueContext_1 = __webpack_require__(135);
+
+var StaticMajorAndTrendLayout_1 = __webpack_require__(102);
+
+var StaticBackgroundColorEditor_1 = __webpack_require__(91);
+
+var StaticIconColorEditor_1 = __webpack_require__(474);
+
+var StaticMajorColorEditor_1 = __webpack_require__(103);
+
+var StaticTrendColorEditor_1 = __webpack_require__(104);
+
+var DynamicMajorColorEditor_1 = __webpack_require__(136);
+
+var DynamicTrendColorEditor_1 = __webpack_require__(100);
+
+var DynamicBackgroundColorEditor_1 = __webpack_require__(101);
+
+var TrellisEditors_1 = __webpack_require__(105);
+
 var VizBehavior_1 = __webpack_require__(6);
+
 var configUtils_2 = __webpack_require__(20);
-var VizCategory_1 = __webpack_require__(35);
+
+var VizCategory_1 = __webpack_require__(36);
+
 var layoutUtils_1 = __webpack_require__(58);
+
 var dataContract = {
   requiredDataSources: [{
     name: 'primary',
@@ -3770,7 +4192,7 @@ var optionsSchema = {
     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]),
+    pattern: (0, schemaUtils_1.getPattern)([layoutUtils_1.LAYOUT_TYPE.Off, layoutUtils_1.LAYOUT_TYPE.Trellis]),
     enum: [layoutUtils_1.LAYOUT_TYPE.Off, layoutUtils_1.LAYOUT_TYPE.Trellis]
   },
   trendColor: {
@@ -3782,7 +4204,7 @@ var optionsSchema = {
   trendDisplay: {
     default: 'absolute',
     description: 'Specify whether the trend value is displayed as a percentage or an absolute count.',
-    pattern: schemaUtils_1.getPattern(['off', 'percent', 'absolute']),
+    pattern: (0, schemaUtils_1.getPattern)(['off', 'percent', 'absolute']),
     type: 'string'
   },
   trendFontSize: {
@@ -3838,7 +4260,7 @@ var optionsSchema = {
   unitPosition: {
     default: 'after',
     description: 'Specify whether the unit text should appear before or after the major value.',
-    pattern: schemaUtils_1.getPattern(['before', 'after']),
+    pattern: (0, schemaUtils_1.getPattern)(['before', 'after']),
     type: 'string'
   }
 };
@@ -3856,14 +4278,14 @@ var basePresetOptions = {
 };
 var presets = [{
   // dummy context variables to allow for resetting of unused context states
-  label: i18n_1._('None'),
+  label: (0, i18n_1._)('None'),
   name: 'singleValueIcon.none',
   value: {
     context: Object.assign({}, basePresetContext),
     options: Object.assign({}, basePresetOptions)
   }
 }, {
-  label: i18n_1._('Icon'),
+  label: (0, i18n_1._)('Icon'),
   name: 'singleValueIcon.icon',
   value: {
     context: Object.assign(Object.assign({}, basePresetContext), {
@@ -3874,7 +4296,7 @@ var presets = [{
     })
   }
 }, {
-  label: i18n_1._('Major value'),
+  label: (0, i18n_1._)('Major value'),
   name: 'singleValueIcon.majorValue',
   value: {
     context: Object.assign(Object.assign({}, basePresetContext), {
@@ -3885,7 +4307,7 @@ var presets = [{
     })
   }
 }, {
-  label: i18n_1._('Trend value'),
+  label: (0, i18n_1._)('Trend value'),
   name: 'singleValueIcon.trend',
   value: {
     context: Object.assign(Object.assign({}, basePresetContext), {
@@ -3896,7 +4318,7 @@ var presets = [{
     })
   }
 }, {
-  label: i18n_1._('Icon and Major value'),
+  label: (0, i18n_1._)('Icon and Major value'),
   name: 'singleValueIcon.iconAndMajorValue',
   value: {
     context: Object.assign(Object.assign({}, basePresetContext), {
@@ -3909,7 +4331,7 @@ var presets = [{
     })
   }
 }, {
-  label: i18n_1._('Background'),
+  label: (0, i18n_1._)('Background'),
   name: 'singleValueIcon.background',
   value: {
     context: Object.assign(Object.assign({}, basePresetContext), {
@@ -3925,9 +4347,10 @@ var presets = [{
  * common theme variables such as enterprise.defaultFontColor
  * that are repeated in multiple viz config themes should be DRYd up.
  */
+
 var themes = {
   defaultFontColor: function defaultFontColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: {
         dark: variables_1.default.textColor(props),
         light: variables_1.default.gray20(props)
@@ -3936,16 +4359,16 @@ var themes = {
     })(props);
   },
   defaultBlockFontColor: function defaultBlockFontColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: variables_1.default.white(props),
       prisma: variables_1.default.contentColorActive(props)
     })(props);
   }
 };
 var editorConfig = [{
-  label: i18n_1._('Data configurations'),
+  label: (0, i18n_1._)('Data configurations'),
   layout: [[{
-    label: i18n_1._('Value'),
+    label: (0, i18n_1._)('Value'),
     editor: 'editor.columnSelector',
     option: 'majorValue',
     context: 'valuesContext',
@@ -3968,24 +4391,24 @@ var editorConfig = [{
     }
   }]]
 }, {
-  label: i18n_1._('Data display'),
+  label: (0, i18n_1._)('Data display'),
   layout: [[{
-    label: i18n_1._('Show major and trend value'),
+    label: (0, i18n_1._)('Show major and trend value'),
     option: 'showValue',
     editor: 'editor.toggle'
   }]].concat(_toConsumableArray(StaticMajorAndTrendLayout_1.default), [[{
-    label: i18n_1._('Trend display'),
+    label: (0, i18n_1._)('Trend display'),
     option: 'trendDisplay',
     editor: 'editor.select',
     editorProps: {
       values: [{
-        label: i18n_1._('Percent'),
+        label: (0, i18n_1._)('Percent'),
         value: 'percent'
       }, {
-        label: i18n_1._('Absolute'),
+        label: (0, i18n_1._)('Absolute'),
         value: 'absolute'
       }, {
-        label: i18n_1._('Off'),
+        label: (0, i18n_1._)('Off'),
         value: 'off'
       }]
     },
@@ -3995,51 +4418,51 @@ var editorConfig = [{
     }
   }]], _toConsumableArray(TrellisEditors_1.TrellisEditorConfig))
 }, {
-  label: i18n_1._('Color and style'),
+  label: (0, i18n_1._)('Color and style'),
   layout: [[{
-    label: i18n_1._('Dynamic elements'),
+    label: (0, i18n_1._)('Dynamic elements'),
     key: 'presetSelector',
     editor: 'editor.presetSelector',
     editorProps: {
       presets: presets,
       value: function value(_ref3) {
         var context = _ref3.context,
-          options = _ref3.options;
-        var initialPreset = configUtils_2.getInitialPreset(context, options, presets);
+            options = _ref3.options;
+        var initialPreset = (0, configUtils_2.getInitialPreset)(context, options, presets);
         return initialPreset && initialPreset.label || null;
       }
     }
   }], StaticIconColorEditor_1.default, [{
-    label: i18n_1._('Icon'),
+    label: (0, i18n_1._)('Icon'),
     option: 'iconColor',
     context: 'iconColorEditorConfig',
     editor: 'editor.dynamicColor',
     showEditor: function showEditor(_ref4) {
       var options = _ref4.options;
-      return configUtils_1.isDynamicOption(options.iconColor);
+      return (0, configUtils_1.isDynamicOption)(options.iconColor);
     },
     editorProps: {
       labelPosition: 'top',
       flyoutTitle: 'Dynamic coloring: icon',
       formatters: [{
-        label: i18n_1._('Ranges'),
+        label: (0, i18n_1._)('Ranges'),
         value: 'rangeValue',
         defaults: {
           trendValue: singleValueContext_1.defaultContext.trendColorConfig,
           majorValue: singleValueContext_1.defaultContext.majorColorConfig
         }
       }, {
-        label: i18n_1._('Matches'),
+        label: (0, i18n_1._)('Matches'),
         value: 'matchValue',
         defaults: {
           majorValue: singleValueContext_1.defaultContext.majorColorMatchConfig
         }
       }],
       dataSelectors: [{
-        label: i18n_1._('Major value'),
+        label: (0, i18n_1._)('Major value'),
         value: 'majorValue'
       }, {
-        label: i18n_1._('Trend'),
+        label: (0, i18n_1._)('Trend'),
         value: 'trendValue'
       }],
       defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
@@ -4048,14 +4471,14 @@ var editorConfig = [{
     editorProps: {
       themes: themes
     }
-  })], [DynamicMajorColorEditor_1.getDynamicMajorColorEditor({
+  })], [(0, DynamicMajorColorEditor_1.getDynamicMajorColorEditor)({
     defaultContext: singleValueContext_1.defaultContext,
     defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
   })], [Object.assign(Object.assign({}, StaticTrendColorEditor_1.default), {
     editorProps: {
       themes: themes
     }
-  })], [DynamicTrendColorEditor_1.getDynamicTrendColorEditor({
+  })], [(0, DynamicTrendColorEditor_1.getDynamicTrendColorEditor)({
     defaultContext: singleValueContext_1.defaultContext,
     defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
   })], [Object.assign(Object.assign({}, StaticBackgroundColorEditor_1.default), {
@@ -4066,29 +4489,29 @@ var editorConfig = [{
     editorProps: {
       themes: themes
     }
-  })], [DynamicBackgroundColorEditor_1.getDynamicBackgroundColorEditor({
+  })], [(0, DynamicBackgroundColorEditor_1.getDynamicBackgroundColorEditor)({
     defaultContext: singleValueContext_1.defaultContext,
     defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
   })], [{
-    label: i18n_1._('Major value size (px)'),
+    label: (0, i18n_1._)('Major value size (px)'),
     option: 'majorFontSize',
     editor: 'editor.number',
     editorProps: {
       min: 1
     },
-    placeholder: i18n_1._('Auto'),
+    placeholder: (0, i18n_1._)('Auto'),
     showEditor: function showEditor(_ref5) {
       var options = _ref5.options;
       return options.showValue || options.showValue === undefined;
     }
   }, {
-    label: i18n_1._('Trend value size (px)'),
+    label: (0, i18n_1._)('Trend value size (px)'),
     option: 'trendFontSize',
     editor: 'editor.number',
     editorProps: {
       min: 1
     },
-    placeholder: i18n_1._('Auto'),
+    placeholder: (0, i18n_1._)('Auto'),
     showEditor: function showEditor(_ref6) {
       var options = _ref6.options;
       return options.showValue || options.showValue === undefined;
@@ -4102,16 +4525,19 @@ var editorConfig = [{
 /**
  * visualization configuration
  */
+
 var config = {
   /**
    * unique viz key
    */
   key: 'splunk.singlevalueicon',
+
   /**
    * viz name
    */
-  name: i18n_1._('Single value icon'),
+  name: (0, i18n_1._)('Single value icon'),
   category: VizCategory_1.VizCategory.SINGLE_VALUE,
+
   /**
    * viz icon
    */
@@ -4130,11 +4556,11 @@ var config = {
   supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.TRELLIS],
   themes: themes
 };
-exports.default = configUtils_2.enhanceConfig(config);
+exports.default = (0, configUtils_2.enhanceConfig)(config);
 
 /***/ }),
 
-/***/ 471:
+/***/ 474:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4143,7 +4569,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(50);
+/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(49);
 /* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(22);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_3__);
@@ -4176,7 +4602,14 @@ module.exports = require("@babel/runtime/helpers/extends");
 
 /***/ }),
 
-/***/ 486:
+/***/ 49:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/colorConstants");
+
+/***/ }),
+
+/***/ 490:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4200,11 +4633,11 @@ 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__(81);
+var pick_ = __webpack_require__(108);
 var pick_default = /*#__PURE__*/__webpack_require__.n(pick_);
 
 // EXTERNAL MODULE: external "lodash/isEmpty"
-var isEmpty_ = __webpack_require__(82);
+var isEmpty_ = __webpack_require__(109);
 var isEmpty_default = /*#__PURE__*/__webpack_require__.n(isEmpty_);
 
 // EXTERNAL MODULE: external "@splunk/visualization-context/FeatureFlagContext"
@@ -4226,10 +4659,10 @@ var Message_ = __webpack_require__(10);
 var Message_default = /*#__PURE__*/__webpack_require__.n(Message_);
 
 // EXTERNAL MODULE: ./src/common/components/VizStyleWrapper.jsx
-var VizStyleWrapper = __webpack_require__(72);
+var VizStyleWrapper = __webpack_require__(73);
 
 // EXTERNAL MODULE: ./src/common/components/TrellisTitle.tsx
-var TrellisTitle = __webpack_require__(78);
+var TrellisTitle = __webpack_require__(79);
 
 // EXTERNAL MODULE: ./src/common/utils/layoutUtils.ts
 var layoutUtils = __webpack_require__(58);
@@ -4239,27 +4672,27 @@ var defineProperty_ = __webpack_require__(7);
 var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty_);
 
 // EXTERNAL MODULE: external "@splunk/visualizations/SingleValueBasic"
-var SingleValueBasic_ = __webpack_require__(140);
+var SingleValueBasic_ = __webpack_require__(142);
 var SingleValueBasic_default = /*#__PURE__*/__webpack_require__.n(SingleValueBasic_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/Activity"
-var Activity_ = __webpack_require__(168);
+var Activity_ = __webpack_require__(171);
 var Activity_default = /*#__PURE__*/__webpack_require__.n(Activity_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/Clock"
-var Clock_ = __webpack_require__(169);
+var Clock_ = __webpack_require__(172);
 var Clock_default = /*#__PURE__*/__webpack_require__.n(Clock_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/Pencil"
-var Pencil_ = __webpack_require__(170);
+var Pencil_ = __webpack_require__(173);
 var Pencil_default = /*#__PURE__*/__webpack_require__.n(Pencil_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/Star"
-var Star_ = __webpack_require__(171);
+var Star_ = __webpack_require__(174);
 var Star_default = /*#__PURE__*/__webpack_require__.n(Star_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/Question"
-var Question_ = __webpack_require__(172);
+var Question_ = __webpack_require__(175);
 var Question_default = /*#__PURE__*/__webpack_require__.n(Question_);
 
 // EXTERNAL MODULE: ./src/common/utils/singleValueUtils.js
@@ -4283,34 +4716,33 @@ var iconMap = {
   star: Star_default.a,
   default: Question_default.a
 };
-
 /*
  * get icon from icon map
  * @param {String} key
  * @return {Icon} icon component from icon map
  */
+
 var getIcon = function getIcon(key) {
   return iconMap[key.toLowerCase()] || iconMap.default;
 };
-
 /*
  * @method isValidPosition
  * @param {String} iconPosition
  * @returns {Bool}
  */
+
 var isValidPosition = function isValidPosition(iconPosition) {
   return ICON_POSITIONS.indexOf(iconPosition) > -1;
 };
-
 /*
  * @method isHorizontal
  * @param {String} iconPosition
  * @returns {Bool}
  */
+
 var isHorizontal = function isHorizontal(iconPosition) {
   return iconPosition === 'before' || iconPosition === 'after';
 };
-
 /*
  * @method getIconWidth
  * @param {Object} props
@@ -4318,12 +4750,12 @@ var isHorizontal = function isHorizontal(iconPosition) {
  * @param {Number} props.width
  * @returns {Number} iconWidth
  */
+
 var getIconWidth = function getIconWidth(_ref) {
   var showHorizontal = _ref.showHorizontal,
-    width = _ref.width;
+      width = _ref.width;
   return showHorizontal ? width * ICON_HORIZONTAL_RATIO : width * ICON_VERTICAL_RATIO;
 };
-
 /*
  * @method getIconHeight
  * @param {Object} props
@@ -4331,12 +4763,12 @@ var getIconWidth = function getIconWidth(_ref) {
  * @param {Number} props.height
  * @returns {Number} iconHeight
  */
+
 var getIconHeight = function getIconHeight(_ref2) {
   var showHorizontal = _ref2.showHorizontal,
-    height = _ref2.height;
+      height = _ref2.height;
   return showHorizontal ? height : height * 0.25;
 };
-
 /*
  * @method getIconFontSize
  * @param {Object} props
@@ -4345,13 +4777,13 @@ var getIconHeight = function getIconHeight(_ref2) {
  * @param {Number} props.iconWidth
  * @returns {Number} iconFontSize
  */
+
 var getIconFontSize = function getIconFontSize(_ref3) {
   var showValue = _ref3.showValue,
-    majorTextFontSize = _ref3.majorTextFontSize,
-    iconWidth = _ref3.iconWidth;
-  return showValue ? majorTextFontSize * 0.5 : iconWidth;
+      majorTextFontSize = _ref3.majorTextFontSize,
+      iconWidth = _ref3.iconWidth;
+  return showValue ? majorTextFontSize * 0.8 : iconWidth;
 };
-
 /*
  * @method getSVGDimension
  * @param {Object} props
@@ -4361,14 +4793,14 @@ var getIconFontSize = function getIconFontSize(_ref3) {
  * @param {Number} props.ratio
  * @returns {Number} svg icon dimension
  */
+
 var getSVGDimension = function getSVGDimension(_ref4) {
   var showValue = _ref4.showValue,
-    containerDimension = _ref4.containerDimension,
-    iconDimension = _ref4.iconDimension,
-    ratio = _ref4.ratio;
+      containerDimension = _ref4.containerDimension,
+      iconDimension = _ref4.iconDimension,
+      ratio = _ref4.ratio;
   return showValue ? iconDimension * ratio : containerDimension;
 };
-
 /*
  * @method getValuesWidth
  * @param {Object} props
@@ -4376,12 +4808,12 @@ var getSVGDimension = function getSVGDimension(_ref4) {
  * @param {Number} props.width
  * @returns {Number} valuesWidth
  */
+
 var getValuesWidth = function getValuesWidth(_ref5) {
   var showHorizontal = _ref5.showHorizontal,
-    width = _ref5.width;
+      width = _ref5.width;
   return showHorizontal ? width * (1 - ICON_HORIZONTAL_RATIO) : width;
 };
-
 /*
  * @method getValuesHeight
  * @param {Object} props
@@ -4390,13 +4822,13 @@ var getValuesWidth = function getValuesWidth(_ref5) {
  * @param {Number} props.iconHeight
  * @returns {Number} valuesHeight
  */
+
 var getValuesHeight = function getValuesHeight(_ref6) {
   var showHorizontal = _ref6.showHorizontal,
-    height = _ref6.height,
-    iconHeight = _ref6.iconHeight;
+      height = _ref6.height,
+      iconHeight = _ref6.iconHeight;
   return showHorizontal ? height : height - iconHeight;
 };
-
 /*
  * getIconColor
  * @param {Object} props
@@ -4406,11 +4838,13 @@ var getValuesHeight = function getValuesHeight(_ref6) {
  * @param {String} props.defaultBlockFontColor
  * @returns {String} icon color
  */
+
 var iconUtils_getIconColor = function getIconColor(_ref7) {
   var iconColor = _ref7.iconColor,
-    backgroundColor = _ref7.backgroundColor,
-    defaultFontColor = _ref7.defaultFontColor,
-    defaultBlockFontColor = _ref7.defaultBlockFontColor;
+      backgroundColor = _ref7.backgroundColor,
+      defaultFontColor = _ref7.defaultFontColor,
+      defaultBlockFontColor = _ref7.defaultBlockFontColor;
+
   if (Object(singleValueUtils["hasBackground"])(backgroundColor) && !iconColor) {
     return Object(singleValueUtils["getDefaultColorWithBg"])({
       backgroundColor: backgroundColor,
@@ -4418,6 +4852,7 @@ var iconUtils_getIconColor = function getIconColor(_ref7) {
       defaultBlockFontColor: defaultBlockFontColor
     });
   }
+
   return Object(singleValueUtils["getFormattedColor"])(iconColor, defaultFontColor);
 };
 // CONCATENATED MODULE: ./src/SingleValueIcon/PureSingleValueIcon/IconContainer.jsx
@@ -4443,25 +4878,27 @@ var StyledIconContainer = external_styled_components_default.a.div.attrs(functio
 }, function (props) {
   return props.onClick ? 'pointer' : 'inherit';
 });
+
 var IconContainer_IconContainer = function IconContainer(_ref) {
   var width = _ref.width,
-    height = _ref.height,
-    fontSize = _ref.fontSize,
-    color = _ref.color,
-    opacity = _ref.opacity,
-    icon = _ref.icon,
-    IconComponent = _ref.IconComponent,
-    onIconClick = _ref.onIconClick;
+      height = _ref.height,
+      fontSize = _ref.fontSize,
+      color = _ref.color,
+      opacity = _ref.opacity,
+      icon = _ref.icon,
+      IconComponent = _ref.IconComponent,
+      onIconClick = _ref.onIconClick;
   var onClick = typeof onIconClick === 'function' ? onIconClick : undefined;
+
   if (IconComponent) {
     return /*#__PURE__*/external_react_default.a.createElement(StyledIconContainer, {
       width: width,
       height: height,
       onClick: onClick
     }, IconComponent);
-  }
+  } // todo: remove it after we have proper icon provider
+
 
-  // todo: remove it after we have proper icon provider
   var Icon = getIcon(icon);
   return /*#__PURE__*/external_react_default.a.createElement(StyledIconContainer, {
     width: width,
@@ -4472,6 +4909,7 @@ var IconContainer_IconContainer = function IconContainer(_ref) {
     onClick: onClick
   }, /*#__PURE__*/external_react_default.a.createElement(Icon, null));
 };
+
 IconContainer_IconContainer.propTypes = {
   width: external_prop_types_default.a.number.isRequired,
   height: external_prop_types_default.a.number.isRequired,
@@ -4486,25 +4924,38 @@ IconContainer_IconContainer.propTypes = {
 // CONCATENATED MODULE: ./src/SingleValueIcon/PureSingleValueIcon/SingleValueIconLayout.jsx
 
 
+
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
+
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    });
+    keys.push.apply(keys, symbols);
   }
+
   return keys;
 }
+
 function _objectSpread(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      defineProperty_default()(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        defineProperty_default()(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
   }
+
   return target;
 }
 
@@ -4513,6 +4964,7 @@ function _objectSpread(target) {
 
 
 
+
 var Column = external_styled_components_default.a.div.withConfig({
   displayName: "SingleValueIconLayout__Column",
   componentId: "c8okr6-0"
@@ -4525,31 +4977,33 @@ var IconColumn = external_styled_components_default.a.div.withConfig({
   displayName: "SingleValueIconLayout__IconColumn",
   componentId: "c8okr6-2"
 })(["display:flex;flex-direction:column;justify-content:center;height:100%;"]);
+
 var SingleValueIconLayout_SingleValueIconLayout = function SingleValueIconLayout(_ref) {
   var props = extends_default()({}, _ref);
+
   var majorColor = props.majorColor,
-    majorText = props.majorText,
-    majorTextFontSize = props.majorTextFontSize,
-    majorValueTitle = props.majorValueTitle,
-    trendColor = props.trendColor,
-    trendText = props.trendText,
-    trendTextFontSize = props.trendTextFontSize,
-    showTrendIndicator = props.showTrendIndicator,
-    unit = props.unit,
-    unitPosition = props.unitPosition,
-    underLabel = props.underLabel,
-    underLabelFontSize = props.underLabelFontSize,
-    underLabelColor = props.underLabelColor,
-    onValueClick = props.onValueClick,
-    iconWidth = props.iconWidth,
-    iconHeight = props.iconHeight,
-    icon = props.icon,
-    iconColor = props.iconColor,
-    iconOpacity = props.iconOpacity,
-    iconPosition = props.iconPosition,
-    iconFontSize = props.iconFontSize,
-    showValue = props.showValue,
-    svgIconComponent = props.svgIconComponent;
+      majorText = props.majorText,
+      majorTextFontSize = props.majorTextFontSize,
+      majorValueTitle = props.majorValueTitle,
+      trendColor = props.trendColor,
+      trendText = props.trendText,
+      trendTextFontSize = props.trendTextFontSize,
+      showTrendIndicator = props.showTrendIndicator,
+      unit = props.unit,
+      unitPosition = props.unitPosition,
+      underLabel = props.underLabel,
+      underLabelFontSize = props.underLabelFontSize,
+      underLabelColor = props.underLabelColor,
+      onValueClick = props.onValueClick,
+      iconWidth = props.iconWidth,
+      iconHeight = props.iconHeight,
+      icon = props.icon,
+      iconColor = props.iconColor,
+      iconOpacity = props.iconOpacity,
+      iconPosition = props.iconPosition,
+      iconFontSize = props.iconFontSize,
+      showValue = props.showValue,
+      svgIconComponent = props.svgIconComponent;
   var iconContainer = /*#__PURE__*/external_react_default.a.createElement(PureSingleValueIcon_IconContainer, {
     width: iconWidth,
     height: iconHeight,
@@ -4578,13 +5032,16 @@ var SingleValueIconLayout_SingleValueIconLayout = function SingleValueIconLayout
   }) : null;
   var iconLayout = null;
   var showHorizontal = isHorizontal(iconPosition);
+
   if (showHorizontal) {
     iconLayout = /*#__PURE__*/external_react_default.a.createElement(IconRow, null, iconPosition === 'before' && iconContainer, singleValueBasic, iconPosition === 'after' && iconContainer);
   } else {
     iconLayout = /*#__PURE__*/external_react_default.a.createElement(IconColumn, null, iconPosition === 'top' && iconContainer, singleValueBasic, iconPosition === 'below' && iconContainer);
   }
+
   return /*#__PURE__*/external_react_default.a.createElement(Column, null, iconLayout);
 };
+
 SingleValueIconLayout_SingleValueIconLayout.propTypes = _objectSpread(_objectSpread({}, SingleValueBasic_default.a.propTypes), {}, {
   iconWidth: external_prop_types_default.a.number,
   iconHeight: external_prop_types_default.a.number,
@@ -4621,43 +5078,47 @@ var Container = external_styled_components_default.a.div.withConfig({
 })(["overflow:hidden;", ";"], function (props) {
   return Object(style_["toDimension"])(pick_default()(props, ['width', 'height']));
 });
+
 var SingleValueIcon_SingleValueIcon = function SingleValueIcon(_ref) {
   var props = extends_default()({}, _ref);
+
   var width = props.width,
-    _props$height = props.height,
-    height = _props$height === void 0 ? 250 : _props$height,
-    style = props.style,
-    majorFontSize = props.majorFontSize,
-    majorValue = props.majorValue,
-    majorValueField = props.majorValueField,
-    trendValue = props.trendValue,
-    trendFontSize = props.trendFontSize,
-    unitPosition = props.unitPosition,
-    numberPrecision = props.numberPrecision,
-    shouldUseThousandSeparators = props.shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue = props.shouldAbbreviateTrendValue,
-    icon = props.icon,
-    iconOpacity = props.iconOpacity,
-    IconComponent = props.IconComponent,
-    noDataSources = props.noDataSources,
-    noResult = props.noResult,
-    onValueClick = props.onValueClick,
-    defaultFontColor = props.defaultFontColor,
-    defaultBlockFontColor = props.defaultBlockFontColor,
-    splitByLayout = props.splitByLayout,
-    _props$trellisKey = props.trellisKey,
-    trellisKey = _props$trellisKey === void 0 ? '' : _props$trellisKey,
-    _props$trellisSplitBy = props.trellisSplitBy,
-    trellisSplitBy = _props$trellisSplitBy === void 0 ? '' : _props$trellisSplitBy;
+      _props$height = props.height,
+      height = _props$height === void 0 ? 250 : _props$height,
+      style = props.style,
+      majorFontSize = props.majorFontSize,
+      majorValue = props.majorValue,
+      majorValueField = props.majorValueField,
+      trendValue = props.trendValue,
+      trendFontSize = props.trendFontSize,
+      unitPosition = props.unitPosition,
+      numberPrecision = props.numberPrecision,
+      shouldUseThousandSeparators = props.shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue = props.shouldAbbreviateTrendValue,
+      icon = props.icon,
+      iconOpacity = props.iconOpacity,
+      IconComponent = props.IconComponent,
+      noDataSources = props.noDataSources,
+      noResult = props.noResult,
+      onValueClick = props.onValueClick,
+      defaultFontColor = props.defaultFontColor,
+      defaultBlockFontColor = props.defaultBlockFontColor,
+      splitByLayout = props.splitByLayout,
+      _props$trellisKey = props.trellisKey,
+      trellisKey = _props$trellisKey === void 0 ? '' : _props$trellisKey,
+      _props$trellisSplitBy = props.trellisSplitBy,
+      trellisSplitBy = _props$trellisSplitBy === void 0 ? '' : _props$trellisSplitBy;
   var defaultColors = {
     defaultBlockFontColor: defaultBlockFontColor,
     defaultFontColor: defaultFontColor
   };
+
   var _computeColors = Object(singleValueUtils["computeColors"])(props, defaultColors),
-    backgroundColor = _computeColors.backgroundColor,
-    majorColor = _computeColors.majorColor,
-    trendColor = _computeColors.trendColor,
-    underLabelColor = _computeColors.underLabelColor;
+      backgroundColor = _computeColors.backgroundColor,
+      majorColor = _computeColors.majorColor,
+      trendColor = _computeColors.trendColor,
+      underLabelColor = _computeColors.underLabelColor;
+
   var iconColor = iconUtils_getIconColor({
     iconColor: props.iconColor,
     backgroundColor: backgroundColor,
@@ -4670,9 +5131,11 @@ var SingleValueIcon_SingleValueIcon = function SingleValueIcon(_ref) {
   var handleValueClick = Object(external_react_["useCallback"])(function (ev) {
     return Object(singleValueUtils["handleValueClickCallback"])(ev, majorValue, majorValueField, trendValue, onValueClick, trellisEnabled, trellisSplitBy, trellisKey);
   }, [onValueClick, majorValue, majorValueField, trendValue, trellisEnabled, trellisSplitBy, trellisKey]);
+
   var renderVisualization = function renderVisualization(_ref2) {
     var containerWidth = _ref2.width,
-      containerHeight = _ref2.height;
+        containerHeight = _ref2.height;
+
     if ((noDataSources || noResult) && !IconComponent) {
       return /*#__PURE__*/external_react_default.a.createElement(Message_default.a, {
         width: containerWidth,
@@ -4681,7 +5144,9 @@ var SingleValueIcon_SingleValueIcon = function SingleValueIcon(_ref) {
         level: "warning"
       });
     }
+
     var IconLayout = null;
+
     if ((noDataSources || noResult) && IconComponent) {
       IconLayout = /*#__PURE__*/external_react_default.a.cloneElement(IconComponent, {
         width: containerWidth,
@@ -4692,14 +5157,16 @@ var SingleValueIcon_SingleValueIcon = function SingleValueIcon(_ref) {
     } else {
       // will update later based on text size
       var _props$showValue = props.showValue,
-        showValue = _props$showValue === void 0 ? true : _props$showValue,
-        trendDisplay = props.trendDisplay,
-        unit = props.unit,
-        underLabel = props.underLabel,
-        iconPosition = props.iconPosition;
+          showValue = _props$showValue === void 0 ? true : _props$showValue,
+          trendDisplay = props.trendDisplay,
+          unit = props.unit,
+          underLabel = props.underLabel,
+          iconPosition = props.iconPosition;
+
       if (!isValidPosition(iconPosition)) {
         iconPosition = 'before';
       }
+
       var showHorizontal = isHorizontal(iconPosition);
       var iconWidth = getIconWidth({
         showHorizontal: showHorizontal,
@@ -4710,26 +5177,27 @@ var SingleValueIcon_SingleValueIcon = function SingleValueIcon(_ref) {
         height: containerHeight
       });
       var svgIconComponent = null;
+
       if (IconComponent) {
         svgIconComponent = /*#__PURE__*/external_react_default.a.cloneElement(IconComponent, {
           width: getSVGDimension({
             showValue: showValue,
             containerDimension: containerWidth,
             iconDimension: iconWidth,
-            ratio: 0.25
+            ratio: 0.7
           }),
           height: getSVGDimension({
             showValue: showValue,
             containerDimension: containerHeight,
             iconDimension: iconHeight,
-            ratio: 0.25
+            ratio: 0.7
           }),
           color: props.iconColor,
           opacity: iconOpacity
         });
-      }
+      } // calculate major and trend text and font size
+
 
-      // claculate major and trend text and font size
       var contentWidth = getValuesWidth({
         showHorizontal: showHorizontal,
         width: containerWidth
@@ -4752,41 +5220,43 @@ var SingleValueIcon_SingleValueIcon = function SingleValueIcon(_ref) {
         key: 'showValue',
         value: false
       }];
+
       var _computeSingleValueCo = Object(singleValueUtils["computeSingleValueContent"])({
-          majorValue: majorValue,
-          trendValue: trendValue,
-          majorFontSize: majorFontSize,
-          trendFontSize: trendFontSize,
-          trendDisplay: trendDisplay,
-          contentWidth: contentWidth,
-          contentHeight: contentHeight,
-          containerWidth: containerWidth,
-          containerHeight: containerHeight,
-          unit: unit,
-          numberPrecision: numberPrecision,
-          shouldUseThousandSeparators: shouldUseThousandSeparators,
-          shouldAbbreviateTrendValue: shouldAbbreviateTrendValue,
-          toRemoveList: toRemoveList
-        }),
-        majorText = _computeSingleValueCo.majorText,
-        trendText = _computeSingleValueCo.trendText,
-        majorTextFontSize = _computeSingleValueCo.majorTextFontSize,
-        trendTextFontSize = _computeSingleValueCo.trendTextFontSize,
-        majorValueTitle = _computeSingleValueCo.majorValueTitle,
-        smallVizProps = _computeSingleValueCo.smallVizProps;
+        majorValue: majorValue,
+        trendValue: trendValue,
+        majorFontSize: majorFontSize,
+        trendFontSize: trendFontSize,
+        trendDisplay: trendDisplay,
+        contentWidth: contentWidth,
+        contentHeight: contentHeight,
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
+        unit: unit,
+        numberPrecision: numberPrecision,
+        shouldUseThousandSeparators: shouldUseThousandSeparators,
+        shouldAbbreviateTrendValue: shouldAbbreviateTrendValue,
+        toRemoveList: toRemoveList
+      }),
+          majorText = _computeSingleValueCo.majorText,
+          trendText = _computeSingleValueCo.trendText,
+          majorTextFontSize = _computeSingleValueCo.majorTextFontSize,
+          trendTextFontSize = _computeSingleValueCo.trendTextFontSize,
+          majorValueTitle = _computeSingleValueCo.majorValueTitle,
+          smallVizProps = _computeSingleValueCo.smallVizProps;
+
       if (!isEmpty_default()(smallVizProps)) {
         showValue = smallVizProps.showValue;
         trendDisplay = smallVizProps.trendDisplay;
         underLabel = smallVizProps.underLabel;
         unit = smallVizProps.unit;
       }
+
       var iconFontSize = getIconFontSize({
         showValue: showValue,
         majorTextFontSize: majorTextFontSize,
         iconWidth: iconWidth
-      });
+      }); // calculate underlabel size
 
-      // calculate underlabel size
       var underLabelHeight = Object(singleValueUtils["getUnderLabelHeight"])(containerHeight * 0.1);
       var underLabelFontSize = Object(singleValueUtils["getUnderLabel"])({
         underLabel: underLabel,
@@ -4820,12 +5290,14 @@ var SingleValueIcon_SingleValueIcon = function SingleValueIcon(_ref) {
         onValueClick: handleValueClick
       });
     }
+
     return /*#__PURE__*/external_react_default.a.createElement(VizStyleWrapper["default"], {
       backgroundColor: backgroundColor,
       style: style,
       dataTestKey: "SingleValueIconWrapper"
     }, IconLayout);
   };
+
   if (isTrellisFeatureFlagOn && splitByLayout === layoutUtils["LAYOUT_TYPE"].Trellis) {
     return /*#__PURE__*/external_react_default.a.createElement(external_react_default.a.Fragment, null, /*#__PURE__*/external_react_default.a.createElement(TrellisTitle["TrellisTitle"], {
       fontColor: defaultFontColor,
@@ -4838,6 +5310,7 @@ var SingleValueIcon_SingleValueIcon = function SingleValueIcon(_ref) {
       return renderVisualization(containerDimension);
     })));
   }
+
   return /*#__PURE__*/external_react_default.a.createElement(Container, {
     width: width,
     height: height
@@ -4845,6 +5318,7 @@ var SingleValueIcon_SingleValueIcon = function SingleValueIcon(_ref) {
     return renderVisualization(containerDimension);
   }));
 };
+
 SingleValueIcon_SingleValueIcon.propTypes = {
   width: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
   height: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
@@ -4881,7 +5355,7 @@ SingleValueIcon_SingleValueIcon.propTypes = {
 };
 SingleValueIcon_SingleValueIcon.defaultProps = {
   width: '100%',
-  height: 250,
+  height: 400,
   majorValue: 'N/A',
   majorValueField: '',
   trendDisplay: 'absolute',
@@ -4903,13 +5377,6 @@ SingleValueIcon_SingleValueIcon.defaultProps = {
 
 /***/ }),
 
-/***/ 50:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/colorConstants");
-
-/***/ }),
-
 /***/ 54:
 /***/ (function(module, exports) {
 
@@ -4935,6 +5402,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LAYOUT_TYPE = void 0;
 var LAYOUT_TYPE;
+
 (function (LAYOUT_TYPE) {
   LAYOUT_TYPE["Off"] = "off";
   LAYOUT_TYPE["Trellis"] = "trellis";
@@ -4942,13 +5410,6 @@ var LAYOUT_TYPE;
 
 /***/ }),
 
-/***/ 59:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes");
-
-/***/ }),
-
 /***/ 6:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -4960,6 +5421,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizBehavior = void 0;
 var VizBehavior;
+
 (function (VizBehavior) {
   /**
    * Dynamic Options Behavior.
@@ -4979,6 +5441,7 @@ var VizBehavior;
    * missing.
    * @type {string}
    */
+
   VizBehavior["PLACEHOLDER"] = "placeholder";
   VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
   VizBehavior["TRELLIS"] = "trellis";
@@ -4989,6 +5452,13 @@ var VizBehavior;
 /***/ 60:
 /***/ (function(module, exports) {
 
+module.exports = require("@splunk/themes");
+
+/***/ }),
+
+/***/ 61:
+/***/ (function(module, exports) {
+
 module.exports = require("@splunk/visualization-color-palettes/editors/PresetPalettes");
 
 /***/ }),
@@ -5000,7 +5470,7 @@ module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 
-/***/ 72:
+/***/ 73:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5025,7 +5495,7 @@ VizStyleWrapper.displayName = 'VizStyleWrapper';
 
 /***/ }),
 
-/***/ 78:
+/***/ 79:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5035,8 +5505,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TrellisTitle = exports.TRELLIS_TITLE_HEIGHT = void 0;
+
 var React = __webpack_require__(1);
+
 var styled_components_1 = __webpack_require__(4);
+
 exports.TRELLIS_TITLE_HEIGHT = 28;
 var TrellisTitleText = styled_components_1.default.div.withConfig({
   displayName: "TrellisTitle__TrellisTitleText",
@@ -5052,6 +5525,7 @@ var TrellisTitleDiv = styled_components_1.default.div.withConfig({
 }, function (props) {
   return props.backgroundColor;
 });
+
 var TrellisTitle = function TrellisTitle(props) {
   var titleText = String(props.trellisKey).toString();
   return React.createElement(TrellisTitleDiv, {
@@ -5061,6 +5535,7 @@ var TrellisTitle = function TrellisTitle(props) {
     title: titleText
   }, React.createElement(TrellisTitleText, null, titleText));
 };
+
 exports.TrellisTitle = TrellisTitle;
 
 /***/ }),
@@ -5072,28 +5547,21 @@ module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
-/***/ 80:
+/***/ 84:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/trellisUtils");
 
 /***/ }),
 
-/***/ 81:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/pick");
-
-/***/ }),
-
-/***/ 82:
+/***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/isEmpty");
+module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
-/***/ 89:
+/***/ 91:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5117,14 +5585,7 @@ var StaticBackgroundColorEditor = {
 
 /***/ }),
 
-/***/ 9:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/classCallCheck");
-
-/***/ }),
-
-/***/ 92:
+/***/ 94:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Paginator");