@splunk/visualizations 25.13.1 → 26.0.0

package/SingleValueRadial.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 472);
+/******/ 	return __webpack_require__(__webpack_require__.s = 475);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -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; });
@@ -209,7 +158,7 @@ var getDynamicTrendColorEditor = function getDynamicTrendColorEditor(_ref) {
 
 /***/ }),
 
-/***/ 102:
+/***/ 101:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -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";
@@ -383,7 +332,7 @@ 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 +341,7 @@ exports.TrellisEditorConfig = [[{
     return isTrellisFeatureFlagOn;
   }
 }], [{
-  label: i18n_1._('Split by'),
+  label: (0, i18n_1._)('Split by'),
   option: 'trellisSplitBy',
   editor: 'editor.trellisSplitBy',
   editorProps: {
@@ -405,13 +354,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 +368,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 +381,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 +394,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 +408,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,7 +421,7 @@ exports.TrellisBackgroundColorEditor = {
 
 /***/ }),
 
-/***/ 107:
+/***/ 106:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -496,19 +445,19 @@ 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__(93);
 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__(83);
+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",
@@ -516,7 +465,7 @@ var TrellisContainer = styled_components_1.default.div.withConfig({
 })(["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",
@@ -535,7 +484,7 @@ var showErrorMessage = function showErrorMessage(errorCode, width, height) {
     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"
     });
   }
@@ -543,14 +492,14 @@ var showErrorMessage = function showErrorMessage(errorCode, width, height) {
     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"
   });
 };
@@ -561,8 +510,8 @@ var withTrellis = function withTrellis(Viz) {
       height = opts.height,
       width = opts.width,
       otherProps = __rest(opts, ["options", "height", "width"]);
-    var defaultOptions = JSONSchemaUtils_1.pickFieldFromJSONSchema(Viz.config.optionsSchema, 'default');
-    var mergedOptions = hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions);
+    var 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,
@@ -573,28 +522,28 @@ var withTrellis = function withTrellis(Viz) {
     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({
+    var _ref5 = (0, 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 () {
+      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, {
@@ -611,8 +560,8 @@ 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) {
@@ -625,15 +574,15 @@ 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);
@@ -646,7 +595,7 @@ var withTrellis = function withTrellis(Viz) {
         return React.createElement(Message_1.default, {
           width: width,
           height: height,
-          message: i18n_1._('Loading'),
+          message: (0, i18n_1._)('Loading'),
           level: "info"
         });
       }
@@ -654,11 +603,11 @@ var withTrellis = function withTrellis(Viz) {
       // 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) {
@@ -684,10 +633,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,
@@ -716,7 +665,7 @@ exports.default = withTrellis;
 
 /***/ }),
 
-/***/ 108:
+/***/ 107:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -728,7 +677,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 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__(83);
 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),
@@ -749,7 +698,7 @@ var dataSourcesSplitByAggregationsUnknown = function dataSourcesSplitByAggregati
     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]];
       }
@@ -771,12 +720,12 @@ var dataSourcesSplitByAggregationsTimechartAndChart = function dataSourcesSplitB
   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) {
@@ -795,7 +744,7 @@ var dataSourcesSplitByAggregationsTimechartAndChart = function dataSourcesSplitB
     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]];
       }
@@ -817,12 +766,12 @@ var dataSourcesSplitByAggregationsStats = function dataSourcesSplitByAggregation
   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) {
@@ -850,11 +799,11 @@ var dataSourcesSplitByModeTimechart = function dataSourcesSplitByModeTimechart(d
   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
@@ -863,7 +812,7 @@ var dataSourcesSplitByModeTimechart = function dataSourcesSplitByModeTimechart(d
       }
     }
     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) {
@@ -897,7 +846,7 @@ var dataSourcesSplitByModeChart = function dataSourcesSplitByModeChart(dataSourc
   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 = {};
@@ -907,7 +856,7 @@ 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)
@@ -935,9 +884,9 @@ var dataSourcesSplitByModeChart = function dataSourcesSplitByModeChart(dataSourc
     }
     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 = [{
@@ -1045,7 +994,7 @@ var dataSourcesSplitByModeChart = function dataSourcesSplitByModeChart(dataSourc
         _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) {
@@ -1084,7 +1033,7 @@ var dataSourcesSplitByModeStatsorUnknown = function dataSourcesSplitByModeStatso
   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;
@@ -1099,12 +1048,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) {
@@ -1129,13 +1078,13 @@ var getTrellisDataSourcesBySplitMode = function getTrellisDataSourcesBySplitMode
   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);
@@ -1182,14 +1131,14 @@ 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;
+  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) {
@@ -1197,16 +1146,16 @@ var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
     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",
@@ -1230,7 +1179,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
     }
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.13.1 - ea48ec41e",
+      "data-splunk-visualization-version": "26.0.0 - 2f7458907",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -1302,6 +1251,264 @@ module.exports = require("@babel/runtime/helpers/slicedToArray");
 
 /***/ }),
 
+/***/ 176:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var React = __webpack_require__(1);
+var T = __webpack_require__(0);
+var colorConstants_1 = __webpack_require__(49);
+var gaugeUtils_1 = __webpack_require__(96);
+var displayUtils_1 = __webpack_require__(80);
+var GaugeGraph = function GaugeGraph(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 200 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 200 : _ref$height,
+    _ref$strokeWidth = _ref.strokeWidth,
+    strokeWidth = _ref$strokeWidth === void 0 ? (0, gaugeUtils_1.getGaugeStrokeWidth)(height) : _ref$strokeWidth,
+    _ref$radialBackground = _ref.radialBackgroundColor,
+    radialBackgroundColor = _ref$radialBackground === void 0 ? colorConstants_1.RADIAL_BACKGROUND_COLOR : _ref$radialBackground,
+    fontColor = _ref.fontColor,
+    formattedGaugeRanges = _ref.formattedGaugeRanges,
+    propMajorValue = _ref.majorValue,
+    maxValue = _ref.maxValue,
+    minValue = _ref.minValue,
+    showRadialGraph = _ref.showRadialGraph;
+  function toRadians(degrees) {
+    return degrees * Math.PI / 180;
+  }
+  function toDegrees(radians) {
+    return radians * 180 / Math.PI;
+  }
+  var labelFontSize = (0, gaugeUtils_1.getLabelFontSize)(height, showRadialGraph);
+  var labelFontSizeString = "".concat(String(labelFontSize), "px Splunk Platform Sans");
+  var maxOffset = 0.35;
+  // space between the label and the radial
+  var labelSpace = labelFontSize / 2;
+  // length of the base of triangle marker
+  var triangleBase = height >= 113 ? 8 : 4;
+  // amount of padding around semi-circle
+  var padding = labelFontSize > 0 ? labelSpace * 2 + labelFontSize * 2 : triangleBase;
+  var semicircleRadius = height - strokeWidth / 2 - padding;
+  var circumference = semicircleRadius * 2 * Math.PI;
+  var bgCircleOffset = circumference * 0.5; // half a circle
+  var strokeDashoffset = circumference * 0.5; // half a circle
+  var semicircleEdgeRadius = semicircleRadius + strokeWidth / 2;
+  // For inner radial
+  var innerStrokeWidth = strokeWidth / 4;
+  var innerSemicircleRadius = height - strokeWidth - padding - innerStrokeWidth / 2 - 1; // subtract 1 to make the 1px space between outer and inner arc
+  var innerCircumference = innerSemicircleRadius * 2 * Math.PI;
+  // Center of radials
+  var cx = width / 2;
+  var cyOffset = labelFontSize > 0 ? labelSpace * 2 + labelFontSize : triangleBase / 2;
+  var cy = semicircleRadius + strokeWidth / 2 + cyOffset;
+  var majorValue;
+  if (typeof propMajorValue === 'string') {
+    majorValue = parseInt(propMajorValue, 10);
+  } else {
+    majorValue = propMajorValue;
+  }
+  var range = (0, gaugeUtils_1.getGaugeRange)(formattedGaugeRanges, majorValue);
+  var circles = [];
+  var labels = [];
+  var showMarker = false;
+  // Calculate Marker Values
+  var radius = semicircleRadius;
+  var x = strokeWidth / 2 + innerStrokeWidth + 2; // distance of tip of marker from center of outer semicircle stroke
+  var markerVal = Math.max(Math.min(maxValue, majorValue), minValue);
+  var theta = toRadians(180 - (0, displayUtils_1.getRadialProgress)(markerVal - minValue, minValue, maxValue) / 100 * 180); // degree of progress
+  var p1x = cx + (radius - x) * Math.cos(theta);
+  var p1y = cy - (radius - x) * Math.sin(theta);
+  var centerX = (radius - x - triangleBase / Math.sqrt(3)) * Math.cos(theta);
+  var centerY = (radius - x - triangleBase / Math.sqrt(3)) * Math.sin(theta);
+  var rotation1 = 2 * Math.PI / 3; // degrees of rotation around center for 2nd point
+  var rotation2 = -2 * Math.PI / 3; // degrees of rotation around center for 3rd point
+  var xVal = (radius - x) * Math.cos(theta); // x-axis offset of center
+  var yVal = (radius - x) * Math.sin(theta); // y-axis offset of center
+  var p2x = centerX + (xVal - centerX) * Math.cos(rotation1) - (yVal - centerY) * Math.sin(rotation1); // x-axis of 2nd point
+  var p2y = centerY + (xVal - centerX) * Math.sin(rotation1) + (yVal - centerY) * Math.cos(rotation1); // y-axis of 2nd point
+  var p3x = centerX + (xVal - centerX) * Math.cos(rotation2) - (yVal - centerY) * Math.sin(rotation2); // x-axis of 3rd point
+  var p3y = centerY + (xVal - centerX) * Math.sin(rotation2) + (yVal - centerY) * Math.cos(rotation2); // y-axis of 3rd point
+  var d = "M ".concat(p1x, " ").concat(p1y, " L ").concat(cx + p2x, " ").concat(cy - p2y, " L ").concat(cx + p3x, " ").concat(cy - p3y, " Z"); // d-value for marker path in SVG
+  formattedGaugeRanges.forEach(function (r, i) {
+    if (range >= i && typeof majorValue === 'number') {
+      var startVal = Math.min(r.from, majorValue);
+      var endVal = Math.min(r.to, majorValue);
+      // width of stroke for each gauge range
+      var _progressWidth = (0, gaugeUtils_1.getProgressWidth)(endVal - startVal, minValue, maxValue, circumference);
+      // distance of stroke from right edge of circle
+      var _offsetDistance = (0, gaugeUtils_1.getProgressWidth)(maxValue - startVal, minValue, maxValue, circumference);
+      // main gauge progress radial
+      circles.push(React.createElement("circle", {
+        "data-test": "progress-radial",
+        stroke: r.value,
+        fill: "transparent",
+        strokeWidth: strokeWidth,
+        strokeDasharray: "".concat(_progressWidth, " ").concat(circumference - _progressWidth),
+        style: {
+          strokeDashoffset: _offsetDistance
+        },
+        r: semicircleRadius,
+        cx: cx,
+        cy: cy,
+        key: "progress".concat(r.from)
+      }));
+    }
+    if (range <= i && (typeof majorValue !== 'number' || majorValue < r.to) && i < formattedGaugeRanges.length - 1) {
+      // width of stroke for each breakpoint dash
+      var breakpointWidth = 1;
+      // opacity of the dash (15%)
+      var breakpointOpacity = 0.15;
+      // distance of stroke from right edge of circle
+      var _offsetDistance2 = (0, gaugeUtils_1.getProgressWidth)(maxValue - r.to, minValue, maxValue, circumference);
+      // dashes at each gauge breakpoint after the major value
+      circles.push(React.createElement("circle", {
+        "data-test": "breakpoint-radial",
+        stroke: fontColor,
+        opacity: breakpointOpacity,
+        fill: "transparent",
+        strokeWidth: strokeWidth,
+        strokeDasharray: "".concat(breakpointWidth, " ").concat(circumference - breakpointWidth),
+        style: {
+          strokeDashoffset: _offsetDistance2
+        },
+        r: semicircleRadius,
+        cx: cx,
+        cy: cy,
+        key: "breakpoint".concat(r.from)
+      }));
+    }
+    if (i < formattedGaugeRanges.length - 1) {
+      var toTheta = toRadians(180 - (0, displayUtils_1.getRadialProgress)(r.to - minValue, minValue, maxValue) / 100 * 180);
+      var labelX = cx + (semicircleEdgeRadius + labelSpace) * Math.cos(toTheta);
+      var labelY = cy - (semicircleEdgeRadius + labelSpace) * Math.sin(toTheta);
+      var labelWidth = (0, gaugeUtils_1.computeTextWidth)(String(r.to), labelFontSizeString);
+      var vertOffset = (0, gaugeUtils_1.getVerticalLabelOffset)(toDegrees(toTheta), labelFontSize, maxOffset);
+      labelY += vertOffset;
+      if (r.to < (maxValue + minValue) / 2) {
+        labelX -= labelWidth + vertOffset / 3;
+      } else if (r.to === (maxValue + minValue) / 2) {
+        labelX -= labelWidth / 2;
+      }
+      // labels of each gauge range, excluding min and max
+      labels.push(React.createElement("text", {
+        "data-test": "label",
+        fill: fontColor,
+        x: labelX,
+        y: labelY,
+        fontSize: labelFontSize,
+        key: "label".concat(r.from)
+      }, r.to));
+    }
+    // width of stroke for each inner radial gauge range
+    var progressWidth = (0, gaugeUtils_1.getProgressWidth)(r.to - r.from, minValue, maxValue, innerCircumference);
+    // distance of stroke from right edge of circle
+    var offsetDistance = (0, gaugeUtils_1.getProgressWidth)(maxValue - r.from, minValue, maxValue, innerCircumference);
+    // inner radial for all gauge ranges
+    circles.push(React.createElement("circle", {
+      "data-test": "inner-radial",
+      stroke: r.value,
+      fill: "transparent",
+      strokeWidth: innerStrokeWidth,
+      strokeDasharray: "".concat(progressWidth, " ").concat(innerCircumference - progressWidth),
+      style: {
+        strokeDashoffset: offsetDistance
+      },
+      r: innerSemicircleRadius,
+      cx: cx,
+      cy: cy,
+      key: "inner".concat(r.from)
+    }));
+  });
+  // min label
+  labels.push(React.createElement("text", {
+    "data-test": "min-label",
+    fill: fontColor,
+    x: cx - semicircleEdgeRadius,
+    y: cy + labelFontSize,
+    fontSize: labelFontSize,
+    key: "min-label"
+  }, minValue));
+  // max label
+  var maxLabelWidth = (0, gaugeUtils_1.computeTextWidth)(String(maxValue), labelFontSizeString);
+  labels.push(React.createElement("text", {
+    "data-test": "max-label",
+    fill: fontColor,
+    x: cx + semicircleEdgeRadius - maxLabelWidth,
+    y: cy + labelFontSize,
+    fontSize: labelFontSize,
+    key: "max-label"
+  }, maxValue));
+  // dash to indicate majorValue
+  showMarker = typeof majorValue === 'number' && formattedGaugeRanges.length >= 1;
+  if (showMarker && majorValue > formattedGaugeRanges[0].from && majorValue <= formattedGaugeRanges[formattedGaugeRanges.length - 1].to) {
+    var progressWidth = (0, gaugeUtils_1.getProgressWidth)(maxValue - majorValue, minValue, maxValue, circumference);
+    var indicatorWidth = 1;
+    circles.push(React.createElement("circle", {
+      "data-test": "indicator-radial",
+      stroke: fontColor || '#FFFFFF',
+      fill: "transparent",
+      strokeWidth: strokeWidth,
+      strokeDasharray: "".concat(indicatorWidth, " ").concat(circumference - indicatorWidth),
+      style: {
+        strokeDashoffset: progressWidth
+      },
+      r: semicircleRadius,
+      cx: cx,
+      cy: cy,
+      key: "indicator"
+    }));
+  }
+  return React.createElement("svg", {
+    height: height,
+    width: width,
+    "data-test": "radial-gauge-visualization"
+  }, React.createElement("g", null, React.createElement("circle", {
+    "data-test": "background-radial",
+    stroke: radialBackgroundColor,
+    fill: "transparent",
+    strokeWidth: strokeWidth,
+    strokeDasharray: "".concat(bgCircleOffset, " ").concat(circumference - bgCircleOffset),
+    style: {
+      strokeDashoffset: strokeDashoffset
+    },
+    r: semicircleRadius,
+    cx: cx,
+    cy: cy
+  }), circles, labels, showMarker && React.createElement("path", {
+    fill: fontColor,
+    d: d,
+    opacity: "100",
+    "data-z-index": "4",
+    "data-test": "marker"
+  })));
+};
+GaugeGraph.propTypes = {
+  width: T.number,
+  height: T.number,
+  strokeWidth: T.number,
+  radialBackgroundColor: T.string,
+  formattedGaugeRanges: T.array,
+  majorValue: T.oneOfType([T.string, T.number]),
+  maxValue: T.number,
+  minValue: T.number,
+  showRadialGraph: T.bool
+};
+GaugeGraph.defaultProps = {
+  strokeWidth: 12,
+  formattedGaugeRanges: [],
+  majorValue: 'N/A'
+};
+exports.default = GaugeGraph;
+
+/***/ }),
+
 /***/ 18:
 /***/ (function(module, exports) {
 
@@ -1483,8 +1690,8 @@ function hasCompatibleOptions(vizOptions, presetOptions) {
  */
 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)
@@ -1501,7 +1708,7 @@ exports.getInitialPreset = getInitialPreset;
  * @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
@@ -1587,13 +1794,13 @@ __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) {
@@ -2526,35 +2733,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");
 
 /***/ }),
 
@@ -2568,11 +2775,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";
@@ -2596,9 +2810,9 @@ var FixedSizeContainer_1 = __webpack_require__(13);
  */
 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;
 };
@@ -2639,7 +2853,7 @@ var IconPlaceholder = function IconPlaceholder(props) {
     width: width,
     height: height,
     level: "warning",
-    message: i18n_1._('No DataSource Connected')
+    message: (0, i18n_1._)('No DataSource Connected')
   });
 };
 IconPlaceholder.propTypes = propTypes;
@@ -2647,14 +2861,7 @@ 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);
 
 /***/ }),
 
@@ -2689,7 +2896,7 @@ var getSortingParams = function getSortingParams(_ref) {
   };
   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];
     }
@@ -2698,7 +2905,7 @@ var getSortingParams = function getSortingParams(_ref) {
       var sortKey = _ref2.sortKey,
         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)
@@ -2749,7 +2956,7 @@ var getPaginationParams = function getPaginationParams(_ref) {
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var page = _ref2.page,
       countArg = _ref2.count;
-    var newParams = lodash_1.cloneDeep(requestParams);
+    var newParams = (0, lodash_1.cloneDeep)(requestParams);
     if (typeof countArg === 'number') {
       newParams.count = countArg;
       newParams.offset = 0;
@@ -2813,16 +3020,16 @@ Object.defineProperty(exports, "__esModule", {
 var React = __webpack_require__(1);
 var lodash_1 = __webpack_require__(3);
 var getSettingsFromThemedProps_1 = __webpack_require__(37);
-var Options_1 = __webpack_require__(29);
+var Options_1 = __webpack_require__(30);
 var SanitizeProps_1 = __webpack_require__(38);
-var TimezoneContext_1 = __webpack_require__(25);
+var TimezoneContext_1 = __webpack_require__(26);
 var moment_1 = __webpack_require__(39);
 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 hocUtils_1 = __webpack_require__(27);
+var JSONSchemaUtils_1 = __webpack_require__(28);
 var async_dynamic_options_evaluator_1 = __webpack_require__(40);
-var id_1 = __webpack_require__(32);
+var id_1 = __webpack_require__(25);
 var SplunkVisualization_1 = __webpack_require__(41);
 var VizBehavior_1 = __webpack_require__(6);
 var getSorting_1 = __webpack_require__(33);
@@ -2843,8 +3050,8 @@ var withDashboardViz = function withDashboardViz(opts) {
     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');
+  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,
@@ -2879,19 +3086,19 @@ var withDashboardViz = function withDashboardViz(opts) {
       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({
+    var _ref = (0, getSettingsFromThemedProps_1.default)({
         theme: theme
       }),
-      currentThemeFamily = _getSettingsFromTheme.family,
-      currentThemeColorScheme = _getSettingsFromTheme.colorScheme,
-      currentThemeDensity = _getSettingsFromTheme.density;
+      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
     var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
-    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat(id_1.createGUID())),
+    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({}),
@@ -2902,16 +3109,17 @@ var withDashboardViz = function withDashboardViz(opts) {
       _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')),
+    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];
-    evaluatedOptions = useDeepMemo_1.useDeepMemo(function () {
+    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,
@@ -2922,10 +3130,10 @@ 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;
@@ -2935,8 +3143,8 @@ var withDashboardViz = function withDashboardViz(opts) {
             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) {
@@ -2965,6 +3173,7 @@ var withDashboardViz = function withDashboardViz(opts) {
     React.useEffect(function () {
       return function () {
         if (useAsyncEvaluatedOptions) {
+          isMounted.current = false;
           async_dynamic_options_evaluator_1.default.reset(visualizationID);
         }
       };
@@ -2974,7 +3183,7 @@ var withDashboardViz = function withDashboardViz(opts) {
     var _vizConfig$requiredPr = vizConfig.requiredProps,
       requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
       supports = vizConfig.supports;
-    var missing = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptionsToUse);
+    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, {
@@ -2990,7 +3199,7 @@ var withDashboardViz = function withDashboardViz(opts) {
     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));
+        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
@@ -3033,19 +3242,19 @@ var withDashboardViz = function withDashboardViz(opts) {
      */
     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
@@ -3073,7 +3282,7 @@ var withDashboardViz = function withDashboardViz(opts) {
   // 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));
+  return (0, styled_components_1.withTheme)((0, withPlaceholder_1.default)((0, withEditModeCover_1.default)(DashboardViz, disableEditModeCover), useIconPlaceholder));
 };
 exports.default = withDashboardViz;
 
@@ -3317,8 +3526,8 @@ var lodash_1 = __webpack_require__(3);
  * @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()
@@ -3362,7 +3571,7 @@ exports.isMissing = isMissing;
  */
 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;
@@ -3386,7 +3595,7 @@ var MissingPropsMessage = function MissingPropsMessage(props) {
     "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;
@@ -3395,7 +3604,7 @@ exports.MissingPropsMessage.defaultProps = {
   width: '100%',
   height: 250
 };
-exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
+exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage);
 
 /***/ }),
 
@@ -3416,7 +3625,7 @@ var Cover = styled_components_1.default.div.withConfig({
   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"
+  'data-splunk-visualization-version': "26.0.0 - 2f7458907"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -3435,7 +3644,7 @@ var withEditModeCover = function withEditModeCover(Visualization, disableEditMod
       "data-test": "edit-mode-cover"
     }));
   };
-  hocUtils_1.extendStaticWrapperProps({
+  (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
@@ -3457,7 +3666,7 @@ Object.defineProperty(exports, "__esModule", {
 var React = __webpack_require__(1);
 var colorUtils_1 = __webpack_require__(12);
 var variables_1 = __webpack_require__(11);
-var IconPlaceholder_1 = __webpack_require__(31);
+var IconPlaceholder_1 = __webpack_require__(32);
 var VizBehavior_1 = __webpack_require__(6);
 var hocUtils_1 = __webpack_require__(15);
 var withPlaceholder = function withPlaceholder(Visualization) {
@@ -3472,7 +3681,7 @@ var withPlaceholder = function withPlaceholder(Visualization) {
       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 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) {
@@ -3487,7 +3696,7 @@ var withPlaceholder = function withPlaceholder(Visualization) {
     }
     return React.createElement(Visualization, Object.assign({}, props));
   };
-  hocUtils_1.extendStaticWrapperProps({
+  (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
@@ -3497,7 +3706,7 @@ exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 472:
+/***/ 475:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3517,10 +3726,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.themes = exports.computeVizProps = exports.PureSingleValueRadialThemes = exports.PureSingleValueRadial = exports.config = void 0;
-var SingleValueRadial_1 = __webpack_require__(487);
+var SingleValueRadial_1 = __webpack_require__(491);
 var withDashboardViz_1 = __webpack_require__(36);
-var config_1 = __webpack_require__(473);
-var withTrellis_1 = __webpack_require__(107);
+var config_1 = __webpack_require__(476);
+var withTrellis_1 = __webpack_require__(106);
 exports.config = config_1.default;
 exports.PureSingleValueRadial = SingleValueRadial_1.default;
 // TODO: proper theming support for SVR when we come back to SVR viz
@@ -3533,7 +3742,7 @@ var computeVizProps = function computeVizProps(_a) {
   }, props);
 };
 exports.computeVizProps = computeVizProps;
-var viz = withTrellis_1.default(withDashboardViz_1.default({
+var viz = (0, withTrellis_1.default)((0, withDashboardViz_1.default)({
   ReactViz: SingleValueRadial_1.default,
   vizConfig: config_1.default,
   computeVizProps: exports.computeVizProps
@@ -3543,7 +3752,7 @@ exports.default = viz;
 
 /***/ }),
 
-/***/ 473:
+/***/ 476:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3557,21 +3766,22 @@ var i18n_1 = __webpack_require__(2);
 var schemaUtils_1 = __webpack_require__(16);
 var pick_1 = __webpack_require__(23);
 var variables_1 = __webpack_require__(11);
-var PresetPalettes_1 = __webpack_require__(60);
+var PresetPalettes_1 = __webpack_require__(61);
 var visualization_icons_1 = __webpack_require__(52);
-var placeholders_1 = __webpack_require__(49);
-var StaticMajorAndTrendLayout_1 = __webpack_require__(103);
+var placeholders_1 = __webpack_require__(50);
+var configUtils_1 = __webpack_require__(22);
+var StaticMajorAndTrendLayout_1 = __webpack_require__(102);
 var VizBehavior_1 = __webpack_require__(6);
-var configUtils_1 = __webpack_require__(20);
+var configUtils_2 = __webpack_require__(20);
 var VizCategory_1 = __webpack_require__(35);
-var DynamicMajorColorEditor_1 = __webpack_require__(100);
-var DynamicTrendColorEditor_1 = __webpack_require__(101);
-var DynamicBackgroundColorEditor_1 = __webpack_require__(102);
-var StaticMajorColorEditor_1 = __webpack_require__(104);
-var StaticTrendColorEditor_1 = __webpack_require__(105);
-var StaticBackgroundColorEditor_1 = __webpack_require__(89);
-var RadialBackgroundColor_1 = __webpack_require__(474);
-var TrellisEditors_1 = __webpack_require__(106);
+var DynamicMajorColorAndGaugeEditor_1 = __webpack_require__(477);
+var DynamicTrendColorEditor_1 = __webpack_require__(100);
+var DynamicBackgroundColorEditor_1 = __webpack_require__(101);
+var StaticMajorColorEditor_1 = __webpack_require__(103);
+var StaticTrendColorEditor_1 = __webpack_require__(104);
+var StaticBackgroundColorEditor_1 = __webpack_require__(90);
+var RadialBackgroundColor_1 = __webpack_require__(478);
+var TrellisEditors_1 = __webpack_require__(105);
 var layoutUtils_1 = __webpack_require__(58);
 var dataContract = {
   requiredDataSources: [{
@@ -3591,13 +3801,6 @@ var size = {
   initialHeight: 250
 };
 var defaultContext = {
-  trendColorConfig: [{
-    to: 0,
-    value: '#9E2520'
-  }, {
-    from: 0,
-    value: '#1C6B2D'
-  }],
   majorColorConfig: [{
     to: 20,
     value: '#D41F1F'
@@ -3620,6 +3823,13 @@ var defaultContext = {
   majorColorMatchConfig: [{
     match: '',
     value: '#5C33FF'
+  }],
+  trendColorConfig: [{
+    to: 0,
+    value: '#9E2520'
+  }, {
+    from: 0,
+    value: '#1C6B2D'
   }]
 };
 var optionsSchema = {
@@ -3629,6 +3839,31 @@ var optionsSchema = {
     pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
     type: 'string'
   },
+  gaugeRanges: {
+    default: '> majorColorEditorConfig',
+    description: 'Specify the overall range of the gauge as a series of continuous, color-coded subranges. For example, [{"to": 20, "value": "#4BEBA8"}, {"from": 20, "to": 50, "value": "#D41F1F"}, {"from": 50, "value": "#F4DF7A"}]. Must be unbounded, open ranges. Ranges are bound by a separate minValue/maxValue option. Only configured if isGaugeOn is true.',
+    type: 'array',
+    items: {
+      type: 'object',
+      properties: {
+        from: {
+          type: 'number'
+        },
+        to: {
+          type: 'number'
+        },
+        value: {
+          type: 'string',
+          pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
+        }
+      }
+    }
+  },
+  isGaugeOn: {
+    default: false,
+    description: 'Specify if gauge is on.',
+    type: 'boolean'
+  },
   majorColor: {
     default: '> themes.defaultFontColor',
     description: 'Specify the color for the major value. You may use a dataSource to apply the color. The hex value format should be “#ffffff”. The default for enterprise light is "#000000". The default for enterprise dark is "#ffffff". The default for prisma dark is "rgba(255, 255, 255, 0.98)".',
@@ -3645,6 +3880,11 @@ var optionsSchema = {
     description: 'Specify the field that should be mapped to the major value.',
     type: 'string'
   },
+  minValue: {
+    default: 0,
+    description: 'Specify the min value of the radial.',
+    type: 'number'
+  },
   maxValue: {
     default: 100,
     description: 'Specify the value the radial fills up to.',
@@ -3683,7 +3923,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: {
@@ -3695,7 +3935,7 @@ var optionsSchema = {
   trendDisplay: {
     default: 'absolute',
     description: 'Specify how to display the trend value.',
-    pattern: schemaUtils_1.getPattern(['percent', 'absolute', 'off']),
+    pattern: (0, schemaUtils_1.getPattern)(['percent', 'absolute', 'off']),
     type: 'string'
   },
   trendValue: {
@@ -3747,7 +3987,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'
   }
 };
@@ -3763,14 +4003,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: 'singleValueRadial.none',
   value: {
     context: Object.assign({}, basePresetContext),
     options: Object.assign({}, basePresetOptions)
   }
 }, {
-  label: i18n_1._('Major value'),
+  label: (0, i18n_1._)('Major value and gauge'),
   name: 'singleValueRadial.majorValue',
   value: {
     context: Object.assign(Object.assign({}, basePresetContext), {
@@ -3781,7 +4021,7 @@ var presets = [{
     })
   }
 }, {
-  label: i18n_1._('Major value and Trend value'),
+  label: (0, i18n_1._)('Major value, trend value, and gauge'),
   name: 'singleValueRadial.majorValueAndTrend',
   value: {
     context: Object.assign(Object.assign({}, basePresetContext), {
@@ -3794,7 +4034,7 @@ var presets = [{
     })
   }
 }, {
-  label: i18n_1._('Trend value'),
+  label: (0, i18n_1._)('Trend value'),
   name: 'singleValueRadial.trend',
   value: {
     context: Object.assign(Object.assign({}, basePresetContext), {
@@ -3805,7 +4045,7 @@ var presets = [{
     })
   }
 }, {
-  label: i18n_1._('Background'),
+  label: (0, i18n_1._)('Background'),
   name: 'singleValueRadial.background',
   value: {
     context: Object.assign(Object.assign({}, basePresetContext), {
@@ -3818,7 +4058,7 @@ var presets = [{
 }];
 var themes = {
   defaultFontColor: function defaultFontColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: {
         dark: variables_1.default.white(props),
         light: variables_1.default.black(props)
@@ -3827,7 +4067,7 @@ var themes = {
     })(props);
   },
   defaultBackgroundColor: function defaultBackgroundColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: {
         dark: variables_1.default.black(props),
         light: variables_1.default.white(props)
@@ -3836,7 +4076,7 @@ var themes = {
     })(props);
   },
   defaultRadialBackgroundColor: function defaultRadialBackgroundColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: {
         dark: 'rgba(255, 255, 255, 0.15)',
         light: 'rgba(0, 0, 0, 0.1)'
@@ -3846,9 +4086,9 @@ var themes = {
   }
 };
 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',
@@ -3871,20 +4111,20 @@ var editorConfig = [{
     }
   }]]
 }, {
-  label: i18n_1._('Data display'),
+  label: (0, i18n_1._)('Data display'),
   layout: [].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'
       }]
     },
@@ -3892,11 +4132,19 @@ var editorConfig = [{
       var options = _ref2.options;
       return options.showValue || options.showValue === undefined;
     }
+  }], [{
+    label: (0, i18n_1._)('Min'),
+    option: 'minValue',
+    editor: 'editor.number'
+  }, {
+    label: (0, i18n_1._)('Max'),
+    option: 'maxValue',
+    editor: 'editor.number'
   }]], _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: {
@@ -3904,7 +4152,7 @@ var editorConfig = [{
       value: function value(_ref3) {
         var context = _ref3.context,
           options = _ref3.options;
-        var initialPreset = configUtils_1.getInitialPreset(context, options, presets);
+        var initialPreset = (0, configUtils_2.getInitialPreset)(context, options, presets);
         return initialPreset && initialPreset.label || null;
       }
     }
@@ -3912,17 +4160,17 @@ var editorConfig = [{
     editorProps: {
       themes: themes
     }
-  })], [DynamicMajorColorEditor_1.getDynamicMajorColorEditor({
+  })], [(0, DynamicMajorColorAndGaugeEditor_1.getDynamicMajorColorAndGaugeEditor)({
     defaultContext: defaultContext,
     defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
   })], [Object.assign(Object.assign({}, StaticTrendColorEditor_1.default), {
     editorProps: {
       themes: themes
     }
-  })], [DynamicTrendColorEditor_1.getDynamicTrendColorEditor({
+  })], [(0, DynamicTrendColorEditor_1.getDynamicTrendColorEditor)({
     defaultContext: defaultContext,
     defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
-  })], RadialBackgroundColor_1.default({
+  })], (0, RadialBackgroundColor_1.default)({
     themes: themes
   }), [Object.assign(Object.assign({}, StaticBackgroundColorEditor_1.default), {
     editorProps: {
@@ -3932,10 +4180,18 @@ var editorConfig = [{
     editorProps: {
       themes: themes
     }
-  })], [DynamicBackgroundColorEditor_1.getDynamicBackgroundColorEditor({
+  })], [(0, DynamicBackgroundColorEditor_1.getDynamicBackgroundColorEditor)({
     defaultContext: defaultContext,
     defaultPalettesConfig: PresetPalettes_1.defaultPalettesConfig
-  })]]
+  })], [{
+    label: (0, i18n_1._)('Show gauge ranges'),
+    option: 'isGaugeOn',
+    editor: 'editor.toggle',
+    showEditor: function showEditor(_ref4) {
+      var options = _ref4.options;
+      return (0, configUtils_1.isDynamicOption)(options.majorColor);
+    }
+  }]]
 }];
 /**
  * visualization configuration
@@ -3948,7 +4204,7 @@ var config = {
   /**
    * viz name
    */
-  name: i18n_1._('Single value radial'),
+  name: (0, i18n_1._)('Single value radial'),
   category: VizCategory_1.VizCategory.SINGLE_VALUE,
   /**
    * viz icon
@@ -3969,11 +4225,56 @@ var config = {
   supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.PLACEHOLDER, VizBehavior_1.VizBehavior.TRELLIS],
   themes: themes
 };
-exports.default = configUtils_1.enhanceConfig(config);
+exports.default = (0, configUtils_2.enhanceConfig)(config);
+
+/***/ }),
+
+/***/ 477:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicMajorColorAndGaugeEditor", function() { return getDynamicMajorColorAndGaugeEditor; });
+/* 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 getDynamicMajorColorAndGaugeEditor = function getDynamicMajorColorAndGaugeEditor(_ref) {
+  var defaultContext = _ref.defaultContext,
+    defaultPalettesConfig = _ref.defaultPalettesConfig;
+  return {
+    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Major value and gauge'),
+    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
+        }
+      }],
+      dataSelectors: [{
+        label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Major value'),
+        value: 'majorValue'
+      }],
+      defaultPalettesConfig: defaultPalettesConfig
+    }
+  };
+};
 
 /***/ }),
 
-/***/ 474:
+/***/ 478:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3988,7 +4289,7 @@ var radialBackground = function radialBackground(_ref) {
     themes = _ref.themes,
     labelPosition = _ref.labelPosition;
   return [{
-    label: i18n_1._(label || 'Radial background'),
+    label: (0, i18n_1._)(label || 'Radial background'),
     option: 'radialBackgroundColor',
     editor: 'editor.color',
     editorProps: {
@@ -4008,7 +4309,14 @@ module.exports = require("@babel/runtime/helpers/extends");
 
 /***/ }),
 
-/***/ 487:
+/***/ 49:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/colorConstants");
+
+/***/ }),
+
+/***/ 491:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4039,13 +4347,8 @@ var variables_default = /*#__PURE__*/__webpack_require__.n(variables_);
 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 external_lodash_pick_ = __webpack_require__(81);
-var external_lodash_pick_default = /*#__PURE__*/__webpack_require__.n(external_lodash_pick_);
-
-// EXTERNAL MODULE: external "lodash/isEmpty"
-var isEmpty_ = __webpack_require__(82);
-var isEmpty_default = /*#__PURE__*/__webpack_require__.n(isEmpty_);
+// EXTERNAL MODULE: external "lodash"
+var external_lodash_ = __webpack_require__(3);
 
 // EXTERNAL MODULE: external "@splunk/visualization-context/FeatureFlagContext"
 var FeatureFlagContext_ = __webpack_require__(21);
@@ -4059,10 +4362,10 @@ var SizeAwareWrapper_ = __webpack_require__(19);
 var SizeAwareWrapper_default = /*#__PURE__*/__webpack_require__.n(SizeAwareWrapper_);
 
 // 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);
@@ -4072,10 +4375,10 @@ var defineProperty_ = __webpack_require__(7);
 var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty_);
 
 // EXTERNAL MODULE: ./src/SingleValueBasic/SingleValueBasic.jsx + 2 modules
-var SingleValueBasic = __webpack_require__(79);
+var SingleValueBasic = __webpack_require__(81);
 
 // EXTERNAL MODULE: external "@splunk/visualizations-shared/colorConstants"
-var colorConstants_ = __webpack_require__(50);
+var colorConstants_ = __webpack_require__(49);
 
 // CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/RadialGraph.jsx
 
@@ -4141,171 +4444,14 @@ RadialGraph_RadialGraph.defaultProps = {
   strokeWidth: 12
 };
 /* harmony default export */ var PureSingleValueRadial_RadialGraph = (RadialGraph_RadialGraph);
-// EXTERNAL MODULE: ./src/common/utils/singleValueUtils.js
-var singleValueUtils = __webpack_require__(24);
-
-// CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/utils/displayUtils.js
-
+// EXTERNAL MODULE: ./src/SingleValueRadial/PureSingleValueRadial/utils/displayUtils.js
+var displayUtils = __webpack_require__(80);
 
-var VALID_TREND_POSITIONS = ['standard', 'below', 'outside'];
-var MAJOR_FONT_THRESHOLD = 25;
-var TREND_FONT_THRESHOLD = 12;
-var DEFAULT_RADIAL_STROKE_WIDTH = 16;
-var SMALL_RADIAL_STROKE_WIDTH = 6;
+// EXTERNAL MODULE: ./src/SingleValueRadial/PureSingleValueRadial/GaugeGraph.tsx
+var GaugeGraph = __webpack_require__(176);
+var GaugeGraph_default = /*#__PURE__*/__webpack_require__.n(GaugeGraph);
 
-/**
- * Get the colors for a radial graph based on severity
- * @method getRadialColors
- * @param {Object} props
- * @param {Bool} props.backgroundEnabled
- * @param {String} props.backgroundColor
- * @returns {Object} { background, stroke } colors
- */
-var displayUtils_getRadialColors = function getRadialColors(_ref) {
-  var backgroundEnabled = _ref.backgroundEnabled,
-    backgroundColor = _ref.backgroundColor;
-  return Object(singleValueUtils["getGraphColors"])({
-    backgroundEnabled: backgroundEnabled,
-    backgroundColor: backgroundColor,
-    defaultColors: colorConstants_["RADIAL_SEVERITY_COLORS"],
-    customColorFormatter: function customColorFormatter(color) {
-      return {
-        background: Object(singleValueUtils["lighten"])(color),
-        stroke: Object(singleValueUtils["darken"])(color)
-      };
-    }
-  });
-};
-
-/**
- * Figure out the dimensions of the graph
- * @method getRadialGraphDimensions
- * @param {Object} props
- * @param {Number} props.width                    // Width of the container
- * @param {Number} props.height                   // Height of the container
- * @returns {Number} width and height of the graph
- */
-var displayUtils_getRadialGraphDimensions = function getRadialGraphDimensions(_ref2) {
-  var width = _ref2.width,
-    height = _ref2.height;
-  // height * 2 because we are fitting only half of a circle inside the container
-  var radius = Math.min(width, height * 2) / 2;
-  return {
-    width: width - singleValueUtils["SVR_PADDING"].left - singleValueUtils["SVR_PADDING"].right,
-    height: radius - singleValueUtils["SVR_PADDING"].top - singleValueUtils["SVR_PADDING"].bottom
-  };
-};
-
-/**
- * Figure out the dimensions of the content container for SVR
- * @method getRadialHelperDimensions
- * @param {Object} props
- * @param {Number} props.width                    // Width of the visualization space
- * @param {Number} props.height                   // Height of the visualization space
- * @returns {Number} width and height of the content graph
- */
-var getRadialHelperDimensions = function getRadialHelperDimensions(_ref3) {
-  var height = _ref3.height,
-    _ref3$strokeWidth = _ref3.strokeWidth,
-    strokeWidth = _ref3$strokeWidth === void 0 ? DEFAULT_RADIAL_STROKE_WIDTH : _ref3$strokeWidth;
-  // The radius of the visualization is equal to the height
-  var semicircleRadius = height - strokeWidth / 2; // The inner part of the arc is strokeWidth / 2 inset.
-  var innerArcRadius = semicircleRadius * 0.9;
-  var halfContentWidth = innerArcRadius * 0.7;
-  var contentHeight = Math.floor(Math.sqrt(Math.pow(innerArcRadius, 2) - Math.pow(halfContentWidth, 2)));
-  return {
-    contentWidth: halfContentWidth * 2,
-    contentHeight: contentHeight,
-    helperArcRadius: innerArcRadius,
-    semicircleRadius: semicircleRadius
-  };
-};
-
-/**
- * Get the maximum size of the container that holds the graph text
- * @method getValueContentSize
- * @param {Object} props
- * @param {Number} props.graphSize
- * @param {Number} props.radialStrokeWidth             // Stroke width of the graph
- * @returns {Number} content size for showing major and trend values in radial graph
- */
-var getValueContentSize = function getValueContentSize(_ref4) {
-  var graphSize = _ref4.graphSize,
-    radialStrokeWidth = _ref4.radialStrokeWidth;
-  // Account for the graph's stroke width
-  var diameter = graphSize - radialStrokeWidth;
-  // Use pythagoreum theorum with circle diameter
-  // to calculate the size of the sides of the square inside the circle
-  return Math.floor(Math.sqrt(Math.pow(diameter, 2) / 2));
-};
-
-/*
- * @method getRadialStrokeWidth
- * @param {Number} graphHeight
- * @returns {Number} radial stroke width
- */
-var getRadialStrokeWidth = function getRadialStrokeWidth(graphHeight) {
-  return graphHeight >= 90 ? DEFAULT_RADIAL_STROKE_WIDTH : SMALL_RADIAL_STROKE_WIDTH;
-};
-
-/*
- * @method isValidPosition
- * @param {String} position
- * @returns {Bool}
- */
-var isValidPosition = function isValidPosition(position) {
-  return VALID_TREND_POSITIONS.indexOf(position) > -1;
-};
-
-/*
- * @method showTrendPositionStandard
- * @param {Object} props
- * @param {Bool} props.showTrendIndicator
- * @param {String} props.position
- * @returns {Bool}
- */
-var showTrendPositionStandard = function showTrendPositionStandard(_ref5) {
-  var showTrendIndicator = _ref5.showTrendIndicator,
-    position = _ref5.position;
-  return showTrendIndicator && position === 'standard';
-};
-
-/*
- * @method showTrendPositionBelow
- * @param {Object} props
- * @param {Bool} props.showTrendIndicator
- * @param {String} props.position
- * @returns {Bool}
- */
-var showTrendPositionBelow = function showTrendPositionBelow(_ref6) {
-  var showTrendIndicator = _ref6.showTrendIndicator,
-    position = _ref6.position;
-  return showTrendIndicator && position === 'below';
-};
-
-/*
- * @method showTrendPositionOutside
- * @param {Object} props
- * @param {Bool} props.showTrendIndicator
- * @param {String} props.position
- * @returns {Bool}
- */
-var showTrendPositionOutside = function showTrendPositionOutside(_ref7) {
-  var showTrendIndicator = _ref7.showTrendIndicator,
-    position = _ref7.position;
-  return showTrendIndicator && position === 'outside';
-};
-
-/*
- * need to handle max and min
- * @method getRadialProgress
- * @param {Number} majorValue
- * @returns {Number} progress bar in radial graph
- */
-var getRadialProgress = function getRadialProgress(majorValue, maxValue) {
-  return Number.isNaN(Number(majorValue)) || Number.isNaN(Number(maxValue)) || majorValue < 0 && majorValue < maxValue ? 0 : majorValue / maxValue * 100;
-};
-// CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/RadialLayout.jsx
+// CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/RadialLayout.jsx
 
 
 function ownKeys(object, enumerableOnly) {
@@ -4335,6 +4481,7 @@ function _objectSpread(target) {
 
 
 
+
 var TextContainer = external_styled_components_default.a.div.withConfig({
   displayName: "RadialLayout__TextContainer",
   componentId: "sc-13x2rjt-0"
@@ -4392,9 +4539,12 @@ var UnderLabelText = external_styled_components_default.a.span.withConfig({
 var RadialLayout_RadialContent = function RadialContent(_ref) {
   var props = extends_default()({}, _ref);
   var majorColor = props.majorColor,
+    majorValue = props.majorValue,
     majorText = props.majorText,
     majorTextFontSize = props.majorTextFontSize,
     majorValueTitle = props.majorValueTitle,
+    minValue = props.minValue,
+    maxValue = props.maxValue,
     trendColor = props.trendColor,
     trendText = props.trendText,
     trendTextFontSize = props.trendTextFontSize,
@@ -4410,8 +4560,11 @@ var RadialLayout_RadialContent = function RadialContent(_ref) {
     radialStrokeColor = props.radialStrokeColor,
     radialStrokeWidth = props.radialStrokeWidth,
     graphWidth = props.graphWidth,
-    graphHeight = props.graphHeight;
-  var _getRadialHelperDimen = getRadialHelperDimensions({
+    graphHeight = props.graphHeight,
+    isGaugeValid = props.isGaugeValid,
+    formattedGaugeRanges = props.formattedGaugeRanges,
+    defaultFontColor = props.defaultFontColor;
+  var _getRadialHelperDimen = Object(displayUtils["getRadialHelperDimensions"])({
       height: graphHeight,
       strokeWidth: radialStrokeWidth
     }),
@@ -4426,14 +4579,28 @@ var RadialLayout_RadialContent = function RadialContent(_ref) {
 
   // Remove extra padding under major value - this is specific to Proxima Nova
   var singleValueBottomOffset = majorTextFontSize * 0.2;
-  var radialGraph = showRadialGraph ? /*#__PURE__*/external_react_default.a.createElement(PureSingleValueRadial_RadialGraph, {
-    progress: progress,
-    backgroundColor: radialBackgroundColor,
-    progressColor: radialStrokeColor,
-    strokeWidth: radialStrokeWidth,
-    width: graphWidth,
-    height: graphHeight
-  }) : null;
+  var radialGraph = null;
+  if (showRadialGraph) {
+    radialGraph = isGaugeValid ? /*#__PURE__*/external_react_default.a.createElement(GaugeGraph_default.a, {
+      width: graphWidth,
+      height: graphHeight,
+      strokeWidth: radialStrokeWidth,
+      radialBackgroundColor: radialBackgroundColor,
+      fontColor: defaultFontColor,
+      formattedGaugeRanges: formattedGaugeRanges,
+      majorValue: majorValue,
+      minValue: minValue,
+      maxValue: maxValue,
+      showRadialGraph: showRadialGraph
+    }) : /*#__PURE__*/external_react_default.a.createElement(PureSingleValueRadial_RadialGraph, {
+      progress: progress,
+      backgroundColor: radialBackgroundColor,
+      progressColor: radialStrokeColor,
+      strokeWidth: radialStrokeWidth,
+      width: graphWidth,
+      height: graphHeight
+    });
+  }
   var singleValueComponent = /*#__PURE__*/external_react_default.a.createElement(SingleValueContainer, {
     singleValueBottomOffset: singleValueBottomOffset
   }, /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic["default"], {
@@ -4461,7 +4628,8 @@ var RadialLayout_RadialContent = function RadialContent(_ref) {
   }, underLabel));
   return /*#__PURE__*/external_react_default.a.createElement(GraphContainer, {
     width: graphWidth,
-    height: graphHeight
+    height: graphHeight,
+    "data-test": "graph-container"
   }, radialGraph, /*#__PURE__*/external_react_default.a.createElement(TextContainer, {
     smallViz: !showRadialGraph,
     height: graphHeight
@@ -4475,9 +4643,17 @@ RadialLayout_RadialContent.propTypes = _objectSpread(_objectSpread({}, SingleVal
   radialStrokeColor: external_prop_types_default.a.string,
   radialStrokeWidth: external_prop_types_default.a.number,
   graphWidth: external_prop_types_default.a.number,
-  graphHeight: external_prop_types_default.a.number
+  graphHeight: external_prop_types_default.a.number,
+  gaugeComponent: external_prop_types_default.a.element,
+  backgroundColor: external_prop_types_default.a.string
 });
 /* harmony default export */ var RadialLayout = (RadialLayout_RadialContent);
+// EXTERNAL MODULE: ./src/common/utils/singleValueUtils.js
+var singleValueUtils = __webpack_require__(24);
+
+// EXTERNAL MODULE: ./src/SingleValueRadial/PureSingleValueRadial/utils/gaugeUtils.ts
+var gaugeUtils = __webpack_require__(96);
+
 // CONCATENATED MODULE: ./src/SingleValueRadial/PureSingleValueRadial/SingleValueRadial.jsx
 
 
@@ -4496,11 +4672,12 @@ RadialLayout_RadialContent.propTypes = _objectSpread(_objectSpread({}, SingleVal
 
 
 
+
 var Container = external_styled_components_default.a.div.withConfig({
   displayName: "SingleValueRadial__Container",
   componentId: "sc-404dvw-0"
 })(["overflow:hidden;", ";"], function (props) {
-  return Object(style_["toDimension"])(external_lodash_pick_default()(props, ['width', 'height']));
+  return Object(style_["toDimension"])(Object(external_lodash_["pick"])(props, ['width', 'height']));
 });
 var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref) {
   var props = extends_default()({}, _ref);
@@ -4508,9 +4685,12 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref) {
     _props$height = props.height,
     height = _props$height === void 0 ? 250 : _props$height,
     style = props.style,
+    isGaugeOn = props.isGaugeOn,
+    gaugeRanges = props.gaugeRanges,
     majorFontSize = props.majorFontSize,
     majorValue = props.majorValue,
     majorValueField = props.majorValueField,
+    minValue = props.minValue,
     maxValue = props.maxValue,
     trendValue = props.trendValue,
     trendFontSize = props.trendFontSize,
@@ -4543,42 +4723,48 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref) {
     majorColor = _computeColors.majorColor,
     trendColor = _computeColors.trendColor,
     underLabelColor = _computeColors.underLabelColor;
-  var radialColors = displayUtils_getRadialColors({
+  var radialColors = Object(displayUtils["getRadialColors"])({
     backgroundEnabled: backgroundEnabled,
     backgroundColor: backgroundColor
   });
   var radialBackgroundColor = props.radialBackgroundColor || radialColors.background;
   var radialStrokeColor = props.radialStrokeColor || radialColors.stroke;
-  var featureFlagContext = external_react_default.a.useContext(FeatureFlagContext_default.a);
+  var featureFlagContext = external_react_["useContext"](FeatureFlagContext_default.a);
   var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
   var trellisEnabled = isTrellisFeatureFlagOn && splitByLayout === layoutUtils["LAYOUT_TYPE"].Trellis;
   var handleValueClick = Object(external_react_["useCallback"])(function (ev) {
     return Object(singleValueUtils["handleValueClickCallback"])(ev, majorValue, majorValueField, trendValue, onValueClick, trellisEnabled, trellisSplitBy, trellisKey);
   }, [onValueClick, majorValue, majorValueField, trendValue, trellisEnabled, trellisSplitBy, trellisKey]);
+  var sortedGaugeRanges = gaugeRanges && Object(gaugeUtils["getSortedGaugeRanges"])(gaugeRanges);
+  var isGaugeValid = isGaugeOn && gaugeRanges && Object(gaugeUtils["validateGaugeRanges"])(sortedGaugeRanges);
+  var formattedGaugeRanges = isGaugeValid && Object(gaugeUtils["getFormattedGaugeRanges"])(sortedGaugeRanges, minValue, maxValue);
   var renderVisualization = function renderVisualization(_ref2) {
     var containerWidth = _ref2.width,
       containerHeight = _ref2.height;
     var underLabel = props.underLabel;
     var trendDisplay = props.trendDisplay,
       unit = props.unit; // calculate radial graph dimensions, strokewidth, and major and trend content dimensions
-    var _getRadialGraphDimens = displayUtils_getRadialGraphDimensions({
+    var _getRadialGraphDimens = Object(displayUtils["getRadialGraphDimensions"])({
         width: containerWidth,
         height: containerHeight
       }),
       graphWidth = _getRadialGraphDimens.width,
       graphHeight = _getRadialGraphDimens.height; // Radial stroke width is stepped to lower value at lower sizes.
-    var radialStrokeWidth = getRadialStrokeWidth(graphHeight);
-    var _getRadialHelperDimen = getRadialHelperDimensions({
-        height: graphHeight - radialStrokeWidth / 2,
-        strokeWidth: radialStrokeWidth
-      }),
-      contentWidth = _getRadialHelperDimen.contentWidth,
-      contentHeight = _getRadialHelperDimen.contentHeight; // Subtract half of the stroke width for the exact internal radius.
+    var radialStrokeWidth = Object(displayUtils["getRadialStrokeWidth"])(graphHeight);
+
+    // Subtract half of the stroke width for the exact internal radius.
     var semicircleRadius = graphHeight - radialStrokeWidth / 2;
-    // If radius drops below 20px, hide the radial graph. The dependency of this variable on font size is removed, and it now only depends on semicircle radius.
+    // If radius drops below 20px, hide the radial graph.
     var showRadialGraph = semicircleRadius >= 20;
 
-    // If not showing the radial graph, then can forgo padding logic and use original container dimensions for content sizing computation.
+    // if gauge is valid, reduce contentWidth and contentHeight by padding from GaugeGraph
+    var offSet = isGaugeValid ? Object(gaugeUtils["getLabelFontSize"])(graphHeight, showRadialGraph) * 3 : 0;
+    var _getRadialHelperDimen = Object(displayUtils["getRadialHelperDimensions"])({
+        height: graphHeight - radialStrokeWidth / 2 - offSet,
+        strokeWidth: radialStrokeWidth
+      }),
+      contentWidth = _getRadialHelperDimen.contentWidth,
+      contentHeight = _getRadialHelperDimen.contentHeight; // If not showing the radial graph, then can forgo padding logic and use original container dimensions for content sizing computation.
     if (!showRadialGraph) {
       graphWidth = containerWidth;
       contentWidth = containerWidth;
@@ -4608,23 +4794,26 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref) {
       trendTextFontSize = _computeSingleValueRa.trendTextFontSize,
       majorValueTitle = _computeSingleValueRa.majorValueTitle,
       smallVizProps = _computeSingleValueRa.smallVizProps;
-    if (!isEmpty_default()(smallVizProps)) {
+    if (!Object(external_lodash_["isEmpty"])(smallVizProps)) {
       trendDisplay = smallVizProps.trendDisplay;
       unit = smallVizProps.unit;
     }
 
     // calculate radial progress
-    var progress = getRadialProgress(majorValue, maxValue);
-    return /*#__PURE__*/external_react_default.a.createElement(VizStyleWrapper["default"], {
+    var progress = Object(displayUtils["getRadialProgress"])(majorValue - minValue, minValue, maxValue);
+    return /*#__PURE__*/external_react_["createElement"](VizStyleWrapper["default"], {
       backgroundColor: backgroundColor,
       style: style,
       dataTestKey: "SingleValueRadialWrapper"
-    }, /*#__PURE__*/external_react_default.a.createElement(RadialLayout, {
+    }, /*#__PURE__*/external_react_["createElement"](RadialLayout, {
       "data-test": "RadialLayout",
       majorColor: majorColor,
+      majorValue: majorValue,
       majorText: majorText,
       majorTextFontSize: majorTextFontSize,
       majorValueTitle: majorValueTitle,
+      minValue: minValue,
+      maxValue: maxValue,
       trendColor: trendColor,
       trendText: trendText,
       trendTextFontSize: trendTextFontSize,
@@ -4640,61 +4829,69 @@ var SingleValueRadial_SingleValueRadial = function SingleValueRadial(_ref) {
       radialStrokeColor: radialStrokeColor,
       radialStrokeWidth: radialStrokeWidth,
       graphWidth: graphWidth,
-      graphHeight: graphHeight
+      graphHeight: graphHeight,
+      isGaugeValid: isGaugeValid,
+      formattedGaugeRanges: formattedGaugeRanges,
+      defaultFontColor: defaultColors.defaultFontColor
     }));
   };
   if (trellisEnabled) {
-    return /*#__PURE__*/external_react_default.a.createElement(external_react_default.a.Fragment, null, /*#__PURE__*/external_react_default.a.createElement(TrellisTitle["TrellisTitle"], {
+    return /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, /*#__PURE__*/external_react_["createElement"](TrellisTitle["TrellisTitle"], {
       fontColor: defaultColors.defaultFontColor,
       backgroundColor: backgroundColor,
       trellisKey: trellisKey
-    }), /*#__PURE__*/external_react_default.a.createElement(Container, {
+    }), /*#__PURE__*/external_react_["createElement"](Container, {
       width: width,
       height: height - TrellisTitle["TRELLIS_TITLE_HEIGHT"]
-    }, /*#__PURE__*/external_react_default.a.createElement(SizeAwareWrapper_default.a, null, function (containerDimension) {
+    }, /*#__PURE__*/external_react_["createElement"](SizeAwareWrapper_default.a, null, function (containerDimension) {
       return renderVisualization(containerDimension);
     })));
   }
-  return /*#__PURE__*/external_react_default.a.createElement(Container, {
+  return /*#__PURE__*/external_react_["createElement"](Container, {
     width: width,
     height: height
-  }, /*#__PURE__*/external_react_default.a.createElement(SizeAwareWrapper_default.a, null, function (containerDimension) {
+  }, /*#__PURE__*/external_react_["createElement"](SizeAwareWrapper_default.a, null, function (containerDimension) {
     return renderVisualization(containerDimension);
   }));
 };
 SingleValueRadial_SingleValueRadial.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]),
-  style: external_prop_types_default.a.object,
-  majorValue: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
-  majorValueField: external_prop_types_default.a.string,
-  majorColor: external_prop_types_default.a.string,
-  majorFontSize: external_prop_types_default.a.number,
-  maxValue: external_prop_types_default.a.number,
-  trendValue: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
-  trendColor: external_prop_types_default.a.string,
-  trendFontSize: external_prop_types_default.a.number,
-  trendDisplay: external_prop_types_default.a.string,
-  trendIndicatorPosition: external_prop_types_default.a.oneOf(['standard', 'below', 'outside']),
-  shouldAbbreviateTrendValue: external_prop_types_default.a.bool,
-  backgroundColor: external_prop_types_default.a.string,
-  unit: external_prop_types_default.a.string,
-  unitPosition: external_prop_types_default.a.string,
-  underLabel: external_prop_types_default.a.string,
-  numberPrecision: external_prop_types_default.a.number,
-  shouldUseThousandSeparators: external_prop_types_default.a.bool,
-  radialBackgroundColor: external_prop_types_default.a.string,
-  radialStrokeColor: external_prop_types_default.a.string,
-  onValueClick: external_prop_types_default.a.func,
-  splitByLayout: external_prop_types_default.a.string,
-  trellisKey: external_prop_types_default.a.string,
-  trellisSplitBy: external_prop_types_default.a.string
+  width: external_prop_types_["oneOfType"]([external_prop_types_["string"], external_prop_types_["number"]]),
+  height: external_prop_types_["oneOfType"]([external_prop_types_["string"], external_prop_types_["number"]]),
+  style: external_prop_types_["object"],
+  majorValue: external_prop_types_["oneOfType"]([external_prop_types_["string"], external_prop_types_["number"]]),
+  majorValueField: external_prop_types_["string"],
+  majorColor: external_prop_types_["string"],
+  majorFontSize: external_prop_types_["number"],
+  minValue: external_prop_types_["number"],
+  maxValue: external_prop_types_["number"],
+  trendValue: external_prop_types_["oneOfType"]([external_prop_types_["string"], external_prop_types_["number"]]),
+  trendColor: external_prop_types_["string"],
+  trendFontSize: external_prop_types_["number"],
+  trendDisplay: external_prop_types_["string"],
+  trendIndicatorPosition: external_prop_types_["oneOf"](['standard', 'below', 'outside']),
+  shouldAbbreviateTrendValue: external_prop_types_["bool"],
+  backgroundColor: external_prop_types_["string"],
+  unit: external_prop_types_["string"],
+  unitPosition: external_prop_types_["string"],
+  underLabel: external_prop_types_["string"],
+  numberPrecision: external_prop_types_["number"],
+  shouldUseThousandSeparators: external_prop_types_["bool"],
+  radialBackgroundColor: external_prop_types_["string"],
+  radialStrokeColor: external_prop_types_["string"],
+  onValueClick: external_prop_types_["func"],
+  splitByLayout: external_prop_types_["string"],
+  trellisKey: external_prop_types_["string"],
+  trellisSplitBy: external_prop_types_["string"],
+  isGaugeOn: external_prop_types_["bool"],
+  gaugeComponent: external_prop_types_["element"],
+  gaugeRanges: external_prop_types_["array"]
 };
 SingleValueRadial_SingleValueRadial.defaultProps = {
   width: '100%',
   height: 250,
   majorValue: 'N/A',
   majorValueField: '',
+  minValue: 0,
   maxValue: 100,
   trendDisplay: 'absolute',
   trendIndicatorPosition: 'standard',
@@ -4710,17 +4907,10 @@ SingleValueRadial_SingleValueRadial.defaultProps = {
 
 /***/ }),
 
-/***/ 49:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-icons/placeholders");
-
-/***/ }),
-
 /***/ 50:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/colorConstants");
+module.exports = require("@splunk/visualization-icons/placeholders");
 
 /***/ }),
 
@@ -4763,13 +4953,6 @@ var LAYOUT_TYPE;
 
 /***/ }),
 
-/***/ 59:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes");
-
-/***/ }),
-
 /***/ 6:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -4810,6 +4993,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");
 
 /***/ }),
@@ -4821,7 +5011,7 @@ module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 
-/***/ 72:
+/***/ 73:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4846,7 +5036,7 @@ VizStyleWrapper.displayName = 'VizStyleWrapper';
 
 /***/ }),
 
-/***/ 78:
+/***/ 79:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4886,7 +5076,201 @@ exports.TrellisTitle = TrellisTitle;
 
 /***/ }),
 
-/***/ 79:
+/***/ 8:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
+
+/***/ }),
+
+/***/ 80:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VALID_TREND_POSITIONS", function() { return VALID_TREND_POSITIONS; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MAJOR_FONT_THRESHOLD", function() { return MAJOR_FONT_THRESHOLD; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TREND_FONT_THRESHOLD", function() { return TREND_FONT_THRESHOLD; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DEFAULT_RADIAL_STROKE_WIDTH", function() { return DEFAULT_RADIAL_STROKE_WIDTH; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SMALL_RADIAL_STROKE_WIDTH", function() { return SMALL_RADIAL_STROKE_WIDTH; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getRadialColors", function() { return getRadialColors; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getRadialGraphDimensions", function() { return getRadialGraphDimensions; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getRadialHelperDimensions", function() { return getRadialHelperDimensions; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getValueContentSize", function() { return getValueContentSize; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getRadialStrokeWidth", function() { return getRadialStrokeWidth; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isValidPosition", function() { return isValidPosition; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showTrendPositionStandard", function() { return showTrendPositionStandard; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showTrendPositionBelow", function() { return showTrendPositionBelow; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showTrendPositionOutside", function() { return showTrendPositionOutside; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getRadialProgress", function() { return getRadialProgress; });
+/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(49);
+/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _common_utils_singleValueUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(24);
+
+
+var VALID_TREND_POSITIONS = ['standard', 'below', 'outside'];
+var MAJOR_FONT_THRESHOLD = 25;
+var TREND_FONT_THRESHOLD = 12;
+var DEFAULT_RADIAL_STROKE_WIDTH = 16;
+var SMALL_RADIAL_STROKE_WIDTH = 6;
+
+/**
+ * Get the colors for a radial graph based on severity
+ * @method getRadialColors
+ * @param {Object} props
+ * @param {Bool} props.backgroundEnabled
+ * @param {String} props.backgroundColor
+ * @returns {Object} { background, stroke } colors
+ */
+var getRadialColors = function getRadialColors(_ref) {
+  var backgroundEnabled = _ref.backgroundEnabled,
+    backgroundColor = _ref.backgroundColor;
+  return Object(_common_utils_singleValueUtils__WEBPACK_IMPORTED_MODULE_1__["getGraphColors"])({
+    backgroundEnabled: backgroundEnabled,
+    backgroundColor: backgroundColor,
+    defaultColors: _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_0__["RADIAL_SEVERITY_COLORS"],
+    customColorFormatter: function customColorFormatter(color) {
+      return {
+        background: Object(_common_utils_singleValueUtils__WEBPACK_IMPORTED_MODULE_1__["lighten"])(color),
+        stroke: Object(_common_utils_singleValueUtils__WEBPACK_IMPORTED_MODULE_1__["darken"])(color)
+      };
+    }
+  });
+};
+
+/**
+ * Figure out the dimensions of the graph
+ * @method getRadialGraphDimensions
+ * @param {Object} props
+ * @param {Number} props.width                    // Width of the container
+ * @param {Number} props.height                   // Height of the container
+ * @returns {Number} width and height of the graph
+ */
+var getRadialGraphDimensions = function getRadialGraphDimensions(_ref2) {
+  var width = _ref2.width,
+    height = _ref2.height;
+  // height * 2 because we are fitting only half of a circle inside the container
+  var radius = Math.min(width, height * 2) / 2;
+  return {
+    width: width - _common_utils_singleValueUtils__WEBPACK_IMPORTED_MODULE_1__["SVR_PADDING"].left - _common_utils_singleValueUtils__WEBPACK_IMPORTED_MODULE_1__["SVR_PADDING"].right,
+    height: radius - _common_utils_singleValueUtils__WEBPACK_IMPORTED_MODULE_1__["SVR_PADDING"].top - _common_utils_singleValueUtils__WEBPACK_IMPORTED_MODULE_1__["SVR_PADDING"].bottom
+  };
+};
+
+/**
+ * Figure out the dimensions of the content container for SVR
+ * @method getRadialHelperDimensions
+ * @param {Object} props
+ * @param {Number} props.width                    // Width of the visualization space
+ * @param {Number} props.height                   // Height of the visualization space
+ * @returns {Number} width and height of the content graph
+ */
+var getRadialHelperDimensions = function getRadialHelperDimensions(_ref3) {
+  var height = _ref3.height,
+    _ref3$strokeWidth = _ref3.strokeWidth,
+    strokeWidth = _ref3$strokeWidth === void 0 ? DEFAULT_RADIAL_STROKE_WIDTH : _ref3$strokeWidth;
+  // The radius of the visualization is equal to the height
+  var semicircleRadius = height - strokeWidth / 2; // The inner part of the arc is strokeWidth / 2 inset.
+  var innerArcRadius = semicircleRadius * 0.9;
+  var halfContentWidth = innerArcRadius * 0.7;
+  var contentHeight = Math.floor(Math.sqrt(Math.pow(innerArcRadius, 2) - Math.pow(halfContentWidth, 2)));
+  return {
+    contentWidth: halfContentWidth * 2,
+    contentHeight: contentHeight,
+    helperArcRadius: innerArcRadius,
+    semicircleRadius: semicircleRadius
+  };
+};
+
+/**
+ * Get the maximum size of the container that holds the graph text
+ * @method getValueContentSize
+ * @param {Object} props
+ * @param {Number} props.graphSize
+ * @param {Number} props.radialStrokeWidth             // Stroke width of the graph
+ * @returns {Number} content size for showing major and trend values in radial graph
+ */
+var getValueContentSize = function getValueContentSize(_ref4) {
+  var graphSize = _ref4.graphSize,
+    radialStrokeWidth = _ref4.radialStrokeWidth;
+  // Account for the graph's stroke width
+  var diameter = graphSize - radialStrokeWidth;
+  // Use pythagoreum theorum with circle diameter
+  // to calculate the size of the sides of the square inside the circle
+  return Math.floor(Math.sqrt(Math.pow(diameter, 2) / 2));
+};
+
+/*
+ * @method getRadialStrokeWidth
+ * @param {Number} graphHeight
+ * @returns {Number} radial stroke width
+ */
+var getRadialStrokeWidth = function getRadialStrokeWidth(graphHeight) {
+  return graphHeight >= 90 ? DEFAULT_RADIAL_STROKE_WIDTH : SMALL_RADIAL_STROKE_WIDTH;
+};
+
+/*
+ * @method isValidPosition
+ * @param {String} position
+ * @returns {Bool}
+ */
+var isValidPosition = function isValidPosition(position) {
+  return VALID_TREND_POSITIONS.indexOf(position) > -1;
+};
+
+/*
+ * @method showTrendPositionStandard
+ * @param {Object} props
+ * @param {Bool} props.showTrendIndicator
+ * @param {String} props.position
+ * @returns {Bool}
+ */
+var showTrendPositionStandard = function showTrendPositionStandard(_ref5) {
+  var showTrendIndicator = _ref5.showTrendIndicator,
+    position = _ref5.position;
+  return showTrendIndicator && position === 'standard';
+};
+
+/*
+ * @method showTrendPositionBelow
+ * @param {Object} props
+ * @param {Bool} props.showTrendIndicator
+ * @param {String} props.position
+ * @returns {Bool}
+ */
+var showTrendPositionBelow = function showTrendPositionBelow(_ref6) {
+  var showTrendIndicator = _ref6.showTrendIndicator,
+    position = _ref6.position;
+  return showTrendIndicator && position === 'below';
+};
+
+/*
+ * @method showTrendPositionOutside
+ * @param {Object} props
+ * @param {Bool} props.showTrendIndicator
+ * @param {String} props.position
+ * @returns {Bool}
+ */
+var showTrendPositionOutside = function showTrendPositionOutside(_ref7) {
+  var showTrendIndicator = _ref7.showTrendIndicator,
+    position = _ref7.position;
+  return showTrendIndicator && position === 'outside';
+};
+
+/*
+ * @method getRadialProgress
+ * @param {Number} amount of progress in the radial
+ * @param {Number} minValue
+ * @param {Number} maxValue
+ * @returns {Number} percentage of progress in the radial
+ */
+var getRadialProgress = function getRadialProgress(progressValue, minValue, maxValue) {
+  return typeof progressValue === 'number' && minValue < maxValue && progressValue > 0 ? progressValue / (maxValue - minValue) * 100 : 0;
+};
+
+/***/ }),
+
+/***/ 81:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4916,11 +5300,11 @@ var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(exte
 var singleValueUtils = __webpack_require__(24);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ArrowUp"
-var ArrowUp_ = __webpack_require__(83);
+var ArrowUp_ = __webpack_require__(84);
 var ArrowUp_default = /*#__PURE__*/__webpack_require__.n(ArrowUp_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ArrowDown"
-var ArrowDown_ = __webpack_require__(84);
+var ArrowDown_ = __webpack_require__(85);
 var ArrowDown_default = /*#__PURE__*/__webpack_require__.n(ArrowDown_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
@@ -4995,7 +5379,7 @@ TrendValue_SingleValueContent.propTypes = {
 };
 /* harmony default export */ var TrendValue = (TrendValue_SingleValueContent);
 // EXTERNAL MODULE: external "cssesc"
-var external_cssesc_ = __webpack_require__(85);
+var external_cssesc_ = __webpack_require__(86);
 var external_cssesc_default = /*#__PURE__*/__webpack_require__.n(external_cssesc_);
 
 // CONCATENATED MODULE: ./src/SingleValueBasic/MajorValue.jsx
@@ -5180,56 +5564,49 @@ var SingleValueTrendValue = TrendValue;
 
 /***/ }),
 
-/***/ 8:
+/***/ 82:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
+module.exports = require("@babel/runtime/helpers/typeof");
 
 /***/ }),
 
-/***/ 80:
+/***/ 83:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/trellisUtils");
 
 /***/ }),
 
-/***/ 81:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/pick");
-
-/***/ }),
-
-/***/ 82:
+/***/ 84:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/isEmpty");
+module.exports = require("@splunk/react-icons/enterprise/ArrowUp");
 
 /***/ }),
 
-/***/ 83:
+/***/ 85:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/enterprise/ArrowUp");
+module.exports = require("@splunk/react-icons/enterprise/ArrowDown");
 
 /***/ }),
 
-/***/ 84:
+/***/ 86:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/enterprise/ArrowDown");
+module.exports = require("cssesc");
 
 /***/ }),
 
-/***/ 85:
+/***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("cssesc");
+module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
-/***/ 89:
+/***/ 90:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5253,17 +5630,214 @@ var StaticBackgroundColorEditor = {
 
 /***/ }),
 
-/***/ 9:
+/***/ 93:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+module.exports = require("@splunk/react-ui/Paginator");
 
 /***/ }),
 
-/***/ 92:
-/***/ (function(module, exports) {
+/***/ 96:
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@splunk/react-ui/Paginator");
+"use strict";
+
+
+var _typeof = __webpack_require__(82);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFormattedGaugeRanges = exports.getSortedGaugeRanges = exports.getGaugeStrokeWidth = exports.getLabelFontSize = exports.getVerticalLabelOffset = exports.computeTextWidth = exports.getProgressWidth = exports.validateGaugeRanges = exports.getGaugeRange = void 0;
+var displayUtils_1 = __webpack_require__(80);
+/**
+ * Figure out what range the major value lies in
+ * @method getGaugeRange
+ * @param {Array} formattedGaugeRanges
+ * @param {Number} majorValue
+ * @returns {Number} index of range that the major value lies in
+ */
+var getGaugeRange = function getGaugeRange(formattedGaugeRanges, majorValue) {
+  if (typeof majorValue !== 'number') {
+    return -1;
+  }
+  var numRanges = formattedGaugeRanges.length;
+  return formattedGaugeRanges.findIndex(function (r, i) {
+    return i === numRanges - 1 && r.from <= majorValue || r.from <= majorValue && majorValue < r.to;
+  });
+};
+exports.getGaugeRange = getGaugeRange;
+/**
+ * Validate gauge ranges object
+ * @method validateGaugeRanges
+ * @param {Array} gaugeRanges unformatted, open gauge ranges
+ * @returns {boolean} whether gauge ranges object is valid
+ */
+var validateGaugeRanges = function validateGaugeRanges(gaugeRanges) {
+  if (!gaugeRanges || !Array.isArray(gaugeRanges) || gaugeRanges.length < 2) {
+    return false;
+  }
+  for (var i = 0; i < gaugeRanges.length; i += 1) {
+    var range = gaugeRanges[i];
+    if (!range || _typeof(range) !== 'object') {
+      return false;
+    }
+    if (i === 0 && (Object.keys(range).includes('from') || !Object.keys(range).includes('to') || typeof range.to !== 'number')) {
+      return false;
+    }
+    if (i === gaugeRanges.length - 1 && (Object.keys(range).includes('to') || !Object.keys(range).includes('from') || typeof range.from !== 'number')) {
+      return false;
+    }
+    if (i > 0 && i < gaugeRanges.length - 1 && (!Object.keys(range).includes('from') || !Object.keys(range).includes('to') || typeof range.from !== 'number' || typeof range.to !== 'number' || range.from !== gaugeRanges[i - 1].to || range.from >= range.to)) {
+      return false;
+    }
+    if (!Object.keys(range).includes('value') || typeof range.value !== 'string') {
+      return false;
+    }
+  }
+  return true;
+};
+exports.validateGaugeRanges = validateGaugeRanges;
+/**
+ * Return progress width
+ * @method getProgressWidth
+ * @param {Number} value
+ * @param {Number} minValue
+ * @param {Number} maxValue
+ * @param {Number} circumference
+ * @returns {Number} progress width of radial
+ */
+var getProgressWidth = function getProgressWidth(value, minValue, maxValue, circumference) {
+  var progress = (0, displayUtils_1.getRadialProgress)(value, minValue, maxValue);
+  var progress50 = progress / 100 * 50;
+  var progressWidth = progress50 / 100 * circumference;
+  return progressWidth;
+};
+exports.getProgressWidth = getProgressWidth;
+/**
+ * Return text width
+ * @method computeTextWidth
+ * @param {String} text
+ * @param {String} font
+ * @returns {Number} width of text with font
+ */
+var computeTextWidth = function computeTextWidth(text, font) {
+  var canvas = document.createElement('canvas');
+  var context = canvas.getContext('2d');
+  context.font = font;
+  var measure = context.measureText(text);
+  return measure.width;
+};
+exports.computeTextWidth = computeTextWidth;
+/**
+ * Return vertical offset of label
+ * @method getVerticalLabelOffset
+ * @param {Number} theta
+ * @param {Number} textHeight
+ * @param {Number} maxOffset
+ * @returns {Number} vertical offset of label
+ */
+var getVerticalLabelOffset = function getVerticalLabelOffset(theta, textHeight, maxOffset) {
+  if (theta > 90) {
+    return (-(maxOffset / 90) * (180 - theta) + maxOffset) * textHeight;
+  }
+  return (-(maxOffset / 90) * theta + maxOffset) * textHeight;
+};
+exports.getVerticalLabelOffset = getVerticalLabelOffset;
+/**
+ * Returns font size of label
+ * @method getLabelFontSize
+ * @param {Number} height
+ * @param {Number} showRadialGraph
+ * @returns {Number} font size of label
+ */
+var getLabelFontSize = function getLabelFontSize(height, showRadialGraph) {
+  var strokeWidth = (0, exports.getGaugeStrokeWidth)(height);
+  var _ref = (0, displayUtils_1.getRadialHelperDimensions)({
+      height: height,
+      strokeWidth: strokeWidth
+    }),
+    semicircleRadius = _ref.semicircleRadius,
+    helperArcRadius = _ref.helperArcRadius; // Two cases for removing the labels:
+  // 1. the semicircle radius is insufficiently sized for text
+  // 2. the radial visualization has been disabled (first condition reached first when making smaller).
+  var fillVacantSpace = semicircleRadius < 50 || !showRadialGraph;
+  return fillVacantSpace ? 0 : Math.min(helperArcRadius * 0.08, 16);
+};
+exports.getLabelFontSize = getLabelFontSize;
+/**
+ * Returns radial gauge's stroke width
+ * @method getGaugeStrokeWidth
+ * @param {Number} height
+ * @returns {Number} radial gauge's stroke width
+ */
+var getGaugeStrokeWidth = function getGaugeStrokeWidth(height) {
+  return height >= 225 ? 30 : 16;
+};
+exports.getGaugeStrokeWidth = getGaugeStrokeWidth;
+/**
+ * sort the ranges in ascending order
+ * @method getSortedGaugeRanges
+ * @param {Array} gaugeRanges
+ * @return {Array} sortedRanges
+ */
+var getSortedGaugeRanges = function getSortedGaugeRanges(gaugeRanges) {
+  gaugeRanges.sort(function (a, b) {
+    if (a.to == null) return 1;
+    if (b.to == null) return -1;
+    return +a.to - +b.to;
+  });
+  return gaugeRanges;
+};
+exports.getSortedGaugeRanges = getSortedGaugeRanges;
+/**
+ * format the ranges
+ * @method getFormattedGaugeRanges
+ * @param {Array} gaugeRanges
+ * @param {number} minValue
+ * @param {number} maxValue
+ * @return {Array} formatted, bounded gauge ranges
+ */
+var getFormattedGaugeRanges = function getFormattedGaugeRanges(gaugeRanges, minValue, maxValue) {
+  var formattedGaugeRanges = [];
+  gaugeRanges.forEach(function (range, index) {
+    if (index === 0 && minValue < range.to) {
+      var newRange = {
+        from: minValue,
+        to: range.to,
+        value: range.value
+      };
+      if (maxValue < range.to) {
+        newRange.to = maxValue;
+      }
+      formattedGaugeRanges.push(newRange);
+    }
+    if (index === gaugeRanges.length - 1 && maxValue > range.from) {
+      var _newRange = {
+        from: range.from,
+        to: maxValue,
+        value: range.value
+      };
+      if (minValue > range.from) {
+        _newRange.from = minValue;
+      }
+      formattedGaugeRanges.push(_newRange);
+    }
+    if (Object.keys(range).includes('from') && Object.keys(range).includes('to')) {
+      var _newRange2 = Object.assign({}, range);
+      if (minValue > range.from && minValue < range.to) {
+        _newRange2.from = minValue;
+      }
+      if (maxValue > range.from && maxValue < range.to) {
+        _newRange2.to = maxValue;
+      }
+      if (minValue < range.to && maxValue > range.from) {
+        formattedGaugeRanges.push(_newRange2);
+      }
+    }
+  });
+  return formattedGaugeRanges;
+};
+exports.getFormattedGaugeRanges = getFormattedGaugeRanges;
 
 /***/ })